Enables BRIDGE ALL for ETH

packages/omgx/wallet-frontend/src/actions/networkAction.js

@@ -60,7 +60,15 @@ export function depositL2LP(token, value) {
   )
 }
 
-//DEPOSIT ETH
+//SWAP RELATED - Depositing into the L2LP triggers the swap-exit - variant of depositL2LP
+//that handles Exit All 
+export function fastExitAll(token) {
+  return createAction('EXIT/CREATE', () =>
+    networkService.fastExitAll(token)
+  )
+}
+
+//CLASSICAL DEPOSIT ETH
 export function depositETHL2(value) {
   return createAction('DEPOSIT/CREATE', () => {
       return networkService.depositETHL2(value)

packages/omgx/wallet-frontend/src/components/input/Input.js

@@ -41,6 +41,9 @@ function Input({
   variant,
   newStyle = false,
   allowUseAll = false,
+  allowExitAll = false,
+  onExitAll,
+  loading,
 }) {
 
   async function handlePaste() {
@@ -104,14 +107,28 @@ function Input({
             <Typography variant="body2" component="p" sx={{opacity: 0.7, textAlign: "end", mb: 2}}>
               Max Amount: {Number(maxValue).toFixed(3)}
             </Typography>
-
             {allowUseAll && (
               <Box>
                 <Button onClick={handleClickMax} variant="small" >
                   Use All
                 </Button>
               </Box>
             )}
+            {allowExitAll && (
+              <Box>
+                <Button 
+                  onClick={onExitAll}
+                  variant="small" 
+                  size="small"
+                  sx={{margin: '10px 0px'}}
+                  loading={loading}
+                  triggerTime={new Date()}
+                  tooltip={loading ? "Your transaction is still pending. Please wait for confirmation." : "Click here to bridge your funds to L1"}
+                >
+                  Bridge All
+                </Button>
+              </Box>
+            )}
           </S.ActionsWrapper>
         )}
         {paste && (

packages/omgx/wallet-frontend/src/components/input/Input.styles.js

@@ -58,6 +58,7 @@ export const InputWrapper = styled(Box)(({ theme }) => ({
 export const ActionsWrapper = styled(Box)`
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: center;
   flex: 3;
+  margin-left: 10px;
 `;

packages/omgx/wallet-frontend/src/containers/account/Account.js

@@ -231,7 +231,7 @@ function Account () {
           <Typography variant="body2">
              You are using Mainnet.<br/>
              WARNING: the mainnet smart contracts are not fully audited and funds may be at risk.<br/>
-             Please exercise caution when using Mainnet.
+             Please be cautious when using Mainnet.
           </Typography>
           }
         </S.CardContentTag>
@@ -249,7 +249,7 @@ function Account () {
               variant="body2"
               component="p"
             >
-              Note: Balance altering transaction in progress - please be patient
+              Transaction in progress - please be patient
             </S.AlertText>
           </S.AlertInfo>
         </S.LayerAlert>

packages/omgx/wallet-frontend/src/containers/modals/exit/steps/DoExitStepFast.js

@@ -17,7 +17,7 @@ import React, { useState, useEffect } from 'react'
 
 import { useDispatch, useSelector } from 'react-redux'
 
-import { depositL2LP } from 'actions/networkAction'
+import { depositL2LP, fastExitAll } from 'actions/networkAction'
 import { openAlert } from 'actions/uiAction'
 
 import { selectLoading } from 'selectors/loadingSelector'
@@ -42,11 +42,14 @@ function DoExitStepFast({ handleClose, token }) {
   const dispatch = useDispatch()
 
   const [ value, setValue ] = useState('')
-  const [ value_Wei_String, setValue_Wei_String ] = useState('0')  //support for Use Max
+  const [ value_Wei_String, setValue_Wei_String ] = useState('0')
 
-  const [LPBalance, setLPBalance] = useState(0)
-  const [feeRate, setFeeRate] = useState(0)
-  const [validValue, setValidValue] = useState(false)
+  const [ LPBalance, setLPBalance ] = useState(0)
+  const [ feeRate, setFeeRate ] = useState(0)
+  const [ l1gas, setl1gas ] = useState(0)
+  const [ l2FeeBalance, setL2FeeBalance ] = useState(0)
+
+  const [ validValue, setValidValue ] = useState(false)
 
   const loading = useSelector(selectLoading(['EXIT/CREATE']))
 
@@ -57,15 +60,10 @@ function DoExitStepFast({ handleClose, token }) {
 
   function setAmount(value) {
 
-    //console.log("setAmount")
-
     const tooSmall = new BN(value).lte(new BN(0.0))
     const tooBig   = new BN(value).gt(new BN(maxValue))
 
-    //console.log("tooSmall",tooSmall)
-    //console.log("tooBig",tooBig)
-
-    if (tooSmall || tooBig) {
+    if (tooSmall || tooBig || (Number(l1gas) > Number(l2FeeBalance))) {
       setValidValue(false)
     } else {
       setValidValue(true)
@@ -101,6 +99,28 @@ function DoExitStepFast({ handleClose, token }) {
 
   }
 
+  async function doExitAll() {
+
+    console.log("Amount to exit:", token.balance.toString())
+
+    let res = await dispatch(
+      fastExitAll(
+        token.address
+      )
+    )
+
+    if (res) {
+      dispatch(
+          openAlert(
+            `${token.symbol} was bridged. You will receive
+            ${receivableAmount(value)} ${token.symbol} minus gas fees (if bridging ETH) on L1.`
+          )
+        )
+      handleClose()
+    }
+
+  }
+
   useEffect(() => {
     if (typeof(token) !== 'undefined') {
       networkService.L1LPBalance(token.addressL1).then((res) => {
@@ -109,12 +129,19 @@ function DoExitStepFast({ handleClose, token }) {
       networkService.getTotalFeeRate().then((feeRate) => {
         setFeeRate(feeRate)
       })
+      networkService.getFastExitCost(token.address).then((fee) => {
+        setl1gas(fee)
+      })
+      networkService.getL2FeeBalance().then((ETHbalance) => {
+        setL2FeeBalance(ETHbalance)
+      })
     }
     // to clean up state and fix the
     // error in console for max state update.
     return ()=>{
       setLPBalance(0)
       setFeeRate(0)
+      setl1gas(0)
     }
   }, [ token ])
 
@@ -134,9 +161,27 @@ function DoExitStepFast({ handleClose, token }) {
   let buttonLabel = 'Cancel'
   if( loading ) buttonLabel = 'Close'
 
+  let ETHstring = ''
+
+  if(l1gas && Number(l1gas) > 0) {
+    if(Number(l1gas) > Number(l2FeeBalance)){
+      ETHstring = `The estimated gas fee for this transaction (approval + bridge) is ${Number(l1gas).toFixed(4)} ETH. 
+      WARNING: your L2 ETH balance of ${Number(l2FeeBalance).toFixed(4)} is too small to cover this transaction. 
+      THE TRANSACTION WILL FAIL.` 
+    } else if (Number(l1gas) > Number(l2FeeBalance) * 0.9) {
+      ETHstring = `The estimated gas fee for this transaction (approval + bridge) is ${Number(l1gas).toFixed(4)} ETH. 
+      CAUTION: your L2 ETH balance of ${Number(l2FeeBalance).toFixed(4)} is very close to the estimated cost. 
+      This transaction might fail. It would be safer to have slightly more ETH in your L2 wallet to cover gas fees.` 
+    } else {
+      ETHstring = `The estimated gas fee for this transaction (approval + bridge) is ${Number(l1gas).toFixed(4)} ETH. 
+      Your L2 ETH balance of ${Number(l2FeeBalance).toFixed(4)} is sufficent to cover this transaction.` 
+    }
+  }
+
   return (
     <>
       <Box>
+
         <Typography variant="h2" sx={{fontWeight: 700, mb: 1}}>
           Fast Bridge to L1
         </Typography>
@@ -152,15 +197,13 @@ function DoExitStepFast({ handleClose, token }) {
             setAmount(i.target.value)
             setValue_Wei_String(toWei_String(i.target.value, token.decimals))
           }}
-          onUseMax={(i)=>{//they want to use the maximum
-            setAmount(maxValue) //so the input value updates for the user
-            setValue_Wei_String(token.balance.toString())
-          }}
-          allowUseAll={true}
           unit={token.symbol}
           maxValue={maxValue}
           newStyle
           variant="standard"
+          loading={loading}
+          onExitAll={doExitAll}
+          allowExitAll={true}
         />
 
         {validValue && token && (
@@ -175,6 +218,18 @@ function DoExitStepFast({ handleClose, token }) {
           </Typography>
         )}
 
+        {Number(l1gas) > 0 && Number(l1gas) > Number(l2FeeBalance) && (
+          <Typography variant="body2" sx={{mt: 2, fontSize: '0.8em', fontWeight: '700', color: 'red'}}>
+            {ETHstring}
+          </Typography>
+        )}
+
+        {Number(l1gas) > 0 && Number(l1gas) <= Number(l2FeeBalance) && (
+          <Typography variant="body2" sx={{mt: 2, fontSize: '0.7em'}}>
+            {ETHstring}
+          </Typography>
+        )}
+
         {Number(LPBalance) < Number(value) && (
           <Typography variant="body2" sx={{mt: 2, color: 'red'}}>
             The liquidity pool balance (of {LPBalance}) is too low to cover your bridge - please
@@ -189,27 +244,29 @@ function DoExitStepFast({ handleClose, token }) {
         )}
       </Box>
 
+
+
       <WrapperActionsModal>
-          <Button
-            onClick={handleClose}
-            color='neutral'
-            size='large'
-          >
-            {buttonLabel}
-          </Button>
-          <Button
-            onClick={doExit}
-            color='primary'
-            variant='contained'
-            loading={loading}
-            tooltip={loading ? "Your transaction is still pending. Please wait for confirmation." : "Click here to bridge your funds to L1"}
-            disabled={!validValue}
-            triggerTime={new Date()}
-            fullWidth={isMobile}
-            size='large'
-          >
-            Bridge to L1
-          </Button>
+        <Button
+          onClick={handleClose}
+          color='neutral'
+          size='large'
+        >
+          {buttonLabel}
+        </Button>
+        <Button
+          onClick={doExit}
+          color='primary'
+          variant='contained'
+          loading={loading}
+          tooltip={loading ? "Your transaction is still pending. Please wait for confirmation." : "Click here to bridge your funds to L1"}
+          disabled={!validValue}
+          triggerTime={new Date()}
+          fullWidth={isMobile}
+          size='large'
+        >
+          Bridge to L1
+        </Button>
       </WrapperActionsModal>
     </>
   )