Support Layer Zero bridge from Alt L1s to Ethereum

ops_boba/api/watcher-api/serverless-bobaavax.yml

@@ -116,3 +116,20 @@ functions:
           cors: true
     layers:
       - ${file(env-bobaavax.yml):LAYERS}
+  watcher_getLayerZeroTransactions:
+    handler: watcher_getLayerZeroTransactions.watcher_getLayerZeroTransactions
+    memorySize: 10240 # optional, in MB, default is 1024
+    timeout: 60 # optional, in seconds, default is 6
+    vpc:
+      securityGroupIds:
+        - ${file(env-bobaavax.yml):SECURITY_GROUPS}
+      subnetIds:
+        - ${file(env-bobaavax.yml):SUBNET_ID_1}
+        - ${file(env-bobaavax.yml):SUBNET_ID_2}
+    events:
+      - http:
+          path: get.layerzero.transactions
+          method: post
+          cors: true
+    layers:
+      - ${file(env-bobaavax.yml):LAYERS}

ops_boba/api/watcher-api/serverless-bobabeam.yml

@@ -116,3 +116,20 @@ functions:
           cors: true
     layers:
       - ${file(env-bobabeam.yml):LAYERS}
+  watcher_getLayerZeroTransactions:
+    handler: watcher_getLayerZeroTransactions.watcher_getLayerZeroTransactions
+    memorySize: 10240 # optional, in MB, default is 1024
+    timeout: 60 # optional, in seconds, default is 6
+    vpc:
+      securityGroupIds:
+        - ${file(env-bobabeam.yml):SECURITY_GROUPS}
+      subnetIds:
+        - ${file(env-bobabeam.yml):SUBNET_ID_1}
+        - ${file(env-bobabeam.yml):SUBNET_ID_2}
+    events:
+      - http:
+          path: get.layerzero.transactions
+          method: post
+          cors: true
+    layers:
+      - ${file(env-bobabeam.yml):LAYERS}

ops_boba/api/watcher-api/serverless-bobabnb.yml

@@ -116,3 +116,20 @@ functions:
           cors: true
     layers:
       - ${file(env-bobabnb.yml):LAYERS}
+  watcher_getLayerZeroTransactions:
+    handler: watcher_getLayerZeroTransactions.watcher_getLayerZeroTransactions
+    memorySize: 10240 # optional, in MB, default is 1024
+    timeout: 60 # optional, in seconds, default is 6
+    vpc:
+      securityGroupIds:
+        - ${file(env-bobabnb.yml):SECURITY_GROUPS}
+      subnetIds:
+        - ${file(env-bobabnb.yml):SUBNET_ID_1}
+        - ${file(env-bobabnb.yml):SUBNET_ID_2}
+    events:
+      - http:
+          path: get.layerzero.transactions
+          method: post
+          cors: true
+    layers:
+      - ${file(env-bobabnb.yml):LAYERS}

ops_boba/api/watcher-api/serverless-bobabnbtestnet.yml

@@ -116,3 +116,20 @@ functions:
           cors: true
     layers:
       - ${file(env-boba-bnb-testnet.yml):LAYERS}
+  watcher_getLayerZeroTransactions:
+    handler: watcher_getLayerZeroTransactions.watcher_getLayerZeroTransactions
+    memorySize: 10240 # optional, in MB, default is 1024
+    timeout: 60 # optional, in seconds, default is 6
+    vpc:
+      securityGroupIds:
+        - ${file(env-boba-bnb-testnet.yml):SECURITY_GROUPS}
+      subnetIds:
+        - ${file(env-boba-bnb-testnet.yml):SUBNET_ID_1}
+        - ${file(env-boba-bnb-testnet.yml):SUBNET_ID_2}
+    events:
+      - http:
+          path: get.layerzero.transactions
+          method: post
+          cors: true
+    layers:
+      - ${file(env-boba-bnb-testnet.yml):LAYERS}

ops_boba/api/watcher-api/serverless-bobafuji.yml

@@ -116,3 +116,20 @@ functions:
           cors: true
     layers:
       - ${file(env-boba-fuji.yml):LAYERS}
