feat: stealing Mateusz code, show payment address in confirmation

Author: jurevans

apps/extension/src/App/Accounts/ParentAccounts.tsx

@@ -1,3 +1,4 @@
+import invariant from "invariant";
 import { useContext, useEffect } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 
@@ -29,17 +30,14 @@ export const ParentAccounts = (): JSX.Element => {
 
   // We check which accounts need to be re-imported
   const accounts = allAccounts
-    .filter(
-      (account) => account.parentId || account.type === AccountType.Ledger
-    )
+    .filter((account) => account.parentId)
     .map((account) => {
       const outdated =
         account.type !== AccountType.Ledger &&
         typeof account.pseudoExtendedKey === "undefined";
 
-      // The only account without a parent is the ledger account
-      const parent =
-        parentAccounts.find((pa) => pa.id === account.parentId) || account;
+      const parent = parentAccounts.find((pa) => pa.id === account.parentId);
+      invariant(parent, `Parent account not found for account ${account.id}`);
 
       return { ...parent, outdated };
     });

apps/extension/src/Setup/Common/Completion.tsx

@@ -4,7 +4,7 @@ import browser from "webextension-polyfill";
 import { chains } from "@namada/chains";
 import { ActionButton, Alert, Loading, ViewKeys } from "@namada/components";
 import { makeBip44Path } from "@namada/sdk/web";
-import { Bip44Path, DerivedAccount } from "@namada/types";
+import { Bip44Path } from "@namada/types";
 import {
   AccountSecret,
   AccountStore,
@@ -20,7 +20,7 @@ type Props = {
   status?: CompletionStatus;
   statusInfo: string;
   parentAccountStore?: AccountStore;
-  shieldedAccount?: DerivedAccount;
+  paymentAddress?: string;
   password?: string;
   passwordRequired: boolean | undefined;
   path: Bip44Path;
@@ -34,7 +34,7 @@ export const Completion: React.FC<Props> = (props) => {
     passwordRequired,
     path,
     parentAccountStore,
-    shieldedAccount,
+    paymentAddress,
     status,
     statusInfo,
   } = props;
@@ -84,7 +84,7 @@ export const Completion: React.FC<Props> = (props) => {
             publicKeyAddress={parentAccountStore?.publicKey}
             transparentAccountAddress={parentAccountStore?.address}
             transparentAccountPath={transparentAccountPath}
-            shieldedAccountAddress={shieldedAccount?.address}
+            shieldedAccountAddress={paymentAddress}
             trimCharacters={35}
             footer={
               <ActionButton

apps/extension/src/Setup/Ledger/LedgerConfirmation.tsx

@@ -13,7 +13,9 @@ export const LedgerConfirmation = (): JSX.Element => {
     return <></>;
   }
 
-  const account = location.state.account as DerivedAccount;
+  const account = location.state.account as DerivedAccount & {
+    paymentAddress: string;
+  };
   return (
     <Stack gap={4} className="h-[470px]">
       <p className="text-white text-center text-base w-full -mt-3 mb-8">
@@ -22,6 +24,7 @@ export const LedgerConfirmation = (): JSX.Element => {
       <ViewKeys
         publicKeyAddress={account.publicKey}
         transparentAccountAddress={account.address}
+        shieldedAccountAddress={account.paymentAddress}
         trimCharacters={35}
       />
       <ActionButton size="lg" onClick={closeCurrentTab}>

apps/extension/src/Setup/Ledger/LedgerConnect.tsx

@@ -1,10 +1,14 @@
 import { chains } from "@namada/chains";
 import { ActionButton, Alert, Image, Stack } from "@namada/components";
 import {
+  ExtendedViewingKey,
   Ledger as LedgerApp,
   makeBip44Path,
   makeSaplingPath,
+  ProofGenerationKey,
+  PseudoExtendedKey,
 } from "@namada/sdk/web";
+import initWasm from "@namada/sdk/web-init";
 import { Bip44Path } from "@namada/types";
 import { LedgerError } from "@zondax/ledger-namada";
 import { LedgerStep } from "Setup/Common";
@@ -48,12 +52,31 @@ export const LedgerConnect: React.FC<Props> = ({ path, setPath }) => {
       const { xfvk } = await ledger.getViewingKey(zip32Path);
       const { ak, nsk } = await ledger.getProofGenerationKey(zip32Path);
 
-      console.log("TODO", { zip32Path, xfvk, ak, nsk });
+      // SDK wasm init must be called
+      await initWasm();
+
+      const extendedViewingKey = new ExtendedViewingKey(xfvk);
+      const encodedExtendedViewingKey = extendedViewingKey.encode();
+      const encodedPaymentAddress = extendedViewingKey
+        .default_payment_address()
+        .encode();
+
+      const proofGenerationKey = ProofGenerationKey.from_bytes(ak, nsk);
+      const pseudoExtendedKey = PseudoExtendedKey.from(
+        extendedViewingKey,
+        proofGenerationKey
+      );
+      const encodedPseudoExtendedKey = pseudoExtendedKey.encode();
+
       setIsLedgerConnecting(false);
+
       navigate(routes.ledgerImport(), {
         state: {
           address,
           publicKey,
+          extendedViewingKey: encodedExtendedViewingKey,
+          paymentAddress: encodedPaymentAddress,
+          pseudoExtendedKey: encodedPseudoExtendedKey,
         },
       });
     } catch (e) {

apps/extension/src/Setup/Ledger/LedgerImport.tsx

@@ -10,6 +10,9 @@ import { useLocation, useNavigate } from "react-router-dom";
 type LedgerImportLocationState = {
   address: string;
   publicKey: string;
+  extendedViewingKey: string;
+  pseudoExtendedKey: string;
+  paymentAddress: string;
 };
 
 type LedgerProps = {
@@ -55,16 +58,25 @@ export const LedgerImport = ({
           await accountManager.savePassword(password);
         }
 
-        const { address, publicKey } = locationState;
+        const {
+          address,
+          publicKey,
+          extendedViewingKey,
+          paymentAddress,
+          pseudoExtendedKey,
+        } = locationState;
         const account = await accountManager.saveLedgerAccount({
           alias,
           address,
           publicKey,
           path,
+          paymentAddress,
+          extendedViewingKey,
+          pseudoExtendedKey,
         });
 
         navigate(routes.ledgerComplete(), {
-          state: { account: { ...account } },
+          state: { account: { ...account, paymentAddress } },
         });
       } catch (e) {
         console.warn(e);

apps/extension/src/Setup/Setup.tsx

@@ -11,7 +11,7 @@ import {
   Container,
   LifecycleExecutionWrapper as Wrapper,
 } from "@namada/components";
-import { Bip44Path, DerivedAccount } from "@namada/types";
+import { Bip44Path } from "@namada/types";
 import { assertNever } from "@namada/utils";
 import { AccountSecret, AccountStore } from "background/keyring";
 import { AnimatePresence, motion } from "framer-motion";
@@ -81,7 +81,7 @@ export const Setup: React.FC = () => {
   });
 
   const [parentAccountStore, setParentAccountStore] = useState<AccountStore>();
-  const [shieldedAccount, setShieldedAccount] = useState<DerivedAccount>();
+  const [paymentAddress, setPaymentAddress] = useState<string>();
   const [completionStatus, setCompletionStatus] = useState<CompletionStatus>();
   const [completionStatusInfo, setCompletionStatusInfo] = useState<string>("");
 
@@ -127,7 +127,7 @@ export const Setup: React.FC = () => {
         details,
         parentAccount
       );
-      setShieldedAccount(shieldedAccount);
+      setPaymentAddress(shieldedAccount?.address);
       setCompletionStatus(CompletionStatus.Completed);
       setCompletionStatusInfo("Done!");
     } catch (e) {
@@ -275,7 +275,7 @@ export const Setup: React.FC = () => {
                       password={accountCreationDetails.password || ""}
                       path={path}
                       parentAccountStore={parentAccountStore}
-                      shieldedAccount={shieldedAccount}
+                      paymentAddress={paymentAddress}
                       status={completionStatus}
                       statusInfo={completionStatusInfo}
                     />
@@ -352,7 +352,7 @@ export const Setup: React.FC = () => {
                       password={accountCreationDetails.password || ""}
                       path={path}
                       parentAccountStore={parentAccountStore}
-                      shieldedAccount={shieldedAccount}
+                      paymentAddress={paymentAddress}
                       status={completionStatus}
                       statusInfo={completionStatusInfo}
                     />

apps/extension/src/Setup/query.ts

@@ -88,10 +88,26 @@ export class AccountManager {
   async saveLedgerAccount(
     details: LedgerAccountDetails
   ): Promise<AccountStore> {
-    const { alias, address, publicKey, path } = details;
+    const {
+      alias,
+      address,
+      publicKey,
+      path,
+      extendedViewingKey,
+      pseudoExtendedKey,
+      paymentAddress,
+    } = details;
     return (await this.requester.sendMessage(
       Ports.Background,
-      new AddLedgerAccountMsg(alias, address, publicKey, path)
+      new AddLedgerAccountMsg(
+        alias,
+        address,
+        publicKey,
+        path,
+        extendedViewingKey,
+        pseudoExtendedKey,
+        paymentAddress
+      )
     )) as AccountStore;
   }
 }

apps/extension/src/Setup/types.ts

@@ -19,4 +19,7 @@ export type LedgerAccountDetails = {
   path: Bip44Path;
   address: string;
   publicKey: string;
+  extendedViewingKey: string;
+  pseudoExtendedKey: string;
+  paymentAddress: string;
 };

apps/extension/src/background/keyring/handler.ts

@@ -105,8 +105,24 @@ const handleAddLedgerAccountMsg: (
   service: KeyRingService
 ) => InternalHandler<AddLedgerAccountMsg> = (service) => {
   return async (_, msg) => {
-    const { alias, address, publicKey, bip44Path } = msg;
-    return await service.saveLedger(alias, address, publicKey, bip44Path);
+    const {
+      alias,
+      address,
+      publicKey,
+      bip44Path,
+      extendedViewingKey,
+      pseudoExtendedKey,
+      paymentAddress,
+    } = msg;
+    return await service.saveLedger(
+      alias,
+      address,
+      publicKey,
+      bip44Path,
+      extendedViewingKey,
+      pseudoExtendedKey,
+      paymentAddress
+    );
   };
 };
 

apps/extension/src/background/keyring/keyring.ts

@@ -101,7 +101,10 @@ export class KeyRing {
     alias: string,
     address: string,
     publicKey: string,
-    bip44Path: Bip44Path
+    bip44Path: Bip44Path,
+    pseudoExtendedKey: string,
+    extendedViewingKey: string,
+    paymentAddress: string
   ): Promise<AccountStore | false> {
     const id = generateId(UUID_NAMESPACE, alias, address);
     const accountStore: AccountStore = {
@@ -125,6 +128,30 @@ export class KeyRing {
       sensitive,
     });
 
+    const shieldedId = generateId(UUID_NAMESPACE, alias, paymentAddress);
+    const shieldedAccountStore: AccountStore = {
+      id: shieldedId,
+      alias,
+      address: paymentAddress,
+      publicKey,
+      owner: extendedViewingKey,
+      path: bip44Path,
+      pseudoExtendedKey,
+      parentId: id,
+      type: AccountType.ShieldedKeys,
+      source: "imported",
+      timestamp: 0,
+    };
+
+    const shieldedSensitive = await this.vaultService.encryptSensitiveData({
+      text: "",
+      passphrase: "",
+    });
+    await this.vaultStorage.add(KeyStore, {
+      public: shieldedAccountStore,
+      sensitive: shieldedSensitive,
+    });
+
     await this.setActiveAccount(id, AccountType.Ledger);
     return accountStore;
   }

apps/extension/src/background/keyring/messages.ts

@@ -186,27 +186,23 @@ export class AddLedgerAccountMsg extends Message<AccountStore | false> {
     public readonly address: string,
     public readonly publicKey: string,
     public readonly bip44Path: Bip44Path,
-    public readonly parentId?: string
+    public readonly extendedViewingKey: string,
+    public readonly pseudoExtendedKey: string,
+    public readonly paymentAddress: string
   ) {
     super();
   }
 
   validate(): void {
-    if (!this.alias) {
-      throw new Error("Alias must not be empty!");
-    }
-
-    if (!this.address) {
-      throw new Error("Address was not provided!");
-    }
-
-    if (!this.publicKey) {
-      throw new Error("Public key was not provided!");
-    }
-
-    if (!this.bip44Path) {
-      throw new Error("BIP44 Path was not provided!");
-    }
+    validateProps(this, [
+      "alias",
+      "address",
+      "publicKey",
+      "bip44Path",
+      "extendedViewingKey",
+      "pseudoExtendedKey",
+      "paymentAddress",
+    ]);
   }
 
   route(): string {
@@ -269,13 +265,7 @@ export class SetActiveAccountMsg extends Message<void> {
   }
 
   validate(): void {
-    if (!this.accountId) {
-      throw new Error("Account ID is not set!");
-    }
-
-    if (!this.accountType) {
-      throw new Error("Account Type is required!");
-    }
+    validateProps(this, ["accountId", "accountType"]);
   }
 
   route(): string {
@@ -369,10 +359,7 @@ export class QueryAccountDetailsMsg extends Message<
   }
 
   validate(): void {
-    if (!this.address) {
-      throw new Error("Account address is required!");
-    }
-    return;
+    validateProps(this, ["address"]);
   }
 
   route(): string {
@@ -397,12 +384,7 @@ export class AppendLedgerSignatureMsg extends Message<Uint8Array> {
   }
 
   validate(): void {
-    if (!this.txBytes) {
-      throw new Error("txBytes is required!");
-    }
-    if (!this.signature) {
-      throw new Error("signature is required!");
-    }
+    validateProps(this, ["txBytes", "signature"]);
   }
 
   route(): string {