Clean gateway for supporting multi-chain bridges

packages/boba/gateway/.env.example

@@ -12,4 +12,3 @@ REACT_APP_GA4_MEASUREMENT_ID=
 REACT_APP_SENTRY_DSN=
 REACT_APP_ENABLE_LOCK_PAGE= # values can be 0 and 1
 REACT_APP_ZENDESK_KEY= ## KEY for the zendesk widget.
-REACT_APP_TARGET_CHAIN_URL=

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

@@ -146,12 +146,12 @@ function ListToken({
                     Fast Bridge to L2
                 </Button>
                 {token.symbol === 'BOBA' &&
-
                   <Button
                     onClick={() => { handleModalClick('depositModal', token, BRIDGE_TYPE.MULTI_CHAIN_BRIDGE) }}
                     color='primary'
                     disabled={disabled}
                     variant="contained"
+                    tooltip="A multi-chain bridge to Alt L1."
                     fullWidth
                   >
                     Bridge to alt L1

packages/boba/gateway/src/components/select/Select.js

@@ -32,6 +32,16 @@ function Select ({
   const selected = options.find(i => i.value === value);
 
   function renderOption (i) {
+    if (i.image && i.title) {
+      return (
+        <>
+          {i.image}
+          <Typography variant="body2">
+            {i.title}
+          </Typography>
+        </>
+      )
+    }
     if (i.title && i.subTitle) {
       return `${i.title} - ${i.subTitle}`;
     }

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

@@ -14,6 +14,7 @@ import {
   amountToUsd, logAmount,
   // toWei_String
 } from 'util/amountConvert'
+import { getCoinImage } from 'util/coinImage'
 
 import { selectLookupPrice } from 'selectors/lookupSelector'
 import { Box, Typography, useMediaQuery } from '@mui/material'
@@ -34,11 +35,15 @@ import { fetchAltL1DepositFee } from 'actions/balanceAction'
 
 function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker }) {
 
+  const getImageComponent = (symbol) => {
+    return <img src={getCoinImage(symbol)} height="35" width="35" alt={symbol} style={{padding: 5}}/>
+  }
+
   const options = [
-    { value: 'BNB', label: 'BNB', title: 'BNB' },
-    { value: 'AVALANCHE', label: 'Avalanche', title: 'Avalanche' },
-    { value: 'FANTOM', label: 'Fantom', title: 'Fantom' },
-    { value: 'MOONBEAM', label: 'Moonbeam', title: 'Moonbeam' }
+    { value: 'BNB', label: 'BNB', title: 'BNB', image: getImageComponent("BNB") },
+    { value: 'Avalanche', label: 'Avalanche', title: 'Avalanche', image: getImageComponent('AVAX') },
+    { value: 'Fantom', label: 'Fantom', title: 'Fantom', image: getImageComponent('FTM') },
+    { value: 'Moonbeam', label: 'Moonbeam', title: 'Moonbeam', image: getImageComponent('GLMR') },
   ]
 
   const dispatch = useDispatch()
@@ -190,7 +195,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}
+            Estimated fee for bridging {value} {token.symbol} is {depositFees[altL1Bridge].fee} ETH
           </Typography>
         </> : null}
 

packages/boba/gateway/src/services/networkService.js

@@ -116,6 +116,7 @@ const L2_ETH_Address = '0x4200000000000000000000000000000000000006'
 const L2MessengerAddress = '0x4200000000000000000000000000000000000007'
 const L2StandardBridgeAddress = '0x4200000000000000000000000000000000000010'
 const L2GasOracle = '0x420000000000000000000000000000000000000F'
+const AltL1ChainNames = [ 'BNB', 'Fantom', 'Avalanche', 'Moonbeam' ]
 
 let allAddresses = {}
 // preload allAddresses
@@ -1411,7 +1412,7 @@ class NetworkService {
 
       if(NFTs && Number(monsterBalance) > 0) {
         //console.log("checking monsters")
-        for (const [ key, value ] of Object.entries(NFTs)) {
+        for (const [ , value ] of Object.entries(NFTs)) {
           //console.log(`${key} value: ${value.name}`)
           if(value.name === 'TuringMonster') {
             const owner = await contract.ownerOf(value.tokenID)
@@ -4890,22 +4891,17 @@ class NetworkService {
     }
     try {
       console.log(`🏃 Estimate Fee Cross Chain Deposit`);
-      const pResponse = [ 'BNB', 'FANTOM', 'AVALANCHE' ].map(async (type) => {
+      const pResponse = AltL1ChainNames.map(async (type) => {
         let L0_ETH_ENDPOINT = allAddresses.Layer_Zero_Endpoint;
         let ETH_L1_BOBA_ADDRESS = allAddresses.ETH_BOBA_ADDRESS;
         let L0_CHAIN_ID = allAddresses.Layer_Zero_ChainId;
-        let ALT_L1_BOBA_ADDRESS = '';
-        let PROXY_ETH_L1_BRIDGE_ADDRESS_TO = '';
-
-        if (type === 'BNB') {
-          PROXY_ETH_L1_BRIDGE_ADDRESS_TO = allAddresses.Proxy__EthBridgeToBNB;
-          ALT_L1_BOBA_ADDRESS = allAddresses.BNB_TK_BOBA
-        } else if (type === 'FANTOM') {
-          PROXY_ETH_L1_BRIDGE_ADDRESS_TO = allAddresses.Proxy__EthBridgeToFantom;
-          ALT_L1_BOBA_ADDRESS = allAddresses.Fantom_TK_BOBA
-        } else if (type === 'AVALANCHE') {
-          PROXY_ETH_L1_BRIDGE_ADDRESS_TO = allAddresses.Proxy__EthBridgeToAvalanche;
-          ALT_L1_BOBA_ADDRESS = allAddresses.Avalanche_TK_BOBA
+        let ALT_L1_BOBA_ADDRESS = allAddresses[`Proxy__EthBridgeTo${type}`];
+        let PROXY_ETH_L1_BRIDGE_ADDRESS_TO = allAddresses[`${type}_TK_BOBA`];
+
+        // Layer zero doesn't support moonbase
+        // return 0 for those bridges that haven't been implemented yet
+        if (typeof ALT_L1_BOBA_ADDRESS === 'undefined' || typeof PROXY_ETH_L1_BRIDGE_ADDRESS_TO === 'undefined') {
+          return {type, fee: '0' }
         }
 
         const Proxy__EthBridge = new ethers.Contract(
@@ -4969,22 +4965,18 @@ class NetworkService {
       return
     }
     try {
-      let PROXY_ETH_L1_BRIDGE_ADDRESS_TO = '';
-      let ALT_L1_BOBA_ADDRESS = '';
       let L0_ETH_ENDPOINT = allAddresses.Layer_Zero_Endpoint;
+      let ETH_L1_BOBA_ADDRESS = allAddresses.ETH_BOBA_ADDRESS;
+      let ALT_L1_BOBA_ADDRESS = allAddresses[`Proxy__EthBridgeTo${type}`];
+      let PROXY_ETH_L1_BRIDGE_ADDRESS_TO = allAddresses[`${type}_TK_BOBA`];
 
-      if (type === 'BNB') {
-        PROXY_ETH_L1_BRIDGE_ADDRESS_TO = allAddresses.Proxy__EthBridgeToBNB;
-        ALT_L1_BOBA_ADDRESS = allAddresses.BNB_TK_BOBA
-      } else if (type === 'FANTOM') {
-        PROXY_ETH_L1_BRIDGE_ADDRESS_TO = allAddresses.Proxy__EthBridgeToFantom;
-        ALT_L1_BOBA_ADDRESS = allAddresses.Fantom_TK_BOBA
-      } else if (type === 'AVALANCHE') {
-        PROXY_ETH_L1_BRIDGE_ADDRESS_TO = allAddresses.Proxy__EthBridgeToAvalanche;
-        ALT_L1_BOBA_ADDRESS = allAddresses.Avalanche_TK_BOBA
-      }
-
-      let ETH_L1_BOBA_ADDRESS = allAddresses[ 'ETH_BOBA_ADDRESS' ];
+      console.log({
+        type,
+        PROXY_ETH_L1_BRIDGE_ADDRESS_TO,
+        ETH_L1_BOBA_ADDRESS,
+        ALT_L1_BOBA_ADDRESS,
+        L0_ETH_ENDPOINT
+      })
 
       /* proxy eth bridge contract */
       const Proxy__EthBridge = new ethers.Contract(

packages/boba/gateway/src/util/coinImage.js

@@ -29,6 +29,8 @@ import wagmiv2Logo from 'images/wagmiv2.png'
 import wagmiv3Logo from 'images/wagmiv3.png'
 import wagmiv2OLOLogo from 'images/wagmiv2olo.png'
 import oloLogo from 'images/olo.svg'
+import avaxLog from 'images/avax.svg'
+import glmrLog from 'images/glmr.svg'
 
 export const getCoinImage = (symbol) => {
 
@@ -134,6 +136,12 @@ export const getCoinImage = (symbol) => {
     case "OLO":
       logo = oloLogo;
       break;
+    case "AVAX":
+      logo = avaxLog;
+      break;
+    case "GLMR":
+      logo = glmrLog;
+      break;
     default:
       logo = ethLogo;
       break;

packages/boba/gateway/src/util/constant.js

@@ -2,7 +2,6 @@ import moment from 'moment'
 
 require('dotenv').config()
 export const POLL_INTERVAL = process.env.REACT_APP_POLL_INTERVAL
-export const TARGET_CHAIN_URL = process.env.REACT_APP_TARGET_CHAIN_URL
 
 export const BRIDGE_TYPE = {
   FAST_BRIDGE: "FAST_BRIDGE",