fix: weird scroll behaviour in AccountTypeNetworkSearch (#1767)

* 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 * fix: weird scroll behaviour in AccountTypeNetworkSearch * fix: comboboxOptions max height * fix: app crashing when no option selected, handle side effects in handleChange fn * revert: max height to fixed height * fix: disable spellcheck on network search combobox * chore: show active networks first in add account network dropdown * chore: remove account type selection buttons from some account creation screens --------- Co-authored-by: Will Urban <[email protected]> Co-authored-by: Chid Gilovitz <[email protected]>
TalismanSociety · Dec 30, 2024 · 88ed218 · 88ed218
1 parent b2eda68
commit 88ed218
Show file tree

Hide file tree

Showing 46 changed files with 818 additions and 345 deletions.
diff --git a/.changeset/silver-panthers-bathe.md 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
diff --git 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" },
       ],
 

diff --git 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
@@ -4,22 +4,32 @@ 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
   const [params] = useSearchParams()
   const urlParamType = (params.get("type") ?? undefined) as AccountAddressType | undefined
   const { setAddress } = useSelectAccountAndNavigate("/portfolio")
 
+  const accountTypeString = () => {
+    switch (urlParamType) {
+      case "ethereum":
+        return " Ethereum"
+      case "sr25519":
+        return " Polkadot"
+      default:
+        return ""
+    }
+  }
+
   return (
     <>
       <HeaderBlock
-        title={t("Create a new account")}
+        title={t(`Create a new${accountTypeString()} account`)}
         text={!urlParamType && t("What type of account would you like to create?")}
       />
       <Spacer small />

diff --git a/apps/extension/src/ui/apps/dashboard/routes/AccountAdd/AccountAddJsonPage.tsx b/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} />

diff --git 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
@@ -1,23 +1,38 @@
 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")
 
+  const accountTypeString = () => {
+    switch (urlParamType) {
+      case "ethereum":
+        return " Ethereum"
+      case "sr25519":
+        return " Polkadot"
+      default:
+        return ""
+    }
+  }
+
   return (
     <>
       <HeaderBlock
-        title={t("Choose account type")}
-        text={t("What type of account would you like to add?")}
+        title={t(`Add a watched${accountTypeString()} 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
@@ -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
@@ -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 = {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",