Update token detection logic to only control auto-detection (#14251)

ui/components/ui/identicon/identicon.component.js

@@ -151,14 +151,22 @@ export default class Identicon extends PureComponent {
     }
 
     if (address) {
+      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;
+        const tokenAddress = useTokenDetection
+          ? address.toLowerCase()
+          : address;
         if (tokenAddress && tokenList[tokenAddress]?.iconUrl) {
           return this.renderJazzicon();
         }
-
+      }
       return (
         <div
           className={classnames({ 'identicon__address-wrapper': addBorder })}

ui/components/ui/nickname-popover/nickname-popover.component.js

@@ -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)}

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 (
     <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')}

ui/helpers/utils/icon-factory.js

@@ -23,6 +23,12 @@ IconFactory.prototype.iconForAddress = function (
   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.
@@ -34,6 +40,7 @@ IconFactory.prototype.iconForAddress = function (
     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;
 }

ui/hooks/useAddressDetails.js

@@ -28,6 +28,11 @@ const useAddressDetails = (toAddress) => {
   if (identities[toAddress]?.name) {
     return { toName: identities[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) => {
@@ -39,6 +44,7 @@ const useAddressDetails = (toAddress) => {
     if (casedTokenList[toAddress]?.name) {
       return { toName: casedTokenList[toAddress].name, isTrusted: true };
     }
+  }
   return {
     toName: shortenAddress(checksummedAddress),
     isTrusted: false,

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);
+  let shuffledTokenList = shuffledTokensList;
+  if (!process.env.TOKEN_DETECTION_V2) {
     // token from dynamic api list is fetched when useTokenDetection is true
-  const shuffledTokenList = useTokenDetection
+    shuffledTokenList = useTokenDetection
       ? shuffledTokensList
       : shuffledContractMap;
+  }
   const memoizedTopTokens = useEqualityCheck(topTokens);
   const memoizedUsersToken = useEqualityCheck(usersTokens);
 

ui/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -116,7 +116,9 @@ const mapStateToProps = (state, ownProps) => {
 
   const tokenList = getTokenList(state);
   const useTokenDetection = getUseTokenDetection(state);
-  const casedTokenList = useTokenDetection
+  let casedTokenList = tokenList;
+  if (!process.env.TOKEN_DETECTION_V2) {
+    casedTokenList = useTokenDetection
       ? tokenList
       : Object.keys(tokenList).reduce((acc, base) => {
           return {
@@ -124,6 +126,7 @@ const mapStateToProps = (state, ownProps) => {
             [base.toLowerCase()]: tokenList[base],
           };
         }, {});
+  }
   const toName =
     identities[toAddress]?.name ||
     casedTokenList[toAddress]?.name ||

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] || {};
+              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
-              const iconPath = useTokenDetection
+                iconPath = useTokenDetection
                   ? iconUrl
                   : `images/contract/${iconUrl}`;
+              }
               const tokenAlreadyAdded = checkExistingAddresses(address, tokens);
               const onClick = () =>
                 !tokenAlreadyAdded && onToggleToken(results[i]);

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),