feat: hide dust (small token balances)

apps/extension/src/core/domains/app/store.settings.ts

@@ -8,6 +8,7 @@ export interface SettingsStoreData {
   identiconType: IdenticonType
   useAnalyticsTracking?: boolean // undefined during onboarding
   hideBalances: boolean
+  hideDust: boolean
   allowNotifications: boolean
   selectedAccount?: string // undefined = show all accounts
   collapsedFolders?: string[] // persists the collapsed folders in the dashboard account picker
@@ -25,6 +26,7 @@ export const DEFAULT_SETTINGS: SettingsStoreData = {
   identiconType: "talisman-orb",
   useAnalyticsTracking: undefined, // undefined for onboarding
   hideBalances: false,
+  hideDust: false,
   allowNotifications: true,
   autoLockTimeout: 0,
   spiritClanFeatures: true,

apps/extension/src/ui/apps/dashboard/routes/Settings/GeneralPage.tsx

@@ -3,11 +3,11 @@ import { Setting } from "@talisman/components/Setting"
 import {
   BellIcon,
   ChevronRightIcon,
+  CoinsIcon,
   DollarSignIcon,
   EyeOffIcon,
   FlagIcon,
   KeyIcon,
-  TerminalIcon,
   UserIcon,
 } from "@talismn/icons"
 import { AvatarTypeSelect } from "@ui/domains/Settings/AvatarTypeSelect"
@@ -21,8 +21,8 @@ import { DashboardLayout } from "../../layout/DashboardLayout"
 export const GeneralPage = () => {
   const { t } = useTranslation("admin")
   const [hasSpiritKey] = useAppState("hasSpiritKey")
-  const [useTestnets, setUseTestnets] = useSetting("useTestnets")
   const [hideBalances, setHideBalances] = useSetting("hideBalances")
+  const [hideDust, setHideDust] = useSetting("hideDust")
   const [identiconType, setIdenticonType] = useSetting("identiconType")
   const [allowNotifications, setAllowNotifications] = useSetting("allowNotifications")
   const [spiritClanFeatures, setSpiritClanFeatures] = useSetting("spiritClanFeatures")
@@ -61,26 +61,6 @@ export const GeneralPage = () => {
             )}
           </Tooltip>
         </Setting>
-        <Setting
-          iconLeft={TerminalIcon}
-          title={t("Enable testnets")}
-          subtitle={
-            <>
-              {t("Connect to test networks")}
-              <span> | </span>
-              <a
-                className="text-grey-200 hover:text-body"
-                href="https://paritytech.github.io/polkadot-testnet-faucet"
-                target="_blank"
-                rel="noreferrer"
-              >
-                {t("Faucets")}
-              </a>
-            </>
-          }
-        >
-          <Toggle checked={useTestnets} onChange={(e) => setUseTestnets(e.target.checked)} />
-        </Setting>
         <Setting
           iconLeft={BellIcon}
           title={t("Allow notifications")}
@@ -93,11 +73,18 @@ export const GeneralPage = () => {
         </Setting>
         <Setting
           iconLeft={EyeOffIcon}
-          title={t("Hide balances")}
-          subtitle={t("Blurs your portfolio and account balances")}
+          title={t("Blur balances")}
+          subtitle={t("Conceal your portfolio and account balances")}
         >
           <Toggle checked={hideBalances} onChange={(e) => setHideBalances(e.target.checked)} />
         </Setting>
+        <Setting
+          iconLeft={CoinsIcon}
+          title={t("Hide small balances")}
+          subtitle={t("Hide tokens with a balance below US$1")}
+        >
+          <Toggle checked={hideDust} onChange={(e) => setHideDust(e.target.checked)} />
+        </Setting>
         <CtaButton
           iconLeft={FlagIcon}
           iconRight={ChevronRightIcon}

apps/extension/src/ui/apps/dashboard/routes/Settings/NetworksTokensPage.tsx

@@ -1,13 +1,22 @@
 import { HeaderBlock } from "@talisman/components/HeaderBlock"
+import { Setting } from "@talisman/components/Setting"
 import { Spacer } from "@talisman/components/Spacer"
-import { ChevronRightIcon, GlobeIcon, ListIcon, PolkadotVaultIcon } from "@talismn/icons"
+import {
+  ChevronRightIcon,
+  GlobeIcon,
+  ListIcon,
+  PolkadotVaultIcon,
+  TerminalIcon,
+} from "@talismn/icons"
+import { useSetting } from "@ui/hooks/useSettings"
 import { useTranslation } from "react-i18next"
-import { CtaButton } from "talisman-ui"
+import { CtaButton, Toggle } from "talisman-ui"
 
 import { DashboardLayout } from "../../layout/DashboardLayout"
 
 export const NetworksTokensPage = () => {
   const { t } = useTranslation("admin")
+  const [useTestnets, setUseTestnets] = useSetting("useTestnets")
 
   return (
     <DashboardLayout centered>
@@ -17,6 +26,26 @@ export const NetworksTokensPage = () => {
       />
       <Spacer large />
       <div className="flex flex-col gap-4">
+        <Setting
+          iconLeft={TerminalIcon}
+          title={t("Enable testnets")}
+          subtitle={
+            <>
+              {t("Connect to test networks")}
+              <span> | </span>
+              <a
+                className="text-grey-200 hover:text-body"
+                href="https://paritytech.github.io/polkadot-testnet-faucet"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {t("Faucets")}
+              </a>
+            </>
+          }
+        >
+          <Toggle checked={useTestnets} onChange={(e) => setUseTestnets(e.target.checked)} />
+        </Setting>
         <CtaButton
           iconLeft={GlobeIcon}
           iconRight={ChevronRightIcon}

apps/extension/src/ui/domains/Portfolio/AssetsTable/usePortfolioSymbolBalances.ts

@@ -6,6 +6,7 @@ import { Balance, Balances } from "@core/domains/balances/types"
 import { FiatSumBalancesFormatter } from "@talismn/balances"
 import { TokenRateCurrency } from "@talismn/token-rates"
 import { useSelectedCurrency } from "@ui/hooks/useCurrency"
+import { useSetting } from "@ui/hooks/useSettings"
 import { useMemo } from "react"
 
 import { usePortfolio } from "../context"
@@ -93,11 +94,11 @@ const sortSymbolBalancesBy =
 
 export const usePortfolioSymbolBalances = (balances: Balances) => {
   const currency = useSelectedCurrency()
+  const [hideDust] = useSetting("hideDust")
 
   // group balances by token symbol
   // TODO: Move the association between a token on multiple chains into the backend / subsquid.
   // We will eventually need to handle the scenario where two tokens with the same symbol are not the same token.
-  // Also, we might want to separate testnet tokens from non-testnet tokens.
   const symbolBalances: SymbolBalances[] = useMemo(() => {
     const groupedByToken = balances.each.reduce<Record<string, Balance[]>>((acc, b) => {
       if (!b.token) return acc
@@ -112,7 +113,14 @@ export const usePortfolioSymbolBalances = (balances: Balances) => {
     return Object.entries(groupedByToken)
       .map(([key, tokenBalances]): SymbolBalances => [key, new Balances(tokenBalances)])
       .sort(sortSymbolBalancesBy("total", currency))
-  }, [balances.each, currency])
+      .filter(
+        hideDust
+          ? ([, balances]) =>
+              balances.each.flatMap((b) => b.token?.coingeckoId ?? []).length === 0 ||
+              balances.sum.fiat("usd").total >= 1
+          : () => true
+      )
+  }, [balances.each, currency, hideDust])
 
   const availableSymbolBalances = useMemo(() => {
     const available = symbolBalances

packages/icons/src/index.ts

@@ -1,5 +1,7 @@
 export { ReactComponent as BraveIcon } from "./icons/brave.svg"
 export { ReactComponent as ChainIcon } from "./icons/chain.svg"
+export { ReactComponent as CoinsIcon } from "./icons/coins.svg"
+export { ReactComponent as CommentIcon } from "./icons/comment.svg"
 export { ReactComponent as CursorClickIcon } from "./icons/cursor-click.svg"
 export { ReactComponent as CustomTokenGenericIcon } from "./icons/custom-token-generic.svg"
 export { ReactComponent as DcentIcon } from "./icons/dcent.svg"
@@ -21,7 +23,6 @@ export { ReactComponent as PolkadotVaultIcon } from "./icons/polkadot-vault.svg"
 export { ReactComponent as PopupIcon } from "./icons/popup.svg"
 export { ReactComponent as RocketIcon } from "./icons/rocket.svg"
 export { ReactComponent as SecretIcon } from "./icons/secret.svg"
-export { ReactComponent as CommentIcon } from "./icons/comment.svg"
 export { ReactComponent as SwapIcon } from "./icons/swap.svg"
 export { ReactComponent as TableIcon } from "./icons/table.svg"
 export { ReactComponent as TalismanHandIcon } from "./icons/talisman-hand.svg"