feat(extension): [LW-9028] Add wallet concepts to menu

apps/browser-extension-wallet/.env.defaults

@@ -28,6 +28,7 @@ USE_MULTI_DELEGATION_STAKING_ACTIVITY=false
 
 USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false
 USE_MATOMO_ANALYTICS_FOR_OPTED_OUT=false
+USE_MULTI_WALLET=false
 
 # In App URLs
 CATALYST_GOOGLE_PLAY_URL=https://play.google.com/store/apps/details?id=io.iohk.vitvoting

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

@@ -45,3 +45,7 @@
     transform: rotateX(180deg);
   }
 }
+
+.profileDropdownTrigger {
+  flex-shrink: 0;
+}

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

@@ -11,6 +11,9 @@ import { useWalletStore } from '@src/stores';
 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';
 
 export interface DropdownMenuProps {
   isPopup?: boolean;
@@ -20,6 +23,8 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
   const analytics = useAnalyticsContext();
   const { walletInfo } = useWalletStore();
   const [open, setOpen] = useState(false);
+  const [handle] = useGetHandles();
+  const handleImage = handle?.profilePic;
   const Chevron = isPopup ? ChevronSmall : ChevronNormal;
 
   const sendAnalyticsEvent = (event: PostHogAction) => {
@@ -41,20 +46,39 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement
       placement="bottomRight"
       trigger={['click']}
     >
-      <Button
-        variant="outlined"
-        color="secondary"
-        className={cn(styles.avatarBtn, { [styles.open]: open })}
-        data-testid="header-menu-button"
-      >
-        <span className={cn(styles.content, { [styles.isPopup]: isPopup })}>
-          <UserAvatar walletName={walletInfo.name} isPopup={isPopup} />
-          <Chevron
-            className={cn(styles.chevron, { [styles.open]: open })}
-            data-testid={`chevron-${open ? 'up' : 'down'}`}
+      {process.env.USE_MULTI_WALLET === 'true' ? (
+        <div className={styles.profileDropdownTrigger}>
+          <ProfileDropdown.Trigger
+            title={walletInfo.name}
+            subtitle="Account #0"
+            profile={
+              handleImage
+                ? {
+                    fallback: walletInfo.name,
+                    imageSrc: getAssetImageUrl(handleImage)
+                  }
+                : undefined
+            }
+            type="cold"
+            id="menu"
           />
-        </span>
-      </Button>
+        </div>
+      ) : (
+        <Button
+          variant="outlined"
+          color="secondary"
+          className={cn(styles.avatarBtn, { [styles.open]: open })}
+          data-testid="header-menu-button"
+        >
+          <span className={cn(styles.content, { [styles.isPopup]: isPopup })}>
+            <UserAvatar walletName={walletInfo.name} isPopup={isPopup} />
+            <Chevron
+              className={cn(styles.chevron, { [styles.open]: open })}
+              data-testid={`chevron-${open ? 'up' : 'down'}`}
+            />
+          </span>
+        </Button>
+      )}
     </Dropdown>
   );
 };

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

@@ -36,6 +36,21 @@
   }
 }
 
