From e4a9de9d7876071d13088aefbc847865c24e716f Mon Sep 17 00:00:00 2001 From: alecdwm Date: Sun, 19 Nov 2023 18:02:42 +0000 Subject: [PATCH] feat: hide dust (small token balances) --- .../src/core/domains/app/store.settings.ts | 2 ++ .../dashboard/routes/Settings/GeneralPage.tsx | 35 ++++++------------- .../routes/Settings/NetworksTokensPage.tsx | 33 +++++++++++++++-- .../AssetsTable/usePortfolioSymbolBalances.ts | 12 +++++-- packages/icons/src/icons/chain.svg | 2 +- packages/icons/src/icons/coins.svg | 4 +++ packages/icons/src/index.ts | 3 +- 7 files changed, 61 insertions(+), 30 deletions(-) create mode 100644 packages/icons/src/icons/coins.svg diff --git a/apps/extension/src/core/domains/app/store.settings.ts b/apps/extension/src/core/domains/app/store.settings.ts index 14650a9cbe..0adaebf742 100644 --- a/apps/extension/src/core/domains/app/store.settings.ts +++ b/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, 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 925f97c279..c7cf8e2e50 100644 --- a/apps/extension/src/ui/apps/dashboard/routes/Settings/GeneralPage.tsx +++ b/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 = () => { )} - - {t("Connect to test networks")} - | - - {t("Faucets")} - - - } - > - setUseTestnets(e.target.checked)} /> - { setHideBalances(e.target.checked)} /> + + setHideDust(e.target.checked)} /> + { const { t } = useTranslation("admin") + const [useTestnets, setUseTestnets] = useSetting("useTestnets") return ( @@ -17,6 +26,26 @@ export const NetworksTokensPage = () => { />
+ + {t("Connect to test networks")} + | + + {t("Faucets")} + + + } + > + setUseTestnets(e.target.checked)} /> + { 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>((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 diff --git a/packages/icons/src/icons/chain.svg b/packages/icons/src/icons/chain.svg index aba677e1a4..d124e5032c 100644 --- a/packages/icons/src/icons/chain.svg +++ b/packages/icons/src/icons/chain.svg @@ -1,4 +1,4 @@ - \ No newline at end of file + diff --git a/packages/icons/src/icons/coins.svg b/packages/icons/src/icons/coins.svg new file mode 100644 index 0000000000..13acc455ff --- /dev/null +++ b/packages/icons/src/icons/coins.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts index ab434da710..da7ec381d7 100644 --- a/packages/icons/src/index.ts +++ b/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"