Gateway: fixes. (#131)

* changes:
 - removed unused files
 - updated counter button
 - updated the flag for signature on changes.

* listing of available briding option

* changes:
  - fix for the json schema for bridges available with function in network service to get the bridges
  - fix for the styling issues on available bridges listing
  - show the default bridge fee incase of bridge is not vailable in boba bridges for tokens

* fix mobile screen layout for bridge

* updated the bridge page background style along with secondary main color

* minor tweeks

* Update index.js

* Update bridgeTransfer.js

* style cleanup

* Update DoExitStepFast.js

* Update DoExitStep.js

* re-enable exits

* revert changes

* revert changes

* Update index.js

* simplify bridge picking

* formatting cleanup

* support WAGMIv3

* changes: removed unused code and warning! (#147)

* Add Boba Bubble

Co-authored-by: CAPtheorem <[email protected]>
(cherry picked from commit 4360a70)

packages/boba/gateway/package.json

@@ -39,6 +39,7 @@
     "human-standard-token-abi": "^2.0.0",
     "lodash": "^4.17.20",
     "moment": "^2.24.0",
+    "node-forge": "^1.3.1",
     "patch-package": "^6.2.2",
     "react": "^17.0.2",
     "react-card-flip": "^1.1.5",
@@ -54,6 +55,7 @@
     "redux-thunk": "^2.3.0",
     "serve": "^11.3.2",
     "truncate-middle": "^1.0.6",
+    "ts-md5": "^1.2.11",
     "typescript": "^4.3.5"
   },
   "eslintConfig": {

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

@@ -119,8 +119,24 @@ export async function addToken ( tokenContractAddressL1 ) {
         erc20abi,
         networkService.L2Provider,
       )
-
-    } else if (_tokenContractAddressL1 === 'olo') {
+    } 
+    else if (_tokenContractAddressL1 === 'wagmiv3') {
+      if(tA['WAGMIv3'].L2 !== null) _tokenContractAddressL2 = tA['WAGMIv3'].L2.toLowerCase()
+      tokenContract = new ethers.Contract(
+        _tokenContractAddressL2, 
+        erc20abi,
+        networkService.L2Provider,
+      )
+    }
+    else if (_tokenContractAddressL1 === 'wagmiv3-oolong') {
+      if(tA['WAGMIv3-Oolong'].L2 !== null) _tokenContractAddressL2 = tA['WAGMIv3-Oolong'].L2.toLowerCase()
+      tokenContract = new ethers.Contract(
+        _tokenContractAddressL2, 
+        erc20abi,
+        networkService.L2Provider,
+      )
+    }
+    else if (_tokenContractAddressL1 === 'olo') {
       if(tA['OLO'].L2 !== null) _tokenContractAddressL2 = tA['OLO'].L2.toLowerCase()
       tokenContract = new ethers.Contract(
         _tokenContractAddressL2, 
@@ -164,7 +180,9 @@ export async function addToken ( tokenContractAddressL1 ) {
         _symbolL1 === 'WAGMIv0' || 
         _symbolL1 === 'WAGMIv1' ||
         _symbolL1 === 'WAGMIv2' ||
-        _symbolL1 === 'WAGMIv2-Oolong'
+        _symbolL1 === 'WAGMIv2-Oolong' ||
+        _symbolL1 === 'WAGMIv3' ||
+        _symbolL1 === 'WAGMIv3-Oolong'
         ) ? _tokenContractAddressL2 : _tokenContractAddressL1,
       addressL1: _tokenContractAddressL1,
       addressL2: _tokenContractAddressL2,

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

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react'
+import * as S from './availableBridges.styles'
+
+import { Link, Typography } from '@mui/material'
+
+import networkService from 'services/networkService'
+
+function AvailableBridges({ token = null }) {
+
+  const [ bridges, setBridges ] = useState([])
+
+  useEffect(() => {
+    if (token) {
+      let res = networkService.getTokenSpecificBridges(token.symbol)
+      setBridges(res)
+    }
+  }, [ token ])
+
+  return <S.BridgesContainer>
+    <S.LabelContainer>
+        <Typography variant="body2">
+          Third party bridges
+        </Typography>
+    </S.LabelContainer>
+    <S.Wrapper>
+      {bridges.map((bridge) => {
+        return <S.BridgeContent key={bridge.type}>
+          <Link color="inherit"
+            variant="body2"
+            href={bridge.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            sx={{ textDecoration: 'none' }}
+          >
+            <Typography variant="body1" component="span" my={1}> {bridge.name}</Typography>
+          </Link>
+        </S.BridgeContent>
+      })}
+    </S.Wrapper>
+  </S.BridgesContainer>
+}
+
+export default React.memo(AvailableBridges)

packages/boba/gateway/src/components/availableBridges/availableBridges.styles.js

@@ -0,0 +1,36 @@
+import { Box, styled } from "@mui/material"
+
+export const BridgesContainer = styled(Box)(({ theme }) => ({
+  background: theme.palette.background.secondary,
+  borderRadius: theme.palette.primary.borderRadius,
+  border: theme.palette.primary.border,
+  backdropFilter: 'blur(100px)',
+  flex: 1,
+  minHeight: 'fit-content',
+  padding: '20px',
+  width: '100%',
+}))
+
+export const Wrapper = styled(Box)(({ theme }) => ({
+  maxHeight: '300px',
+  overflowY: 'scroll',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '5px'
+}))
+
+export const LabelContainer = styled(Box)(({ theme }) => ({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-around',
+  gap: '10px',
+  alignItems: 'center',
+  margin: '10px 0px'
+}))
+
+export const BridgeContent = styled(Box)(({ theme, border }) => ({
+  borderRadius: theme.palette.primary.borderRadius,
+  background: theme.palette.background.secondaryLight,
+  padding: '5px 10px',
+  border: theme.palette.primary.border,
+}))

packages/boba/gateway/src/components/bridgeFee/BridgeFee.js

@@ -43,7 +43,7 @@ function BridgeFee({
     </S.BridgeFeeItemLabel>
   }
 
-  return <Box py={2}>
+  return <Box py={1}>
     {time ? <S.BridgeFeeItem>
       <ItemLabel label="Est. time" info={timeInfo} />
       <Typography variant='body2'>

packages/boba/gateway/src/components/bridgeFee/BridgeFee.styles.js

@@ -4,7 +4,7 @@ import { Box, Typography } from "@mui/material";
 export const BrigeFeeWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
-  margin: '10px 0',
+  margin: '5px 0',
   [ theme.breakpoints.down('sm') ]: {
     flexDirection: 'column',
   }

packages/boba/gateway/src/components/counterButton/CounterButton.js

@@ -16,48 +16,24 @@ limitations under the License. */
 
 import React from 'react'
 
-import { useTheme } from '@emotion/react'
-
-import * as styles from './CounterButton.module.scss';
+import { AddCircleOutline, RemoveCircleOutline } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
 
 function CounterButton ({
-  children,
-  style,
   onClick,
-  color,
-  variant,
-  fullWidth,
   disabled,
-  loading,
-  sx,
-  pulsate,
-  tooltip = '',
-  size,
-  className,
-  plus,
   minus,
 }) {
 
-  const theme = useTheme()
-
-  let buttonColor
-  if (theme.palette.mode === 'light') {
-    buttonColor = disabled ? 'rgba(0, 0, 0, 0.2)': 'rgba(0, 0, 0, 0.4)'
-  } else {
-    buttonColor = disabled ? 'rgba(255,255,255,0.2)': 'rgba(255,255,255,0.4)'
-  }
-  return (
-    <div
-      className={disabled ? styles.container_disabled: styles.container}
-      style={{borderColor: buttonColor}}
-      onClick={disabled ? () => '': onClick}
-    >
-      {!minus || plus ?
-        <div className={styles.line1} style={{backgroundColor: buttonColor}}></div>: <></>
-      }
-      <div className={styles.line2} style={{backgroundColor: buttonColor}}></div>
-    </div>
-  )
+  return <IconButton
+    color="primary"
+    size="medium"
+    disabled={disabled}
+    onClick={onClick}>
+    {
+      minus ? <RemoveCircleOutline fontSize="medium" /> : <AddCircleOutline fontSize="medium" />
+    }
+  </IconButton>
 }
 
 export default React.memo(CounterButton);