fix: limit networks to privy-supported chains in token pickers (#12312)

filter networks when using privy wallet in TokenPicker and SelectFungibleTokenDialog

Author: swkatmask

packages/mask/popups/components/TokenPicker/index.tsx

@@ -5,7 +5,13 @@ import { EmptyStatus, SelectNetworkSidebar } from '@masknet/shared'
 import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles, MaskTextField } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { useAccount, useFungibleAssets, useNetworks, useUserTokenBalances } from '@masknet/web3-hooks-base'
+import {
+    useAccount,
+    useFungibleAssets,
+    useNetworks,
+    usePrivyWallet,
+    useUserTokenBalances,
+} from '@masknet/web3-hooks-base'
 import { useOKXTokenList } from '@masknet/web3-hooks-evm'
 import {
     isEqual,
@@ -21,6 +27,7 @@ import Fuse from 'fuse.js'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { FixedSizeList, type ListChildComponentProps } from 'react-window'
 import { TokenItem, type TokenItemProps } from './TokenItem.js'
+import { PRIVY_SUPPORTED_CHAINS } from '@masknet/web3-providers'
 
 type RowProps = ListChildComponentProps<{
     tokens: Array<Web3Helper.FungibleTokenAll | Web3Helper.FungibleAssetAll>
@@ -186,10 +193,12 @@ export const TokenPicker = memo(function TokenPicker({
     }, [fuse, keyword])
 
     const networks = useNetworks(NetworkPluginID.PLUGIN_EVM, true)
+    const isPrivyWallet = !!usePrivyWallet(account)
     const filteredNetworks = useMemo(() => {
-        const list = networks
-        return chains ? list.filter((x) => chains.includes(x.chainId)) : list
-    }, [chains, networks])
+        const list = chains ? networks.filter((x) => chains.includes(x.chainId)) : networks
+        return isPrivyWallet ? list.filter((x) => PRIVY_SUPPORTED_CHAINS.includes(x.chainId)) : list
+    }, [chains, networks, isPrivyWallet])
+
     const selectedIndex = filteredAssets.findIndex((x) => x.chainId === chainId && isSameAddress(x.address, address))
 
     return (

packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx

@@ -4,14 +4,21 @@ import { EMPTY_LIST, EnhanceableSite, NetworkPluginID, Sniffings } from '@maskne
 import { useRowSize } from '@masknet/shared-base-ui'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { useNativeTokenAddress, useNetworkContext, useNetworks } from '@masknet/web3-hooks-base'
+import {
+    useAccount,
+    useNativeTokenAddress,
+    useNetworkContext,
+    useNetworks,
+    usePrivyWallet,
+} from '@masknet/web3-hooks-base'
 import type { FungibleToken } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { Button, DialogActions, DialogContent, inputClasses, useMediaQuery, type Theme } from '@mui/material'
 import { useMemo, useState } from 'react'
 import { TokenListMode } from '../../components/FungibleTokenList/type.js'
 import { FungibleTokenList, SelectNetworkSidebar, type FungibleTokenListProps } from '../../components/index.js'
 import { InjectedDialog, useBaseUIRuntime } from '../../contexts/index.js'
+import { PRIVY_SUPPORTED_CHAINS } from '@masknet/web3-providers'
 
 interface StyleProps {
     compact: boolean
@@ -127,10 +134,12 @@ export function SelectFungibleTokenDialog({
     const { classes, cx } = useStyles({ compact })
     const isMdScreen = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
     const allNetworks = useNetworks(NetworkPluginID.PLUGIN_EVM, true)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const isPrivyWallet = !!usePrivyWallet(account)
     const networks = useMemo(() => {
-        if (!chains) return allNetworks
-        return allNetworks.filter((network) => chains.includes(network.chainId))
-    }, [chains, allNetworks])
+        const list = chains ? allNetworks.filter((network) => chains.includes(network.chainId)) : allNetworks
+        return isPrivyWallet ? list.filter((x) => PRIVY_SUPPORTED_CHAINS.includes(x.chainId)) : list
+    }, [chains, allNetworks, isPrivyWallet])
 
     const rowSize = useRowSize()