From a08ae8505efeefaa5ddd5efd70990afda4a59bbe Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Mon, 23 Dec 2024 03:47:31 +0000
Subject: [PATCH] feat: add back button

---
 .../AccountAddDerivedForm.tsx                 |   4 +-
 .../AccountAddJson/ImportJsonAccountsForm.tsx |  32 +++---
 .../AccountAddJson/UnlockJsonFileForm.tsx     |   4 +-
 .../AccountAddMnemonic/MnemonicForm.tsx       | 103 ++++++++++--------
 .../AccountAdd/AccountAddPrivateKeyForm.tsx   |   4 +-
 .../AccountAdd/AccountAddWatchedForm.tsx      |   5 +-
 .../AccountAdd/BackToAddAccountButton.tsx     |  16 +++
 7 files changed, 103 insertions(+), 65 deletions(-)
 create mode 100644 apps/extension/src/ui/domains/Account/AccountAdd/BackToAddAccountButton.tsx

diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm.tsx
index df30117ac7..5344c71004 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm.tsx
@@ -37,6 +37,7 @@ import { AccountIcon } from "@ui/domains/Account/AccountIcon"
 import { AccountTypeSelector } from "@ui/domains/Account/AccountTypeSelector"
 import { useAccounts, useMnemonics } from "@ui/state"
 
+import { BackToAddAccountButton } from "../BackToAddAccountButton"
 import { AccountAddPageProps } from "../types"
 import { AccountAddMnemonicDropdown } from "./AccountAddMnemonicDropdown"
 
@@ -311,7 +312,8 @@ const AccountAddDerivedFormInner: FC<AccountAddPageProps> = ({ onSuccess }) => {
         </AdvancedSettings>
         <Spacer small />
 
-        <div className="flex w-full items-center justify-end">
+        <div className="flex w-full items-center justify-between">
+          <BackToAddAccountButton />
           <Button
             icon={ArrowRightIcon}
             type="submit"
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddJson/ImportJsonAccountsForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddJson/ImportJsonAccountsForm.tsx
index ce91e45909..d7d714469e 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddJson/ImportJsonAccountsForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddJson/ImportJsonAccountsForm.tsx
@@ -20,6 +20,7 @@ import { Fiat } from "@ui/domains/Asset/Fiat"
 import { useSelectedCurrency } from "@ui/state"
 
 import { BalancesSummaryTooltipContent } from "../../BalancesSummaryTooltipContent"
+import { BackToAddAccountButton } from "../BackToAddAccountButton"
 import { JsonImportAccount, useJsonAccountImport } from "./context"
 import { UnlockJsonAccountsButton } from "./UnlockJsonAccountsButton"
 
@@ -130,6 +131,7 @@ export const ImportJsonAccountsForm: FC<{ onSuccess: (address: string) => void }
     selectAll,
     selectNone,
     importAccounts,
+    requiresFilePassword,
   } = useJsonAccountImport()
 
   const { selectedCount, totalCount } = useMemo(() => {
@@ -186,7 +188,8 @@ export const ImportJsonAccountsForm: FC<{ onSuccess: (address: string) => void }
     return !accounts.filter((a) => !a.isExisting && a.isPrivateKeyAvailable).length
   }, [accounts])
 
-  if (!accounts?.length) return null
+  if (requiresFilePassword) return null
+  if (!accounts?.length) return <BackToAddAccountButton methodType="import" />
 
   return (
     <FadeIn>
@@ -232,18 +235,21 @@ export const ImportJsonAccountsForm: FC<{ onSuccess: (address: string) => void }
           <JsonAccount key={i} account={acc} onSelect={handleSelect(acc.id)} />
         ))}
       </div>
