feat enable naming imported accounts

Author: 0xnullifier

src/app/pages/ImportAccount.tsx

@@ -1,11 +1,12 @@
-import React, { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 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 { ACCOUNT_NAME_PATTERN } from 'app/defaults';
 import PageLayout from 'app/layouts/PageLayout';
 import { useMidenContext, useAllAccounts } from 'lib/miden/front';
 import { navigate } from 'lib/woozie';
@@ -39,7 +40,7 @@ const ImportAccount: FC<ImportAccountProps> = ({ tabSlug }) => {
         </>
       }
     >
-      <div className="p-4">
+      <div className="px-4">
         <ByPrivateKeyForm />
       </div>
     </PageLayout>
@@ -50,27 +51,37 @@ export default ImportAccount;
 
 interface ByPrivateKeyFormData {
   privateKey: string;
+  name?: string;
   encPassword?: string;
 }
 
 const ByPrivateKeyForm: FC = () => {
   const { t } = useTranslation();
   const { importPublicAccountByPrivateKey } = useMidenContext();
-
+  const allAccounts = useAllAccounts();
   const {
     register,
     handleSubmit,
+    setValue,
     formState: { errors, isSubmitting }
   } = useForm<ByPrivateKeyFormData>();
   const [error, setError] = useState<ReactNode>(null);
 
+  const computedDefaultName = useMemo(() => {
+    return `Imported Acc ${allAccounts.length + 1}`;
+  }, [allAccounts]);
+
+  useEffect(() => {
+    setValue('name', computedDefaultName);
+  }, [computedDefaultName, setValue]);
+
   const onSubmit = useCallback(
-    async ({ privateKey }: ByPrivateKeyFormData) => {
+    async ({ privateKey, name }: ByPrivateKeyFormData) => {
       if (isSubmitting) return;
 
       setError(null);
       try {
-        await importPublicAccountByPrivateKey(privateKey);
+        await importPublicAccountByPrivateKey(privateKey, name);
       } catch (err: any) {
         console.error(err);
 
@@ -84,13 +95,34 @@ const ByPrivateKeyForm: FC = () => {
 
   return (
     <form className="w-full max-w-sm mx-auto my-8" onSubmit={handleSubmit(onSubmit)} style={{ minHeight: '325px' }}>
+      <FormField
+        {...register('name', {
+          pattern: {
+            value: ACCOUNT_NAME_PATTERN,
+            message: t('accountNameInputTitle')
+          }
+        })}
+        label={
+          <div className="font-medium -mb-2" style={{ fontSize: '14px', lineHeight: '20px' }}>
+            {t('accountName')}
+          </div>
+        }
+        id="create-account-name"
+        type="text"
+        placeholder={computedDefaultName}
+        errorCaption={errors.name?.message}
+        autoFocus
+      />
+      <div className="text-gray-200 mb-8" style={{ fontSize: '12px', lineHeight: '16px' }}>
+        {t('accountNameInputDescription')}
+      </div>
       {error && <Alert type="error" title={t('error')} autoFocus description={error} className="mb-6" />}
 
       <FormField
         {...register('privateKey', { required: t('required') })}
         secret
         textarea
-        rows={1}
+        rows={5}
         name="privateKey"
         id="importacc-privatekey"
         label={

src/lib/miden/back/actions.ts

@@ -163,10 +163,9 @@ export function editAccount(accPublicKey: string, name: string) {
   });
 }
 
-export function importAccount(privateKey: string) {
-  console.log('importAccount called');
+export function importAccount(privateKey: string, name?: string) {
   return withUnlocked(async ({ vault }) => {
-    const accounts = await vault.importAccount(privateKey);
+    const accounts = await vault.importAccount(privateKey, name);
     accountsUpdated({ accounts });
   });
 }

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);
+      await Actions.importAccount(req.privateKey, req.name);
       return {
         type: WalletMessageType.ImportAccountResponse
       };

src/lib/miden/back/vault.ts

@@ -375,7 +375,7 @@ export class Vault {
     });
   }
 
-  async importAccount(privateKey: string) {
+  async importAccount(privateKey: string, name?: string): Promise<WalletAccount[]> {
     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')));
@@ -388,7 +388,7 @@ export class Vault {
       });
       const newAccount: WalletAccount = {
         publicKey,
-        name: getNewAccountName(allAccounts),
+        name: name || `Imported Account ${allAccounts.length + 1}`,
         isPublic: true,
         type: WalletType.OnChain,
         hdIndex: -1 // -1 indicates imported account

src/lib/miden/front/client.ts

@@ -275,8 +275,8 @@ export const [MidenContextProvider, useMidenContext] = constate(() => {
   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);
+    async (privateKey: string, name?: string) => {
+      await storeImportAccountByPrivateKey(privateKey, name);
     },
     [storeImportAccountByPrivateKey]
   );

src/lib/shared/types.ts

@@ -267,6 +267,7 @@ export interface EditAccountResponse extends WalletMessageBase {
 export interface ImportAccountRequest extends WalletMessageBase {
   type: WalletMessageType.ImportAccountRequest;
   privateKey: string;
+  name?: string;
   encPassword?: string;
 }
 

src/lib/store/index.ts

@@ -187,10 +187,11 @@ export const useWalletStore = create<WalletStore>()(
       return res.privateKey;
     },
 
-    importPublicAccountByPrivateKey: async privateKey => {
+    importPublicAccountByPrivateKey: async (privateKey, name) => {
       const res = await request({
         type: WalletMessageType.ImportAccountRequest,
-        privateKey
+        privateKey,
+        name
       });
       assertResponse(res.type === WalletMessageType.ImportAccountResponse);
     },

src/lib/store/types.ts

@@ -87,7 +87,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>;
+  importPublicAccountByPrivateKey: (privateKey: string, name?: string) => Promise<void>;
 
   // Settings actions
   updateSettings: (newSettings: Partial<WalletSettings>) => Promise<void>;

src/screens/encrypted-file-flow/ExportFileComplete.tsx

@@ -96,7 +96,7 @@ const ExportFileComplete: React.FC<ExportFileCompleteProps> = ({
 
     // Revoke the object URL to free up resources
     URL.revokeObjectURL(url);
-  }, [midenClient, accounts, walletPassword, filePassword, fileName, revealMnemonic]);
+  }, [midenClient, accounts, walletPassword, filePassword, fileName, revealMnemonic, revealPrivateKey]);
 
   useEffect(() => {
     if (midenClientLoading || !midenClient) return;