feat: CP-12194 modify derivation path (#462)

Author: vvava

apps/legacy/src/components/ledger/LedgerConnector.tsx

@@ -52,12 +52,18 @@ interface LedgerConnectorProps {
   onSuccess: (data: LedgerConnectorData) => void;
   onTroubleshoot: () => void;
   checkIfWalletExists?: boolean;
+  addedDerivationPath?: DerivationPath;
+  isEditScreen?: boolean;
+  onReset?: () => void;
 }
 
 export function LedgerConnector({
   onSuccess,
   onTroubleshoot,
   checkIfWalletExists,
+  addedDerivationPath,
+  isEditScreen,
+  onReset,
 }: LedgerConnectorProps) {
   const theme = useTheme();
   const { capture } = useAnalyticsContext();
@@ -77,12 +83,15 @@ export function LedgerConnector({
   const [isLedgerExistsError, setIsLedgerExistsError] = useState(false);
 
   const [pathSpec, setPathSpec] = useState<DerivationPath>(
-    DerivationPath.BIP44,
+    addedDerivationPath || DerivationPath.BIP44,
   );
   const [addresses, setAddresses] = useState<AddressType[]>([]);
   const [hasPublicKeys, setHasPublicKeys] = useState(false);
-  const [dropdownDisabled, setDropdownDisabled] = useState(true);
+  const [dropdownDisabled, setDropdownDisabled] = useState(
+    isEditScreen ? false : true,
+  );
   const lastAccountIndexWithBalance = useRef(0);
+  const [isLoading, setIsLoading] = useState(false);
 
   const { t } = useTranslation();
   const { importLedger } = useImportLedger();
@@ -92,6 +101,7 @@ export function LedgerConnector({
     setAddresses([]);
     setHasPublicKeys(false);
     setPathSpec(DerivationPath.BIP44);
+    onReset?.();
   };
 
   const getAddressFromXpubKey = useCallback(
@@ -156,6 +166,7 @@ export function LedgerConnector({
   );
 
   const getXPublicKey = useCallback(async () => {
+    setIsLoading(true);
     try {
       const xpubValue = await getExtendedPublicKey();
       const xpubXPValue = await getExtendedPublicKey(
@@ -184,6 +195,8 @@ export function LedgerConnector({
       capture('OnboardingLedgerConnectionFailed');
       setPublicKeyState(LedgerStatus.LEDGER_CONNECTION_FAILED);
       popDeviceSelection();
+    } finally {
+      setIsLoading(false);
     }
   }, [
     getExtendedPublicKey,
@@ -217,6 +230,7 @@ export function LedgerConnector({
       pubKeys: PubKeyType[] = [],
       emptyAccounts = 0,
     ) => {
+      setIsLoading(true);
       try {
         const pubKey = await getPublicKey(accountIndex, derivationPathSpec);
         const pubKeyXP = await getPublicKey(
@@ -283,6 +297,8 @@ export function LedgerConnector({
         capture('OnboardingLedgerConnectionFailed');
         setPublicKeyState(LedgerStatus.LEDGER_CONNECTION_FAILED);
         popDeviceSelection();
+      } finally {
+        setIsLoading(false);
       }
     },
     [
@@ -346,6 +362,10 @@ export function LedgerConnector({
   // Attempt to automatically connect using Ledger Live as soon as we
   // establish the transport.
   useEffect(() => {
+    // When in edit mode, do not auto fetch keys
+    if (isEditScreen) {
+      return;
+    }
     const retrieveKeys = async (selectedPathSpec: DerivationPath) => {
       setPublicKeyState(LedgerStatus.LEDGER_LOADING);
       setDropdownDisabled(true);
@@ -386,6 +406,7 @@ export function LedgerConnector({
     getDerivationPathValue,
     wasTransportAttempted,
     getXPublicKey,
+    isEditScreen,
   ]);
 
   return (
@@ -412,7 +433,11 @@ export function LedgerConnector({
               }}
             >
               <Divider flexItem />
-              <DerivedAddresses addresses={addresses} balanceSymbol="AVAX" />
+              <DerivedAddresses
+                addresses={addresses}
+                balanceSymbol="AVAX"
+                isLoading={isLoading}
+              />
             </Stack>
           )}
       </Stack>

apps/legacy/src/components/settings/pages/Ledger.tsx

@@ -8,12 +8,19 @@ import {
   Box,
   Divider,
   Scrollbars,
+  EditIcon,
 } from '@avalabs/core-k2-components';
 import { SettingsPageProps } from '../models';
 import { SettingsHeader } from '../SettingsHeader';
-import { REQUIRED_LEDGER_VERSION, useLedgerContext } from '@core/ui';
+import {
+  REQUIRED_LEDGER_VERSION,
+  useLedgerContext,
+  useWalletContext,
+} from '@core/ui';
 import { Trans, useTranslation } from 'react-i18next';
 import { ConnectionIndicatorK2 } from '../../common/ConnectionIndicatorK2';
+import browser from 'webextension-polyfill';
+import { DerivationPath } from '@avalabs/core-wallets-sdk';
 
 const StyledListNumber = styled(Box)`
   background-color: ${({ theme }) => theme.palette.grey[800]};
@@ -37,6 +44,7 @@ const InstructionLink = styled(Typography)`
 export function Ledger({ goBack, navigateTo, width }: SettingsPageProps) {
   const { t } = useTranslation();
   const { hasLedgerTransport, avaxAppVersion } = useLedgerContext();
+  const { walletDetails } = useWalletContext();
 
   return (
     <Stack
@@ -61,10 +69,29 @@ export function Ledger({ goBack, navigateTo, width }: SettingsPageProps) {
             </Stack>
           </ListItem>
           {hasLedgerTransport && (
-            <ListItem sx={{ justifyContent: 'space-between' }}>
-              <Typography variant="body2">{t('Ledger Version')}</Typography>
-              <Typography variant="body2">{avaxAppVersion}</Typography>
-            </ListItem>
+            <>
+              <ListItem sx={{ justifyContent: 'space-between' }}>
+                <Typography variant="body2">{t('Ledger Version')}</Typography>
+                <Typography variant="body2">{avaxAppVersion}</Typography>
+              </ListItem>
+              <ListItem sx={{ justifyContent: 'space-between' }}>
+                <Typography variant="body2">{t('Derivation Path')}</Typography>
+                <Typography
+                  variant="body2"
+                  sx={{ cursor: 'pointer' }}
+                  onClick={() =>
+                    browser.tabs.create({
+                      url: `/fullscreen.html#/accounts/add-wallet/ledger?walletId=${walletDetails?.id}&derivationPath=${walletDetails?.derivationPath}`,
+                    })
+                  }
+                >
+                  {walletDetails?.derivationPath === DerivationPath.LedgerLive
+                    ? t('Leger Live')
+                    : t('BIP44')}{' '}
+                  <EditIcon size={14} />
+                </Typography>
+              </ListItem>
+            </>
           )}
         </List>
         {!hasLedgerTransport && (

apps/legacy/src/localization/locales/en/translation.json

@@ -137,6 +137,8 @@
   "Avalanche C-Chain": "Avalanche C-Chain",
   "Avalanche X/P-Chain": "Avalanche X/P-Chain",
   "Avoid using a password that you use with other websites or that might be easy for someone to guess.": "Avoid using a password that you use with other websites or that might be easy for someone to guess.",
+  "BIP44": "BIP44",
+  "BIP44 (Current)": "BIP44 (Current)",
   "BIP44 (Default)": "BIP44 (Default)",
   "Back": "Back",
   "Balance": "Balance",
@@ -181,6 +183,7 @@
   "Change Authenticator App": "Change Authenticator App",
   "Change Authenticator?": "Change Authenticator?",
   "Change Password": "Change Password",
+  "Change the Derivation Path": "Change the Derivation Path",
   "Chinese - Simplified": "Chinese - Simplified",
   "Chinese - Traditional": "Chinese - Traditional",
   "Choose Verification Method": "Choose Verification Method",
@@ -524,12 +527,14 @@
   "Ledger": "Ledger",
   "Ledger Disconnected": "Ledger Disconnected",
   "Ledger Live": "Ledger Live",
+  "Ledger Live (Current)": "Ledger Live (Current)",
   "Ledger Live Support": "Ledger Live Support",
   "Ledger Status": "Ledger Status",
   "Ledger Version": "Ledger Version",
   "Ledger requires you to set up a wallet policy in the Bitcoin app.": "Ledger requires you to set up a wallet policy in the Bitcoin app.",
   "Ledger {{number}}": "Ledger {{number}}",
   "Legal": "Legal",
+  "Leger Live": "Leger Live",
   "Lending": "Lending",
   "Limit exceeded": "Limit exceeded",
   "Liquidity Pool": "Liquidity Pool",

apps/legacy/src/pages/Accounts/AddWalletWithLedger.tsx

@@ -16,7 +16,7 @@ import { LedgerWrongVersionOverlay } from '../Ledger/LedgerWrongVersionOverlay';
 import { PubKeyType, SecretType } from '@core/types';
 import { NameYourWallet } from './components/NameYourWallet';
 import { DerivationPath } from '@avalabs/core-wallets-sdk';
-import { useImportLedger } from '@core/ui';
+import { useAccountsContext, useImportLedger, useQueryParams } from '@core/ui';
 import {
   LedgerConnector,
   LedgerConnectorData,
@@ -61,9 +61,23 @@ export function AddWalletWithLedger() {
   const { isImporting, importLedger } = useImportLedger();
   const [step, setStep] = useState(Step.Import);
   const [hasPublicKeys, setHasPublicKeys] = useState(false);
+  const {
+    accounts: { primary: primaryAccounts },
+    deleteAccounts,
+  } = useAccountsContext();
+
+  const params = useQueryParams();
+
+  const walletId = params.get('walletId') || undefined;
+
+  const derivationPath = params.get('derivationPath') as DerivationPath;
+
+  const isEditScreen = Boolean(walletId && derivationPath);
+
   const [pathSpec, setPathSpec] = useState<DerivationPath>(
     DerivationPath.BIP44,
   );
+
   const lastAccountIndexWithBalance = useRef(0);
   const [solanaKeys, setSolanaKeys] = useState<SolanaPublicKey[]>([]);
 
@@ -88,6 +102,14 @@ export function AddWalletWithLedger() {
     lastAccountIndexWithBalance.current = data.lastAccountIndexWithBalance;
   }
 
+  const onReset = () => {
+    setXpub('');
+    setXpubXP('');
+    setPublicKeys(undefined);
+    setHasPublicKeys(false);
+    lastAccountIndexWithBalance.current = 0;
+  };
+
   const handleImport = useCallback(
     async (name?: string) => {
       try {
@@ -115,6 +137,13 @@ export function AddWalletWithLedger() {
           numberOfAccountsToCreate: lastAccountIndexWithBalance.current + 1,
         });
 
+        if (walletId && primaryAccounts[walletId]) {
+          const oldLegderAccountIds = primaryAccounts[walletId].map(
+            (account) => account.id,
+          );
+          await deleteAccounts(oldLegderAccountIds);
+        }
+
         capture('LedgerImportSuccess');
         setStep(Step.Completed);
       } catch (err) {
@@ -129,14 +158,16 @@ export function AddWalletWithLedger() {
     },
     [
       capture,
-      getErrorMessage,
-      importLedger,
-      lastAccountIndexWithBalance,
-      pathSpec,
       publicKeys,
+      solanaKeys,
+      importLedger,
       xpub,
       xpubXP,
-      solanaKeys,
+      pathSpec,
+      walletId,
+      primaryAccounts,
+      deleteAccounts,
+      getErrorMessage,
     ],
   );
 
@@ -243,14 +274,19 @@ export function AddWalletWithLedger() {
               <Stack>
                 <Stack direction="row" alignItems="flex-start" sx={{ mb: 1 }}>
                   <PageTitle showBackButton={false}>
-                    {t('Add Wallet with Ledger')}
+                    {isEditScreen
+                      ? t('Change the Derivation Path')
+                      : t('Add Wallet with Ledger')}
                   </PageTitle>
                 </Stack>
 
                 <LedgerConnector
                   onSuccess={onSuccess}
                   onTroubleshoot={() => setStep(Step.Troubleshoot)}
                   checkIfWalletExists
+                  addedDerivationPath={derivationPath}
+                  isEditScreen={isEditScreen}
+                  onReset={onReset}
                 />
               </Stack>
               <Stack sx={{ p: 2, mb: 2, rowGap: 1 }}>

apps/legacy/src/pages/Onboarding/components/DerivationPathDropDown.tsx

@@ -7,6 +7,7 @@ import {
   useTheme,
 } from '@avalabs/core-k2-components';
 import { Dropdown, DropdownItem } from '@/components/common/Dropdown';
+import { useQueryParams } from '@core/ui';
 
 interface DerivationPathDropdownProps {
   onPathSelected: (path: DerivationPath) => void;
@@ -19,9 +20,21 @@ export function DerivationPathDropdown({
   onPathSelected,
   isDisabled,
 }: DerivationPathDropdownProps) {
+  const params = useQueryParams();
+  const defaultDerivationPath = params.get('derivationPath') as DerivationPath;
+
   const { t } = useTranslation();
   const theme = useTheme();
 
+  const bip44Label =
+    defaultDerivationPath == DerivationPath.BIP44
+      ? t('BIP44 (Current)')
+      : t('BIP44 (Default)');
+  const ledgerLiveLabel =
+    defaultDerivationPath == DerivationPath.LedgerLive
+      ? t('Ledger Live (Current)')
+      : t('Ledger Live');
+
   return (
     <Stack>
       <Dropdown
@@ -42,9 +55,9 @@ export function DerivationPathDropdown({
           renderValue: () => {
             switch (pathSpec) {
               case DerivationPath.LedgerLive:
-                return <Typography>{t('Ledger Live')}</Typography>;
+                return <Typography>{ledgerLiveLabel}</Typography>;
               case DerivationPath.BIP44:
-                return <Typography>{t('BIP44 (Default)')}</Typography>;
+                return <Typography>{bip44Label}</Typography>;
             }
           },
           onChange: (e) => {
@@ -69,7 +82,7 @@ export function DerivationPathDropdown({
               width: '100%',
             }}
           >
-            <Typography variant="body2">{t('BIP44 (Default)')}</Typography>
+            <Typography variant="body2">{bip44Label}</Typography>
             {pathSpec === DerivationPath.BIP44 && <CheckIcon />}
           </Stack>
         </DropdownItem>
@@ -86,7 +99,7 @@ export function DerivationPathDropdown({
               width: '100%',
             }}
           >
-            <Typography variant="body2">{t('Ledger Live')}</Typography>
+            <Typography variant="body2">{ledgerLiveLabel}</Typography>
             {pathSpec === DerivationPath.LedgerLive && <CheckIcon />}
           </Stack>
         </DropdownItem>