Support WalletConnect in gateway

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/package.json

@@ -30,6 +30,7 @@
     "@sentry/tracing": "^7.30.0",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
+    "@walletconnect/web3-provider": "^1.8.0",
     "axios": "^0.21.1",
     "bignumber.js": "^9.0.1",
     "bn.js": "^5.1.3",
@@ -63,23 +64,17 @@
     "serve": "^11.3.2",
     "truncate-middle": "^1.0.6",
     "ts-md5": "^1.2.11",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "web3": "^1.8.2"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
   "devDependencies": {
     "@beam-australia/react-env": "2.1.2",
     "audit-ci": "^3.1.1"

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

@@ -75,3 +75,21 @@ export function setConnect( state ) {
     return dispatch({ type: 'SETUP/CONNECT', payload: state })
   }
 }
+
+export function setWalletConnected( state ) {
+  return function (dispatch) {
+    return dispatch({ type: 'SETUP/WALLET_CONNECTED', payload: state })
+  }
+}
+
+export function setChainIdChanged(state) {
+  return function (dispatch) {
+    return dispatch({ type: 'SETUP/CHAINIDCHANGED/SET', payload: state })
+  }
+}
+
+export function resetChainIdChanged() {
+  return function (dispatch) {
+    return dispatch({ type: 'SETUP/CHAINIDCHANGED/RESET' })
+  }
+}

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

@@ -225,3 +225,9 @@ export async function addToken ( tokenContractAddressL1 ) {
     return {currency: _tokenContractAddressL1, L1address: _tokenContractAddressL1, L2address: '', symbol: 'Not found', error: 'Not found'};
   }
 }
+
+export function restTokenList () {
+  return function (dispatch) {
+    return dispatch({ type: 'TOKEN/GET/RESET' });
+  }
+}

packages/boba/gateway/src/components/disconnect/Disconnect.js

