2020-04-16 03:56:59 +03:00
|
|
|
import React, { Suspense, lazy, useState } from 'react'
|
2019-05-30 23:42:25 +03:00
|
|
|
import styled from 'styled-components'
|
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
|
|
|
|
2020-04-16 03:56:59 +03:00
|
|
|
import { Text } from 'rebass'
|
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-04-16 03:56:59 +03:00
|
|
|
import { TYPE } from '../theme'
|
|
|
|
|
import { Hover } from '../theme/components'
|
|
|
|
|
import { AutoColumn } from '../components/Column'
|
|
|
|
|
import { PinkCard } from '../components/Card'
|
|
|
|
|
import { ButtonPink } from '../components/Button'
|
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
|
|
|
|
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;
|
2020-03-24 23:46:56 +03:00
|
|
|
padding-top: 40px;
|
2020-04-16 03:56:59 +03:00
|
|
|
|
|
|
|
|
& > * {
|
|
|
|
|
max-width: calc(355px + 4rem);
|
|
|
|
|
width: 90%;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
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-03-10 21:55:33 +03:00
|
|
|
max-width: 355px;
|
2019-08-07 21:58:29 +03:00
|
|
|
width: 90%;
|
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-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
|
|
|
|
2020-04-16 03:56:59 +03:00
|
|
|
const [showMigrationMessage, toggleShowMigrationMessage] = useState(true)
|
2020-03-23 22:20:03 +03:00
|
|
|
|
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-04-16 03:56:59 +03:00
|
|
|
{showMigrationMessage && (
|
|
|
|
|
<PinkCard padding="20px">
|
|
|
|
|
<AutoColumn justify={'center'} gap={'20px'}>
|
|
|
|
|
<TYPE.largeHeader>Uniswap has upgraded.</TYPE.largeHeader>
|
|
|
|
|
<Text textAlign="center">Are you a liquidity provider? Upgrade now using the migration helper.</Text>
|
|
|
|
|
<ButtonPink width={'265px'}>Migrate your liquidity </ButtonPink>
|
|
|
|
|
<Hover onClick={() => toggleShowMigrationMessage(false)}>
|
|
|
|
|
<Text textAlign="center">Dismiss</Text>
|
|
|
|
|
</Hover>
|
|
|
|
|
</AutoColumn>
|
|
|
|
|
</PinkCard>
|
2020-03-24 23:46:56 +03:00
|
|
|
)}
|
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-04-16 03:56:59 +03:00
|
|
|
<Route exaxct path={'/pool'} 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 {
|
2020-04-16 03:56:59 +03:00
|
|
|
return <Redirect to={{ pathname: '/pool' }} />
|
2020-02-26 20:00:59 +03:00
|
|
|
}
|
|
|
|
|
}}
|
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 {
|
2020-04-16 03:56:59 +03:00
|
|
|
return <Redirect to={{ pathname: '/pool' }} />
|
2020-03-04 21:48:43 +03:00
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
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
|
|
|
}
|
