2019-05-30 23:42:25 +03:00
|
|
|
import React, { Suspense, lazy } from 'react'
|
|
|
|
|
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
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
import Web3ReactManager from '../components/Web3ReactManager'
|
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'
|
2019-06-14 17:39:33 +03:00
|
|
|
import { isAddress } 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'))
|
|
|
|
|
const Pool = lazy(() => import('./Pool'))
|
2018-10-27 10:54:52 +03:00
|
|
|
|
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`
|
|
|
|
|
${({ theme }) => theme.flexRowNoWrap}
|
|
|
|
|
width: 100%;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
flex-basis: 0;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
`
|
2019-04-25 19:12:47 +03:00
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
const Body = styled.div`
|
|
|
|
|
width: 35rem;
|
|
|
|
|
margin: 1.25rem;
|
|
|
|
|
`
|
2019-04-25 19:12:47 +03:00
|
|
|
|
2019-05-30 23:42:25 +03:00
|
|
|
export default function App() {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Suspense fallback={null}>
|
|
|
|
|
<HeaderWrapper>
|
|
|
|
|
<Header />
|
|
|
|
|
</HeaderWrapper>
|
|
|
|
|
<BodyWrapper>
|
|
|
|
|
<Body>
|
|
|
|
|
<Web3ReactManager>
|
|
|
|
|
<BrowserRouter>
|
|
|
|
|
<NavigationTabs />
|
|
|
|
|
{/* this Suspense is for route code-splitting */}
|
|
|
|
|
<Suspense fallback={null}>
|
2019-04-25 19:12:47 +03:00
|
|
|
<Switch>
|
|
|
|
|
<Route exact strict path="/swap" component={Swap} />
|
2019-06-14 17:39:33 +03:00
|
|
|
<Route
|
|
|
|
|
exact
|
|
|
|
|
strict
|
|
|
|
|
path="/swap/:tokenAddress?"
|
|
|
|
|
render={({ match }) => {
|
|
|
|
|
if (isAddress(match.params.tokenAddress)) {
|
|
|
|
|
return <Swap initialCurrency={isAddress(match.params.tokenAddress)} />
|
|
|
|
|
} else {
|
|
|
|
|
return <Redirect to={{ pathname: '/swap' }} />
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2019-04-25 19:12:47 +03:00
|
|
|
<Route exact strict path="/send" component={Send} />
|
2019-06-14 17:39:33 +03:00
|
|
|
<Route
|
|
|
|
|
exact
|
|
|
|
|
strict
|
|
|
|
|
path="/send/:tokenAddress?"
|
|
|
|
|
render={({ match }) => {
|
|
|
|
|
if (isAddress(match.params.tokenAddress)) {
|
|
|
|
|
return <Send initialCurrency={isAddress(match.params.tokenAddress)} />
|
|
|
|
|
} else {
|
|
|
|
|
return <Redirect to={{ pathname: '/send' }} />
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2019-04-25 19:12:47 +03:00
|
|
|
<Route
|
|
|
|
|
path={[
|
|
|
|
|
'/add-liquidity',
|
|
|
|
|
'/remove-liquidity',
|
|
|
|
|
'/create-exchange',
|
|
|
|
|
'/create-exchange/:tokenAddress?'
|
|
|
|
|
]}
|
|
|
|
|
component={Pool}
|
|
|
|
|
/>
|
|
|
|
|
<Redirect to="/swap" />
|
|
|
|
|
</Switch>
|
2019-05-30 23:42:25 +03:00
|
|
|
</Suspense>
|
|
|
|
|
</BrowserRouter>
|
|
|
|
|
</Web3ReactManager>
|
|
|
|
|
</Body>
|
|
|
|
|
</BodyWrapper>
|
|
|
|
|
</Suspense>
|
|
|
|
|
</>
|
|
|
|
|
)
|
2018-10-07 00:24:17 +03:00
|
|
|
}
|
