From acc40ecc599ef4b97170655d9d216f19a504eca1 Mon Sep 17 00:00:00 2001
From: "Justin R. Evans" <jurevans@gmail.com>
Date: Wed, 2 Oct 2024 12:45:41 -0400
Subject: [PATCH 1/3] feat: add extension & sdk versions to settings

---
 .../src/App/Common/AppHeaderNavigation.tsx      | 17 +++++++++++++++++
 .../namadillo/src/App/Settings/SettingsMain.tsx |  2 ++
 packages/crypto/lib/src/crypto/zip32.rs         |  3 ---
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/extension/src/App/Common/AppHeaderNavigation.tsx b/apps/extension/src/App/Common/AppHeaderNavigation.tsx
index 9ec8eeb41..4a9378274 100644
--- a/apps/extension/src/App/Common/AppHeaderNavigation.tsx
+++ b/apps/extension/src/App/Common/AppHeaderNavigation.tsx
@@ -5,6 +5,8 @@ import { useVaultContext } from "context";
 import { FaDiscord, FaXTwitter } from "react-icons/fa6";
 import { GoAlert, GoQuestion } from "react-icons/go";
 import { useNavigate } from "react-router-dom";
+import sdkPackage from "../../../../../packages/sdk/package.json";
+import extensionPackage from "../../../package.json";
 
 type AppHeaderNavigationProps = {
   open: boolean;
@@ -97,6 +99,21 @@ export const AppHeaderNavigation = ({
               Lock Wallet
             </li>
           </Stack>
+          <div className="relative h-full">
+            <Stack
+              as="ul"
+              gap={1}
+              direction="vertical"
+              className="absolute bottom-4"
+            >
+              <li>
+                Keychain Version: <strong>{extensionPackage.version}</strong>
+              </li>
+              <li>
+                SDK Version: <strong>{sdkPackage.version}</strong>
+              </li>
+            </Stack>
+          </div>
           <footer className="flex items-center justify-between text-yellow-950 text-2xl">
             <Stack
               as="ul"
diff --git a/apps/namadillo/src/App/Settings/SettingsMain.tsx b/apps/namadillo/src/App/Settings/SettingsMain.tsx
index 480a5a7ab..3facb7cbe 100644
--- a/apps/namadillo/src/App/Settings/SettingsMain.tsx
+++ b/apps/namadillo/src/App/Settings/SettingsMain.tsx
@@ -1,4 +1,5 @@
 import { routes } from "App/routes";
+import { version as sdkVersion } from "../../../../../packages/sdk/package.json";
 import { version } from "../../../package.json";
 import { SettingsPanelMenuItem } from "./SettingsPanelMenuItem";
 
@@ -14,6 +15,7 @@ export const SettingsMain = (): JSX.Element => {
       </ul>
       <div className="text-xs">
         <div>Namadillo Version: {version}</div>
+        <div>SDK Version: {sdkVersion}</div>
       </div>
     </div>
   );
diff --git a/packages/crypto/lib/src/crypto/zip32.rs b/packages/crypto/lib/src/crypto/zip32.rs
index 631dc21e4..49b40304f 100644
--- a/packages/crypto/lib/src/crypto/zip32.rs
+++ b/packages/crypto/lib/src/crypto/zip32.rs
@@ -11,9 +11,6 @@ use masp_primitives::{
 use wasm_bindgen::prelude::*;
 use zeroize::{Zeroize, ZeroizeOnDrop};
 
-#[wasm_bindgen]
-pub struct ExtSpendingKey(pub(crate) ExtendedSpendingKey);
-
 #[wasm_bindgen]
 #[derive(Zeroize)]
 pub struct DerivationResult {

From e52453890c553b5890d66cecf2b59fe2c17b8b9a Mon Sep 17 00:00:00 2001
From: "Justin R. Evans" <jurevans@gmail.com>
Date: Fri, 4 Oct 2024 08:05:42 -0400
Subject: [PATCH 2/3] feat: adding bip44 form

---
 .../extension/src/App/Accounts/AddAccount.tsx | 423 ------------------
 apps/extension/src/App/Accounts/index.ts      |   1 -
 apps/extension/src/Setup/Common/Bip44Form.tsx |  78 ++++
 apps/extension/src/Setup/Common/index.ts      |   1 +
 4 files changed, 79 insertions(+), 424 deletions(-)
 delete mode 100644 apps/extension/src/App/Accounts/AddAccount.tsx
 create mode 100644 apps/extension/src/Setup/Common/Bip44Form.tsx

diff --git a/apps/extension/src/App/Accounts/AddAccount.tsx b/apps/extension/src/App/Accounts/AddAccount.tsx
deleted file mode 100644
index d4c4c0d06..000000000
--- a/apps/extension/src/App/Accounts/AddAccount.tsx
+++ /dev/null
@@ -1,423 +0,0 @@
-import { LedgerError } from "@zondax/ledger-namada";
-import React, { useCallback, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-
-import { Ledger, makeBip44Path } from "@heliax/namada-sdk/web";
-import { chains } from "@namada/chains";
-import { ActionButton, Input, ToggleButton } from "@namada/components";
-import { AccountType, DerivedAccount } from "@namada/types";
-
-import { TopLevelRoute } from "App/types";
-import { AddLedgerAccountMsg, DeriveAccountMsg } from "background/keyring";
-import { ExtensionRequester } from "extension";
-import { useAuth } from "hooks";
-import { isKeyChainLocked, redirectToLogin } from "hooks/useAuth";
-import { Ports } from "router";
-
-type Props = {
-  accounts: DerivedAccount[];
-  parentAccount: DerivedAccount;
-  requester: ExtensionRequester;
-  setAccounts: (accounts: DerivedAccount[]) => void;
-  isLocked: boolean;
-  unlockKeyRing: () => void;
-};
-
-const validatePath = (
-  parentAccountIndex: number,
-  newAccount: { change: number; index: number },
-  accounts: DerivedAccount[],
-  accountType: AccountType
-): boolean => {
-  const newPath = [
-    parentAccountIndex,
-    newAccount.change,
-    newAccount.index,
-  ].join("/");
-
-  let isValid = true;
-  accounts
-    .filter((derivedAccount) => derivedAccount.type === accountType)
-    .forEach((derivedAccount: DerivedAccount) => {
-      const {
-        path: { account, change, index },
-      } = derivedAccount;
-      const existingPath = [account, change, index].join("/");
-
-      if (newPath === existingPath) {
-        isValid = false;
-      }
-    });
-
-  return isValid;
-};
-
-/**
- * Validates if alias is already in use
- *
- * @param {DerivedAccount[]} accounts - list of all the accounts
- * @param {string} alias - alias of the new address
- * @returns {boolean} returns true when alias is valid
- */
-const validateAliasInUse = (
-  accounts: DerivedAccount[],
-  alias: string
-): boolean => {
-  return accounts.map((acc) => acc.alias).includes(alias) === false;
-};
-
-/**
- * Validates if alias is required
- *
- * @param {string} alias - alias of the new address
- * @returns {boolean} returns true when alias is valid
- */
-const validateAliasIsRequired = (alias: string): boolean => {
-  return alias !== "";
-};
-
-const findNextIndex = (
-  accounts: DerivedAccount[],
-  accountType: AccountType
-): number => {
-  let maxIndex = 0;
-
-  accounts
-    .filter((account) => account.type === accountType)
-    .forEach((account) => {
-      const { index } = account.path;
-      maxIndex = index + 1;
-    });
-
-  return maxIndex;
-};
-
-enum Status {
-  Idle,
-  Pending,
-  Failed,
-}
-
-enum Validation {
-  Valid = "",
-  PathInUse = "Invalid path! This path is already in use.",
-  AliasInUse = "This alias is already in use.",
-  AliasRequired = "Alias is required!",
-}
-
-const AddAccount: React.FC<Props> = ({
-  accounts,
-  parentAccount,
-  requester,
-  setAccounts,
-  isLocked,
-  unlockKeyRing,
-}) => {
-  const navigate = useNavigate();
-  const [alias, setAlias] = useState("");
-  const [change, setChange] = useState(0);
-  const [validation, setValidation] = useState(Validation.Valid);
-  const isFormValid = validation === Validation.Valid;
-  const [formError, setFormError] = useState("");
-  const [formStatus, setFormStatus] = useState(Status.Idle);
-  const [isTransparent, setIsTransparent] = useState(true);
-  const {
-    id: parentId,
-    type: parentAccountType,
-    path: { account: parentAccountIndex },
-  } = parentAccount;
-
-  const getChildAccountType = (
-    parentAccountType: AccountType,
-    isTransparent: boolean
-  ): AccountType => {
-    if (parentAccountType === AccountType.Ledger) {
-      return parentAccountType;
-    }
-    return isTransparent ? AccountType.PrivateKey : AccountType.ShieldedKeys;
-  };
-
-  const [index, setIndex] = useState(
-    findNextIndex(
-      accounts,
-      getChildAccountType(parentAccountType, isTransparent)
-    )
-  );
-
-  const bip44Prefix = "m/44";
-  const zip32Prefix = "m/32";
-  const { coinType } = chains.namada.bip44;
-
-  const authorize = useAuth(requester);
-
-  useEffect(() => {
-    if (parentAccountType === AccountType.Mnemonic) {
-      void authorize(
-        TopLevelRoute.AddAccount,
-        `A password for "${parentAccount.alias}" is required to add an account!`,
-        unlockKeyRing
-      );
-    }
-  }, []);
-
-  useEffect(() => {
-    const _validatePath = validatePath.bind(
-      null,
-      parentAccountIndex,
-      { change, index },
-      accounts,
-      parentAccountType
-    );
-    if (!_validatePath()) {
-      setValidation(Validation.PathInUse);
-    } else {
-      setValidation(Validation.Valid);
-    }
-  }, [parentAccountIndex, change, index, isTransparent]);
-
-  useEffect(() => {
-    setIndex(
-      findNextIndex(
-        accounts,
-        getChildAccountType(parentAccountType, isTransparent)
-      )
-    );
-  }, [accounts, parentAccountType, isTransparent]);
-
-  const validateAlias = (accounts: DerivedAccount[], alias: string): void => {
-    const _validateAliasInUse = validateAliasInUse.bind(null, accounts, alias);
-    const _validateAliasIsRequired = validateAliasIsRequired.bind(null, alias);
-
-    if (!_validateAliasIsRequired()) {
-      setValidation(Validation.AliasRequired);
-    } else if (!_validateAliasInUse()) {
-      setValidation(Validation.AliasInUse);
-    } else {
-      setValidation(Validation.Valid);
-    }
-  };
-
-  const addLedgerAccount = async (): Promise<DerivedAccount | false | void> => {
-    setFormStatus(Status.Pending);
-
-    const bip44Path = {
-      account: parentAccount.path.account,
-      change,
-      index,
-    };
-    const bip44PathString = makeBip44Path(
-      chains.namada.bip44.coinType,
-      bip44Path
-    );
-
-    const ledger = await Ledger.init().catch((e) => {
-      setFormError(`${e}`);
-      setFormStatus(Status.Failed);
-    });
-
-    if (!ledger) {
-      return;
-    }
-
-    try {
-      const {
-        version: { errorMessage, returnCode },
-      } = await ledger.status();
-
-      if (returnCode !== LedgerError.NoErrors) {
-        throw new Error(errorMessage);
-      }
-
-      const { address, publicKey } =
-        await ledger.getAddressAndPublicKey(bip44PathString);
-
-      // TODO: provide a password for ledger
-      return await requester.sendMessage(
-        Ports.Background,
-        new AddLedgerAccountMsg(alias, address, publicKey, bip44Path, parentId)
-      );
-    } catch (e) {
-      setFormError(`${e}`);
-      setFormStatus(Status.Failed);
-    } finally {
-      await ledger.closeTransport();
-    }
-  };
-
-  const addPrivateKeyAccount = async (): Promise<
-    DerivedAccount | undefined
-  > => {
-    const isLocked = await isKeyChainLocked(requester);
-
-    if (isLocked) {
-      redirectToLogin(
-        navigate,
-        TopLevelRoute.AddAccount,
-        `Session timed out! A password for "${parentAccount.alias}" is required!`
-      );
-      return;
-    }
-
-    setFormStatus(Status.Pending);
-    return await requester
-      .sendMessage<DeriveAccountMsg>(
-        Ports.Background,
-        new DeriveAccountMsg(
-          {
-            account: parentAccountIndex,
-            change,
-            index,
-          },
-          isTransparent ? AccountType.PrivateKey : AccountType.ShieldedKeys,
-          alias
-        )
-      )
-      .catch((e) => {
-        throw new Error(`Requester error: ${e}`);
-      });
-  };
-
-  const handleAccountAdd = useCallback(async (): Promise<void> => {
-    try {
-      const derivedAccount =
-        parentAccountType === AccountType.Ledger ?
-          await addLedgerAccount()
-        : await addPrivateKeyAccount();
-      if (derivedAccount) {
-        setAccounts([...accounts, derivedAccount]);
-        navigate(TopLevelRoute.Accounts);
-      }
-    } catch (e) {
-      console.error(e);
-      setFormStatus(Status.Failed);
-      setFormError("An error occurred adding this account!");
-    }
-  }, [accounts, alias, change, index]);
-
-  const handleNumericChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    callback: (value: number) => void
-  ): void => {
-    const result = e.target.value.replace(/\D/g, "") || "0";
-    callback(parseInt(result));
-  };
-
-  const handleFocus = (e: React.ChangeEvent<HTMLInputElement>): void =>
-    e.target.select();
-
-  const parentDerivationPath =
-    isTransparent ?
-      `${bip44Prefix}'/${coinType}'/${parentAccountIndex}'/`
-    : `${zip32Prefix}'/${coinType}'/${parentAccountIndex}'/`;
-
-  return (
-    <div className="flex flex-col w-full px-3">
-      {!(parentAccountType === AccountType.Mnemonic && isLocked) && (
-        <>
-          <div
-            className="mb-2 [&_input]:w-[92%]"
-            onKeyDown={async (e) => {
-              if (e.key === "Enter" && isFormValid) {
-                await handleAccountAdd();
-              }
-            }}
-          >
-            <div className="my-3">
-              <Input
-                label="Alias"
-                autoFocus={true}
-                value={alias}
-                onChange={(e) => {
-                  const { value } = e.target;
-                  setAlias(value);
-                  validateAlias(accounts, value);
-                }}
-              />
-            </div>
-
-            <div className="my-3">
-              <label className="text-base font-medium text-neutral-300">
-                <p>HD Derivation Path</p>
-                <div className="flex w-full justify-start items-center">
-                  <span className="h-px px-1 text-xs text-neutral-300">
-                    {parentDerivationPath}
-                  </span>
-
-                  {isTransparent && (
-                    <>
-                      <Input
-                        type="number"
-                        min="0"
-                        max="1"
-                        value={change}
-                        onChange={(e) => handleNumericChange(e, setChange)}
-                        onFocus={handleFocus}
-                      />
-                      <i>/</i>
-                    </>
-                  )}
-
-                  <Input
-                    type="number"
-                    min="0"
-                    value={index}
-                    onChange={(e) => handleNumericChange(e, setIndex)}
-                    onFocus={handleFocus}
-                  />
-                </div>
-              </label>
-            </div>
-
-            {parentAccountType !== AccountType.Ledger && (
-              <div className="my-3">
-                <div className="flex justify-end items-center pt-1 w-full">
-                  <ToggleButton
-                    label="Transparent"
-                    onChange={() => setIsTransparent(!isTransparent)}
-                    checked={isTransparent}
-                  />
-                  <span>&nbsp;Shielded</span>
-                </div>
-              </div>
-            )}
-
-            <div className="text-sm text-neutral-400">
-              Derivation path:{" "}
-              <span>{`${parentDerivationPath}${
-                isTransparent ? `${change}/` : ""
-              }${index}`}</span>
-            </div>
-
-            <div className="text-xs py-1 text-red-500">{validation}</div>
-          </div>
-
-          {formStatus === Status.Pending && (
-            <div className="text-sm pb-2 text-white">
-              Submitting new account...
-            </div>
-          )}
-
-          {formStatus === Status.Failed && (
-            <div className="text-xs mb-2 text-red-500">{formError}</div>
-          )}
-
-          <div className="flex [&_button]:flex-1">
-            <ActionButton onClick={() => navigate(TopLevelRoute.Accounts)}>
-              Back
-            </ActionButton>
-            <ActionButton
-              disabled={
-                !isFormValid || formStatus === Status.Pending || alias === ""
-              }
-              onClick={handleAccountAdd}
-            >
-              Add
-            </ActionButton>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default AddAccount;
diff --git a/apps/extension/src/App/Accounts/index.ts b/apps/extension/src/App/Accounts/index.ts
index 913bb8da6..137fc0786 100644
--- a/apps/extension/src/App/Accounts/index.ts
+++ b/apps/extension/src/App/Accounts/index.ts
@@ -1,4 +1,3 @@
-export { default as AddAccount } from "./AddAccount";
 export * from "./DeleteAccount";
 export * from "./RenameAccount";
 export * from "./ViewAccount";
diff --git a/apps/extension/src/Setup/Common/Bip44Form.tsx b/apps/extension/src/Setup/Common/Bip44Form.tsx
new file mode 100644
index 000000000..9834955e0
--- /dev/null
+++ b/apps/extension/src/Setup/Common/Bip44Form.tsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+
+import { chains } from "@namada/chains";
+import { Input } from "@namada/components";
+import { Bip44Path } from "@namada/types";
+
+type Props = {
+  path: Bip44Path;
+  setPath: (path: Bip44Path) => void;
+};
+
+const Bip44Form: React.FC<Props> = ({ path, setPath }) => {
+  const [customPath, setCustomPath] = useState(path);
+  const { coinType } = chains.namada.bip44;
+
+  const handleNumericChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    key: keyof Bip44Path
+  ): void => {
+    const result = e.target.value.replace(/\D/g, "") || "0";
+    setCustomPath({
+      ...customPath,
+      [key]: result,
+    });
+  };
+
+  useEffect(() => {
+    setPath(customPath);
+  }, [customPath]);
+
+  const handleFocus = (e: React.ChangeEvent<HTMLInputElement>): void =>
+    e.target.select();
+
+  const parentDerivationPath = `m/44'/${coinType}'/`;
+
+  return (
+    <div className="flex flex-col w-full px-3">
+      <div className="mb-2 [&_input]:w-[92%]">
+        <div className="my-3">
+          <label className="text-base font-medium text-neutral-300">
+            <div className="flex w-full justify-start items-center">
+              <span className="h-px px-1 text-xs text-neutral-300">
+                {parentDerivationPath}
+              </span>
+              <Input
+                type="number"
+                min="0"
+                value={customPath.account}
+                onChange={(e) => handleNumericChange(e, "account")}
+                onFocus={handleFocus}
+              />
+              <i>&apos;/</i>
+              <Input
+                type="number"
+                min="0"
+                max="1"
+                value={customPath.change}
+                onChange={(e) => handleNumericChange(e, "change")}
+                onFocus={handleFocus}
+              />
+              <i>&apos;/</i>
+              <Input
+                type="number"
+                min="0"
+                value={customPath.index}
+                onChange={(e) => handleNumericChange(e, "index")}
+                onFocus={handleFocus}
+              />
+              <i>&apos;</i>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Bip44Form;
diff --git a/apps/extension/src/Setup/Common/index.ts b/apps/extension/src/Setup/Common/index.ts
index 2f0e0297a..7c6a57148 100644
--- a/apps/extension/src/Setup/Common/index.ts
+++ b/apps/extension/src/Setup/Common/index.ts
@@ -1,4 +1,5 @@
 export * from "./AccountAlias";
+export * from "./Bip44Form";
 export * from "./Completion";
 export * from "./ContainerHeader";
 export * from "./LedgerStep";

From 09de81374206308df033362733df4bd568edb9a8 Mon Sep 17 00:00:00 2001
From: "Justin R. Evans" <jurevans@gmail.com>
Date: Fri, 4 Oct 2024 11:17:13 -0400
Subject: [PATCH 3/3] feat: setting up advanced options

---
 .../src/Setup/Common/AdvancedOptions.tsx      | 45 +++++++++++
 .../src/Setup/Common/AdvancedOptionsMenu.tsx  | 18 +++++
 .../src/Setup/Common/Bip39PassphraseForm.tsx  | 42 ++++++++++
 apps/extension/src/Setup/Common/Bip44Form.tsx |  7 +-
 apps/extension/src/Setup/Common/index.ts      |  1 +
 .../Setup/ImportAccount/SeedPhraseImport.tsx  | 78 ++++++-------------
 6 files changed, 135 insertions(+), 56 deletions(-)
 create mode 100644 apps/extension/src/Setup/Common/AdvancedOptions.tsx
 create mode 100644 apps/extension/src/Setup/Common/AdvancedOptionsMenu.tsx
 create mode 100644 apps/extension/src/Setup/Common/Bip39PassphraseForm.tsx

diff --git a/apps/extension/src/Setup/Common/AdvancedOptions.tsx b/apps/extension/src/Setup/Common/AdvancedOptions.tsx
new file mode 100644
index 000000000..b6f78fe9a
--- /dev/null
+++ b/apps/extension/src/Setup/Common/AdvancedOptions.tsx
@@ -0,0 +1,45 @@
+import { Bip44Path } from "@namada/types";
+import React, { useState } from "react";
+import { AdvancedOptionsMenu } from "./AdvancedOptionsMenu";
+import Bip39PassphraseForm from "./Bip39PassphraseForm";
+import Bip44Form from "./Bip44Form";
+
+type Props = {
+  path: Bip44Path;
+  passphrase: string;
+  setPath: (path: Bip44Path) => void;
+  setPassphrase: (passphrase: string) => void;
+};
+
+export enum Option {
+  Menu = "menu",
+  Passphrase = "passphrase",
+  Path = "path",
+}
+
+export const AdvancedOptions: React.FC<Props> = ({
+  path,
+  passphrase,
+  setPath,
+  setPassphrase,
+}) => {
+  const [view, setView] = useState<Option>(Option.Menu);
+
+  return (
+    <div className="bg-black">
+      {view === Option.Menu && (
+        <AdvancedOptionsMenu
+          onPathClick={() => setView(Option.Path)}
+          onPassphraseClick={() => setView(Option.Passphrase)}
+        />
+      )}
+      {view === Option.Path && <Bip44Form path={path} setPath={setPath} />}
+      {view === Option.Passphrase && (
+        <Bip39PassphraseForm
+          passphrase={passphrase}
+          setPassphrase={setPassphrase}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/apps/extension/src/Setup/Common/AdvancedOptionsMenu.tsx b/apps/extension/src/Setup/Common/AdvancedOptionsMenu.tsx
new file mode 100644
index 000000000..ace61a3ec
--- /dev/null
+++ b/apps/extension/src/Setup/Common/AdvancedOptionsMenu.tsx
@@ -0,0 +1,18 @@
+import { Stack } from "@namada/components";
+import React from "react";
+
+type Props = {
+  onPathClick: () => void;
+  onPassphraseClick: () => void;
+};
+export const AdvancedOptionsMenu: React.FC<Props> = ({
+  onPathClick,
+  onPassphraseClick,
+}) => {
+  return (
+    <Stack as="ul" gap={2} direction="vertical" className="[&_li]:text-white">
+      <li onClick={onPathClick}>Set Custom Derivation Path</li>
+      <li onClick={onPassphraseClick}>Import with BIP39 Passphrase</li>
+    </Stack>
+  );
+};
diff --git a/apps/extension/src/Setup/Common/Bip39PassphraseForm.tsx b/apps/extension/src/Setup/Common/Bip39PassphraseForm.tsx
new file mode 100644
index 000000000..eb15727ed
--- /dev/null
+++ b/apps/extension/src/Setup/Common/Bip39PassphraseForm.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import { Alert, Input, Stack } from "@namada/components";
+
+type Props = {
+  passphrase: string;
+  setPassphrase: (passphrase: string) => void;
+};
+
+const Bip39PassphraseForm: React.FC<Props> = ({
+  passphrase,
+  setPassphrase,
+}) => {
+  return (
+    <div className="flex flex-col w-full px-3">
+      <div className="mb-2 [&_input]:w-[92%]">
+        <div className="my-3">
+          <Alert type={"warning"} title={"Please note"} className="mb-3">
+            <Stack gap={6}>
+              <p className="text-[13px] leading-[1.25] text-white">
+                This import option is only users who have created a Namada
+                account using the Namada protocol CLI v.0.17.0 or older, and
+                used a BIP39 passphrase. Do not input your Namada extension
+                password
+              </p>
+              <Input
+                data-testid="setup-import-keys-passphrase-input"
+                label="Enter your passphrase"
+                placeholder="Optional passphrase for your seed phrase."
+                hideIcon={true}
+                onChange={(e) => setPassphrase(e.target.value)}
+                value={passphrase}
+              />
+            </Stack>
+          </Alert>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Bip39PassphraseForm;
diff --git a/apps/extension/src/Setup/Common/Bip44Form.tsx b/apps/extension/src/Setup/Common/Bip44Form.tsx
index 9834955e0..48164cb5d 100644
--- a/apps/extension/src/Setup/Common/Bip44Form.tsx
+++ b/apps/extension/src/Setup/Common/Bip44Form.tsx
@@ -10,7 +10,10 @@ type Props = {
 };
 
 const Bip44Form: React.FC<Props> = ({ path, setPath }) => {
-  const [customPath, setCustomPath] = useState(path);
+  const [customPath, setCustomPath] = useState({
+    ...path,
+    index: 1,
+  });
   const { coinType } = chains.namada.bip44;
 
   const handleNumericChange = (
@@ -20,7 +23,7 @@ const Bip44Form: React.FC<Props> = ({ path, setPath }) => {
     const result = e.target.value.replace(/\D/g, "") || "0";
     setCustomPath({
       ...customPath,
-      [key]: result,
+      [key]: parseInt(result),
     });
   };
 
diff --git a/apps/extension/src/Setup/Common/index.ts b/apps/extension/src/Setup/Common/index.ts
index 7c6a57148..9af846dc1 100644
--- a/apps/extension/src/Setup/Common/index.ts
+++ b/apps/extension/src/Setup/Common/index.ts
@@ -1,4 +1,5 @@
 export * from "./AccountAlias";
+export * from "./Bip39PassphraseForm";
 export * from "./Bip44Form";
 export * from "./Completion";
 export * from "./ContainerHeader";
diff --git a/apps/extension/src/Setup/ImportAccount/SeedPhraseImport.tsx b/apps/extension/src/Setup/ImportAccount/SeedPhraseImport.tsx
index a06f18690..32c0be852 100644
--- a/apps/extension/src/Setup/ImportAccount/SeedPhraseImport.tsx
+++ b/apps/extension/src/Setup/ImportAccount/SeedPhraseImport.tsx
@@ -8,12 +8,13 @@ import {
   RadioGroup,
   Stack,
 } from "@namada/components";
+import { Bip44Path } from "@namada/types";
 import { assertNever } from "@namada/utils";
-import { SeedPhraseList } from "Setup/Common";
 import { AccountSecret, ValidateMnemonicMsg } from "background/keyring";
 import { useRequester } from "hooks/useRequester";
-import { GoX } from "react-icons/go";
 import { Ports } from "router";
+import { SeedPhraseList } from "Setup/Common";
+import { AdvancedOptions } from "Setup/Common/AdvancedOptions";
 import { fillArray, filterPrivateKeyPrefix, validatePrivateKey } from "utils";
 
 type Props = {
@@ -32,9 +33,15 @@ enum MnemonicTypes {
 export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
   const requester = useRequester();
   const [privateKey, setPrivateKey] = useState("");
+  const [showAdvanced, setShowAdvanced] = useState(false);
   const [passphrase, setPassphrase] = useState("");
+  const [path, setPath] = useState<Bip44Path>({
+    account: 0,
+    change: 0,
+    index: 0,
+  });
+  const [bip39Passphrase, setBip39Passphrase] = useState("");
   const [invalidWordIndex, setInvalidWordIndex] = useState<number>();
-  const [showPassphrase, setShowPassphrase] = useState(false);
   const [mnemonicType, setMnemonicType] = useState<MnemonicTypes>(
     MnemonicTypes.TwelveWords
   );
@@ -68,7 +75,7 @@ export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
   const isSubmitButtonDisabled =
     mnemonicType === MnemonicTypes.PrivateKey ?
       privateKey === "" || privateKeyError !== ""
-    : mnemonics.slice(0, mnemonicType).some((mnemonic) => !mnemonic);
+      : mnemonics.slice(0, mnemonicType).some((mnemonic) => !mnemonic);
 
   const onPaste = useCallback(
     (index: number, e: React.ClipboardEvent<HTMLInputElement>) => {
@@ -146,31 +153,13 @@ export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
           setInvalidWordIndex(invalidWordIndex);
           typeof invalidWordIndex === "number" ?
             setMnemonicError(`Word #${invalidWordIndex + 1} is invalid!`)
-          : setMnemonicError(error);
+            : setMnemonicError(error);
         } else {
           setMnemonicError(error);
         }
       }
     }
-  }, [mnemonics, mnemonicType, privateKey, passphrase, showPassphrase]);
-
-  const onPassphraseChange = useCallback(
-    (value: string) => {
-      setPassphrase(value);
-    },
-    [passphrase]
-  );
-
-  const onShowPassphraseChange = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      if (!showPassphrase) {
-        setPassphrase("");
-      }
-      setShowPassphrase(!showPassphrase);
-    },
-    [showPassphrase]
-  );
+  }, [mnemonics, mnemonicType, privateKey, passphrase, showAdvanced]);
 
   return (
     <>
@@ -215,7 +204,7 @@ export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
             ]}
             onChange={(value: string) => {
               if (Number(value) === MnemonicTypes.PrivateKey) {
-                setShowPassphrase(false);
+                setShowAdvanced(false);
                 setPassphrase("");
               }
               setMnemonicType(Number(value));
@@ -246,41 +235,22 @@ export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
           )}
         </Stack>
         <Stack direction="vertical" gap={4}>
-          {showPassphrase && (
-            <div className="relative">
-              <div onClick={onShowPassphraseChange}>
-                <i className="block text-lg absolute top-5 right-4 text-white cursor-pointer">
-                  <GoX />
-                </i>
-              </div>
-              <Alert type={"warning"} title={"Please note"} className="mb-3">
-                <Stack gap={6}>
-                  <p className="text-[13px] leading-[1.25] text-white">
-                    This import option is only users who have created a Namada
-                    account using the Namada protocol CLI v.0.17.0 or older, and
-                    used a BIP39 passphrase. Do not input your Namada extension
-                    password
-                  </p>
-                  <Input
-                    data-testid="setup-import-keys-passphrase-input"
-                    label="Enter your passphrase"
-                    placeholder="Optional passphrase for your seed phrase."
-                    hideIcon={true}
-                    onChange={(e) => onPassphraseChange(e.target.value)}
-                    value={passphrase}
-                  />
-                </Stack>
-              </Alert>
-            </div>
+          {showAdvanced && (
+            <AdvancedOptions
+              path={path}
+              passphrase={bip39Passphrase}
+              setPath={setPath}
+              setPassphrase={setBip39Passphrase}
+            />
           )}
-          {!showPassphrase && mnemonicType !== MnemonicTypes.PrivateKey && (
+          {mnemonicType !== MnemonicTypes.PrivateKey && !showAdvanced && (
             <LinkButton
               data-testid="setup-import-keys-use-passphrase-button"
               className="text-xs !text-neutral-400"
-              onClick={onShowPassphraseChange}
+              onClick={() => setShowAdvanced(true)}
               type="button" // makes enter key ignore this and submit form
             >
-              Import with BIP39 Passphrase
+              Advanced
             </LinkButton>
           )}
           <ActionButton