From 405bfa5a61f5d1f5102c6da361656fc07720e988 Mon Sep 17 00:00:00 2001
From: cby3149 <cby3149@gmail.com>
Date: Wed, 24 Aug 2022 15:28:51 -0400
Subject: [PATCH] Clean the gateway for supporting multi-chains

---
 packages/boba/gateway/.env.example            |  1 -
 .../src/components/listToken/listToken.js     |  2 +-
 .../gateway/src/components/select/Select.js   | 10 ++++
 .../deposit/steps/InputStepMultiChain.js      | 17 ++++---
 packages/boba/gateway/src/images/avax.svg     |  4 ++
 packages/boba/gateway/src/images/glmr.svg     | 21 +++++++++
 .../gateway/src/services/networkService.js    | 47 +++++--------------
 packages/boba/gateway/src/util/coinImage.js   |  8 ++++
 packages/boba/gateway/src/util/constant.js    |  1 -
 9 files changed, 68 insertions(+), 43 deletions(-)
 create mode 100644 packages/boba/gateway/src/images/avax.svg
 create mode 100644 packages/boba/gateway/src/images/glmr.svg

diff --git a/packages/boba/gateway/.env.example b/packages/boba/gateway/.env.example
index 6cd9a4fb63..4839b98dc6 100644
--- a/packages/boba/gateway/.env.example
+++ b/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=
diff --git a/packages/boba/gateway/src/components/listToken/listToken.js b/packages/boba/gateway/src/components/listToken/listToken.js
index 082a62ddc2..7691e7b4fc 100644
--- a/packages/boba/gateway/src/components/listToken/listToken.js
+++ b/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
diff --git a/packages/boba/gateway/src/components/select/Select.js b/packages/boba/gateway/src/components/select/Select.js
index 8bb0775de8..89449fad1f 100644
--- a/packages/boba/gateway/src/components/select/Select.js
+++ b/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}`;
     }
diff --git a/packages/boba/gateway/src/containers/modals/deposit/steps/InputStepMultiChain.js b/packages/boba/gateway/src/containers/modals/deposit/steps/InputStepMultiChain.js
index f0235663fe..9a60c4edb4 100644
--- a/packages/boba/gateway/src/containers/modals/deposit/steps/InputStepMultiChain.js
+++ b/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()
@@ -93,7 +98,7 @@ function InputStepMultiChain({ handleClose, token, isBridge, openTokenPicker })
 
   useEffect(() => {
     dispatch(fetchAltL1DepositFee())
-  },[])
+  },[dispatch])
 
   useEffect(() => {
     if (signatureStatus && depositLoading) {
@@ -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}
 
diff --git a/packages/boba/gateway/src/images/avax.svg b/packages/boba/gateway/src/images/avax.svg
new file mode 100644
index 0000000000..e2316b863a
--- /dev/null
+++ b/packages/boba/gateway/src/images/avax.svg
@@ -0,0 +1,4 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="1503" height="1504" viewBox="0 0 1503 1504" fill="none">
+<rect x="287" y="258" width="928" height="844" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1502.5 752C1502.5 1166.77 1166.27 1503 751.5 1503C336.734 1503 0.5 1166.77 0.5 752C0.5 337.234 336.734 1 751.5 1C1166.27 1 1502.5 337.234 1502.5 752ZM538.688 1050.86H392.94C362.314 1050.86 347.186 1050.86 337.962 1044.96C327.999 1038.5 321.911 1027.8 321.173 1015.99C320.619 1005.11 328.184 991.822 343.312 965.255L703.182 330.935C718.495 303.999 726.243 290.531 736.021 285.55C746.537 280.2 759.083 280.2 769.599 285.55C779.377 290.531 787.126 303.999 802.438 330.935L876.42 460.079L876.797 460.738C893.336 489.635 901.723 504.289 905.385 519.669C909.443 536.458 909.443 554.169 905.385 570.958C901.695 586.455 893.393 601.215 876.604 630.549L687.573 964.702L687.084 965.558C670.436 994.693 661.999 1009.46 650.306 1020.6C637.576 1032.78 622.263 1041.63 605.474 1046.62C590.161 1050.86 573.004 1050.86 538.688 1050.86ZM906.75 1050.86H1115.59C1146.4 1050.86 1161.9 1050.86 1171.13 1044.78C1181.09 1038.32 1187.36 1027.43 1187.92 1015.63C1188.45 1005.1 1181.05 992.33 1166.55 967.307C1166.05 966.455 1165.55 965.588 1165.04 964.706L1060.43 785.75L1059.24 783.735C1044.54 758.877 1037.12 746.324 1027.59 741.472C1017.08 736.121 1004.71 736.121 994.199 741.472C984.605 746.453 976.857 759.552 961.544 785.934L857.306 964.891L856.949 965.507C841.69 991.847 834.064 1005.01 834.614 1015.81C835.352 1027.62 841.44 1038.5 851.402 1044.96C860.443 1050.86 875.94 1050.86 906.75 1050.86Z" fill="#E84142"/>
+</svg>
\ No newline at end of file
diff --git a/packages/boba/gateway/src/images/glmr.svg b/packages/boba/gateway/src/images/glmr.svg
new file mode 100644
index 0000000000..aa8d41ae4c
--- /dev/null
+++ b/packages/boba/gateway/src/images/glmr.svg
@@ -0,0 +1,21 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+  <g id="logo-symbol" transform="translate(-83 -294)">
+    <rect id="Rectangle_37" data-name="Rectangle 37" width="200" height="200" transform="translate(83 294)" fill="none"/>
+    <g id="symbol" transform="translate(-224.332 64.165)">
+      <path id="Path_185" data-name="Path 185" d="M808.276,400.23A61.3,61.3,0,0,0,747,461.543h0c0,.043,0,.084,0,.128l0,.1a3.016,3.016,0,0,0,3.017,2.845H866.534a3.015,3.015,0,0,0,3.016-2.845l.005-.1c0-.044,0-.085,0-.128h0A61.3,61.3,0,0,0,808.276,400.23Z" transform="translate(-382.261 -154.395)" fill="#53cbc8"/>
+      <path id="Path_186" data-name="Path 186" d="M673.015,617.7a3.729,3.729,0,1,1-3.73-3.732A3.73,3.73,0,0,1,673.015,617.7Z" transform="translate(-348.846 -242.095)" fill="#e1147b"/>
+      <path id="Path_187" data-name="Path 187" d="M853.29,585.287H728.267a3.677,3.677,0,0,0-3.231,5.423c.02.039.041.078.062.116a3.668,3.668,0,0,0,3.232,1.924h124.9a3.669,3.669,0,0,0,3.232-1.924l.062-.116A3.678,3.678,0,0,0,853.29,585.287Z" transform="translate(-373.07 -230.326)" fill="#e1147b"/>
+      <path id="Path_188" data-name="Path 188" d="M869.9,527.924H728.262a3.681,3.681,0,0,0-3.666,3.887c0,.039,0,.078.006.117a3.665,3.665,0,0,0,3.667,3.459H869.9a3.666,3.666,0,0,0,3.667-3.459c0-.039,0-.078.006-.117A3.681,3.681,0,0,0,869.9,527.924Z" transform="translate(-373.068 -206.789)" fill="#e1147b"/>
+      <path id="Path_189" data-name="Path 189" d="M833.6,671.331H769.767a3.675,3.675,0,0,0-1.638,6.964l.234.117a3.657,3.657,0,0,0,1.637.382h63.364a3.662,3.662,0,0,0,1.638-.382l.233-.117A3.675,3.675,0,0,0,833.6,671.331Z" transform="translate(-390.097 -265.632)" fill="#e1147b"/>
+      <path id="Path_190" data-name="Path 190" d="M899.737,642.649H835.906a3.676,3.676,0,0,0-1.637,6.964l.233.117a3.668,3.668,0,0,0,1.638.381H899.5a3.665,3.665,0,0,0,1.638-.381l.233-.117A3.676,3.676,0,0,0,899.737,642.649Z" transform="translate(-417.236 -253.863)" fill="#e1147b"/>
+      <path id="Path_191" data-name="Path 191" d="M798.341,620.256l-.108-.116a3.674,3.674,0,0,1,2.694-6.173h103.6a3.674,3.674,0,0,1,2.694,6.173l-.108.116a3.7,3.7,0,0,1-2.693,1.174H801.034A3.7,3.7,0,0,1,798.341,620.256Z" transform="translate(-402.878 -242.095)" fill="#e1147b"/>
+      <path id="Path_192" data-name="Path 192" d="M691.913,613.968h49.472a3.676,3.676,0,0,1,1.637,6.964l-.233.117a3.657,3.657,0,0,1-1.637.382h-49a3.658,3.658,0,0,1-1.638-.382l-.233-.117A3.676,3.676,0,0,1,691.913,613.968Z" transform="translate(-358.154 -242.095)" fill="#e1147b"/>
+      <path id="Path_193" data-name="Path 193" d="M709.367,531.655a3.729,3.729,0,1,1-3.73-3.731A3.73,3.73,0,0,1,709.367,531.655Z" transform="translate(-363.763 -206.789)" fill="#e1147b"/>
+      <path id="Path_194" data-name="Path 194" d="M786.534,561.345c.01-.038.02-.078.031-.116a3.672,3.672,0,0,0-3.549-4.622H679.4a3.671,3.671,0,0,0-3.549,4.622c.01.038.021.078.032.116a3.681,3.681,0,0,0,3.547,2.724H782.986a3.683,3.683,0,0,0,3.548-2.724" transform="translate(-353.019 -218.558)" fill="#e1147b"/>
+      <path id="Path_195" data-name="Path 195" d="M660.5,560.337a3.729,3.729,0,1,1-3.729-3.731A3.731,3.731,0,0,1,660.5,560.337Z" transform="translate(-343.711 -218.558)" fill="#e1147b"/>
+      <path id="Path_196" data-name="Path 196" d="M709.367,589.018a3.729,3.729,0,1,1-3.73-3.731A3.731,3.731,0,0,1,709.367,589.018Z" transform="translate(-363.763 -230.326)" fill="#e1147b"/>
+      <path id="Path_197" data-name="Path 197" d="M817.008,646.381a3.729,3.729,0,1,1-3.73-3.731A3.73,3.73,0,0,1,817.008,646.381Z" transform="translate(-407.928 -253.863)" fill="#e1147b"/>
+      <path id="Path_198" data-name="Path 198" d="M750.868,675.063a3.729,3.729,0,1,1-3.729-3.731A3.73,3.73,0,0,1,750.868,675.063Z" transform="translate(-380.79 -265.632)" fill="#e1147b"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/boba/gateway/src/services/networkService.js b/packages/boba/gateway/src/services/networkService.js
index e6fdc28d59..4a3595546f 100644
--- a/packages/boba/gateway/src/services/networkService.js
+++ b/packages/boba/gateway/src/services/networkService.js
@@ -107,7 +107,6 @@ import addresses_Mainnet from "@boba/register/addresses/addressesMainnet_0x8376a
 import chain_Rinkeby from "@boba/register/addresses/chainRinkeby"
 
 import { bobaBridges } from 'util/bobaBridges'
-import { TARGET_CHAIN_URL } from 'util/constant'
 
 require('dotenv').config()
 
@@ -117,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
@@ -1412,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)
@@ -4892,22 +4892,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(
@@ -4975,22 +4970,10 @@ class NetworkService {
     }
     try {
       console.log(`Start 🏃 🏃`)
-      let PROXY_ETH_L1_BRIDGE_ADDRESS_TO = '';
-      let ALT_L1_BOBA_ADDRESS = '';
       let L0_ETH_ENDPOINT = allAddresses.Layer_Zero_Endpoint;
-
-      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' ];
+      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`];
 
       console.log({
         type,
@@ -5000,10 +4983,6 @@ class NetworkService {
         L0_ETH_ENDPOINT
       })
 
-      //  allAddresses[ `ALT_L1_BOBA_ADDRESS_${type}` ];
-
-      // const AltL1Provider = new ethers.providers.StaticJsonRpcProvider(TARGET_CHAIN_URL);
-
       /* proxy eth bridge contract */
       const Proxy__EthBridge = new ethers.Contract(
         PROXY_ETH_L1_BRIDGE_ADDRESS_TO,
diff --git a/packages/boba/gateway/src/util/coinImage.js b/packages/boba/gateway/src/util/coinImage.js
index 3028ea67ea..38eda22180 100644
--- a/packages/boba/gateway/src/util/coinImage.js
+++ b/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;
diff --git a/packages/boba/gateway/src/util/constant.js b/packages/boba/gateway/src/util/constant.js
index 439fd82615..14b9ea1b15 100644
--- a/packages/boba/gateway/src/util/constant.js
+++ b/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",