2019-05-30 23:42:25 +03:00
|
|
|
import React, { Suspense, lazy } from 'react'
|
|
|
|
|
import styled from 'styled-components'
|
2020-03-23 22:20:03 +03:00
|
|
|
import { transparentize } from 'polished'
|
2019-04-15 19:56:40 +03:00
|
|
|
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
|
2019-04-25 19:12:47 +03:00
|
|
|
|
2019-04-15 19:56:40 +03:00
|
|
|
import Header from '../components/Header'
|
2019-05-30 23:42:25 +03:00
|
|
|
import NavigationTabs from '../components/NavigationTabs'
|
2020-03-20 23:03:23 +03:00
|
|
|
import Web3ReactManager from '../components/Web3ReactManager'
|
2020-03-23 22:20:03 +03:00
|
|
|
import { useWeb3React } from '../hooks'
|
2019-09-18 01:47:32 +03:00
|
|
|
import { isAddress, getAllQueryParams } from '../utils'
|
2018-10-07 00:24:17 +03:00
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
const Swap = lazy(() => import('./Swap'))
|
|
|
|
|
const Send = lazy(() => import('./Send'))
|
2020-02-26 20:00:59 +03:00
|
|
|
const Pool = lazy(() => import('./Supply'))
|
|
|
|
|
const Add = lazy(() => import('./Supply/AddLiquidity'))
|
|
|
|
|
const Remove = lazy(() => import('./Supply/RemoveLiquidity'))
|
2020-03-11 17:44:39 +03:00
|
|
|
const Find = lazy(() => import('../components/PoolFinder'))
|
2018-10-27 10:54:52 +03:00
|
|
|
|
2019-08-07 21:58:29 +03:00
|
|
|
const AppWrapper = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: column;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
`
|
|
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
const HeaderWrapper = styled.div`
|
|
|
|
|
${({ theme }) => theme.flexRowNoWrap}
|
|
|
|
|
width: 100%;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
`
|
2018-10-27 10:54:52 +03:00
|
|
|
|
2020-03-23 22:20:03 +03:00
|
|
|
const BetaMessage = styled.div`
|
|
|
|
|
${({ theme }) => theme.flexRowNoWrap}
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
max-height: 40px;
|
|
|
|
|
flex: 1 0 auto;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding: 0.5rem 1rem;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
border: 1px solid ${({ theme }) => transparentize(0.6, theme.wisteriaPurple)};
|
|
|
|
|
background-color: ${({ theme }) => transparentize(0.9, theme.wisteriaPurple)};
|
|
|
|
|
border-radius: 1rem;
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
line-height: 1rem;
|
|
|
|
|
text-align: left;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: ${({ theme }) => theme.wisteriaPurple};
|
|
|
|
|
`
|
|
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
const BodyWrapper = styled.div`
|
2019-08-07 21:58:29 +03:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2019-05-30 23:42:25 +03:00
|
|
|
width: 100%;
|
2019-08-07 21:58:29 +03:00
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
2019-05-30 23:42:25 +03:00
|
|
|
overflow: auto;
|
|
|
|
|
`
|
2019-04-25 19:12:47 +03:00
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
const Body = styled.div`
|
2020-03-10 21:55:33 +03:00
|
|
|
max-width: 355px;
|
2019-08-07 21:58:29 +03:00
|
|
|
width: 90%;
|
2020-02-26 20:00:59 +03:00
|
|
|
background: ${({ theme }) => theme.panelBackground};
|
2020-03-06 06:57:41 +03:00
|
|
|
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
|
|
|
|
|
0px 24px 32px rgba(0, 0, 0, 0.01);
|
2020-02-26 20:00:59 +03:00
|
|
|
border-radius: 20px;
|
2020-03-13 23:26:29 +03:00
|
|
|
padding: 2rem 2rem 1rem 2rem;
|
2019-05-30 23:42:25 +03:00
|
|
|
`
|
2019-04-25 19:12:47 +03:00
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
export default function App() {
|
2019-09-18 01:47:32 +03:00
|
|
|
const params = getAllQueryParams()
|
2020-03-23 22:20:03 +03:00
|
|
|
|
|
|
|
|
const { chainId } = useWeb3React()
|
|
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Suspense fallback={null}>
|
2019-08-07 21:58:29 +03:00
|
|
|
<AppWrapper>
|
|
|
|
|
<HeaderWrapper>
|
|
|
|
|
<Header />
|
|
|
|
|
</HeaderWrapper>
|
|
|
|
|
<BodyWrapper>
|
2020-03-23 22:20:03 +03:00
|
|
|
{chainId === 1 && (
|
|
|
|
|
<BetaMessage>Incorrect network. This site is intended to be used on Ethereum testnets only.</BetaMessage>
|
|
|
|
|
)}
|
|
|
|
|
|
2019-08-07 21:58:29 +03:00
|
|
|
<Body>
|
|
|
|
|
<Web3ReactManager>
|
|
|
|
|
<BrowserRouter>
|
|
|
|
|
<NavigationTabs />
|
|
|
|
|
{/* this Suspense is for route code-splitting */}
|
|
|
|
|
<Suspense fallback={null}>
|
|
|
|
|
<Switch>
|
2020-03-20 23:03:23 +03:00
|
|
|
<Route exact strict path="/" render={() => <Redirect to={{ pathname: '/swap' }} />} />
|
2020-03-10 21:55:33 +03:00
|
|
|
<Route exact strict path="/find" component={() => <Find params={params} />} />
|
2019-09-18 01:47:32 +03:00
|
|
|
<Route exact strict path="/swap" component={() => <Swap params={params} />} />
|
2019-08-07 21:58:29 +03:00
|
|
|
<Route
|
|
|
|
|
exact
|
|
|
|
|
strict
|
|
|
|
|
path="/swap/:tokenAddress?"
|
2019-09-18 01:47:32 +03:00
|
|
|
render={({ match, location }) => {
|
2019-08-07 21:58:29 +03:00
|
|
|
if (isAddress(match.params.tokenAddress)) {
|
2019-09-18 01:47:32 +03:00
|
|
|
return (
|
|
|
|
|
<Swap
|
|
|
|
|
location={location}
|
|
|
|
|
initialCurrency={isAddress(match.params.tokenAddress)}
|
|
|
|
|
params={params}
|
|
|
|
|
/>
|
|
|
|
|
)
|
2019-08-07 21:58:29 +03:00
|
|
|
} else {
|
|
|
|
|
return <Redirect to={{ pathname: '/swap' }} />
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2019-09-18 01:47:32 +03:00
|
|
|
<Route exact strict path="/send" component={() => <Send params={params} />} />
|
2019-08-07 21:58:29 +03:00
|
|
|
<Route
|
|
|
|
|
exact
|
|
|
|
|
strict
|
|
|
|
|
path="/send/:tokenAddress?"
|
2020-01-02 21:13:20 +03:00
|
|
|
render={({ match }) => {
|
2019-08-07 21:58:29 +03:00
|
|
|
if (isAddress(match.params.tokenAddress)) {
|
2019-09-18 01:47:32 +03:00
|
|
|
return <Send initialCurrency={isAddress(match.params.tokenAddress)} params={params} />
|
2019-08-07 21:58:29 +03:00
|
|
|
} else {
|
|
|
|
|
return <Redirect to={{ pathname: '/send' }} />
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2020-02-26 20:00:59 +03:00
|
|
|
<Route exaxct path={'/supply'} component={() => <Pool params={params} />} />
|
2019-08-07 21:58:29 +03:00
|
|
|
<Route
|
2020-02-26 20:00:59 +03:00
|
|
|
exact
|
|
|
|
|
strict
|
|
|
|
|
path={'/add/:tokens'}
|
|
|
|
|
component={({ match }) => {
|
|
|
|
|
const tokens = match.params.tokens.split('-')
|
|
|
|
|
let t0
|
|
|
|
|
let t1
|
|
|
|
|
if (tokens) {
|
|
|
|
|
t0 = tokens[0] === 'ETH' ? 'ETH' : isAddress(tokens[0])
|
|
|
|
|
t1 = tokens[1] === 'ETH' ? 'ETH' : isAddress(tokens[1])
|
|
|
|
|
}
|
|
|
|
|
if (t0 && t1) {
|
|
|
|
|
return <Add params={params} token0={t0} token1={t1} />
|
|
|
|
|
} else {
|
|
|
|
|
return <Redirect to={{ pathname: '/supply' }} />
|
|
|
|
|
}
|
|
|
|
|
}}
|
2019-08-07 21:58:29 +03:00
|
|
|
/>
|
2020-03-04 21:48:43 +03:00
|
|
|
<Route
|
|
|
|
|
exact
|
|
|
|
|
strict
|
|
|
|
|
path={'/remove/:tokens'}
|
|
|
|
|
component={({ match }) => {
|
|
|
|
|
const tokens = match.params.tokens.split('-')
|
|
|
|
|
let t0
|
|
|
|
|
let t1
|
|
|
|
|
if (tokens) {
|
|
|
|
|
t0 = tokens[0] === 'ETH' ? 'ETH' : isAddress(tokens[0])
|
|
|
|
|
t1 = tokens[1] === 'ETH' ? 'ETH' : isAddress(tokens[1])
|
|
|
|
|
}
|
|
|
|
|
if (t0 && t1) {
|
|
|
|
|
return <Remove params={params} token0={t0} token1={t1} />
|
|
|
|
|
} else {
|
|
|
|
|
return <Redirect to={{ pathname: '/supply' }} />
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2020-02-26 20:00:59 +03:00
|
|
|
<Route exaxct path={'/remove'} component={() => <Remove params={params} />} />
|
2019-08-07 21:58:29 +03:00
|
|
|
</Switch>
|
|
|
|
|
</Suspense>
|
|
|
|
|
</BrowserRouter>
|
|
|
|
|
</Web3ReactManager>
|
|
|
|
|
</Body>
|
|
|
|
|
</BodyWrapper>
|
|
|
|
|
</AppWrapper>
|
2019-05-30 23:42:25 +03:00
|
|
|
</Suspense>
|
|
|
|
|
</>
|
|
|
|
|
)
|
2018-10-07 00:24:17 +03:00
|
|
|
}
|
