fixes: Style + Crash

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

@@ -59,8 +59,30 @@ function FeeSwitcher() {
 
   const dispatchSwitchFee = useCallback(async (targetFee) => {
 
-    const tooSmallETH = new BN(logAmount(balanceETH.balance, 18)).lt(new BN(0.002))
-    const tooSmallBOBA = new BN(logAmount(balanceBOBA.balance, 18)).lt(new BN(3.0))
+    console.log("balanceBOBA:",balanceBOBA)
+    console.log("balanceETH:",balanceETH)
+
+    let tooSmallETH = false
+    let tooSmallBOBA = false
+
+    if(typeof(balanceBOBA) === 'undefined') {
+      tooSmallBOBA = true
+    } else {
+      //check actual balance
+      tooSmallBOBA = new BN(logAmount(balanceBOBA.balance, 18)).lt(new BN(3.0))
+    }
+
+    if(typeof(balanceETH) === 'undefined') {
+      tooSmallETH = true
+    } else {
+      //check actual balance
+      tooSmallETH = new BN(logAmount(balanceETH.balance, 18)).lt(new BN(0.002))
+    }
+
+    if (!balanceBOBA && !balanceETH) {
+      dispatch(openError('Wallet completely empty - please bridge in ETH or BOBA from L1'))
+      return
+    }
 
     let res
 

packages/boba/gateway/src/containers/modals/farm/FarmDepositModal.js

@@ -97,21 +97,21 @@ class FarmDepositModal extends React.Component {
 
   async getMaxTransferValue() {
 
-    const { 
-      stakeToken, 
-      bobaFeeChoice, 
-      bobaFeePriceRatio, 
-      netLayer 
+    const {
+      stakeToken,
+      bobaFeeChoice,
+      bobaFeePriceRatio,
+      netLayer
     } = this.state
 
+    let max_BN = BigNumber.from(stakeToken.balance.toString())
     if (netLayer === 'L2') {
 
       let cost_BN = await networkService
         .liquidityEstimate(
           stakeToken.currency
         )
 
-      let max_BN = BigNumber.from(stakeToken.balance.toString())
       let fee = '0'
 
       // both ETH and BOBA have 18 decimals so this is safe
@@ -133,14 +133,14 @@ class FarmDepositModal extends React.Component {
       else if (stakeToken.symbol === 'BOBA' && !bobaFeeChoice) {
         // make sure user maintains minimum BOBA in account
         max_BN = max_BN.sub(BigNumber.from(toWei_String(3.0, 18)))
-      } 
+      }
       else {
         // do not adjust max_BN
       }
 
       if(bobaFeeChoice)
         fee = utils.formatUnits(cost_BN.mul(BigNumber.from(bobaFeePriceRatio)), stakeToken.decimals)
-      else 
+      else
         fee = utils.formatUnits(cost_BN, stakeToken.decimals)
 
       // if the max amount is less than the gas,
@@ -149,17 +149,17 @@ class FarmDepositModal extends React.Component {
         max_BN = BigNumber.from('0')
       }
 
-      this.setState({ 
+      this.setState({
         max_Float_String: utils.formatUnits(max_BN, stakeToken.decimals),
         fee
       })
 
     }
     else {
-      this.setState({ 
-        max_Float_String: utils.formatUnits(stakeToken.balance, stakeToken.decimals) 
+      this.setState({
+        max_Float_String: utils.formatUnits(max_BN, stakeToken.decimals)
       })
-    } 
+    }
   }
 
   handleClose() {
@@ -168,9 +168,9 @@ class FarmDepositModal extends React.Component {
 
   handleStakeValue( value ) {
 
-    const { 
-      stakeToken, 
-      max_Float_String 
+    const {
+      stakeToken,
+      max_Float_String
     } = this.state
 
     if (value &&
@@ -193,9 +193,9 @@ class FarmDepositModal extends React.Component {
 
   async handleApprove() {
 
-    const { 
-      stakeToken, 
-      value_Wei_String 
+    const {
+      stakeToken,
+      value_Wei_String
     } = this.state
 
     this.setState({ loading: true })
@@ -228,9 +228,9 @@ class FarmDepositModal extends React.Component {
 
   async handleConfirm() {
 
-    const { 
-      stakeToken, 
-      value_Wei_String 
+    const {
+      stakeToken,
+      value_Wei_String
     } = this.state
 
     this.setState({ loading: true })
@@ -261,7 +261,7 @@ class FarmDepositModal extends React.Component {
       max_Float_String,
       netLayer,
       bobaFeeChoice,
-      fee 
+      fee
     } = this.state
 
     const { approvedAllowance } = this.props.farm
@@ -273,14 +273,14 @@ class FarmDepositModal extends React.Component {
       new BN(approvedAllowance).gte(powAmount(stakeValue, stakeToken.decimals))
     ) {
       allowanceGTstake = true
-    } else if (Number(stakeValue) > 0 && 
+    } else if (Number(stakeValue) > 0 &&
       stakeToken.symbol === 'ETH'
     ) {
       //do not need to approve ETH
       allowanceGTstake = true
     }
 
-    // we do this because there is no fee estimation logic (yet) for this 
+    // we do this because there is no fee estimation logic (yet) for this
     // on L1
     let allowUseAll = netLayer === 'L2' ? true : false
 

packages/boba/gateway/src/containers/save/Save.js

@@ -133,45 +133,46 @@ class Save extends React.Component {
 
   async getMaxTransferValue () {
 
-    const { 
-      layer2, 
-      bobaFeeChoice, 
-      bobaFeePriceRatio 
+    const {
+      layer2,
+      bobaFeeChoice,
+      bobaFeePriceRatio,
+      netLayer
     } = this.state
-    
+
     // as staking BOBA check the bobabalance
     const token = Object.values(layer2).find((t) => t[ 'symbolL2' ] === 'BOBA')
-    console.log("Token:",token)
 
     // BOBA available prepare transferEstimate
     if (token) {
-      //console.log("balance:",token.balance.toString())
-      let cost_BN = await networkService.savingEstimate()
-      console.log([ `cost_BN`, cost_BN ])
+
       let max_BN = BigNumber.from(token.balance.toString())
       let fee = '0'
 
-      if (bobaFeeChoice) {
-        // we are staking BOBA and paying in BOBA
-        // so need to subtract the BOBA fee
-        max_BN = max_BN.sub(cost_BN.mul(BigNumber.from(bobaFeePriceRatio)))
+      if (netLayer === 'L2') {
+        let cost_BN = await networkService.savingEstimate()
+        console.log([ `cost_BN`, cost_BN ])
+        if (bobaFeeChoice) {
+          // we are staking BOBA and paying in BOBA
+          // so need to subtract the BOBA fee
+          max_BN = max_BN.sub(cost_BN.mul(BigNumber.from(bobaFeePriceRatio)))
+        }
+
+        // make sure user maintains minimum BOBA in account
+        max_BN = max_BN.sub(BigNumber.from(toWei_String(3.0, 18)))
+
+        if (bobaFeeChoice)
+          fee = utils.formatUnits(cost_BN.mul(BigNumber.from(bobaFeePriceRatio)), token.decimals)
+        else
+          fee = utils.formatUnits(cost_BN, token.decimals)
       }
-
-      // make sure user maintains minimum BOBA in account
-      max_BN = max_BN.sub(BigNumber.from(toWei_String(3.0, 18)))
-
-      if(bobaFeeChoice)
-        fee = utils.formatUnits(cost_BN.mul(BigNumber.from(bobaFeePriceRatio)), token.decimals)
-      else 
-        fee = utils.formatUnits(cost_BN, token.decimals)
-
       // if the max amount is less than the gas,
       // set the max amount to zero
       if (max_BN.lt(BigNumber.from('0'))) {
         max_BN = BigNumber.from('0')
       }
 
-      this.setState({ 
+      this.setState({
         max_Float_String: utils.formatUnits(max_BN, token.decimals),
         fee
       })
@@ -182,8 +183,8 @@ class Save extends React.Component {
 
   handleStakeValue(value) {
 
-    const { 
-      max_Float_String 
+    const {
+      max_Float_String
     } = this.state
 
     if( value &&
@@ -228,7 +229,7 @@ class Save extends React.Component {
       loading,
       max_Float_String,
       bobaFeeChoice,
-      fee 
+      fee
     } = this.state
 
     let totalBOBAstaked = 0

packages/boba/gateway/src/containers/wallet/Wallet.js

@@ -3,12 +3,12 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import Button from 'components/button/Button'
 
-import { Circle } from "@mui/icons-material"
-import { Box, CircularProgress, Typography } from '@mui/material'
+import { Circle, Info } from "@mui/icons-material"
+import { Box, CircularProgress, Icon, Typography } from '@mui/material'
 import Link from 'components/icons/LinkIcon'
 
 import { switchChain, getETHMetaTransaction } from 'actions/setupAction'
-import { openAlert, setActiveHistoryTab, setPage as setPageAction } from 'actions/uiAction'
+import { openAlert, openError, setActiveHistoryTab, setPage as setPageAction } from 'actions/uiAction'
 import { fetchTransactions } from 'actions/networkAction'
 
 import Tabs from 'components/tabs/Tabs'
@@ -104,13 +104,27 @@ function Wallet() {
 
       if (l2BalanceETH && l2BalanceETH.balance) {
         setTooSmallETH(new BN(logAmount(l2BalanceETH.balance, 18)).lt(new BN(0.003)))
+      } else {
+        // in case of zero ETH balance we are setting tooSmallETH
+        setTooSmallETH(true)
       }
-      if (l2BalanceBOBA && l2BalanceBOBA) {
+      if (l2BalanceBOBA && l2BalanceBOBA.balance) {
         setTooSmallBOBA(new BN(logAmount(l2BalanceBOBA.balance, 18)).lt(new BN(4.0)))
+      } else {
+        // in case of zero BOBA balance we are setting tooSmallBOBA
+        setTooSmallBOBA(true)
       }
     }
   },[ l2Balances, accountEnabled ])
 
+  useEffect(() => {
+    if (layer === 'L2') {
+      if (tooSmallBOBA && tooSmallETH) {
+        dispatch(openError('Wallet empty - please bridge in ETH or BOBA from L1'))
+      }
+    }
+  },[tooSmallETH, tooSmallBOBA, layer, dispatch])
+
   useInterval(() => {
     if (accountEnabled) {
       dispatch(fetchTransactions())
@@ -150,16 +164,19 @@ function Wallet() {
       {layer === 'L2' && tooSmallETH && network === 'rinkeby' &&
         <S.LayerAlert>
           <S.AlertInfo>
-            <AlertIcon />
-            <S.AlertText
-              variant="body3"
+            {/* <AlertIcon /> */}
+            <Icon as={Info} sx={{color:"#BAE21A"}}/>
+            <Typography
+              flex={4}
+              variant="body2"
               component="p"
+              ml={2}
+              style={{ opacity: '0.6' }}
             >
-              <span style={{opacity: '0.6'}}>Using Boba requires a minimum ETH balance (of 0.002 ETH)
-              regardless of your fee setting, otherwise MetaMask may incorrectly reject transactions.
-              If you ran out of ETH, use EMERGENCY SWAP to swap BOBA for 0.05 ETH at market rates.
-              </span>
-            </S.AlertText>
+              Using Boba requires a minimum ETH balance (of 0.002 ETH) regardless of your fee setting, 
+              otherwise MetaMask may incorrectly reject transactions. If you ran out of ETH, use 
+              EMERGENCY SWAP to swap BOBA for 0.05 ETH at market rates.
+            </Typography>
           </S.AlertInfo>
           <Button
             onClick={()=>{emergencySwap()}}

packages/boba/gateway/src/containers/wallet/token/Token.js

@@ -98,7 +98,7 @@ function TokenPage() {
               href={'https://oolongswap.com/'}
               aria-label="link"
               style={{fontSize: '1.0em', opacity: '0.9', paddingLeft: '3px'}}
-            >Oologswap <Link />
+            >Oolongswap <Link />
             </S.footerLink>
           </Typography>
         </Box>