From 0699bc09d21902b1fdecfc5727e9474648ae8810 Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Thu, 19 Dec 2024 01:29:41 +0000
Subject: [PATCH 01/13] feat: add account redesign

---
 .changeset/silver-panthers-bathe.md           |   5 +
 .../src/@talisman/util/truncateString.ts      |   3 -
 .../AccountAdd/AccountAddDcentWizard.tsx      |   3 +-
 .../AccountAdd/AccountAddDerivedPage.tsx      |   3 +-
 .../routes/AccountAdd/AccountAddJsonPage.tsx  |   7 +-
 .../AccountAdd/AccountAddSignetWizard.tsx     |   3 +-
 .../AccountAdd/AccountAddWatchedPage.tsx      |  14 +-
 .../dashboard/routes/AccountAdd/index.tsx     |   5 +-
 .../dashboard/routes/Networks/NetworkPage.tsx |   2 +-
 .../routes/Networks/NetworksPage.tsx          |   2 +-
 .../apps/dashboard/routes/Portfolio/index.tsx |   2 +-
 .../dashboard/routes/Settings/AboutPage.tsx   |   3 +-
 .../routes/Settings/AddressBookPage.tsx       |   3 +-
 .../routes/Settings/AnalyticsOptInPage.tsx    |   3 +-
 .../AssetsDiscovery/AssetDiscoveryPage.tsx    |   2 +-
 .../routes/Settings/AutoLockTimerPage.tsx     |   3 +-
 .../routes/Settings/ConnectedSitesPage.tsx    |   3 +-
 .../routes/Settings/CurrencySettingsPage.tsx  |   3 +-
 .../dashboard/routes/Settings/GeneralPage.tsx |   3 +-
 .../routes/Settings/LanguagePage.tsx          |   3 +-
 .../routes/Settings/NetworksTokensPage.tsx    |   3 +-
 .../routes/Settings/QrMetadataPage.tsx        |   3 +-
 .../routes/Settings/SecurityPrivacyPage.tsx   |   3 +-
 .../dashboard/routes/Tokens/TokenPage.tsx     |   3 +-
 .../ui/apps/dashboard/routes/TxHistory.tsx    |   3 +-
 .../AccountAddDerivedForm.tsx                 |   2 +-
 .../AccountAddMnemonic/MnemonicForm.tsx       |   2 +-
 .../AccountAdd/AccountAddWatchedForm.tsx      |  12 +-
 .../domains/Account/AccountAdd/Container.tsx  | 412 +++++++++++-------
 .../ui/domains/Account/AccountAdd/context.ts  |  33 +-
 .../Account/AccountTypeNetworkSearch.tsx      | 186 ++++++++
 .../domains/Account/AccountTypeSelector.tsx   |  12 +-
 .../domains/Account/AllNetworksLogoStack.tsx  | 121 +++++
 .../AssetsTable/DashboardAssetRow.tsx         |   4 +-
 .../AssetsTable/PopupAssetsTable.tsx          |   4 +-
 ...ack.tsx => PortfolioNetworksLogoStack.tsx} |  10 +-
 .../src/ui/domains/Portfolio/NftTile.tsx      |   4 +-
 .../domains/Portfolio/Nfts/DashboardNfts.tsx  |   4 +-
 .../ui/domains/Portfolio/Nfts/PopupNfts.tsx   |   4 +-
 apps/extension/src/ui/hooks/useNetworkInfo.ts |   4 +-
 packages/icons/src/icons/eye-plus.svg         |  17 +-
 41 files changed, 659 insertions(+), 262 deletions(-)
 create mode 100644 .changeset/silver-panthers-bathe.md
 delete mode 100644 apps/extension/src/@talisman/util/truncateString.ts
 create mode 100644 apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
 create mode 100644 apps/extension/src/ui/domains/Account/AllNetworksLogoStack.tsx
 rename apps/extension/src/ui/domains/Portfolio/AssetsTable/{NetworksLogoStack.tsx => PortfolioNetworksLogoStack.tsx} (82%)

diff --git a/.changeset/silver-panthers-bathe.md b/.changeset/silver-panthers-bathe.md
new file mode 100644
index 0000000000..bd01f508a0
--- /dev/null
+++ b/.changeset/silver-panthers-bathe.md
@@ -0,0 +1,5 @@
+---
+"@talismn/icons": patch
+---
+
+fix: make eye-plus.svg react correctly to stroke-width
diff --git a/apps/extension/src/@talisman/util/truncateString.ts b/apps/extension/src/@talisman/util/truncateString.ts
deleted file mode 100644
index d01b98b466..0000000000
--- a/apps/extension/src/@talisman/util/truncateString.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/* eslint import/no-anonymous-default-export: [2, {"allowArrowFunction": true}] */
-export default (str?: string, start = 4, end = 4) =>
-  str ? `${str.substring(0, start)}...${str.substring(str.length - end)}` : null
diff --git a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddDcentWizard.tsx b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddDcentWizard.tsx
index c6e31d797b..8b00047622 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddDcentWizard.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddDcentWizard.tsx
@@ -1,7 +1,6 @@
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AccountAddDcentDisabledMessage } from "@ui/domains/Account/AccountAdd/AccountAddDcent"
 
-import { DashboardLayout } from "../../layout"
-
 export const AccountAddDcentDashboardWizard = () => {
   return (
     <DashboardLayout sidebar="settings">
diff --git a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddDerivedPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddDerivedPage.tsx
index 96cb83c8c0..dbfd4d1103 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddDerivedPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddDerivedPage.tsx
@@ -4,11 +4,10 @@ import { useSearchParams } from "react-router-dom"
 import { AccountAddressType } from "@extension/core"
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Spacer } from "@talisman/components/Spacer"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AccountAddDerivedForm } from "@ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm"
 import { useSelectAccountAndNavigate } from "@ui/hooks/useSelectAccountAndNavigate"
 
-import { DashboardLayout } from "../../layout"
-
 const Content = () => {
   const { t } = useTranslation("admin")
   // get type paramter from url
diff --git a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddJsonPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddJsonPage.tsx
index 61dc76b0db..becba8074e 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddJsonPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddJsonPage.tsx
@@ -2,11 +2,10 @@ import { useTranslation } from "react-i18next"
 
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Spacer } from "@talisman/components/Spacer"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AccountAddJson } from "@ui/domains/Account/AccountAdd/AccountAddJson"
 import { useSelectAccountAndNavigate } from "@ui/hooks/useSelectAccountAndNavigate"
 
