Lw 9170 multi wallet integration

apps/browser-extension-wallet/package.json

@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@cardano-sdk/cardano-services-client": "0.17.6",
-    "@cardano-sdk/core": "0.28.2",
-    "@cardano-sdk/dapp-connector": "0.12.9",
-    "@cardano-sdk/input-selection": "0.12.20",
-    "@cardano-sdk/tx-construction": "0.17.10",
+    "@cardano-sdk/cardano-services-client": "0.17.7",
+    "@cardano-sdk/core": "0.28.3",
+    "@cardano-sdk/dapp-connector": "0.12.10",
+    "@cardano-sdk/input-selection": "0.12.21",
+    "@cardano-sdk/tx-construction": "0.17.11",
     "@cardano-sdk/util": "0.15.0",
-    "@cardano-sdk/wallet": "0.34.2",
-    "@cardano-sdk/web-extension": "0.24.5",
+    "@cardano-sdk/wallet": "0.34.3",
+    "@cardano-sdk/web-extension": "0.24.6",
     "@emurgo/cip14-js": "~3.0.1",
     "@koralabs/handles-public-api-interfaces": "^1.6.6",
     "@lace/cardano": "0.1.0",

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import cn from 'classnames';
 import { Dropdown } from 'antd';
 import { Button } from '@lace/common';
@@ -14,15 +14,20 @@ 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 { getActiveWalletSubtitle } from '@src/utils/get-wallet-subtitle';
+import { getUiWalletType } from '@src/utils/get-ui-wallet-type';
 
 export interface DropdownMenuProps {
   isPopup?: boolean;
 }
 
 export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement => {
   const analytics = useAnalyticsContext();
-  const { walletInfo } = useWalletStore();
-  const [open, setOpen] = useState(false);
+  const {
+    cardanoWallet,
+    walletUI: { isDropdownMenuOpen },
+    setIsDropdownMenuOpen
+  } = useWalletStore();
   const [handle] = useGetHandles();
   const handleImage = handle?.profilePic;
   const Chevron = isPopup ? ChevronSmall : ChevronNormal;
@@ -32,34 +37,37 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
   };
 
   const handleDropdownState = (openDropdown: boolean) => {
-    setOpen(openDropdown);
+    setIsDropdownMenuOpen(openDropdown);
     if (openDropdown) {
       sendAnalyticsEvent(PostHogAction.UserWalletProfileIconClick);
     }
   };
 
+  const walletName = cardanoWallet.source.wallet.metadata.name;
+
   return (
     <Dropdown
       destroyPopupOnHide
       onOpenChange={handleDropdownState}
       overlay={<DropdownMenuOverlay isPopup={isPopup} sendAnalyticsEvent={sendAnalyticsEvent} />}
       placement="bottomRight"
+      open={isDropdownMenuOpen}
       trigger={['click']}
     >
       {process.env.USE_MULTI_WALLET === 'true' ? (
         <div className={styles.profileDropdownTrigger}>
           <ProfileDropdown.Trigger
-            title={walletInfo.name}
-            subtitle="Account #0"
+            title={walletName}
+            subtitle={getActiveWalletSubtitle(cardanoWallet.source.account)}
             profile={
               handleImage
                 ? {
-                    fallback: walletInfo.name,
+                    fallback: walletName,
                     imageSrc: getAssetImageUrl(handleImage)
                   }
                 : undefined
             }
-            type={process.env.USE_SHARED_WALLET === 'true' ? 'shared' : 'cold'}
+            type={getUiWalletType(cardanoWallet.source.wallet.type)}
             id="menu"
           />
         </div>
@@ -71,7 +79,7 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
           data-testid="header-menu-button"
         >
           <span className={cn(styles.content, { [styles.isPopup]: isPopup })}>
-            <UserAvatar walletName={walletInfo.name} isPopup={isPopup} />
+            <UserAvatar walletName={walletName} isPopup={isPopup} />
             <Chevron
               className={cn(styles.chevron, { [styles.open]: open })}
               data-testid={`chevron-${open ? 'up' : 'down'}`}

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

@@ -58,6 +58,7 @@
   }
 
   .walletStatusInfo {
+    margin-left: 8px;
     cursor: default;
     display: flex;
   }
@@ -73,46 +74,51 @@
       border-radius: 12px !important;
       background-color: var(--bg-color-container, #ffffff) !important;
       color: var(--text-color-primary);
+
       &:hover {
         background: var(--light-mode-light-grey, var(--dark-mode-mid-grey, #efefef)) !important;
       }
+
       &.cta {
         cursor: pointer;
       }
     }
+
     .menuItemTheme {
       :global {
         button.ant-switch {
           height: size_unit(3);
           width: size_unit(5.5);
         }
 
-        .ant-switch > div.ant-switch-handle {
+        .ant-switch>div.ant-switch-handle {
           height: size_unit(2.5);
           width: size_unit(2.5);
         }
 
-        .ant-switch > span.ant-switch-inner svg {
+        .ant-switch>span.ant-switch-inner svg {
           margin-top: 1px;
         }
 
-        .ant-switch.ant-switch-checked > span.ant-switch-inner {
+        .ant-switch.ant-switch-checked>span.ant-switch-inner {
           margin: 0 size_unit(35) 0 size_unit(0.5);
         }
 
-        .ant-switch.ant-switch-checked > div.ant-switch-handle {
+        .ant-switch.ant-switch-checked>div.ant-switch-handle {
           left: calc(100% - 20px - 2px);
         }
       }
 
       display: flex;
       justify-content: space-between !important;
+
       &:hover {
         background: transparent !important;
       }
     }
   }
 }
+
 .separator {
   display: flex;
   height: 1.5px;
@@ -141,12 +147,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   span {
     color: var(--dark-mode-mid-black, var(--text-color-white, #ffffff));
     font-size: var(--body);
     text-transform: uppercase;
     font-weight: 700;
   }
+
   .avatar {
     font-size: size_unit(4);
     cursor: pointer;
@@ -156,6 +164,7 @@
     height: 26px;
     width: 26px;
   }
+
   .userAvatarImage {
     border-radius: 30px;
   }
@@ -178,7 +187,8 @@
   font-size: 16px;
 }
 
-.popUpContainer, .extendedContainer {
+.popUpContainer,
+.extendedContainer {
   @include scroll-bar-style;
   overflow-y: scroll;
   margin: size_unit(1) size_unit(1) size_unit(1) 0;

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

@@ -19,6 +19,8 @@ import { WalletAccounts } from './components/WalletAccounts';
 import { AddSharedWalletLink } from '@components/MainMenu/DropdownMenuOverlay/components/AddSharedWalletLink';
 import { useWalletStore } from '@stores';
 import classNames from 'classnames';
+import { AnyBip32Wallet } from '@cardano-sdk/web-extension';
+import { Wallet } from '@lace/cardano';
 
 interface Props extends MenuProps {
   isPopup?: boolean;
@@ -35,9 +37,10 @@ export const DropdownMenuOverlay: VFC<Props> = ({
   ...props
 }): React.ReactElement => {
   const [currentSection, setCurrentSection] = useState<Sections>(Sections.Main);
-  const { environmentName } = useWalletStore();
+  const { environmentName, setManageAccountsWallet } = useWalletStore();
 
-  const openWalletAccounts = () => {
+  const openWalletAccounts = (wallet: AnyBip32Wallet<Wallet.WalletMetadata, Wallet.AccountMetadata>) => {
+    setManageAccountsWallet(wallet);
     setCurrentSection(Sections.WalletAccounts);
   };