Fix [Gateway] : One gateway bridging

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

@@ -26,7 +26,3 @@ export async function updateSignatureStatus_exitTRAD ( sigStatus ) {
 export async function updateSignatureStatus_depositLP ( sigStatus ) {
   store.dispatch({type: 'DEPOSIT/LP/SIGNED',payload: sigStatus})
 }
-
-export async function updateSignatureStatus_depositTRAD ( sigStatus ) {
-  store.dispatch({type: 'DEPOSIT/TRAD/SIGNED',payload: sigStatus})
-}

packages/boba/gateway/src/components/listFarm/listFarm.js

@@ -476,10 +476,10 @@ class ListFarm extends React.Component {
                     <Typography variant="body2" component="div">Staked</Typography>
                     <Typography variant="body2" component="div" color="secondary">{logAmount(userInfo.amount, decimals, 2)}</Typography>
                     <Box sx={{ display: "flex", alignItems: "center", gap: "5px" }}>
-                      <Button variant="contained" onClick={() => { !disabled && this.handleWithdrawToken() }}>
+                      <Button variant="contained" disabled={disabled} onClick={() => { !disabled && this.handleWithdrawToken() }}>
                         Unstake
                       </Button>
-                      <Button variant="contained" onClick={() => { !disabled && this.handleStakeToken() }}>
+                      <Button variant="contained" disabled={disabled} onClick={() => { !disabled && this.handleStakeToken() }}>
                         Stake More
                       </Button>
                     </Box>

packages/boba/gateway/src/components/mainMenu/feeSwitcher/FeeSwitcher.js

@@ -38,31 +38,31 @@ import BN from 'bignumber.js'
 import { logAmount } from 'util/amountConvert.js'
 import networkService from 'services/networkService.js'
 import {
-  selectActiveNetwork,
   selectActiveNetworkName,
 } from 'selectors/networkSelector.js'
-import { NETWORK } from 'util/network/network.util.js'
+
 
 function FeeSwitcher() {
   const dispatch = useDispatch()
   const accountEnabled = useSelector(selectAccountEnabled())
   const feeUseBoba = useSelector(selectBobaFeeChoice())
 
   const networkName = useSelector(selectActiveNetworkName())
-  const network = useSelector(selectActiveNetwork())
+
   const layer = useSelector(selectLayer())
 
   const l2Balances = useSelector(selectlayer2Balance, isEqual)
 
-  const l2BalanceETH = l2Balances.filter((i) => i.symbol === 'ETH')
-  const balanceETH = l2BalanceETH[0]
+  const l2BalanceNativeToken = l2Balances.filter((i) => i.symbol === networkService.L1NativeTokenSymbol)
+  const balanceETH = l2BalanceNativeToken[ 0 ]
   const l2BalanceBOBA = l2Balances.filter((i) => i.symbol === 'BOBA')
   const balanceBOBA = l2BalanceBOBA[0]
 
   const dispatchSwitchFee = useCallback(
     async (targetFee) => {
       let tooSmallL1NativeToken = false
-      let minL1NativeBalance = network === NETWORK.ETHEREUM ? 0.0002 : 0.5
+      // mini balance required for token to use as bridge fee
+      let minL1NativeBalance = await networkService.estimateMinL1NativeTokenForFee() //0.002
       let tooSmallBOBA = false
 
       if (typeof balanceBOBA === 'undefined') {
@@ -126,7 +126,7 @@ function FeeSwitcher() {
         dispatch(openAlert(`Successfully changed fee to ${targetFee}`))
       }
     },
-    [dispatch, feeUseBoba, balanceETH, balanceBOBA, network]
+    [dispatch, feeUseBoba, balanceETH, balanceBOBA]
   )
 
   if (!accountEnabled && layer !== 'L2') {

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

@@ -22,13 +22,14 @@ import {
   IconButton,
 } from '@mui/material'
 import { useTheme } from '@mui/styles'
-import { setConnect, setLayer } from 'actions/setupAction.js'
+import { setConnect, 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'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
+  selectBaseEnabled,
   selectAccountEnabled,
   selectLayer,
   selectConnectETH,
@@ -58,6 +59,7 @@ import { LAYER } from 'util/constant.js'
 function LayerSwitcher({ visisble = true }) {
   const dispatch = useDispatch()
   const accountEnabled = useSelector(selectAccountEnabled())
+  const baseEnabled = useSelector(selectBaseEnabled())
 
   let layer = useSelector(selectLayer())
   const network = useSelector(selectActiveNetwork())
@@ -87,27 +89,26 @@ function LayerSwitcher({ visisble = true }) {
 
   const dispatchBootAccount = useCallback(() => {
 
-    if (!accountEnabled) initializeAccount()
+    if (!accountEnabled && baseEnabled) initializeAccount()
 
     async function initializeAccount() {
 
       const initialized = await networkService.initializeAccount({
         networkGateway: network,
         networkType,
       })
-
       if (initialized === 'nometamask') {
         dispatch(openModal('noMetaMaskModal'));
         return false;
       } else if (initialized === 'wrongnetwork') {
         dispatch(openModal('wrongNetworkModal'))
         return false
-      } else if (initialized === false) {
-        console.log('WP: Account NOT enabled for', network, accountEnabled)
+      }
+      else if (initialized === false) {
         dispatch(setEnableAccount(false))
         return false
-      } else if (initialized === LAYER.L1 || initialized === LAYER.L2) {
-        console.log('WP: Account IS enabled for', initialized)
+      }
+      else if (initialized === LAYER.L1 || initialized === LAYER.L2) {
         dispatch(setLayer(initialized))
         dispatch(setEnableAccount(true))
         dispatch(setWalletAddress(networkService.account))
@@ -118,35 +119,22 @@ function LayerSwitcher({ visisble = true }) {
         return false
       }
     }
-  }, [dispatch, accountEnabled, network, networkType])
-
-  // this will switch chain, if needed, and then connect to Boba
-  const connectToBOBA = useCallback(async () => {
-    localStorage.setItem('wantChain', JSON.stringify('L2'))
-    await networkService.switchChain('L2')
-    dispatchBootAccount()
-  }, [dispatchBootAccount])
-
-   // this will switch chain, if needed, and then connect to Ethereum
-  const connectToETH = useCallback(async () => {
-    localStorage.setItem('wantChain', JSON.stringify('L1'))
-    await networkService.switchChain('L1')
-    dispatchBootAccount()
-  }, [ dispatchBootAccount ])
-
-  const dispatchSwitchLayer = useCallback(
-    (targetLayer) => {
-      if (targetLayer === 'L1') {
-        connectToETH()
-      } else if (targetLayer === 'L2') {
-        connectToBOBA()
-      } else {
-        // handles the strange targetLayer === null when people click on ETH icon a second time
-        connectToETH()
+  }, [dispatch, accountEnabled, network, networkType, baseEnabled])
+
+  const doConnectToLayer = useCallback((layer) => {
+    async function doConnect() {
+      try {
+        localStorage.setItem('wantChain', JSON.stringify(layer))
+        await networkService.switchChain(layer)
+        dispatchBootAccount()
+      } catch (err) {
+        console.log('ERROR', err)
+        dispatch(setConnectETH(false));
+        dispatch(setConnectBOBA(false));
       }
-    },
-    [connectToBOBA, connectToETH]
-  )
+    }
+    doConnect();
+  }, [dispatch, dispatchBootAccount])
 
   useEffect(() => {
     // detect mismatch and correct the mismatch
@@ -175,21 +163,19 @@ function LayerSwitcher({ visisble = true }) {
     }
   }, [chainChangedFromMM, dispatchBootAccount])
 
+  // listening for l1 connection request
   useEffect(() => {
     if (connectETHRequest) {
-      localStorage.setItem('wantChain', JSON.stringify('L1'))
-      networkService.switchChain('L1')
-      dispatchBootAccount()
+      doConnectToLayer('L1')
     }
-  }, [connectETHRequest, dispatchBootAccount])
+  }, [ connectETHRequest, doConnectToLayer ])
 
+  // listening for l2 connection request
   useEffect(() => {
     if (connectBOBARequest) {
-      localStorage.setItem('wantChain', JSON.stringify('L2'))
-      networkService.switchChain('L2')
-      dispatchBootAccount()
+      doConnectToLayer('L2')
     }
-  }, [connectBOBARequest, dispatchBootAccount])
+  }, [ connectBOBARequest, doConnectToLayer ])
 
   useEffect(() => {
     if (connectRequest) {
@@ -247,15 +233,15 @@ function LayerSwitcher({ visisble = true }) {
           title="Ethereum"
           layer={layer}
           icon={<EthereumIcon />}
-          onConnect={() => connectToETH()}
+          onConnect={() => doConnectToLayer(LAYER.L1)}
           isConnected={layer === LAYER.L1}
         />
         <S.LayerDivider />
         <MobileLayer
           title="Boba Network"
           layer={layer}
           icon={<BobaIcon />}
-          onConnect={() => connectToBOBA()}
+          onConnect={() => doConnectToLayer(LAYER.L1)}
           isConnected={layer === LAYER.L2}
         />
       </S.LayerSwitcherWrapperMobile>
@@ -267,7 +253,7 @@ function LayerSwitcher({ visisble = true }) {
       <ToggleButtonGroup
         value={layer}
         exclusive
-        onChange={(e, n) => dispatchSwitchLayer(n)}
+        onChange={(e, n) => doConnectToLayer(n)}
         aria-label="text alignment"
       >
         <ToggleButton

packages/boba/gateway/src/components/walletSwitch/WalletSwitch.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { setActiveNetwork } from 'actions/networkAction';
-import { setBaseState, setConnect, setConnectBOBA, setConnectETH } from 'actions/setupAction';
+import { setBaseState, setConnect, setConnectBOBA, setConnectETH, setEnableAccount } from 'actions/setupAction';
 import { selectActiveNetwork, selectActiveNetworkType, selectNetwork, selectNetworkType } from 'selectors/networkSelector';
 
 import Button from 'components/button/Button';
@@ -27,6 +27,7 @@ const WalletSwitch = () => {
     // reset baseState to false to trigger initialization on chain change.
     // and trigger the connect to BOBA & ETH base on current chain.
     dispatch(setBaseState(false));
+    dispatch(setEnableAccount(false));
     setReconnect(true);
   }
 

packages/boba/gateway/src/containers/bridge/bobaBridge/bobaBridge.styles.js

@@ -25,6 +25,16 @@ export const BobaContent = styled(Box)(({ theme }) => ({
   gap: '10px',
 }))
 
+export const BridgeConnectButton = styled(Box)(({theme})=> ({
+  alignSelf: 'flex-start',
+  [ theme.breakpoints.down('md') ]: {
+    alignSelf: 'stretch',
+    'button': {
+      width: '100%'
+    }
+  }
+}));
+
 export const BobaContentWrapper = styled(Box, {
   shouldForwardProp: (props) => props !== 'fullWidth',
 })(({ theme, flexDirection }) => ({

packages/boba/gateway/src/containers/connect/Connect.js

@@ -32,7 +32,7 @@ const Connect = ({
         variant="contained"
         size="large"
         onClick={() => dispatch(setConnect(true))}
-        sx="font-weight: 500;"
+        sx={{fontWeight: '500;'}}
       >
         Connect
       </Button>

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

@@ -182,18 +182,21 @@ function Home() {
   useInterval(() => {
     if(accountEnabled /*== MetaMask is connected*/) {
       dispatch(fetchBalances()) // account specific
+
+      if (activeNetwork === NETWORK.ETHEREUM) {
+        dispatch(fetchDaoBalance())      // account specific
+        dispatch(fetchDaoVotes())        // account specific
+        dispatch(fetchDaoBalanceX())     // account specific
+        dispatch(fetchDaoVotesX())       // account specific
+        dispatch(getMonsterInfo()) // account specific
+        dispatch(getFS_Info())   // account specific
+        dispatch(getFS_Saves()) // account specific
+      }
     }
     /*== we only have have Base L1 and L2 providers*/
     if (baseEnabled && activeNetwork === NETWORK.ETHEREUM) {
       dispatch(getProposalThreshold())
       dispatch(fetchDaoProposals())
-      dispatch(fetchDaoBalance())      // account specific
-      dispatch(fetchDaoVotes())        // account specific
-      dispatch(fetchDaoBalanceX())     // account specific
-      dispatch(fetchDaoVotesX())       // account specific
-      dispatch(getFS_Info())   // account specific
-      dispatch(getFS_Saves()) // account specific
-      dispatch(getMonsterInfo()) // account specific
     }
   }, POLL_INTERVAL)