From 2ce62f58546a4b506d45cc8492c0ca42cb76313c Mon Sep 17 00:00:00 2001
From: guanbinrui <guanbinrui@dimension.im>
Date: Sun, 25 Jul 2021 14:03:44 +0800
Subject: [PATCH] chore: add isValidChainId

---
 .../src/plugins/PoolTogether/SNSAdaptor/index.tsx  |  8 +++++++-
 .../maskbook/src/web3/UI/EthereumChainBoundary.tsx | 14 ++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/maskbook/src/plugins/PoolTogether/SNSAdaptor/index.tsx b/packages/maskbook/src/plugins/PoolTogether/SNSAdaptor/index.tsx
index 98d581d4ba8c..7cfdb8bfc607 100644
--- a/packages/maskbook/src/plugins/PoolTogether/SNSAdaptor/index.tsx
+++ b/packages/maskbook/src/plugins/PoolTogether/SNSAdaptor/index.tsx
@@ -1,12 +1,14 @@
 import { Suspense, useMemo } from 'react'
 import { Plugin, usePostInfoDetails } from '@masknet/plugin-infra'
 import { extractTextFromTypedMessage, parseURL } from '@masknet/shared'
+import { ChainId } from '@masknet/web3-shared'
 import { SnackbarContent } from '@material-ui/core'
 import { base } from '../base'
 import MaskbookPluginWrapper from '../../MaskbookPluginWrapper'
 import { DepositDialog } from '../UI/DepositDialog'
 import { URL_PATTERN } from '../constants'
 import { PoolTogetherView } from '../UI/PoolTogetherView'
+import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 
 const isPoolTogetherUrl = (url: string) => URL_PATTERN.test(url)
 
@@ -44,7 +46,11 @@ function Renderer(props: React.PropsWithChildren<{ url: string }>) {
     return (
         <MaskbookPluginWrapper pluginName="PoolTogether">
             <Suspense fallback={<SnackbarContent message="Mask is loading this plugin..." />}>
-                <PoolTogetherView />
+                <EthereumChainBoundary
+                    chainId={ChainId.Mainnet}
+                    isValidChainId={(chainId) => [ChainId.Mainnet, ChainId.Matic].includes(chainId)}>
+                    <PoolTogetherView />
+                </EthereumChainBoundary>
             </Suspense>
         </MaskbookPluginWrapper>
     )
diff --git a/packages/maskbook/src/web3/UI/EthereumChainBoundary.tsx b/packages/maskbook/src/web3/UI/EthereumChainBoundary.tsx
index 51845a8e8449..5fd0a1d5799f 100644
--- a/packages/maskbook/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/maskbook/src/web3/UI/EthereumChainBoundary.tsx
@@ -21,6 +21,7 @@ import { WalletRPC } from '../../plugins/Wallet/messages'
 export interface EthereumChainBoundaryProps {
     chainId: ChainId
     children?: React.ReactNode
+    isValidChainId?: (actualChainId: ChainId, expectedChainId: ChainId) => boolean
 }
 
 export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
@@ -31,8 +32,8 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
 
     const expectedChainId = props.chainId
     const expectedNetwork = getChainName(expectedChainId)
-    const acutalChainId = chainId
-    const actualNetwork = getChainName(acutalChainId)
+    const actualChainId = chainId
+    const actualNetwork = getChainName(actualChainId)
 
     // if false then it will not guide the user to switch the network
     const isAllowed = isChainIdValid(expectedChainId) && !!account
@@ -62,8 +63,13 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
         else await Services.Ethereum.addEthereumChain(chainDetailedCAIP, account)
     }, [account, isAllowed, providerType, expectedChainId])
 
-    // matched
-    if (acutalChainId === expectedChainId) return <>{props.children}</>
+    // is the actual chain id matched with the expected one?
+    const isMatched = actualChainId === expectedChainId
+
+    // is the actual chain id a valid one even if it does not match with the expected one?
+    const isValid = props?.isValidChainId?.(actualChainId, expectedChainId) ?? false
+
+    if (isMatched || isValid) return <>{props.children}</>
 
     if (!isAllowed)
         return (