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 (
@@ -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 (