mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Update token detection logic to only control auto-detection (#14251)
This commit is contained in:
parent
a7a1646002
commit
07231e42b2
@ -151,14 +151,22 @@ export default class Identicon extends PureComponent {
|
||||
}
|
||||
|
||||
if (address) {
|
||||
// token from dynamic api list is fetched when useTokenDetection is true
|
||||
// And since the token.address from allTokens is checksumaddress
|
||||
// tokenAddress have to be changed to lowercase when we are using dynamic list
|
||||
const tokenAddress = useTokenDetection ? address.toLowerCase() : address;
|
||||
if (tokenAddress && tokenList[tokenAddress]?.iconUrl) {
|
||||
return this.renderJazzicon();
|
||||
if (process.env.TOKEN_DETECTION_V2) {
|
||||
if (tokenList[address.toLowerCase()]?.iconUrl) {
|
||||
return this.renderJazzicon();
|
||||
}
|
||||
} else {
|
||||
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
|
||||
// token from dynamic api list is fetched when useTokenDetection is true
|
||||
// And since the token.address from allTokens is checksumaddress
|
||||
// tokenAddress have to be changed to lowercase when we are using dynamic list
|
||||
const tokenAddress = useTokenDetection
|
||||
? address.toLowerCase()
|
||||
: address;
|
||||
if (tokenAddress && tokenList[tokenAddress]?.iconUrl) {
|
||||
return this.renderJazzicon();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames({ 'identicon__address-wrapper': addBorder })}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React, { useCallback, useContext } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { I18nContext } from '../../../contexts/i18n';
|
||||
import Tooltip from '../tooltip';
|
||||
@ -8,6 +9,7 @@ import Identicon from '../identicon/identicon.component';
|
||||
import { shortenAddress } from '../../../helpers/utils/util';
|
||||
import CopyIcon from '../icon/copy-icon.component';
|
||||
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
|
||||
import { getUseTokenDetection, getTokenList } from '../../../selectors';
|
||||
|
||||
const NicknamePopover = ({
|
||||
address,
|
||||
@ -23,6 +25,8 @@ const NicknamePopover = ({
|
||||
}, [onAdd]);
|
||||
|
||||
const [copied, handleCopy] = useCopyToClipboard();
|
||||
const useTokenDetection = useSelector(getUseTokenDetection);
|
||||
const tokenList = useSelector(getTokenList);
|
||||
|
||||
return (
|
||||
<div className="nickname-popover">
|
||||
@ -31,6 +35,8 @@ const NicknamePopover = ({
|
||||
address={address}
|
||||
diameter={36}
|
||||
className="nickname-popover__identicon"
|
||||
useTokenDetection={useTokenDetection}
|
||||
tokenList={tokenList}
|
||||
/>
|
||||
<div className="nickname-popover__address">
|
||||
{nickname || shortenAddress(address)}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React, { useCallback, useContext, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Popover from '../popover';
|
||||
@ -8,6 +9,7 @@ import TextField from '../text-field';
|
||||
import { I18nContext } from '../../../contexts/i18n';
|
||||
|
||||
import Identicon from '../identicon/identicon.component';
|
||||
import { getUseTokenDetection, getTokenList } from '../../../selectors';
|
||||
|
||||
export default function UpdateNicknamePopover({
|
||||
nickname,
|
||||
@ -42,6 +44,9 @@ export default function UpdateNicknamePopover({
|
||||
onClose();
|
||||
};
|
||||
|
||||
const useTokenDetection = useSelector(getUseTokenDetection);
|
||||
const tokenList = useSelector(getTokenList);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
title={nickname ? t('editAddressNickname') : t('addANickname')}
|
||||
@ -72,6 +77,8 @@ export default function UpdateNicknamePopover({
|
||||
className="update-nickname__content__indenticon"
|
||||
address={address}
|
||||
diameter={36}
|
||||
useTokenDetection={useTokenDetection}
|
||||
tokenList={tokenList}
|
||||
/>
|
||||
<label className="update-nickname__content__label--capitalized">
|
||||
{t('address')}
|
||||
|
@ -23,16 +23,23 @@ IconFactory.prototype.iconForAddress = function (
|
||||
useTokenDetection,
|
||||
tokenList,
|
||||
) {
|
||||
// When useTokenDetection flag is true the tokenList contains tokens with non-checksum address from the dynamic token service api,
|
||||
// When useTokenDetection flag is false the tokenList contains tokens with checksum addresses from contract-metadata.
|
||||
// So the flag indicates whether the address of tokens currently on the tokenList is checksum or not.
|
||||
// And since the token.address from allTokens is checksumaddress
|
||||
// tokenAddress have to be changed to lowercase when we are using dynamic list
|
||||
const addr = useTokenDetection
|
||||
? address.toLowerCase()
|
||||
: toChecksumHexAddress(address);
|
||||
if (iconExistsFor(addr, tokenList)) {
|
||||
return imageElFor(addr, useTokenDetection, tokenList);
|
||||
if (process.env.TOKEN_DETECTION_V2) {
|
||||
if (iconExistsFor(address.toLowerCase(), tokenList)) {
|
||||
return imageElFor(address.toLowerCase(), useTokenDetection, tokenList);
|
||||
}
|
||||
} else {
|
||||
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
|
||||
// When useTokenDetection flag is true the tokenList contains tokens with non-checksum address from the dynamic token service api,
|
||||
// When useTokenDetection flag is false the tokenList contains tokens with checksum addresses from contract-metadata.
|
||||
// So the flag indicates whether the address of tokens currently on the tokenList is checksum or not.
|
||||
// And since the token.address from allTokens is checksumaddress
|
||||
// tokenAddress have to be changed to lowercase when we are using dynamic list
|
||||
const addr = useTokenDetection
|
||||
? address.toLowerCase()
|
||||
: toChecksumHexAddress(address);
|
||||
if (iconExistsFor(addr, tokenList)) {
|
||||
return imageElFor(addr, useTokenDetection, tokenList);
|
||||
}
|
||||
}
|
||||
|
||||
return this.generateIdenticonSvg(address, diameter);
|
||||
@ -76,7 +83,7 @@ function imageElFor(address, useTokenDetection, tokenList) {
|
||||
// so that it can be accessed using the filename in iconUrl.
|
||||
const path = useTokenDetection ? fileName : `images/contract/${fileName}`;
|
||||
const img = document.createElement('img');
|
||||
img.src = path;
|
||||
img.src = process.env.TOKEN_DETECTION_V2 ? fileName : path;
|
||||
img.style.width = '100%';
|
||||
return img;
|
||||
}
|
||||
|
@ -28,16 +28,22 @@ const useAddressDetails = (toAddress) => {
|
||||
if (identities[toAddress]?.name) {
|
||||
return { toName: identities[toAddress].name, isTrusted: true };
|
||||
}
|
||||
const casedTokenList = useTokenDetection
|
||||
? tokenList
|
||||
: Object.keys(tokenList).reduce((acc, base) => {
|
||||
return {
|
||||
...acc,
|
||||
[base.toLowerCase()]: tokenList[base],
|
||||
};
|
||||
}, {});
|
||||
if (casedTokenList[toAddress]?.name) {
|
||||
return { toName: casedTokenList[toAddress].name, isTrusted: true };
|
||||
if (process.env.TOKEN_DETECTION_V2) {
|
||||
if (tokenList[toAddress]?.name) {
|
||||
return { toName: tokenList[toAddress].name, isTrusted: true };
|
||||
}
|
||||
} else {
|
||||
const casedTokenList = useTokenDetection
|
||||
? tokenList
|
||||
: Object.keys(tokenList).reduce((acc, base) => {
|
||||
return {
|
||||
...acc,
|
||||
[base.toLowerCase()]: tokenList[base],
|
||||
};
|
||||
}, {});
|
||||
if (casedTokenList[toAddress]?.name) {
|
||||
return { toName: casedTokenList[toAddress].name, isTrusted: true };
|
||||
}
|
||||
}
|
||||
return {
|
||||
toName: shortenAddress(checksummedAddress),
|
||||
|
@ -19,6 +19,7 @@ import { isSwapsDefaultTokenSymbol } from '../../shared/modules/swaps.utils';
|
||||
import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
|
||||
import { useEqualityCheck } from './useEqualityCheck';
|
||||
|
||||
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
|
||||
const shuffledContractMap = shuffle(
|
||||
Object.entries(contractMap)
|
||||
.map(([address, tokenData]) => ({
|
||||
@ -38,10 +39,6 @@ export function getRenderableTokenData(
|
||||
useTokenDetection,
|
||||
) {
|
||||
const { symbol, name, address, iconUrl, string, balance, decimals } = token;
|
||||
// token from dynamic api list is fetched when useTokenDetection is true
|
||||
// And since the token.address from allTokens is checksumaddress
|
||||
// token Address have to be changed to lowercase when we are using dynamic list
|
||||
const tokenAddress = useTokenDetection ? address?.toLowerCase() : address;
|
||||
const formattedFiat =
|
||||
getTokenFiatAmount(
|
||||
isSwapsDefaultTokenSymbol(symbol, chainId)
|
||||
@ -64,11 +61,21 @@ export function getRenderableTokenData(
|
||||
symbol,
|
||||
false,
|
||||
) || '';
|
||||
const usedIconUrl =
|
||||
iconUrl ||
|
||||
(tokenList[tokenAddress] &&
|
||||
`images/contract/${tokenList[tokenAddress].iconUrl}`) ||
|
||||
token?.image;
|
||||
let tokenAddress;
|
||||
let tokenIconUrl;
|
||||
if (process.env.TOKEN_DETECTION_V2) {
|
||||
tokenAddress = address?.toLowerCase();
|
||||
tokenIconUrl = tokenList[tokenAddress]?.iconUrl;
|
||||
} else {
|
||||
// token from dynamic api list is fetched when useTokenDetection is true
|
||||
// And since the token.address from allTokens is checksumaddress
|
||||
// token Address have to be changed to lowercase when we are using dynamic list
|
||||
tokenAddress = useTokenDetection ? address?.toLowerCase() : address;
|
||||
tokenIconUrl = useTokenDetection
|
||||
? tokenList[tokenAddress]?.iconUrl
|
||||
: `images/contract/${tokenList[tokenAddress].iconUrl}`;
|
||||
}
|
||||
const usedIconUrl = iconUrl || tokenIconUrl || token?.image;
|
||||
return {
|
||||
...token,
|
||||
primaryLabel: symbol,
|
||||
@ -97,10 +104,13 @@ export function useTokensToSearch({
|
||||
const defaultSwapsToken = useSelector(getSwapsDefaultToken, shallowEqual);
|
||||
const tokenList = useSelector(getTokenList, isEqual);
|
||||
const useTokenDetection = useSelector(getUseTokenDetection);
|
||||
// token from dynamic api list is fetched when useTokenDetection is true
|
||||
const shuffledTokenList = useTokenDetection
|
||||
? shuffledTokensList
|
||||
: shuffledContractMap;
|
||||
let shuffledTokenList = shuffledTokensList;
|
||||
if (!process.env.TOKEN_DETECTION_V2) {
|
||||
// token from dynamic api list is fetched when useTokenDetection is true
|
||||
shuffledTokenList = useTokenDetection
|
||||
? shuffledTokensList
|
||||
: shuffledContractMap;
|
||||
}
|
||||
const memoizedTopTokens = useEqualityCheck(topTokens);
|
||||
const memoizedUsersToken = useEqualityCheck(usersTokens);
|
||||
|
||||
|
@ -116,14 +116,17 @@ const mapStateToProps = (state, ownProps) => {
|
||||
|
||||
const tokenList = getTokenList(state);
|
||||
const useTokenDetection = getUseTokenDetection(state);
|
||||
const casedTokenList = useTokenDetection
|
||||
? tokenList
|
||||
: Object.keys(tokenList).reduce((acc, base) => {
|
||||
return {
|
||||
...acc,
|
||||
[base.toLowerCase()]: tokenList[base],
|
||||
};
|
||||
}, {});
|
||||
let casedTokenList = tokenList;
|
||||
if (!process.env.TOKEN_DETECTION_V2) {
|
||||
casedTokenList = useTokenDetection
|
||||
? tokenList
|
||||
: Object.keys(tokenList).reduce((acc, base) => {
|
||||
return {
|
||||
...acc,
|
||||
[base.toLowerCase()]: tokenList[base],
|
||||
};
|
||||
}, {});
|
||||
}
|
||||
const toName =
|
||||
identities[toAddress]?.name ||
|
||||
casedTokenList[toAddress]?.name ||
|
||||
|
@ -38,10 +38,14 @@ export default class TokenList extends Component {
|
||||
.fill(undefined)
|
||||
.map((_, i) => {
|
||||
const { iconUrl, symbol, name, address } = results[i] || {};
|
||||
// token from dynamic api list is fetched when useTokenDetection is true
|
||||
const iconPath = useTokenDetection
|
||||
? iconUrl
|
||||
: `images/contract/${iconUrl}`;
|
||||
let iconPath = iconUrl;
|
||||
if (!process.env.TOKEN_DETECTION_V2) {
|
||||
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
|
||||
// token from dynamic api list is fetched when useTokenDetection is true
|
||||
iconPath = useTokenDetection
|
||||
? iconUrl
|
||||
: `images/contract/${iconUrl}`;
|
||||
}
|
||||
const tokenAlreadyAdded = checkExistingAddresses(address, tokens);
|
||||
const onClick = () =>
|
||||
!tokenAlreadyAdded && onToggleToken(results[i]);
|
||||
|
@ -40,9 +40,10 @@ export default function TokenDetailsPage() {
|
||||
);
|
||||
const aggregators = tokenMetadata?.aggregators?.join(', ');
|
||||
const fileName = tokenMetadata?.iconUrl;
|
||||
const imagePath = useTokenDetection
|
||||
? fileName
|
||||
: `images/contract/${fileName}`;
|
||||
let imagePath = fileName;
|
||||
if (!process.env.TOKEN_DETECTION_V2) {
|
||||
imagePath = useTokenDetection ? fileName : `images/contract/${fileName}`;
|
||||
}
|
||||
|
||||
const token = tokens.find(({ address }) =>
|
||||
isEqualCaseInsensitive(address, tokenAddress),
|
||||
|
Loading…
Reference in New Issue
Block a user