-      <div className="mt-16 flex w-full justify-end gap-8">
-        <UnlockJsonAccountsButton />
-        <Button
-          icon={ArrowRightIcon}
-          type="button"
-          primary
-          disabled={!canImport}
-          onClick={handleImportClick}
-          processing={isImporting}
-        >
-          {t("Import")}
-        </Button>
+      <div className="mt-16 flex w-full justify-between">
+        <BackToAddAccountButton methodType="import" />
+        <div className="flex justify-end gap-8">
+          <UnlockJsonAccountsButton />
+          <Button
+            icon={ArrowRightIcon}
+            type="button"
+            primary
+            disabled={!canImport}
+            onClick={handleImportClick}
+            processing={isImporting}
+          >
+            {t("Import")}
+          </Button>
+        </div>
       </div>
     </FadeIn>
   )
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddJson/UnlockJsonFileForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddJson/UnlockJsonFileForm.tsx
index aff98da654..7c8a8304b0 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddJson/UnlockJsonFileForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddJson/UnlockJsonFileForm.tsx
@@ -10,6 +10,7 @@ import { log } from "@extension/shared"
 import { CapsLockWarningIcon } from "@talisman/components/CapsLockWarningIcon"
 import { FadeIn } from "@talisman/components/FadeIn"
 
