From f778e418f6e7ffd4c85328ccd0af99ce6d6f515d Mon Sep 17 00:00:00 2001 From: h0ngcha0 Date: Sat, 7 Dec 2024 16:46:47 +0100 Subject: [PATCH] Able to hide fungible tokens, including the ones in token list --- packages/extension/src/shared/token/storage.ts | 15 +++++++++++---- packages/extension/src/shared/token/type.ts | 7 +++++-- packages/extension/src/shared/token/utils.ts | 3 +-- .../ui/features/accountTokens/AccountTokens.tsx | 14 ++++---------- .../ui/features/accountTokens/SendTokenScreen.tsx | 4 ++-- .../src/ui/features/accountTokens/TokenScreen.tsx | 4 ++-- .../ui/features/accountTokens/tokens.service.ts | 1 - .../src/ui/features/accountTokens/tokens.state.ts | 11 +++++++---- 8 files changed, 32 insertions(+), 27 deletions(-) diff --git a/packages/extension/src/shared/token/storage.ts b/packages/extension/src/shared/token/storage.ts index f43e9e0d6..3c2328fb3 100644 --- a/packages/extension/src/shared/token/storage.ts +++ b/packages/extension/src/shared/token/storage.ts @@ -2,7 +2,7 @@ import { TokenList } from "@alephium/token-list" import * as yup from "yup" import { ArrayStorage, ObjectStorage } from "../storage" import { assertSchema } from "../utils/schema" -import { BaseToken, Token, TokenListTokens } from "./type" +import { BaseToken, Token, TokenListTokens, HiddenToken } from "./type" import { alphTokens, convertTokenList, equalToken } from "./utils" export const tokenStore = new ArrayStorage([] as Token[], { @@ -16,6 +16,11 @@ export const tokenListStore = new ObjectStorage({ tokens: alphT areaName: "local" }) +export const hiddenTokenStore = new ArrayStorage([] as HiddenToken[], { + namespace: "core:hidden-tokens", + areaName: "local", +}) + export const baseTokenSchema: yup.Schema = yup .object() .required("BaseToken is required") @@ -32,7 +37,6 @@ export const tokenSchema: yup.Schema = baseTokenSchema symbol: yup.string().required("Symbol is required"), decimals: yup.number().required("Decimals is required"), logoURI: yup.string().url(), - showAlways: yup.boolean(), description: yup.string(), verified: yup.boolean(), originChain: yup.string(), @@ -41,7 +45,8 @@ export const tokenSchema: yup.Schema = baseTokenSchema export async function addToken(token: Token, verified: boolean) { await assertSchema(tokenSchema, token) - return tokenStore.push({ verified, hide: false, ...token }) + await hiddenTokenStore.remove((t) => t.id === token.id) + return tokenStore.push({ verified, ...token }) } export async function hasToken(token: BaseToken) { @@ -63,12 +68,14 @@ export async function getToken(token: BaseToken) { export async function removeToken(token: BaseToken) { await assertSchema(baseTokenSchema, token) + await hiddenTokenStore.remove((t) => t.id === token.id) return tokenStore.remove((t) => equalToken(t, token)) } export async function hideToken(token: Token) { await assertSchema(tokenSchema, token) - return tokenStore.push({ ...token, hide: true }) + await hiddenTokenStore.push({ id: token.id, networkId: token.networkId }) + return tokenStore.push({ ...token }) } export async function updateTokenList() { diff --git a/packages/extension/src/shared/token/type.ts b/packages/extension/src/shared/token/type.ts index 768056754..a5c855fba 100644 --- a/packages/extension/src/shared/token/type.ts +++ b/packages/extension/src/shared/token/type.ts @@ -20,11 +20,9 @@ export interface RequestToken extends Omit { export interface Token extends Required { description?: string logoURI?: string - showAlways?: boolean verified?: boolean originChain?: string unchainedLogoURI?: string - hide?: boolean } export interface TokenListTokens { @@ -35,3 +33,8 @@ export interface TokenListTokens { export interface TokenWithBalance extends Token { balance?: BigNumber } + +export interface HiddenToken { + id: string + networkId: string +} diff --git a/packages/extension/src/shared/token/utils.ts b/packages/extension/src/shared/token/utils.ts index 960218cc4..a8f0f8879 100644 --- a/packages/extension/src/shared/token/utils.ts +++ b/packages/extension/src/shared/token/utils.ts @@ -12,7 +12,6 @@ export const alphTokens: Token[] = defaultNetworkIds.map((networkId) => { ...ALPH, "networkId": networkId, "logoURI": "https://raw.githubusercontent.com/alephium/alephium-brand-guide/a4680dc86d6061a8d08468ebb42d659ab74db64a/logos/light/Logo-Icon.svg", - "showAlways": true, verified: true } }) @@ -31,7 +30,7 @@ export function convertTokenList(tokenList: TokenList): Token[] { const tokens = tokenList.tokens.flatMap((token) => { const networkId = defaultNetworkIds[tokenList.networkId] if (networkId) { - return [{ networkId, verified: true, showAlways: true, ...token }] + return [{ networkId, verified: true, ...token }] } else { return [] } diff --git a/packages/extension/src/ui/features/accountTokens/AccountTokens.tsx b/packages/extension/src/ui/features/accountTokens/AccountTokens.tsx index 572a0352f..3a908195e 100644 --- a/packages/extension/src/ui/features/accountTokens/AccountTokens.tsx +++ b/packages/extension/src/ui/features/accountTokens/AccountTokens.tsx @@ -12,8 +12,8 @@ import { StatusMessageBannerContainer } from "../statusMessage/StatusMessageBann import { AccountTokensButtons } from "./AccountTokensButtons" import { AccountTokensHeader } from "./AccountTokensHeader" import { TokenList } from "./TokenList" -import { networkIdSelector, useFungibleTokensWithBalance } from "./tokens.state" -import { tokenStore } from "../../../shared/token/storage" +import { useFungibleTokensWithBalance, hiddenTokensNetworkIdSelector } from "./tokens.state" +import { hiddenTokenStore } from "../../../shared/token/storage" interface AccountTokensProps { account: Account @@ -34,14 +34,8 @@ export const AccountTokens: FC = ({ account }) => { ) useEffect(() => { - tokenStore.get(networkIdSelector(account.networkId)).then((storedTokens) => { - const tokenIds: string[] = [] - for (const token of storedTokens) { - if (token.hide) { - tokenIds.push(token.id) - } - } - setHiddenTokenIds(tokenIds) + hiddenTokenStore.get(hiddenTokensNetworkIdSelector(account.networkId)).then((hiddenTokens) => { + setHiddenTokenIds(hiddenTokens.map((t) => t.id)) }) }, [tokensForAccount, account.networkId]) diff --git a/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx b/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx index 710d82942..12db74619 100644 --- a/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx +++ b/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx @@ -394,7 +394,7 @@ export const SendTokenScreen: FC = () => { if (!tokenWithBalance) { return } - const { id, name, symbol, balance, decimals, logoURI, verified, originChain, unchainedLogoURI, showAlways } = toTokenView(tokenWithBalance) + const { id, name, symbol, balance, decimals, logoURI, verified, originChain, unchainedLogoURI } = toTokenView(tokenWithBalance) const handleMaxClick = () => { setMaxClicked(true) @@ -438,7 +438,7 @@ export const SendTokenScreen: FC = () => { /> } - rightButton={} + rightButton={} scrollContent={t("Send {{ token }}", { token: symbol })} > <> diff --git a/packages/extension/src/ui/features/accountTokens/TokenScreen.tsx b/packages/extension/src/ui/features/accountTokens/TokenScreen.tsx index 0001d3a51..1ad8a9ead 100644 --- a/packages/extension/src/ui/features/accountTokens/TokenScreen.tsx +++ b/packages/extension/src/ui/features/accountTokens/TokenScreen.tsx @@ -101,14 +101,14 @@ export const TokenScreen: FC = () => { return } - const { id, name, symbol, logoURI, verified, originChain, unchainedLogoURI, showAlways } = toTokenView(token) + const { id, name, symbol, logoURI, verified, originChain, unchainedLogoURI } = toTokenView(token) const displayBalance = prettifyTokenBalance(token, false) const isLoading = isValidating || tokenDetailsIsInitialising return ( } - rightButton={} + rightButton={} title={name === "Ether" ? "Ethereum" : name} > diff --git a/packages/extension/src/ui/features/accountTokens/tokens.service.ts b/packages/extension/src/ui/features/accountTokens/tokens.service.ts index faae13ca9..34234ec34 100644 --- a/packages/extension/src/ui/features/accountTokens/tokens.service.ts +++ b/packages/extension/src/ui/features/accountTokens/tokens.service.ts @@ -10,7 +10,6 @@ export interface TokenView { balance: string logoURI?: string - showAlways?: boolean verified?: boolean originChain?: string unchainedLogoURI?: string diff --git a/packages/extension/src/ui/features/accountTokens/tokens.state.ts b/packages/extension/src/ui/features/accountTokens/tokens.state.ts index bcfcc1399..040beb978 100644 --- a/packages/extension/src/ui/features/accountTokens/tokens.state.ts +++ b/packages/extension/src/ui/features/accountTokens/tokens.state.ts @@ -7,7 +7,7 @@ import { getNetwork, Network } from "../../../shared/network" import { useArrayStorage, useObjectStorage } from "../../../shared/storage/hooks" import { addToken, removeToken, tokenListStore, tokenStore } from "../../../shared/token/storage" -import { BaseToken, BaseTokenWithBalance, Token, TokenListTokens, TokenWithBalance } from "../../../shared/token/type" +import { BaseToken, BaseTokenWithBalance, Token, TokenListTokens, TokenWithBalance, HiddenToken } from "../../../shared/token/type" import { alphTokens, equalToken } from "../../../shared/token/utils" import { BaseWalletAccount } from "../../../shared/wallet.model" import { getAccountIdentifier } from "../../../shared/wallet.service" @@ -96,7 +96,7 @@ export const useToken = (baseToken: BaseToken): Token | undefined => { const tokenFromTokenList = tokenListTokens.tokens.find((t) => equalToken(t, baseToken)) if (tokenFromTokenList) { - return { ...tokenFromTokenList, verified: true, showAlways: true } + return { ...tokenFromTokenList, verified: true } } if (token === undefined && baseToken.networkId === 'devnet') { @@ -189,8 +189,7 @@ export const useFungibleTokensWithBalance = ( if (result.findIndex((t) => t[0].id === userToken.id) === -1) { const foundIndex = cachedTokens.findIndex((token) => token.id == userToken.id) if (foundIndex !== -1) { - const index = cachedTokens[foundIndex].showAlways ? -1 : foundIndex - result.push([{ balance: userToken.balance, ...cachedTokens[foundIndex] }, index]) + result.push([{ balance: userToken.balance, ...cachedTokens[foundIndex] }, foundIndex]) } else { const token = await fetchFungibleTokenFromFullNode(network, userToken.id) if (token) { @@ -357,3 +356,7 @@ async function fetchFungibleTokenFromFullNode(network: Network, tokenId: string) return undefined } } + +export const hiddenTokensNetworkIdSelector = memoize( + (networkId: string) => (token: HiddenToken) => token.networkId === networkId, +)