mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Convert ConfirmAddSuggestedToken to a functional component + cleanup (#13377)
* FC: ConfirmAddSuggestedToken - change class to functional component * clean: reorganize functions (no logic change) * FC: ConfirmAddSuggestedToken pt. 2 - preserve trackEvent logic -> metricsEvent * clean: rm _ prefix from fn name - why? now, only 3 other functions remain prefixed w/ '_' * clean: update useEffect hook * clean: alphabetize props * clean: functions in ConfirmAddSuggestedToken * clean: use arrow fn for FC
This commit is contained in:
Ariella Vu
GitHub
parent
8756ad2e78
commit
667350d15a
@ -1,94 +1,100 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { useContext, useEffect } 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 { I18nContext } from '../../contexts/i18n';
|
||||
import { MetaMetricsContext } from '../../contexts/metametrics';
|
||||
import { isEqualCaseInsensitive } from '../../helpers/utils/util';
|
||||
|
||||
export default class ConfirmAddSuggestedToken extends Component {
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
trackEvent: PropTypes.func,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
history: PropTypes.object,
|
||||
acceptWatchAsset: PropTypes.func,
|
||||
rejectWatchAsset: PropTypes.func,
|
||||
mostRecentOverviewPage: PropTypes.string.isRequired,
|
||||
suggestedAssets: PropTypes.array,
|
||||
tokens: PropTypes.array,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this._checksuggestedAssets();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this._checksuggestedAssets();
|
||||
}
|
||||
|
||||
_checksuggestedAssets() {
|
||||
function getTokenName(name, symbol) {
|
||||
return typeof name === 'undefined' ? symbol : `${name} (${symbol})`;
|
||||
}
|
||||
const ConfirmAddSuggestedToken = (props) => {
|
||||
const {
|
||||
mostRecentOverviewPage,
|
||||
suggestedAssets = [],
|
||||
acceptWatchAsset,
|
||||
history,
|
||||
} = this.props;
|
||||
mostRecentOverviewPage,
|
||||
rejectWatchAsset,
|
||||
suggestedAssets,
|
||||
tokens,
|
||||
} = props;
|
||||
|
||||
if (suggestedAssets.length > 0) {
|
||||
return;
|
||||
}
|
||||
const metricsEvent = useContext(MetaMetricsContext);
|
||||
const t = useContext(I18nContext);
|
||||
|
||||
const tokenAddedEvent = (asset) => {
|
||||
metricsEvent({
|
||||
event: 'Token Added',
|
||||
category: 'Wallet',
|
||||
sensitiveProperties: {
|
||||
token_symbol: asset.symbol,
|
||||
token_contract_address: asset.address,
|
||||
token_decimal_precision: asset.decimals,
|
||||
unlisted: asset.unlisted,
|
||||
source: 'dapp',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns true if any suggestedAssets 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.
|
||||
*/
|
||||
const checkNameReuse = () => {
|
||||
const duplicates = suggestedAssets.filter(({ asset }) => {
|
||||
const dupes = tokens.filter(
|
||||
(old) =>
|
||||
old.symbol === asset.symbol &&
|
||||
!isEqualCaseInsensitive(old.address, asset.address),
|
||||
);
|
||||
return dupes.length > 0;
|
||||
});
|
||||
return duplicates.length > 0;
|
||||
};
|
||||
|
||||
const checkTokenDuplicates = () => {
|
||||
const pending = suggestedAssets.map(({ asset }) =>
|
||||
asset.address.toUpperCase(),
|
||||
);
|
||||
const existing = tokens.map((token) => token.address.toUpperCase());
|
||||
const dupes = pending.filter((proposed) => {
|
||||
return existing.includes(proposed);
|
||||
});
|
||||
|
||||
return dupes.length > 0;
|
||||
};
|
||||
|
||||
const hasTokenDuplicates = checkTokenDuplicates();
|
||||
const reusesName = checkNameReuse();
|
||||
|
||||
useEffect(() => {
|
||||
if (!suggestedAssets.length) {
|
||||
history.push(mostRecentOverviewPage);
|
||||
}
|
||||
|
||||
getTokenName(name, symbol) {
|
||||
return typeof name === 'undefined' ? symbol : `${name} (${symbol})`;
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
suggestedAssets,
|
||||
tokens,
|
||||
rejectWatchAsset,
|
||||
history,
|
||||
mostRecentOverviewPage,
|
||||
acceptWatchAsset,
|
||||
} = this.props;
|
||||
|
||||
const hasTokenDuplicates = this.checkTokenDuplicates(
|
||||
suggestedAssets,
|
||||
tokens,
|
||||
);
|
||||
const reusesName = this.checkNameReuse(suggestedAssets, tokens);
|
||||
}, [history, suggestedAssets, mostRecentOverviewPage]);
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-container__header">
|
||||
<div className="page-container__title">
|
||||
{this.context.t('addSuggestedTokens')}
|
||||
</div>
|
||||
<div className="page-container__title">{t('addSuggestedTokens')}</div>
|
||||
<div className="page-container__subtitle">
|
||||
{this.context.t('likeToImportTokens')}
|
||||
{t('likeToImportTokens')}
|
||||
</div>
|
||||
{hasTokenDuplicates ? (
|
||||
<div className="warning">{this.context.t('knownTokenWarning')}</div>
|
||||
<div className="warning">{t('knownTokenWarning')}</div>
|
||||
) : null}
|
||||
{reusesName ? (
|
||||
<div className="warning">
|
||||
{this.context.t('reusedTokenNameWarning')}
|
||||
</div>
|
||||
<div className="warning">{t('reusedTokenNameWarning')}</div>
|
||||
) : null}
|
||||
</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 className="confirm-import-token__token">{t('token')}</div>
|
||||
<div className="confirm-import-token__balance">{t('balance')}</div>
|
||||
</div>
|
||||
<div className="confirm-import-token__token-list">
|
||||
{suggestedAssets.map(({ asset }) => {
|
||||
@ -105,7 +111,7 @@ export default class ConfirmAddSuggestedToken extends Component {
|
||||
image={asset.image}
|
||||
/>
|
||||
<div className="confirm-import-token__name">
|
||||
{this.getTokenName(asset.name, asset.symbol)}
|
||||
{getTokenName(asset.name, asset.symbol)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="confirm-import-token__balance">
|
||||
@ -130,7 +136,7 @@ export default class ConfirmAddSuggestedToken extends Component {
|
||||
history.push(mostRecentOverviewPage);
|
||||
}}
|
||||
>
|
||||
{this.context.t('cancel')}
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
@ -141,60 +147,27 @@ export default class ConfirmAddSuggestedToken extends Component {
|
||||
await Promise.all(
|
||||
suggestedAssets.map(async ({ asset, id }) => {
|
||||
await acceptWatchAsset(id);
|
||||
this.context.trackEvent({
|
||||
event: 'Token Added',
|
||||
category: 'Wallet',
|
||||
sensitiveProperties: {
|
||||
token_symbol: asset.symbol,
|
||||
token_contract_address: asset.address,
|
||||
token_decimal_precision: asset.decimals,
|
||||
unlisted: asset.unlisted,
|
||||
source: 'dapp',
|
||||
},
|
||||
});
|
||||
tokenAddedEvent(asset);
|
||||
}),
|
||||
);
|
||||
history.push(mostRecentOverviewPage);
|
||||
}}
|
||||
>
|
||||
{this.context.t('addToken')}
|
||||
{t('addToken')}
|
||||
</Button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
checkTokenDuplicates(suggestedAssets, tokens) {
|
||||
const pending = suggestedAssets.map(({ asset }) =>
|
||||
asset.address.toUpperCase(),
|
||||
);
|
||||
const existing = tokens.map((token) => token.address.toUpperCase());
|
||||
const dupes = pending.filter((proposed) => {
|
||||
return existing.includes(proposed);
|
||||
});
|
||||
ConfirmAddSuggestedToken.propTypes = {
|
||||
acceptWatchAsset: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
mostRecentOverviewPage: PropTypes.string.isRequired,
|
||||
rejectWatchAsset: PropTypes.func,
|
||||
suggestedAssets: PropTypes.array,
|
||||
tokens: PropTypes.array,
|
||||
};
|
||||
|
||||
return dupes.length > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if any suggestedAssets 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.
|
||||
*
|
||||
* @param suggestedAssets
|
||||
* @param tokens
|
||||
*/
|
||||
checkNameReuse(suggestedAssets, tokens) {
|
||||
const duplicates = suggestedAssets.filter(({ asset }) => {
|
||||
const dupes = tokens.filter(
|
||||
(old) =>
|
||||
old.symbol === asset.symbol &&
|
||||
!isEqualCaseInsensitive(old.address, asset.address),
|
||||
);
|
||||
return dupes.length > 0;
|
||||
});
|
||||
return duplicates.length > 0;
|
||||
}
|
||||
}
|
||||
export default ConfirmAddSuggestedToken;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user