Skip to content

I
interface
Commit b612b15e authored by Jordan Frankfurt's avatar Jordan Frankfurt Committed by GitHub
Browse files
Options

fix(L2): routing fixes (#1980) 

* Revert "fix last commit"

This reverts commit 9f5764aa.

* Revert "fix l2 routing bug"

This reverts commit f6dea479.

* drops routing changes for L2

* pool v2 switch networks message
parent 9f5764aa
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 138 deletions
src/pages/App.tsx
View file @ b612b15e
import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
import { Route, Switch } from 'react-router-dom'
import styled from 'styled-components/macro'
import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsReporter'
import AddressClaimModal from '../components/claim/AddressClaimModal'
import ErrorBoundary from '../components/ErrorBoundary'
import Header from '../components/Header'
import Polling from '../components/Header/Polling'
import Popups from '../components/Popups'
import Web3ReactManager from '../components/Web3ReactManager'
import ErrorBoundary from '../components/ErrorBoundary'
import { ApplicationModal } from '../state/application/actions'
import { useModalOpen, useToggleModal } from '../state/application/hooks'
import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
import AddLiquidity from './AddLiquidity'
import { RedirectDuplicateTokenIds } from './AddLiquidity/redirects'
import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
import CreateProposal from './CreateProposal'
import Earn from './Earn'
import Manage from './Earn/Manage'
import MigrateV2 from './MigrateV2'
import MigrateV2Pair from './MigrateV2/MigrateV2Pair'
import Pool from './Pool'
import { PositionPage } from './Pool/PositionPage'
import PoolV2 from './Pool/v2'
import PoolFinder from './PoolFinder'
import RemoveLiquidity from './RemoveLiquidity'
......@@ -24,13 +29,6 @@ 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'
import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
import CreateProposal from './CreateProposal'
import { useActiveWeb3React } from 'hooks/web3'
import { L2_CHAIN_IDS } from 'constants/chains'
const AppWrapper = styled.div`
display: flex;
......@@ -71,46 +69,6 @@ function TopLevelModals() {
return <AddressClaimModal isOpen={open} onDismiss={toggle} />
}
const Routes = () => {
const { chainId } = useActiveWeb3React()
const ON_L2 = Boolean(chainId && L2_CHAIN_IDS.includes(chainId))
return (
<Switch>
<Route exact strict path="/vote" component={Vote} />
<Route exact strict path="/vote/:governorIndex/:id" component={VotePage} />
<Route exact strict path="/claim" component={OpenClaimAddressModalAndRedirectToSwap} />
{!ON_L2 && <Route exact strict path="/uni" component={Earn} />}
{!ON_L2 && <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} />
{!ON_L2 && <Route exact strict path="/pool/v2" component={PoolV2} />}
{!ON_L2 && <Route exact strict path="/pool/v2/find" component={PoolFinder} />}
<Route exact strict path="/pool" component={Pool} />
<Route exact strict path="/pool/:tokenId" component={PositionPage} />
{!ON_L2 && (
<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} />
{!ON_L2 && <Route exact strict path="/remove/v2/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />}
<Route exact strict path="/remove/:tokenId" component={RemoveLiquidityV3} />
{!ON_L2 && <Route exact strict path="/migrate/v2" component={MigrateV2} />}
{!ON_L2 && <Route exact strict path="/migrate/v2/:address" component={MigrateV2Pair} />}
<Route exact strict path="/create-proposal" component={CreateProposal} />
<Route component={RedirectPathToSwapOnly} />
</Switch>
)
}
export default function App() {
return (
<ErrorBoundary>
......@@ -126,7 +84,46 @@ export default function App() {
<Polling />
<TopLevelModals />
<Web3ReactManager>
<Routes />
<Switch>
<Route exact strict path="/vote" component={Vote} />
<Route exact strict path="/vote/:governorIndex/: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="/pool/v2/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 exact strict path="/create-proposal" component={CreateProposal} />
<Route component={RedirectPathToSwapOnly} />
</Switch>
</Web3ReactManager>
<Marginer />
</BodyWrapper>
......
src/pages/Pool/v2.tsx
View file @ b612b15e
......@@ -24,6 +24,7 @@ import { useStakingInfo } from '../../state/stake/hooks'
import { BIG_INT_ZERO } from '../../constants/misc'
import { Pair } from '@uniswap/v2-sdk'
import { Trans } from '@lingui/macro'
import { L2_CHAIN_IDS } from 'constants/chains'
const PageWrapper = styled(AutoColumn)`
max-width: 640px;
......@@ -78,9 +79,13 @@ const EmptyProposals = styled.div`
align-items: center;
`
const Layer2Prompt = styled(EmptyProposals)`
margin-top: 16px;
`
export default function Pool() {
const theme = useContext(ThemeContext)
const { account } = useActiveWeb3React()
const { account, chainId } = useActiveWeb3React()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
......@@ -128,6 +133,8 @@ export default function Pool() {
)
})
const ON_L2 = chainId && L2_CHAIN_IDS.includes(chainId)
return (
<>
<PageWrapper>
......@@ -165,97 +172,109 @@ export default function Pool() {
<CardNoise />
</VoteCard>
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="md" style={{ width: '100%' }}>
<TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
<HideSmall>
<TYPE.mediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
<Trans>Your V2 liquidity</Trans>
</TYPE.mediumHeader>
</HideSmall>
<ButtonRow>
<ResponsiveButtonSecondary as={Link} padding="6px 8px" to="/add/v2/ETH">
<Trans>Create a pair</Trans>
</ResponsiveButtonSecondary>
<ResponsiveButtonPrimary id="find-pool-button" as={Link} to="/pool/v2/find" padding="6px 8px">
<Text fontWeight={500} fontSize={16}>
<Trans>Import Pool</Trans>
</Text>
</ResponsiveButtonPrimary>
<ResponsiveButtonPrimary id="join-pool-button" as={Link} to="/add/v2/ETH" padding="6px 8px">
<Text fontWeight={500} fontSize={16}>
<Trans>Add V2 Liquidity</Trans>
</Text>
</ResponsiveButtonPrimary>
</ButtonRow>
</TitleRow>
{!account ? (
<Card padding="40px">
<TYPE.body color={theme.text3} textAlign="center">
<Trans>Connect to a wallet to view your liquidity.</Trans>
</TYPE.body>
</Card>
) : v2IsLoading ? (
<EmptyProposals>
{ON_L2 ? (
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="md" style={{ width: '100%' }}>
<Layer2Prompt>
<TYPE.body color={theme.text3} textAlign="center">
<Dots>
<Trans>Loading</Trans>
</Dots>
<Trans>V2 is not available on Layer 2. Switch to Layer 1 Ethereum.</Trans>
</TYPE.body>
</EmptyProposals>
) : allV2PairsWithLiquidity?.length > 0 || stakingPairs?.length > 0 ? (
<>
<ButtonSecondary>
<RowBetween>
<Trans>
<ExternalLink href={'https://v2.info.uniswap.org/account/' + account}>
Account analytics and accrued fees
</ExternalLink>
<span> ↗ </span>
</Trans>
</RowBetween>
</ButtonSecondary>
{v2PairsWithoutStakedAmount.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
{stakingPairs.map(
(stakingPair, i) =>
stakingPair[1] && ( // skip pairs that arent loaded
<FullPositionCard
key={stakingInfosWithBalance[i].stakingRewardAddress}
pair={stakingPair[1]}
stakedBalance={stakingInfosWithBalance[i].stakedAmount}
/>
)
)}
<RowFixed justify="center" style={{ width: '100%' }}>
<ButtonOutlined
as={Link}
to="/migrate/v2"
id="import-pool-link"
style={{
padding: '8px 16px',
margin: '0 4px',
borderRadius: '12px',
width: 'fit-content',
fontSize: '14px',
}}
>
<ChevronsRight size={16} style={{ marginRight: '8px' }} />
<Trans>Migrate Liquidity to V3</Trans>
</ButtonOutlined>
</RowFixed>
</>
) : (
<EmptyProposals>
<TYPE.body color={theme.text3} textAlign="center">
<Trans>No liquidity found.</Trans>
</TYPE.body>
</EmptyProposals>
)}
</Layer2Prompt>
</AutoColumn>
</AutoColumn>
) : (
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="md" style={{ width: '100%' }}>
<TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
<HideSmall>
<TYPE.mediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
<Trans>Your V2 liquidity</Trans>
</TYPE.mediumHeader>
</HideSmall>
<ButtonRow>
<ResponsiveButtonSecondary as={Link} padding="6px 8px" to="/add/v2/ETH">
<Trans>Create a pair</Trans>
</ResponsiveButtonSecondary>
<ResponsiveButtonPrimary id="find-pool-button" as={Link} to="/pool/v2/find" padding="6px 8px">
<Text fontWeight={500} fontSize={16}>
<Trans>Import Pool</Trans>
</Text>
</ResponsiveButtonPrimary>
<ResponsiveButtonPrimary id="join-pool-button" as={Link} to="/add/v2/ETH" padding="6px 8px">
<Text fontWeight={500} fontSize={16}>
<Trans>Add V2 Liquidity</Trans>
</Text>
</ResponsiveButtonPrimary>
</ButtonRow>
</TitleRow>
{!account ? (
<Card padding="40px">
<TYPE.body color={theme.text3} textAlign="center">
<Trans>Connect to a wallet to view your liquidity.</Trans>
</TYPE.body>
</Card>
) : v2IsLoading ? (
<EmptyProposals>
<TYPE.body color={theme.text3} textAlign="center">
<Dots>
<Trans>Loading</Trans>
</Dots>
</TYPE.body>
</EmptyProposals>
) : allV2PairsWithLiquidity?.length > 0 || stakingPairs?.length > 0 ? (
<>
<ButtonSecondary>
<RowBetween>
<Trans>
<ExternalLink href={'https://v2.info.uniswap.org/account/' + account}>
Account analytics and accrued fees
</ExternalLink>
<span> ↗ </span>
</Trans>
</RowBetween>
</ButtonSecondary>
{v2PairsWithoutStakedAmount.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
{stakingPairs.map(
(stakingPair, i) =>
stakingPair[1] && ( // skip pairs that arent loaded
<FullPositionCard
key={stakingInfosWithBalance[i].stakingRewardAddress}
pair={stakingPair[1]}
stakedBalance={stakingInfosWithBalance[i].stakedAmount}
/>
)
)}
<RowFixed justify="center" style={{ width: '100%' }}>
<ButtonOutlined
as={Link}
to="/migrate/v2"
id="import-pool-link"
style={{
padding: '8px 16px',
margin: '0 4px',
borderRadius: '12px',
width: 'fit-content',
fontSize: '14px',
}}
>
<ChevronsRight size={16} style={{ marginRight: '8px' }} />
<Trans>Migrate Liquidity to V3</Trans>
</ButtonOutlined>
</RowFixed>
</>
) : (
<EmptyProposals>
<TYPE.body color={theme.text3} textAlign="center">
<Trans>No liquidity found.</Trans>
</TYPE.body>
</EmptyProposals>
)}
</AutoColumn>
</AutoColumn>
</AutoColumn>
)}
</PageWrapper>
<SwitchLocaleLink />
</>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment