feat: Keychain/Namadillo: Payment Address gen (#1905)

Author: jurevans

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

@@ -4,23 +4,27 @@ import { makeBip44Path, makeSaplingPath } from "@namada/sdk/web";
 import { AccountType, DerivedAccount } from "@namada/types";
 import { PageHeader } from "App/Common";
 import routes from "App/routes";
+import { GenPaymentAddressMsg } from "background/keyring";
 import { AccountContext } from "context";
+import { useRequester } from "hooks/useRequester";
 import { useContext, useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import { Ports } from "router";
 import { isCustomPath } from "utils";
 
 type ViewAccountUrlParams = {
   accountId: string;
 };
 
 export const ViewAccount = (): JSX.Element => {
+  const requester = useRequester();
   const { accountId = "" } = useParams<ViewAccountUrlParams>();
   const { accounts: accountStore } = useContext(AccountContext);
   const [parentAccount, setParentAccount] = useState<DerivedAccount>();
   const [transparentAddress, setTransparentAddress] = useState("");
   const [transparentPath, setTransparentPath] = useState<string>();
-  const [shieldedAddress, setShieldedAddress] = useState("");
   const [shieldedPath, setShieldedPath] = useState<string>();
+  const [shieldedAccount, setShieldedAccount] = useState<DerivedAccount>();
   const [viewingKey, setViewingKey] = useState("");
   const navigate = useNavigate();
 
@@ -40,13 +44,26 @@ export const ViewAccount = (): JSX.Element => {
     );
   };
 
+  const handleIncrementPaymentAddress = async (): Promise<void> => {
+    if (shieldedAccount) {
+      const { id } = shieldedAccount;
+      const updatedAccount = await requester.sendMessage(
+        Ports.Background,
+        new GenPaymentAddressMsg(id)
+      );
+      if (updatedAccount) {
+        setShieldedAccount(updatedAccount);
+      }
+    }
+  };
+
   useEffect(() => {
     const parentAccount = searchParentAccount(accountId);
     if (parentAccount) {
       setParentAccount(parentAccount);
 
       if (parentAccount.type === AccountType.ShieldedKeys) {
-        setShieldedAddress(parentAccount.address);
+        setShieldedAccount(parentAccount);
         setShieldedPath(
           isCustomPath(parentAccount.path) ?
             makeSaplingPath(
@@ -79,7 +96,7 @@ export const ViewAccount = (): JSX.Element => {
 
     const shieldedAccount = searchShieldedKey(accountId);
     if (shieldedAccount) {
-      setShieldedAddress(shieldedAccount.address);
+      setShieldedAccount(shieldedAccount);
       setShieldedPath(
         isCustomPath(shieldedAccount.path) ?
           makeSaplingPath(
@@ -109,12 +126,19 @@ export const ViewAccount = (): JSX.Element => {
               publicKeyAddress={parentAccount.publicKey ?? ""}
               transparentAccountAddress={transparentAddress}
               transparentAccountPath={transparentPath}
-              shieldedAccountAddress={shieldedAddress}
+              shieldedAccountAddress={shieldedAccount?.address}
               shieldedAccountPath={shieldedPath}
               trimCharacters={21}
             />
             {viewingKey && (
               <>
+                <ActionButton
+                  outlineColor="yellow"
+                  size="sm"
+                  onClick={handleIncrementPaymentAddress}
+                >
+                  Generate Payment Address
+                </ActionButton>
                 {parentAccount.type !== AccountType.Ledger && (
                   <ActionButton
                     outlineColor="yellow"

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

@@ -49,6 +49,7 @@ export const LedgerConnect: React.FC<Props> = ({
     let encodedExtendedViewingKey: string | undefined;
     let encodedPaymentAddress: string | undefined;
     let encodedPseudoExtendedKey: string | undefined;
+    let diversifierIndex: number | undefined;
 
     try {
       const {
@@ -84,9 +85,8 @@ export const LedgerConnect: React.FC<Props> = ({
 
         const extendedViewingKey = new ExtendedViewingKey(xfvk);
         encodedExtendedViewingKey = extendedViewingKey.encode();
-        encodedPaymentAddress = extendedViewingKey
-          .default_payment_address()
-          .encode();
+        [diversifierIndex, encodedPaymentAddress] =
+          extendedViewingKey.default_payment_address();
 
         const proofGenerationKey = ProofGenerationKey.from_bytes(ak, nsk);
         const pseudoExtendedKey = PseudoExtendedKey.from(
@@ -105,6 +105,7 @@ export const LedgerConnect: React.FC<Props> = ({
           extendedViewingKey: encodedExtendedViewingKey,
           paymentAddress: encodedPaymentAddress,
           pseudoExtendedKey: encodedPseudoExtendedKey,
+          diversifierIndex,
         },
       });
     } catch (e) {

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

@@ -13,6 +13,7 @@ type LedgerImportLocationState = {
   extendedViewingKey: string;
   pseudoExtendedKey: string;
   paymentAddress: string;
+  diversifierIndex: number;
 };
 
 type LedgerProps = {
@@ -66,6 +67,7 @@ export const LedgerImport = ({
           extendedViewingKey,
           paymentAddress,
           pseudoExtendedKey,
+          diversifierIndex,
         } = locationState;
         const account = await accountManager.saveLedgerAccount({
           alias,
@@ -76,6 +78,7 @@ export const LedgerImport = ({
           paymentAddress,
           extendedViewingKey,
           pseudoExtendedKey,
+          diversifierIndex,
         });
 
         navigate(routes.ledgerComplete(), {

apps/extension/src/Setup/types.ts

@@ -24,4 +24,5 @@ export type LedgerAccountDetails = {
   extendedViewingKey: string;
   pseudoExtendedKey: string;
   paymentAddress: string;
+  diversifierIndex: number;
 };

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

@@ -11,6 +11,7 @@ import {
   DeleteAccountMsg,
   DeriveShieldedAccountMsg,
   GenerateMnemonicMsg,
+  GenPaymentAddressMsg,
   GetActiveAccountMsg,
   QueryAccountDetailsMsg,
   QueryParentAccountsMsg,
@@ -104,7 +105,11 @@ export const getHandler: (service: KeyRingService) => Handler = (service) => {
           env,
           msg as RevealSpendingKeyMsg
         );
-
+      case GenPaymentAddressMsg:
+        return handleGenPaymentAddressMsg(service)(
+          env,
+          msg as GenPaymentAddressMsg
+        );
       default:
         throw new Error("Unknown msg type");
     }
@@ -124,6 +129,7 @@ const handleAddLedgerAccountMsg: (
       extendedViewingKey,
       pseudoExtendedKey,
       paymentAddress,
+      diversifierIndex,
     } = msg;
     return await service.saveLedger(
       alias,
@@ -133,7 +139,8 @@ const handleAddLedgerAccountMsg: (
       zip32Path,
       extendedViewingKey,
       pseudoExtendedKey,
-      paymentAddress
+      paymentAddress,
+      diversifierIndex
     );
   };
 };
@@ -293,3 +300,11 @@ const handleRevealSpendingKeyMsg: (
     return await service.revealSpendingKey(msg.accountId);
   };
 };
+
+const handleGenPaymentAddressMsg: (
+  service: KeyRingService
+) => InternalHandler<GenPaymentAddressMsg> = (service) => {
+  return async (_, { accountId }) => {
+    return await service.genPaymentAddress(accountId);
+  };
+};

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

@@ -13,6 +13,7 @@ import {
   DeleteAccountMsg,
   DeriveShieldedAccountMsg,
   GenerateMnemonicMsg,
+  GenPaymentAddressMsg,
   GetActiveAccountMsg,
   QueryAccountDetailsMsg,
   QueryParentAccountsMsg,
@@ -44,6 +45,7 @@ export function init(router: Router, service: KeyRingService): void {
   router.registerMessage(RenameAccountMsg);
   router.registerMessage(VerifyArbitraryMsg);
   router.registerMessage(GenDisposableSignerMsg);
+  router.registerMessage(GenPaymentAddressMsg);
 
   router.addHandler(ROUTE, getHandler(service));
 }

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

@@ -57,6 +57,7 @@ type DerivedAccountInfo = {
   text: string;
   owner: string;
   pseudoExtendedKey?: string;
+  diversifierIndex?: number;
 };
 
 /**
@@ -110,7 +111,8 @@ export class KeyRing {
     zip32Path?: Zip32Path,
     pseudoExtendedKey?: string,
     extendedViewingKey?: string,
-    paymentAddress?: string
+    paymentAddress?: string,
+    diversifierIndex?: number
   ): Promise<AccountStore | false> {
     const id = generateId(UUID_NAMESPACE, alias, address);
     const accountStore: AccountStore = {
@@ -152,6 +154,7 @@ export class KeyRing {
         parentId: id,
         type: AccountType.ShieldedKeys,
         source: "imported",
+        diversifierIndex,
         timestamp: 0,
       };
 
@@ -296,6 +299,7 @@ export class KeyRing {
             alias,
             address: shieldedKeys.address,
             owner: shieldedKeys.viewingKey,
+            diversifierIndex: shieldedKeys.diversifierIndex,
             path,
             pseudoExtendedKey: shieldedKeys.pseudoExtendedKey,
             type: accountType,
@@ -432,6 +436,10 @@ export class KeyRing {
       pseudoExtendedKey,
       source,
       timestamp,
+      diversifierIndex:
+        type === AccountType.ShieldedKeys ?
+          derivedAccountInfo.diversifierIndex
+        : undefined,
     };
     const sensitive = await this.vaultService.encryptSensitiveData({
       text,
@@ -482,15 +490,21 @@ export class KeyRing {
       throw new Error(`Invalid account type! ${parentType}`);
     }
 
-    const { address, viewingKey, spendingKey, pseudoExtendedKey } =
-      shieldedKeys;
+    const {
+      address,
+      diversifierIndex,
+      viewingKey,
+      spendingKey,
+      pseudoExtendedKey,
+    } = shieldedKeys;
 
     const info = {
       address,
       id,
       owner: viewingKey,
       text: JSON.stringify({ spendingKey }),
       pseudoExtendedKey,
+      diversifierIndex,
     };
 
     // Check whether keys already exist for this account
@@ -516,15 +530,18 @@ export class KeyRing {
 
   public async queryAllAccounts(): Promise<DerivedAccount[]> {
     const accounts = await this.vaultStorage.findAll(KeyStore);
-    return accounts.map((entry) => entry.public as AccountStore);
+    return accounts.map((entry) => entry.public);
   }
 
   /**
    * Query single account by ID
    */
   public async queryAccountById(accountId: string): Promise<DerivedAccount> {
-    return (await this.vaultStorage.findOneOrFail(KeyStore, "id", accountId))
-      .public;
+    const account = (
+      await this.vaultStorage.findOneOrFail(KeyStore, "id", accountId)
+    ).public;
+
+    return account;
   }
 
   /**
@@ -852,4 +869,60 @@ export class KeyRing {
 
     return { publicKey, address };
   }
+
+  // Query and validate that account is a shielded account
+  async queryShieldedAccountById(accountId: string): Promise<DerivedAccount> {
+    const account = await this.queryAccountById(accountId);
+    if (!account) {
+      throw new Error(`Account with ID ${accountId} not found!`);
+    }
+
+    if (account.type !== AccountType.ShieldedKeys) {
+      throw new Error(
+        `Account with ID ${accountId} is not a shielded account!`
+      );
+    }
+
+    if (!account.owner) {
+      throw new Error(
+        `Account with ID ${accountId} does not have a viewing key!`
+      );
+    }
+
+    return account;
+  }
+
+  async genPaymentAddress(
+    accountId: string
+  ): Promise<DerivedAccount | undefined> {
+    try {
+      const account = await this.queryShieldedAccountById(accountId);
+      let currentIndex = account.diversifierIndex;
+      const { keys } = this.sdkService.getSdk();
+
+      if (!currentIndex) {
+        // Pre-existing accounts may not have a diversifier index, therefore,
+        // we query the default, and increment the first valid diversifier index
+        const genPaymentAddress = keys.genPaymentAddress(account.owner!);
+        currentIndex = genPaymentAddress.diversifierIndex;
+      }
+
+      const { address, diversifierIndex } = keys.genPaymentAddress(
+        account.owner!,
+        currentIndex + 1
+      );
+
+      await this.vaultStorage.update(KeyStore, "id", accountId, {
+        address,
+        diversifierIndex,
+      });
+
+      return {
+        ...account,
+        address,
+      };
+    } catch (e) {
+      throw new Error(`${e}`);
+    }
+  }
 }