Hide Fungible Tokens

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<TokenListTokens>({ tokens: alphT
   areaName: "local"
 })
 
+export const hiddenTokenStore = new ArrayStorage([] as HiddenToken[], {
+  namespace: "core:hidden-tokens",
+  areaName: "local",
+})
+
 export const baseTokenSchema: yup.Schema<BaseToken> = yup
   .object()
   .required("BaseToken is required")
@@ -32,7 +37,6 @@ export const tokenSchema: yup.Schema<Token> = 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<Token> = 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() {

packages/extension/src/shared/token/type.ts

@@ -20,11 +20,9 @@ export interface RequestToken extends Omit<BaseToken, "networkId"> {
 export interface Token extends Required<RequestToken> {
   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
+}

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 []
     }

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<AccountTokensProps> = ({ 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])
 

packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx

@@ -394,7 +394,7 @@ export const SendTokenScreen: FC = () => {
   if (!tokenWithBalance) {
     return <Navigate to={routes.accounts()} />
   }
-  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 = () => {
       />
       <NavigationContainer
         leftButton={<BarBackButton />}
-        rightButton={<TokenMenuDeprecated tokenId={id} canHideToken={!showAlways} />}
+        rightButton={<TokenMenuDeprecated tokenId={id} canHideToken={true} />}
         scrollContent={t("Send {{ token }}", { token: symbol })}
       >
         <>

packages/extension/src/ui/features/accountTokens/TokenScreen.tsx

@@ -101,14 +101,14 @@ export const TokenScreen: FC = () => {
     return <Navigate to={routes.accounts()} />
   }
 
-  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 (
     <NavigationContainer
       leftButton={<BarBackButton />}
-      rightButton={<TokenMenuDeprecated tokenId={id} canHideToken={!showAlways} />}
+      rightButton={<TokenMenuDeprecated tokenId={id} canHideToken={true} />}
       title={name === "Ether" ? "Ethereum" : name}
     >
       <TokenScreenWrapper>

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

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,
+)