feat: add account redesign (#1760)

* feat: add account redesign

* fix: deselect AccountTypeNetworkSearch on click

* fix: optional AccountCreateMethodButton.networks prop

* fix: include nativetoken symbol in network search

* fix: copy feedback

* fix: also disable account type picker on second add/watch account page

* fix: navigate to correct tab when clicking on `Add Account` breadcrumb

* fix: copy feedback

* feat: add back button

* fix: watched account form spacing

* fix: trim account type network search input

* fix: account type search field font size

.changeset/silver-panthers-bathe.md

@@ -0,0 +1,5 @@
+---
+"@talismn/icons": patch
+---
+
+fix: make eye-plus.svg react correctly to stroke-width

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" },
       ],
 

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">

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

apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddJsonPage.tsx

@@ -2,20 +2,19 @@ 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")
 
   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} />

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")
 

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} />
     </>
   )

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>

apps/extension/src/ui/apps/dashboard/routes/Networks/NetworkPage.tsx

@@ -3,14 +3,14 @@ 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,
   SubNetworkFormEdit,
 } from "@ui/domains/Settings/ManageNetworks/NetworkForm"
 import { useAnalyticsPageView } from "@ui/hooks/useAnalyticsPageView"
 
-import { DashboardLayout } from "../../layout"
 import { useNetworksType } from "./useNetworksType"
 
 const ANALYTICS_PAGE: AnalyticsPage = {

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"

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"

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")

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",

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")

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,

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 = () => {

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 />

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")

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",

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()

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")

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()