Merge main into feat/sanchonet (#763)

* feat(staking): maintenance 24 Nov 2023 (#754)

* feat(staking): maintenance 24 Nov 2023

* [LW-9151] Edit account name component (#746)

* feat(ui): input component

* feat(extension): edit account drawer

* feat(extension): add unit test

* feat: rename input component

* feat(ui): use pseudo parameters

* feat(ui): input width

* feat(ui): input disabled style

* feat(extension): add ui package

* feat: update lock file

* feat(ui): remove redundant styles

* feat(extension): [LW-5806] update Minting transaction display from dapps (#608)

* feat: identify minting txs from dapps and display proper UI to confirm

refs: LW-5806

* feat(extension): update dapp transaction styling

* refactor(extension,core): fix sonarcloud quality checks

* ci(core): add @lace/ui to dependencies

* test(extension): add mocks in ConfirmTransaction.test.tsx

* test(extension): remove leftover from local testing

* refactor(core): add missing newline at end of file

---------

Co-authored-by: przemyslaw.wlodek <[email protected]>

* test(extension): maintenance 27 nov (#757)

* test(extension): maintenance nov 27

* test(extension): clear failed request test logs

* test(extension): add real time console test logging, remove unnecessary logs

* test(extension): update wdio version

* test(extension): add node option env variable for e2e github runs

* test(extension): move node options to e2e test sections

* test(extension): increase max-old-space-size

* test(extension): downgrade wdio to stable version, remove node env variable

* feat(staking): [LW-6437, LW-8877] past epochs rewards chart (#718)

---------

Co-authored-by: refi93 <[email protected]>
Co-authored-by: przemyslaw.wlodek <[email protected]>
Co-authored-by: januszjanus <[email protected]>

* feat(extension): track manual re-sync and hd wallet discovery (#712)

* feat(staking): [LW-8929, LW-8777] apply pool search also to selected pools (#706)

---------

Co-authored-by: refi93 <[email protected]>

* feat(staking,common): enable manageDelegation CTA from pool details (#720)

Co-authored-by: przemyslaw.wlodek <[email protected]>

* feat(staking): load multi-delegation for HW wallets (#686)

---------

Signed-off-by: Kamil Džurman <[email protected]>
Co-authored-by: Rafael Korbaš <[email protected]>
Co-authored-by: januszjanus <[email protected]>
Co-authored-by: przemyslaw.wlodek <[email protected]>

* test(extension): test maintenance 29 Nov - fix Dapp e2e (#760)

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

* feat(extension): update dropdown menu with new wallet component

* feat(extension): add add new wallet option to profile dropdown

* refactor(ui): add test id

* refactor(extension): add test id for multi wallet

* refactor(extension): increase button width to match figma

* refactor(extension): remove copy address tooltip from multi-wallet menu it em

* refactor(extension): align top navigation buttons with side panel

* refactor(extension): update the expand button styling

* refactor(extension): update network pill and expand button styling

* refactor(extension): update network pill border radius

* refactor(extension): limit network pill change to popup only

* fix(extension): fix moving left side bar

* refactor(extension,core,cardano): post-merge fixes

* chore(extension): fix unit tests + rename

* chore(extension): fix unit tests and mocks

* chore(extension): remove TODO comments

* chore(core): review comments

---------

Signed-off-by: Kamil Džurman <[email protected]>
Co-authored-by: Janusz Janus <[email protected]>
Co-authored-by: Lucas <[email protected]>
Co-authored-by: Leonel Gobbi <[email protected]>
Co-authored-by: bslabiak <[email protected]>
Co-authored-by: Tomek Marciniak <[email protected]>
Co-authored-by: refi93 <[email protected]>
Co-authored-by: Kamil Džurman <[email protected]>
Co-authored-by: Lukasz Jagiela <[email protected]>
Co-authored-by: Renan Valentin <[email protected]>

Author: 10 people

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

@@ -18,7 +18,8 @@ USE_DIFFERENT_MNEMONIC_LENGTHS=true
 USE_NFT_FOLDERS=true
 USE_MULTI_CURRENCY=true
 USE_HIDE_MY_BALANCE=true
-USE_MULTI_DELEGATION_STAKING=true
+USE_MULTI_DELEGATION_STAKING_LEDGER=false
+USE_MULTI_DELEGATION_STAKING_TREZOR=false
 USE_ADA_HANDLE=true
 USE_DATA_CHECK=false
 USE_POSTHOG_ANALYTICS=true
@@ -27,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/.env.example

@@ -18,7 +18,8 @@ USE_DIFFERENT_MNEMONIC_LENGTHS=true
 USE_NFT_FOLDERS=true
 USE_MULTI_CURRENCY=true
 USE_HIDE_MY_BALANCE=true
-USE_MULTI_DELEGATION_STAKING=true
+USE_MULTI_DELEGATION_STAKING_LEDGER=false
+USE_MULTI_DELEGATION_STAKING_TREZOR=false
 USE_ADA_HANDLE=true
 USE_HANDLE_AB=false
 USE_DATA_CHECK=false

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 />