+import { BackToAddAccountButton } from "../BackToAddAccountButton"
 import { useJsonAccountImport } from "./context"
 
 type FormData = {
@@ -86,7 +87,8 @@ export const UnlockJsonFileForm: FC = () => {
             after={<CapsLockWarningIcon />}
           />
         </FormFieldContainer>
-        <div className="mt-8 flex w-full justify-end">
+        <div className="mt-8 flex w-full justify-between">
+          <BackToAddAccountButton methodType="import" />
           <Button type="submit" primary disabled={!isValid} processing={isSubmitting}>
             {t("Unlock JSON file")}
           </Button>
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddMnemonic/MnemonicForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddMnemonic/MnemonicForm.tsx
index ae4eaec2f1..9c3305d4d9 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddMnemonic/MnemonicForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddMnemonic/MnemonicForm.tsx
@@ -4,7 +4,7 @@ import { classNames, encodeAnyAddress } from "@talismn/util"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
-import { useNavigate } from "react-router-dom"
+import { NavLink, useNavigate } from "react-router-dom"
 import {
   Button,
   FormFieldContainer,
@@ -222,56 +222,63 @@ export const AccountAddMnemonicForm = () => {
 
       <AccountTypeSelector defaultType={data.type} onChange={handleTypeChange} />
 
-      <form className={classNames(type ? "visible" : "invisible")} onSubmit={handleSubmit(submit)}>
-        <FormFieldContainer error={errors.name?.message}>
-          <FormFieldInputText
-            {...register("name")}
-            placeholder={t("Choose a name")}
-            spellCheck={false}
-            autoComplete="off"
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus
+      <form onSubmit={handleSubmit(submit)}>
+        <div className={classNames(!type && "hidden")}>
+          <FormFieldContainer error={errors.name?.message}>
+            <FormFieldInputText
+              {...register("name")}
+              placeholder={t("Choose a name")}
+              spellCheck={false}
+              autoComplete="off"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus
+              data-lpignore
+              after={
+                targetAddress ? (
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <AccountIcon address={targetAddress} className="text-xl" />
+                    </TooltipTrigger>
+                    <TooltipContent>{targetAddress}</TooltipContent>
+                  </Tooltip>
+                ) : null
+              }
+            />
+          </FormFieldContainer>
+          <FormFieldTextarea
+            {...register("mnemonic")}
+            placeholder={t("Enter your 12 or 24 word recovery phrase")}
+            rows={5}
             data-lpignore
-            after={
-              targetAddress ? (
-                <Tooltip>
-                  <TooltipTrigger>
-                    <AccountIcon address={targetAddress} className="text-xl" />
-                  </TooltipTrigger>
-                  <TooltipContent>{targetAddress}</TooltipContent>
-                </Tooltip>
-              ) : null
-            }
-          />
-        </FormFieldContainer>
-        <FormFieldTextarea
-          {...register("mnemonic")}
-          placeholder={t("Enter your 12 or 24 word recovery phrase")}
-          rows={5}
-          data-lpignore
-          spellCheck={false}
-        />
-        <div className="mt-2 flex w-full items-center justify-between gap-4 overflow-hidden text-xs">
-          <div className="text-grey-600 shrink-0">{t("Word count: {{words}}", { words })}</div>
-          <div className="text-alert-warn grow truncate text-right">{errors.mnemonic?.message}</div>
-        </div>
-        <Spacer small />
-        <DerivationModeDropdown value={mode} onChange={handleModeChange} />
-        <FormFieldContainer
-          className={classNames("mt-2", mode !== "custom" && "invisible")}
-          error={errors.derivationPath?.message}
-        >
-          <FormFieldInputText
-            {...register("derivationPath")}
-            placeholder={type === "ethereum" ? "m/44'/60'/0'/0/0" : "//0"}
             spellCheck={false}
-            autoComplete="off"
-            className="font-mono"
-            data-lpignore
           />
-        </FormFieldContainer>
-        <Spacer small />
-        <div className="mt-1 flex w-full justify-end">
+          <div className="mt-2 flex w-full items-center justify-between gap-4 overflow-hidden text-xs">
+            <div className="text-grey-600 shrink-0">{t("Word count: {{words}}", { words })}</div>
+            <div className="text-alert-warn grow truncate text-right">
+              {errors.mnemonic?.message}
+            </div>
+          </div>
+          <Spacer small />
+          <DerivationModeDropdown value={mode} onChange={handleModeChange} />
+          <FormFieldContainer
+            className={classNames("mt-2", mode !== "custom" && "invisible")}
+            error={errors.derivationPath?.message}
+          >
+            <FormFieldInputText
+              {...register("derivationPath")}
+              placeholder={type === "ethereum" ? "m/44'/60'/0'/0/0" : "//0"}
+              spellCheck={false}
+              autoComplete="off"
+              className="font-mono"
+              data-lpignore
+            />
+          </FormFieldContainer>
+          <Spacer small />
+        </div>
+        <div className="mt-1 flex w-full justify-between">
+          <NavLink to="/accounts/add?methodType=import">
+            <Button>{t("Back")}</Button>
+          </NavLink>
           <Button
             className="w-[24rem]"
             type="submit"
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddPrivateKeyForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddPrivateKeyForm.tsx
index b5ae6ba1f0..88fb69e7c2 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddPrivateKeyForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddPrivateKeyForm.tsx
@@ -25,6 +25,7 @@ import { api } from "@ui/api"
 import { AccountIcon } from "@ui/domains/Account/AccountIcon"
 import { useAccounts } from "@ui/state"
 
+import { BackToAddAccountButton } from "./BackToAddAccountButton"
 import { AccountAddPageProps } from "./types"
 
 /**
@@ -213,7 +214,8 @@ export const AccountAddPrivateKeyForm = ({ onSuccess }: AccountAddPageProps) =>
           </div>
         </div>
         <Spacer small />
-        <div className="mt-1 flex w-full justify-end">
+        <div className="mt-1 flex w-full justify-between">
+          <BackToAddAccountButton methodType="import" />
           <Button
             className="w-[24rem]"
             type="submit"
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
index 104461694d..025d288cad 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
@@ -18,6 +18,8 @@ import { AddressFieldNsBadge } from "@ui/domains/Account/AddressFieldNsBadge"
 import { useResolveNsName } from "@ui/hooks/useResolveNsName"
 import { useAccounts } from "@ui/state"
 
+import { BackToAddAccountButton } from "./BackToAddAccountButton"
+
 export const AccountAddWatchedForm = ({ onSuccess }: AccountAddPageProps) => {
   const { t } = useTranslation("admin")
   // get type paramter from url
@@ -206,7 +208,8 @@ export const AccountAddWatchedForm = ({ onSuccess }: AccountAddPageProps) => {
             </div>
           </div>
         </div>
-        <div className="flex w-full justify-end">
+        <div className="flex w-full justify-between">
+          <BackToAddAccountButton methodType="watched" />
           <Button
             icon={ArrowRightIcon}
             type="submit"
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/BackToAddAccountButton.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/BackToAddAccountButton.tsx
new file mode 100644
index 0000000000..067972db9f
--- /dev/null
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/BackToAddAccountButton.tsx
@@ -0,0 +1,16 @@
+import { ArrowLeftIcon } from "@talismn/icons"
+import { useTranslation } from "react-i18next"
+import { NavLink } from "react-router-dom"
+import { Button } from "talisman-ui"
+
+import { MethodType } from "./context"
+
+export const BackToAddAccountButton = ({ methodType }: { methodType?: MethodType }) => {
+  const { t } = useTranslation()
+
+  return (
+    <NavLink to={`/accounts/add${methodType ? `?methodType=${methodType}` : ""}`}>
+      <Button iconLeft={ArrowLeftIcon}>{t("Back")}</Button>
+    </NavLink>
+  )
+}