diff --git a/ui/components/multichain/account-details/account-details.js b/ui/components/multichain/account-details/account-details.js index 2b0167889..8322b2f16 100644 --- a/ui/components/multichain/account-details/account-details.js +++ b/ui/components/multichain/account-details/account-details.js @@ -14,7 +14,7 @@ import { TextVariant, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { getMetaMaskAccountsOrdered } from '../../../selectors'; +import { getMetaMaskAccountsOrdered, getUseBlockie } from '../../../selectors'; import { clearAccountDetails, hideWarning, @@ -41,7 +41,7 @@ export const AccountDetails = ({ address }) => { const dispatch = useDispatch(); const t = useI18nContext(); const trackEvent = useContext(MetaMetricsContext); - const useBlockie = useSelector((state) => state.metamask.useBlockie); + const useBlockie = useSelector(getUseBlockie); const accounts = useSelector(getMetaMaskAccountsOrdered); const { name } = accounts.find((account) => account.address === address); const [showHoldToReveal, setShowHoldToReveal] = useState(false); diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index ea9d9675d..77f356102 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/ui/components/multichain/account-list-item/account-list-item.js @@ -44,6 +44,7 @@ import { MetaMetricsEventName, } from '../../../../shared/constants/metametrics'; import { MetaMetricsContext } from '../../../contexts/metametrics'; +import { getUseBlockie } from '../../../selectors'; const MAXIMUM_CURRENCY_DECIMALS = 3; const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 17; @@ -82,7 +83,7 @@ export const AccountListItem = ({ const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false); const [accountListItemMenuElement, setAccountListItemMenuElement] = useState(); - const useBlockie = useSelector((state) => state.metamask.useBlockie); + const useBlockie = useSelector(getUseBlockie); const setAccountListItemMenuRef = (ref) => { setAccountListItemMenuElement(ref); diff --git a/ui/components/multichain/account-picker/account-picker.js b/ui/components/multichain/account-picker/account-picker.js index a093d249a..b91d1e3ba 100644 --- a/ui/components/multichain/account-picker/account-picker.js +++ b/ui/components/multichain/account-picker/account-picker.js @@ -24,6 +24,7 @@ import { TextColor, TextVariant, } from '../../../helpers/constants/design-system'; +import { getUseBlockie } from '../../../selectors'; import { shortenAddress } from '../../../helpers/utils/util'; export const AccountPicker = ({ @@ -33,7 +34,7 @@ export const AccountPicker = ({ disabled, showAddress = false, }) => { - const useBlockie = useSelector((state) => state.metamask.useBlockie); + const useBlockie = useSelector(getUseBlockie); const shortenedAddress = shortenAddress(toChecksumHexAddress(address)); return ( diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 7924f2c91..f4bac768d 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -1137,6 +1137,16 @@ export function getUseNftDetection(state) { return Boolean(state.metamask.useNftDetection); } +/** + * To get the useBlockie flag which determines whether we show blockies or Jazzicons + * + * @param {*} state + * @returns Boolean + */ +export function getUseBlockie(state) { + return Boolean(state.metamask.useBlockie); +} + /** * To get the openSeaEnabled flag which determines whether we use OpenSea's API *