From 07231e42b23c4c2e1c2c3634235412ba67267318 Mon Sep 17 00:00:00 2001
From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
Date: Wed, 6 Apr 2022 13:59:16 -0400
Subject: [PATCH] Update token detection logic to only control auto-detection
 (#14251)

---
 .../ui/identicon/identicon.component.js       | 22 ++++++++----
 .../nickname-popover.component.js             |  6 ++++
 .../update-nickname-popover.js                |  7 ++++
 ui/helpers/utils/icon-factory.js              | 29 +++++++++------
 ui/hooks/useAddressDetails.js                 | 26 ++++++++------
 ui/hooks/useTokensToSearch.js                 | 36 ++++++++++++-------
 .../confirm-transaction-base.container.js     | 19 +++++-----
 .../token-list/token-list.component.js        | 12 ++++---
 ui/pages/token-details/token-details-page.js  |  7 ++--
 9 files changed, 108 insertions(+), 56 deletions(-)

diff --git a/ui/components/ui/identicon/identicon.component.js b/ui/components/ui/identicon/identicon.component.js
index 8174ab38e..b7aa747ab 100644
--- a/ui/components/ui/identicon/identicon.component.js
+++ b/ui/components/ui/identicon/identicon.component.js
@@ -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 })}
diff --git a/ui/components/ui/nickname-popover/nickname-popover.component.js b/ui/components/ui/nickname-popover/nickname-popover.component.js
index 87c1f9ef7..d0f8a194f 100644
--- a/ui/components/ui/nickname-popover/nickname-popover.component.js
+++ b/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)}
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 (
     <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')}
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),