feat: [lw-12558] change btc wallet icon option to orange in dropdown (#1863)

* feat: [lw-12558] change btc wallet icon option to orange in dropdown

* feat: [lw-12723] fix incorrect avatar image on active btc wallet

Author: vetalcore

apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss

@@ -53,3 +53,7 @@
 .profileDropdownTrigger {
   flex-shrink: 0;
 }
+
+.walletOptionBitcoin > div {
+  background: var(--data-orange);
+}

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

@@ -16,6 +16,8 @@ import { ProfileDropdown } from '@input-output-hk/lace-ui-toolkit';
 import { useWalletAvatar } from '@hooks';
 import { getUiWalletType } from '@src/utils/get-ui-wallet-type';
 import i18n from 'i18next';
+import { WalletType } from '@cardano-sdk/web-extension';
+import { useCurrentBlockchain, Blockchain } from '@src/multichain';
 
 export interface DropdownMenuProps {
   isPopup?: boolean;
@@ -29,6 +31,7 @@ const addEllipsis = (text: string, length: number) => (text.length > length ? `$
 
 export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement => {
   const analytics = useAnalyticsContext();
+  const { blockchain } = useCurrentBlockchain();
   const {
     walletUI: { isDropdownMenuOpen = false },
     setIsDropdownMenuOpen,
@@ -51,6 +54,19 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
 
   useEffect(() => () => setIsDropdownMenuOpen(false), [setIsDropdownMenuOpen]);
 
+  const walletType = getUiWalletType(walletDisplayInfo?.walletType);
+
+  const isBitcoinWallet = walletDisplayInfo?.walletType !== WalletType.Script && blockchain === Blockchain.Bitcoin;
+  const customBitcoinProfile = isBitcoinWallet
+    ? {
+        customProfileComponent: (
+          <span className={styles.walletOptionBitcoin}>
+            <ProfileDropdown.WalletIcon type={walletType} testId={'wallet-option-icon'} />
+          </span>
+        )
+      }
+    : undefined;
+
   return (
     <Dropdown
       overlayClassName={styles.overlay}
@@ -74,9 +90,9 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
                     fallbackText: walletDisplayInfo?.walletName,
                     imageSrc: activeWalletAvatar
                   }
-                : undefined
+                : customBitcoinProfile
             }
-            type={getUiWalletType(walletDisplayInfo?.walletType)}
+            type={walletType}
             id="menu"
           />
         </div>

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss

@@ -223,3 +223,7 @@
     background: var(--switch-checked-bg-color) !important;
   }
 }
+
+.walletOptionBitcoin > div {
+  background: var(--data-orange);
+}

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

@@ -114,6 +114,18 @@ export const UserInfo = ({
   const renderWalletOption = useCallback(
     ({ wallet, lastActiveAccount: acc }: RenderWalletOptionsParams) => {
       const walletAvatar = getAvatar(wallet.walletId);
+      const walletType = getUiWalletType(wallet.type);
+
+      const isBitcoinWallet = wallet.type !== WalletType.Script && wallet.blockchainName === 'Bitcoin';
+      const customBitcoinProfile = isBitcoinWallet
+        ? {
+            customProfileComponent: (
+              <span className={styles.walletOptionBitcoin}>
+                <ProfileDropdown.WalletIcon type={walletType} testId={'wallet-option-icon'} />
+              </span>
+            )
+          }
+        : undefined;
 
       return (
         <ProfileDropdown.WalletOption
@@ -142,14 +154,14 @@ export const UserInfo = ({
               text: t('multiWallet.activated.wallet', { walletName: wallet.metadata.name })
             });
           }}
-          type={getUiWalletType(wallet.type)}
+          type={walletType}
           profile={
             walletAvatar
               ? {
                   fallbackText: fullWalletName,
                   imageSrc: walletAvatar
                 }
-              : undefined
+              : customBitcoinProfile
           }
           {...(wallet.type !== WalletType.Script &&
             wallet.blockchainName !== 'Bitcoin' && {

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

@@ -2,8 +2,9 @@ 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';
+import { useCallback, useEffect, useState } from 'react';
 import { walletRepository } from '@lib/wallet-api-ui';
+import { useWalletManager } from './useWalletManager';
 
 interface UseWalletAvatar {
   activeWalletAvatar: string;
@@ -13,10 +14,20 @@ interface UseWalletAvatar {
 
 export const useWalletAvatar = (): UseWalletAvatar => {
   const { cardanoWallet, environmentName } = useWalletStore();
+  const [activeWalletId, setActiveWalletId] = useState<string>('');
+
+  const { getActiveWalletId } = useWalletManager();
+
+  useEffect(() => {
+    // eslint-disable-next-line promise/catch-or-return
+    getActiveWalletId().then((id) => {
+      setActiveWalletId(id);
+    });
+  }, [getActiveWalletId]);
+
   const [handle] = useGetHandles();
   const [avatars, { updateLocalStorage: setUserAvatar }] = useLocalStorage('userAvatar');
 
-  const activeWalletId = cardanoWallet?.source.wallet.walletId;
   const { accountIndex, metadata } = cardanoWallet?.source.account ?? {};
   const handleImage = handle?.profilePic;
   const activeWalletAvatar =