feat: mf-5475 add scroll chain (#10971)

packages/mask/src/extension/popups/components/TokenPicker/TokenItem.tsx

@@ -145,6 +145,7 @@ export const TokenItem = memo(function TokenItem({
                 <Box position="relative">
                     <TokenIcon
                         className={classes.tokenIcon}
+                        pluginID={NetworkPluginID.PLUGIN_EVM}
                         chainId={asset.chainId}
                         address={asset.address}
                         name={asset.name}

packages/mask/src/extension/popups/components/UnlockERC20Token/index.tsx

@@ -125,6 +125,8 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
     const { data: token } = useFungibleToken(
         NetworkPluginID.PLUGIN_EVM,
         transaction.formattedTransaction?.tokenInAddress,
+        undefined,
+        { chainId },
     )
 
     const { data: balance = '0' } = useFungibleTokenBalance(
@@ -244,7 +246,7 @@ export const UnlockERC20Token = memo<UnlockERC20TokenProps>(function UnlockERC20
                 ) : null}
                 <Typography className={classes.name}>{t('popups_wallet_unlock_erc20_requested_by')}</Typography>
                 {transaction.formattedTransaction.popup?.spender ? (
-                    <Typography className={classes.spender}>
+                    <Typography className={classes.spender} component="div">
                         {t('contract')}:
                         <Typography className={classes.spenderAddress}>
                             {transaction.formattedTransaction.popup?.spender}{' '}

packages/plugins/Approval/src/SiteAdaptor/ApprovalDialog.tsx

@@ -5,65 +5,64 @@ import { TabContext } from '@mui/lab'
 import { PluginWalletStatusBar, InjectedDialog, NetworkTab } from '@masknet/shared'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { type ChainId } from '@masknet/web3-shared-evm'
-import { NetworkPluginID, PluginID } from '@masknet/shared-base'
+import { EMPTY_LIST, NetworkPluginID, PluginID } from '@masknet/shared-base'
 import { useActivatedPlugin } from '@masknet/plugin-infra/dom'
 import { useI18N } from '../locales/index.js'
 import { ApprovalTokenContent } from './ApprovalTokenContent.js'
 import { ApprovalNFTContent } from './ApprovalNFTContent.js'
+import { useMemo } from 'react'
 
-const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIcon?: string } | void>()(
-    (theme, props) => ({
-        dialogRoot: {
-            width: 600,
-            height: 620,
-            overflowX: 'hidden',
+const useStyles = makeStyles()((theme, props) => ({
+    dialogRoot: {
+        width: 600,
+        height: 620,
+        overflowX: 'hidden',
+    },
+    dialogContent: {
+        width: 600,
+        background: theme.palette.maskColor.bottom,
+        padding: 0,
+        margin: 'auto',
+        overflowX: 'hidden',
+    },
+    contentWrapper: {
+        width: 602,
+        padding: 0,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        height: '100%',
+        '::-webkit-scrollbar': {
+            backgroundColor: 'transparent',
+            width: 18,
         },
-        dialogContent: {
-            width: 600,
-            background: theme.palette.maskColor.bottom,
-            padding: 0,
-            margin: 'auto',
-            overflowX: 'hidden',
+        '::-webkit-scrollbar-thumb': {
+            borderRadius: '20px',
+            width: 5,
+            border: '7px solid rgba(0, 0, 0, 0)',
+            backgroundColor: theme.palette.maskColor.secondaryLine,
+            backgroundClip: 'padding-box',
         },
-        contentWrapper: {
-            width: 602,
-            padding: 0,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            height: '100%',
-            '::-webkit-scrollbar': {
-                backgroundColor: 'transparent',
-                width: 18,
-            },
-            '::-webkit-scrollbar-thumb': {
-                borderRadius: '20px',
-                width: 5,
-                border: '7px solid rgba(0, 0, 0, 0)',
-                backgroundColor: theme.palette.maskColor.secondaryLine,
-                backgroundClip: 'padding-box',
-            },
+    },
+    dialogTitle: {
+        '& > p': {
+            overflow: 'visible',
         },
-        dialogTitle: {
-            '& > p': {
-                overflow: 'visible',
-            },
-        },
-        abstractTabWrapper: {
-            width: '100%',
-            paddingBottom: theme.spacing(2),
-        },
-        approvalWrapper: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            height: '100%',
-        },
-        footer: {
-            position: 'sticky',
-            bottom: 0,
-        },
-    }),
-)
+    },
+    abstractTabWrapper: {
+        width: '100%',
+        paddingBottom: theme.spacing(2),
+    },
+    approvalWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+    },
+    footer: {
+        position: 'sticky',
+        bottom: 0,
+    },
+}))
 
 export interface ApprovalDialogProps {
     open: boolean
@@ -111,9 +110,11 @@ function ApprovalWrapper(props: ApprovalWrapperProps) {
 
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
     const approvalDefinition = useActivatedPlugin(PluginID.Approval, 'any')
-    const chainIdList = compact<ChainId>(
-        approvalDefinition?.enableRequirement.web3?.[NetworkPluginID.PLUGIN_EVM]?.supportedChainIds ?? [],
-    )
+    const chainIdList = useMemo(() => {
+        return compact<ChainId>(
+            approvalDefinition?.enableRequirement.web3?.[NetworkPluginID.PLUGIN_EVM]?.supportedChainIds ?? EMPTY_LIST,
+        )
+    }, [approvalDefinition])
     const { classes } = useStyles()
 
     return (

packages/plugins/Approval/src/base.ts

@@ -32,6 +32,7 @@ export const base: Plugin.Shared.Definition = {
                     ChainId.Avalanche,
                     ChainId.Aurora,
                     ChainId.Optimism,
+                    ChainId.Scroll,
                 ],
             },
             [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },

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

@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useState } from 'react'
-import { compact } from 'lodash-es'
 import Web3Utils from 'web3-utils'
 import { DialogContent, Tab, useTheme } from '@mui/material'
 import { TabContext, TabPanel } from '@mui/lab'
@@ -83,12 +82,10 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     const theme = useTheme()
     const mode = useSiteThemeMode(theme)
     const { classes } = useStyles({ currentTab, showHistory, isDim: mode === 'dim' })
-    const chainIdList = useMemo(() => {
-        return compact<ChainId>(
-            currentTab === tabs.tokens
-                ? approvalDefinition?.enableRequirement.web3?.[NetworkPluginID.PLUGIN_EVM]?.supportedChainIds ?? []
-                : [ChainId.Mainnet, ChainId.BSC, ChainId.Matic],
-        )
+    const chainIdList: ChainId[] = useMemo(() => {
+        return currentTab === tabs.tokens
+            ? approvalDefinition?.enableRequirement.web3?.[NetworkPluginID.PLUGIN_EVM]?.supportedChainIds ?? []
+            : [ChainId.Mainnet, ChainId.BSC, ChainId.Matic]
     }, [currentTab === tabs.tokens, approvalDefinition?.enableRequirement.web3])
     const chainId = chainIdList.includes(_chainId) ? _chainId : ChainId.Mainnet
 

packages/plugins/RedPacket/src/base.ts

@@ -34,6 +34,7 @@ export const base: Plugin.Shared.Definition = {
                     ChainId.Aurora,
                     ChainId.Conflux,
                     ChainId.Astar,
+                    ChainId.Scroll,
                 ],
             },
             [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },

packages/plugins/Tips/src/base.ts

@@ -33,6 +33,7 @@ export const base: Plugin.Shared.Definition = {
                     ChainId.Fantom,
                     ChainId.Conflux,
                     ChainId.Astar,
+                    ChainId.Scroll,
                     ChainId.Optimism,
                 ],
             },

packages/plugins/Trader/src/helpers/getEVMAvailableTraderProviders.ts

@@ -55,6 +55,7 @@ export function getEVMAvailableTraderProviders(networkType?: NetworkType) {
             return [TradeProvider.DODO, TradeProvider.WANNASWAP, TradeProvider.TRISOLARIS]
         case NetworkType.Astar:
             return [TradeProvider.ARTHSWAP, TradeProvider.VERSA, TradeProvider.ASTAREXCHANGE, TradeProvider.YUMISWAP]
+        case NetworkType.Scroll:
         case NetworkType.Boba:
         case NetworkType.Fuse:
         case NetworkType.Metis:

packages/plugins/Trader/src/providers/ZeroX.ts

@@ -47,6 +47,7 @@ export function getNativeTokenLabel(networkType: NetworkType) {
         case NetworkType.Optimism:
         case NetworkType.Conflux:
         case NetworkType.Astar:
+        case NetworkType.Scroll:
         case NetworkType.Moonbeam:
         case NetworkType.CustomNetwork:
             return ZRX_NATIVE_TOKEN_ADDRESS

packages/shared/src/UI/components/AssetsManagement/ChainRuntimeProvider.tsx

@@ -33,6 +33,7 @@ const ChainRuntimeContext = createContext<ChainRuntimeOptions>({
     networks: EMPTY_LIST,
 })
 
+//  https://docs.simplehash.com/reference/chains
 const SimpleHashSupportedChains: Record<NetworkPluginID, number[]> = {
     [NetworkPluginID.PLUGIN_EVM]: [
         ChainId.Mainnet,
@@ -43,6 +44,7 @@ const SimpleHashSupportedChains: Record<NetworkPluginID, number[]> = {
         ChainId.Optimism,
         ChainId.Avalanche,
         ChainId.xDai,
+        ChainId.Scroll,
     ],
     [NetworkPluginID.PLUGIN_SOLANA]: [SolanaChainId.Mainnet],
     [NetworkPluginID.PLUGIN_FLOW]: [FlowChainId.Mainnet],

packages/shared/src/UI/components/EthereumERC20TokenApprovedBoundary/index.tsx

@@ -2,7 +2,7 @@ import { unreachable } from '@masknet/kit'
 import { TokenIcon } from '@masknet/shared'
 import { ActionButton, type ActionButtonProps, makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import { ApproveStateType, useERC20TokenApproveCallback } from '@masknet/web3-hooks-evm'
-import { isSameAddress, type FungibleToken } from '@masknet/web3-shared-base'
+import { isSameAddress, type FungibleToken, isGte } from '@masknet/web3-shared-base'
 import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { HelpOutline } from '@mui/icons-material'
 import React, { useCallback } from 'react'
@@ -69,21 +69,22 @@ export function EthereumERC20TokenApprovedBoundary(props: EthereumERC20TokenAppr
         account,
     })
 
-    const approved = !!spenders?.find(
-        (x) => isSameAddress(x.tokenInfo.address, token?.address) && isSameAddress(x.address, spender),
+    const [{ type: approveStateType, allowance }, transactionState, approveCallback] = useERC20TokenApproveCallback(
+        token?.address ?? '',
+        amount,
+        spender ?? '',
+        () => {
+            callback?.()
+            refetch()
+        },
+        token?.chainId,
     )
+    console.log('allowance', allowance)
 
-    const [{ type: approveStateType, allowance }, transactionState, approveCallback, _resetApproveCallback] =
-        useERC20TokenApproveCallback(
-            token?.address ?? '',
-            amount,
-            spender ?? '',
-            () => {
-                callback?.()
-                refetch()
-            },
-            token?.chainId,
-        )
+    const approved =
+        spenders?.some(
+            (x) => isSameAddress(x.tokenInfo.address, token?.address) && isSameAddress(x.address, spender),
+        ) || isGte(allowance, amount)
 
     const loading =
         spendersLoading ||

packages/shared/src/UI/components/TokenIcon/index.tsx

@@ -1,4 +1,4 @@
-import type { NetworkPluginID } from '@masknet/shared-base'
+import { NetworkPluginID } from '@masknet/shared-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useChainContext, useFungibleToken, useWeb3Hub } from '@masknet/web3-hooks-base'
 import { TokenType } from '@masknet/web3-shared-base'
@@ -18,7 +18,7 @@ export interface TokenIconProps extends IconProps {
 
 export const TokenIcon = memo(function TokenIcon(props: TokenIconProps) {
     const {
-        pluginID,
+        pluginID = NetworkPluginID.PLUGIN_EVM,
         chainId: propChainId,
         address,
         logoURL,

packages/web3-constants/evm/ethereum.json

@@ -18,7 +18,8 @@
         "Celo": "0x8e28F1d64ceD52b9A09aB1AA3071Aa3c05802d1F",
         "Fantom": "0xc119574d5fb333f5ac018658d4d8b5035e16bf39",
         "Aurora": "0xC119574D5Fb333F5AC018658D4d8b5035E16bf39",
-        "Astar": "0xf5056B96ab242C566002852d0b98ce0BcDf1af51"
+        "Astar": "0xf5056B96ab242C566002852d0b98ce0BcDf1af51",
+        "Scroll": "0xbC7d98985966f56A66B0cB5F23d865676dc2ac84"
     },
     "MULTICALL_ADDRESS": {
         "Mainnet": "0x1F98415757620B543A52E61c46B32eB19261F984",
@@ -42,7 +43,8 @@
         "Fantom": "0x913975af2Bb8a6Be4100D7dc5e9765B77F6A5d6c",
         "Aurora": "0x6cc1b1058F9153358278C35E0b2D382f1585854B",
         "Conflux": "0x19f179d7e0d7d9f9d5386afff64271d98a91615b",
-        "Astar": "0x1410304B91a280ad083196B0B50e9d8df749d860"
+        "Astar": "0x1410304B91a280ad083196B0B50e9d8df749d860",
+        "Scroll": "0x20Ee232E34B87061fE3ba0DB738A3531A3e915BF"
     },
     "ENS_REGISTRAR_ADDRESS": {
         "Mainnet": "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e",

packages/web3-constants/evm/nft-red-packet.json

@@ -12,7 +12,8 @@
         "Aurora": "0x05ee315E407C21a594f807D61d6CC11306D1F149",
         "Aurora_Testnet": "0x97369fEE7db34E0BfE47861f2ec44b4378d13eB4",
         "Conflux": "0x5b966f3a32db9c180843bcb40267a66b73e4f022",
-        "Astar": "0xc3e62b2CC70439C32a381Bfc056aCEd1d7162cef"
+        "Astar": "0xc3e62b2CC70439C32a381Bfc056aCEd1d7162cef",
+        "Scroll": "0x727F8030964CCEC6B0E344399c8d8E2B4C837351"
     },
     "NFT_RED_PACKET_ADDRESS_BLOCK_HEIGHT": {
         "Mainnet": 13229711,
@@ -39,6 +40,7 @@
         "Aurora": 0,
         "Aurora_Testnet": 0,
         "Conflux": 0,
-        "Astar": 0
+        "Astar": 0,
+        "Scroll": 96705
     }
 }

packages/web3-constants/evm/red-packet.json

@@ -35,7 +35,8 @@
         "Aurora": "0x19f179D7e0D7d9F9d5386afFF64271D98A91615B",
         "Aurora_Testnet": "0xdB93cCd481012bB5D1E2c8d0aF7C5f2940c00fdC",
         "Conflux": "0x96c7d011cdfd467f551605f0f5fce279f86f4186",
-        "Astar": "0x2cF46Db820e279c5fBF778367D49d9C931D54524"
+        "Astar": "0x2cF46Db820e279c5fBF778367D49d9C931D54524",
+        "Scroll": "0x16f61cb37169523635B6761f3C946892fb3c18fB"
     },
     "HAPPY_RED_PACKET_ADDRESS_V4_BLOCK_HEIGHT": {
         "Mainnet": 12939427,
@@ -62,6 +63,7 @@
         "Aurora": 57552338,
         "Aurora_Testnet": 77918765,
         "Conflux": 37670572,
-        "Astar": 910985
+        "Astar": 910985,
+        "Scroll": 96705
     }
 }

packages/web3-constants/evm/rpc.json

@@ -69,7 +69,8 @@
         "Aurora": ["https://mainnet.aurora.dev"],
         "Aurora_Testnet": ["https://testnet.aurora.dev"],
         "Conflux": ["https://evm.confluxrpc.com"],
-        "Astar": ["https://astar.api.onfinality.io/public"]
+        "Astar": ["https://astar.api.onfinality.io/public"],
+        "Scroll": ["https://rpc.scroll.io"]
     },
     "RPC_URLS_OFFICIAL": {
         "Mainnet": ["https://mainnet.infura.io/v3/d65858b010d249419cf8687eca12b094"],
@@ -96,7 +97,8 @@
         "Aurora": ["https://mainnet.aurora.dev"],
         "Aurora_Testnet": ["https://testnet.aurora.dev/"],
         "Conflux": ["https://evm.confluxrpc.com"],
-        "Astar": ["https://rpc.astar.network:8545"]
+        "Astar": ["https://rpc.astar.network:8545"],
+        "Scroll": ["https://rpc.scroll.io"]
     },
     "RPC_WEIGHTS": {
         "Mainnet": [0, 1, 2, 3, 4],
@@ -123,6 +125,7 @@
         "Aurora": [0, 0, 0, 0, 0],
         "Aurora_Testnet": [0, 0, 0, 0, 0],
         "Conflux": [0, 0, 0, 0, 0],
-        "Astar": [0, 0, 0, 0, 0]
+        "Astar": [0, 0, 0, 0, 0],
+        "Scroll": [0, 0, 0, 0, 0]
     }
 }