fix: metamask (#2491)

* fix: metamask * fix: chainId is mismatched
KyberNetwork · Apr 17, 2024 · ea0a5aa · ea0a5aa
1 parent acc9384
commit ea0a5aa
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/patches/@web3-react+metamask+8.2.1.patch b/patches/@web3-react+metamask+8.2.1.patch
@@ -0,0 +1,20 @@
+diff --git a/node_modules/@web3-react/metamask/dist/index.js b/node_modules/@web3-react/metamask/dist/index.js
+index c8476dd..a613ed1 100644
+--- a/node_modules/@web3-react/metamask/dist/index.js
++++ b/node_modules/@web3-react/metamask/dist/index.js
+@@ -64,7 +64,14 @@ class MetaMask extends types_1.Connector {
+                         this.provider = (_b = this.provider.providers.find((p) => p.isMetaMask)) !== null && _b !== void 0 ? _b : this.provider.providers[0];
+                     }
+                     this.provider.on('connect', ({ chainId }) => {
+-                        this.actions.update({ chainId: parseChainId(chainId) });
++                        this.provider
++                            .request({ method: 'eth_chainId' })
++                            .then(chainId => {
++                                this.actions.update({ chainId: parseChainId(chainId) })
++                            })
++                            .catch(() => {
++                                this.actions.update({ chainId: parseChainId(chainId) })
++                            })
+                     });
+                     this.provider.on('disconnect', (error) => {
+                         var _a;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -50,7 +50,7 @@ type Web3React = {
   active: boolean
 }
 
-const wrapProvider = (provider: Web3Provider, account: string): Web3Provider =>
+const wrapProvider = (provider: Web3Provider, account: string, wrongChain = false): Web3Provider =>
   new Proxy(provider, {
     get(target, prop) {
       if (prop === 'send') {
@@ -60,6 +60,8 @@ const wrapProvider = (provider: Web3Provider, account: string): Web3Provider =>
             // @ts-ignore
             return target[prop](...params)
           }
+          if (wrongChain)
+            throw new Error('Chain is mismatched. Please make sure your wallet is switched to expected chain')
 
           const res = await store.dispatch(blackjackApi.endpoints.checkBlackjack.initiate(account))
           if (res?.data?.blacklisted) throw new Error('There was an error with your transaction.')
@@ -74,12 +76,15 @@ const wrapProvider = (provider: Web3Provider, account: string): Web3Provider =>
   })
 const cacheProvider = new WeakMap<Web3Provider, Web3Provider>()
 const useWrappedProvider = () => {
-  const { provider, account } = useWeb3ReactCore<Web3Provider>()
+  const kyberChainId = useSelector<AppState, ChainId>(state => state.user.chainId) || ChainId.MAINNET
+  const { provider, account, chainId } = useWeb3ReactCore<Web3Provider>()
 
   if (!provider) return undefined
   let wrappedProvider = cacheProvider.get(provider)
-  if (!wrappedProvider) {
-    wrappedProvider = account ? wrapProvider(provider, account) : provider
+  if (chainId !== kyberChainId) {
+    wrappedProvider = account ? wrapProvider(provider, account, true) : provider
+  } else if (!wrappedProvider) {
+    wrappedProvider = account ? wrapProvider(provider, account, false) : provider
     cacheProvider.set(provider, wrappedProvider)
   }
   return wrappedProvider