feat: enable adding public accounts via private key

Author: 0xnullifier

src/app/pages/ImportAccount.tsx

@@ -1,14 +1,12 @@
-import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import Alert from 'app/atoms/Alert';
 import FormField from 'app/atoms/FormField';
 import FormSubmitButton from 'app/atoms/FormSubmitButton';
-import NoSpaceField from 'app/atoms/NoSpaceField';
-import TabSwitcher from 'app/atoms/TabSwitcher';
 import PageLayout from 'app/layouts/PageLayout';
-import { useTranslation } from 'react-i18next';
 import { useMidenContext, useAllAccounts } from 'lib/miden/front';
 import { navigate } from 'lib/woozie';
 
@@ -18,12 +16,6 @@ type ImportAccountProps = {
   tabSlug: string | null;
 };
 
-interface ImportTabDescriptor {
-  slug: string;
-  i18nKey: string;
-  Form: FC<{}>;
-}
-
 const ImportAccount: FC<ImportAccountProps> = ({ tabSlug }) => {
   const { t } = useTranslation();
   const allAccounts = useAllAccounts();
@@ -39,27 +31,6 @@ const ImportAccount: FC<ImportAccountProps> = ({ tabSlug }) => {
     prevAccLengthRef.current = accLength;
   }, [allAccounts, updateCurrentAccount]);
 
