From 65ee30165875cc24922cccace63e2188b6aa0eef Mon Sep 17 00:00:00 2001
From: - <->
Date: Wed, 29 Sep 2021 12:40:10 -0300
Subject: [PATCH] links to relay and faucet inside bridge

---
 src/modals/ChainModal/index.tsx    |   7 +-
 src/pages/bridge/faucet/index.tsx  | 187 +++++++++++++++++++++++++++++
 src/pages/bridge/history/index.tsx |   4 +-
 src/pages/bridge/index.tsx         |   2 +-
 src/pages/eclipse/index.tsx        |   2 +-
 src/pages/faucet/index.tsx         | 144 ----------------------
 6 files changed, 194 insertions(+), 152 deletions(-)
 create mode 100644 src/pages/bridge/faucet/index.tsx
 delete mode 100644 src/pages/faucet/index.tsx

diff --git a/src/modals/ChainModal/index.tsx b/src/modals/ChainModal/index.tsx
index bb8a478..6f91605 100644
--- a/src/modals/ChainModal/index.tsx
+++ b/src/modals/ChainModal/index.tsx
@@ -85,7 +85,7 @@ export default function ChainModal({
   const { chainId, library, account, activate } = useWeb3React(BridgeContextName)
 
   const goToRelay = () => {
-    window.open('https://app.relaychain.com/transfer', '_blank').focus();
+    window.open('https://app.relaychain.com/transfer', '_blank').focus()
   }
 
   return (
@@ -136,7 +136,7 @@ export default function ChainModal({
 
         {/* Redirect to relay bridge while implementing UI integration */}
         <button className="w-full col-span-1 p-px rounded bg-dark-800 hover:bg-dark-900" onClick={() => goToRelay()}>
-          <div className="flex items-center w-full h-full p-3 space-x-3 rounded bg-dark-1000">
+          <div className="flex items-center w-full h-full p-3 space-x-3 rounded">
             <Image
               src={NETWORK_ICON[ChainId.AVALANCHE]}
               alt={`Select ${NETWORK_LABEL[ChainId.AVALANCHE]} Network`}
@@ -150,7 +150,7 @@ export default function ChainModal({
         </button>
 
         <button className="w-full col-span-1 p-px rounded bg-dark-800 hover:bg-dark-900" onClick={() => goToRelay()}>
-          <div className="flex items-center w-full h-full p-3 space-x-3 rounded bg-dark-1000">
+          <div className="flex items-center w-full h-full p-3 space-x-3 rounded">
             <Image
               src={NETWORK_ICON[ChainId.MATIC]}
               alt={`Select ${NETWORK_LABEL[ChainId.MATIC]} Network`}
@@ -162,7 +162,6 @@ export default function ChainModal({
             <ExternalLinkIcon style={{ width: '26px', height: '26px', marginLeft: 'auto' }} />
           </div>
         </button>
-
       </div>
     </Modal>
   )
diff --git a/src/pages/bridge/faucet/index.tsx b/src/pages/bridge/faucet/index.tsx
new file mode 100644
index 0000000..62853d5
--- /dev/null
+++ b/src/pages/bridge/faucet/index.tsx
@@ -0,0 +1,187 @@
+/* eslint-disable @next/next/link-passhref */
+
+import Head from 'next/head'
+import React, { useCallback, useState } from 'react'
+import { t } from '@lingui/macro'
+import { formatNumberScale } from '../../../functions'
+import { ButtonError } from '../../../components/Button'
+import { AutoColumn } from '../../../components/Column'
+import { AutoRow } from '../../../components/Row'
+import DoubleGlowShadow from '../../../components/DoubleGlowShadow'
+import SolarbeamLogo from '../../../components/SolarbeamLogo'
+import Container from '../../../components/Container'
+import Typography from '../../../components/Typography'
+import { i18n } from '@lingui/core'
+import Image from '../../../components/Image'
+import { useActiveWeb3React } from '../../../hooks'
+import Web3Connect from '../../../components/Web3Connect'
+import { Loader } from 'react-feather'
+import { useETHBalances } from '../../../state/wallet/hooks'
+import axios from 'axios'
+import ReCAPTCHA from 'react-google-recaptcha'
+import { FAUCET_ADDRESS } from '../../../constants'
+import NavLink from '../../../components/NavLink'
+
+export default function Faucet(): JSX.Element {
+  const { chainId, account, library } = useActiveWeb3React()
+  const [token, setToken] = useState('')
+  const tokenBalance = useETHBalances([FAUCET_ADDRESS])
+  const [pendingTx, setPendingTx] = useState(false)
+  const [requested, setRequested] = useState(false)
+  const [faucetResult, setFaucetResult] = useState({ status: 200, message: null })
+  const recaptchaRef: any = React.createRef()
+
+  const onReCAPTCHAChange = async (captchaCode) => {
+    if (!captchaCode) {
+      return
+    }
+
+    setPendingTx(true)
+
+    try {
+      const faucetResponse = await axios.post('/api/faucet', { address: account, 'g-recaptcha-response': captchaCode })
+      if (faucetResponse.data) {
+        setFaucetResult(faucetResponse.data)
+        if (faucetResponse.data.status == 200) {
+          setRequested(true)
+        } else if (faucetResponse.data.message.indexOf('daily limit') >= 0) {
+          setRequested(true)
+        }
+      }
+    } catch (err) {
+      setFaucetResult({ status: 400, message: 'Failed to send the request to the server.' })
+    } finally {
+      setPendingTx(false)
+    }
+  }
+
+  const handleRequest = useCallback(async () => {
+    recaptchaRef.current.execute()
+  }, [recaptchaRef])
+
+  return (
+    <>
+      <Head>
+        <title>Faucet | Solarbeam</title>
+        <meta key="description" name="description" content="Moonriver Faucet" />
+      </Head>
+
+      <SolarbeamLogo />
+
+      <ReCAPTCHA
+        ref={recaptchaRef}
+        size="invisible"
+        sitekey={'6LeaGV4cAAAAAE2HKmub-Ilnb7raS1JfhdfhfrP1'}
+        onChange={onReCAPTCHAChange}
+      />
+
+      <Container maxWidth="2xl" className="space-y-6">
+        <DoubleGlowShadow opacity="0.6">
+          <div className="p-4 space-y-4 rounded bg-dark-900" style={{ zIndex: 1 }}>
+            <div className="flex items-center justify-center mb-4 space-x-3">
+              <div className="grid grid-cols-3 rounded p-3px bg-dark-800 h-[46px]">
+                <NavLink
+                  activeClassName="font-bold border rounded text-high-emphesis border-dark-700 bg-dark-700"
+                  exact
+                  href={{
+                    pathname: '/bridge',
+                  }}
+                >
+                  <a className="flex items-center justify-center px-4 text-base font-medium text-center rounded-md text-secondary hover:text-high-emphesis ">
+                    <Typography component="h1" variant="lg">
+                      {i18n._(t`Bridge`)}
+                    </Typography>
+                  </a>
+                </NavLink>
+                <NavLink
+                  activeClassName="font-bold border rounded text-high-emphesis border-dark-700 bg-dark-700"
+                  exact
+                  href={{
+                    pathname: '/bridge/history',
+                  }}
+                >
+                  <a className="flex items-center justify-center px-4 text-base font-medium text-center rounded-md text-secondary hover:text-high-emphesis">
+                    <Typography component="h1" variant="lg">
+                      {i18n._(t`History`)}
+                    </Typography>
+                  </a>
+                </NavLink>
+                <NavLink
+                  activeClassName="font-bold border rounded text-high-emphesis border-dark-700 bg-dark-700"
+                  exact
+                  href={{
+                    pathname: '/bridge/faucet',
+                  }}
+                >
+                  <a className="flex items-center justify-center px-4 text-base font-medium text-center rounded-md text-secondary hover:text-high-emphesis">
+                    <Typography component="h1" variant="lg">
+                      {i18n._(t`Faucet`)}
+                    </Typography>
+                  </a>
+                </NavLink>
+              </div>
+            </div>
+            <div className="h-[570px] flex flex-col justify-center items-center">
+              <div className="p-4 mb-3 space-y-3 text-center">
+                <Typography component="h1" variant="base">
+                  A Faucet is a tool that provides a small amount of MOVR for users that used the bridge to start using
+                  Solarbeam.io without having to buy MOVR somewhere else.
+                </Typography>
+              </div>
+              <div className="flex flex-1 justify-center text-center items-center mt-8 mb-12">
+                <Image src="/images/faucet/moonriver-faucet.png" alt="Solarbeam" width={150} height={150} />
+              </div>
+              <div className="p-4 mb-3 space-y-1 text-center">
+                <Typography component="h1" variant="base">
+                  Faucet balance:{' '}
+                  {formatNumberScale(tokenBalance[FAUCET_ADDRESS]?.toSignificant(4, undefined, 2) ?? 0, false, 4)} MOVR
+                </Typography>
+                <Typography component="h1" variant="base">
+                  Faucet Address: {FAUCET_ADDRESS}
+                </Typography>
+              </div>
+
+              <AutoColumn gap={'md'}>
+                <div className={'flex items-center w-full'}>
+                  {!account ? (
+                    <Web3Connect size="lg" color="gradient" className="w-full" />
+                  ) : (
+                    <ButtonError
+                      className="font-bold text-light"
+                      onClick={handleRequest}
+                      style={{
+                        width: '100%',
+                      }}
+                      disabled={pendingTx || requested}
+                    >
+                      {pendingTx ? (
+                        <div>
+                          <AutoRow gap="6px" justify="center" align="center">
+                            Requesting <Loader stroke="white" />
+                          </AutoRow>
+                        </div>
+                      ) : (
+                        i18n._(t`Give me some MOVR`)
+                      )}
+                    </ButtonError>
+                  )}
+                </div>
+              </AutoColumn>
+              <div className="p-4 mb-3 space-y-3 text-center">
+                {faucetResult?.message && (
+                  <Typography
+                    component="h1"
+                    variant="base"
+                    className={`${faucetResult?.status == 200 ? 'text-green' : 'text-red'}`}
+                  >
+                    {faucetResult?.message}
+                  </Typography>
+                )}
+              </div>
+            </div>
+          </div>
+        </DoubleGlowShadow>
+      </Container>
+    </>
+  )
+}
diff --git a/src/pages/bridge/history/index.tsx b/src/pages/bridge/history/index.tsx
index 9c7a800..a03ccd4 100644
--- a/src/pages/bridge/history/index.tsx
+++ b/src/pages/bridge/history/index.tsx
@@ -265,7 +265,7 @@ export default function Bridge() {
                   activeClassName="font-bold border rounded text-high-emphesis border-dark-700 bg-dark-700"
                   exact
                   href={{
-                    pathname: '/faucet',
+                    pathname: '/bridge/faucet',
                   }}
                 >
                   <a className="flex items-center justify-center px-4 text-base font-medium text-center rounded-md text-secondary hover:text-high-emphesis">
@@ -297,7 +297,7 @@ export default function Bridge() {
               {!account && activeAccount ? (
                 <Web3Connect size="lg" color="gradient" className="w-full" />
               ) : (
-                <div className="space-y-2 p-4 rounded bg-dark-800 mb-2 h-[480px] overflow-y-auto">
+                <div className="space-y-2 p-4 rounded bg-dark-800 mb-2 h-[455px] overflow-y-auto">
                   {allTransactions && Object.keys(allTransactions).length > 0 ? (
                     <>
                       <div className="flex px-2 hidden md:flex text-base font-bold text-primary items-center">
diff --git a/src/pages/bridge/index.tsx b/src/pages/bridge/index.tsx
index c7ffde2..1197a55 100644
--- a/src/pages/bridge/index.tsx
+++ b/src/pages/bridge/index.tsx
@@ -501,7 +501,7 @@ export default function Bridge() {
                   activeClassName="font-bold border rounded text-high-emphesis border-dark-700 bg-dark-700"
                   exact
                   href={{
-                    pathname: '/faucet',
+                    pathname: '/bridge/faucet',
                   }}
                 >
                   <a className="flex items-center justify-center px-4 text-base font-medium text-center rounded-md text-secondary hover:text-high-emphesis">
diff --git a/src/pages/eclipse/index.tsx b/src/pages/eclipse/index.tsx
index 44b8d75..ffda811 100644
--- a/src/pages/eclipse/index.tsx
+++ b/src/pages/eclipse/index.tsx
@@ -17,7 +17,7 @@ export default function NFTLaunchpad(): JSX.Element {
       <div className="container px-0 mx-auto pb-6">
         <div className={`mb-2 grid grid-cols-12 gap-4`}>
           <div className="flex justify-center items-center col-span-12 lg:justify">
-            <Link href="/eclipse">Coming sooon</Link>
+            <Link href="/eclipse">Coming soon</Link>
           </div>
         </div>
       </div>
diff --git a/src/pages/faucet/index.tsx b/src/pages/faucet/index.tsx
deleted file mode 100644
index 1392e71..0000000
--- a/src/pages/faucet/index.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/* eslint-disable @next/next/link-passhref */
-
-import Head from 'next/head'
-import React, { useCallback, useState } from 'react'
-import { t } from '@lingui/macro'
-import { formatNumberScale } from '../../functions'
-import { ButtonError } from '../../components/Button'
-import { AutoColumn } from '../../components/Column'
-import { AutoRow } from '../../components/Row'
-import DoubleGlowShadow from '../../components/DoubleGlowShadow'
-import SolarbeamLogo from '../../components/SolarbeamLogo'
-import Container from '../../components/Container'
-import Typography from '../../components/Typography'
-import { i18n } from '@lingui/core'
-import Image from '../../components/Image'
-import { useActiveWeb3React } from '../../hooks'
-import Web3Connect from '../../components/Web3Connect'
-import { Loader } from 'react-feather'
-import { useETHBalances } from '../../state/wallet/hooks'
-import axios from 'axios'
-import ReCAPTCHA from 'react-google-recaptcha'
-import { FAUCET_ADDRESS } from '../../constants'
-
-export default function Faucet(): JSX.Element {
-  const { chainId, account, library } = useActiveWeb3React()
-  const [token, setToken] = useState('')
-  const tokenBalance = useETHBalances([FAUCET_ADDRESS])
-  const [pendingTx, setPendingTx] = useState(false)
-  const [requested, setRequested] = useState(false)
-  const [faucetResult, setFaucetResult] = useState({ status: 200, message: null })
-  const recaptchaRef: any = React.createRef()
-
-  const onReCAPTCHAChange = async (captchaCode) => {
-    if (!captchaCode) {
-      return
-    }
-
-    setPendingTx(true)
-
-    try {
-      const faucetResponse = await axios.post('/api/faucet', { address: account, 'g-recaptcha-response': captchaCode })
-      if (faucetResponse.data) {
-        setFaucetResult(faucetResponse.data)
-        if (faucetResponse.data.status == 200) {
-          setRequested(true)
-        } else if (faucetResponse.data.message.indexOf('daily limit') >= 0) {
-          setRequested(true)
-        }
-      }
-    } catch (err) {
-      setFaucetResult({ status: 400, message: 'Failed to send the request to the server.' })
-    } finally {
-      setPendingTx(false)
-    }
-  }
-
-  const handleRequest = useCallback(async () => {
-    recaptchaRef.current.execute()
-  }, [recaptchaRef])
-
-  return (
-    <>
-      <Head>
-        <title>Faucet | Solarbeam</title>
-        <meta key="description" name="description" content="Moonriver Faucet" />
-      </Head>
-
-      <SolarbeamLogo />
-
-      <ReCAPTCHA
-        ref={recaptchaRef}
-        size="invisible"
-        sitekey={'6LeaGV4cAAAAAE2HKmub-Ilnb7raS1JfhdfhfrP1'}
-        onChange={onReCAPTCHAChange}
-      />
-
-      <Container maxWidth="2xl" className="space-y-6">
-        <DoubleGlowShadow opacity="0.6">
-          <div className="p-4 space-y-4 rounded bg-dark-900" style={{ zIndex: 1 }}>
-            <div className="p-4 mb-3 space-y-3 text-center">
-              <Typography component="h1" variant="h2">
-                {i18n._(t`Moonriver Faucet`)}
-              </Typography>
-              <Typography component="h1" variant="base">
-                A Faucet is a tool that provides a small amount of MOVR for users that used the bridge to start using Solarbeam.io without having to
-                buy MOVR somewhere else.
-              </Typography>
-            </div>
-            <div className="flex flex-1 justify-center text-center items-center mt-8 mb-12">
-              <Image src="/images/faucet/moonriver-faucet.png" alt="Solarbeam" width={150} height={150} />
-            </div>
-            <div className="p-4 mb-3 space-y-1 text-center">
-              <Typography component="h1" variant="base">
-                Faucet balance:{' '}
-                {formatNumberScale(tokenBalance[FAUCET_ADDRESS]?.toSignificant(4, undefined, 2) ?? 0, false, 4)} MOVR
-              </Typography>
-              <Typography component="h1" variant="base">
-                Faucet Address: {FAUCET_ADDRESS}
-              </Typography>
-            </div>
-
-            <AutoColumn gap={'md'}>
-              <div className={'flex items-center w-full'}>
-                {!account ? (
-                  <Web3Connect size="lg" color="gradient" className="w-full" />
-                ) : (
-                  <ButtonError
-                    className="font-bold text-light"
-                    onClick={handleRequest}
-                    style={{
-                      width: '100%',
-                    }}
-                    disabled={pendingTx || requested}
-                  >
-                    {pendingTx ? (
-                      <div>
-                        <AutoRow gap="6px" justify="center" align="center">
-                          Requesting <Loader stroke="white" />
-                        </AutoRow>
-                      </div>
-                    ) : (
-                      i18n._(t`Give me some MOVR`)
-                    )}
-                  </ButtonError>
-                )}
-              </div>
-            </AutoColumn>
-            <div className="p-4 mb-3 space-y-3 text-center">
-              {faucetResult?.message && (
-                <Typography
-                  component="h1"
-                  variant="base"
-                  className={`${faucetResult?.status == 200 ? 'text-green' : 'text-red'}`}
-                >
-                  {faucetResult?.message}
-                </Typography>
-              )}
-            </div>
-          </div>
-        </DoubleGlowShadow>
-      </Container>
-    </>
-  )
-}