CP-9868: hiden blacklisted tokens in tokenSelector

packages/core-mobile/app/screens/bridge/hooks/useAssetBalances.ts

@@ -4,6 +4,8 @@ import { useSelector } from 'react-redux'
 import { selectTokensWithBalance } from 'store/balance/slice'
 import { bigintToBig } from 'utils/bigNumbers/bigintToBig'
 import { useTokenInfoContext } from '@avalabs/core-bridge-sdk'
+import { selectTokenVisibility } from 'store/portfolio'
+import { isTokenVisible } from 'store/balance/utils'
 import { getAssetBalances } from '../handlers/getAssetBalances'
 import { unwrapAssetSymbol } from '../utils/bridgeUtils'
 import { useBridgeAssets } from './useBridgeAssets'
@@ -15,13 +17,19 @@ import { useBridgeAssets } from './useBridgeAssets'
 export function useAssetBalances(): {
   assetsWithBalances: AssetBalance[]
 } {
+  const tokenVisibility = useSelector(selectTokenVisibility)
   const tokens = useSelector(selectTokensWithBalance)
   const tokenInfoData = useTokenInfoContext()
   const { bridgeAssets } = useBridgeAssets()
 
+  const visibleTokens = useMemo(
+    () => tokens.filter(token => isTokenVisible(tokenVisibility, token)),
+    [tokens, tokenVisibility]
+  )
+
   const assetsWithBalances = useMemo(
     () =>
-      getAssetBalances(bridgeAssets, tokens)
+      getAssetBalances(bridgeAssets, visibleTokens)
         .map(token => {
           return {
             ...token,
@@ -32,7 +40,7 @@ export function useAssetBalances(): {
           }
         })
         .filter(token => token.balance !== undefined),
-    [bridgeAssets, tokens, tokenInfoData]
+    [bridgeAssets, visibleTokens, tokenInfoData]
   )
 
   const sortedAssetsWithBalances = assetsWithBalances.sort((asset1, asset2) => {

packages/core-mobile/app/screens/portfolio/useSearchableTokenList.ts

@@ -12,14 +12,13 @@ import { useNetworkContractTokens } from 'hooks/networks/useNetworkContractToken
 import { useNetworks } from 'hooks/networks/useNetworks'
 import { getLocalTokenId, isTokenVisible } from 'store/balance/utils'
 import { TokenType } from '@avalabs/vm-module-types'
-import { isTokenMalicious } from 'utils/isTokenMalicious'
 
 const isGreaterThanZero = (token: LocalTokenWithBalance): boolean =>
   token.balance > 0n
 
 const isNotBlacklisted =
   (tokenVisibility: TokenVisibility) => (token: LocalTokenWithBalance) =>
-    isTokenVisible(tokenVisibility[token.localId], isTokenMalicious(token))
+    isTokenVisible(tokenVisibility, token)
 
 const isNotNFT = (token: LocalTokenWithBalance): boolean =>
   token.type !== TokenType.ERC1155 && token.type !== TokenType.ERC721

packages/core-mobile/app/screens/send/TokenSelector.tsx

@@ -31,7 +31,7 @@ function TokenSelector({
   horizontalMargin = DEFAULT_HORIZONTAL_MARGIN
 }: TokenSelectorProps): React.JSX.Element {
   const { filteredTokenList, searchText, setSearchText } =
-    useSearchableTokenList(hideZeroBalance, false)
+    useSearchableTokenList(hideZeroBalance, true)
   const textInputRef = useRef() as RefObject<TextInput>
 
   useEffect(() => {

packages/core-mobile/app/screens/tokenManagement/TokenManagement.tsx

@@ -16,7 +16,6 @@ import { WalletScreenProps } from 'navigation/types'
 import { LocalTokenWithBalance } from 'store/balance/types'
 import ZeroState from 'components/ZeroState'
 import { TokenType } from '@avalabs/vm-module-types'
-import { isTokenMalicious } from 'utils/isTokenMalicious'
 
 type NavigationProp = WalletScreenProps<
   typeof AppNavigation.Wallet.TokenManagement
@@ -37,17 +36,7 @@ function TokenManagement(): JSX.Element {
     item: ListRenderItemInfo<LocalTokenWithBalance>
   ): JSX.Element => {
     const token = item.item
-    const logoUri = token.logoUri
-
-    return (
-      <TokenManagementItem
-        id={token.localId}
-        name={token.name}
-        symbol={token.symbol}
-        image={logoUri}
-        isMalicious={isTokenMalicious(token)}
-      />
-    )
+    return <TokenManagementItem token={token} />
   }
 
   const emptyView = <ZeroState.Basic title="No results found" />

packages/core-mobile/app/screens/tokenManagement/TokenManagementItem.tsx

@@ -8,31 +8,25 @@ import { useDispatch, useSelector } from 'react-redux'
 import { selectTokenVisibility, toggleTokenVisibility } from 'store/portfolio'
 import { MaliciousTokenIconWithWarning } from 'components/MaliciousTokenIconWithWarning'
 import { isTokenVisible } from 'store/balance/utils'
+import { LocalTokenWithBalance } from 'store/balance'
+import { isTokenMalicious } from 'utils/isTokenMalicious'
 
 type Props = {
-  id: string
-  name: string
-  image?: string
-  symbol?: string
-  onPress?: () => void
-  isMalicious: boolean
+  token: LocalTokenWithBalance
 }
 
-const TokenManagementItem: FC<Props> = ({
-  id,
-  name,
-  image,
-  symbol,
-  isMalicious
-}) => {
+const TokenManagementItem: FC<Props> = ({ token }) => {
   const dispatch = useDispatch()
 
   const tokenVisibility = useSelector(selectTokenVisibility)
 
-  const isSwitchOn = isTokenVisible(tokenVisibility[id], isMalicious)
+  const isSwitchOn = isTokenVisible(tokenVisibility, token)
+  const isMalicious = isTokenMalicious(token)
 
   function handleChange(): void {
-    dispatch(toggleTokenVisibility({ tokenId: id, value: !isSwitchOn }))
+    dispatch(
+      toggleTokenVisibility({ tokenId: token.localId, value: !isSwitchOn })
+    )
   }
 
   const tokenLogo = (
@@ -42,7 +36,12 @@ const TokenManagementItem: FC<Props> = ({
         justifyContent: 'center',
         alignItems: 'center'
       }}>
-      <Avatar.Custom name={name} symbol={symbol} logoUri={image} showBorder />
+      <Avatar.Custom
+        name={token.name}
+        symbol={token.symbol}
+        logoUri={token.logoUri}
+        showBorder
+      />
     </View>
   )
 
@@ -58,7 +57,9 @@ const TokenManagementItem: FC<Props> = ({
         <MaliciousTokenIconWithWarning contentWidth={200} position="left" />
       )}
       <Switch
-        testID={isSwitchOn ? `${name}_displayed` : `${name}_blocked`}
+        testID={
+          isSwitchOn ? `${token.name}_displayed` : `${token.name}_blocked`
+        }
         value={isSwitchOn}
         onValueChange={handleChange}
       />
@@ -71,9 +72,9 @@ const TokenManagementItem: FC<Props> = ({
         flexGrow: 1,
         marginRight: 15
       }}>
-      <AvaText.Heading3 ellipsizeMode="tail">{name}</AvaText.Heading3>
+      <AvaText.Heading3 ellipsizeMode="tail">{token.name}</AvaText.Heading3>
       <AvaText.Body2 numberOfLines={1} ellipsizeMode="tail">
-        {symbol}
+        {token.symbol}
       </AvaText.Body2>
     </View>
   )

packages/core-mobile/app/store/balance/slice.ts

@@ -15,7 +15,6 @@ import {
   isTokenWithBalancePVM
 } from '@avalabs/avalanche-module'
 import { TokenVisibility } from 'store/portfolio'
-import { isTokenMalicious } from 'utils/isTokenMalicious'
 import {
   Balance,
   Balances,
@@ -202,9 +201,7 @@ export const selectBalanceTotalInCurrencyForAccount =
     const tokens = selectTokensWithBalanceForAccount(state, accountIndex)
 
     return tokens
-      .filter(token =>
-        isTokenVisible(tokenVisibility[token.localId], isTokenMalicious(token))
-      )
+      .filter(token => isTokenVisible(tokenVisibility, token))
       .reduce((total, token) => {
         total += token.balanceInCurrency ?? 0
         return total
@@ -237,13 +234,7 @@ export const selectBalanceTotalInCurrencyForNetworkAndAccount =
 
     for (const balance of balances) {
       for (const token of balance.tokens) {
-        if (
-          !isTokenVisible(
-            tokenVisibility[token.localId],
-            isTokenMalicious(token)
-          )
-        )
-          continue
+        if (!isTokenVisible(tokenVisibility, token)) continue
         totalInCurrency += token.balanceInCurrency ?? 0
       }
     }

packages/core-mobile/app/store/balance/utils.tests.ts

@@ -1,24 +1,43 @@
 import {
   TokenWithBalance,
-  NetworkContractToken
+  NetworkContractToken,
+  TokenType
 } from '@avalabs/vm-module-types'
+import { Erc20TokenBalance } from '@avalabs/glacier-sdk'
 import { isTokenVisible, getLocalTokenId } from './utils'
+import { LocalTokenWithBalance } from './types'
 
 describe('isTokenVisible', () => {
   it('returns true if tokenVisible is true', () => {
-    expect(isTokenVisible(true, false)).toBe(true)
+    const tokenVisiblity = { '123': true }
+    const token = { localId: '123' } as LocalTokenWithBalance
+    expect(isTokenVisible(tokenVisiblity, token)).toBe(true)
   })
 
   it('returns false if tokenVisible is false', () => {
-    expect(isTokenVisible(false, false)).toBe(false)
+    const tokenVisiblity = { '123': false }
+    const token = { localId: '123' } as LocalTokenWithBalance
+    expect(isTokenVisible(tokenVisiblity, token)).toBe(false)
   })
 
   it('returns false if tokenVisible is undefined and isMalicious is true', () => {
-    expect(isTokenVisible(undefined, true)).toBe(false)
+    const tokenVisiblity = {}
+    const token = {
+      localId: '123',
+      type: TokenType.ERC20,
+      reputation: Erc20TokenBalance.tokenReputation.MALICIOUS
+    } as LocalTokenWithBalance
+    expect(isTokenVisible(tokenVisiblity, token)).toBe(false)
   })
 
   it('returns true if tokenVisible is undefined and isMalicious is false', () => {
-    expect(isTokenVisible(undefined, false)).toBe(true)
+    const tokenVisiblity = {}
+    const token = {
+      localId: '123',
+      type: TokenType.ERC20,
+      reputation: Erc20TokenBalance.tokenReputation.BENIGN
+    } as LocalTokenWithBalance
+    expect(isTokenVisible(tokenVisiblity, token)).toBe(true)
   })
 })
 

packages/core-mobile/app/store/balance/utils.ts

@@ -2,6 +2,9 @@ import type {
   NetworkContractToken,
   TokenWithBalance
 } from '@avalabs/vm-module-types'
+import { TokenVisibility } from 'store/portfolio'
+import { isTokenMalicious } from 'utils/isTokenMalicious'
+import { LocalTokenWithBalance } from './types'
 
 export function getLocalTokenId(
   token: TokenWithBalance | NetworkContractToken
@@ -10,8 +13,10 @@ export function getLocalTokenId(
 }
 
 export function isTokenVisible(
-  tokenVisible: boolean | undefined,
-  isMalicious: boolean
+  tokenVisibility: TokenVisibility,
+  token: LocalTokenWithBalance
 ): boolean {
+  const isMalicious = isTokenMalicious(token)
+  const tokenVisible = tokenVisibility[token.localId.toLowerCase()]
   return tokenVisible !== undefined ? tokenVisible : !isMalicious
 }

packages/core-mobile/app/store/migrations.ts

@@ -294,7 +294,7 @@ export const migrations = {
   17: (state: any) => {
     const tokenVisibility = state.portfolio.tokenBlacklist.reduce(
       (acc: TokenVisibility, tokenId: string) => {
-        acc[tokenId] = false
+        acc[tokenId.toLowerCase()] = false
         return acc
       },
       {}

packages/core-mobile/app/store/portfolio/slice.ts

@@ -13,7 +13,7 @@ export const portfolioSlice = createSlice({
       action: PayloadAction<{ tokenId: string; value: boolean }>
     ) => {
       const { tokenId, value } = action.payload
-      state.tokenVisibility[tokenId] = value
+      state.tokenVisibility[tokenId.toLowerCase()] = value
     }
   }
 })