Add flag for WalletConnect

packages/boba/gateway/.env.example

@@ -16,3 +16,9 @@ REACT_APP_ZENDESK_KEY= ## KEY for the zendesk widget.
 ################
 # to disable the veDoa set below flat to 1.
 REACT_APP_DISABLE_VE_DAO=1
+
+#####################
+##### WebWallet #####
+#####################
+# to disable the walletConnect set below flat to 1.
+REACT_APP_DISABLE_WALLETCONNECT=1

packages/boba/gateway/src/actions/setupAction.js

@@ -82,9 +82,9 @@ export function setWalletConnected( state ) {
   }
 }
 
-export function setChainIdChanged() {
+export function setChainIdChanged(state) {
   return function (dispatch) {
-    return dispatch({ type: 'SETUP/CHAINIDCHANGED/SET' })
+    return dispatch({ type: 'SETUP/CHAINIDCHANGED/SET', payload: state })
   }
 }
 

packages/boba/gateway/src/components/mainMenu/layerSwitcher/LayerSwitcher.js

@@ -22,7 +22,7 @@ import {
   IconButton,
 } from '@mui/material'
 import { useTheme } from '@mui/styles'
-import { setConnect, setConnectBOBA, setConnectETH, setLayer } from 'actions/setupAction.js'
+import { setConnect, setWalletConnected, setConnectBOBA, setConnectETH, setLayer } from 'actions/setupAction.js'
 import BobaIcon from 'components/icons/BobaIcon.js'
 import EthereumIcon from 'components/icons/EthereumIcon.js'
 import React, { useCallback, useEffect } from 'react'
@@ -57,7 +57,7 @@ import { fetchTransactions, fetchBalances } from 'actions/networkAction'
 import { closeModal, openModal } from 'actions/uiAction'
 import Button from 'components/button/Button.js'
 import { L1_ICONS, L2_ICONS } from 'util/network/network.util.js'
-import { LAYER } from 'util/constant.js'
+import { LAYER, DISABLE_WALLETCONNECT } from 'util/constant.js'
 
 function LayerSwitcher({ visisble = true, isButton = false }) {
   const dispatch = useDispatch()
@@ -94,6 +94,7 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
       const initialized = await networkService.initializeAccount({
         networkGateway: network,
         networkType,
+        chainIdChanged,
       })
       if (initialized === 'nometamask') {
         dispatch(openModal('noMetaMaskModal'));
@@ -121,28 +122,40 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
   }, [dispatch, accountEnabled, network, networkType, baseEnabled, chainIdChanged])
 
   const doConnectToLayer = useCallback((layer) => {
+    function resetConnectChain() {
+      dispatch(setConnect(false))
+      dispatch(setConnectETH(false))
+    }
+
     async function doConnect() {
       try {
         if (networkService.walletService.provider) {
-          const response = await networkService.switchChain(layer)
-          if (response) {
+          if (await networkService.switchChain(layer)) {
             if (layer === 'L1') {
               dispatch(setConnectBOBA(false))
             } else {
               dispatch(setConnectETH(false))
             }
             dispatchBootAccount()
           } else {
-            dispatch(setConnectETH(false))
-            dispatch(setConnectBOBA(false))
+            resetConnectChain()
           }
         } else {
-          dispatch(openModal('walletSelectorModal'))
+          // bypass walletSelectorModal
+          if (DISABLE_WALLETCONNECT) {
+            if (await networkService.walletService.connectWallet('metamask')) {
+              dispatch(setWalletConnected(true))
+            } else {
+              resetConnectChain()
+            }
+          } else {
+            resetConnectChain()
+            dispatch(openModal('walletSelectorModal'))
+          }
         }
       } catch (err) {
         console.log('ERROR', err)
-        dispatch(setConnectETH(false))
-        dispatch(setConnectBOBA(false))
+        resetConnectChain()
       }
     }
     doConnect();
@@ -177,9 +190,14 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
 
   useEffect(() => {
     if (connectRequest && !networkService.walletService.provider) {
-      dispatch(openModal('walletSelectorModal'))
+      // bypass walletSelectorModal
+      if (DISABLE_WALLETCONNECT) {
+        dispatchBootAccount()
+      } else {
+        dispatch(openModal('walletSelectorModal'))
+      }
     }
-  }, [dispatch, connectRequest])
+  }, [dispatch, connectRequest, dispatchBootAccount])
 
   if (!visisble) {
     return null

packages/boba/gateway/src/containers/modals/walletSelector/WalletSelectorModal.js

@@ -20,14 +20,21 @@ function WalletSelectorModal ({ open }) {
   const dispatch = useDispatch()
 
   const connectToWallet = async (type) => {
+    function resetConnectChain() {
+      dispatch(setConnectETH(false))
+      dispatch(setConnectBOBA(false))
+    }
+
     try {
-      await networkService.walletService.connectWallet(type)
-      dispatch(closeModal('walletSelectorModal'))
-      dispatch(setWalletConnected(true))
+      if (await networkService.walletService.connectWallet(type)) {
+        dispatch(closeModal('walletSelectorModal'))
+        dispatch(setWalletConnected(true))
+      } else {
+        resetConnectChain()
+      }
     } catch (error) {
       console.log(`Error connecting wallet: ${error}`)
-      dispatch(setConnectETH(false))
-      dispatch(setConnectBOBA(false))
+      resetConnectChain()
     }
   }
 

packages/boba/gateway/src/reducers/setupReducer.js

@@ -105,7 +105,7 @@ function setupReducer(state = initialState, action) {
     case 'SETUP/CHAINIDCHANGED/SET':
       return {
         ...state,
-        chainIdChanged: true
+        chainIdChanged: action.payload
       }
     case 'SETUP/CHAINIDCHANGED/RESET':
       return {

packages/boba/gateway/src/services/networkService.js

@@ -149,10 +149,6 @@ class NetworkService {
 
     this.tokenAddresses = null
 
-    // chain ID
-    this.chainID = null
-    this.networkName = null
-
     // gas
     this.L1GasLimit = 9999999
     // setting of this value not important since it's not connected to anything in the contracts
@@ -645,21 +641,24 @@ class NetworkService {
     }
   }
 
-  async initializeAccount({ networkGateway: network, networkType }) {
+  async initializeAccount({ networkGateway: network, networkType, chainIdChanged }) {
 
     try {
 
       if (!window.ethereum) {
         return 'nometamask'
       }
 
+      this.walletService.bindProviderListeners()
+
       // connect to the wallet
       this.provider = this.walletService.provider
       this.account = await this.provider.getSigner().getAddress()
 
-      const networkMM = await this.provider.getNetwork()
-      this.chainID = networkMM.chainId
-      this.networkName = networkMM.name
+      let chainId = chainIdChanged
+      if (!chainId) {
+        chainId = await this.provider.getNetwork().then(network => network.chainId)
+      }
       this.networkGateway = network
       this.networkType = networkType
 
@@ -668,18 +667,15 @@ class NetworkService {
         network,
         networkType
       })
-
       const L1ChainId = networkDetail['L1']['chainId']
       const L2ChainId = networkDetail['L2']['chainId']
 
-      this.walletService.bindProviderListeners()
-
       // there are numerous possible chains we could be on also, either L1 or L2
       // at this point, we only know whether we want to be on which network etc
 
-      if (!!NETWORK[ network ] && networkMM.chainId === L2ChainId) {
+      if (!!NETWORK[ network ] && chainId === L2ChainId) {
         this.L1orL2 = 'L2';
-      } else if(!!NETWORK[ network ] && networkMM.chainId === L1ChainId) {
+      } else if(!!NETWORK[ network ] && chainId === L1ChainId) {
         this.L1orL2 = 'L1';
       } else {
         return 'wrongnetwork'

packages/boba/gateway/src/services/wallet.service.js

@@ -14,7 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. */
 
-import { providers } from "ethers"
+import { providers, utils } from "ethers"
 import WalletConnectProvider from "@walletconnect/web3-provider"
 import { rpcUrls } from 'util/network/network.util'
 import store from 'store'
@@ -31,11 +31,13 @@ class WalletService {
   async connectMetaMask() {
     try {
       await window.ethereum.request({ method: 'eth_requestAccounts' })
-      this.provider = new providers.Web3Provider(window.ethereum)
+      this.provider = new providers.Web3Provider(window.ethereum, 'any')
       this.account = await this.provider.getSigner().getAddress()
       this.walletType = 'metamask'
+      return true
     } catch (e) {
       console.log(`Error connecting wallet: ${e}`)
+      return false
     }
   }
 
@@ -55,41 +57,47 @@ class WalletService {
     })
 
     window.ethereum.on('chainChanged', (chainId) => {
-      console.log(`MetaMask chain changed to ${chainId}`)
-      store.dispatch({ type: 'SETUP/CHAINIDCHANGED/SET' })
+      console.log(`MetaMask chain changed to ${Number(chainId)}`)
+      store.dispatch({ type: 'SETUP/CHAINIDCHANGED/SET', payload: Number(chainId) })
     })
   }
 
   async connectWalletConnect() {
-    this.walletConnectProvider = new WalletConnectProvider({
-      rpc: rpcUrls
-    })
-    await this.walletConnectProvider.enable()
-    this.provider = new providers.Web3Provider(this.walletConnectProvider)
-    this.account = await this.provider.getSigner().getAddress()
-    this.walletType = 'walletconnect'
+    try {
+      this.walletConnectProvider = new WalletConnectProvider({
+        rpc: rpcUrls
+      })
+      await this.walletConnectProvider.enable()
+      this.provider = new providers.Web3Provider(this.walletConnectProvider, 'any')
+      this.account = await this.provider.getSigner().getAddress()
+      this.walletType = 'walletconnect'
+      return true
+    } catch (e) {
+      console.log(`Error connecting WalletConnect: ${e}`)
+      return false
+    }
   }
 
   async disconnectWalletConnect() {
     try {
       await this.walletConnectProvider.disconnect()
       return true
     } catch (e) {
-      console.log(`Error disconnecting wallet: ${e}`)
+      console.log(`Error disconnecting WalletConnect: ${e}`)
       return false
     }
   }
 
   async listenWalletConnect() {
     this.walletConnectProvider.on("accountsChanged", (accounts) => {
-      if (this.account !== accounts[0]) {
+      if (utils.getAddress(this.account) !== utils.getAddress(accounts[0])) {
         window.location.reload()
       }
     });
 
     this.walletConnectProvider.on("chainChanged", (chainId) => {
-      console.log(`walletconnect chain changed to: ${chainId}`)
-      store.dispatch({ type: 'SETUP/CHAINIDCHANGED/SET' })
+      console.log(`WalletConnect chain changed to: ${chainId}`)
+      store.dispatch({ type: 'SETUP/CHAINIDCHANGED/SET', payload: chainId })
     });
   }
 
@@ -100,25 +108,21 @@ class WalletService {
         method: "wallet_switchEthereumChain",
         params: [{ chainId }],
       })
-      const chainIdChanged = await provider.request({ method: 'eth_chainId' })
-      // walletconnect does not return error code 4902 if the chain is not exist
-      // so we need to add the code of adding chain.
-      if (this.walletType === 'walletconnect' && chainIdChanged !== chainId) {
-        await provider.request({
-          method: "wallet_addEthereumChain",
-          params: [chainInfo, this.account],
-        })
-      }
-      await this.connectWallet(this.walletType)
       return true
     } catch (error) {
-      if (error.code === 4902) {
+      if (error.code === 4902 || this.walletType === 'walletconnect') {
         try {
           await provider.request({
             method: "wallet_addEthereumChain",
             params: [chainInfo, this.account],
           })
-          await this.connectWallet(this.walletType)
+          // After adding the chain, we need to call switchEthereumChain again to finish the process for WalletConnect
+          if (this.walletType === 'walletconnect') {
+            await provider.request({
+              method: "wallet_switchEthereumChain",
+              params: [{ chainId }],
+            })
+          }
           return true
         } catch (addError) {
           console.log(`Error adding chain: ${addError}`)
@@ -133,10 +137,10 @@ class WalletService {
 
   async connectWallet(type) {
     if (type === 'metamask') {
-      await this.connectMetaMask()
+      return await this.connectMetaMask()
     }
     if (type === 'walletconnect') {
-      await this.connectWalletConnect()
+      return await this.connectWalletConnect()
     }
   }
 

packages/boba/gateway/src/util/constant.js

@@ -20,6 +20,8 @@ export const SPEED_CHECK = process.env.REACT_APP_SPEED_CHECK
 export const TARGET_CHAIN_URL = process.env.REACT_APP_TARGET_CHAIN_URL
 // VE DAO FLAG
 export const DISABLE_VE_DAO = process.env.REACT_APP_DISABLE_VE_DAO
+// WalletConnect FLAG
+export const DISABLE_WALLETCONNECT = process.env.REACT_APP_DISABLE_WALLETCONNECT
 
 export const BRIDGE_TYPE = {
   FAST_BRIDGE: "FAST_BRIDGE",