2020-05-14 20:18:08 +03:00
|
|
|
import React, { Suspense, useEffect } from 'react'
|
2019-05-30 23:42:25 +03:00
|
|
|
import styled from 'styled-components'
|
2020-05-14 20:18:08 +03:00
|
|
|
import ReactGA from 'react-ga'
|
|
|
|
|
import { BrowserRouter, Redirect, Route, RouteComponentProps, 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'
|
2020-05-06 03:40:59 +03:00
|
|
|
import Footer from '../components/Footer'
|
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-04-23 00:22:13 +03:00
|
|
|
|
|
|
|
|
import Popups from '../components/Popups'
|
2019-09-18 01:47:32 +03:00
|
|
|
import { isAddress, getAllQueryParams } from '../utils'
|
2018-10-07 00:24:17 +03:00
|
|
|
|
2020-05-08 19:05:52 +03:00
|
|
|
import Swap from './Swap'
|
|
|
|
|
import Send from './Send'
|
|
|
|
|
import Pool from './Pool'
|
|
|
|
|
import Add from './Pool/AddLiquidity'
|
|
|
|
|
import Remove from './Pool/RemoveLiquidity'
|
|
|
|
|
import Find from '../components/PoolFinder'
|
|
|
|
|
import Create from '../components/CreatePool'
|
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;
|
2020-04-23 00:22:13 +03:00
|
|
|
overflow-x: hidden;
|
2019-08-07 21:58:29 +03:00
|
|
|
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
|
|
|
|
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%;
|
2020-04-23 00:22:13 +03:00
|
|
|
box-sizing: border-box;
|
2020-05-06 03:40:59 +03:00
|
|
|
padding-top: 160px;
|
2019-08-07 21:58:29 +03:00
|
|
|
align-items: center;
|
|
|
|
|
flex: 1;
|
2019-05-30 23:42:25 +03:00
|
|
|
overflow: auto;
|
2020-05-06 03:40:59 +03:00
|
|
|
z-index: 10;
|
|
|
|
|
transition: height 0.3s ease;
|
2020-04-16 03:56:59 +03:00
|
|
|
|
|
|
|
|
& > * {
|
2020-05-07 23:46:45 +03:00
|
|
|
max-width: calc(420px + 4rem);
|
2020-04-16 03:56:59 +03:00
|
|
|
width: 90%;
|
|
|
|
|
}
|
2020-05-01 04:14:29 +03:00
|
|
|
|
2020-05-06 22:34:06 +03:00
|
|
|
${({ theme }) => theme.mediaWidth.upToExtraSmall`
|
|
|
|
|
padding-top: 16px;
|
2020-05-09 17:55:41 +03:00
|
|
|
padding-left: 16px;
|
|
|
|
|
padding-right: 16px;
|
2020-05-06 22:34:06 +03:00
|
|
|
`};
|
|
|
|
|
|
2020-05-01 04:14:29 +03:00
|
|
|
z-index: 1;
|
2019-05-30 23:42:25 +03:00
|
|
|
`
|
2019-04-25 19:12:47 +03:00
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
const Body = styled.div`
|
2020-05-07 23:46:45 +03:00
|
|
|
max-width: 420px;
|
2020-04-23 00:22:13 +03:00
|
|
|
width: 100%;
|
2020-05-06 03:40:59 +03:00
|
|
|
/* min-height: 340px; */
|
2020-03-31 00:07:12 +03:00
|
|
|
background: ${({ theme }) => theme.bg1};
|
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-04-23 00:22:13 +03:00
|
|
|
border-radius: 30px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 1rem;
|
2020-05-06 03:40:59 +03:00
|
|
|
position: relative;
|
2020-05-06 22:34:06 +03:00
|
|
|
margin-bottom: 10rem;
|
2020-05-06 03:40:59 +03:00
|
|
|
`
|
|
|
|
|
|
|
|
|
|
const StyledRed = styled.div`
|
|
|
|
|
width: 100%;
|
2020-05-07 23:46:45 +03:00
|
|
|
height: 200vh;
|
2020-05-11 22:12:38 +03:00
|
|
|
background: ${({ theme }) => `radial-gradient(50% 50% at 50% 50%, ${theme.primary1} 0%, ${theme.bg1} 100%)`};
|
2020-05-06 03:40:59 +03:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
opacity: 0.1;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
|
|
transform: translateY(-70vh);
|
|
|
|
|
|
|
|
|
|
@media (max-width: 960px) {
|
|
|
|
|
height: 300px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
transform: translateY(-150px);
|
|
|
|
|
}
|
2019-05-30 23:42:25 +03:00
|
|
|
`
|
2019-04-25 19:12:47 +03:00
|
|
|
|
2020-05-14 20:18:08 +03:00
|
|
|
// fires a GA pageview every time the route changes
|
|
|
|
|
function GoogleAnalyticsReporter({ location: { pathname, search } }: RouteComponentProps) {
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
ReactGA.pageview(`${pathname}${search}`)
|
|
|
|
|
}, [pathname, search])
|
|
|
|
|
return null
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Suspense fallback={null}>
|
2020-05-07 21:01:34 +03:00
|
|
|
<BrowserRouter>
|
2020-05-14 20:18:08 +03:00
|
|
|
<Route component={GoogleAnalyticsReporter} />
|
2020-05-07 21:01:34 +03:00
|
|
|
<AppWrapper>
|
|
|
|
|
<HeaderWrapper>
|
2020-05-08 21:50:27 +03:00
|
|
|
<Header />
|
2020-05-07 21:01:34 +03:00
|
|
|
</HeaderWrapper>
|
|
|
|
|
<BodyWrapper>
|
2020-05-08 21:50:27 +03:00
|
|
|
<Popups />
|
2020-05-14 19:57:19 +03:00
|
|
|
<Web3ReactManager>
|
|
|
|
|
<Body>
|
2020-05-08 21:50:27 +03:00
|
|
|
<NavigationTabs />
|
2019-08-07 21:58:29 +03:00
|
|
|
{/* this Suspense is for route code-splitting */}
|
2020-05-08 19:05:52 +03:00
|
|
|
<Switch>
|
2020-05-08 21:50:27 +03:00
|
|
|
<Route exact strict path="/" render={() => <Redirect to="/swap" />} />
|
|
|
|
|
<Route exact strict path="/swap" component={() => <Swap params={params} />} />
|
|
|
|
|
<Route exact strict path="/send" component={() => <Send params={params} />} />
|
|
|
|
|
<Route exact strict path="/find" component={() => <Find />} />
|
|
|
|
|
<Route exact strict path="/create" component={() => <Create />} />
|
|
|
|
|
<Route exact strict path="/pool" component={() => <Pool />} />
|
2020-05-08 19:05:52 +03:00
|
|
|
<Route
|
|
|
|
|
exact
|
|
|
|
|
strict
|
|
|
|
|
path={'/add/:tokens'}
|
|
|
|
|
component={({ match }) => {
|
|
|
|
|
const tokens = match.params.tokens.split('-')
|
|
|
|
|
const t0 =
|
|
|
|
|
tokens?.[0] === 'ETH' ? 'ETH' : isAddress(tokens?.[0]) ? isAddress(tokens[0]) : undefined
|
|
|
|
|
const t1 =
|
|
|
|
|
tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined
|
|
|
|
|
if (t0 && t1) {
|
|
|
|
|
return <Add token0={t0} token1={t1} />
|
|
|
|
|
} else {
|
2020-05-08 21:50:27 +03:00
|
|
|
return <Redirect to="/pool" />
|
2020-05-08 19:05:52 +03:00
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<Route
|
|
|
|
|
exact
|
|
|
|
|
strict
|
|
|
|
|
path={'/remove/:tokens'}
|
|
|
|
|
component={({ match }) => {
|
|
|
|
|
const tokens = match.params.tokens.split('-')
|
|
|
|
|
const t0 =
|
|
|
|
|
tokens?.[0] === 'ETH' ? 'ETH' : isAddress(tokens?.[0]) ? isAddress(tokens[0]) : undefined
|
|
|
|
|
const t1 =
|
|
|
|
|
tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined
|
|
|
|
|
if (t0 && t1) {
|
2020-05-08 21:50:27 +03:00
|
|
|
return <Remove token0={t0} token1={t1} />
|
2020-05-08 19:05:52 +03:00
|
|
|
} else {
|
2020-05-08 21:50:27 +03:00
|
|
|
return <Redirect to="/pool" />
|
2020-05-08 19:05:52 +03:00
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2020-05-08 21:50:27 +03:00
|
|
|
<Redirect to="/" />
|
2020-05-08 19:05:52 +03:00
|
|
|
</Switch>
|
2020-05-14 19:57:19 +03:00
|
|
|
</Body>
|
|
|
|
|
</Web3ReactManager>
|
2020-05-08 21:50:27 +03:00
|
|
|
<Footer />
|
2020-05-07 21:01:34 +03:00
|
|
|
</BodyWrapper>
|
2020-05-08 21:50:27 +03:00
|
|
|
<StyledRed />
|
2020-05-07 21:01:34 +03:00
|
|
|
</AppWrapper>
|
|
|
|
|
</BrowserRouter>
|
2019-05-30 23:42:25 +03:00
|
|
|
</Suspense>
|
|
|
|
|
</>
|
|
|
|
|
)
|
2018-10-07 00:24:17 +03:00
|
|
|
}
|
