From 0c2af43d3ad0f7c1cf21c9e0b44c93e119f83302 Mon Sep 17 00:00:00 2001
From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
Date: Fri, 10 Sep 2021 23:55:23 -0400
Subject: [PATCH] changing token address to lowercase for dynamic token list
 (#12071)

---
 app/scripts/metamask-controller.js                | 9 ++++++---
 ui/components/ui/identicon/identicon.component.js | 8 +++-----
 ui/helpers/utils/icon-factory.js                  | 9 ++++-----
 ui/hooks/useTokensToSearch.js                     | 7 +++----
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 297dbcaa2..891019324 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -1354,10 +1354,13 @@ export default class MetamaskController extends EventEmitter {
           checksummedAccountAddress
         ].filter((asset) => {
           if (asset.isERC721 === undefined) {
+            // since the token.address from allTokens is checksumaddress
+            // asset.address have to be changed to lowercase when we are using dynamic list
             const address = useTokenDetection
-              ? asset.address
-              : toChecksumHexAddress(asset.address);
-            if (tokenList[address] !== undefined && tokenList[address].erc20) {
+              ? asset.address.toLowerCase()
+              : asset.address;
+            // the tokenList will be holding only erc20 tokens
+            if (tokenList[address] !== undefined) {
               return true;
             }
           } else if (asset.isERC721 === false) {
diff --git a/ui/components/ui/identicon/identicon.component.js b/ui/components/ui/identicon/identicon.component.js
index b78f8e372..8215690d0 100644
--- a/ui/components/ui/identicon/identicon.component.js
+++ b/ui/components/ui/identicon/identicon.component.js
@@ -1,8 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
-
 import Jazzicon from '../jazzicon';
 import BlockieIdenticon from './blockieIdenticon';
 
@@ -103,9 +101,9 @@ export default class Identicon extends PureComponent {
 
     if (address) {
       // token from dynamic api list is fetched when useTokenDetection is true
-      const tokenAddress = useTokenDetection
-        ? address
-        : toChecksumHexAddress(address);
+      // 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();
       }
diff --git a/ui/helpers/utils/icon-factory.js b/ui/helpers/utils/icon-factory.js
index 2da53dbc9..f5a36b9f9 100644
--- a/ui/helpers/utils/icon-factory.js
+++ b/ui/helpers/utils/icon-factory.js
@@ -1,7 +1,4 @@
-import {
-  isValidHexAddress,
-  toChecksumHexAddress,
-} from '../../../shared/modules/hexstring-utils';
+import { isValidHexAddress } from '../../../shared/modules/hexstring-utils';
 
 let iconFactory;
 
@@ -26,7 +23,9 @@ IconFactory.prototype.iconForAddress = function (
   // 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.
-  const addr = useTokenDetection ? address : toChecksumHexAddress(address);
+  // 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() : address;
   if (iconExistsFor(addr, tokenList)) {
     return imageElFor(addr, useTokenDetection, tokenList);
   }
diff --git a/ui/hooks/useTokensToSearch.js b/ui/hooks/useTokensToSearch.js
index 3375a8cf9..625af05d3 100644
--- a/ui/hooks/useTokensToSearch.js
+++ b/ui/hooks/useTokensToSearch.js
@@ -16,7 +16,6 @@ import { getConversionRate } from '../ducks/metamask/metamask';
 
 import { getSwapsTokens } from '../ducks/swaps/swaps';
 import { isSwapsDefaultTokenSymbol } from '../../shared/modules/swaps.utils';
-import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
 import { useEqualityCheck } from './useEqualityCheck';
 
 const shuffledContractMap = shuffle(
@@ -39,9 +38,9 @@ export function getRenderableTokenData(
 ) {
   const { symbol, name, address, iconUrl, string, balance, decimals } = token;
   // token from dynamic api list is fetched when useTokenDetection is true
-  const tokenAddress = useTokenDetection
-    ? address
-    : toChecksumHexAddress(address);
+  // 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)