+.multiWallet {
+  max-width: size_unit(6);
+  width: size_unit(6);
+  height: size_unit(6);
+  border-radius: size_unit(2);
+  flex-shrink: 0;
+
+  &:hover {
+    max-width: size_unit(6);
+    width: size_unit(6);
+    gap: 0px;
+    padding: 0;
+  }
+}
+
 .text {
   color: var(--text-color-secondary);
   white-space: nowrap;

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

@@ -1,11 +1,31 @@
-import React from 'react';
+/* eslint-disable react/no-multi-comp */
+import React, { ReactNode } from 'react';
 import ExpandIcon from '../../assets/icons/expand.component.svg';
+import classnames from 'classnames';
+import { Tooltip } from 'antd';
 
 import styles from './ExpandButton.module.scss';
 
+const RenderTooltipIfMultiWallet = ({ children, label }: { children: ReactNode; label: string }) => {
+  if (process.env.USE_MULTI_WALLET === 'true') {
+    return <Tooltip title={label}>{children}</Tooltip>;
+  }
+
+  return <>{children}</>;
+};
+
 export const ExpandButton = ({ label, onClick }: { label: string; onClick: () => void }): React.ReactElement => (
-  <a onClick={onClick} href="#" className={styles.button} data-testid="expand-button">
-    <ExpandIcon className={styles.icon} />
-    <span className={styles.text}>{label}</span>
-  </a>
+  <RenderTooltipIfMultiWallet label={label}>
+    <a
+      onClick={onClick}
+      href="#"
+      className={classnames(styles.button, {
+        [styles.multiWallet]: process.env.USE_MULTI_WALLET === 'true'
+      })}
+      data-testid="expand-button"
+    >
+      <ExpandIcon className={styles.icon} />
+      {process.env.USE_MULTI_WALLET !== 'true' && <span className={styles.text}>{label}</span>}
+    </a>
+  </RenderTooltipIfMultiWallet>
 );

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

@@ -17,7 +17,6 @@
   .userInfoWrapper {
     display: flex;
     flex-direction: column;
-    padding: 10px size_unit(2) size_unit(2.75);
     gap: size_unit(2);
 
     .userInfo {
@@ -50,6 +49,14 @@
     }
   }
 
+  .singleWalletWrapper {
+    padding: 10px size_unit(2) size_unit(2.75);
+  }
+
+  .multiWalletWrapper {
+    padding-bottom: size_unit(2.75);
+  }
+
   .walletStatusInfo {
     cursor: default;
     display: flex;

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

@@ -8,7 +8,8 @@ import {
   ThemeSwitcher,
   LockWallet,
   UserInfo,
-  NetworkChoise
+  NetworkChoise,
+  AddNewWalletLink
 } from './components';
 import styles from './DropdownMenuOverlay.module.scss';
 import { NetworkInfo } from './components/NetworkInfo';
@@ -42,6 +43,7 @@ export const DropdownMenuOverlay: VFC<Props> = ({
         <>
           {topSection}
           <Links>
+            {process.env.USE_MULTI_WALLET === 'true' && <AddNewWalletLink />}
             <AddressBookLink isPopup={isPopup} />
             <SettingsLink />
             <Separator />

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { walletRoutePaths } from '@routes';
+import { Menu } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import styles from '../DropdownMenuOverlay.module.scss';
+
+const handleOnClicked = (): void => void 0;
+
+export const AddNewWalletLink = (): React.ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Link to={walletRoutePaths.newWallet.home} onClick={handleOnClicked}>
+      <Menu.Item data-testid="header-menu-new-wallet" className={styles.menuItem}>
+        <a>{t('browserView.sideMenu.links.addNewWallet')}</a>
+      </Menu.Item>
+    </Link>
+  );
+};

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

@@ -11,6 +11,8 @@ import { UserAvatar } from './UserAvatar';
 import { useGetHandles } from '@hooks';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
+import { ProfileDropdown } from '@lace/ui';
+import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
 
 const ADRESS_FIRST_PART_LENGTH = 10;
 const ADRESS_LAST_PART_LENGTH = 5;
@@ -36,6 +38,7 @@ export const UserInfo = ({ avatarVisible = true }: UserInfoProps): React.ReactEl
   const walletName = addEllipsis(walletInfo.name.toString(), WALLET_NAME_MAX_LENGTH, 0);
   const [handle] = useGetHandles();
   const handleName = handle?.nftMetadata?.name;
+  const handleImage = handle?.profilePic;
 
   const handleOnAddressCopy = () => {
     toast.notify({ duration: TOAST_DEFAULT_DURATION, text: t('general.clipboard.copiedToClipboard') });
@@ -44,29 +47,51 @@ export const UserInfo = ({ avatarVisible = true }: UserInfoProps): React.ReactEl
 
   return (
     <Menu.ItemGroup className={classnames(styles.menuItem, styles.borderBottom)} data-testid="header-menu-user-info">
-      <div className={styles.userInfoWrapper}>
+      <div
+        className={classnames(styles.userInfoWrapper, {
+          [styles.singleWalletWrapper]: process.env.USE_MULTI_WALLET !== 'true',
+          [styles.multiWalletWrapper]: process.env.USE_MULTI_WALLET === 'true'
+        })}
+      >
         <CopyToClipboard text={handleName || walletAddress}>
-          <AntdTooltip
-            overlayInnerStyle={overlayInnerStyle}
-            placement="top"
-            title={
-              <span className={styles.tooltip}>
-                {handleName ? t('settings.copyHandle') : t('settings.copyAddress')}
-              </span>
-            }
-          >
-            <div className={styles.userInfo} onClick={handleOnAddressCopy}>
-              {avatarVisible && <UserAvatar walletName={walletName} />}
-              <div className={styles.userMeta} data-testid="header-menu-user-details">
-                <p className={styles.walletName} data-testid="header-menu-wallet-name">
-                  {walletName}
-                </p>
-                <p className={styles.walletAddress} data-testid="header-menu-wallet-address">
-                  {handleName || shortenedWalletAddress}
-                </p>
+          {process.env.USE_MULTI_WALLET === 'true' ? (
+            <ProfileDropdown.WalletOption
+              title={walletInfo.name}
+              subtitle="Account #0"
+              id={walletName}
+              profile={
+                handleImage
+                  ? {
+                      fallback: walletInfo.name,
+                      imageSrc: getAssetImageUrl(handleImage)
+                    }
+                  : undefined
+              }
+              type="cold"
+            />
+          ) : (
+            <AntdTooltip
+              overlayInnerStyle={overlayInnerStyle}
+              placement="top"
+              title={
+                <span className={styles.tooltip}>
+                  {handleName ? t('settings.copyHandle') : t('settings.copyAddress')}
+                </span>
+              }
+            >
+              <div className={styles.userInfo} onClick={handleOnAddressCopy}>
+                {avatarVisible && <UserAvatar walletName={walletName} />}
+                <div className={styles.userMeta} data-testid="header-menu-user-details">
+                  <p className={styles.walletName} data-testid="header-menu-wallet-name">
+                    {walletName}
+                  </p>
+                  <p className={styles.walletAddress} data-testid="header-menu-wallet-address">
+                    {handleName || shortenedWalletAddress}
+                  </p>
+                </div>
               </div>
-            </div>
-          </AntdTooltip>
+            </AntdTooltip>
+          )}
         </CopyToClipboard>
         <div className={styles.walletStatusInfo}>
           <WalletStatusContainer />

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts

@@ -8,3 +8,4 @@ export * from './UserInfo';
 export * from './UserAvatar';
 export * from './NetworkChoise';
 export * from './NetworkInfo';
+export * from './AddNewWalletLink';

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

@@ -36,3 +36,12 @@
     }
   }
 }
+
+.multiWallet {
+  flex-wrap: wrap;
+}
+
+.multiWalletNetworkPillBox {
+  width: 100%;
+  margin-bottom: 12px;
+}

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

@@ -4,6 +4,7 @@ import styles from './MainHeader.module.scss';
 import LaceLogoMark from '../../assets/branding/lace-logo-mark.component.svg';
 import { useTranslation } from 'react-i18next';
 import { walletRoutePaths } from '@routes';
+import classNames from 'classnames';
 
 import { DropdownMenu } from '@components/DropdownMenu';
 import { ExpandButton } from '@components/ExpandButton';
@@ -30,15 +31,24 @@ export const MainHeader = (): React.ReactElement => {
 
   return (
     <div className={styles.header} data-testid="header-container">
-      <div className={styles.content}>
+      <div
+        className={classNames(styles.content, {
+          [styles.multiWallet]: process.env.USE_MULTI_WALLET === 'true'
+        })}
+      >
+        {process.env.USE_MULTI_WALLET === 'true' && (
+          <div className={styles.multiWalletNetworkPillBox}>
+            <NetworkPill isPopup />
+          </div>
+        )}
         <Link
           className={styles.linkLogo}
           to={walletRoutePaths.assets}
           data-testid="header-logo"
           onClick={() => analytics.sendEventToPostHog(PostHogAction.WalletLaceClick)}
         >
           <LaceLogoMark className={styles.logo} />
-          <NetworkPill />
+          {process.env.USE_MULTI_WALLET !== 'true' && <NetworkPill />}
         </Link>
         <div className={styles.controls}>
           <ExpandButton

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

@@ -68,3 +68,10 @@
     }
   }
 }
+
+.multiWallet {
+  width: 100%;
+  text-align: center;
+  margin-left: 0px;
+  border-radius: size_unit(1);
+}