Lw 9170 multi wallet integration (#892)

* fix(ui): use correct derivation path for displaying accounts

* feat(ui): disable account delete btn for active or the only account

* feat(ui): add onActivateClick handler for profile dropdown

* fix(ui): do not fire onClick in profile dropdown when clicking on arrow

* fix(core): start from account #0 in select account step

* fix(extension): clear background page once finished with create wallet flow

if create wallet flow finishes without explicitly calling setBackgroundPage()

then it would break the routing, as background page would be defined forever

* feat(extension): wire up multi-account components

temporarily use native prompt dialog for password input;
does not have a prompt to connect hardware wallet, or any
error handling when deriving xpub

* feat(extension): wire up add wallet components

* fix(extension): connect to hw device asap when adding account

If it takes more than some time (probably 50ms), Chrome will
reject hardware device connection with an error that says
WebHID connections must be initiated from user gesture.

Apparently, fetching wallets from repository can sometimes
take longer. This fix updates useWalletManager addAccount
method to take in the entire AnyBip32Wallet object instead
of just walletId, so that it doesn't have to fetch the
wallet object from indexeddb in service worker.

Consequently, some validations from addAccount can be removed,
because it's signature no longer accepts walletId of a script
wallet. Also it has to trust that wallet actually exists,
otherwise it will reject with an error that comes from the
WalletRepository (it is no longer a responsibility of this
method to check the existence of the wallet).

* feat(extension): do not copy address when clicking on active wallet

clicking on a wallet in dropdown menu activates it

removing copy feature makes the behavior more predictable

* feat(ui): add colorScheme option to ExtraSmall

also decouple button color scheme from size scheme

and set minWidth for ExtraSmall button, which is
currently only used for profile dropdown account item

* feat: replace edit/delete buttons with a single Disable button

temporary design until we apply a larger re-design

* fix: remove all relative imports from cardano-sdk

* fix(extension): connect trezor device before exporting xpub

onboarding, adding wallet, adding accounts and dapp transacations are now working

* chore: bump sdk packages

required for correctly bundling trezor

* chore: build service worker script in development mode

after removing imports from dist/cjs, service worker no longer loads

this is a temporary solution

* test(extension): mock initializeTrezorTransport method

---------

Co-authored-by: Piotr Czeglik <[email protected]>

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);
   };