feat: set nft as user profile avatar

apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx

@@ -3,7 +3,6 @@ import cn from 'classnames';
 import { Dropdown } from 'antd';
 import { Button, addEllipsis } from '@lace/common';
 import { DropdownMenuOverlay } from '../MainMenu';
-
 import ChevronNormal from '../../assets/icons/chevron-down.component.svg';
 import ChevronSmall from '../../assets/icons/chevron-down-small.component.svg';
 import styles from './DropdownMenu.module.scss';
@@ -12,8 +11,7 @@ import { UserAvatar } from '../MainMenu/DropdownMenuOverlay/components';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { ProfileDropdown } from '@lace/ui';
-import { useGetHandles } from '@hooks';
-import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
+import { useWalletAvatar } from '@hooks';
 import { getActiveWalletSubtitle } from '@src/utils/get-wallet-subtitle';
 import { getUiWalletType } from '@src/utils/get-ui-wallet-type';
 
@@ -28,9 +26,9 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
     walletUI: { isDropdownMenuOpen = false },
     setIsDropdownMenuOpen
   } = useWalletStore();
-  const [handle] = useGetHandles();
-  const handleImage = handle?.profilePic;
+
   const Chevron = isPopup ? ChevronSmall : ChevronNormal;
+  const { activeWalletAvatar } = useWalletAvatar();
 
   const sendAnalyticsEvent = (event: PostHogAction) => {
     analytics.sendEventToPostHog(event);
@@ -66,10 +64,10 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
             subtitle={getActiveWalletSubtitle(cardanoWallet.source.account)}
             active={isDropdownMenuOpen}
             profile={
-              handleImage
+              activeWalletAvatar
                 ? {
                     fallback: walletName,
-                    imageSrc: getAssetImageUrl(handleImage)
+                    imageSrc: activeWalletAvatar
                   }
                 : undefined
             }
@@ -85,7 +83,7 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
           data-testid="header-menu-button"
         >
           <span className={cn(styles.content, { [styles.isPopup]: isPopup })}>
-            <UserAvatar walletName={walletName} isPopup={isPopup} />
+            <UserAvatar walletName={walletName} isPopup={isPopup} avatar={activeWalletAvatar} />
             <Chevron
               className={cn(styles.chevron, { [styles.open]: isDropdownMenuOpen })}
               data-testid={`chevron-${isDropdownMenuOpen ? 'up' : 'down'}`}

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserAvatar.tsx

@@ -3,25 +3,19 @@ import React from 'react';
 import cn from 'classnames';
 import styles from '../DropdownMenuOverlay.module.scss';
 import { Image } from 'antd';
-import { useGetHandles } from '@hooks';
-import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
 
 interface UserAvatarProps {
   walletName: string;
   isPopup?: boolean;
+  avatar?: string;
 }
 
-export const UserAvatar = ({ walletName, isPopup }: UserAvatarProps): React.ReactElement => {
-  const [handle] = useGetHandles();
-  const handleImage = handle?.profilePic;
-
-  return (
-    <div className={cn(styles.userAvatar, { [styles.isPopup]: isPopup })} data-testid="user-avatar">
-      {handleImage ? (
-        <Image src={getAssetImageUrl(handleImage)} className={styles.userAvatarImage} preview={false} />
-      ) : (
-        <span>{walletName[0]?.toUpperCase()}</span>
-      )}
-    </div>
-  );
-};
+export const UserAvatar = ({ walletName, isPopup, avatar }: UserAvatarProps): React.ReactElement => (
+  <div className={cn(styles.userAvatar, { [styles.isPopup]: isPopup })} data-testid="user-avatar">
+    {avatar ? (
+      <Image src={avatar} className={styles.userAvatarImage} preview={false} />
+    ) : (
+      <span>{walletName[0]?.toUpperCase()}</span>
+    )}
+  </div>
+);

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx

@@ -8,7 +8,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { toast, addEllipsis, useObservable } from '@lace/common';
 import { WalletStatusContainer } from '@components/WalletStatus';
 import { UserAvatar } from './UserAvatar';
-import { useGetHandles, useWalletManager } from '@hooks';
+import { useGetHandles, useWalletAvatar, useWalletManager } from '@hooks';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { ProfileDropdown } from '@lace/ui';
@@ -46,6 +46,8 @@ 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 { activeWalletAvatar, getAvatar } = useWalletAvatar();
+
   const handleName = handle?.nftMetadata?.name;
   const activeWalletId = cardanoWallet.source.wallet.walletId;
 
@@ -80,6 +82,8 @@ export const UserInfo = ({ onOpenWalletAccounts, avatarVisible = true }: UserInf
   const renderBip32Wallet = useCallback(
     (wallet: AnyBip32Wallet<Wallet.WalletMetadata, Wallet.AccountMetadata>) => {
       const lastActiveAccount = getLastActiveAccount(wallet);
+      const walletAvatar = getAvatar(wallet.walletId);
+
       return (
         <ProfileDropdown.WalletOption
           key={wallet.walletId}
@@ -104,10 +108,28 @@ export const UserInfo = ({ onOpenWalletAccounts, avatarVisible = true }: UserInf
             });
           }}
           type={getUiWalletType(wallet.type)}
+          profile={
+            walletAvatar
+              ? {
+                  fallback: fullWalletName,
+                  imageSrc: walletAvatar
+                }
+              : undefined
+          }
         />
       );
     },