-import { DashboardLayout } from "../../layout"
-
 const Content = () => {
   const { t } = useTranslation("admin")
   const { setAddress } = useSelectAccountAndNavigate("/portfolio")
@@ -14,8 +13,8 @@ const Content = () => {
   return (
     <>
       <HeaderBlock
-        title={t("Import JSON")}
-        text={t("Please choose the .json file you exported from Polkadot.js or Talisman")}
+        title={t("Import via JSON")}
+        text={t("Please choose the json file you exported from Polkadot.js or Talisman")}
       />
       <Spacer />
       <AccountAddJson onSuccess={setAddress} />
diff --git a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddSignetWizard.tsx b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddSignetWizard.tsx
index 581b944565..b6676407b5 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddSignetWizard.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddSignetWizard.tsx
@@ -1,8 +1,7 @@
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AccountAddSignetWizard } from "@ui/domains/Account/AccountAdd/AccountAddSignet/index"
 import { useSelectAccountAndNavigate } from "@ui/hooks/useSelectAccountAndNavigate"
 
-import { DashboardLayout } from "../../layout"
-
 const Content = () => {
   const { setAddress } = useSelectAccountAndNavigate("/portfolio")
 
diff --git a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddWatchedPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddWatchedPage.tsx
index 093820aaff..403a06401e 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddWatchedPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddWatchedPage.tsx
@@ -1,23 +1,27 @@
 import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
 
+import { AccountAddressType } from "@extension/core"
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Spacer } from "@talisman/components/Spacer"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AccountAddWatchedForm } from "@ui/domains/Account/AccountAdd/AccountAddWatchedForm"
 import { useSelectAccountAndNavigate } from "@ui/hooks/useSelectAccountAndNavigate"
 
-import { DashboardLayout } from "../../layout"
-
 export const Content = () => {
   const { t } = useTranslation("admin")
+  // get type paramter from url
+  const [params] = useSearchParams()
+  const urlParamType = (params.get("type") ?? undefined) as AccountAddressType | undefined
   const { setAddress } = useSelectAccountAndNavigate("/portfolio")
 
   return (
     <>
       <HeaderBlock
-        title={t("Choose account type")}
-        text={t("What type of account would you like to add?")}
+        title={t("Add a watched account")}
+        text={!urlParamType && t("What type of account would you like to create?")}
       />
-      <Spacer />
+      <Spacer small />
       <AccountAddWatchedForm onSuccess={setAddress} />
     </>
   )
diff --git a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/index.tsx b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/index.tsx
index 231be7d506..4f5b5bdd48 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/index.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/index.tsx
@@ -1,11 +1,10 @@
 import { useTranslation } from "react-i18next"
 
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AccountCreateMenu } from "@ui/domains/Account/AccountAdd"
 import { useBalancesHydrate } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 const Content = () => {
   useBalancesHydrate() // preload
   const { t } = useTranslation()
@@ -14,7 +13,7 @@ const Content = () => {
     <div className="flex flex-col gap-16">
       <HeaderBlock
         title={t("Add Account")}
-        text={t("Create a new account or import an existing one")}
+        text={t("Create a new account or import an existing account")}
       />
       <AccountCreateMenu />
     </div>
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Networks/NetworkPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Networks/NetworkPage.tsx
index 2b4be0f303..5f181965d7 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Networks/NetworkPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Networks/NetworkPage.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"
 import { useNavigate, useParams } from "react-router-dom"
 
 import { AnalyticsPage } from "@ui/api/analytics"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import {
   EvmNetworkForm,
   SubNetworkFormAdd,
@@ -10,7 +11,6 @@ import {
 } from "@ui/domains/Settings/ManageNetworks/NetworkForm"
 import { useAnalyticsPageView } from "@ui/hooks/useAnalyticsPageView"
 
-import { DashboardLayout } from "../../layout"
 import { useNetworksType } from "./useNetworksType"
 
 const ANALYTICS_PAGE: AnalyticsPage = {
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Networks/NetworksPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Networks/NetworksPage.tsx
index ade9f6778f..dba61296a3 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Networks/NetworksPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Networks/NetworksPage.tsx
@@ -12,6 +12,7 @@ import { OptionSwitch } from "@talisman/components/OptionSwitch"
 import { SearchInput } from "@talisman/components/SearchInput"
 import { Spacer } from "@talisman/components/Spacer"
 import { sendAnalyticsEvent } from "@ui/api/analytics"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { EnableTestnetPillButton } from "@ui/domains/Settings/EnableTestnetPillButton"
 import { useAnalyticsPageView } from "@ui/hooks/useAnalyticsPageView"
 import {
@@ -21,7 +22,6 @@ import {
   getSettingValue$,
 } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
 import { ANALYTICS_PAGE } from "./analytics"
 import { ChainsList } from "./ChainsList"
 import { EvmNetworksList } from "./EvmNetworksList"
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Portfolio/index.tsx b/apps/extension/src/ui/apps/dashboard/routes/Portfolio/index.tsx
index 90f2b11460..e5f79beedb 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Portfolio/index.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Portfolio/index.tsx
@@ -2,13 +2,13 @@ import { useEffect } from "react"
 import { Route, Routes, useSearchParams } from "react-router-dom"
 
 import { NavigateWithQuery } from "@talisman/components/NavigateWithQuery"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { useBuyTokensModal } from "@ui/domains/Asset/Buy/useBuyTokensModal"
 import { DashboardPortfolioHeader } from "@ui/domains/Portfolio/DashboardPortfolioHeader"
 import { PortfolioContainer } from "@ui/domains/Portfolio/PortfolioContainer"
 import { PortfolioToolbarNfts } from "@ui/domains/Portfolio/PortfolioToolbarNfts"
 import { PortfolioToolbarTokens } from "@ui/domains/Portfolio/PortfolioToolbarTokens"
 
-import { DashboardLayout } from "../../layout"
 import { PortfolioAsset, PortfolioAssetHeader } from "./PortfolioAsset"
 import { PortfolioAssets } from "./PortfolioAssets"
 import { PortfolioNftCollection } from "./PortfolioNftCollection"
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/AboutPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/AboutPage.tsx
index fc64324271..ce5d194bd9 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/AboutPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/AboutPage.tsx
@@ -17,8 +17,7 @@ import {
   TERMS_OF_USE_URL,
 } from "@extension/shared"
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
-
-import { DashboardLayout } from "../../layout"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 
 const Content = () => {
   const { t } = useTranslation("admin")
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/AddressBookPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/AddressBookPage.tsx
index 9d8ac07da6..d9759e4c44 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/AddressBookPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/AddressBookPage.tsx
@@ -31,6 +31,7 @@ import { Spacer } from "@talisman/components/Spacer"
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
 import { useOpenClose } from "@talisman/hooks/useOpenClose"
 import { AnalyticsPage } from "@ui/api/analytics"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AccountIcon } from "@ui/domains/Account/AccountIcon"
 import { Address } from "@ui/domains/Account/Address"
 import { useCopyAddressModal } from "@ui/domains/CopyAddress"
@@ -45,8 +46,6 @@ import { useAnalyticsPageView } from "@ui/hooks/useAnalyticsPageView"
 import { useSendFundsPopup } from "@ui/hooks/useSendFundsPopup"
 import { useBalances, useChainByGenesisHash } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 const ANALYTICS_PAGE: AnalyticsPage = {
   container: "Fullscreen",
   feature: "Settings",
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/AnalyticsOptInPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/AnalyticsOptInPage.tsx
index b173468a8f..fda35d591c 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/AnalyticsOptInPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/AnalyticsOptInPage.tsx
@@ -2,11 +2,10 @@ import { useTranslation } from "react-i18next"
 import { Toggle } from "talisman-ui"
 
 import { Setting } from "@talisman/components/Setting"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AnalyticsOptInInfo } from "@ui/domains/Settings/Analytics/AnalyticsOptInInfo"
 import { useSetting } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 const Content = () => {
   const { t } = useTranslation("admin")
   const [useAnalyticsTracking, setUseAnalyticsTracking] = useSetting("useAnalyticsTracking")
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/AssetsDiscovery/AssetDiscoveryPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/AssetsDiscovery/AssetDiscoveryPage.tsx
index 05f2b40542..2be91c8272 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/AssetsDiscovery/AssetDiscoveryPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/AssetsDiscovery/AssetDiscoveryPage.tsx
@@ -42,6 +42,7 @@ import { Spacer } from "@talisman/components/Spacer"
 import { shortenAddress } from "@talisman/util/shortenAddress"
 import { api } from "@ui/api"
 import { AnalyticsPage } from "@ui/api/analytics"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AccountIcon } from "@ui/domains/Account/AccountIcon"
 import { AccountsStack } from "@ui/domains/Account/AccountIconsStack"
 import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
@@ -70,7 +71,6 @@ import {
 import { isErc20Token } from "@ui/util/isErc20Token"
 import { isUniswapV2Token } from "@ui/util/isUniswapV2Token"
 
-import { DashboardLayout } from "../../../layout"
 import {
   useAssetDiscoveryFetchTokenRates,
   useAssetDiscoveryTokenRates,
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/AutoLockTimerPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/AutoLockTimerPage.tsx
index 379647d603..99fcae04e9 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/AutoLockTimerPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/AutoLockTimerPage.tsx
@@ -4,10 +4,9 @@ import { useTranslation } from "react-i18next"
 import { ExclusiveButtonsList } from "@talisman/components/ExclusiveButtonsList"
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Spacer } from "@talisman/components/Spacer"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { useSetting } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 type Option = { value: number; label: string }
 
 export const Content = () => {
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/ConnectedSitesPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/ConnectedSitesPage.tsx
index 8de277cc78..1bc25d3f48 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/ConnectedSitesPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/ConnectedSitesPage.tsx
@@ -1,7 +1,6 @@
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AuthorisedSites } from "@ui/domains/Settings/AuthorisedSites/AuthorisedSites"
 
-import { DashboardLayout } from "../../layout"
-
 export const ConnectedSitesPage = () => (
   <DashboardLayout sidebar="settings">
     <AuthorisedSites />
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/CurrencySettingsPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/CurrencySettingsPage.tsx
index 747b071e39..8db35457e8 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/CurrencySettingsPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/CurrencySettingsPage.tsx
@@ -3,12 +3,11 @@ import { useTranslation } from "react-i18next"
 
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Spacer } from "@talisman/components/Spacer"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { currencyConfig, currencyOrder, sortCurrencies } from "@ui/domains/Asset/currencyConfig"
 import { useFavoriteCurrencies } from "@ui/hooks/useFavoriteCurrencies"
 import { useSetting } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 const Content = () => {
   const [favorites, setFavorites] = useFavoriteCurrencies()
   const [, setSelected] = useSetting("selectedCurrency")
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/GeneralPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/GeneralPage.tsx
index 29ad8e3927..0393fb96e5 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/GeneralPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/GeneralPage.tsx
@@ -17,12 +17,11 @@ import { SPIRIT_KEYS_DOCS_URL } from "@extension/shared"
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Setting } from "@talisman/components/Setting"
 import { AnalyticsPage } from "@ui/api/analytics"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AvatarTypeSelect } from "@ui/domains/Settings/AvatarTypeSelect"
 import { useRuntimeReload } from "@ui/hooks/useRuntimeReload"
 import { useAppState, useSetting } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 const ANALYTICS_PAGE: AnalyticsPage = {
   container: "Fullscreen",
   feature: "Settings",
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/LanguagePage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/LanguagePage.tsx
index b7ccb8c794..c29b82c6af 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/LanguagePage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/LanguagePage.tsx
@@ -5,8 +5,7 @@ import { languages } from "@common/i18nConfig"
 import { ExclusiveButtonsList } from "@talisman/components/ExclusiveButtonsList"
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Spacer } from "@talisman/components/Spacer"
-
-import { DashboardLayout } from "../../layout"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 
 const Content = () => {
   const { t, i18n } = useTranslation()
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/NetworksTokensPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/NetworksTokensPage.tsx
index 724287c04d..f42edd604a 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/NetworksTokensPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/NetworksTokensPage.tsx
@@ -12,10 +12,9 @@ import { CtaButton, Toggle } from "talisman-ui"
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Setting } from "@talisman/components/Setting"
 import { Spacer } from "@talisman/components/Spacer"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { useSetting } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 const Content = () => {
   const { t } = useTranslation("admin")
   const [useTestnets, setUseTestnets] = useSetting("useTestnets")
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/QrMetadataPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/QrMetadataPage.tsx
index 29f2686286..2b07c8d873 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/QrMetadataPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/QrMetadataPage.tsx
@@ -10,6 +10,7 @@ import { FadeIn } from "@talisman/components/FadeIn"
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { notify } from "@talisman/components/Notifications"
 import { api } from "@ui/api"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import {
   MnemonicCreateModal,
   MnemonicCreateModalProvider,
@@ -21,8 +22,6 @@ import { MetadataQrCode } from "@ui/domains/Sign/Qr/MetadataQrCode"
 import { NetworkSpecsQrCode } from "@ui/domains/Sign/Qr/NetworkSpecsQrCode"
 import { useAppState, useBalancesHydrate, useChains, useMnemonic } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 const SetVerifierCertificateContentInner = () => {
   const { t } = useTranslation("admin")
   const navigate = useNavigate()
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/SecurityPrivacyPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/SecurityPrivacyPage.tsx
index fda52a81a9..0f7b01cce7 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Settings/SecurityPrivacyPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Settings/SecurityPrivacyPage.tsx
@@ -15,11 +15,10 @@ import { CtaButton, Toggle, Tooltip, TooltipContent, TooltipTrigger } from "tali
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
 import { Setting } from "@talisman/components/Setting"
 import { Spacer } from "@talisman/components/Spacer"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { useMnemonicBackup } from "@ui/hooks/useMnemonicBackup"
 import { useFeatureFlag, useSetting } from "@ui/state"
 
-import { DashboardLayout } from "../../layout"
-
 const Content = () => {
   const { t } = useTranslation("admin")
   const [useAnalyticsTracking, setUseAnalyticsTracking] = useSetting("useAnalyticsTracking")
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Tokens/TokenPage.tsx b/apps/extension/src/ui/apps/dashboard/routes/Tokens/TokenPage.tsx
index e4a0d1fc3b..5e8b9cc1a4 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/Tokens/TokenPage.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/Tokens/TokenPage.tsx
@@ -21,6 +21,7 @@ import { notify } from "@talisman/components/Notifications"
 import { useOpenClose } from "@talisman/hooks/useOpenClose"
 import { api } from "@ui/api"
 import { AnalyticsPage } from "@ui/api/analytics"
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { AssetLogoBase } from "@ui/domains/Asset/AssetLogo"
 import { TokenTypePill } from "@ui/domains/Asset/TokenTypePill"
 import { NetworkSelect } from "@ui/domains/Ethereum/NetworkSelect"
@@ -32,8 +33,6 @@ import { isCustomUniswapV2Token } from "@ui/util/isCustomUniswapV2Token"
 import { isErc20Token } from "@ui/util/isErc20Token"
 import { isUniswapV2Token } from "@ui/util/isUniswapV2Token"
 
-import { DashboardLayout } from "../../layout"
-
 const ConfirmRemove = ({
   open,
   token,
diff --git a/apps/extension/src/ui/apps/dashboard/routes/TxHistory.tsx b/apps/extension/src/ui/apps/dashboard/routes/TxHistory.tsx
index e2bc66476c..780554e1b8 100644
--- a/apps/extension/src/ui/apps/dashboard/routes/TxHistory.tsx
+++ b/apps/extension/src/ui/apps/dashboard/routes/TxHistory.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect } from "react"
 import { useTranslation } from "react-i18next"
 import { useOpenClose } from "talisman-ui"
 
+import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
 import { PortfolioContainer } from "@ui/domains/Portfolio/PortfolioContainer"
 import { usePortfolioNavigation } from "@ui/domains/Portfolio/usePortfolioNavigation"
@@ -10,8 +11,6 @@ import { TxHistoryList, TxHistoryProvider } from "@ui/domains/Transactions/TxHis
 import { useTxHistory } from "@ui/domains/Transactions/TxHistory/TxHistoryContext"
 import { TxHistoryNetworkPicker } from "@ui/domains/Transactions/TxHistory/TxHistoryNetworkPicker"
 
-import { DashboardLayout } from "../layout"
-
 const NetworkFilterButton = () => {
   const { t } = useTranslation()
   const { network, networks, setNetworkId } = useTxHistory()
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 668a55605b..2a54b64e95 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddDerived/AccountAddDerivedForm.tsx
@@ -33,10 +33,10 @@ import {
   MnemonicCreateModalProvider,
   useMnemonicCreateModal,
 } from "@ui/apps/dashboard/routes/Settings/Mnemonics/MnemonicCreateModal"
+import { AccountIcon } from "@ui/domains/Account/AccountIcon"
 import { AccountTypeSelector } from "@ui/domains/Account/AccountTypeSelector"
 import { useAccounts, useMnemonics } from "@ui/state"
 
-import { AccountIcon } from "../../AccountIcon"
 import { AccountAddPageProps } from "../types"
 import { AccountAddMnemonicDropdown } from "./AccountAddMnemonicDropdown"
 
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 f3acda8e53..ae4eaec2f1 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddMnemonic/MnemonicForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddMnemonic/MnemonicForm.tsx
@@ -216,7 +216,7 @@ export const AccountAddMnemonicForm = () => {
   return (
     <div className="flex w-full flex-col gap-8">
       <HeaderBlock
-        title={t("Choose account type")}
+        title={t("Import via Recovery Phrase")}
         text={t("What type of account would you like to import?")}
       />
 
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
index 868b770896..cd1ecd64ca 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
@@ -5,6 +5,7 @@ import { getAddressType } from "extension-shared"
 import { useCallback, useEffect, useMemo, useRef } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
 import { Button, FormFieldContainer, FormFieldInputText, Toggle } from "talisman-ui"
 import * as yup from "yup"
 
@@ -19,6 +20,9 @@ import { useAccounts } from "@ui/state"
 
 export const AccountAddWatchedForm = ({ onSuccess }: AccountAddPageProps) => {
   const { t } = useTranslation("admin")
+  // get type paramter from url
+  const [params] = useSearchParams()
+  const urlParamType = (params.get("type") ?? undefined) as UiAccountAddressType | undefined
   const allAccounts = useAccounts()
   const accountNames = useMemo(() => allAccounts.map((a) => a.name), [allAccounts])
 
@@ -67,6 +71,7 @@ export const AccountAddWatchedForm = ({ onSuccess }: AccountAddPageProps) => {
   } = useForm<FormData>({
     mode: "onChange",
     resolver: yupResolver(schema),
+    defaultValues: { type: urlParamType },
   })
 
   const { type, searchAddress } = watch()
@@ -136,10 +141,15 @@ export const AccountAddWatchedForm = ({ onSuccess }: AccountAddPageProps) => {
     }
   }, [setFocus, type])
 
+  useEffect(() => {
+    // if we have a type in the url, set it
+    if (urlParamType) handleTypeChange(urlParamType)
+  }, [urlParamType, handleTypeChange])
+
   return (
     <form onSubmit={handleSubmit(submit)}>
       <div className="mb-12 flex flex-col gap-8">
-        <AccountTypeSelector onChange={handleTypeChange} />
+        <AccountTypeSelector defaultType={urlParamType} 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 8bd6cd8991..a53040d7ec 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
@@ -1,129 +1,148 @@
-import { ChainIcon, EyePlusIcon, FilePlusIcon, PlusIcon } from "@talismn/icons"
+import { ChainIcon, EyePlusIcon, FilePlusIcon, InfoIcon, PlusIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
-import { ReactNode, useCallback, useMemo } from "react"
+import { cloneElement, ReactElement, ReactNode, useCallback, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
+import { Tooltip, TooltipContent, TooltipTrigger } from "talisman-ui"
 
 import { IS_FIREFOX } from "@extension/shared"
-import { SelectedIndicator } from "@talisman/components/SelectedIndicator"
 import { EthereumCircleBorderedLogo, PolkadotCircleBorderedLogo } from "@talisman/theme/logos"
+import { AccountTypeNetworkSearch } from "@ui/domains/Account/AccountTypeNetworkSearch"
+import { AllNetworksLogoStack } from "@ui/domains/Account/AllNetworksLogoStack"
+import { useChains, useEvmNetworks } from "@ui/state"
 import { getIsLedgerCapable } from "@ui/util/getIsLedgerCapable"
 
-import { MethodTypes, useAccountCreateContext } from "./context"
+import { MethodType, useAccountCreateContext } from "./context"
 
-type Props = {
-  className?: string
+const methodButtonsFromMethodType = {
+  new: NewAccountMethodButtons,
+  import: ImportAccountMethodButtons,
+  connect: ConnectAccountMethodButtons,
+  watched: WatchedAccountMethodButtons,
 }
 
-const AccountCreateMethodTypeButton = ({
-  title,
-  subtitle,
-  icon,
-  methodType,
-}: {
-  title: string
-  subtitle: string
-  icon: ReactNode
-  methodType: MethodTypes
-}) => {
-  const { methodType: selectedMethodType, setMethodType } = useAccountCreateContext()
-  const isSelected = selectedMethodType === methodType
+export const AccountCreateContainer = ({ className }: { className?: string }) => {
+  const { t } = useTranslation("admin")
+  const { methodType } = useAccountCreateContext()
+  const MethodButtonsComponent = methodButtonsFromMethodType[methodType] ?? null
+
   return (
-    <div
-      tabIndex={["new", "import", "connect"].indexOf(methodType) + 1}
-      role="button"
-      className={classNames(
-        isSelected
-          ? `border-grey-50 bg-opacity-5`
-          : `border-black-secondary hover:bg-grey-800 hover:text-grey-300 focus:bg-grey-800 focus:text-grey-300 border-opacity-10 bg-opacity-[0.15]`,
-        "bg-black-secondary h-[13.8rem] cursor-pointer rounded border-2",
-      )}
-      onClick={() => setMethodType(methodType)}
-      onKeyUp={(e) => {
-        if (e.key === "Enter") setMethodType(methodType)
-      }}
-    >
-      {isSelected && <SelectedIndicator className="relative right-8 top-12 float-right" />}
-      <div className="flex flex-col items-start gap-8 px-8 py-12">
-        <span className={`text-primary-500 text-xl ${!isSelected && "opacity-50"}`}>{icon}</span>
-        <div className="flex flex-col gap-2">
-          <span className="text-body text-[1.8rem]">{title}</span>
-          <span className="text-xs">{subtitle}</span>
-        </div>
+    <div className={classNames("justify-left flex flex-col gap-8", className)}>
+      <div className="flex overflow-auto">
+        <MethodTypeTab
+          icon={<PlusIcon />}
+          title={t("New")}
+          subtitle={t("Create a new account")}
+          methodType="new"
+        />
+        <MethodTypeTab
+          icon={<FilePlusIcon />}
+          title={t("Import")}
+          subtitle={t("Import an existing account")}
+          methodType="import"
+        />
+        <MethodTypeTab
+          icon={<ChainIcon />}
+          title={t("Connect")}
+          subtitle={t("Ledger, Polkadot Vault, etc")}
+          methodType="connect"
+        />
+        <MethodTypeTab
+          icon={<EyePlusIcon />}
+          title={t("Watch")}
+          subtitle={t("Add a watched account")}
+          methodType="watched"
+        />
+      </div>
+      <div className="border-grey-750 -mt-8 grid grid-cols-2 items-start gap-8 rounded rounded-tl-none border p-10">
+        <MethodButtonsComponent />
       </div>
     </div>
   )
 }
 
-const networkChoices = {
-  polkadot: <PolkadotCircleBorderedLogo />,
-  ethereum: <EthereumCircleBorderedLogo />,
-}
-
-const AccountCreateMethodButton = ({
+function MethodTypeTab({
+  className,
+  icon,
   title,
   subtitle,
-  networks,
-  disabled,
-  to,
+  methodType,
 }: {
-  title: string
-  subtitle: string
-  networks: Array<"ethereum" | "polkadot">
-  disabled?: boolean
-  to?: string
-}) => {
-  const navigate = useNavigate()
-  const handleClick = useCallback(() => {
-    if (to) navigate(to)
-  }, [navigate, to])
+  className?: string
+  icon: ReactElement
+  title: ReactNode
+  subtitle: ReactNode
+  methodType: MethodType
+}) {
+  const { methodType: selectedMethodType, setMethodType } = useAccountCreateContext()
+  const isSelected = selectedMethodType === methodType
 
   return (
     <button
       type="button"
-      disabled={disabled}
-      onClick={handleClick}
-      className={`flex flex-col gap-2 rounded bg-white bg-opacity-[0.02] p-6 ${
-        disabled
-          ? "text-body-secondary"
-          : "text-body cursor-pointer hover:bg-opacity-10 focus:bg-opacity-10"
-      }`}
+      className={classNames(
+        "flex items-center justify-start gap-4 rounded-t border border-b-0 border-transparent p-6 opacity-70 lg:flex-grow lg:[&:last-of-type]:rounded-br",
+        "focus:bg-grey-750 hover:bg-grey-750 focus:border-grey-750 hover:border-grey-750 hover:opacity-100 focus:opacity-100",
+        isSelected && "border-grey-750 bg-grey-850 opacity-100",
+        className,
+      )}
+      onClick={(e) => (setMethodType(methodType), e.currentTarget.blur())}
     >
-      <span className={"flex justify-start"}>{title}</span>
-      <span className={"text-body-secondary flex items-center gap-2 text-sm"}>
-        {networks.map((network, i) => (
-          <span key={network} className={i + 1 < networks.length ? "-mr-[0.8rem]" : ""}>
-            {networkChoices[network]}
-          </span>
-        ))}
-        <span className="text-xs">{subtitle}</span>
-      </span>
+      <div className="text-primary text-lg">{cloneElement(icon, { className: "stroke-1" })}</div>
+      <div
+        className={classNames(
+          "hidden flex-col items-start justify-start gap-2 lg:flex",
+          isSelected && "flex",
+        )}
+      >
+        <div className="text-base font-bold">{title}</div>
+        <div className="text-body-secondary whitespace-pre text-xs">{subtitle}</div>
+      </div>
     </button>
   )
 }
 
-const NewAccountMethodButtons = () => {
+function NewAccountMethodButtons() {
   const { t } = useTranslation("admin")
+  const [accountType, setAccountType] = useState<string>()
+
   return (
     <>
-      <AccountCreateMethodButton
-        title={t("New Ethereum Account")}
-        subtitle={t("Create new Ethereum account")}
-        networks={["ethereum"]}
+      <SelectAccountTypeSectionHeader />
+      <AccountTypeNetworkSearch setAccountType={setAccountType} />
+      <AccountTypeMethodButton
+        disabled={accountType === "polkadot"}
+        title={
+          <SelectAccountTypeButtonHeader
+            title={t("New Ethereum Account")}
+            tooltip={t(
+              "Pick this option for Ethereum, Base, zkSync, Arbitrum, BSC, and all other EVM chains.",
+            )}
+          />
+        }
+        type="ethereum"
         to={`/accounts/add/derived?type=ethereum`}
       />
-      <AccountCreateMethodButton
-        title={t("New Polkadot Account")}
-        subtitle={t("Create new Polkadot account")}
-        networks={["polkadot"]}
+      <AccountTypeMethodButton
+        disabled={accountType === "ethereum"}
+        title={
+          <SelectAccountTypeButtonHeader
+            title={t("New Polkadot Account")}
+            tooltip={t(
+              "Pick this option for Polkadot, AssetHub, Bittensor, and most Polkadot ecosystem chains.",
+            )}
+          />
+        }
+        type="polkadot"
         to={`/accounts/add/derived?type=sr25519`}
       />
     </>
   )
 }
 
-const ImportAccountMethodButtons = () => {
+function ImportAccountMethodButtons() {
   const { t } = useTranslation("admin")
+
   return (
     <>
       <AccountCreateMethodButton
@@ -148,9 +167,10 @@ const ImportAccountMethodButtons = () => {
   )
 }
 
-const ConnectAccountMethodButtons = () => {
-  const isLedgerCapable = getIsLedgerCapable()
+function ConnectAccountMethodButtons() {
   const { t } = useTranslation("admin")
+  const isLedgerCapable = getIsLedgerCapable()
+
   return (
     <>
       <AccountCreateMethodButton
@@ -179,95 +199,159 @@ const ConnectAccountMethodButtons = () => {
   )
 }
 
-const AddWatchedAccountButton = () => {
+function WatchedAccountMethodButtons() {
   const { t } = useTranslation("admin")
-  const navigate = useNavigate()
-  const handleClick = useCallback(() => {
-    navigate("/accounts/add/watched")
-  }, [navigate])
+  const [accountType, setAccountType] = useState<string>()
 
   return (
-    <div
-      tabIndex={-4}
-      role="button"
-      onClick={() => handleClick()}
-      onKeyUp={(e) => {
-        if (e.key === "Enter") handleClick()
-      }}
-      className="hover:text-grey-300 focus:text-grey-300 flex cursor-pointer flex-col items-center justify-center gap-4 rounded p-4 hover:bg-white hover:bg-opacity-10 focus:bg-white focus:bg-opacity-10"
-    >
-      <div className="text-body flex items-center gap-4 font-bold">
-        <EyePlusIcon />
-        <span>{t("Add Watched Account")}</span>
-      </div>
-      <div className="flex items-center justify-end text-lg">
-        {/* flex gap doesn't allow negatives */}
-        <PolkadotCircleBorderedLogo className="-mr-[0.6rem]" />
-        <EthereumCircleBorderedLogo />
-      </div>
-    </div>
+    <>
+      <SelectAccountTypeSectionHeader />
+      <AccountTypeNetworkSearch setAccountType={setAccountType} />
+      <AccountTypeMethodButton
+        disabled={accountType === "polkadot"}
+        title={
+          <SelectAccountTypeButtonHeader
+            title={t("Watch Ethereum Account")}
+            tooltip={t(
+              "Pick this option for Ethereum, Base, zkSync, Arbitrum, BSC, and all other EVM chains.",
+            )}
+          />
+        }
+        type="ethereum"
+        to={`/accounts/add/watched?type=ethereum`}
+      />
+      <AccountTypeMethodButton
+        disabled={accountType === "ethereum"}
+        title={
+          <SelectAccountTypeButtonHeader
+            title={t("Watch Polkadot Account")}
+            tooltip={t(
+              "Pick this option for Polkadot, AssetHub, Bittensor, and most Polkadot ecosystem chains.",
+            )}
+          />
+        }
+        type="polkadot"
+        to={`/accounts/add/watched?type=sr25519`}
+      />
+    </>
   )
 }
 
-export const AccountCreateContainer = ({ className }: Props) => {
-  const { t } = useTranslation("admin")
-  const { methodType } = useAccountCreateContext()
+function SelectAccountTypeSectionHeader() {
+  const { t } = useTranslation()
+  return (
+    <>
+      <div className="text-md text-bold col-span-2 text-white">{t("Select account type")}</div>
+      <div className="col-span-2 -mt-2 text-sm text-white/40">
+        {t(
+          "If you don't know which to pick, search for the network you want to use and Talisman will automatically pick the correct account type.",
+        )}
+      </div>
+    </>
+  )
+}
 
-  const MethodButtonsComponent = useMemo(() => {
-    switch (methodType) {
-      case "new":
-        return NewAccountMethodButtons
-      case "import":
-        return ImportAccountMethodButtons
-      case "connect":
-        return ConnectAccountMethodButtons
+function SelectAccountTypeButtonHeader({ title, tooltip }: { title: string; tooltip: string }) {
+  return (
+    <div className="flex items-center gap-3">
+      {title}
+      <Tooltip placement="bottom">
+        <TooltipTrigger asChild>
+          <div>
+            <InfoIcon className="text-sm" />
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <div>{tooltip}</div>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  )
+}
 
-      default:
-        return null
-    }
-  }, [methodType])
+function AccountTypeMethodButton({
+  title,
+  type,
+  disabled,
+  to,
+}: {
+  title: ReactNode
+  type: "polkadot" | "ethereum"
+  disabled?: boolean
+  to?: string
+}) {
+  const { t } = useTranslation()
+  const chains = useChains()
+  const ethereumNetworks = useEvmNetworks()
+  const supportedChainIds = useMemo(
+    () =>
+      type === "polkadot"
+        ? [...(chains?.flatMap((c) => (c.account !== "secp256k1" ? c.id : [])) ?? [])]
+        : type === "ethereum"
+          ? [
+              ...(chains?.flatMap((c) => (c.account === "secp256k1" ? c.id : [])) ?? []),
+              ...(ethereumNetworks?.flatMap((c) => c.id) ?? []),
+            ]
+          : [],
+    [chains, ethereumNetworks, type],
+  )
 
   return (
-    <div className={classNames(className, "justify-left flex flex-col gap-8")}>
-      <div className="flex flex-col justify-center gap-24">
-        <div className="flex flex-col gap-8">
-          <div className="grid grid-cols-3 gap-8">
-            <AccountCreateMethodTypeButton
-              title={t("New")}
-              subtitle={t("Create a new account")}
-              icon={<PlusIcon />}
-              methodType="new"
-            />
-            <AccountCreateMethodTypeButton
-              title={t("Import")}
-              subtitle={t("Import an existing account")}
-              icon={<FilePlusIcon />}
-              methodType="import"
-            />
-            <AccountCreateMethodTypeButton
-              title={t("Connect")}
-              subtitle={t("Ledger, Polkadot Vault, etc")}
-              icon={<ChainIcon />}
-              methodType="connect"
-            />
-          </div>
-          <div className="grid h-[14rem] grid-cols-2 items-start gap-8">
-            {MethodButtonsComponent && <MethodButtonsComponent />}
-          </div>
+    <AccountCreateMethodButton
+      title={title}
+      subtitle={
+        <div className="flex items-center gap-2">
+          <AllNetworksLogoStack className="text-md" ids={supportedChainIds} max={5} />
+          <div>{t("Networks supported")}</div>
         </div>
+      }
+      networks={[]}
+      to={to}
+      disabled={disabled}
+    />
+  )
+}
 
-        <div className="flex flex-col items-center justify-center gap-4 self-stretch">
-          <div className="flex items-center gap-8 self-stretch">
-            <span className="bg-grey-700 h-[0.08rem] w-full"></span>
-            <span className="text-grey-500 w-full flex-auto whitespace-nowrap text-center text-xs">
-              {t("Don't want to import your private key?")}
-            </span>
-            <span className="bg-grey-700 h-[0.08rem] w-full"></span>
-          </div>
+const networkChoices = {
+  polkadot: <PolkadotCircleBorderedLogo />,
+  ethereum: <EthereumCircleBorderedLogo />,
+}
+function AccountCreateMethodButton({
+  title,
+  subtitle,
+  networks,
+  disabled,
+  to,
+}: {
+  title: ReactNode
+  subtitle: ReactNode
+  networks: Array<"ethereum" | "polkadot">
+  disabled?: boolean
+  to?: string
+}) {
+  const navigate = useNavigate()
+  const handleClick = useCallback(() => to !== undefined && navigate(to), [navigate, to])
 
-          <AddWatchedAccountButton />
-        </div>
-      </div>
-    </div>
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={handleClick}
+      className={classNames(
+        "relative flex flex-col gap-12 rounded bg-white/5 p-10",
+        disabled && "text-body-secondary opacity-40",
+        !disabled && "text-body cursor-pointer hover:bg-white/10 focus:bg-white/10",
+      )}
+    >
+      <span className="border-grey-800 w-full border-b pb-3 text-start">{title}</span>
+      <span className="text-body-secondary flex items-center gap-2 pr-8 text-sm">
+        {networks.map((network, i) => (
+          <span key={network} className={classNames(i + 1 < networks.length && "-mr-[0.8rem]")}>
+            {networkChoices[network]}
+          </span>
+        ))}
+        <span className="text-xs">{subtitle}</span>
+      </span>
+    </button>
   )
 }
diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/context.ts b/apps/extension/src/ui/domains/Account/AccountAdd/context.ts
index 48638644ce..9eb7ae8074 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/context.ts
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/context.ts
@@ -1,25 +1,30 @@
-import { useState } from "react"
+import { useCallback } from "react"
 import { useSearchParams } from "react-router-dom"
 
 import { provideContext } from "@talisman/util/provideContext"
 
-const allMethodTypes = ["new", "import", "connect", "watched"] as const
-export type MethodTypes = (typeof allMethodTypes)[number]
+const allMethodTypes = ["new", "import", "connect", "watched"] as const satisfies string[]
+export type MethodType = (typeof allMethodTypes)[number]
 
-const isMethodType = (item: string | null): item is MethodTypes =>
+const isMethodType = (item: string | null): item is MethodType =>
   typeof item === "string" && Array.from<string>(allMethodTypes).includes(item)
 
 const useAccountCreate = () => {
-  const [searchParams] = useSearchParams()
-  const [methodType, setMethodType] = useState<MethodTypes>(() => {
-    const searchMethodType = searchParams.get("methodType")
-    return isMethodType(searchMethodType) ? searchMethodType : "new"
-  })
-
-  return {
-    methodType,
-    setMethodType,
-  }
+  const [searchParams, setSearchParams] = useSearchParams()
+  const searchMethodType = searchParams.get("methodType")
+
+  const methodType = isMethodType(searchMethodType) ? searchMethodType : "new"
+  const setMethodType = useCallback(
+    (newMethodType: MethodType) => {
+      setSearchParams((params) => {
+        params.set("methodType", newMethodType)
+        return params
+      })
+    },
+    [setSearchParams],
+  )
+
+  return { methodType, setMethodType }
 }
 
 const [AccountCreateContextProvider, useAccountCreateContext] = provideContext(useAccountCreate)
diff --git a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
new file mode 100644
index 0000000000..58e79cd6e4
--- /dev/null
+++ b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
@@ -0,0 +1,186 @@
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from "@headlessui/react"
+import { Chain, SimpleEvmNetwork } from "@talismn/chaindata-provider"
+import { ChevronDownIcon, ChevronUpIcon, CloseIcon, SearchIcon } from "@talismn/icons"
+import { classNames } from "@talismn/util"
+import { useVirtualizer } from "@tanstack/react-virtual"
+import startCase from "lodash/startCase"
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
+import { getNetworkInfo } from "@ui/hooks/useNetworkInfo"
+import { useChainsMap, useEvmNetworksMap } from "@ui/state"
+
+export function AccountTypeNetworkSearch({
+  setAccountType,
+}: {
+  setAccountType: (accountType?: string) => void
+}) {
+  const { t } = useTranslation()
+
+  const inputId = useId()
+
+  const [search, setSearch] = useState("")
+
+  const chainsMap = useChainsMap()
+  const evmNetworksMap = useEvmNetworksMap()
+  const allNetworks = useMemo(
+    () =>
+      [
+        ...Object.values(chainsMap).flatMap((chain) => {
+          if (chain.isTestnet) return []
+          const relay = chain.relay?.id ? chainsMap[chain.relay.id] : null
+          const { label, type } = getNetworkInfo(t, { chain, relay })
+
+          return { id: chain.id, label, type, account: chain.account }
+        }),
+        ...Object.values(evmNetworksMap).flatMap((evmNetwork) => {
+          if (evmNetwork.isTestnet) return []
+          const { label, type } = getNetworkInfo(t, { evmNetwork })
+
+          return { id: evmNetwork.id, label, type }
+        }),
+      ].sort((a, b) => a.label?.localeCompare(b.label ?? "") ?? 0),
+
+    [chainsMap, evmNetworksMap, t],
+  )
+  type Network = (typeof networks)[number]
+
+  const networks = useMemo(() => {
+    if (!search) return allNetworks
+    return allNetworks.filter((network) => network.label?.toLowerCase().includes(search))
+  }, [allNetworks, search])
+
+  const [selected, setSelected] = useState<Network | null>(null)
+  useEffect(() => {
+    if (!selected) return setAccountType()
+
+    const network: Chain | SimpleEvmNetwork | undefined =
+      chainsMap[selected.id] ?? evmNetworksMap[selected.id] ?? undefined
+    setAccountType(getAccountType(network))
+  }, [chainsMap, evmNetworksMap, selected, setAccountType])
+
+  const refContainer = useRef(null)
+  const virtualizer = useVirtualizer({
+    count: networks.length,
+    estimateSize: () => 40,
+    overscan: 5,
+    getScrollElement: () => refContainer.current,
+  })
+
+  const Recalculate = useMemo(
+    () =>
+      function Recalculate({ open }: { open: boolean }) {
+        useLayoutEffect(() => {
+          if (!open) return
+          virtualizer.measure()
+        }, [open])
+        return null
+      },
+    [virtualizer],
+  )
+  const ClearSearch = useMemo(
+    () =>
+      function ClearSearch({ open }: { open: boolean }) {
+        useEffect(() => {
+          if (open) return
+          setSearch("")
+        }, [open])
+        return null
+      },
+    [setSearch],
+  )
+
+  return (
+    <Combobox
+      className="relative col-span-2 flex w-full cursor-text flex-col justify-start gap-4"
+      as="label"
+      htmlFor={inputId}
+      immediate
+      value={selected}
+      onChange={setSelected}
+    >
+      {({ open }) => (
+        <div
+          className={classNames(
+            "bg-grey-850 text-body-secondary/50 col-span-2 flex w-full items-center justify-start gap-4 rounded-sm p-8 text-xs",
+            open && "rounded-b-none",
+          )}
+        >
+          <Recalculate open={open} />
+          <ClearSearch open={open} />
+
+          <SearchIcon className="shrink-0 text-base" />
+          {selected && (
+            <div className="flex items-center gap-4">
+              <ChainLogo id={selected.id} className="text-md" />
+              <span className="text-base text-white">{selected.label}</span>
+            </div>
+          )}
+          <ComboboxInput
+            className={classNames("w-full border-none bg-transparent", selected && "hidden")}
+            id={inputId}
+            placeholder={t("Search for network")}
+            onChange={(e) => setSearch(e.target.value)}
+            value={search}
+          />
+          <div className="flex-grow" />
+          <ComboboxButton>
+            {!open && !selected && <ChevronDownIcon className="cursor-pointer text-base" />}
+            {open && <ChevronUpIcon className="cursor-pointer text-base" />}
+          </ComboboxButton>
+          {selected && (
+            <CloseIcon className="cursor-pointer text-base" onClick={() => setSelected(null)} />
+          )}
+          <ComboboxOptions className="bg-grey-850 absolute bottom-0 left-0 z-10 flex w-full translate-y-full flex-col gap-4 overflow-hidden rounded-b">
+            <div className="flex items-center justify-between gap-4 px-8">
+              <div>{t("Network")}</div>
+              <div>{t("Account Type")}</div>
+            </div>
+            <div ref={refContainer} className="h-[30rem] overflow-scroll">
+              <div
+                className="relative w-full"
+                style={{ height: `${virtualizer.getTotalSize()}px` }}
+              >
+                {virtualizer.getVirtualItems().map((item) => {
+                  const network = networks[item.index]
+                  return (
+                    <ComboboxOption
+                      key={item.key}
+                      className="hover:bg-grey-800 focus:bg-grey-800 data-[focus]:bg-grey-800 absolute left-0 top-0 flex w-full cursor-pointer items-center gap-4 px-8 text-base"
+                      value={network}
+                      style={{
+                        height: `${item.size}px`,
+                        transform: `translateY(${item.start}px)`,
+                      }}
+                    >
+                      <ChainLogo id={network.id} className="text-md" />
+                      <span className="text-white">{network.label}</span>
+                      <span className="text-body-secondary/50 text-base">{network.type}</span>
+                      <div className="flex-grow" />
+                      <span className="text-white">{startCase(getAccountType(network))}</span>
+                    </ComboboxOption>
+                  )
+                })}
+              </div>
+            </div>
+          </ComboboxOptions>
+        </div>
+      )}
+    </Combobox>
+  )
+}
+
+function getAccountType<T extends { id: string } | { id: string; account?: string }>(network: T) {
+  if ("account" in network && network.account !== "secp256k1") return "polkadot"
+  if ("account" in network && network.account === "secp256k1") return "ethereum"
+  if (!("account" in network)) return "ethereum"
+
+  throw new Error(`Unhandled network ${network}`)
+}
diff --git a/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx b/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
index 553389ddd4..50db91f450 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
@@ -59,7 +59,11 @@ export const AccountTypeSelector = ({
           "border",
         )}
         icon={<EthereumCircleLogo />}
-        subtitle={t("Ethereum, Arbitrum, Moonbeam etc.")}
+        subtitle={
+          <div className="line-clamp-2">
+            {t("Ethereum, Base, zkSync, Arbitrum, BSC, and EVM chains")}
+          </div>
+        }
         onClick={handleClick("ethereum")}
       />
       <AccountTypeButton
@@ -69,7 +73,11 @@ export const AccountTypeSelector = ({
           "border",
         )}
         icon={<PolkadotCircleLogo />}
-        subtitle={t(`Polkadot, Kusama & Parachains`)}
+        subtitle={
+          <div className="line-clamp-2">
+            {t("Polkadot, AssetHub, Bittensor, and Polkadot chains")}
+          </div>
+        }
         onClick={handleClick("sr25519")}
       />
     </div>
diff --git a/apps/extension/src/ui/domains/Account/AllNetworksLogoStack.tsx b/apps/extension/src/ui/domains/Account/AllNetworksLogoStack.tsx
new file mode 100644
index 0000000000..d65bbd6e56
--- /dev/null
+++ b/apps/extension/src/ui/domains/Account/AllNetworksLogoStack.tsx
@@ -0,0 +1,121 @@
+import { ChainId, EvmNetworkId } from "@talismn/chaindata-provider"
+import { classNames } from "@talismn/util"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import { WithTooltip } from "@talisman/components/Tooltip"
+import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
+import { type PortfolioNetwork } from "@ui/domains/Portfolio/AssetsTable/usePortfolioNetworks"
+import { getNetworkInfo } from "@ui/hooks/useNetworkInfo"
+import { useChainsMap, useEvmNetworksMap } from "@ui/state"
+
+type Props = { ids?: (ChainId | EvmNetworkId)[]; className?: string; max?: number }
+
+const prioNetworks = [
+  "1", // ethereum mainnet
+  "8453", // base
+  "42161", // arbitrum
+  "10", // op mainnet
+  "moonbeam",
+  "mythos",
+  "137", // polygon
+  "169", // manta pacific
+
+  "polkadot",
+  "bittensor",
+  "hydradx",
+  "aleph-zero",
+  "bifrost-polkadot",
+  "astar",
+  "avail",
+  "vara",
+  "kusama",
+]
+
+export const AllNetworksLogoStack = ({ className, ids, max = 4 }: Props) => {
+  const { t } = useTranslation()
+
+  const chainsMap = useChainsMap()
+  const evmNetworksMap = useEvmNetworksMap()
+  const networks = useMemo(
+    () =>
+      ids?.flatMap((id) => {
+        const chain = chainsMap[id]
+        const evmNetwork = evmNetworksMap[id]
+        if (!chain && !evmNetwork) return []
+        if (chain?.isTestnet || evmNetwork?.isTestnet) return []
+
+        const relay = chain?.relay?.id ? chainsMap[chain.relay.id] : null
+        const { label, type } = getNetworkInfo(t, { chain, evmNetwork, relay })
+
+        return { id, label, type, logo: chain?.logo ?? evmNetwork?.logo }
+      }),
+    [chainsMap, evmNetworksMap, ids, t],
+  )
+  const sorted = useMemo(
+    () =>
+      networks?.sort((a, b) => {
+        const aIsPrio = prioNetworks.includes(a.id)
+        const bIsPrio = prioNetworks.includes(b.id)
+        if (aIsPrio && !bIsPrio) return -1
+        if (bIsPrio && !aIsPrio) return 1
+        if (aIsPrio && bIsPrio) return prioNetworks.indexOf(a.id) - prioNetworks.indexOf(b.id)
+
+        return a.label?.localeCompare(b.label ?? "") ?? 0
+      }),
+    [networks],
+  )
+
+  const { visibleNetworks, moreNetworks } = useMemo(
+    () => ({
+      visibleNetworks: sorted?.slice(0, max) ?? [],
+      moreNetworks: sorted?.slice(max) ?? [],
+    }),
+    [sorted, max],
+  )
+
+  return (
+    <div className={classNames("h-[1em] shrink-0 pl-[0.25rem]", className)}>
+      {visibleNetworks.map((network, idx) => (
+        <AllNetworksLogoStackItem key={`${network}-${idx}`} network={network} />
+      ))}
+      <AllNetworksLogoStackMore networks={moreNetworks} />
+    </div>
+  )
+}
+
+function AllNetworksLogoStackItem({ network }: { network?: PortfolioNetwork }) {
+  const tooltip = useMemo(
+    () => (
+      <div className="flex items-center gap-2">
+        <ChainLogo id={network?.id} />
+        <div>
+          {network?.label} ({network?.type})
+        </div>
+      </div>
+    ),
+    [network],
+  )
+
+  if (!network) return null
+
+  return (
+    <div className="ml-[-0.25rem] inline-block h-[1em] w-[1em] overflow-hidden">
+      <WithTooltip tooltip={tooltip}>
+        <ChainLogo key={network.id} id={network.id} />
+      </WithTooltip>
+    </div>
+  )
+}
+
+function AllNetworksLogoStackMore({ networks }: { networks: PortfolioNetwork[] }) {
+  if (!networks.length) return null
+
+  return (
+    <div className="ml-[-0.25rem] inline-block h-[1em] w-auto overflow-hidden">
+      <div className="text-body-secondary bg-grey-750 relative flex h-[1em] w-auto flex-col justify-center rounded-full px-2 text-center">
+        <div className="text-[0.5em] font-bold leading-[1em]">{networks.length}+</div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetRow.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetRow.tsx
index 9b9b00dfc5..25e496c966 100644
--- a/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetRow.tsx
+++ b/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetRow.tsx
@@ -16,7 +16,7 @@ import { useUniswapV2LpTokenTotalValueLocked } from "@ui/hooks/useUniswapV2LpTok
 import { TokenLogo } from "../../Asset/TokenLogo"
 import { AssetBalanceCellValue } from "../AssetBalanceCellValue"
 import { useTokenBalancesSummary } from "../useTokenBalancesSummary"
-import { NetworksLogoStack } from "./NetworksLogoStack"
+import { PortfolioNetworksLogoStack } from "./PortfolioNetworksLogoStack"
 import { usePortfolioNetworkIds } from "./usePortfolioNetworkIds"
 
 export const AssetRow: FC<{ balances: Balances; noCountUp?: boolean }> = ({
@@ -69,7 +69,7 @@ export const AssetRow: FC<{ balances: Balances; noCountUp?: boolean }> = ({
               </div>
               {!!networkIds.length && (
                 <div>
-                  <NetworksLogoStack networkIds={networkIds} max={3} />
+                  <PortfolioNetworksLogoStack networkIds={networkIds} max={3} />
                 </div>
               )}
             </div>
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx
index 3a297904a4..7bcd36c700 100644
--- a/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx
+++ b/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx
@@ -25,7 +25,7 @@ import { StaleBalancesIcon } from "../StaleBalancesIcon"
 import { usePortfolioDisplayBalances } from "../useDisplayBalances"
 import { usePortfolioNavigation } from "../usePortfolioNavigation"
 import { useTokenBalancesSummary } from "../useTokenBalancesSummary"
-import { NetworksLogoStack } from "./NetworksLogoStack"
+import { PortfolioNetworksLogoStack } from "./PortfolioNetworksLogoStack"
 import { usePortfolioNetworkIds } from "./usePortfolioNetworkIds"
 import { usePortfolioSymbolBalancesByFilter } from "./usePortfolioSymbolBalances"
 
@@ -118,7 +118,7 @@ const AssetRow: FC<{
               </div>
               {!!networkIds.length && (
                 <div className="text-base">
-                  <NetworksLogoStack networkIds={networkIds} max={3} />
+                  <PortfolioNetworksLogoStack networkIds={networkIds} max={3} />
                 </div>
               )}
             </div>
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/NetworksLogoStack.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/PortfolioNetworksLogoStack.tsx
similarity index 82%
rename from apps/extension/src/ui/domains/Portfolio/AssetsTable/NetworksLogoStack.tsx
rename to apps/extension/src/ui/domains/Portfolio/AssetsTable/PortfolioNetworksLogoStack.tsx
index 393d9c0efd..b32f5dffc1 100644
--- a/apps/extension/src/ui/domains/Portfolio/AssetsTable/NetworksLogoStack.tsx
+++ b/apps/extension/src/ui/domains/Portfolio/AssetsTable/PortfolioNetworksLogoStack.tsx
@@ -7,7 +7,7 @@ import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
 
 import { PortfolioNetwork, usePortfolioNetworks } from "./usePortfolioNetworks"
 
-export const NetworksLogoStackItem = ({ network }: { network?: PortfolioNetwork }) => {
+export const PortfolioNetworksLogoStackItem = ({ network }: { network?: PortfolioNetwork }) => {
   const tooltip = useMemo(
     () => `${network?.label} (${network?.type})`,
     [network?.label, network?.type],
@@ -36,7 +36,7 @@ const MoreNetworksTooltip = ({ networks }: { networks: PortfolioNetwork[] }) =>
   )
 }
 
-export const NetworksLogoStackMore = ({ networks }: { networks: PortfolioNetwork[] }) => {
+export const PortfolioNetworksLogoStackMore = ({ networks }: { networks: PortfolioNetwork[] }) => {
   if (!networks.length) return null
 
   return (
@@ -52,7 +52,7 @@ export const NetworksLogoStackMore = ({ networks }: { networks: PortfolioNetwork
 
 type Props = { networkIds?: (ChainId | EvmNetworkId)[]; className?: string; max?: number }
 
-export const NetworksLogoStack = ({ networkIds, className, max = 4 }: Props) => {
+export const PortfolioNetworksLogoStack = ({ networkIds, className, max = 4 }: Props) => {
   const { networks } = usePortfolioNetworks(networkIds)
 
   const { visibleNetworks, moreNetworks } = useMemo(() => {
@@ -65,9 +65,9 @@ export const NetworksLogoStack = ({ networkIds, className, max = 4 }: Props) =>
   return (
     <div className={classNames("h-[1em] pl-[0.25rem]", className)}>
       {visibleNetworks.map((network, idx) => (
-        <NetworksLogoStackItem key={`${network}-${idx}`} network={network} />
+        <PortfolioNetworksLogoStackItem key={`${network}-${idx}`} network={network} />
       ))}
-      <NetworksLogoStackMore networks={moreNetworks} />
+      <PortfolioNetworksLogoStackMore networks={moreNetworks} />
     </div>
   )
 }
diff --git a/apps/extension/src/ui/domains/Portfolio/NftTile.tsx b/apps/extension/src/ui/domains/Portfolio/NftTile.tsx
index 24c53be164..b29fd11be7 100644
--- a/apps/extension/src/ui/domains/Portfolio/NftTile.tsx
+++ b/apps/extension/src/ui/domains/Portfolio/NftTile.tsx
@@ -2,7 +2,7 @@ import { StarIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
 import { FC } from "react"
 
-import { NetworksLogoStack } from "./AssetsTable/NetworksLogoStack"
+import { PortfolioNetworksLogoStack } from "./AssetsTable/PortfolioNetworksLogoStack"
 import { NftImage } from "./NftImage"
 
 export const NftTile: FC<{
@@ -40,7 +40,7 @@ export const NftTile: FC<{
       </div>
       <div className="flex w-full shrink-0 items-center gap-2 overflow-hidden">
         <div className="grow truncate text-base">{label}</div>
-        <NetworksLogoStack className="shrink-0" networkIds={networkIds} />
+        <PortfolioNetworksLogoStack className="shrink-0" networkIds={networkIds} />
       </div>
     </button>
   )
diff --git a/apps/extension/src/ui/domains/Portfolio/Nfts/DashboardNfts.tsx b/apps/extension/src/ui/domains/Portfolio/Nfts/DashboardNfts.tsx
index c2aa473fc4..b4fe46d864 100644
--- a/apps/extension/src/ui/domains/Portfolio/Nfts/DashboardNfts.tsx
+++ b/apps/extension/src/ui/domains/Portfolio/Nfts/DashboardNfts.tsx
@@ -8,7 +8,7 @@ import { Fiat } from "@ui/domains/Asset/Fiat"
 import { useNavigateWithQuery } from "@ui/hooks/useNavigateWithQuery"
 import { useEvmNetworksMap, useIsFavoriteNft, useNfts, useSetting } from "@ui/state"
 
-import { NetworksLogoStack } from "../AssetsTable/NetworksLogoStack"
+import { PortfolioNetworksLogoStack } from "../AssetsTable/PortfolioNetworksLogoStack"
 import { NftDialog } from "../NftDialog"
 import { NftImage } from "../NftImage"
 import { NftTile } from "../NftTile"
@@ -103,7 +103,7 @@ const NftCollectionRowInner: FC<{
             {isFavorite ? <StarIcon className="shrink-0 fill-[#D5FF5C] stroke-[#D5FF5C]" /> : null}
           </div>
           <div className="flex w-full gap-2 overflow-hidden text-base">
-            <NetworksLogoStack networkIds={networkIds} />
+            <PortfolioNetworksLogoStack networkIds={networkIds} />
             <div className="text-body-secondary text-sm">{networkName}</div>
           </div>
         </div>
diff --git a/apps/extension/src/ui/domains/Portfolio/Nfts/PopupNfts.tsx b/apps/extension/src/ui/domains/Portfolio/Nfts/PopupNfts.tsx
index 380b1b5c90..fe7460956f 100644
--- a/apps/extension/src/ui/domains/Portfolio/Nfts/PopupNfts.tsx
+++ b/apps/extension/src/ui/domains/Portfolio/Nfts/PopupNfts.tsx
@@ -9,7 +9,7 @@ import { Fiat } from "@ui/domains/Asset/Fiat"
 import { useNavigateWithQuery } from "@ui/hooks/useNavigateWithQuery"
 import { useEvmNetworksMap, useIsFavoriteNft, useNfts, useSetting } from "@ui/state"
 
-import { NetworksLogoStack } from "../AssetsTable/NetworksLogoStack"
+import { PortfolioNetworksLogoStack } from "../AssetsTable/PortfolioNetworksLogoStack"
 import { NftDialog } from "../NftDialog"
 import { NftImage } from "../NftImage"
 import { NftTile } from "../NftTile"
@@ -104,7 +104,7 @@ const NftCollectionRowInner: FC<{
             {isFavorite ? <StarIcon className="shrink-0 fill-[#D5FF5C] stroke-[#D5FF5C]" /> : null}
           </div>
           <div className="flex w-full gap-2 overflow-hidden text-base">
-            <NetworksLogoStack networkIds={networkIds} />
+            <PortfolioNetworksLogoStack networkIds={networkIds} />
             <div className="text-body-secondary text-sm">{networkName}</div>
           </div>
         </div>
diff --git a/apps/extension/src/ui/hooks/useNetworkInfo.ts b/apps/extension/src/ui/hooks/useNetworkInfo.ts
index d7440a3116..1b952ebc4c 100644
--- a/apps/extension/src/ui/hooks/useNetworkInfo.ts
+++ b/apps/extension/src/ui/hooks/useNetworkInfo.ts
@@ -2,11 +2,11 @@ import { TFunction } from "i18next"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
-import { Chain, EvmNetwork } from "@extension/core"
+import { Chain, SimpleEvmNetwork } from "@extension/core"
 
 export type NetworkInfoProps = {
   chain?: Chain | null
-  evmNetwork?: EvmNetwork | null
+  evmNetwork?: SimpleEvmNetwork | null
   relay?: Chain | null
 }
 
diff --git a/packages/icons/src/icons/eye-plus.svg b/packages/icons/src/icons/eye-plus.svg
index ce0bced6b6..7639c60b6e 100644
--- a/packages/icons/src/icons/eye-plus.svg
+++ b/packages/icons/src/icons/eye-plus.svg
@@ -1,12 +1,7 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_678_11637)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.3 3.83C11.993 2.687 10.21 1.666 8 1.666c-2.733 0-4.812 1.56-6.146 2.983A14.116 14.116 0 00-.081 7.28a8.578 8.578 0 00-.134.247l-.008.017-.003.005v.002h-.001c0 .001 0 .002.894.449l-.895-.447a1 1 0 000 .894L.667 8c-.895.447-.895.447-.894.448l.001.002.003.006.008.016a5.332 5.332 0 00.134.247 14.116 14.116 0 001.935 2.631C3.188 12.773 5.267 14.333 8 14.333s4.812-1.56 6.146-2.983c.401-.428.746-.854 1.032-1.242a5.68 5.68 0 01-1.363-1.534c-.286.418-.665.914-1.128 1.408-1.166 1.244-2.753 2.351-4.687 2.351-1.934 0-3.521-1.107-4.687-2.35A12.117 12.117 0 011.815 8a12.117 12.117 0 011.498-1.983C4.479 4.773 6.066 3.667 8 3.667c1.934 0 3.521 1.106 4.687 2.35.129.137.25.275.366.41A5.694 5.694 0 0113.3 3.83z" fill="currentColor"/>
-        <path d="M8 10a2 2 0 100-4 2 2 0 000 4z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.567 2.267a1 1 0 00-2 0v.5h-.5a1 1 0 100 2h.5v.5a1 1 0 102 0v-.5h.5a1 1 0 100-2h-.5v-.5z" fill="currentColor"/>
-    </g>
-    <defs>
-        <clipPath id="clip0_678_11637">
-            <path fill="#fff" d="M0 0h16v16H0z"/>
-        </clipPath>
-    </defs>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2">
+    <path d="M 20.021175 7.890205 C 18.14909 5.927464 15.435946 4 12 4 L 12 4 C 5 4 1 12 1 12 C 1 12 5 20 12 20 C 16.85195 20 20.262587 16.156506 21.898907 13.79764"/>
+    <path d="M 15 12 C 15 13.656855 13.656855 15 12 15 C 10.343145 15 9 13.656855 9 12 C 9 10.343145 10.343145 9 12 9 C 13.656855 9 15 10.343145 15 12 Z"/>
+    <path stroke-linecap="round" d="M 20 5 L 20 11"/>
+    <path stroke-linecap="round" d="M 23 8 L 17 8"/>
 </svg>

From 0c348029abc5c99742756a10b4205644f9312051 Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Thu, 19 Dec 2024 02:36:05 +0000
Subject: [PATCH 02/13] fix: deselect AccountTypeNetworkSearch on click

---
 .../src/ui/domains/Account/AccountTypeNetworkSearch.tsx          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
index 58e79cd6e4..25ca0a4a66 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
@@ -105,6 +105,7 @@ export function AccountTypeNetworkSearch({
       immediate
       value={selected}
       onChange={setSelected}
+      onClick={selected ? () => setSelected(null) : undefined}
     >
       {({ open }) => (
         <div

From e10ad486a59ba0669f7cebbfde17c29ea41b80ab Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Thu, 19 Dec 2024 02:40:58 +0000
Subject: [PATCH 03/13] fix: optional AccountCreateMethodButton.networks prop

---
 .../src/ui/domains/Account/AccountAdd/Container.tsx          | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
index a53040d7ec..7e53ba4411 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
@@ -305,7 +305,6 @@ function AccountTypeMethodButton({
           <div>{t("Networks supported")}</div>
         </div>
       }
-      networks={[]}
       to={to}
       disabled={disabled}
     />
@@ -325,7 +324,7 @@ function AccountCreateMethodButton({
 }: {
   title: ReactNode
   subtitle: ReactNode
-  networks: Array<"ethereum" | "polkadot">
+  networks?: Array<"ethereum" | "polkadot">
   disabled?: boolean
   to?: string
 }) {
@@ -345,7 +344,7 @@ function AccountCreateMethodButton({
     >
       <span className="border-grey-800 w-full border-b pb-3 text-start">{title}</span>
       <span className="text-body-secondary flex items-center gap-2 pr-8 text-sm">
-        {networks.map((network, i) => (
+        {networks?.map((network, i) => (
           <span key={network} className={classNames(i + 1 < networks.length && "-mr-[0.8rem]")}>
             {networkChoices[network]}
           </span>

From 410f0de860a49d35af4e0e157866006fca722d61 Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Sun, 22 Dec 2024 01:00:27 +0000
Subject: [PATCH 04/13] fix: include nativetoken symbol in network search

---
 .../Account/AccountTypeNetworkSearch.tsx        | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
index 25ca0a4a66..e1ebc8131d 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from "react-i18next"
 
 import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
 import { getNetworkInfo } from "@ui/hooks/useNetworkInfo"
-import { useChainsMap, useEvmNetworksMap } from "@ui/state"
+import { useChainsMap, useEvmNetworksMap, useTokensMap } from "@ui/state"
 
 export function AccountTypeNetworkSearch({
   setAccountType,
@@ -30,6 +30,7 @@ export function AccountTypeNetworkSearch({
 
   const chainsMap = useChainsMap()
   const evmNetworksMap = useEvmNetworksMap()
+  const tokensMap = useTokensMap()
   const allNetworks = useMemo(
     () =>
       [
@@ -37,24 +38,30 @@ export function AccountTypeNetworkSearch({
           if (chain.isTestnet) return []
           const relay = chain.relay?.id ? chainsMap[chain.relay.id] : null
           const { label, type } = getNetworkInfo(t, { chain, relay })
+          const symbol = tokensMap[chain.nativeToken?.id ?? ""]?.symbol
 
-          return { id: chain.id, label, type, account: chain.account }
+          return { id: chain.id, label, type, symbol, account: chain.account }
         }),
         ...Object.values(evmNetworksMap).flatMap((evmNetwork) => {
           if (evmNetwork.isTestnet) return []
           const { label, type } = getNetworkInfo(t, { evmNetwork })
+          const symbol = tokensMap[evmNetwork.nativeToken?.id ?? ""]?.symbol
 
-          return { id: evmNetwork.id, label, type }
+          return { id: evmNetwork.id, label, type, symbol }
         }),
       ].sort((a, b) => a.label?.localeCompare(b.label ?? "") ?? 0),
 
-    [chainsMap, evmNetworksMap, t],
+    [t, chainsMap, evmNetworksMap, tokensMap],
   )
   type Network = (typeof networks)[number]
 
   const networks = useMemo(() => {
     if (!search) return allNetworks
-    return allNetworks.filter((network) => network.label?.toLowerCase().includes(search))
+    return allNetworks.filter(
+      (network) =>
+        network.label?.toLowerCase().includes(search.toLowerCase()) ||
+        network.symbol?.toLowerCase().includes(search.toLowerCase()),
+    )
   }, [allNetworks, search])
 
   const [selected, setSelected] = useState<Network | null>(null)

From 706797824f6d0de48081a1d1903896224fa5c34d Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Sun, 22 Dec 2024 01:01:10 +0000
Subject: [PATCH 05/13] fix: copy feedback

---
 .../extension/src/ui/domains/Account/AccountAdd/Container.tsx | 2 +-
 apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
index 7e53ba4411..3672a96c1c 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
@@ -244,7 +244,7 @@ function SelectAccountTypeSectionHeader() {
       <div className="text-md text-bold col-span-2 text-white">{t("Select account type")}</div>
       <div className="col-span-2 -mt-2 text-sm text-white/40">
         {t(
-          "If you don't know which to pick, search for the network you want to use and Talisman will automatically pick the correct account type.",
+          "If you don't know which to pick, search for the network you want to use and Talisman will recommend the account type.",
         )}
       </div>
     </>
diff --git a/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx b/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
index 50db91f450..564aa957cd 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
@@ -61,7 +61,7 @@ export const AccountTypeSelector = ({
         icon={<EthereumCircleLogo />}
         subtitle={
           <div className="line-clamp-2">
-            {t("Ethereum, Base, zkSync, Arbitrum, BSC, and EVM chains")}
+            {t("Ethereum, Base, zkSync, Arbitrum, BSC, and all other EVM chains")}
           </div>
         }
         onClick={handleClick("ethereum")}
@@ -75,7 +75,7 @@ export const AccountTypeSelector = ({
         icon={<PolkadotCircleLogo />}
         subtitle={
           <div className="line-clamp-2">
-            {t("Polkadot, AssetHub, Bittensor, and Polkadot chains")}
+            {t("Polkadot, AssetHub, Bittensor, and most Polkadot ecosystem chains")}
           </div>
         }
         onClick={handleClick("sr25519")}

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

---
 .../AccountAddDerivedForm.tsx                 |  7 ++++++-
 .../AccountAdd/AccountAddWatchedForm.tsx      |  7 ++++++-
 .../domains/Account/AccountAdd/Container.tsx  |  8 ++++----
 .../domains/Account/AccountTypeSelector.tsx   | 20 +++++++++++++------
 4 files changed, 30 insertions(+), 12 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 2a54b64e95..df30117ac7 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 cd1ecd64ca..104461694d 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 3672a96c1c..210bdfabee 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" : ""}`}
       />
     </>
   )
@@ -218,7 +218,7 @@ function WatchedAccountMethodButtons() {
           />
         }
         type="ethereum"
-        to={`/accounts/add/watched?type=ethereum`}
+        to={`/accounts/add/watched?type=ethereum${accountType ? "&disableOtherTypes" : ""}`}
       />
       <AccountTypeMethodButton
         disabled={accountType === "ethereum"}
@@ -231,7 +231,7 @@ function WatchedAccountMethodButtons() {
           />
         }
         type="polkadot"
-        to={`/accounts/add/watched?type=sr25519`}
+        to={`/accounts/add/watched?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 564aa957cd..2cf11a3aee 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>

From 00984c4492164d8afb7ac9389f708edfc2d5f58a Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Sun, 22 Dec 2024 01:10:21 +0000
Subject: [PATCH 07/13] fix: navigate to correct tab when clicking on `Add
 Account` breadcrumb

---
 .../dashboard/layout/LayoutBreadcrumb.tsx     | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/extension/src/ui/apps/dashboard/layout/LayoutBreadcrumb.tsx b/apps/extension/src/ui/apps/dashboard/layout/LayoutBreadcrumb.tsx
index f6d04a616c..02a7f8f39c 100644
--- a/apps/extension/src/ui/apps/dashboard/layout/LayoutBreadcrumb.tsx
+++ b/apps/extension/src/ui/apps/dashboard/layout/LayoutBreadcrumb.tsx
@@ -4,6 +4,8 @@ import { FC, Fragment, ReactNode, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { NavLink, To, useLocation } from "react-router-dom"
 
+import { MethodType } from "@ui/domains/Account/AccountAdd/context"
+
 const useBreadcrumbItems = (): Partial<Record<string, BreadcrumbItemProps[]>> => {
   const { t } = useTranslation()
 
@@ -13,7 +15,10 @@ const useBreadcrumbItems = (): Partial<Record<string, BreadcrumbItemProps[]>> =>
     // reusables
     const settings = { label: t("Settings"), to: "/settings/general" }
     const accounts = { label: t("Accounts"), to: "/settings/accounts" }
-    const accountsAdd = { label: t("Add Account"), to: "/accounts/add" }
+    const accountsAdd = (methodType?: MethodType) => ({
+      label: t("Add Account"),
+      to: `/accounts/add${methodType ? `?methodType=${methodType}` : ""}`,
+    })
     const securityAndPrivacy = {
       label: t("Security & Privacy"),
       to: "/settings/security-privacy-settings",
@@ -22,53 +27,53 @@ const useBreadcrumbItems = (): Partial<Record<string, BreadcrumbItemProps[]>> =>
 
     return {
       "/settings/accounts": [settings, accounts],
-      "/accounts/add": [settings, accounts, accountsAdd],
+      "/accounts/add": [settings, accounts, accountsAdd()],
       "/accounts/add/derived": [
         settings,
         accounts,
-        accountsAdd,
+        accountsAdd(),
         { label: t("New"), to: "/accounts/add/derived" },
       ],
       "/accounts/add/mnemonic": [
         settings,
         accounts,
-        accountsAdd,
+        accountsAdd("import"),
         { label: t("Recovery Phrase"), to: "/accounts/add/mnemonic" },
       ],
       "/accounts/add/pk": [
         settings,
         accounts,
-        accountsAdd,
+        accountsAdd("import"),
         { label: t("Private Key"), to: "/accounts/add/pk" },
       ],
       "/accounts/add/json": [
         settings,
         accounts,
-        accountsAdd,
+        accountsAdd("import"),
         { label: t("JSON"), to: "/accounts/add/json" },
       ],
       "/accounts/add/ledger": [
         settings,
         accounts,
-        accountsAdd,
+        accountsAdd("connect"),
         { label: t("Ledger"), to: "/accounts/add/ledger" },
       ],
       "/accounts/add/qr": [
         settings,
         accounts,
-        accountsAdd,
+        accountsAdd("connect"),
         { label: t("Polkadot Vault"), to: "/accounts/add/qr" },
       ],
       "/accounts/add/signet": [
         settings,
         accounts,
-        accountsAdd,
+        accountsAdd("connect"),
         { label: t("Signet Vault"), to: "/accounts/add/signet" },
       ],
       "/accounts/add/watched": [
         settings,
         accounts,
-        accountsAdd,
+        accountsAdd("watched"),
         { label: t("Watched Account"), to: "/accounts/add/watched" },
       ],
 

From 0f137d458277bfca9bdfc7971049fe32eaabe7ff Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Mon, 23 Dec 2024 01:34:26 +0000
Subject: [PATCH 08/13] fix: copy feedback

---
 .../src/ui/domains/Account/AccountAdd/Container.tsx       | 8 ++++----
 .../src/ui/domains/Account/AccountTypeSelector.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
index 210bdfabee..5a336a4adb 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/Container.tsx
@@ -116,7 +116,7 @@ function NewAccountMethodButtons() {
           <SelectAccountTypeButtonHeader
             title={t("New Ethereum Account")}
             tooltip={t(
-              "Pick this option for Ethereum, Base, zkSync, Arbitrum, BSC, and all other EVM chains.",
+              "Pick this option for Ethereum, Base, zkSync, Arbitrum, BSC, and all EVM chains.",
             )}
           />
         }
@@ -129,7 +129,7 @@ function NewAccountMethodButtons() {
           <SelectAccountTypeButtonHeader
             title={t("New Polkadot Account")}
             tooltip={t(
-              "Pick this option for Polkadot, AssetHub, Bittensor, and most Polkadot ecosystem chains.",
+              "Pick this option for Polkadot Relay Chain, Asset Hub, Bittensor, and most Polkadot chains.",
             )}
           />
         }
@@ -213,7 +213,7 @@ function WatchedAccountMethodButtons() {
           <SelectAccountTypeButtonHeader
             title={t("Watch Ethereum Account")}
             tooltip={t(
-              "Pick this option for Ethereum, Base, zkSync, Arbitrum, BSC, and all other EVM chains.",
+              "Pick this option for Ethereum, Base, zkSync, Arbitrum, BSC, and all EVM chains.",
             )}
           />
         }
@@ -226,7 +226,7 @@ function WatchedAccountMethodButtons() {
           <SelectAccountTypeButtonHeader
             title={t("Watch Polkadot Account")}
             tooltip={t(
-              "Pick this option for Polkadot, AssetHub, Bittensor, and most Polkadot ecosystem chains.",
+              "Pick this option for Polkadot Relay Chain, Asset Hub, Bittensor, and most Polkadot chains.",
             )}
           />
         }
diff --git a/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx b/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
index 2cf11a3aee..e082b8a409 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeSelector.tsx
@@ -67,7 +67,7 @@ export const AccountTypeSelector = ({
         title={t("Ethereum")}
         subtitle={
           <div className="line-clamp-2">
-            {t("Ethereum, Base, zkSync, Arbitrum, BSC, and all other EVM chains")}
+            {t("Ethereum, Base, zkSync, Arbitrum, BSC, and all EVM chains")}
           </div>
         }
         disabled={disableOtherTypes && defaultType !== "ethereum"}
@@ -82,7 +82,7 @@ export const AccountTypeSelector = ({
         title={t("Polkadot")}
         subtitle={
           <div className="line-clamp-2">
-            {t("Polkadot, AssetHub, Bittensor, and most Polkadot ecosystem chains")}
+            {t("Relay Chain, Asset Hub, Bittensor, and most Polkadot chains")}
           </div>
         }
         disabled={disableOtherTypes && defaultType !== "sr25519"}

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

---
 .../AccountAddDerivedForm.tsx                 |   4 +-
 .../AccountAddJson/ImportJsonAccountsForm.tsx |  32 +++---
 .../AccountAddJson/UnlockJsonFileForm.tsx     |   4 +-
 .../AccountAddMnemonic/MnemonicForm.tsx       | 100 ++++++++++--------
 .../AccountAdd/AccountAddPrivateKeyForm.tsx   |   4 +-
 .../AccountAdd/AccountAddWatchedForm.tsx      |   5 +-
 .../AccountAdd/BackToAddAccountButton.tsx     |  16 +++
 7 files changed, 101 insertions(+), 64 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..329dc5b316 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddMnemonic/MnemonicForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddMnemonic/MnemonicForm.tsx
@@ -26,6 +26,7 @@ import { AccountTypeSelector } from "@ui/domains/Account/AccountTypeSelector"
 import { useAccounts } from "@ui/state"
 import { isUiAccountAddressType } from "@ui/util/typeCheckers"
 
+import { BackToAddAccountButton } from "../BackToAddAccountButton"
 import { AccountAddDerivationMode, useAccountAddSecret } from "./context"
 import { DerivationModeDropdown } from "./DerivationModeDropdown"
 
@@ -222,56 +223,61 @@ 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">
+          <BackToAddAccountButton methodType="import" />
           <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>
+  )
+}

From f7a36ec58feb3aba2b2db5b27f203fe83465e760 Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Mon, 23 Dec 2024 17:10:59 +0000
Subject: [PATCH 10/13] fix: watched account form spacing

---
 .../src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
index 025d288cad..0ec067acdd 100644
--- a/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountAdd/AccountAddWatchedForm.tsx
@@ -151,7 +151,7 @@ export const AccountAddWatchedForm = ({ onSuccess }: AccountAddPageProps) => {
 
   return (
     <form onSubmit={handleSubmit(submit)}>
-      <div className="mb-12 flex flex-col gap-8">
+      <div className="flex flex-col gap-16">
         <AccountTypeSelector
           defaultType={urlParamType}
           disableOtherTypes={disableOtherTypes}

From 24a3c026c379bb61e9819385977c0eb5b93c9496 Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Mon, 23 Dec 2024 17:11:16 +0000
Subject: [PATCH 11/13] fix: trim account type network search input

---
 .../src/ui/domains/Account/AccountTypeNetworkSearch.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
index e1ebc8131d..b1fa2ef174 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
@@ -59,8 +59,8 @@ export function AccountTypeNetworkSearch({
     if (!search) return allNetworks
     return allNetworks.filter(
       (network) =>
-        network.label?.toLowerCase().includes(search.toLowerCase()) ||
-        network.symbol?.toLowerCase().includes(search.toLowerCase()),
+        network.label?.toLowerCase().includes(search.toLowerCase().trim()) ||
+        network.symbol?.toLowerCase().includes(search.toLowerCase().trim()),
     )
   }, [allNetworks, search])
 

From 402f7b5f8b3d500a3cd002845e23158428d4a0a9 Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Mon, 23 Dec 2024 17:11:29 +0000
Subject: [PATCH 12/13] fix: account type search field font size

---
 .../src/ui/domains/Account/AccountTypeNetworkSearch.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
index b1fa2ef174..8dac16ac3a 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
@@ -117,7 +117,7 @@ export function AccountTypeNetworkSearch({
       {({ open }) => (
         <div
           className={classNames(
-            "bg-grey-850 text-body-secondary/50 col-span-2 flex w-full items-center justify-start gap-4 rounded-sm p-8 text-xs",
+            "bg-grey-850 text-body-secondary/50 col-span-2 flex w-full items-center justify-start gap-4 rounded-sm p-8 text-sm",
             open && "rounded-b-none",
           )}
         >

From 834d123eda08c8c24576289b3e7a456f0b65572c Mon Sep 17 00:00:00 2001
From: Will Urban <will.urban.dev@gmail.com>
Date: Tue, 24 Dec 2024 11:38:23 +0700
Subject: [PATCH 13/13] fix: dropwodn container height and input autocomplete

---
 .../src/ui/domains/Account/AccountTypeNetworkSearch.tsx      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
index 8dac16ac3a..8f20cede0e 100644
--- a/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
+++ b/apps/extension/src/ui/domains/Account/AccountTypeNetworkSearch.tsx
@@ -73,7 +73,7 @@ export function AccountTypeNetworkSearch({
     setAccountType(getAccountType(network))
   }, [chainsMap, evmNetworksMap, selected, setAccountType])
 
-  const refContainer = useRef(null)
+  const refContainer = useRef<HTMLDivElement>(null)
   const virtualizer = useVirtualizer({
     count: networks.length,
     estimateSize: () => 40,
@@ -137,6 +137,7 @@ export function AccountTypeNetworkSearch({
             placeholder={t("Search for network")}
             onChange={(e) => setSearch(e.target.value)}
             value={search}
+            autoComplete="off"
           />
           <div className="flex-grow" />
           <ComboboxButton>
@@ -151,7 +152,7 @@ export function AccountTypeNetworkSearch({
               <div>{t("Network")}</div>
               <div>{t("Account Type")}</div>
             </div>
-            <div ref={refContainer} className="h-[30rem] overflow-scroll">
+            <div ref={refContainer} className="max-h-[30rem] overflow-scroll">
               <div
                 className="relative w-full"
                 style={{ height: `${virtualizer.getTotalSize()}px` }}