+  watcher_getLayerZeroTransactions:
+    handler: watcher_getLayerZeroTransactions.watcher_getLayerZeroTransactions
+    memorySize: 10240 # optional, in MB, default is 1024
+    timeout: 60 # optional, in seconds, default is 6
+    vpc:
+      securityGroupIds:
+        - ${file(env-boba-fuji.yml):SECURITY_GROUPS}
+      subnetIds:
+        - ${file(env-boba-fuji.yml):SUBNET_ID_1}
+        - ${file(env-boba-fuji.yml):SUBNET_ID_2}
+    events:
+      - http:
+          path: get.layerzero.transactions
+          method: post
+          cors: true
+    layers:
+      - ${file(env-boba-fuji.yml):LAYERS}

ops_boba/api/watcher-api/serverless-bobaoperatestnet.yml

@@ -116,3 +116,20 @@ functions:
           cors: true
     layers:
       - ${file(env-boba-opera-testnet.yml):LAYERS}
+  watcher_getLayerZeroTransactions:
+    handler: watcher_getLayerZeroTransactions.watcher_getLayerZeroTransactions
+    memorySize: 10240 # optional, in MB, default is 1024
+    timeout: 60 # optional, in seconds, default is 6
+    vpc:
+      securityGroupIds:
+        - ${file(env-boba-opera-testnet.yml):SECURITY_GROUPS}
+      subnetIds:
+        - ${file(env-boba-opera-testnet.yml):SUBNET_ID_1}
+        - ${file(env-boba-opera-testnet.yml):SUBNET_ID_2}
+    events:
+      - http:
+          path: get.layerzero.transactions
+          method: post
+          cors: true
+    layers:
+      - ${file(env-boba-opera-testnet.yml):LAYERS}

ops_boba/api/watcher-api/watcher_getLayerZeroTransactions.py

@@ -3,7 +3,7 @@
 import pymysql
 
 
-def watcher_getLayerZeroTransaction(event, context):
+def watcher_getLayerZeroTransactions(event, context):
     # Parse incoming event
     body = json.loads(event["body"])
     address = body.get("address")

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

@@ -11,6 +11,8 @@ import { getCoinImage } from 'util/coinImage'
 import * as S from './listToken.styles'
 import { BRIDGE_TYPE } from 'util/constant'
 
