Fix/banxa and bridges

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "[typescript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
   },
   "eslint.workingDirectories": [

packages/boba/gateway/.gitignore

@@ -1,2 +1,4 @@
 .idea
 coverage
+.env.prod
+.env.stage

packages/boba/gateway/src/components/availableBridges/bobaBridges.ts

@@ -0,0 +1,44 @@
+import { IBridges } from './types'
+
+export const bobaBridges: IBridges[] = [
+  {
+    name: 'Synapse',
+    type: 'SYNAPSE',
+    link: 'https://synapseprotocol.com/',
+    tokens: ['ETH', 'nETH', 'gOHM', 'DAI', 'USDC', 'USDT', 'SYN', 'nUSD'],
+  },
+  {
+    name: 'Anyswap',
+    type: 'ANYSWAP',
+    link: 'https://anyswap.exchange/#/router',
+    tokens: ['MIM', 'AVAX', 'FRAX', 'FTM', 'FXS', 'MATIC'],
+  },
+  {
+    name: 'Celer',
+    type: 'CELER',
+    link: 'https://cbridge.celer.network/#/transfer',
+    tokens: ['ETH', 'BOBA', 'FRAX', 'OLO'],
+  },
+  {
+    name: 'BoringDAO',
+    type: 'BORINGDAO',
+    link: 'https://oportal.boringdao.com/twoway',
+    tokens: ['USDT'],
+  },
+  {
+    name: 'PolyBridge',
+    type: 'POLYBRIDGE',
+    link: 'https://bridge.poly.network/',
+    tokens: ['BOBA'],
+  },
+  {
+    name: 'Symbiosis',
+    type: 'SYMBIOSIS',
+    link: 'https://app.symbiosis.finance/swap',
+    tokens: ['USDC'],
+  },
+]
+
+export const bridgeByToken = (symbol: string) => {
+  return bobaBridges.filter((bridge) => bridge.tokens.includes(symbol))
+}

packages/boba/gateway/src/components/availableBridges/index.tsx

@@ -0,0 +1,107 @@
+import { Text } from 'components/global/text'
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { bridgeByToken } from './bobaBridges'
+import { useSelector } from 'react-redux'
+import { selectActiveNetwork, selectActiveNetworkType } from 'selectors'
+import { NETWORK, NETWORK_TYPE } from 'util/network/network.util'
+import { prepareBanxaUrl } from 'util/banxa'
+import { AvailableBridgesProps, IBridges } from './types'
+
+const AvailableBridgeContainer = styled.div(({ theme }) => ({
+  background: theme.bg.glassy,
+  filter: 'drop-shadow(0px 4px 20px rgba(35, 92, 41, 0.06))',
+  borderRadius: '20px',
+  border: 'none',
+  backdropFilter: 'blur(50px)',
+  flex: 1,
+  minHeight: 'fit-content',
+  padding: '20px 24px',
+  width: '100%',
+  maxWidth: '600px',
+}))
+
+const AvailableBridgeTitle = styled(Text)`
+  font-size: 1rem;
+  margin-bottom: 10px;
+`
+
+const Link = styled.a`
+  text-decoration: none;
+  color: inherit;
+`
+
+const AvailableBridgeContent = styled(Text)(({ theme }) => ({
+  borderRadius: '12px',
+  background: theme.bg.secondary,
+  border: theme.border,
+  lineHeight: 1.5,
+  padding: '10px',
+  marginBottom: '5px',
+  fontSize: '1rem',
+}))
+
+export const AvailableBridges = ({
+  token = null,
+  walletAddress = '',
+}: AvailableBridgesProps) => {
+  const [bridges, setbridges] = useState<IBridges[]>([])
+  const [banxaUrl, setBanxaUrl] = useState<string>('')
+  const [isBanxaEnable, setIsBanxaEnable] = useState<boolean>(false)
+
+  const networkType = useSelector(selectActiveNetworkType())
+  const network = useSelector(selectActiveNetwork())
+
+  useEffect(() => {
+    if (token) {
+      const _bridges = bridgeByToken(token?.symbol)
+      setbridges(_bridges)
+
+      if (token?.symbol === 'ETH' || token?.symbol === 'BOBA') {
+        const _banxaUrl = prepareBanxaUrl({
+          symbol: token.symbol,
+          address: walletAddress,
+        })
+        setBanxaUrl(_banxaUrl)
+        setIsBanxaEnable(true)
+      }
+    }
+  }, [token, walletAddress])
+
+  if (
+    !token ||
+    networkType === NETWORK_TYPE.TESTNET ||
+    network !== NETWORK.ETHEREUM ||
+    (!isBanxaEnable && !bridges.length)
+  ) {
+    return <></>
+  }
+
+  return (
+    <AvailableBridgeContainer>
+      <AvailableBridgeTitle>Third party bridges</AvailableBridgeTitle>
+      {network === NETWORK.ETHEREUM && isBanxaEnable && (
+        <Link
+          key="banxa"
+          data-testid="banxa"
+          href={banxaUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <AvailableBridgeContent>Banxa</AvailableBridgeContent>
+        </Link>
+      )}
+      {bridges.map((bridge: any) => (
+        <Link
+          data-testid="bridge"
+          key={bridge.name}
+          href={bridge.link}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <AvailableBridgeContent>{bridge.name}</AvailableBridgeContent>
+        </Link>
+      ))}
+    </AvailableBridgeContainer>
+  )
+}

packages/boba/gateway/src/components/availableBridges/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avaialble Bridges should match snapshot connected on mainnet 1`] = `
+<DocumentFragment>
+  .c1 {
+  padding: 0px;
+  margin: 0px;
+  font-weight: 400;
+  font-size: 0.9rem;
+  line-height: 1.25;
+}
+
+.c0 {
+  background: rgba(255,255,255,0.04);
+  -webkit-filter: drop-shadow(0px 4px 20px rgba(35,92,41,0.06));
+  filter: drop-shadow(0px 4px 20px rgba(35,92,41,0.06));
+  border-radius: 20px;
+  border: none;
+  -webkit-backdrop-filter: blur(50px);
+  backdrop-filter: blur(50px);
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  min-height: -webkit-fit-content;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+  padding: 20px 24px;
+  width: 100%;
+  max-width: 600px;
+}
+
+.c2 {
+  font-size: 1rem;
+  margin-bottom: 10px;
+}
+
+.c3 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+}
+
+.c4 {
+  border-radius: 12px;
+  background: rgba(255,255,255,0.14);
+  border: solid 1px #2d2f3a;
+  line-height: 1.5;
+  padding: 10px;
+  margin-bottom: 5px;
+  font-size: 1rem;
+}
+
+<div
+    class="c0"
+  >
+    <p
+      class="c1 c2"
+    >
+      Third party bridges
+    </p>
+    <a
+      class="c3"
+      data-testid="banxa"
+      href="https://boba.banxa.com/?coinType=ETH&fiatType=USD&blockchain=Boba Network&walletAddress=random-code"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <p
+        class="c1 c4"
+      >
+        Banxa
+      </p>
+    </a>
+    <a
+      class="c3"
+      data-testid="bridge"
+      href="https://synapseprotocol.com/"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <p
+        class="c1 c4"
+      >
+        Synapse
+      </p>
+    </a>
+    <a
+      class="c3"
+      data-testid="bridge"
+      href="https://cbridge.celer.network/#/transfer"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <p
+        class="c1 c4"
+      >
+        Celer
+      </p>
+    </a>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avaialble Bridges should match snapshot network type is TESTNET 1`] = `<DocumentFragment />`;
+
+exports[`Avaialble Bridges should match snapshot selected network is not ETHEREUM 1`] = `<DocumentFragment />`;
+
+exports[`Avaialble Bridges should match snapshot token value is null 1`] = `<DocumentFragment />`;