2020-05-19 02:23:58 +03:00
|
|
|
import React, { Suspense } from 'react'
|
2020-05-14 20:18:08 +03:00
|
|
|
import { BrowserRouter, Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom'
|
2020-05-19 02:23:58 +03:00
|
|
|
import styled from 'styled-components'
|
|
|
|
|
import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsReporter'
|
|
|
|
|
import Create from '../components/CreatePool'
|
|
|
|
|
import Footer from '../components/Footer'
|
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-05-19 02:23:58 +03:00
|
|
|
import Find from '../components/PoolFinder'
|
2020-04-23 00:22:13 +03:00
|
|
|
|
|
|
|
|
import Popups from '../components/Popups'
|
2020-05-19 02:23:58 +03:00
|
|
|
import Web3ReactManager from '../components/Web3ReactManager'
|
|
|
|
|
import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
|
2020-05-17 00:55:22 +03:00
|
|
|
import { isAddress } from '../utils'
|
2020-05-08 19:05:52 +03:00
|
|
|
import Pool from './Pool'
|
|
|
|
|
import Add from './Pool/AddLiquidity'
|
|
|
|
|
import Remove from './Pool/RemoveLiquidity'
|
2020-05-19 02:23:58 +03:00
|
|
|
import Send from './Send'
|
|
|
|
|
|
|
|
|
|
import Swap from './Swap'
|
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`
|
2020-05-16 17:44:26 +03:00
|
|
|
padding: 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-18 21:47:52 +03:00
|
|
|
// Redirects to swap but only replace the pathname
|
|
|
|
|
function RedirectPathToSwapOnly({ location }: RouteComponentProps) {
|
|
|
|
|
return <Redirect to={{ ...location, pathname: '/swap' }} />
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Redirects from the /swap/:outputCurrency path to the /swap?outputCurrency=:outputCurrency format
|
|
|
|
|
function RedirectToSwap(props: RouteComponentProps<{ outputCurrency: string }>) {
|
|
|
|
|
const {
|
|
|
|
|
location: { search },
|
|
|
|
|
match: {
|
|
|
|
|
params: { outputCurrency }
|
|
|
|
|
}
|
|
|
|
|
} = props
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Redirect
|
|
|
|
|
to={{
|
|
|
|
|
...props.location,
|
|
|
|
|
pathname: '/swap',
|
|
|
|
|
search:
|
|
|
|
|
search && search.length > 1
|
|
|
|
|
? `${search}&outputCurrency=${outputCurrency}`
|
|
|
|
|
: `?outputCurrency=${outputCurrency}`
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
export default function App() {
|
|
|
|
|
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-19 02:23:58 +03:00
|
|
|
<Route component={DarkModeQueryParamReader} />
|
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 />
|
2020-05-08 19:05:52 +03:00
|
|
|
<Switch>
|
2020-05-17 00:55:22 +03:00
|
|
|
<Route exact strict path="/swap" component={Swap} />
|
2020-05-18 21:47:52 +03:00
|
|
|
<Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
|
2020-05-17 00:55:22 +03:00
|
|
|
<Route exact strict path="/send" component={Send} />
|
|
|
|
|
<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-18 21:47:52 +03:00
|
|
|
<Route component={RedirectPathToSwapOnly} />
|
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>
|
2020-05-16 17:44:26 +03:00
|
|
|
<div id="popover-container" />
|
2019-05-30 23:42:25 +03:00
|
|
|
</Suspense>
|
|
|
|
|
</>
|
|
|
|
|
)
|
2018-10-07 00:24:17 +03:00
|
|
|
}
|
