feat(multi account): wrap up

Author: mrcnk

packages/features/src/account-management/components/account-details.tsx

@@ -1,5 +1,6 @@
 import { truncateString } from "@/common/lib/string"
 import { LogoButton } from "@/components/menu-bar"
+import { MinaKeyConst } from "@palladxyz/key-management"
 import { type SingleCredentialState, useVault } from "@palladxyz/vault"
 import { EyeOff, Pencil } from "lucide-react"
 import { useTranslation } from "react-i18next"
@@ -13,6 +14,10 @@ type AccountDetailsProps = {
   onCopyWalletAddress: () => void
 }
 
+function getDerivationPath(accountIndex: number, addressIndex: number) {
+  return `m/${MinaKeyConst.PURPOSE}'/${MinaKeyConst.MINA_COIN_TYPE}'/${accountIndex}'/0/${addressIndex}`
+}
+
 export const AccountDetails = ({
   account,
   onCopyWalletAddress,
@@ -30,15 +35,15 @@ export const AccountDetails = ({
 
   const dropdownOptions = [
     {
-      name: t("Remove"),
+      name: t("accountManagement.remove"),
       icon: <EyeOff className="w-4 h-4" />,
       onClick: async (account: SingleCredentialState) => {
         const serializedList = Object.values(credentials)
         if (
           account.credential?.accountIndex === 0 ||
           account.credential?.addressIndex === 0
         ) {
-          toast.error("Cannot remove first credential")
+          toast.error(t("accountManagement.cannotRemoveFirstCredential"))
           return
         }
 
@@ -56,14 +61,14 @@ export const AccountDetails = ({
             currentAddressIndex:
               serializedList[0]?.credential?.addressIndex ?? 0,
           })
-          toast.success("Account removed")
+          toast.success(t("accountManagement.accountRemoved"))
         } else {
-          toast.error("Only the last credential can be removed")
+          toast.error(t("accountManagement.onlyLastCredentialCanBeRemoved"))
         }
       },
     },
     {
-      name: t("Edit"),
+      name: t("accountManagement.edit"),
       icon: <Pencil className="w-4 h-4" />,
       onClick: async (account: SingleCredentialState) => {
         navigate(`/accounts/edit/${account.credential?.addressIndex}`)
@@ -80,7 +85,7 @@ export const AccountDetails = ({
         <DetailsDropdown options={dropdownOptions} account={account} />
       </nav>
       <div className="flex w-full justify-between">
-        <div className="flex flex-col py-3 justify-end">
+        <div className="flex flex-col py-3 justify-end items-start text-left">
           <div className="text-xl text-secondary">
             {account?.credentialName &&
               truncateString({
@@ -97,6 +102,12 @@ export const AccountDetails = ({
                 firstCharCount: 5,
               })}
           </div>
+          <div className="text-xl text-secondary">
+            {getDerivationPath(
+              account?.credential?.accountIndex ?? 0,
+              account?.credential?.addressIndex ?? 0,
+            )}
+          </div>
         </div>
         {account?.credential?.address && (
           <QRCode

packages/features/src/account-management/routes/add-account.tsx

@@ -18,7 +18,7 @@ export const AddAccountRoute = () => {
 
   return (
     <AddEditAccountView
-      title={t("account-management.addAccount")}
+      title={t("accountManagement.addAccount")}
       handleAddEditAccount={handleAddAccount}
       isLoading={isLoading}
     />

packages/features/src/account-management/routes/edit-account.tsx

@@ -52,15 +52,15 @@ export const EditAccountRoute = () => {
           currentAddressIndex: updatedAccount?.credential?.addressIndex ?? 0,
         })
       }
-      toast.success("Account updated")
+      toast.success(t("accountManagement.accountEdited"))
       navigate(-1)
     }
     setIsLoading(false)
   }
 
   return (
     <AddEditAccountView
-      title={t("account-management.editAccount")}
+      title={t("accountManagement.editAccount")}
       account={editingAccount}
       handleAddEditAccount={handleEditAccount}
       isLoading={isLoading}

packages/features/src/account-management/views/account-management.tsx

@@ -40,7 +40,7 @@ export const AccountManagementView = ({
             }}
             type="button"
           >
-            Add
+            {t("accountManagement.addAccount")}
             <div className="mx-2">
               <Plus />
             </div>

packages/features/src/account-management/views/add-edit-account.tsx

@@ -29,11 +29,12 @@ export const AddEditAccountView = ({
   const {
     register,
     handleSubmit,
-    formState: { errors, dirtyFields },
+    formState: { errors },
     reset,
+    setValue,
   } = useForm({
     defaultValues: {
-      accountName: account ? account.credentialName : getRandomAnimalName(),
+      accountName: "",
     },
     resolver: zodResolver(formSchema),
   })
@@ -42,9 +43,10 @@ export const AddEditAccountView = ({
 
   useEffect(() => {
     if (account) {
-      reset({ accountName: account.credentialName })
+      return reset({ accountName: account.credentialName })
     }
-  }, [account, reset])
+    return setValue("accountName", getRandomAnimalName())
+  }, [account, reset, setValue])
 
   return (
     <AppLayout>
@@ -55,7 +57,7 @@ export const AddEditAccountView = ({
           <button
             type="button"
             className="btn btn-primary max-w-48 w-full"
-            disabled={!dirtyFields.accountName || isLoading}
+            disabled={isLoading}
             onClick={handleSubmit((data) =>
               handleAddEditAccount(data.accountName),
             )}
@@ -68,11 +70,11 @@ export const AddEditAccountView = ({
         <div className="flex flex-col flex-1 gap-4">
           <div className="flex flex-col">
             <label htmlFor="accountNameInput" className="label">
-              {t("account-management.addEditAccount")}
+              {t("accountManagement.addEditAccount")}
             </label>
             <input
               id="accountNameInput"
-              placeholder="Set account name"
+              placeholder={t("accountManagement.setAccountName")}
               data-testid="editAccount/accountNameInput"
               className="input"
               autoComplete="off"

packages/features/src/i18n/locales/en/en.json

@@ -147,5 +147,20 @@
     "deny": "Deny",
     "sign": "Sign",
     "reject": "Reject"
+  },
+  "accountManagement": {
+    "addAccount": "Add Account",
+    "editAccount": "Edit Account",
+    "addEditAccount": "Account Label",
+    "setAccountName": "Set Account Name",
+    "add": "Add",
+    "other": "Other",
+    "wallets": "Wallets",
+    "remove": "Remove",
+    "edit": "Edit",
+    "cannotRemoveFirstCredential": "Cannot remove first credential",
+    "onlyLastCredentialCanBeRemoved": "Only the last credential can be removed",
+    "accountRemoved": "Account removed",
+    "accountEdited": "Account edited"
   }
 }

packages/features/src/i18n/locales/tr/tr.json

@@ -147,5 +147,20 @@
     "deny": "Reddet",
     "sign": "İmzala",
     "reject": "Reddet"
+  },
+  "accountManagement": {
+    "addAccount": "Hesap Ekle",
+    "editAccount": "Hesap Düzenle",
+    "addEditAccount": "Hesap Etiketi",
+    "setAccountName": "Hesap Adını Ayarla",
+    "add": "Ekle",
+    "other": "Diğer",
+    "wallets": "Cüzdanlar",
+    "remove": "Kaldır",
+    "edit": "Düzenle",
+    "cannotRemoveFirstCredential": "İlk kimlik bilgisi silinemez",
+    "onlyLastCredentialCanBeRemoved": "Sadece son kimlik bilgisi silinebilir",
+    "accountRemoved": "Hesap kaldırıldı",
+    "accountEdited": "Hesap düzenlendi"
   }
 }

packages/vault/src/vault/utils/derive-account.ts

@@ -31,7 +31,7 @@ export async function deriveAccountHelper(get: any, credentialName: string) {
 
   const args: ChainDerivationArgs = {
     network: Network.Mina,
-    accountIndex: derivedAccountIndex,
+    accountIndex: 0,
     addressIndex: derivedAccountIndex,
   }
 
@@ -55,7 +55,7 @@ export async function deriveAccountHelper(get: any, credentialName: string) {
   setCurrentWallet({
     keyAgentName,
     credentialName,
-    currentAccountIndex: derivedAccountIndex,
+    currentAccountIndex: 0,
     currentAddressIndex: derivedAccountIndex,
   })
   setKnownAccounts(derivedCredential.address)