fix: adds link to tooltip on disabled accounts on popover mode

input-output-hk · Feb 28, 2024 · 033fc68 · 033fc68
1 parent 7d5a181
commit 033fc68
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/...xtension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/WalletAccounts.tsx b/...xtension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/WalletAccounts.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import { NavigationButton, toast } from '@lace/common';
 import styles from './WalletAccounts.module.scss';
 import { ProfileDropdown } from '@lace/ui';
@@ -10,6 +10,9 @@ import { useWalletStore } from '@src/stores';
 import { useWalletManager } from '@hooks';
 import { TOAST_DEFAULT_DURATION } from '@hooks/useActionExecution';
 import { WalletType } from '@cardano-sdk/web-extension';
+import { Link } from 'react-router-dom';
+import { useBackgroundServiceAPIContext } from '@providers/BackgroundServiceAPI';
+import { BrowserViewSections } from '@lib/scripts/types';
 
 const defaultAccountName = (accountNumber: number) => `Account #${accountNumber}`;
 
@@ -25,6 +28,7 @@ export const WalletAccounts = ({ isPopup, onBack }: { isPopup: boolean; onBack:
     [t]
   );
   const editAccountDrawer = useAccountDataModal();
+  const backgroundServices = useBackgroundServiceAPIContext();
   const disableAccountConfirmation = useAccountDataModal();
   const { manageAccountsWallet: wallet, cardanoWallet, setIsDropdownMenuOpen } = useWalletStore();
   const {
@@ -38,9 +42,20 @@ export const WalletAccounts = ({ isPopup, onBack }: { isPopup: boolean; onBack:
     () =>
       isPopup &&
       (wallet.type === WalletType.Ledger || wallet.type === WalletType.Trezor) && {
-        reason: t('multiWallet.popupHwAccountEnable')
+        reason: (
+          <Trans
+            i18nKey="multiWallet.popupHwAccountEnable"
+            components={[
+              <Link
+                key="expandLink"
+                to={BrowserViewSections.HOME}
+                onClick={() => backgroundServices.handleOpenBrowser({ section: BrowserViewSections.HOME })}
+              />
+            ]}
+          />
+        )
       },
-    [isPopup, t, wallet.type]
+    [backgroundServices, isPopup, wallet.type]
   );
   const accountsData = useMemo(
     () =>

diff --git a/apps/browser-extension-wallet/src/lib/translations/en.json b/apps/browser-extension-wallet/src/lib/translations/en.json
@@ -1413,7 +1413,7 @@
       "wallet": "Wallet \"{{walletName}}\" activated",
       "account": "Account \"{{accountName}}\" activated"
     },
-    "popupHwAccountEnable": "Hardware wallets require the expanded view to enable accounts",
+    "popupHwAccountEnable": "Hardware wallets require the <0>expanded view</0> to enable accounts",
     "walletAlreadyExists": "Wallet wasn't created because it already exists"
   }
 }
diff --git a/...i/src/design-system/profile-dropdown/accounts/profile-dropdown-account-item.component.tsx b/...i/src/design-system/profile-dropdown/accounts/profile-dropdown-account-item.component.tsx
@@ -17,7 +17,7 @@ export interface Props {
     unlock: string;
     lock: string;
   };
-  disableUnlock?: { reason: string };
+  disableUnlock?: { reason: ReactNode | string };
   isUnlocked: boolean;
   isDeletable: boolean;
   onActivateClick?: (accountNumber: number) => void;

diff --git a/.../src/design-system/profile-dropdown/accounts/profile-dropdown-accounts-list.component.tsx b/.../src/design-system/profile-dropdown/accounts/profile-dropdown-accounts-list.component.tsx
@@ -9,7 +9,7 @@ export interface AccountData {
   accountNumber: number;
   isUnlocked: boolean;
   isActive: boolean;
-  disableUnlock?: { reason: string };
+  disableUnlock?: { reason: React.ReactNode | string };
 }
 
 export interface Props {