feat: organize avatar by environment name and wallet address

input-output-hk · Apr 16, 2024 · 29c2d01 · 29c2d01
1 parent 96c1b34
commit 29c2d01
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git 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/...wser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx b/...wser-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
@@ -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/...rowser-extension-wallet/src/views/browser-view/features/nfts/components/DetailsDrawer.tsx b/...rowser-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);
   };