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

src/pages/App.tsx

+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,62 +69,61 @@ function TopLevelModals() {
   return <AddressClaimModal isOpen={open} onDismiss={toggle} />
 }
 
-const Routes = () => {
-  const { chainId } = useActiveWeb3React()
-
-  const ON_L2 = Boolean(chainId && L2_CHAIN_IDS.includes(chainId))
+export default function App() {
   return (
+    <ErrorBoundary>
+      <Route component={GoogleAnalyticsReporter} />
+      <Route component={DarkModeQueryParamReader} />
+      <Route component={ApeModeQueryParamReader} />
+      <AppWrapper>
+        <HeaderWrapper>
+          <Header />
+        </HeaderWrapper>
+        <BodyWrapper>
+          <Popups />
+          <Polling />
+          <TopLevelModals />
+          <Web3ReactManager>
             <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="/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} />
 
-      {!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/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} />
 
-      {!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="/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} />
 
-      {!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="/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>
-  )
-}
-
-export default function App() {
-  return (
-    <ErrorBoundary>
-      <Route component={GoogleAnalyticsReporter} />
-      <Route component={DarkModeQueryParamReader} />
-      <Route component={ApeModeQueryParamReader} />
-      <AppWrapper>
-        <HeaderWrapper>
-          <Header />
-        </HeaderWrapper>
-        <BodyWrapper>
-          <Popups />
-          <Polling />
-          <TopLevelModals />
-          <Web3ReactManager>
-            <Routes />
           </Web3ReactManager>
           <Marginer />
         </BodyWrapper>

src/pages/Pool/v2.tsx

@@ -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,6 +172,17 @@ export default function Pool() {
           <CardNoise />
         </VoteCard>
 
+        {ON_L2 ? (
+          <AutoColumn gap="lg" justify="center">
+            <AutoColumn gap="md" style={{ width: '100%' }}>
+              <Layer2Prompt>
+                <TYPE.body color={theme.text3} textAlign="center">
+                  <Trans>V2 is not available on Layer 2. Switch to Layer 1 Ethereum.</Trans>
+                </TYPE.body>
+              </Layer2Prompt>
+            </AutoColumn>
+          </AutoColumn>
+        ) : (
           <AutoColumn gap="lg" justify="center">
             <AutoColumn gap="md" style={{ width: '100%' }}>
               <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
@@ -256,6 +274,7 @@ export default function Pool() {
               )}
             </AutoColumn>
           </AutoColumn>
+        )}
       </PageWrapper>
       <SwitchLocaleLink />
     </>