From 06225405cc5cd29947afed2c6af0ea81d52c54b8 Mon Sep 17 00:00:00 2001 From: unclebill Date: Tue, 31 May 2022 21:15:42 +0800 Subject: [PATCH] fix: fixup maskbox for evm migrate --- .../src/plugins/MaskBox/SNSAdaptor/index.tsx | 14 +++++++++----- .../plugins/MaskBox/contexts/RootContext.tsx | 11 +++++++++++ .../MaskBox/contexts/TargetChainIdContext.ts | 17 +++++++++++++++++ .../mask/src/plugins/MaskBox/contexts/index.ts | 2 ++ .../src/plugins/MaskBox/hooks/useContext.ts | 4 +++- .../plugins/MaskBox/hooks/useMaskBoxContract.ts | 8 +++++--- .../hooks/useMaskBoxCreationSuccessEvent.ts | 5 ++--- .../src/plugins/MaskBox/hooks/useMaskBoxInfo.ts | 8 +++----- .../MaskBox/hooks/useMaskBoxPurchasedTokens.ts | 5 +---- .../plugins/MaskBox/hooks/useMaskBoxStatus.ts | 5 +---- .../MaskBox/hooks/useMaskBoxTokensForSale.ts | 5 +---- .../plugins/MaskBox/hooks/useOpenBoxGasLimit.ts | 5 +---- .../MaskBox/hooks/useOpenBoxTransaction.ts | 7 +++---- packages/plugin-infra/src/web3/useWeb3.ts | 2 +- 14 files changed, 60 insertions(+), 38 deletions(-) create mode 100644 packages/mask/src/plugins/MaskBox/contexts/RootContext.tsx create mode 100644 packages/mask/src/plugins/MaskBox/contexts/TargetChainIdContext.ts create mode 100644 packages/mask/src/plugins/MaskBox/contexts/index.ts diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx index 759733af6ee5..93c0cbfcd409 100644 --- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx +++ b/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 ( - - - + + + + + ) } diff --git a/packages/mask/src/plugins/MaskBox/contexts/RootContext.tsx b/packages/mask/src/plugins/MaskBox/contexts/RootContext.tsx new file mode 100644 index 000000000000..915328e7a278 --- /dev/null +++ b/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> = ({ children, chainId }) => { + return {children} +} diff --git a/packages/mask/src/plugins/MaskBox/contexts/TargetChainIdContext.ts b/packages/mask/src/plugins/MaskBox/contexts/TargetChainIdContext.ts new file mode 100644 index 000000000000..11b32b1545c6 --- /dev/null +++ b/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) + useEffect(() => { + setTargetChainId(chainId) + }, [chainId]) + + return { + targetChainId, + setTargetChainId, + } +} + +export const TargetChainIdContext = createContainer(useTargetChainId) diff --git a/packages/mask/src/plugins/MaskBox/contexts/index.ts b/packages/mask/src/plugins/MaskBox/contexts/index.ts new file mode 100644 index 000000000000..4fb86eb81e75 --- /dev/null +++ b/packages/mask/src/plugins/MaskBox/contexts/index.ts @@ -0,0 +1,2 @@ +export * from './RootContext' +export * from './TargetChainIdContext' diff --git a/packages/mask/src/plugins/MaskBox/hooks/useContext.ts b/packages/mask/src/plugins/MaskBox/hooks/useContext.ts index 69ba6b3d6b26..1fa5439a7a12 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useContext.ts +++ b/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)) diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxContract.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxContract.ts index 9b5895fd5318..59104cf6991c 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxContract.ts +++ b/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(chainId, MASK_BOX_CONTRACT_ADDRESS, MASK_BOX_ABI as AbiItem[]) } diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts index bc41bb2c0f19..f6bcb97e3d71 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts +++ b/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 () => { diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxInfo.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxInfo.ts index 877a8b8b6104..9d7045bc9ab0 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxInfo.ts +++ b/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]) } diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxPurchasedTokens.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxPurchasedTokens.ts index b244ee68d3ec..da3b3b9d2ecc 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxPurchasedTokens.ts +++ b/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() diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxStatus.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxStatus.ts index 99f1d251bcd5..cf52338dfeb9 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxStatus.ts +++ b/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() diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxTokensForSale.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxTokensForSale.ts index d47020548ba3..34917c0058b9 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxTokensForSale.ts +++ b/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() diff --git a/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxGasLimit.ts b/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxGasLimit.ts index 8f639d9d3b1f..3028608f0f2c 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxGasLimit.ts +++ b/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' diff --git a/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxTransaction.ts b/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxTransaction.ts index 963ce746f7c1..32e2626f9510 100644 --- a/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxTransaction.ts +++ b/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 { diff --git a/packages/plugin-infra/src/web3/useWeb3.ts b/packages/plugin-infra/src/web3/useWeb3.ts index cf46f9ab59cc..cb004d1f9144 100644 --- a/packages/plugin-infra/src/web3/useWeb3.ts +++ b/packages/plugin-infra/src/web3/useWeb3.ts @@ -22,7 +22,7 @@ export function useWeb3(pluginID?: T, options?: Web3H providerType, ...options, } as Web3Helper.Web3ConnectionOptions) - }, [account, chainId, providerType, Connection, JSON.stringify(options)]) + }, [account, chainId, providerType, JSON.stringify(options)]) return web3 }