feat: improve icon for midnight wallet (#2095)

Author: greatertomi

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

@@ -227,3 +227,7 @@
 .walletOptionBitcoin > div {
   background: var(--data-orange);
 }
+
+.walletOptionMidnight > div {
+  background: var(--data-bright-blue);
+}

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

@@ -196,7 +196,7 @@ export const UserInfo = ({
   );
 
   const renderLmpWallet = useCallback(
-    ({ walletIcon, walletId, walletName }: LmpBundleWallet, isLast: boolean) => (
+    ({ walletId, walletName }: LmpBundleWallet, isLast: boolean) => (
       <div key={walletId}>
         <ProfileDropdown.WalletOption
           style={{ textAlign: 'left' }}
@@ -206,8 +206,11 @@ export const UserInfo = ({
           onClick={switchToLMP}
           type={'hot'}
           profile={{
-            fallbackText: walletName,
-            imageSrc: walletIcon
+            customProfileComponent: (
+              <span className={styles.walletOptionMidnight}>
+                <ProfileDropdown.WalletIcon type="hot" testId={'wallet-option-icon'} />
+              </span>
+            )
           }}
         />
         {isLast ? undefined : <Separator />}

v1/apps/browser-extension-wallet/src/lib/scripts/background/services/lmpService.ts

@@ -52,11 +52,12 @@ const api: BundleAppApi = {
     map((wallets) =>
       wallets.map(
         (wallet): LmpBundleWallet => ({
-          // TODO: icon should be different based on wallet type (same as in v1 dropdown menu)
           walletIcon: isBitcoinWallet(wallet) ? bitcoinLogo : cardanoLogo,
           walletId: wallet.walletId,
           walletName: wallet.metadata.name,
-          encryptedRecoveryPhrase: isInMemoryWallet(wallet) ? wallet.encryptedSecrets.keyMaterial : undefined
+          encryptedRecoveryPhrase: isInMemoryWallet(wallet) ? wallet.encryptedSecrets.keyMaterial : undefined,
+          blockchain: isBitcoinWallet(wallet) ? 'Bitcoin' : 'Cardano',
+          walletType: wallet.type
         })
       )
     )

v1/apps/browser-extension-wallet/src/utils/lmp.ts

@@ -1,14 +1,18 @@
 // mostly duplicated in v1 and lmp module, could be a shared library
-import { RemoteApiProperties, RemoteApiPropertyType } from '@cardano-sdk/web-extension';
+import { RemoteApiProperties, RemoteApiPropertyType, WalletType } from '@cardano-sdk/web-extension';
 import { Observable } from 'rxjs';
 import { storage } from 'webextension-polyfill';
 import { Language } from '@lace/translation';
 
+export type BlockchainName = 'Bitcoin' | 'Cardano' | 'Midnight';
+
 export type LmpBundleWallet = {
   walletId: string;
   walletName: string;
   walletIcon: string;
   encryptedRecoveryPhrase?: string;
+  blockchain: BlockchainName;
+  walletType: WalletType;
 };
 
 export type BundleAppApi = {

v1/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/styles/themes/_shared-colors.scss

@@ -11,5 +11,6 @@ $data: (
   'pink-10': rgba(255, 84, 112, 0.1),
   'orange': #ff8e3c,
   'green': #2cb67d,
-  'blue': #3489f7
+  'blue': #3489f7,
+  'bright-blue': #0000FE
 );

v1/packages/common/src/ui/styles/themes/_shared-colors.scss

@@ -12,5 +12,6 @@ $data: (
   'pink-10': rgba(255, 84, 112, 0.1),
   'orange': #ff8e3c,
   'green': #2cb67d,
-  'blue': #3489f7
+  'blue': #3489f7,
+  'bright-blue': #0000FE
 );