Add wallet auto connection

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

@@ -81,3 +81,15 @@ export function setWalletConnected( state ) {
     return dispatch({ type: 'SETUP/WALLET_CONNECTED', payload: state })
   }
 }
+
+export function setChainIdChanged() {
+  return function (dispatch) {
+    return dispatch({ type: 'SETUP/CHAINIDCHANGED/SET' })
+  }
+}
+
+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

@@ -36,6 +36,7 @@ import {
   selectConnectBOBA,
   selectConnect,
   selectWalletConnected,
+  selectChainIdChanged,
 } from 'selectors/setupSelector'
 
 import {
@@ -53,7 +54,7 @@ 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'
@@ -76,6 +77,7 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
   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'))
@@ -84,15 +86,8 @@ 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() {
 
@@ -112,6 +107,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))
@@ -122,25 +118,35 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
         return false
       }
     }
-  }, [dispatch, accountEnabled, network, networkType, baseEnabled])
+  }, [dispatch, accountEnabled, network, networkType, baseEnabled, chainIdChanged])
 
   const doConnectToLayer = useCallback((layer) => {
     async function doConnect() {
       try {
-        localStorage.setItem('wantChain', JSON.stringify(layer))
-        if (networkService.provider) {
-          await networkService.switchChain(layer)
+        if (networkService.walletService.provider) {
+          const response = await networkService.switchChain(layer)
+          if (response) {
+            if (layer === 'L1') {
+              dispatch(setConnectBOBA(false))
+            } else {
+              dispatch(setConnectETH(false))
+            }
+            dispatchBootAccount()
+          } else {
+            dispatch(setConnectETH(false))
+            dispatch(setConnectBOBA(false))
+          }
         } else {
           dispatch(openModal('walletSelectorModal'))
         }
       } catch (err) {
         console.log('ERROR', err)
-        dispatch(setConnectETH(false));
-        dispatch(setConnectBOBA(false));
+        dispatch(setConnectETH(false))
+        dispatch(setConnectBOBA(false))
       }
     }
     doConnect();
-  }, [dispatch])
+  }, [dispatch, dispatchBootAccount])
 
   useEffect(() => {
     if (walletConnected) {
@@ -150,30 +156,10 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
 
   useEffect(() => {
     // detect mismatch and correct the mismatch
-    if (wantChain === 'L1' && layer === 'L2') {
-      dispatchBootAccount()
-    } else if (wantChain === 'L2' && layer === 'L1') {
-      dispatchBootAccount()
-    }
-  }, [wantChain, layer, 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) {
+    if (layer === 'L1' || layer === 'L2') {
       dispatchBootAccount()
-      localStorage.setItem('chainChangedFromMM', false)
     }
-  }, [chainChangedFromMM, dispatchBootAccount])
+  }, [layer, dispatchBootAccount])
 
   // listening for l1 connection request
   useEffect(() => {
@@ -190,7 +176,7 @@ function LayerSwitcher({ visisble = true, isButton = false }) {
   }, [ connectBOBARequest, doConnectToLayer ])
 
   useEffect(() => {
-    if (connectRequest) {
+    if (connectRequest && !networkService.walletService.provider) {
       dispatch(openModal('walletSelectorModal'))
     }
   }, [dispatch, connectRequest])

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/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/modals/walletSelector/WalletSelectorModal.js

@@ -21,12 +21,7 @@ function WalletSelectorModal ({ open }) {
 
   const connectToWallet = async (type) => {
     try {
-      if (type === 'metamask') {
-        await networkService.walletService.connectMetaMask()
-      }
-      if (type === 'walletconnect') {
-        await networkService.walletService.connectWalletConnect()
-      }
+      await networkService.walletService.connectWallet(type)
       dispatch(closeModal('walletSelectorModal'))
       dispatch(setWalletConnected(true))
     } catch (error) {
@@ -43,21 +38,25 @@ function WalletSelectorModal ({ open }) {
   }
 
   return (
-    <Modal open={open} onClose={handleClose} maxWidth="sm" minHeight="200px">
+    <Modal
+      open={open}
+      onClose={handleClose}
+      newStyle={true}
+      maxWidth="450px"
+      minHeight="200px"
+      title="Connect to Wallet"
+    >
       <Box>
-        <Typography variant="h2" sx={{fontWeight: 700, mb: 2}}>
-          Connect to Wallet
-        </Typography>
         <Content>
           <BoxCenter onClick={() => connectToWallet('metamask')}>
             <img src={metaMaskLogo} alt='metamask' height="100"/>
-            <Typography variant="h3" sx={{fontWeight: 700, mb: 2}}>
+            <Typography variant="body" sx={{fontWeight: 700, mb: 2}}>
               MetaMask
             </Typography>
           </BoxCenter>
           <BoxCenter onClick={() => connectToWallet('walletconnect')}>
             <img src={walletConnectLogo} alt='walletconnect' height="100"/>
-            <Typography variant="h3" sx={{fontWeight: 700, mb: 2}}>
+            <Typography variant="body" sx={{fontWeight: 700, mb: 2}}>
               WalletConnect
             </Typography>
           </BoxCenter>

packages/boba/gateway/src/containers/modals/wrongNetwork/WrongNetworkModal.js

@@ -4,15 +4,23 @@ import { closeModal } from 'actions/uiAction';
 import Button from 'components/button/Button';
 
 import Modal from 'components/modal/Modal';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectNetwork } from 'selectors/networkSelector';
+import { restTokenList } from 'actions/tokenAction';
 
 function WrongNetworkModal({open}) {
 
   const dispatch = useDispatch();
   const network = useSelector(selectNetwork());
 
+  useEffect(() => {
+    if (open){
+      dispatch(restTokenList())
+    }
+  }, [dispatch, open])
+
+
   function handleClose() {
     dispatch(setConnect(false));
     dispatch(closeModal('wrongNetworkModal'));

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

@@ -31,6 +31,7 @@ const initialState = {
   connectBOBA: false,
   connect: false,
   walletConnected: false,
+  chainIdChanged: false,
 }
 
 function setupReducer(state = initialState, action) {
@@ -101,6 +102,16 @@ function setupReducer(state = initialState, action) {
         appChain: action.payload,
         network: action.payload
       }
+    case 'SETUP/CHAINIDCHANGED/SET':
+      return {
+        ...state,
+        chainIdChanged: true
+      }
+    case 'SETUP/CHAINIDCHANGED/RESET':
+      return {
+        ...state,
+        chainIdChanged: false
+      }
     default:
       return state
   }

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

@@ -31,6 +31,9 @@ const initialState = {
 
 function tokenReducer(state = initialState, action) {
   switch (action.type) {
+    case 'TOKEN/GET/RESET':
+      state = initialState
+      return state
     case 'TOKEN/GET/SUCCESS':
       return {
         ...state,

packages/boba/gateway/src/selectors/setupSelector.js

@@ -92,3 +92,9 @@ export function selectWalletConnected () {
     return state.setup['walletConnected']
   }
 }
+
+export function selectChainIdChanged () {
+  return function (state) {
+    return state.setup['chainIdChanged']
+  }
+}