-  const allTabs = useMemo(
-    () =>
-      [
-        {
-          slug: 'private-key',
-          i18nKey: 'privateKey',
-          Form: ByPrivateKeyForm
-        },
-        {
-          slug: 'watch-only',
-          i18nKey: 'watchOnlyAccount',
-          Form: WatchOnlyForm
-        }
-      ].filter((x): x is ImportTabDescriptor => !!x),
-    []
-  );
-  const { slug, Form } = useMemo(() => {
-    const tab = tabSlug ? allTabs.find(currentTab => currentTab.slug === tabSlug) : null;
-    return tab ?? allTabs[0];
-  }, [allTabs, tabSlug]);
-
   return (
     <PageLayout
       pageTitle={
@@ -69,9 +40,7 @@ const ImportAccount: FC<ImportAccountProps> = ({ tabSlug }) => {
       }
     >
       <div className="p-4">
-        <TabSwitcher className="m-4" tabs={allTabs} activeTabSlug={slug} urlPrefix="/import-account" />
-
-        <Form />
+        <ByPrivateKeyForm />
       </div>
     </PageLayout>
   );
@@ -86,7 +55,7 @@ interface ByPrivateKeyFormData {
 
 const ByPrivateKeyForm: FC = () => {
   const { t } = useTranslation();
-  const { importAccount } = useMidenContext();
+  const { importPublicAccountByPrivateKey } = useMidenContext();
 
   const {
     register,
@@ -96,12 +65,12 @@ const ByPrivateKeyForm: FC = () => {
   const [error, setError] = useState<ReactNode>(null);
 
   const onSubmit = useCallback(
-    async ({ privateKey, encPassword }: ByPrivateKeyFormData) => {
+    async ({ privateKey }: ByPrivateKeyFormData) => {
       if (isSubmitting) return;
 
       setError(null);
       try {
-        await importAccount(privateKey.replace(/\s/g, ''), encPassword);
+        await importPublicAccountByPrivateKey(privateKey);
       } catch (err: any) {
         console.error(err);
 
@@ -110,7 +79,7 @@ const ByPrivateKeyForm: FC = () => {
         setError(err.message);
       }
     },
-    [importAccount, isSubmitting, setError]
+    [importPublicAccountByPrivateKey, isSubmitting, setError]
   );
 
   return (
@@ -129,7 +98,7 @@ const ByPrivateKeyForm: FC = () => {
             {t('privateKey')}
           </div>
         }
-        placeholder={t('privateKeyInputPlaceholder')}
+        placeholder={'eg. 3b6a27bccebfb65e3...'}
         errorCaption={errors.privateKey?.message}
         className="resize-none"
         onPaste={() => clearClipboard()}
@@ -154,103 +123,3 @@ const ByPrivateKeyForm: FC = () => {
     </form>
   );
 };
-
-interface WatchOnlyFormData {
-  viewKey: string;
-}
-
-const WatchOnlyForm: FC = () => {
-  const { t } = useTranslation();
-  const { importWatchOnlyAccount } = useMidenContext();
-
-  const {
-    handleSubmit,
-    control,
-    setValue,
-    getValues,
-    trigger,
-    formState: { errors, isSubmitting }
-  } = useForm<WatchOnlyFormData>({
-    mode: 'onChange'
-  });
-  const [error, setError] = useState<ReactNode>(null);
-
-  const addressFieldRef = useRef<HTMLTextAreaElement>(null);
-
-  const cleanViewKeyField = useCallback(() => {
-    setValue('viewKey', '');
-    trigger('viewKey');
-  }, [setValue, trigger]);
-
-  const onSubmit = useCallback(
-    async ({ viewKey }: WatchOnlyFormData) => {
-      if (isSubmitting) return;
-
-      setError(null);
-
-      try {
-        await importWatchOnlyAccount(viewKey);
-      } catch (err: any) {
-        console.error(err);
-
-        // Human delay
-        await new Promise(r => setTimeout(r, 300));
-        setError(err.message);
-      }
-    },
-    [importWatchOnlyAccount, isSubmitting, setError]
-  );
-
-  return (
-    <form className="w-full max-w-sm mx-auto my-8" onSubmit={handleSubmit(onSubmit)} style={{ minHeight: '325px' }}>
-      {error && <Alert type="error" title={t('error')} description={error} autoFocus className="mb-6" />}
-
-      <Controller
-        name="viewKey"
-        control={control}
-        rules={{
-          required: true,
-          validate: (value: any) => true
-        }}
-        render={({ field }) => (
-          <NoSpaceField
-            {...field}
-            ref={addressFieldRef}
-            onFocus={() => addressFieldRef.current?.focus()}
-            textarea
-            rows={1}
-            cleanable={Boolean(getValues().viewKey)}
-            onClean={cleanViewKeyField}
-            id="watch-viewKey"
-            label={
-              <div className="font-medium -mb-2" style={{ fontSize: '14px', lineHeight: '20px' }}>
-                {t('viewKeyWatchOnly')}
-              </div>
-            }
-            placeholder={t('viewKeyInputPlaceholder')}
-            errorCaption={errors.viewKey?.message}
-            className="resize-none"
-          />
-        )}
-      />
-      <div className="mb-6 text-gray-200" style={{ fontSize: '12px', lineHeight: '16px' }}>
-        {t('viewKeyInputDescription')}
-      </div>
-
-      <FormSubmitButton
-        className="capitalize w-full justify-center"
-        style={{
-          fontSize: '18px',
-          lineHeight: '24px',
-          paddingLeft: '0.5rem',
-          paddingRight: '0.5rem',
-          paddingTop: '12px',
-          paddingBottom: '12px'
-        }}
-        loading={isSubmitting}
-      >
-        {t('importAccount')}
-      </FormSubmitButton>
-    </form>
-  );
-};

src/app/pages/SelectAccount.tsx

@@ -22,6 +22,10 @@ const SelectAccount: FC = () => {
     navigate('/create-account');
   };
 
+  const onImportAccountClick = () => {
+    navigate('/import-account');
+  };
+
   return (
     <PageLayout
       pageTitle={
@@ -86,6 +90,12 @@ const SelectAccount: FC = () => {
       </div>
 
       <div className="flex flex-col w-full p-6 md:px-8 m-auto">
+        <Button
+          title={t('importAccount')}
+          variant={ButtonVariant.Primary}
+          onClick={onImportAccountClick}
+          className="mb-4"
+        />
         <Button title={t('addAccount')} variant={ButtonVariant.Secondary} onClick={onAddAccountClick} />
       </div>
     </PageLayout>

src/lib/miden/back/actions.ts

@@ -158,7 +158,13 @@ export function editAccount(accPublicKey: string, name: string) {
   });
 }
 
-export function importAccount(privateKey: string, encPassword?: string) {}
+export function importAccount(privateKey: string) {
+  console.log('importAccount called');
+  return withUnlocked(async ({ vault }) => {
+    const accounts = await vault.importAccount(privateKey);
+    accountsUpdated({ accounts });
+  });
+}
 
 export function importMnemonicAccount(mnemonic: string, password?: string, derivationPath?: string) {}
 

src/lib/miden/back/main.ts

@@ -87,7 +87,7 @@ async function processRequest(req: WalletRequest, port: Runtime.Port): Promise<W
         type: WalletMessageType.EditAccountResponse
       };
     case WalletMessageType.ImportAccountRequest:
-      await Actions.importAccount(req.privateKey, req.encPassword);
+      await Actions.importAccount(req.privateKey);
       return {
         type: WalletMessageType.ImportAccountResponse
       };

src/lib/miden/back/vault.ts

@@ -365,6 +365,42 @@ export class Vault {
     });
   }
 
+  async importAccount(privateKey: string) {
+    return withError('Failed to import account', async () => {
+      const allAccounts = await fetchAndDecryptOneWithLegacyFallBack<WalletAccount[]>(accountsStrgKey, this.passKey);
+      const secretKey = SecretKey.deserialize(new Uint8Array(Buffer.from(privateKey, 'hex')));
+      const pubKeyWord = secretKey.publicKey().toCommitment();
+
+      const pubKeyHex = pubKeyWord.toHex().slice(2); // remove '0x' prefix
+      console.log({ pubKeyHex });
+      const publicKey = await withWasmClientLock(async () => {
+        const midenClient = await getMidenClient();
+        return await midenClient.importPublicAccountFromPrivateKey(secretKey);
+      });
+      console.log({ publicKey });
+      const newAccount: WalletAccount = {
+        publicKey,
+        name: getNewAccountName(allAccounts),
+        isPublic: true,
+        type: WalletType.OnChain,
+        hdIndex: -1 // -1 indicates imported account
+      };
+
+      const newAllAccounts = concatAccount(allAccounts, newAccount);
+
+      await encryptAndSaveMany(
+        [
+          [accPubKeyStrgKey(pubKeyHex), pubKeyHex],
+          [accountsStrgKey, newAllAccounts],
+          [accAuthSecretKeyStrgKey(pubKeyHex), privateKey]
+        ],
+        this.passKey
+      );
+
+      return newAllAccounts;
+    });
+  }
+
   async getCurrentAccount() {
     const currAccountPubkey = await getPlain<string>(currentAccPubKeyStrgKey);
     const allAccounts = await this.fetchAccounts();

src/lib/miden/front/client.ts

@@ -8,6 +8,7 @@ import { WalletRequest, WalletResponse, WalletSettings, WalletStatus } from 'lib
 import { useWalletStore } from 'lib/store';
 import { WalletType } from 'screens/onboarding/types';
 
+import { store } from '../back/store';
 import { MidenState } from '../types';
 import { AutoSync } from './autoSync';
 
@@ -64,6 +65,7 @@ export const [MidenContextProvider, useMidenContext] = constate(() => {
   const storeGetAllDAppSessions = useWalletStore(s => s.getAllDAppSessions);
   const storeRemoveDAppSession = useWalletStore(s => s.removeDAppSession);
   const storeResetConfirmation = useWalletStore(s => s.resetConfirmation);
+  const storeImportAccountByPrivateKey = useWalletStore(s => s.importPublicAccountByPrivateKey);
 
   // Build the state object for backward compatibility
   const state: MidenState = useMemo(
@@ -267,7 +269,12 @@ export const [MidenContextProvider, useMidenContext] = constate(() => {
   const confirmDAppBulkTransactions = useCallback(async (id: string, confirmed: boolean, delegate: boolean) => {}, []);
   const confirmDAppDeploy = useCallback(async (id: string, confirmed: boolean, delegate: boolean) => {}, []);
   const getOwnedRecords = useCallback(async (accPublicKey: string) => {}, []);
-
+  const importPublicAccountByPrivateKey = useCallback(
+    async (privateKey: string) => {
+      await storeImportAccountByPrivateKey(privateKey);
+    },
+    [storeImportAccountByPrivateKey]
+  );
   return {
     state,
     // Aliases
@@ -318,7 +325,8 @@ export const [MidenContextProvider, useMidenContext] = constate(() => {
     removeDAppSession,
     decryptCiphertexts,
     getOwnedRecords,
-    importWalletFromClient
+    importWalletFromClient,
+    importPublicAccountByPrivateKey
   };
 });
 

src/lib/miden/sdk/miden-client-interface.ts

@@ -148,6 +148,24 @@ export class MidenClientInterface {
     return getBech32AddressFromAccountId(account.id());
   }
 
+  async importPublicAccountFromPrivateKey(privateKey: SecretKey): Promise<string> {
+    console.log('Importing public account from private key, secret key:', privateKey);
+    const accountBuilder = new AccountBuilder(new Uint8Array(32).fill(0))
+      .accountType(AccountType.RegularAccountImmutableCode)
+      .storageMode(AccountStorageMode.public())
+      .withAuthComponent(AccountComponent.createAuthComponent(privateKey))
+      .withBasicWalletComponent();
+    const wallet = accountBuilder.build().account;
+    console.log('Importing public account from private key, account id:', wallet.id().toString());
+    // add the secret key to the web client's keystore
+    await this.webClient.addAccountSecretKeyToWebStore(privateKey);
+    // register the new account in the web client
+    await this.webClient.importAccountById(wallet.id());
+    const walletId = getBech32AddressFromAccountId(wallet.id());
+
+    return walletId;
+  }
+
   // TODO: is this method even used?
   async consumeTransaction(accountId: string, listOfNoteIds: string[], delegateTransaction?: boolean) {
     console.log('Consuming transaction...');

src/lib/store/index.ts

@@ -185,6 +185,16 @@ export const useWalletStore = create<WalletStore>()(
       return res.privateKey;
     },
 
+    importPublicAccountByPrivateKey: async privateKey => {
+      console.log(privateKey);
+      const res = await request({
+        type: WalletMessageType.ImportAccountRequest,
+        privateKey
+      });
+      console.log(res);
+      assertResponse(res.type === WalletMessageType.ImportAccountResponse);
+    },
+
     // Settings actions
     updateSettings: async newSettings => {
       const { settings } = get();

src/lib/store/types.ts

@@ -82,6 +82,7 @@ export interface WalletActions {
   editAccountName: (accountPublicKey: string, name: string) => Promise<void>;
   revealMnemonic: (password: string) => Promise<string>;
   revealPrivateKey: (accountPublicKey: string, password: string) => Promise<string>;
+  importPublicAccountByPrivateKey: (privateKey: string) => Promise<void>;
 
   // Settings actions
   updateSettings: (newSettings: Partial<WalletSettings>) => Promise<void>;