Gateway : Bridge to Alt L1s

packages/boba/gateway/src/actions/balanceAction.js

@@ -62,6 +62,10 @@ export function fetchFastDepositCost(address) {
     return createAction('FETCH/FASTDEPOSIT/COST', () => networkService.getFastDepositCost(address))
 }
 
+export function fetchAltL1DepositFee() {
+    return createAction('FETCH/ALTL1DEPOSIT/COST', () => networkService.getAltL1DepositFee())
+}
+
 export function fetchFastDepositBatchCost(tokenList) {
   return createAction('FETCH/FASTDEPOSIT/BATCH/COST', () => networkService.getFastDepositBatchCost(tokenList))
 }

packages/boba/gateway/src/actions/networkAction.js

@@ -100,6 +100,11 @@ export function depositErc20(value, currency, currencyL2) {
   )
 }
 
+//DEPOSIT ERC20 to Alt L1 bridge
+export function depositErc20ToL1(payload) {
+  return createAction('DEPOSIT_ALTL1/CREATE', () => networkService.depositErc20ToL1(payload))
+}
+
 //FARM
 export function farmL1(value_Wei_String, currencyAddress) {
   return createAction('FARM/CREATE', () =>
@@ -118,7 +123,7 @@ export function getReward(currencyAddress, value_Wei_String, L1orL2Pool) {
 }
 
 export function withdrawLiquidity(currencyAddress, value_Wei_String, L1orL2Pool) {
-  console.log("Withdrawing ERC20 Liquidity")
+
   return createAction('FARM/WITHDRAW', () =>
     networkService.withdrawLiquidity(currencyAddress, value_Wei_String, L1orL2Pool)
   )

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

@@ -18,6 +18,7 @@ import { selectLookupPrice } from 'selectors/lookupSelector'
 import { amountToUsd, logAmount } from 'util/amountConvert'
 import { getCoinImage } from 'util/coinImage'
 import * as S from './listToken.styles'
+import { BRIDGE_TYPE } from 'util/constant'
 
 function ListToken({
   token,
@@ -125,7 +126,7 @@ function ListToken({
               {enabled && chain === 'L1' &&
                 <>
                   <Button
-                    onClick={() => { handleModalClick('depositModal', token, false) }}
+                    onClick={() => { handleModalClick('depositModal', token, BRIDGE_TYPE.CLASSIC_BRIDGE) }}
                     color='neutral'
                     variant="outlined"
                     disabled={disabled}
@@ -134,18 +135,29 @@ function ListToken({
                   >
                     Bridge to L2
                   </Button>
-
                   <Button
-                    onClick={() => { handleModalClick('depositModal', token, true) }}
+                    onClick={() => { handleModalClick('depositModal', token, BRIDGE_TYPE.FAST_BRIDGE) }}
                     color='primary'
                     disabled={disabled}
                     variant="contained"
                     tooltip="A swap-based bridge to Boba L2. This option is only available if the pool balance is sufficient."
                     fullWidth
                   >
                     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
                   </Button>
-                </>
+                }
+              </>
               }
 
               {enabled && chain === 'L2' &&
@@ -368,13 +380,14 @@ function ListToken({
         <S.TableCell
           sx={{
             gap: '5px',
-            width: '40%'
+            width: '40%',
+            justifyContent: 'flex-start'
           }}
         >
           {enabled && chain === 'L1' &&
             <>
               <Button
-                onClick={() => { handleModalClick('depositModal', token, false) }}
+                onClick={() => { handleModalClick('depositModal', token, BRIDGE_TYPE.CLASSIC_BRIDGE) }}
                 color='neutral'
                 variant="outlined"
                 disabled={disabled}
@@ -385,15 +398,27 @@ function ListToken({
               </Button>
 
               <Button
-                onClick={() => { handleModalClick('depositModal', token, true) }}
+                onClick={() => { handleModalClick('depositModal', token, BRIDGE_TYPE.FAST_BRIDGE) }}
                 color='primary'
                 disabled={disabled}
                 variant="outlined"
                 tooltip="A swap-based bridge to Boba L2. This option is only available if the pool balance is sufficient."
                 fullWidth
               >
                 Fast Bridge to L2
+            </Button>
+            {token.symbol === 'BOBA' &&
+
+              <Button
+                onClick={() => { handleModalClick('depositModal', token, BRIDGE_TYPE.MULTI_CHAIN_BRIDGE) }}
+                color='primary'
+                disabled={disabled}
+                variant="contained"
+                fullWidth
+              >
+                Bridge to alt L1
               </Button>
+            }
             </>
           }
           {enabled && chain === 'L2' &&

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/components/transaction/Transaction.js

@@ -43,6 +43,9 @@ function Transaction({
   oriHash,
   amountTx,
   completion = '',
+  tx_ref = null,
+  eventType,
+  toChain
 }) {
 
   const [dropDownBox, setDropDownBox] = useState(false)
@@ -133,10 +136,14 @@ function Transaction({
             {completion !== '' &&
               <Typography variant="overline" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>{completion}</Typography>
             }
+            {toChain && <Typography variant="overline" style={{ lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)' }}>
+              {toChain}
+            </Typography>}
             <Typography variant="body3" style={{lineHeight: '1.1em', fontSize: '0.7em', color: 'rgba(255, 255, 255, 0.3)'}}>
               {oriChain}&nbsp;Hash:&nbsp;
               <a
-                href={chainLink({hash:oriHash, chain: oriChain})}
+                href={
+                  oriChain === 'L0' ? tx_ref : chainLink({ hash: oriHash, chain: oriChain })}
                 target={'_blank'}
                 rel='noopener noreferrer'
                 style={{ color: theme.palette.mode === 'light' ? 'black' : 'white', fontFamily: 'MessinaSB', fontSize: '0.8em'}}
@@ -159,6 +166,9 @@ function Transaction({
           <Typography variant="overline" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>
             {typeTX}
           </Typography>
+          {eventType ? <Typography variant="overline" style={{lineHeight: '1.1em', color: 'rgba(255, 255, 255, 0.3)'}}>
+            {eventType}
+          </Typography> : null}
           {amountTx ?
             <Typography
               variant="overline"

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

@@ -36,6 +36,7 @@ import Exits from './TX_Exits'
 import Deposits from './TX_Deposits'
 import All from './TX_All'
 import Pending from './TX_Pending'
+import Transfers from './TX_Transfers'
 
 import * as S from './History.styles'
 import * as styles from './TX_All.module.scss'
@@ -138,7 +139,7 @@ function History() {
           <Tabs
             onClick={tab => {dispatch(setActiveHistoryTab(tab))}}
             activeTab={activeTab}
-            tabs={['All', 'Bridge to L2', 'Bridge to L1', 'Pending']}
+            tabs={['All', 'Ethereum to Boba Ethereum L2', 'Boba Ethereum L2 to Ethereum', 'Bridge between L1s', 'Pending']}
           />
 
           {activeTab === 'All' && (
@@ -148,20 +149,27 @@ function History() {
             />
           )}
 
-          {activeTab === 'Bridge to L2' &&
+          {activeTab === 'Ethereum to Boba Ethereum L2' &&
             <Deposits
               searchHistory={searchHistory}
               transactions={transactions}
             />
           }
 
-          {activeTab === 'Bridge to L1' &&
+          {activeTab === 'Boba Ethereum L2 to Ethereum' &&
             <Exits
               searchHistory={searchHistory}
               transactions={transactions}
             />
           }
 
+          {activeTab === 'Bridge between L1s' &&
+            <Transfers
+              searchHistory={searchHistory}
+              transactions={transactions}
+            />
+          }
+
           {activeTab === 'Pending' &&
             <Pending
               searchHistory={searchHistory}

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

@@ -125,7 +125,7 @@ function TX_Deposits({ searchHistory, transactions }) {
                     title={`Hash: ${i.hash}`}
                     time={moment.unix(i.timeStamp).format('lll')}
                     blockNumber={`Block ${i.blockNumber}`}
-                    chain={`Bridge to L2 ${i.activity === 'ClientDepositL1Batch' ? 'in Batch' : ''}`}
+                    chain={`Ethereum to Boba Ethereum L2 ${i.activity === 'ClientDepositL1Batch' ? 'in Batch' : ''}`}
                     typeTX={`TX Type: ${metaData}`}
                     detail={details}
                     oriChain={chain}

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

@@ -106,7 +106,7 @@ function TX_Exits({ searchHistory, transactions, chainLink }) {
     return (
       <Transaction
         key={`${index}`}
-        chain='Bridge to L1'
+        chain='Boba Ethereum L2 to Ethereum'
         title={`${chain} Hash: ${i.hash}`}
         blockNumber={`Block ${i.blockNumber}`}
         time={timeLabel}

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

@@ -0,0 +1,102 @@
+/*
+Copyright 2021-present Boba Network.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+
+import { Box, Grid } from '@mui/material'
+import moment from 'moment'
+import React, { useState } from 'react'
+
+
+import { logAmount } from 'util/amountConvert'
+
+import Pager from 'components/pager/Pager'
+import Transaction from 'components/transaction/Transaction'
+import * as S from './History.styles'
+import { useSelector } from 'react-redux'
+import { selectLoading } from 'selectors/loadingSelector'
+
+const PER_PAGE = 8
+
+function TX_Transfers({ searchHistory, transactions, chainLink }) {
+
+  const [page, setPage] = useState(1)
+  const loading = useSelector(selectLoading(['TRANSACTION/GETALL']))
+  const _transfers = transactions.filter(i => {
+    return i.hash.includes(searchHistory) && i.to !== null && i.altL1
+  })
+
+  const renderTransfers = _transfers.map((i, index) => {
+
+    const chain = (i.chain === 'L0pending') ? 'L0' : i.chain
+
+    let timeLabel = moment.unix(i.timeStamp).format('lll')
+
+    let amountTx = `${logAmount(i.amount, 18, 3)} BOBA`;
+
+    return (
+      <Transaction
+        key={`${index}`}
+        chain={`Bridge between L1's`}
+        title={`${chain} Hash: ${i.hash}`}
+        blockNumber={`Block ${i.blockNumber}`}
+        time={timeLabel}
+        button={undefined}
+        typeTX={``}
+        oriChain={chain}
+        oriHash={i.hash}
+        amountTx={amountTx}
+        tx_ref={i.reference}
+        eventType={i.event_type}
+        toChain={i.destination_chain}
+      />
+    )
+  })
+
+  const startingIndex = page === 1 ? 0 : ((page - 1) * PER_PAGE)
+  const endingIndex = page * PER_PAGE
+  const paginatedExits = renderTransfers.slice(startingIndex, endingIndex)
+
+  let totalNumberOfPages = Math.ceil(renderTransfers.length / PER_PAGE)
+
+  //if totalNumberOfPages === 0, set to one so we don't get the strange "Page 1 of 0" display
+  if (totalNumberOfPages === 0) totalNumberOfPages = 1
+
+  return (
+    <S.HistoryContainer>
+      <Pager
+        currentPage={page}
+        isLastPage={paginatedExits.length < PER_PAGE}
+        totalPages={totalNumberOfPages}
+        onClickNext={() => setPage(page + 1)}
+        onClickBack={() => setPage(page - 1)}
+      />
+
+      <Grid item xs={12}>
+        <Box>
+          <S.Content>
+            {!renderTransfers.length && !loading && (
+              <S.Disclaimer>Scanning for exits...</S.Disclaimer>
+            )}
+            {!renderTransfers.length && loading && (
+              <S.Disclaimer>Loading...</S.Disclaimer>
+            )}
+            {React.Children.toArray(paginatedExits)}
+          </S.Content>
+        </Box>
+      </Grid>
+    </S.HistoryContainer>
+  );
+}
+
+export default React.memo(TX_Transfers)

packages/boba/gateway/src/containers/home/Home.js

@@ -59,7 +59,7 @@ import {
 import {
   selectBaseEnabled,
   selectAccountEnabled,
-  selectNetwork,
+  selectNetwork
 } from 'selectors/setupSelector'
 import { selectAlert, selectError } from 'selectors/uiSelector'
 import { selectModalState } from 'selectors/uiSelector'

packages/boba/gateway/src/containers/modals/deposit/DepositModal.js

@@ -21,7 +21,9 @@ import { closeModal } from 'actions/uiAction'
 
 import InputStep from './steps/InputStep'
 import InputStepFast from './steps/InputStepFast'
+import InputStepMultiChain from './steps/InputStepMultiChain'
 import { fetchTransactions } from 'actions/networkAction'
+import { BRIDGE_TYPE } from 'util/constant'
 
 function DepositModal({ open, token, fast }) {
 
@@ -34,11 +36,22 @@ function DepositModal({ open, token, fast }) {
 
   return (
     <Modal open={open} maxWidth="md" onClose={handleClose} minHeight={!!fast ? "" : "500px"}>
-      {!!fast ? (
+
+      {
+        BRIDGE_TYPE.FAST_BRIDGE === fast ? <InputStepFast handleClose={handleClose} token={token}/> : null
+      }
+      {
+        BRIDGE_TYPE.CLASSIC_BRIDGE === fast ? <InputStep handleClose={handleClose} token={token}/> : null
+      }
+      {
+        BRIDGE_TYPE.MULTI_CHAIN_BRIDGE === fast ? <InputStepMultiChain handleClose={handleClose} token={token}/> : null
+      }
+
+      {/* {!!fast ? (
           <InputStepFast handleClose={handleClose} token={token}/>
         ) : (
           <InputStep handleClose={handleClose} token={token}/>
-      )}
+      )} */}
     </Modal>
   )
 }