mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
142 lines
4.8 KiB
JavaScript
142 lines
4.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
ASSET_ROUTE,
|
|
IMPORT_TOKEN_ROUTE,
|
|
} from '../../helpers/constants/routes';
|
|
import Button from '../../components/ui/button';
|
|
import Identicon from '../../components/ui/identicon';
|
|
import TokenBalance from '../../components/ui/token-balance';
|
|
|
|
export default class ConfirmImportToken extends Component {
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
trackEvent: PropTypes.func,
|
|
};
|
|
|
|
static propTypes = {
|
|
history: PropTypes.object,
|
|
clearPendingTokens: PropTypes.func,
|
|
addTokens: PropTypes.func,
|
|
mostRecentOverviewPage: PropTypes.string.isRequired,
|
|
pendingTokens: PropTypes.object,
|
|
};
|
|
|
|
componentDidMount() {
|
|
const { mostRecentOverviewPage, pendingTokens = {}, history } = this.props;
|
|
|
|
if (Object.keys(pendingTokens).length === 0) {
|
|
history.push(mostRecentOverviewPage);
|
|
}
|
|
}
|
|
|
|
getTokenName(name, symbol) {
|
|
return typeof name === 'undefined' ? symbol : `${name} (${symbol})`;
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
history,
|
|
addTokens,
|
|
clearPendingTokens,
|
|
mostRecentOverviewPage,
|
|
pendingTokens,
|
|
} = this.props;
|
|
|
|
return (
|
|
<div className="page-container">
|
|
<div className="page-container__header">
|
|
<div className="page-container__title">
|
|
{this.context.t('importTokensCamelCase')}
|
|
</div>
|
|
<div className="page-container__subtitle">
|
|
{this.context.t('likeToImportTokens')}
|
|
</div>
|
|
</div>
|
|
<div className="page-container__content">
|
|
<div className="confirm-import-token">
|
|
<div className="confirm-import-token__header">
|
|
<div className="confirm-import-token__token">
|
|
{this.context.t('token')}
|
|
</div>
|
|
<div className="confirm-import-token__balance">
|
|
{this.context.t('balance')}
|
|
</div>
|
|
</div>
|
|
<div className="confirm-import-token__token-list">
|
|
{Object.entries(pendingTokens).map(([address, token]) => {
|
|
const { name, symbol } = token;
|
|
|
|
return (
|
|
<div
|
|
className="confirm-import-token__token-list-item"
|
|
key={address}
|
|
>
|
|
<div className="confirm-import-token__token confirm-import-token__data">
|
|
<Identicon
|
|
className="confirm-import-token__token-icon"
|
|
diameter={48}
|
|
address={address}
|
|
/>
|
|
<div className="confirm-import-token__name">
|
|
{this.getTokenName(name, symbol)}
|
|
</div>
|
|
</div>
|
|
<div className="confirm-import-token__balance">
|
|
<TokenBalance token={token} />
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="page-container__footer">
|
|
<footer>
|
|
<Button
|
|
type="secondary"
|
|
large
|
|
className="page-container__footer-button"
|
|
onClick={() => history.push(IMPORT_TOKEN_ROUTE)}
|
|
>
|
|
{this.context.t('back')}
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
large
|
|
className="page-container__footer-button"
|
|
onClick={() => {
|
|
addTokens(pendingTokens).then(() => {
|
|
const pendingTokenValues = Object.values(pendingTokens);
|
|
pendingTokenValues.forEach((pendingToken) => {
|
|
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: pendingToken.isCustom ? 'custom' : 'list',
|
|
},
|
|
});
|
|
});
|
|
clearPendingTokens();
|
|
const firstTokenAddress = pendingTokenValues?.[0].address?.toLowerCase();
|
|
if (firstTokenAddress) {
|
|
history.push(`${ASSET_ROUTE}/${firstTokenAddress}`);
|
|
} else {
|
|
history.push(mostRecentOverviewPage);
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
{this.context.t('importTokensCamelCase')}
|
|
</Button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|