137 lines
4.8 KiB
TypeScript
137 lines
4.8 KiB
TypeScript
import React, { Suspense } from 'react'
|
|
import { Route, Switch } from 'react-router-dom'
|
|
import styled from 'styled-components'
|
|
import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsReporter'
|
|
import AddressClaimModal from '../components/claim/AddressClaimModal'
|
|
import Header from '../components/Header'
|
|
import Polling from '../components/Header/Polling'
|
|
import URLWarning from '../components/Header/URLWarning'
|
|
import Popups from '../components/Popups'
|
|
import Web3ReactManager from '../components/Web3ReactManager'
|
|
import { ApplicationModal } from '../state/application/actions'
|
|
import { useModalOpen, useToggleModal } from '../state/application/hooks'
|
|
import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
|
|
import { RedirectDuplicateTokenIds } from './AddLiquidity/redirects'
|
|
import Earn from './Earn'
|
|
import Manage from './Earn/Manage'
|
|
import MigrateV2 from './MigrateV2'
|
|
import MigrateV2Pair from './MigrateV2/MigrateV2Pair'
|
|
import Pool from './Pool'
|
|
import PoolV2 from './Pool/v2'
|
|
import PoolFinder from './PoolFinder'
|
|
import RemoveLiquidity from './RemoveLiquidity'
|
|
import RemoveLiquidityV3 from './RemoveLiquidity/V3'
|
|
import Swap from './Swap'
|
|
import { OpenClaimAddressModalAndRedirectToSwap, RedirectPathToSwapOnly, RedirectToSwap } from './Swap/redirects'
|
|
import Vote from './Vote'
|
|
import VotePage from './Vote/VotePage'
|
|
import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
|
|
import { PositionPage } from './Pool/PositionPage'
|
|
import AddLiquidity from './AddLiquidity'
|
|
|
|
const AppWrapper = styled.div`
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: flex-start;
|
|
/* overflow-x: hidden; */
|
|
`
|
|
|
|
const BodyWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
padding-top: 160px;
|
|
align-items: center;
|
|
flex: 1;
|
|
/* overflow-y: auto; */
|
|
/* overflow-x: hidden; */
|
|
|
|
z-index: 1;
|
|
|
|
${({ theme }) => theme.mediaWidth.upToSmall`
|
|
padding: 16px;
|
|
padding-top: 6rem;
|
|
`};
|
|
`
|
|
|
|
const HeaderWrapper = styled.div`
|
|
${({ theme }) => theme.flexRowNoWrap}
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 2;
|
|
`
|
|
|
|
const Marginer = styled.div`
|
|
margin-top: 5rem;
|
|
`
|
|
|
|
function TopLevelModals() {
|
|
const open = useModalOpen(ApplicationModal.ADDRESS_CLAIM)
|
|
const toggle = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
|
|
return <AddressClaimModal isOpen={open} onDismiss={toggle} />
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<Route component={GoogleAnalyticsReporter} />
|
|
<Route component={DarkModeQueryParamReader} />
|
|
<AppWrapper>
|
|
<URLWarning />
|
|
<HeaderWrapper>
|
|
<Header />
|
|
</HeaderWrapper>
|
|
<BodyWrapper>
|
|
<Popups />
|
|
<Polling />
|
|
<TopLevelModals />
|
|
<Web3ReactManager>
|
|
<Switch>
|
|
<Route exact strict path="/vote" component={Vote} />
|
|
<Route exact strict path="/vote/:id" component={VotePage} />
|
|
<Route exact strict path="/claim" component={OpenClaimAddressModalAndRedirectToSwap} />
|
|
<Route exact strict path="/uni" component={Earn} />
|
|
<Route exact strict path="/uni/:currencyIdA/:currencyIdB" component={Manage} />
|
|
|
|
<Route exact strict path="/send" component={RedirectPathToSwapOnly} />
|
|
<Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
|
|
<Route exact strict path="/swap" component={Swap} />
|
|
|
|
<Route exact strict path="/find" component={PoolFinder} />
|
|
<Route exact strict path="/pool/v2" component={PoolV2} />
|
|
<Route exact strict path="/pool" component={Pool} />
|
|
<Route exact strict path="/pool/:tokenId" component={PositionPage} />
|
|
|
|
<Route exact strict path="/add/v2/:currencyIdA?/:currencyIdB?" component={RedirectDuplicateTokenIdsV2} />
|
|
<Route
|
|
exact
|
|
strict
|
|
path="/add/:currencyIdA?/:currencyIdB?/:feeAmount?"
|
|
component={RedirectDuplicateTokenIds}
|
|
/>
|
|
|
|
<Route
|
|
exact
|
|
strict
|
|
path="/increase/:currencyIdA?/:currencyIdB?/:feeAmount?/:tokenId?"
|
|
component={AddLiquidity}
|
|
/>
|
|
|
|
<Route exact strict path="/remove/v2/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
|
|
<Route exact strict path="/remove/:tokenId" component={RemoveLiquidityV3} />
|
|
|
|
<Route exact strict path="/migrate/v2" component={MigrateV2} />
|
|
<Route exact strict path="/migrate/v2/:address" component={MigrateV2Pair} />
|
|
|
|
<Route component={RedirectPathToSwapOnly} />
|
|
</Switch>
|
|
</Web3ReactManager>
|
|
<Marginer />
|
|
</BodyWrapper>
|
|
</AppWrapper>
|
|
</Suspense>
|
|
)
|
|
}
|