1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js

195 lines
6.3 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Button from '../../components/ui/button';
import Identicon from '../../components/ui/identicon';
import TokenBalance from '../../components/ui/token-balance';
import { getEnvironmentType } from '../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
export default class ConfirmAddSuggestedToken extends Component {
static contextTypes = {
t: PropTypes.func,
trackEvent: PropTypes.func,
};
static propTypes = {
history: PropTypes.object,
addToken: PropTypes.func,
mostRecentOverviewPage: PropTypes.string.isRequired,
pendingTokens: PropTypes.object,
removeSuggestedTokens: PropTypes.func,
tokens: PropTypes.array,
};
2020-11-03 00:41:28 +01:00
componentDidMount() {
this._checkPendingTokens();
}
2020-11-03 00:41:28 +01:00
componentDidUpdate() {
this._checkPendingTokens();
}
2020-11-03 00:41:28 +01:00
_checkPendingTokens() {
const { mostRecentOverviewPage, pendingTokens = {}, history } = this.props;
if (Object.keys(pendingTokens).length > 0) {
return;
}
if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) {
global.platform.closeCurrentWindow();
} else {
history.push(mostRecentOverviewPage);
}
}
2020-11-03 00:41:28 +01:00
getTokenName(name, symbol) {
return typeof name === 'undefined' ? symbol : `${name} (${symbol})`;
}
2020-11-03 00:41:28 +01:00
render() {
const {
addToken,
pendingTokens,
tokens,
removeSuggestedTokens,
history,
mostRecentOverviewPage,
} = this.props;
const pendingTokenKey = Object.keys(pendingTokens)[0];
const pendingToken = pendingTokens[pendingTokenKey];
const hasTokenDuplicates = this.checkTokenDuplicates(pendingTokens, tokens);
const reusesName = this.checkNameReuse(pendingTokens, tokens);
return (
<div className="page-container">
<div className="page-container__header">
<div className="page-container__title">
2020-11-03 00:41:28 +01:00
{this.context.t('addSuggestedTokens')}
</div>
<div className="page-container__subtitle">
2020-11-03 00:41:28 +01:00
{this.context.t('likeToAddTokens')}
</div>
2020-11-03 00:41:28 +01:00
{hasTokenDuplicates ? (
<div className="warning">{this.context.t('knownTokenWarning')}</div>
) : null}
{reusesName ? (
<div className="warning">
{this.context.t('reusedTokenNameWarning')}
</div>
) : null}
</div>
<div className="page-container__content">
<div className="confirm-add-token">
<div className="confirm-add-token__header">
<div className="confirm-add-token__token">
2020-11-03 00:41:28 +01:00
{this.context.t('token')}
</div>
<div className="confirm-add-token__balance">
2020-11-03 00:41:28 +01:00
{this.context.t('balance')}
</div>
</div>
<div className="confirm-add-token__token-list">
2020-11-03 00:41:28 +01:00
{Object.entries(pendingTokens).map(([address, token]) => {
const { name, symbol, image } = token;
2020-11-03 00:41:28 +01:00
return (
<div
className="confirm-add-token__token-list-item"
key={address}
>
<div className="confirm-add-token__token confirm-add-token__data">
<Identicon
className="confirm-add-token__token-icon"
diameter={48}
address={address}
image={image}
/>
<div className="confirm-add-token__name">
{this.getTokenName(name, symbol)}
</div>
2020-11-03 00:41:28 +01:00
</div>
<div className="confirm-add-token__balance">
<TokenBalance token={token} />
</div>
</div>
);
2020-11-03 00:41:28 +01:00
})}
</div>
</div>
</div>
<div className="page-container__footer">
<footer>
<Button
type="default"
large
className="page-container__footer-button"
onClick={() => {
2020-11-03 00:41:28 +01:00
removeSuggestedTokens().then(() =>
history.push(mostRecentOverviewPage),
);
}}
>
2020-11-03 00:41:28 +01:00
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
large
className="page-container__footer-button"
disabled={pendingTokens.length === 0}
onClick={() => {
addToken(pendingToken)
.then(() => removeSuggestedTokens())
.then(() => {
this.context.trackEvent({
event: 'Token Added',
category: 'Wallet',
sensitiveProperties: {
token_symbol: pendingToken.symbol,
token_contract_address: pendingToken.address,
token_decimal_precision: pendingToken.decimals,
unlisted: pendingToken.unlisted,
source: 'dapp',
},
});
})
.then(() => history.push(mostRecentOverviewPage));
}}
>
2020-11-03 00:41:28 +01:00
{this.context.t('addToken')}
</Button>
</footer>
</div>
</div>
);
}
2020-11-03 00:41:28 +01:00
checkTokenDuplicates(pendingTokens, tokens) {
const pending = Object.keys(pendingTokens);
const existing = tokens.map((token) => token.address);
const dupes = pending.filter((proposed) => {
return existing.includes(proposed);
});
return dupes.length > 0;
}
/**
* Returns true if any pendingTokens both:
* - Share a symbol with an existing `tokens` member.
* - Does not share an address with that same `tokens` member.
* This should be flagged as possibly deceptive or confusing.
*/
2020-11-03 00:41:28 +01:00
checkNameReuse(pendingTokens, tokens) {
const duplicates = Object.keys(pendingTokens)
.map((addr) => pendingTokens[addr])
.filter((token) => {
2020-11-03 00:41:28 +01:00
const dupes = tokens
.filter((old) => old.symbol === token.symbol)
.filter((old) => old.address !== token.address);
return dupes.length > 0;
});
return duplicates.length > 0;
}
}