-    [activateWallet, getLastActiveAccount, onOpenWalletAccounts, setIsDropdownMenuOpen, analytics, t, activeWalletId]
+    [
+      getLastActiveAccount,
+      getAvatar,
+      fullWalletName,
+      onOpenWalletAccounts,
+      activeWalletId,
+      analytics,
+      activateWallet,
+      setIsDropdownMenuOpen,
+      t
+    ]
   );
 
   const renderWallet = useCallback(
@@ -151,7 +173,7 @@ export const UserInfo = ({ onOpenWalletAccounts, avatarVisible = true }: UserInf
               }
             >
               <div className={styles.userInfo} onClick={handleOnAddressCopy}>
-                {avatarVisible && <UserAvatar walletName={activeWalletName} />}
+                {avatarVisible && <UserAvatar walletName={activeWalletName} avatar={activeWalletAvatar} />}
                 <div className={styles.userMeta} data-testid="header-menu-user-details">
                   <p className={styles.walletName} data-testid="header-menu-wallet-name">
                     {activeWalletName}

apps/browser-extension-wallet/src/features/nfts/components/NftDetail.tsx

@@ -35,7 +35,8 @@ export const NftDetail = (): React.ReactElement => {
 
   const nftDetailTranslation = {
     tokenInformation: t('core.nftDetail.tokenInformation'),
-    attributes: t('core.nftDetail.attributes')
+    attributes: t('core.nftDetail.attributes'),
+    setAsAvatar: t('core.nftDetail.setAsAvatar')
   };
 
   const handleOpenSend = () => {

apps/browser-extension-wallet/src/hooks/index.ts

@@ -22,3 +22,4 @@ export * from './useUpdateAddressStatus';
 export * from './useOnAddressSave';
 export * from './useAppInit';
 export * from './useChainHistoryProvider';
+export * from './useWalletAvatar';

apps/browser-extension-wallet/src/hooks/useWalletAvatar.ts

@@ -0,0 +1,37 @@
+import { useLocalStorage } from '@hooks/useLocalStorage';
+import { getAssetImageUrl } from '@utils/get-asset-image-url';
+import { useWalletStore } from '@stores';
+import { useGetHandles } from '@hooks/useGetHandles';
+import { useCallback } from 'react';
+
+interface UseWalletAvatar {
+  activeWalletAvatar: string;
+  setAvatar: (image: string) => void;
+  getAvatar: (walletId: string) => string;
+}
+
+export const useWalletAvatar = (): UseWalletAvatar => {
+  const { cardanoWallet, environmentName } = useWalletStore();
+  const [handle] = useGetHandles();
+  const [avatars, { updateLocalStorage: setUserAvatar }] = useLocalStorage('userAvatar');
+
+  const activeWalletId = cardanoWallet.source.wallet.walletId;
+  const handleImage = handle?.profilePic;
+  const activeWalletAvatar =
+    (environmentName && avatars?.[`${environmentName}${activeWalletId}`]) ||
+    (handleImage && getAssetImageUrl(handleImage));
+
+  const setAvatar = useCallback(
+    (image: string) => {
+      setUserAvatar({ ...avatars, [`${environmentName}${activeWalletId}`]: image });
+    },
+    [setUserAvatar, avatars, environmentName, activeWalletId]
+  );
+
+  const getAvatar = useCallback(
+    (walletId: string) => avatars?.[`${environmentName}${walletId}`],
+    [avatars, environmentName]
+  );
+
+  return { activeWalletAvatar, setAvatar, getAvatar };
+};

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -1230,6 +1230,8 @@
   "core.nftDetail.tokenInformation": "Token Information",
   "core.nftDetail.attributes": "Attributes",
   "core.nftDetail.sendNFT": "Send NFT",
+  "core.nftDetail.setAsAvatar": "Set as your wallet avatar",
+  "core.nftDetail.avatarUpdated": "User avatar updated",
   "core.outputSummaryList.recipientAddress": "Recipient address",
   "core.outputSummaryList.sending": "Sending",
   "core.outputSummaryList.txFee": "Transaction fee",

apps/browser-extension-wallet/src/types/local-storage.ts

@@ -3,6 +3,7 @@ import { EnhancedAnalyticsOptInStatus, TxCreationType } from '../providers/Analy
 import { StakingBrowserPreferences } from '@lace/staking';
 import { currencyCode } from '@providers/currency/constants';
 import { ADASymbols } from '@src/utils/constants';
+import { EnvironmentTypes } from '@stores';
 
 export interface WalletStorage {
   name: string;
@@ -57,4 +58,5 @@ export interface ILocalStorage {
   stakingBrowserPreferences: StakingBrowserPreferences;
   showPinExtension?: boolean;
   showMultiAddressModal?: boolean;
+  userAvatar?: Record<`${EnvironmentTypes}${string}`, string>;
 }

apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/DetailsDrawer.tsx

@@ -4,12 +4,14 @@ import { useTranslation } from 'react-i18next';
 import { NftDetail } from '@lace/core';
 import { Wallet } from '@lace/cardano';
 import isNil from 'lodash/isNil';
-import { Button, Drawer, DrawerHeader, DrawerNavigation } from '@lace/common';
+import { Button, Drawer, DrawerHeader, DrawerNavigation, PostHogAction, toast } from '@lace/common';
 import { buttonIds } from '@hooks/useEnterKeyPress';
 import { NFT } from '@src/utils/get-token-list';
 import { nftDetailSelector, nftNameSelector } from '../selectors';
 import styles from './DetailsDrawer.module.scss';
 import { useWalletStore } from '@stores';
+import { useWalletAvatar } from '@hooks';
+import { useAnalyticsContext } from '@providers';
 
 interface GeneralSettingsDrawerProps {
   onClose: () => void;
@@ -30,14 +32,24 @@ export const DetailsDrawer = ({
     () => (isNil(assetsInfo) ? undefined : assetsInfo.get(selectedNft?.assetId)),
     [selectedNft, assetsInfo]
   );
+  const { setAvatar } = useWalletAvatar();
+  const analytics = useAnalyticsContext();
+
   const nftDetailTranslation = {
     tokenInformation: t('core.nftDetail.tokenInformation'),
-    attributes: t('core.nftDetail.attributes')
+    attributes: t('core.nftDetail.attributes'),
+    setAsAvatar: t('core.nftDetail.setAsAvatar')
+  };
+
+  const handleSetAsAvatar = (image: string) => {
+    setAvatar(image);
+    toast.notify({ text: t('core.nftDetail.avatarUpdated') });
+    void analytics.sendEventToPostHog(PostHogAction.NFTDetailSetAsAvatarClick);
   };
 
   return (
     <Drawer
-      visible={!!selectedNft}
+      open={!!selectedNft}
       onClose={onClose}
       title={assetInfo ? <DrawerHeader title={nftNameSelector(assetInfo, environmentName)} /> : undefined}
       navigation={
@@ -58,6 +70,7 @@ export const DetailsDrawer = ({
             {...nftDetailSelector(assetInfo)}
             amount={selectedNft.amount}
             translations={nftDetailTranslation}
+            onSetAsAvatar={handleSetAsAvatar}
           />
         </div>
       )}

apps/browser-extension-wallet/src/views/browser-view/features/nfts/selectors.ts

@@ -48,7 +48,8 @@ export const nftDetailSelector = (asset: AssetOrHandleInfo): NftDetailProps => {
     attributes: otherProperties ? nftAttributesSelector(otherProperties) : undefined,
     translations: {
       tokenInformation: i18n.t('core.nftDetail.tokenInformation'),
-      attributes: i18n.t('core.nftDetail.attributes')
+      attributes: i18n.t('core.nftDetail.attributes'),
+      setAsAvatar: i18n.t('core.nftDetail.setAsAvatar')
     }
   };
 };

packages/common/src/analytics/types.ts

@@ -148,6 +148,7 @@ export enum PostHogAction {
   NFTsCreateFolderClick = 'nft | nfts | create folder | click',
   NFTCreateFolderNameYourFolderNextClick = 'nft | create folder | name your folder | next | click',
   NFTCreateFolderSelectNftsNextClick = 'nft | create folder | select nfts | next | click',
+  NFTDetailSetAsAvatarClick = 'nft | nft detail | set as your wallet avatar | click',
   // Address book
   AddressBookAddAddressClick = 'address book | add address | click',
   AddressBookAddNewAddressSaveAddressClick = 'address book | add new address | save address | click',

packages/core/src/ui/components/Nft/NftDetail.tsx

@@ -3,14 +3,17 @@ import React, { ReactNode } from 'react';
 import styles from './NftDetail.module.scss';
 import { NftImage } from './NftImage';
 import { TranslationsFor } from '@ui/utils/types';
+import { ControlButton } from '@lace/ui';
+import { ReactComponent as ProfileIcon } from '../../assets/icons/profile-icon.component.svg';
 
 export interface NftDetailProps {
   title?: ReactNode;
   image?: string;
   tokenInformation: LabeledInfo[];
   attributes?: string;
   amount?: number | string;
-  translations: TranslationsFor<'tokenInformation' | 'attributes'>;
+  translations: TranslationsFor<'tokenInformation' | 'attributes' | 'setAsAvatar'>;
+  onSetAsAvatar?: (image: string) => void;
 }
 
 const JSON_INDENTATION = 2;
@@ -29,7 +32,8 @@ export const NftDetail = ({
   tokenInformation,
   attributes,
   amount,
-  translations
+  translations,
+  onSetAsAvatar
 }: NftDetailProps): React.ReactElement => (
   <div className={styles.nftDetail}>
     {title}
@@ -43,6 +47,12 @@ export const NftDetail = ({
         <NftImage image={image} detailView popupView />
       </div>
     </div>
+    <ControlButton.Outlined
+      size="small"
+      label={translations.setAsAvatar}
+      icon={<ProfileIcon />}
+      onClick={() => onSetAsAvatar(image)}
+    />
     <div className={styles.info}>
       <div data-testid="nft-info" className={styles.section}>
         <h4 data-testid="nft-info-label">{translations.tokenInformation}</h4>