@@ -0,0 +1,57 @@
+/*
+Copyright 2021-present Boba Network.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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 React from 'react';
+import { useDispatch } from 'react-redux';
+import { LoginOutlined } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+
+import {
+  setLayer,
+  setConnect,
+  setConnectBOBA,
+  setConnectETH,
+  setEnableAccount,
+  setWalletConnected
+ } from 'actions/setupAction';
+
+import networkService from 'services/networkService';
+
+function Disconnect () {
+
+  const dispatch = useDispatch();
+
+  const disconnect = async () => {
+    await networkService.walletService.disconnectWallet()
+    dispatch(setLayer(null))
+    dispatch(setConnect(false))
+    dispatch(setConnectBOBA(false))
+    dispatch(setConnectETH(false))
+    dispatch(setWalletConnected(false))
+    dispatch(setEnableAccount(false))
+  }
+
+  return (
+    <>
+      <Tooltip onClick={disconnect}>
+        <IconButton size='medium'>
+          <LoginOutlined sx={{ fontSize: 16 }} />
+        </IconButton>
+      </Tooltip>
+    </>
+  );
+}
+
+export default React.memo(Disconnect);

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'
@@ -35,6 +35,8 @@ import {
   selectConnectETH,
   selectConnectBOBA,
   selectConnect,
+  selectWalletConnected,
+  selectChainIdChanged,
 } from 'selectors/setupSelector'
 
 import {
@@ -52,10 +54,10 @@ import { setEnableAccount, setWalletAddress } from 'actions/setupAction'
 
 import { fetchTransactions, fetchBalances } from 'actions/networkAction'
 
-import { openModal } from 'actions/uiAction'
+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()
@@ -74,6 +76,8 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
   const connectETHRequest = useSelector(selectConnectETH())
   const connectBOBARequest = useSelector(selectConnectBOBA())
   const connectRequest = useSelector(selectConnect())
+  const walletConnected = useSelector(selectWalletConnected())
+  const chainIdChanged = useSelector(selectChainIdChanged())
 
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
@@ -82,21 +86,15 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
     ? truncate(networkService.account, 6, 4, '...')
     : ''
 
-  const chainChangedFromMM = JSON.parse(
-    localStorage.getItem('chainChangedFromMM')
-  )
-  const wantChain = JSON.parse(localStorage.getItem('wantChain'))
-  const chainChangedInit = JSON.parse(localStorage.getItem('chainChangedInit'))
-
   const dispatchBootAccount = useCallback(() => {
-
-    if (!accountEnabled && baseEnabled) initializeAccount()
+    if ((!accountEnabled && baseEnabled) || chainIdChanged) initializeAccount()
 
     async function initializeAccount() {
 
       const initialized = await networkService.initializeAccount({
         networkGateway: network,
         networkType,
+        chainIdChanged,
       })
       if (initialized === 'nometamask') {
         dispatch(openModal('noMetaMaskModal'));
@@ -110,6 +108,7 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
         return false
       }
       else if (initialized === LAYER.L1 || initialized === LAYER.L2) {
+        dispatch(closeModal('wrongNetworkModal'))
         dispatch(setLayer(initialized))
         dispatch(setEnableAccount(true))
         dispatch(setWalletAddress(networkService.account))
@@ -120,49 +119,60 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
         return false
       }
     }
-  }, [dispatch, accountEnabled, network, networkType, baseEnabled])
+  }, [dispatch, accountEnabled, network, networkType, baseEnabled, chainIdChanged])
 
   const doConnectToLayer = useCallback((layer) => {
+    function resetConnectChain() {
+      dispatch(setConnect(false))
+      dispatch(setConnectETH(false))
+    }
+
     async function doConnect() {
       try {
-        localStorage.setItem('wantChain', JSON.stringify(layer))
-        await networkService.switchChain(layer)
-        dispatchBootAccount()
+        if (networkService.walletService.provider) {
+          if (await networkService.switchChain(layer)) {
+            if (layer === 'L1') {
+              dispatch(setConnectBOBA(false))
+            } else {
+              dispatch(setConnectETH(false))
+            }
+            dispatchBootAccount()
+          } else {
+            resetConnectChain()
+          }
+        } else {
+          // 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();
   }, [dispatch, dispatchBootAccount])
 
   useEffect(() => {
-    // detect mismatch and correct the mismatch
-    if (wantChain === 'L1' && layer === 'L2') {
-      dispatchBootAccount()
-    } else if (wantChain === 'L2' && layer === 'L1') {
+    if (walletConnected) {
       dispatchBootAccount()
     }
-  }, [wantChain, layer, dispatchBootAccount])
+  }, [walletConnected, dispatchBootAccount])
 
   useEffect(() => {
-    // auto reconnect to MM if we just switched chains from
-    // with the chain switcher, and then unset the flag.
-    if (chainChangedInit) {
-      dispatchBootAccount()
-      localStorage.setItem('chainChangedInit', false)
-    }
-  }, [chainChangedInit, dispatchBootAccount])
-
-  useEffect(() => {
-    // auto reconnect to MM if we just switched chains from
-    // inside MM, and then unset the flag.
-    if (chainChangedFromMM) {
+    // detect mismatch and correct the mismatch
+    if (layer === 'L1' || layer === 'L2') {
       dispatchBootAccount()
-      localStorage.setItem('chainChangedFromMM', false)
     }
-  }, [chainChangedFromMM, dispatchBootAccount])
+  }, [layer, dispatchBootAccount])
 
   // listening for l1 connection request
   useEffect(() => {
@@ -179,10 +189,15 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
   }, [ connectBOBARequest, doConnectToLayer ])
 
   useEffect(() => {
-    if (connectRequest) {
-      dispatchBootAccount()
+    if (connectRequest && !networkService.walletService.provider) {
+      // bypass walletSelectorModal
+      if (DISABLE_WALLETCONNECT) {
+        dispatchBootAccount()
+      } else {
+        dispatch(openModal('walletSelectorModal'))
+      }
     }
-  }, [connectRequest, dispatchBootAccount])
+  }, [dispatch, connectRequest, dispatchBootAccount])
 
   if (!visisble) {
     return null

packages/boba/gateway/src/components/modal/Modal.js

@@ -61,7 +61,7 @@ function _Modal({
 
         {
           !!newStyle ?
-            <Container maxWidth={maxWidth || "lg"} sx={{ border: 'none', position: 'relative' }}>
+            <Container maxWidth={maxWidth || "lg"} sx={{ border: 'none', position: 'relative', maxWidth }}>
               <S.Style minHeight={minHeight || '430px'} isMobile={isMobile} transparent={!!transparent || !!isMobile}>
                 <Box display="flex" flexDirection="column" gap="10px">
                   <S.ModalHead>

packages/boba/gateway/src/components/modal/Modal.styles.js

@@ -77,3 +77,10 @@ export const Content = styled(Box)(({ theme }) => ({
   flexDirection: 'column',
   gap:'10px',
 }));
+
+export const BoxCenter = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignItems: 'center',
+  cursor: 'pointer',
+}))

packages/boba/gateway/src/components/pageHeader/PageHeader.js

@@ -22,6 +22,7 @@ import CloseIcon from 'components/icons/CloseIcon'
 import networkService from 'services/networkService'
 import { makeStyles } from '@mui/styles'
 import Copy from 'components/copy/Copy'
+import Disconnect from 'components/disconnect/Disconnect'
 import { useSelector } from 'react-redux'
 import {
   selectAccountEnabled,
@@ -169,7 +170,10 @@ const PageHeader = ({ maintenance }) => {
           <WalletSwitch />
           <NetworkSwitcher />
           {!!accountEnabled ? (
-            <Copy value={networkService.account} light={false} />
+            <>
+              <Copy value={networkService.account} light={false} />
+              <Disconnect light={false} />
+            </>
           ) : null}
           <ThemeSwitcher />
         </S.HeaderWrapper>

packages/boba/gateway/src/containers/home/Home.js

@@ -74,6 +74,7 @@ import TransferPendingModal from 'containers/modals/transferPending/TransferPend
 import WrongNetworkModal from 'containers/modals/wrongNetwork/WrongNetworkModal';
 import ManageLockModal from 'containers/modals/veBoba/ManageLockModal';
 import NoMetaMaskModal from 'containers/modals/noMetaMask/NoMetaMaskModal'
+import WalletSelectorModal from 'containers/modals/walletSelector/WalletSelectorModal'
 import CDMCompletionModal from 'containers/modals/CDMCompletion/CDMCompletionModal'
 
 /******** COMPONENTS ********/
@@ -118,6 +119,7 @@ function Home() {
   const noMetaMaskModalState = useSelector(selectModalState('noMetaMaskModal'));
   const installMetaMaskModalState = useSelector(selectModalState('installMetaMaskModal'));
   const manageLockModalState = useSelector(selectModalState('manageLock'));
+  const walletSelectorModalState = useSelector(selectModalState('walletSelectorModal'));
   const CDMCompletionModalState = useSelector(selectModalState('CDMCompletionModal'));
 
   const fast = useSelector(selectModalState('fast'))
@@ -247,6 +249,7 @@ function Home() {
       {!!noMetaMaskModalState && <NoMetaMaskModal open={noMetaMaskModalState} />}
       {!!installMetaMaskModalState && <InstallMetaMaskModal open={installMetaMaskModalState} />}
       {!!manageLockModalState && <ManageLockModal open={manageLockModalState} lock={lock} />}
+      {!!walletSelectorModalState && <WalletSelectorModal open={walletSelectorModalState} />}
       {!!CDMCompletionModalState && <CDMCompletionModal open={CDMCompletionModalState} />}
 
       <Alert