Merge pull request #226 from alephium/support-hiding-token

Support Hiding Tokens

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

@@ -41,7 +41,7 @@ export const tokenSchema: yup.Schema<Token> = baseTokenSchema
 
 export async function addToken(token: Token, verified: boolean) {
   await assertSchema(tokenSchema, token)
-  return tokenStore.push({ verified, ...token })
+  return tokenStore.push({ verified, hide: false, ...token })
 }
 
 export async function hasToken(token: BaseToken) {
@@ -66,6 +66,11 @@ export async function removeToken(token: BaseToken) {
   return tokenStore.remove((t) => equalToken(t, token))
 }
 
+export async function hideToken(token: Token) {
+  await assertSchema(tokenSchema, token)
+  return tokenStore.push({ ...token, hide: true })
+}
+
 export async function updateTokenList() {
   const now = new Date()
   const tokenListTokens = await tokenListStore.get()
@@ -96,7 +101,7 @@ export async function updateTokenListNow() {
 
 export async function getTokenList(): Promise<Token[]> {
   const tokenListTokens = await tokenListStore.get()
-  return tokenListTokens.tokens.map((t) => ({ ...t, verified: true }))
+  return tokenListTokens.tokens
 }
 
 async function fetchTokenListByUrl(url: string): Promise<TokenList> {

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

@@ -24,6 +24,7 @@ export interface Token extends Required<RequestToken> {
   verified?: boolean
   originChain?: string
   unchainedLogoURI?: string
+  hide?: boolean
 }
 
 export interface TokenListTokens {

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

@@ -31,7 +31,7 @@ export function convertTokenList(tokenList: TokenList): Token[] {
   const tokens = tokenList.tokens.flatMap((token) => {
     const networkId = defaultNetworkIds[tokenList.networkId]
     if (networkId) {
-      return [{ networkId, ...token }]
+      return [{ networkId, verified: true, showAlways: true, ...token }]
     } else {
       return []
     }

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

@@ -1,6 +1,6 @@
 import { CellStack } from "@argent/ui"
 import { Flex, VStack } from "@chakra-ui/react"
-import { FC } from "react"
+import { FC, useEffect, useMemo, useState } from "react"
 import { Account } from "../accounts/Account"
 import {
   getAccountName,
@@ -12,7 +12,8 @@ import { StatusMessageBannerContainer } from "../statusMessage/StatusMessageBann
 import { AccountTokensButtons } from "./AccountTokensButtons"
 import { AccountTokensHeader } from "./AccountTokensHeader"
 import { TokenList } from "./TokenList"
-import { useFungibleTokensWithBalance } from "./tokens.state"
+import { networkIdSelector, useFungibleTokensWithBalance } from "./tokens.state"
+import { tokenStore } from "../../../shared/token/storage"
 
 interface AccountTokensProps {
   account: Account
@@ -23,23 +24,41 @@ export const AccountTokens: FC<AccountTokensProps> = ({ account }) => {
   const { isBackupRequired } = useBackupRequired()
   const { tokenDetails: tokensForAccount } = useFungibleTokensWithBalance(account)
   const accountName = getAccountName(account, accountNames)
+  const [hiddenTokenIds, setHiddenTokenIds] = useState<string[]>([])
 
   const showBackupBanner = isBackupRequired
 
+  const visibleTokensForAccount = useMemo(
+    () => tokensForAccount.filter((token) => !hiddenTokenIds.includes(token.id)),
+    [tokensForAccount, hiddenTokenIds]
+  )
+
+  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)
+    })
+  }, [tokensForAccount, account.networkId])
+
   return (
     <Flex direction={"column"} data-testid="account-tokens">
       <VStack spacing={6} mt={4} mb={6}>
         <AccountTokensHeader
           account={account}
-          tokens={tokensForAccount}
+          tokens={visibleTokensForAccount}
           accountName={accountName}
         />
-        <AccountTokensButtons tokens={tokensForAccount} />
+        <AccountTokensButtons tokens={visibleTokensForAccount} />
       </VStack>
       <CellStack pt={0}>
         <StatusMessageBannerContainer />
         {showBackupBanner && <RecoveryBanner />}
-        <TokenList variant={'no-currency'} account={account} tokens={tokensForAccount} showNewTokenButton />
+        <TokenList variant={'no-currency'} account={account} tokens={visibleTokensForAccount} showNewTokenButton />
       </CellStack>
     </Flex>
   )

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

@@ -2,7 +2,7 @@ import { FC, useState } from "react"
 import { Navigate, useNavigate, useParams } from "react-router-dom"
 import styled from "styled-components"
 
-import { removeToken } from "../../../shared/token/storage"
+import { hideToken } from "../../../shared/token/storage"
 import { useAppState } from "../../app.state"
 import { Alert } from "../../components/Alert"
 import { routes } from "../../routes"
@@ -53,7 +53,7 @@ export const HideTokenScreen: FC = () => {
 
   const handleSubmit = () => {
     try {
-      removeToken(token)
+      hideToken(token)
       navigate(routes.accountTokens())
     } catch {
       setError(t("Token not hidden"))

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 } = toTokenView(tokenWithBalance)
+  const { id, name, symbol, balance, decimals, logoURI, verified, originChain, unchainedLogoURI, showAlways } = toTokenView(tokenWithBalance)
 
   const handleMaxClick = () => {
     setMaxClicked(true)
@@ -438,7 +438,7 @@ export const SendTokenScreen: FC = () => {
       />
       <NavigationContainer
         leftButton={<BarBackButton />}
-        rightButton={<TokenMenuDeprecated tokenId={id} />}
+        rightButton={<TokenMenuDeprecated tokenId={id} canHideToken={!showAlways} />}
         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 } = toTokenView(token)
+  const { id, name, symbol, logoURI, verified, originChain, unchainedLogoURI, showAlways } = toTokenView(token)
   const displayBalance = prettifyTokenBalance(token, false)
   const isLoading = isValidating || tokenDetailsIsInitialising
 
   return (
     <NavigationContainer
       leftButton={<BarBackButton />}
-      rightButton={<TokenMenuDeprecated tokenId={id} />}
+      rightButton={<TokenMenuDeprecated tokenId={id} canHideToken={!showAlways} />}
       title={name === "Ether" ? "Ethereum" : name}
     >
       <TokenScreenWrapper>

packages/extension/src/ui/features/accountTokens/tokens.state.ts

@@ -30,7 +30,7 @@ interface UseTokensBase<T> {
   error?: any
 }
 
-const networkIdSelector = memoize(
+export const networkIdSelector = memoize(
   (networkId: string) => (token: Token) => token.networkId === networkId,
 )
 
@@ -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 }
+    return { ...tokenFromTokenList, verified: true, showAlways: true }
   }
 
   if (token === undefined && baseToken.networkId === 'devnet') {

packages/extension/src/ui/features/actions/AddTokenScreen.tsx

@@ -58,7 +58,7 @@ const isDataComplete = (data: Partial<Token>): data is Token => {
   if (
     data.id &&
     isValidTokenId(data.id) &&
-    isValidUrl(data.logoURI) &&
+    (!data.logoURI || isValidUrl(data.logoURI)) &&
     data.decimals?.toString() &&
     data.name &&
     data.symbol