feat: add account redesign

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

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

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,

apps/extension/src/ui/apps/dashboard/routes/TxHistory.tsx

@@ -3,15 +3,14 @@ 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"
 import { TxHistoryList, TxHistoryProvider } from "@ui/domains/Transactions/TxHistory"
 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()

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"
 

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