From 41f6bf7ea9571d5b1d6682b3a2b29e8dd697ed21 Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Sun, 22 Dec 2024 01:02:18 +0000
Subject: [PATCH] fix: also disable account type picker on second add/watch
 account page

---
 .../AccountAddDerivedForm.tsx                 |  7 ++++++-
 .../AccountAdd/AccountAddWatchedForm.tsx      |  7 ++++++-
 .../domains/Account/AccountAdd/Container.tsx  |  4 ++--
 .../domains/Account/AccountTypeSelector.tsx   | 20 +++++++++++++------
 4 files changed, 28 insertions(+), 10 deletions(-)

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 2a54b64e9..df30117ac 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm.tsx
@@ -101,6 +101,7 @@ const AccountAddDerivedFormInner: FC<AccountAddPageProps> = ({ onSuccess }) => {
   // get type paramter from url
   const [params] = useSearchParams()
   const urlParamType = (params.get("type") ?? undefined) as UiAccountAddressType | undefined
+  const disableOtherTypes = params.has("disableOtherTypes")
   const mnemonics = useMnemonics()
   const allAccounts = useAccounts()
   const accountNames = useMemo(() => allAccounts.map((a) => a.name), [allAccounts])
@@ -253,7 +254,11 @@ const AccountAddDerivedFormInner: FC<AccountAddPageProps> = ({ onSuccess }) => {
 
   return (
     <form onSubmit={handleSubmit(submit)}>
-      <AccountTypeSelector defaultType={urlParamType} onChange={handleTypeChange} />
+      <AccountTypeSelector
+        defaultType={urlParamType}
+        disableOtherTypes={disableOtherTypes}
+        onChange={handleTypeChange}
+      />
       <Spacer small />
       <div className={classNames("transition-opacity", type ? "opacity-100" : "opacity-0")}>
         {!!mnemonics.length && (
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
index cd1ecd64c..104461694 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
@@ -23,6 +23,7 @@ export const AccountAddWatchedForm = ({ onSuccess }: AccountAddPageProps) => {
   // get type paramter from url
   const [params] = useSearchParams()
   const urlParamType = (params.get("type") ?? undefined) as UiAccountAddressType | undefined
+  const disableOtherTypes = params.has("disableOtherTypes")
   const allAccounts = useAccounts()
   const accountNames = useMemo(() => allAccounts.map((a) => a.name), [allAccounts])
 
@@ -149,7 +150,11 @@ export const AccountAddWatchedForm = ({ onSuccess }: AccountAddPageProps) => {
   return (
     <form onSubmit={handleSubmit(submit)}>
       <div className="mb-12 flex flex-col gap-8">
-        <AccountTypeSelector defaultType={urlParamType} onChange={handleTypeChange} />
+        <AccountTypeSelector
+          defaultType={urlParamType}
+          disableOtherTypes={disableOtherTypes}
+          onChange={handleTypeChange}
+        />
         <div className={classNames("transition-opacity", type ? "opacity-100" : "opacity-0")}>
           <div>
             <p className="text-body-secondary">
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
index 3672a96c1..5d05d0e5f 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
@@ -121,7 +121,7 @@ function NewAccountMethodButtons() {
           />
         }
         type="ethereum"
-        to={`/accounts/add/derived?type=ethereum`}
+        to={`/accounts/add/derived?type=ethereum${accountType ? "&disableOtherTypes" : ""}`}
       />
       <AccountTypeMethodButton
         disabled={accountType === "ethereum"}
@@ -134,7 +134,7 @@ function NewAccountMethodButtons() {
           />
         }
         type="polkadot"
-        to={`/accounts/add/derived?type=sr25519`}
+        to={`/accounts/add/derived?type=sr25519${accountType ? "&disableOtherTypes" : ""}`}
       />
     </>
   )
diff --git a/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx b/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
index 564aa957c..2cf11a3ae 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
@@ -6,19 +6,23 @@ import { useTranslation } from "react-i18next"
 import { EthereumCircleLogo, PolkadotCircleLogo } from "@talisman/theme/logos"
 
 const AccountTypeButton: FC<{
-  title: ReactNode
   className?: string
   icon: ReactNode
+  title: ReactNode
   subtitle: ReactNode
+  disabled?: boolean
   onClick: () => void
-}> = ({ icon, title, subtitle, className, onClick }) => (
+}> = ({ className, icon, title, subtitle, disabled, onClick }) => (
   <button
     type="button"
-    onClick={onClick}
     className={classNames(
-      "bg-field hover:bg-grey-800 allow-focus flex h-32 items-center gap-6 rounded px-6 text-left",
+      "bg-field allow-focus flex h-32 items-center gap-6 rounded px-6 text-left",
+      disabled && "text-body-secondary opacity-40",
+      !disabled && "hover:bg-grey-800",
       className,
     )}
+    disabled={disabled}
+    onClick={onClick}
   >
     <div className="text-xl">{icon}</div>
     <div className="flex flex-grow flex-col justify-center gap-2">
@@ -30,12 +34,14 @@ const AccountTypeButton: FC<{
 
 type AccountTypeSelectorProps = {
   defaultType?: UiAccountAddressType
+  disableOtherTypes?: boolean
   onChange: (type: UiAccountAddressType) => void
   className?: string
 }
 
 export const AccountTypeSelector = ({
   defaultType,
+  disableOtherTypes,
   onChange,
   className,
 }: AccountTypeSelectorProps) => {
@@ -53,31 +59,33 @@ export const AccountTypeSelector = ({
   return (
     <div className={classNames("grid w-full grid-cols-2 gap-10", className)}>
       <AccountTypeButton
-        title={t("Ethereum")}
         className={classNames(
           type === "ethereum" ? "border-body" : "border-body-secondary border-opacity-20",
           "border",
         )}
         icon={<EthereumCircleLogo />}
+        title={t("Ethereum")}
         subtitle={
           <div className="line-clamp-2">
             {t("Ethereum, Base, zkSync, Arbitrum, BSC, and all other EVM chains")}
           </div>
         }
+        disabled={disableOtherTypes && defaultType !== "ethereum"}
         onClick={handleClick("ethereum")}
       />
       <AccountTypeButton
-        title={t("Polkadot")}
         className={classNames(
           type === "sr25519" ? "border-body" : "border-body-secondary border-opacity-20",
           "border",
         )}
         icon={<PolkadotCircleLogo />}
+        title={t("Polkadot")}
         subtitle={
           <div className="line-clamp-2">
             {t("Polkadot, AssetHub, Bittensor, and most Polkadot ecosystem chains")}
           </div>
         }
+        disabled={disableOtherTypes && defaultType !== "sr25519"}
         onClick={handleClick("sr25519")}
       />
     </div>