@@ -31,6 +35,8 @@ const NicknamePopover = ({
address={address}
diameter={36}
className="nickname-popover__identicon"
+ useTokenDetection={useTokenDetection}
+ tokenList={tokenList}
/>
{nickname || shortenAddress(address)}
diff --git a/ui/components/ui/update-nickname-popover/update-nickname-popover.js b/ui/components/ui/update-nickname-popover/update-nickname-popover.js
index 2713d7b70..3396d4fdc 100644
--- a/ui/components/ui/update-nickname-popover/update-nickname-popover.js
+++ b/ui/components/ui/update-nickname-popover/update-nickname-popover.js
@@ -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 (
{t('address')}
diff --git a/ui/helpers/utils/icon-factory.js b/ui/helpers/utils/icon-factory.js
index c7f2e5260..5e75f20fc 100644
--- a/ui/helpers/utils/icon-factory.js
+++ b/ui/helpers/utils/icon-factory.js
@@ -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;
}
diff --git a/ui/hooks/useAddressDetails.js b/ui/hooks/useAddressDetails.js
index 9755f3bf1..2f020c07a 100644
--- a/ui/hooks/useAddressDetails.js
+++ b/ui/hooks/useAddressDetails.js
@@ -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),
diff --git a/ui/hooks/useTokensToSearch.js b/ui/hooks/useTokensToSearch.js
index ac06d84ef..55cadd863 100644
--- a/ui/hooks/useTokensToSearch.js
+++ b/ui/hooks/useTokensToSearch.js
@@ -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);
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 593d2bafe..7752305a2 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -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 ||
diff --git a/ui/pages/import-token/token-list/token-list.component.js b/ui/pages/import-token/token-list/token-list.component.js
index 4d6827a99..73ac862bf 100644
--- a/ui/pages/import-token/token-list/token-list.component.js
+++ b/ui/pages/import-token/token-list/token-list.component.js
@@ -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]);
diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js
index 853832811..5b4d067ad 100644
--- a/ui/pages/token-details/token-details-page.js
+++ b/ui/pages/token-details/token-details-page.js
@@ -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),