fix: fixup maskbox for evm migration

packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx

@@ -9,6 +9,8 @@ import { Context } from '../hooks/useContext'
 import { ApplicationEntry } from '@masknet/shared'
 import { openWindow } from '@masknet/shared-base-ui'
 import { MaskBoxIcon } from '@masknet/icons'
+import { RootContext } from '../contexts'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
 const isMaskBox = (x: string) => x.startsWith('https://box-beta.mask.io') || x.startsWith('https://box.mask.io')
 
@@ -64,17 +66,19 @@ const sns: Plugin.SNSAdaptor.Definition = {
 export default sns
 
 function Renderer(props: React.PropsWithChildren<{ url: string }>) {
-    const [, chainId] = props.url.match(/chain=(\d+)/i) ?? []
+    const [, matchedChainId] = props.url.match(/chain=(\d+)/i) ?? []
     const [, boxId] = props.url.match(/box=(\d+)/i) ?? []
     const [, hashRoot] = props.url.match(/rootHash=([\dA-Za-z]+)/) ?? []
 
-    const shouldNotRender = !chainId || !boxId
+    const shouldNotRender = !matchedChainId || !boxId
     usePluginWrapper(!shouldNotRender)
     if (shouldNotRender) return null
 
     return (
-        <Context.Provider initialState={{ boxId, hashRoot }}>
-            <PreviewCard />
-        </Context.Provider>
+        <RootContext chainId={Number.parseInt(matchedChainId, 10) as ChainId.Mainnet}>
+            <Context.Provider initialState={{ boxId, hashRoot }}>
+                <PreviewCard />
+            </Context.Provider>
+        </RootContext>
     )
 }

packages/mask/src/plugins/MaskBox/contexts/RootContext.tsx

@@ -0,0 +1,11 @@
+import type { ChainId } from '@masknet/web3-shared-evm'
+import type { FC, PropsWithChildren } from 'react'
+import { TargetChainIdContext } from './TargetChainIdContext'
+
+interface Props {
+    chainId: ChainId
+}
+
+export const RootContext: FC<PropsWithChildren<Props>> = ({ children, chainId }) => {
+    return <TargetChainIdContext.Provider initialState={chainId}>{children}</TargetChainIdContext.Provider>
+}

packages/mask/src/plugins/MaskBox/contexts/TargetChainIdContext.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+import { createContainer } from 'unstated-next'
+import { ChainId } from '@masknet/web3-shared-evm'
+
+function useTargetChainId(chainId: ChainId = ChainId.Mainnet) {
+    const [targetChainId, setTargetChainId] = useState<ChainId>(chainId)
+    useEffect(() => {
+        setTargetChainId(chainId)
+    }, [chainId])
+
+    return {
+        targetChainId,
+        setTargetChainId,
+    }
+}
+
+export const TargetChainIdContext = createContainer(useTargetChainId)

packages/mask/src/plugins/MaskBox/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './RootContext'
+export * from './TargetChainIdContext'

packages/mask/src/plugins/MaskBox/hooks/useContext.ts

@@ -153,7 +153,9 @@ function useContext(initialState?: { boxId: string; hashRoot: string }) {
     // #endregion
 
     const boxState = useMemo(() => {
-        if (notInWhiteList) return BoxState.NOT_IN_WHITELIST
+        if (notInWhiteList) {
+            return BoxState.NOT_IN_WHITELIST
+        }
         if (insufficientHolderToken) return BoxState.INSUFFICIENT_HOLDER_TOKEN
         if (qualification?.error_msg) return BoxState.NOT_QUALIFIED
         if (errorMaskBoxInfo || errorMaskBoxStatus || errorBoxInfo || (rootHash ? errorProof : false))

packages/mask/src/plugins/MaskBox/hooks/useMaskBoxContract.ts

@@ -1,10 +1,12 @@
 import type { AbiItem } from 'web3-utils'
 import type { MaskBox } from '@masknet/web3-contracts/types/MaskBox'
 import MASK_BOX_ABI from '@masknet/web3-contracts/abis/MaskBox.json'
-import { ChainId, useMaskBoxConstants } from '@masknet/web3-shared-evm'
+import { useMaskBoxConstants } from '@masknet/web3-shared-evm'
 import { useContract } from '@masknet/plugin-infra/web3-evm'
+import { TargetChainIdContext } from '../contexts'
 
-export function useMaskBoxContract(chainId: ChainId) {
-    const { MASK_BOX_CONTRACT_ADDRESS } = useMaskBoxConstants()
+export function useMaskBoxContract() {
+    const { targetChainId: chainId } = TargetChainIdContext.useContainer()
+    const { MASK_BOX_CONTRACT_ADDRESS } = useMaskBoxConstants(chainId)
     return useContract<MaskBox>(chainId, MASK_BOX_CONTRACT_ADDRESS, MASK_BOX_ABI as AbiItem[])
 }

packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts

@@ -4,16 +4,15 @@ import type { CreationSuccess } from '@masknet/web3-contracts/types/MaskBox'
 import { useMaskBoxConstants } from '@masknet/web3-shared-evm'
 import { useMaskBoxContract } from './useMaskBoxContract'
 import { NetworkPluginID } from '@masknet/web3-shared-base'
-import { useBlockNumber, useChainId } from '@masknet/plugin-infra/web3'
+import { useBlockNumber } from '@masknet/plugin-infra/web3'
 
 // dynamically set the block range window size
 const FRAGMENT_SIZE = 3000
 const MAX_PAGE_SIZE = 10
 
 export function useMaskBoxCreationSuccessEvent(creatorAddress: string, tokenAddress: string, boxId: string) {
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { value: blockNumber = 0 } = useBlockNumber(NetworkPluginID.PLUGIN_EVM)
-    const maskBoxContract = useMaskBoxContract(chainId)
+    const maskBoxContract = useMaskBoxContract()
     const { MASK_BOX_CONTRACT_FROM_BLOCK = Math.max(0, blockNumber - FRAGMENT_SIZE) } = useMaskBoxConstants()
 
     return useAsyncRetry(async () => {

packages/mask/src/plugins/MaskBox/hooks/useMaskBoxInfo.ts

@@ -1,13 +1,11 @@
-import { useChainId } from '@masknet/plugin-infra/web3'
-import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useAsyncRetry } from 'react-use'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useMaskBoxInfo(id: string | number) {
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
-    const maskBoxContract = useMaskBoxContract(chainId)
+    const maskBoxContract = useMaskBoxContract()
     return useAsyncRetry(async () => {
         if (!maskBoxContract) return null
-        return maskBoxContract.methods.getBoxInfo(id).call()
+        const info = await maskBoxContract.methods.getBoxInfo(id).call()
+        return info
     }, [id, maskBoxContract])
 }

packages/mask/src/plugins/MaskBox/hooks/useMaskBoxPurchasedTokens.ts

@@ -1,12 +1,9 @@
 import { useAsyncRetry } from 'react-use'
-import { useChainId } from '@masknet/plugin-infra/web3'
 import { EMPTY_LIST } from '@masknet/shared-base'
-import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useMaskBoxPurchasedTokens(id: string | number, customer: string) {
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
-    const maskBoxContract = useMaskBoxContract(chainId)
+    const maskBoxContract = useMaskBoxContract()
     return useAsyncRetry(async () => {
         if (!maskBoxContract) return EMPTY_LIST
         return maskBoxContract.methods.getPurchasedNft(id, customer).call()

packages/mask/src/plugins/MaskBox/hooks/useMaskBoxStatus.ts

@@ -1,11 +1,8 @@
-import { useChainId } from '@masknet/plugin-infra/web3'
-import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useAsyncRetry } from 'react-use'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useMaskBoxStatus(id: string | number) {
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
-    const maskBoxContract = useMaskBoxContract(chainId)
+    const maskBoxContract = useMaskBoxContract()
     return useAsyncRetry(async () => {
         if (!maskBoxContract) return null
         return maskBoxContract.methods.getBoxStatus(id).call()

packages/mask/src/plugins/MaskBox/hooks/useMaskBoxTokensForSale.ts

@@ -1,11 +1,8 @@
 import { useAsyncRetry } from 'react-use'
-import { useChainId } from '@masknet/plugin-infra/web3'
-import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useMaskBoxTokensForSale(id: string | number) {
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
-    const maskBoxContract = useMaskBoxContract(chainId)
+    const maskBoxContract = useMaskBoxContract()
     return useAsyncRetry(async () => {
         if (!maskBoxContract) return []
         return maskBoxContract.methods.getNftListForSale(id, 0, 100).call()

packages/mask/src/plugins/MaskBox/hooks/useOpenBoxGasLimit.ts

@@ -1,12 +1,9 @@
 import { useMemo } from 'react'
 import type { PayableTx } from '@masknet/web3-contracts/types/types'
 import { useMaskBoxContract } from './useMaskBoxContract'
-import { NetworkPluginID } from '@masknet/web3-shared-base'
-import { useChainId } from '@masknet/plugin-infra/web3'
 
 export function useOpenBoxGasLimit(parameters: [string, string, string, string], config: PayableTx) {
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
-    const maskBoxContract = useMaskBoxContract(chainId)
+    const maskBoxContract = useMaskBoxContract()
 
     return useMemo(() => {
         if (!maskBoxContract) return '0'

packages/mask/src/plugins/MaskBox/hooks/useOpenBoxTransaction.ts

@@ -1,8 +1,8 @@
-import { useMemo } from 'react'
+import { useAccount } from '@masknet/plugin-infra/web3'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
 import { FungibleToken, multipliedBy, NetworkPluginID } from '@masknet/web3-shared-base'
-import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { useMemo } from 'react'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useOpenBoxTransaction(
@@ -15,8 +15,7 @@ export function useOpenBoxTransaction(
     overrides?: NonPayableTx | null,
 ) {
     const account = useAccount(NetworkPluginID.PLUGIN_EVM)
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
-    const maskBoxContract = useMaskBoxContract(chainId)
+    const maskBoxContract = useMaskBoxContract()
     return useMemo(() => {
         if (!boxId || amount <= 0 || !maskBoxContract) return
         return {

packages/plugin-infra/src/web3/useWeb3.ts

@@ -22,7 +22,7 @@ export function useWeb3<T extends NetworkPluginID>(pluginID?: T, options?: Web3H
             providerType,
             ...options,
         } as Web3Helper.Web3ConnectionOptions<T>)
-    }, [account, chainId, providerType, Connection, JSON.stringify(options)])
+    }, [account, chainId, providerType, JSON.stringify(options)])
 
     return web3
 }