From 53f585b68e1a8dae2fc510cc33c99a1acb17abe5 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 31 Aug 2023 08:53:22 -0500
Subject: [PATCH] UX: Create selector for blockie preference (#20577)

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
---
 .../multichain/account-details/account-details.js      |  4 ++--
 .../multichain/account-list-item/account-list-item.js  |  3 ++-
 .../multichain/account-picker/account-picker.js        |  3 ++-
 ui/selectors/selectors.js                              | 10 ++++++++++
 4 files changed, 16 insertions(+), 4 deletions(-)

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
  *