From 29c2d01b5502b92c2b8e9a8bf9842384da18620a Mon Sep 17 00:00:00 2001
From: John Oshalusi <john.oshalusi@iohk.io>
Date: Mon, 15 Apr 2024 16:59:48 +0100
Subject: [PATCH] feat: organize avatar by environment name and wallet address

---
 .../components/DropdownMenu/DropdownMenu.tsx  |  7 +++++--
 .../components/UserInfo.tsx                   | 20 ++++++++++++++++---
 .../src/types/local-storage.ts                |  2 +-
 .../nfts/components/DetailsDrawer.tsx         |  5 +++--
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
index 6a8dd31bc0..b3ca2aa2e9 100644
--- a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx
@@ -28,12 +28,15 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
     setIsDropdownMenuOpen
   } = useWalletStore();
   const [handle] = useGetHandles();
-  const { environmentName } = useWalletStore();
+  const { environmentName, walletInfo } = useWalletStore();
   const [avatars] = useLocalStorage('userAvatar');
 
   const Chevron = isPopup ? ChevronSmall : ChevronNormal;
   const handleImage = handle?.profilePic;
-  const userAvatar = avatars[environmentName] || (handleImage && getAssetImageUrl(handleImage));
+  const address = walletInfo.addresses[0].address.toString();
+  const userAvatar =
+    (environmentName && avatars && avatars[`${environmentName}${address}`]) ||
+    (handleImage && getAssetImageUrl(handleImage));
 
   const sendAnalyticsEvent = (event: PostHogAction) => {
     analytics.sendEventToPostHog(event);
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
index 9b66823444..0e6268576d 100644
--- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
+++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx
@@ -47,11 +47,15 @@ export const UserInfo = ({ onOpenWalletAccounts, avatarVisible = true }: UserInf
   const fullWalletName = cardanoWallet.source.wallet.metadata.name;
   const activeWalletName = addEllipsis(fullWalletName, WALLET_NAME_MAX_LENGTH, 0);
   const [handle] = useGetHandles();
+
   const handleName = handle?.nftMetadata?.name;
   const activeWalletId = cardanoWallet.source.wallet.walletId;
   const [avatars] = useLocalStorage('userAvatar');
   const handleImage = handle?.profilePic;
-  const userAvatar = avatars[environmentName] || (handleImage && getAssetImageUrl(handleImage));
+  const address = walletInfo.addresses[0].address.toString();
+  const userAvatar =
+    (environmentName && avatars && avatars[`${environmentName}${address}`]) ||
+    (handleImage && getAssetImageUrl(handleImage));
 
   const handleOnAddressCopy = () => {
     toast.notify({ duration: TOAST_DEFAULT_DURATION, text: t('general.clipboard.copiedToClipboard') });
@@ -109,7 +113,7 @@ export const UserInfo = ({ onOpenWalletAccounts, avatarVisible = true }: UserInf
           }}
           type={getUiWalletType(wallet.type)}
           profile={
-            userAvatar
+            userAvatar && activeWalletId === wallet.walletId
               ? {
                   fallback: fullWalletName,
                   imageSrc: userAvatar
@@ -119,7 +123,17 @@ export const UserInfo = ({ onOpenWalletAccounts, avatarVisible = true }: UserInf
         />
       );
     },
-    [activateWallet, getLastActiveAccount, onOpenWalletAccounts, setIsDropdownMenuOpen, analytics, t, activeWalletId]
+    [
+      getLastActiveAccount,
+      userAvatar,
+      activeWalletId,
+      fullWalletName,
+      onOpenWalletAccounts,
+      analytics,
+      activateWallet,
+      setIsDropdownMenuOpen,
+      t
+    ]
   );
 
   const renderWallet = useCallback(
diff --git a/apps/browser-extension-wallet/src/types/local-storage.ts b/apps/browser-extension-wallet/src/types/local-storage.ts
index 8a46de51d5..c513d2cd47 100644
--- a/apps/browser-extension-wallet/src/types/local-storage.ts
+++ b/apps/browser-extension-wallet/src/types/local-storage.ts
@@ -58,5 +58,5 @@ export interface ILocalStorage {
   stakingBrowserPreferences: StakingBrowserPreferences;
   showPinExtension?: boolean;
   showMultiAddressModal?: boolean;
-  userAvatar?: Record<EnvironmentTypes, string>;
+  userAvatar?: Record<`${EnvironmentTypes}${string}`, string>;
 }
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/DetailsDrawer.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/DetailsDrawer.tsx
index e9bdcacacb..e58fa4ac2a 100644
--- a/apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/DetailsDrawer.tsx
+++ b/apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/DetailsDrawer.tsx
@@ -27,7 +27,7 @@ export const DetailsDrawer = ({
   onSend
 }: GeneralSettingsDrawerProps): ReactElement => {
   const { t } = useTranslation();
-  const { environmentName } = useWalletStore();
+  const { environmentName, walletInfo } = useWalletStore();
   const assetInfo = useMemo(
     () => (isNil(assetsInfo) ? undefined : assetsInfo.get(selectedNft?.assetId)),
     [selectedNft, assetsInfo]
@@ -42,7 +42,8 @@ export const DetailsDrawer = ({
   };
 
   const handleSetAsAvatar = (image: string) => {
-    setUserAvatar({ ...userAvatar, [environmentName]: image });
+    const address = walletInfo.addresses[0].address.toString();
+    setUserAvatar({ ...userAvatar, [`${environmentName}${address}`]: image });
     toast.notify({ text: t('core.nftDetail.avatarUpdated') });
     void analytics.sendEventToPostHog(PostHogAction.NFTDetailSetAsAvatarClick);
   };