fix: fw-1575 only list supported chains in token picker

packages/plugin-infra/src/manager/site-adaptor.ts

@@ -68,9 +68,10 @@ useActivatedPluginsSiteAdaptor.visibility = {
 
 // this should never be used for a normal plugin
 const TRUE = new ValueRef(true)
-export function useIsMinimalMode(pluginID: string) {
+const FALSE = new ValueRef(false)
+export function useIsMinimalMode(pluginID: string | undefined) {
     assertLocation()
-    return useValueRef(minimalModeSub[pluginID] || TRUE)
+    return useValueRef(pluginID ? minimalModeSub[pluginID] || TRUE : FALSE)
 }
 
 export async function checkIsMinimalMode(pluginID: string) {
@@ -86,10 +87,11 @@ export async function checkIsMinimalMode(pluginID: string) {
  * @param visibility Should invisible plugin included?
  * @returns
  */
-export function useActivatedPluginSiteAdaptor(pluginID: string, minimalModeEqualsTo: 'any' | boolean) {
+export function useActivatedPluginSiteAdaptor(pluginID: string | undefined, minimalModeEqualsTo: 'any' | boolean) {
     const plugins = useActivatedPluginsSiteAdaptor(minimalModeEqualsTo)
     const minimalMode = useIsMinimalMode(pluginID)
 
+    if (!pluginID) return undefined
     const result = plugins.find((x) => x.ID === pluginID)
     if (!result) return undefined
     if (minimalModeEqualsTo === 'any') return result

packages/plugins/Gitcoin/src/SiteAdaptor/modals/DonateModal/DonateDialog.tsx

@@ -99,7 +99,7 @@ export const DonateDialog = memo(({ grant, ...rest }: DonateDialogProps) => {
     // #region select token dialog
     const onSelectTokenChipClick = useCallback(async () => {
         const picked = await SelectFungibleTokenModal.openAndWaitForClose({
-            pluginID: NetworkPluginID.PLUGIN_EVM,
+            networkPluginID: NetworkPluginID.PLUGIN_EVM,
             chainId,
             whitelist: TOKEN_LIST,
             disableNativeToken: false,

packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx

@@ -253,8 +253,8 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
         ) {
             return (
                 <Icons.History
-                    style={{ cursor: account ? undefined : 'disabled' }}
-                    disabled
+                    style={{ cursor: account ? undefined : 'not-allowed' }}
+                    disabled={!account}
                     onClick={() => {
                         if (!account) return
                         setShowHistory((history) => !history)

packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx

@@ -15,7 +15,7 @@ import {
 } from '@masknet/web3-shared-base'
 import { type ChainId, type GasConfig, SchemaType, useRedPacketConstants } from '@masknet/web3-shared-evm'
 import { useTransactionValue } from '@masknet/web3-hooks-evm'
-import { NetworkPluginID } from '@masknet/shared-base'
+import { NetworkPluginID, PluginID } from '@masknet/shared-base'
 import {
     FungibleTokenInput,
     PluginWalletStatusBar,
@@ -125,7 +125,8 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
             disableNativeToken: false,
             selectedTokens: token ? [token.address] : [],
             chainId,
-            pluginID: NetworkPluginID.PLUGIN_EVM,
+            networkPluginID: NetworkPluginID.PLUGIN_EVM,
+            pluginID: PluginID.RedPacket,
         })
         if (!picked) return
         if (chainId !== picked.chainId) {

packages/plugins/Tips/src/components/TokenSection/index.tsx

@@ -26,7 +26,7 @@ export function TokenSection(props: HTMLProps<HTMLDivElement>) {
 
     const onSelectTokenChipClick = useCallback(async () => {
         const picked = await SelectFungibleTokenModal.openAndWaitForClose({
-            pluginID,
+            networkPluginID: pluginID,
             chainId,
             disableNativeToken: false,
             selectedTokens: token ? [token.address] : [],

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

@@ -1,16 +1,17 @@
-import { useState, useMemo } from 'react'
-import { DialogContent, type Theme, useMediaQuery, inputClasses } from '@mui/material'
-import { useNetworkContext, useNativeTokenAddress, useNetworks } from '@masknet/web3-hooks-base'
-import type { Web3Helper } from '@masknet/web3-helpers'
-import { EMPTY_LIST, EnhanceableSite, NetworkPluginID, Sniffings } from '@masknet/shared-base'
+import { EMPTY_LIST, EnhanceableSite, NetworkPluginID, type PluginID, Sniffings } from '@masknet/shared-base'
 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 type { FungibleToken } from '@masknet/web3-shared-base'
-import { TokenListMode } from '../../components/FungibleTokenList/type.js'
+import { ChainId } from '@masknet/web3-shared-evm'
+import { DialogContent, inputClasses, type Theme, useMediaQuery } from '@mui/material'
+import { useMemo, useState } from 'react'
 import { useSharedTrans } from '../../../locales/index.js'
-import { InjectedDialog, useBaseUIRuntime } from '../../contexts/index.js'
+import { TokenListMode } from '../../components/FungibleTokenList/type.js'
 import { FungibleTokenList, SelectNetworkSidebar } from '../../components/index.js'
-import { ChainId } from '@masknet/web3-shared-evm'
+import { InjectedDialog, useBaseUIRuntime } from '../../contexts/index.js'
+import { useActivatedPluginSiteAdaptor } from '@masknet/plugin-infra/content-script'
 
 interface StyleProps {
     compact: boolean
@@ -56,7 +57,8 @@ const useStyles = makeStyles<StyleProps>()((theme, { compact, isList }) => ({
 interface SelectFungibleTokenDialogProps<T extends NetworkPluginID = NetworkPluginID> {
     open: boolean
     enableManage?: boolean
-    pluginID?: T
+    networkPluginID?: T
+    pluginID?: PluginID
     chainId?: Web3Helper.Definition[T]['ChainId']
     keyword?: string
     whitelist?: string[]
@@ -73,6 +75,7 @@ interface SelectFungibleTokenDialogProps<T extends NetworkPluginID = NetworkPlug
 
 export function SelectFungibleTokenDialog({
     open,
+    networkPluginID,
     pluginID,
     chainId,
     disableSearchBar,
@@ -91,10 +94,18 @@ export function SelectFungibleTokenDialog({
     const { networkIdentifier } = useBaseUIRuntime()
     const [mode, setMode] = useState(TokenListMode.List)
     const compact = networkIdentifier === EnhanceableSite.Minds
-    const { pluginID: currentPluginID } = useNetworkContext(pluginID)
+    const { pluginID: currentPluginID } = useNetworkContext(networkPluginID)
     const { classes } = useStyles({ compact, isList: mode === TokenListMode.List })
     const isMdScreen = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
     const allNetworks = useNetworks(NetworkPluginID.PLUGIN_EVM, true)
+    const plugin = useActivatedPluginSiteAdaptor(pluginID, 'any')
+
+    const networks = useMemo(() => {
+        if (!plugin || !networkPluginID) return allNetworks
+        const supportedChainIds = plugin.enableRequirement.web3?.[networkPluginID]?.supportedChainIds
+        if (!supportedChainIds) return allNetworks
+        return allNetworks.filter((x) => supportedChainIds.includes(x.chainId))
+    }, [plugin, allNetworks])
 
     const rowSize = useRowSize()
 
@@ -124,7 +135,7 @@ export function SelectFungibleTokenDialog({
                         hideAllButton
                         chainId={chainId}
                         onChainChange={(chainId) => setChainId(chainId ?? ChainId.Mainnet)}
-                        networks={allNetworks}
+                        networks={networks}
                         pluginID={NetworkPluginID.PLUGIN_EVM}
                     />
                     <FungibleTokenList

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

@@ -1,13 +1,14 @@
-import { forwardRef, useState } from 'react'
-import { type NetworkPluginID, type SingletonModalRefCreator } from '@masknet/shared-base'
+import { type NetworkPluginID, type PluginID, type SingletonModalRefCreator } from '@masknet/shared-base'
 import { useSingletonModal } from '@masknet/shared-base-ui'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import type { FungibleToken } from '@masknet/web3-shared-base'
+import { forwardRef, useState } from 'react'
 import { SelectFungibleTokenDialog } from './SelectFungibleTokenDialog.js'
 
 export interface SelectFungibleTokenModalOpenProps {
     enableManage?: boolean
-    pluginID?: NetworkPluginID
+    networkPluginID?: NetworkPluginID
+    pluginID?: PluginID
     chainId?: Web3Helper.ChainIdAll
     keyword?: string
     whitelist?: string[]
@@ -25,7 +26,8 @@ export const SelectFungibleTokenModal = forwardRef<
     SingletonModalRefCreator<SelectFungibleTokenModalOpenProps, SelectFungibleTokenModalCloseProps>
 >((props, ref) => {
     const [enableManage, setEnableManage] = useState<boolean>()
-    const [pluginID, setPluginID] = useState<NetworkPluginID>()
+    const [networkPluginID, setNetworkPluginID] = useState<NetworkPluginID>()
+    const [pluginID, setPluginID] = useState<PluginID>()
     const [chainId, setChainId] = useState<Web3Helper.ChainIdAll>()
     const [keyword, setKeyword] = useState<string>()
     const [whitelist, setWhitelist] = useState<string[]>()
@@ -39,6 +41,7 @@ export const SelectFungibleTokenModal = forwardRef<
     const [open, dispatch] = useSingletonModal(ref, {
         onOpen(props) {
             setEnableManage(props.enableManage)
+            setNetworkPluginID(props.networkPluginID)
             setPluginID(props.pluginID)
             setChainId(props.chainId)
             setKeyword(props.keyword)
@@ -57,6 +60,7 @@ export const SelectFungibleTokenModal = forwardRef<
         <SelectFungibleTokenDialog
             open
             enableManage={enableManage}
+            networkPluginID={networkPluginID}
             pluginID={pluginID}
             chainId={chainId}
             keyword={keyword}