+import networkService from 'services/networkService'
+
 function ListToken({
   token,
   chain,
@@ -111,16 +113,16 @@ function ListToken({
                   >
                     Fast Bridge to L2
                 </Button>
-                {token.symbol === 'BOBA' &&
+                {token.symbol === 'BOBA' && !networkService.L1ChainAsset.foundation &&
                   <Button
                     onClick={() => { handleModalClick('depositModal', token, BRIDGE_TYPE.MULTI_CHAIN_BRIDGE) }}
                     color='primary'
                     disabled={disabled}
                     variant="contained"
-                    tooltip="A multi-chain bridge to Alt L1."
+                    tooltip="A multi-chain bridge to Ethereum."
                     fullWidth
                   >
-                    Bridge to alt L1
+                    Bridge to Ethereum
                   </Button>
                 }
               </>
@@ -226,7 +228,7 @@ function ListToken({
               >
                 Fast Bridge to L2
             </Button>
-            {token.symbol === 'BOBA' &&
+            {token.symbol === 'BOBA' && !networkService.L1ChainAsset.foundation &&
 
               <Button
                 onClick={() => { handleModalClick('depositModal', token, BRIDGE_TYPE.MULTI_CHAIN_BRIDGE) }}
@@ -235,7 +237,7 @@ function ListToken({
                 variant="contained"
                 fullWidth
               >
-                Bridge to alt L1
+                Bridge to Ethereum
               </Button>
             }
             </>

packages/boba/gateway/src/containers/history/History.js

@@ -48,6 +48,8 @@ import Tabs from 'components/tabs/Tabs'
 
 import { POLL_INTERVAL } from 'util/constant'
 
+import networkService from 'services/networkService'
+
 function History() {
 
   const theme = useTheme()
@@ -139,7 +141,7 @@ function History() {
           <Tabs
             onClick={tab => {dispatch(setActiveHistoryTab(tab))}}
             activeTab={activeTab}
-            tabs={['All', 'Ethereum to Boba Ethereum L2', 'Boba Ethereum L2 to Ethereum', 'Bridge between L1s', 'Pending']}
+            tabs={['All', `${networkService.L1ChainAsset.name} to ${networkService.L1ChainAsset.l2Name}`, `${networkService.L1ChainAsset.l2Name} to ${networkService.L1ChainAsset.name}`, 'Bridge between L1s', 'Pending']}
           />
 
           {activeTab === 'All' && (
@@ -149,14 +151,14 @@ function History() {
             />
           )}
 
-          {activeTab === 'Ethereum to Boba Ethereum L2' &&
+          {activeTab === `${networkService.L1ChainAsset.name} to ${networkService.L1ChainAsset.l2Name}` &&
             <Deposits
               searchHistory={searchHistory}
               transactions={transactions}
             />
           }
 
-          {activeTab === 'Boba Ethereum L2 to Ethereum' &&
+          {activeTab === `${networkService.L1ChainAsset.l2Name} to ${networkService.L1ChainAsset.name}` &&
             <Exits
               searchHistory={searchHistory}
               transactions={transactions}

packages/boba/gateway/src/containers/history/TX_Deposits.js

@@ -28,6 +28,8 @@ import Transaction from 'components/transaction/Transaction'
 
 import * as S from './History.styles';
 
+import networkService from 'services/networkService'
+
 const PER_PAGE = 10
 
 function TX_Deposits({ searchHistory, transactions }) {
@@ -125,7 +127,7 @@ function TX_Deposits({ searchHistory, transactions }) {
                     title={`Hash: ${i.hash}`}
                     time={moment.unix(i.timeStamp).format('lll')}
                     blockNumber={`Block ${i.blockNumber}`}
-                    chain={`Ethereum to Boba Ethereum L2 ${i.activity === 'ClientDepositL1Batch' ? 'in Batch' : ''}`}
+                    chain={`${networkService.L1ChainAsset.name} to ${networkService.L1ChainAsset.l2Name} ${i.activity === 'ClientDepositL1Batch' ? 'in Batch' : ''}`}
                     typeTX={`TX Type: ${metaData}`}
                     detail={details}
                     oriChain={chain}

packages/boba/gateway/src/containers/modals/deposit/steps/InputStep.js

@@ -20,6 +20,8 @@ import { WrapperActionsModal } from 'components/modal/Modal.styles'
 import BN from 'bignumber.js'
 import { ethers } from 'ethers'
 
+import networkService from 'services/networkService'
+
 function InputStep({ handleClose, token, isBridge, openTokenPicker }) {
 
   const dispatch = useDispatch()
@@ -67,7 +69,7 @@ function InputStep({ handleClose, token, isBridge, openTokenPicker }) {
       )
     }
     if (res) {
-      dispatch(setActiveHistoryTab('Ethereum to Boba Ethereum L2'))
+      dispatch(setActiveHistoryTab(`${networkService.L1ChainAsset.Name} to ${networkService.L1ChainAsset.l2name}`))
       handleClose()
     }
 

packages/boba/gateway/src/containers/modals/deposit/steps/InputStepBatch.js

@@ -101,7 +101,7 @@ function InputStepBatch({ isBridge, handleClose }) {
     )
 
     if (res) {
-      dispatch(setActiveHistoryTab('Boba Ethereum L2 to Ethereum'))
+      dispatch(setActiveHistoryTab(`${networkService.L1ChainAsset.l2Name} to ${networkService.L1ChainAsset.name}`))
       dispatch(
         openAlert(
           `Your funds were bridged to the L1LP in batch.`

packages/boba/gateway/src/containers/modals/deposit/steps/InputStepFast.js

@@ -159,7 +159,7 @@ function InputStepFast({ handleClose, token, isBridge, openTokenPicker }) {
       res = await dispatch(depositL1LP(token.address, value_Wei_String))
 
       if (res) {
-        dispatch(setActiveHistoryTab('Ethereum to Boba Ethereum L2'))
+        dispatch(setActiveHistoryTab(`${networkService.L1ChainAsset.Name} to ${networkService.L1ChainAsset.l2name}`))
         dispatch(
           openAlert(
             `${networkService.L1NativeTokenSymbol} was bridged. You will receive approximately
@@ -195,7 +195,7 @@ function InputStepFast({ handleClose, token, isBridge, openTokenPicker }) {
     )
 
     if (res) {
-      dispatch(setActiveHistoryTab('Ethereum to Boba Ethereum L2'))
+      dispatch(setActiveHistoryTab(`${networkService.L1ChainAsset.Name} to ${networkService.L1ChainAsset.l2name}`))
       dispatch(
         openAlert(
           `${token.symbol} was bridged to the L1LP. You will receive approximately

packages/boba/gateway/src/containers/modals/deposit/steps/InputStepMultiChain.js

@@ -22,9 +22,10 @@ import { useTheme } from '@emotion/react'
 import { WrapperActionsModal } from 'components/modal/Modal.styles'
 
 import BN from 'bignumber.js'
-import Select from 'components/select/Select'
-import { selectAltL1DepositCost } from 'selectors/balanceSelector'
-import { fetchAltL1DepositFee } from 'actions/balanceAction'
+import parse from 'html-react-parser'
+
+import { selectAltL1DepositCost, selectL1FeeBalance } from 'selectors/balanceSelector'
+import { fetchAltL1DepositFee, fetchL1FeeBalance } from 'actions/balanceAction'
 
 import networkService from 'services/networkService'
 
@@ -50,14 +51,15 @@ function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker })
   const dispatch = useDispatch()
 
   const [ value, setValue ] = useState('')
-  const [ altL1Bridge, setAltL1Bridge ] = useState('')
+  const [ altL1Bridge, setAltL1Bridge ] = useState(networkService.L1ChainAsset.l1NameShort)
 
   const [ validValue, setValidValue ] = useState(false)
   const depositLoading = useSelector(selectLoading([ 'DEPOSIT_ALTL1/CREATE' ]))
 
   const signatureStatus = useSelector(selectSignatureStatus_depositTRAD)
   const lookupPrice = useSelector(selectLookupPrice)
   const depositFees = useSelector(selectAltL1DepositCost)
+  const feeBalance = useSelector(selectL1FeeBalance) //amount of ETH on L1 to pay gas
 
   const maxValue = logAmount(token.balance, token.decimals)
 
@@ -96,6 +98,7 @@ function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker })
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
   useEffect(() => {
+    dispatch(fetchL1FeeBalance()) //ETH balance for paying gas
     dispatch(fetchAltL1DepositFee())
   },[dispatch])
 
@@ -139,25 +142,24 @@ function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker })
       </Box>)
   }
 
-  const onBridgeChange = (e) => {
-    setAltL1Bridge(e.target.value)
-  }
+  let ETHstring = ''
+  let warning = false
 
-  const customStyles = {
-    option: (provided, state) => ({
-      ...provided,
-      color: state.isSelected ? '#282828' : '#909090',
-    }),
+  if (depositFees[altL1Bridge]) {
+    if(Number(depositFees[altL1Bridge].fee) > Number(feeBalance)) {
+      warning = true
+      ETHstring = `WARNING: your L1 ${networkService.L1NativeTokenSymbol} balance of ${Number(feeBalance).toFixed(4)} is not sufficient to cover this transaction.`
+    }
   }
 
   return (
     <>
       <Box>
         <Typography variant="h2" sx={{ fontWeight: 700, mb: 3 }}>
-          Bridge {token && token.symbol ? token.symbol : ''} to Alt L1s
+          Bridge {token && token.symbol ? token.symbol : ''} to Ethereum
         </Typography>
 
-        <Box display="flex" fullWidth py={2} flexDirection="column"
+        {/* <Box display="flex" fullWidth py={2} flexDirection="column"
         >
           <Select
             options={options}
@@ -167,10 +169,10 @@ function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker })
             sx={{ marginBottom: '20px' }}
             value={altL1Bridge}
           />
-        </Box>
+        </Box> */}
 
         <Input
-          label="Amount to bridge to alt L1s"
+          label="Amount to bridge to Ethereum"
           placeholder="0.0"
           value={value}
           type="number"
@@ -194,7 +196,7 @@ function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker })
 
         {!!altL1Bridge && depositFees? <>
           <Typography variant='body2' sx={{ mt: 2 }}>
-            Estimated fee for bridging {value} {token.symbol} is {depositFees[altL1Bridge].fee} ETH
+            Estimated fee for bridging {value} {token.symbol} is {depositFees[altL1Bridge].fee} {networkService.L1NativeTokenSymbol}
           </Typography>
         </> : null}
 
@@ -204,6 +206,12 @@ function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker })
           </Typography>
         )}
 
+        {warning && (
+          <Typography variant="body2" sx={{mt: 2, color: 'red'}}>
+            {parse(ETHstring)}
+          </Typography>
+        )}
+
       </Box>
       <WrapperActionsModal>
         <Button
@@ -222,7 +230,7 @@ function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker })
           variant="contained"
           loading={depositLoading}
           tooltip={depositLoading ? "Your transaction is still pending. Please wait for confirmation." : "Click here to bridge your funds to alt L1"}
-          disabled={!validValue || !altL1Bridge}
+          disabled={!validValue || !altL1Bridge || warning}
           triggerTime={new Date()}
           fullWidth={isMobile}
         >