From d2d3c9945463bd85deff0b97963e0f6c12f718bf Mon Sep 17 00:00:00 2001 From: Wukong Sun Date: Thu, 4 Jul 2024 11:44:47 +0800 Subject: [PATCH 1/2] fix: fw-1575 only list supported chains in token picker --- .../plugin-infra/src/manager/site-adaptor.ts | 8 +++-- .../modals/DonateModal/DonateDialog.tsx | 2 +- .../src/SiteAdaptor/RedPacketERC20Form.tsx | 5 +-- .../src/components/TokenSection/index.tsx | 2 +- .../SelectFungibleTokenDialog.tsx | 34 +++++++++++++------ .../modals/SelectFungibleTokenModal/index.tsx | 12 ++++--- 6 files changed, 41 insertions(+), 22 deletions(-) diff --git a/packages/plugin-infra/src/manager/site-adaptor.ts b/packages/plugin-infra/src/manager/site-adaptor.ts index c0289cdc524b..755ffa0ec7d3 100644 --- a/packages/plugin-infra/src/manager/site-adaptor.ts +++ b/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 diff --git a/packages/plugins/Gitcoin/src/SiteAdaptor/modals/DonateModal/DonateDialog.tsx b/packages/plugins/Gitcoin/src/SiteAdaptor/modals/DonateModal/DonateDialog.tsx index 86d3d53bf1b8..3f29dbb276a1 100644 --- a/packages/plugins/Gitcoin/src/SiteAdaptor/modals/DonateModal/DonateDialog.tsx +++ b/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, + runtime: NetworkPluginID.PLUGIN_EVM, chainId, whitelist: TOKEN_LIST, disableNativeToken: false, diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx index 3703cd9e393b..fc57bf2f8617 100644 --- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx +++ b/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, + runtime: NetworkPluginID.PLUGIN_EVM, + pluginID: PluginID.RedPacket, }) if (!picked) return if (chainId !== picked.chainId) { diff --git a/packages/plugins/Tips/src/components/TokenSection/index.tsx b/packages/plugins/Tips/src/components/TokenSection/index.tsx index 4fd4277062dd..97a192bd9f2a 100644 --- a/packages/plugins/Tips/src/components/TokenSection/index.tsx +++ b/packages/plugins/Tips/src/components/TokenSection/index.tsx @@ -26,7 +26,7 @@ export function TokenSection(props: HTMLProps) { const onSelectTokenChipClick = useCallback(async () => { const picked = await SelectFungibleTokenModal.openAndWaitForClose({ - pluginID, + runtime: pluginID, chainId, disableNativeToken: false, selectedTokens: token ? [token.address] : [], diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx index d07314e9c5e5..907bc81e351c 100644 --- a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx +++ b/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,9 @@ const useStyles = makeStyles()((theme, { compact, isList }) => ({ interface SelectFungibleTokenDialogProps { open: boolean enableManage?: boolean - pluginID?: T + /** NetworkPluginID, blockchain runtime */ + runtime?: T + pluginID?: PluginID chainId?: Web3Helper.Definition[T]['ChainId'] keyword?: string whitelist?: string[] @@ -73,6 +76,7 @@ interface SelectFungibleTokenDialogProps((theme) => theme.breakpoints.down('md')) const allNetworks = useNetworks(NetworkPluginID.PLUGIN_EVM, true) + const plugin = useActivatedPluginSiteAdaptor(pluginID, 'any') + + const networks = useMemo(() => { + if (!plugin || !runtime) return allNetworks + const supportedChainIds = plugin.enableRequirement.web3?.[runtime]?.supportedChainIds + if (!supportedChainIds) return allNetworks + return allNetworks.filter((x) => supportedChainIds.includes(x.chainId)) + }, [plugin, allNetworks]) const rowSize = useRowSize() @@ -124,7 +136,7 @@ export function SelectFungibleTokenDialog({ hideAllButton chainId={chainId} onChainChange={(chainId) => setChainId(chainId ?? ChainId.Mainnet)} - networks={allNetworks} + networks={networks} pluginID={NetworkPluginID.PLUGIN_EVM} /> >((props, ref) => { const [enableManage, setEnableManage] = useState() - const [pluginID, setPluginID] = useState() + const [runtime, setRuntime] = useState() + const [pluginID, setPluginID] = useState() const [chainId, setChainId] = useState() const [keyword, setKeyword] = useState() const [whitelist, setWhitelist] = useState() @@ -39,6 +41,7 @@ export const SelectFungibleTokenModal = forwardRef< const [open, dispatch] = useSingletonModal(ref, { onOpen(props) { setEnableManage(props.enableManage) + setRuntime(props.runtime) setPluginID(props.pluginID) setChainId(props.chainId) setKeyword(props.keyword) @@ -57,6 +60,7 @@ export const SelectFungibleTokenModal = forwardRef< Date: Thu, 4 Jul 2024 18:04:31 +0800 Subject: [PATCH 2/2] fix: follow up reviews --- .../SiteAdaptor/modals/DonateModal/DonateDialog.tsx | 2 +- .../RedPacket/src/SiteAdaptor/RedPacketDialog.tsx | 4 ++-- .../RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx | 2 +- .../Tips/src/components/TokenSection/index.tsx | 2 +- .../SelectFungibleTokenDialog.tsx | 11 +++++------ .../src/UI/modals/SelectFungibleTokenModal/index.tsx | 8 ++++---- 6 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/plugins/Gitcoin/src/SiteAdaptor/modals/DonateModal/DonateDialog.tsx b/packages/plugins/Gitcoin/src/SiteAdaptor/modals/DonateModal/DonateDialog.tsx index 3f29dbb276a1..a507a35c9169 100644 --- a/packages/plugins/Gitcoin/src/SiteAdaptor/modals/DonateModal/DonateDialog.tsx +++ b/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({ - runtime: NetworkPluginID.PLUGIN_EVM, + networkPluginID: NetworkPluginID.PLUGIN_EVM, chainId, whitelist: TOKEN_LIST, disableNativeToken: false, diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx index eec2732951fc..cbcf4bda89c9 100644 --- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx +++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx @@ -253,8 +253,8 @@ export default function RedPacketDialog(props: RedPacketDialogProps) { ) { return ( { if (!account) return setShowHistory((history) => !history) diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx index fc57bf2f8617..e7b800ae712b 100644 --- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx +++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketERC20Form.tsx @@ -125,7 +125,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) { disableNativeToken: false, selectedTokens: token ? [token.address] : [], chainId, - runtime: NetworkPluginID.PLUGIN_EVM, + networkPluginID: NetworkPluginID.PLUGIN_EVM, pluginID: PluginID.RedPacket, }) if (!picked) return diff --git a/packages/plugins/Tips/src/components/TokenSection/index.tsx b/packages/plugins/Tips/src/components/TokenSection/index.tsx index 97a192bd9f2a..1c29a8517497 100644 --- a/packages/plugins/Tips/src/components/TokenSection/index.tsx +++ b/packages/plugins/Tips/src/components/TokenSection/index.tsx @@ -26,7 +26,7 @@ export function TokenSection(props: HTMLProps) { const onSelectTokenChipClick = useCallback(async () => { const picked = await SelectFungibleTokenModal.openAndWaitForClose({ - runtime: pluginID, + networkPluginID: pluginID, chainId, disableNativeToken: false, selectedTokens: token ? [token.address] : [], diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx index 907bc81e351c..b04914b9c865 100644 --- a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx +++ b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx @@ -57,8 +57,7 @@ const useStyles = makeStyles()((theme, { compact, isList }) => ({ interface SelectFungibleTokenDialogProps { open: boolean enableManage?: boolean - /** NetworkPluginID, blockchain runtime */ - runtime?: T + networkPluginID?: T pluginID?: PluginID chainId?: Web3Helper.Definition[T]['ChainId'] keyword?: string @@ -76,7 +75,7 @@ interface SelectFungibleTokenDialogProps((theme) => theme.breakpoints.down('md')) const allNetworks = useNetworks(NetworkPluginID.PLUGIN_EVM, true) const plugin = useActivatedPluginSiteAdaptor(pluginID, 'any') const networks = useMemo(() => { - if (!plugin || !runtime) return allNetworks - const supportedChainIds = plugin.enableRequirement.web3?.[runtime]?.supportedChainIds + 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]) diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/index.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/index.tsx index 0c77bc2c51d6..df0c89e6849b 100644 --- a/packages/shared/src/UI/modals/SelectFungibleTokenModal/index.tsx +++ b/packages/shared/src/UI/modals/SelectFungibleTokenModal/index.tsx @@ -7,7 +7,7 @@ import { SelectFungibleTokenDialog } from './SelectFungibleTokenDialog.js' export interface SelectFungibleTokenModalOpenProps { enableManage?: boolean - runtime?: NetworkPluginID + networkPluginID?: NetworkPluginID pluginID?: PluginID chainId?: Web3Helper.ChainIdAll keyword?: string @@ -26,7 +26,7 @@ export const SelectFungibleTokenModal = forwardRef< SingletonModalRefCreator >((props, ref) => { const [enableManage, setEnableManage] = useState() - const [runtime, setRuntime] = useState() + const [networkPluginID, setNetworkPluginID] = useState() const [pluginID, setPluginID] = useState() const [chainId, setChainId] = useState() const [keyword, setKeyword] = useState() @@ -41,7 +41,7 @@ export const SelectFungibleTokenModal = forwardRef< const [open, dispatch] = useSingletonModal(ref, { onOpen(props) { setEnableManage(props.enableManage) - setRuntime(props.runtime) + setNetworkPluginID(props.networkPluginID) setPluginID(props.pluginID) setChainId(props.chainId) setKeyword(props.keyword) @@ -60,7 +60,7 @@ export const SelectFungibleTokenModal = forwardRef<