chore: access router data with hooks (#4121)

* chore: access router data with hooks

* chore: clean RouteComponentProps

* chore: use children instead of render

* add import

src/components/analytics/index.ts

@@ -1,7 +1,7 @@
 import { useWeb3React } from '@web3-react/core'
 import { useEffect } from 'react'
 import { UaEventOptions } from 'react-ga4/types/ga4'
-import { RouteComponentProps } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { isMobile } from 'utils/userAgent'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
@@ -63,7 +63,8 @@ function reportWebVitals({ name, delta, id }: Metric) {
 }
 
 // tracks web vitals and pageviews
-export function useAnalyticsReporter({ pathname, search }: RouteComponentProps['location']) {
+export function useAnalyticsReporter() {
+  const { pathname, search } = useLocation()
   useEffect(() => {
     getFCP(reportWebVitals)
     getFID(reportWebVitals)

src/pages/AddLiquidity/index.tsx

@@ -11,7 +11,7 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
-import { RouteComponentProps } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import {
   useRangeHopCallbacks,
@@ -77,12 +77,14 @@ import {
 
 const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
-export default function AddLiquidity({
-  match: {
-    params: { currencyIdA, currencyIdB, feeAmount: feeAmountFromUrl, tokenId },
-  },
-  history,
-}: RouteComponentProps<{ currencyIdA?: string; currencyIdB?: string; feeAmount?: string; tokenId?: string }>) {
+export default function AddLiquidity() {
+  const history = useHistory()
+  const {
+    currencyIdA,
+    currencyIdB,
+    feeAmount: feeAmountFromUrl,
+    tokenId,
+  } = useParams<{ currencyIdA?: string; currencyIdB?: string; feeAmount?: string; tokenId?: string }>()
   const { account, chainId, provider } = useWeb3React()
   const theme = useContext(ThemeContext)
   const toggleWalletModal = useToggleWalletModal() // toggle wallet when disconnected

src/pages/AddLiquidity/redirects.tsx

@@ -1,17 +1,11 @@
 import { useWeb3React } from '@web3-react/core'
-import { Redirect, RouteComponentProps } from 'react-router-dom'
+import { Redirect, useParams } from 'react-router-dom'
 
 import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
 import AddLiquidity from './index'
 
-export function RedirectDuplicateTokenIds(
-  props: RouteComponentProps<{ currencyIdA: string; currencyIdB: string; feeAmount?: string }>
-) {
-  const {
-    match: {
-      params: { currencyIdA, currencyIdB },
-    },
-  } = props
+export function RedirectDuplicateTokenIds() {
+  const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string; feeAmount?: string }>()
 
   const { chainId } = useWeb3React()
 
@@ -28,5 +22,5 @@ export function RedirectDuplicateTokenIds(
   ) {
     return <Redirect to={`/add/${currencyIdA}`} />
   }
-  return <AddLiquidity {...props} />
+  return <AddLiquidity />
 }

src/pages/AddLiquidityV2/index.tsx

@@ -10,7 +10,7 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
 import { useCallback, useContext, useState } from 'react'
 import { Plus } from 'react-feather'
-import { RouteComponentProps } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components/macro'
 
@@ -49,12 +49,9 @@ import { PoolPriceBar } from './PoolPriceBar'
 
 const DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
-export default function AddLiquidity({
-  match: {
-    params: { currencyIdA, currencyIdB },
-  },
-  history,
-}: RouteComponentProps<{ currencyIdA?: string; currencyIdB?: string }>) {
+export default function AddLiquidity() {
+  const { currencyIdA, currencyIdB } = useParams<{ currencyIdA?: string; currencyIdB?: string }>()
+  const history = useHistory()
   const { account, chainId, provider } = useWeb3React()
 
   const theme = useContext(ThemeContext)

src/pages/AddLiquidityV2/redirects.tsx

@@ -1,17 +1,13 @@
-import { Redirect, RouteComponentProps } from 'react-router-dom'
+import { Redirect, useParams } from 'react-router-dom'
 
 import AddLiquidityV2 from './index'
 
-export function RedirectDuplicateTokenIdsV2(props: RouteComponentProps<{ currencyIdA: string; currencyIdB: string }>) {
-  const {
-    match: {
-      params: { currencyIdA, currencyIdB },
-    },
-  } = props
+export function RedirectDuplicateTokenIdsV2() {
+  const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string }>()
 
   if (currencyIdA && currencyIdB && currencyIdA.toLowerCase() === currencyIdB.toLowerCase()) {
     return <Redirect to={`/add/v2/${currencyIdA}`} />
   }
 
-  return <AddLiquidityV2 {...props} />
+  return <AddLiquidityV2 />
 }

src/pages/App.tsx

@@ -83,7 +83,7 @@ export default function App() {
   const history = useHistory()
   const location = useLocation()
   const currentPage = getCurrentPageFromLocation(location.pathname)
-  useAnalyticsReporter(useLocation())
+  useAnalyticsReporter()
   initializeAnalytics()
 
   useEffect(() => {
@@ -97,8 +97,12 @@ export default function App() {
 
   return (
     <ErrorBoundary>
-      <Route component={DarkModeQueryParamReader} />
-      <Route component={ApeModeQueryParamReader} />
+      <Route>
+        <DarkModeQueryParamReader />
+      </Route>
+      <Route>
+        <ApeModeQueryParamReader />
+      </Route>
       <AppWrapper>
         <Trace page={currentPage}>
           <HeaderWrapper>
@@ -110,50 +114,73 @@ export default function App() {
             <TopLevelModals />
             <Suspense fallback={<Loader />}>
               <Switch>
-                <Route path="/vote" component={Vote} />
+                <Route strict path="/vote">
+                  <Vote />
+                </Route>
                 <Route exact strict path="/create-proposal">
                   <Redirect to="/vote/create-proposal" />
                 </Route>
-                <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="/claim">
+                  <OpenClaimAddressModalAndRedirectToSwap />
+                </Route>
+                <Route exact strict path="/uni">
+                  <Earn />
+                </Route>
+                <Route exact strict path="/uni/:currencyIdA/:currencyIdB">
+                  <Manage />
+                </Route>
 
-                <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
-                <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
-                <Route path="/swap" component={Swap} />
+                <Route exact strict path="/send">
+                  <RedirectPathToSwapOnly />
+                </Route>
+                <Route exact strict path="/swap/:outputCurrency">
+                  <RedirectToSwap />
+                </Route>
+                <Route exact strict path="/swap">
+                  <Swap />
+                </Route>
 
-                <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="/pool/v2/find">
+                  <PoolFinder />
+                </Route>
+                <Route exact strict path="/pool/v2">
+                  <PoolV2 />
+                </Route>
+                <Route exact strict path="/pool">
+                  <Pool />
+                </Route>
+                <Route exact strict path="/pool/:tokenId">
+                  <PositionPage />
+                </Route>
 
-                <Route
-                  exact
-                  strict
-                  path="/add/v2/:currencyIdA?/:currencyIdB?"
-                  component={RedirectDuplicateTokenIdsV2}
-                />
-                <Route
-                  exact
-                  strict
-                  path="/add/:currencyIdA?/:currencyIdB?/:feeAmount?"
-                  component={RedirectDuplicateTokenIds}
-                />
+                <Route exact strict path="/add/v2/:currencyIdA?/:currencyIdB?">
+                  <RedirectDuplicateTokenIdsV2 />
+                </Route>
+                <Route exact strict path="/add/:currencyIdA?/:currencyIdB?/:feeAmount?">
+                  <RedirectDuplicateTokenIds />
+                </Route>
 
-                <Route
-                  exact
-                  strict
-                  path="/increase/:currencyIdA?/:currencyIdB?/:feeAmount?/:tokenId?"
-                  component={AddLiquidity}
-                />
+                <Route exact strict path="/increase/:currencyIdA?/:currencyIdB?/:feeAmount?/:tokenId?">
+                  <AddLiquidity />
+                </Route>
 
-                <Route exact strict path="/remove/v2/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
-                <Route exact strict path="/remove/:tokenId" component={RemoveLiquidityV3} />
+                <Route exact strict path="/remove/v2/:currencyIdA/:currencyIdB">
+                  <RemoveLiquidity />
+                </Route>
+                <Route exact strict path="/remove/:tokenId">
+                  <RemoveLiquidityV3 />
+                </Route>
 
-                <Route exact strict path="/migrate/v2" component={MigrateV2} />
-                <Route exact strict path="/migrate/v2/:address" component={MigrateV2Pair} />
+                <Route exact strict path="/migrate/v2">
+                  <MigrateV2 />
+                </Route>
+                <Route exact strict path="/migrate/v2/:address">
+                  <MigrateV2Pair />
+                </Route>
 
-                <Route component={RedirectPathToSwapOnly} />
+                <Route>
+                  <RedirectPathToSwapOnly />
+                </Route>
               </Switch>
             </Suspense>
             <Marginer />

src/pages/Earn/Manage.tsx

@@ -3,8 +3,7 @@ import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import JSBI from 'jsbi'
 import { useCallback, useState } from 'react'
-import { Link } from 'react-router-dom'
-import { RouteComponentProps } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { CountUp } from 'use-count-up'
 
@@ -86,11 +85,8 @@ const DataRow = styled(RowBetween)`
   `};
 `
 
-export default function Manage({
-  match: {
-    params: { currencyIdA, currencyIdB },
-  },
-}: RouteComponentProps<{ currencyIdA: string; currencyIdB: string }>) {
+export default function Manage() {
+  const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string }>()
   const { account } = useWeb3React()
 
   // get currencies and pair

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -24,7 +24,8 @@ import JSBI from 'jsbi'
 import { NEVER_RELOAD, useSingleCallResult } from 'lib/hooks/multicall'
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertCircle, AlertTriangle, ArrowDown } from 'react-feather'
-import { Redirect, RouteComponentProps } from 'react-router'
+import { Redirect } from 'react-router'
+import { useParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useAppDispatch } from 'state/hooks'
 import { Bound, resetMintState } from 'state/mint/v3/actions'
@@ -662,11 +663,8 @@ function V2PairMigration({
   )
 }
 
-export default function MigrateV2Pair({
-  match: {
-    params: { address },
-  },
-}: RouteComponentProps<{ address: string }>) {
+export default function MigrateV2Pair() {
+  const { address } = useParams<{ address: string }>()
   // reset mint state on component mount, and as a cleanup (on unmount)
   const dispatch = useAppDispatch()
   useEffect(() => {

src/pages/Pool/PositionPage.tsx

@@ -28,7 +28,7 @@ import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
 import { useSingleCallResult } from 'lib/hooks/multicall'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useCallback, useMemo, useRef, useState } from 'react'
-import { Link, RouteComponentProps } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import { Bound } from 'state/mint/v3/actions'
 import { useIsTransactionPending, useTransactionAdder } from 'state/transactions/hooks'
 import styled from 'styled-components/macro'
@@ -315,11 +315,8 @@ const useInverter = ({
   }
 }
 
-export function PositionPage({
-  match: {
-    params: { tokenId: tokenIdFromUrl },
-  },
-}: RouteComponentProps<{ tokenId?: string }>) {
+export function PositionPage() {
+  const { tokenId: tokenIdFromUrl } = useParams<{ tokenId?: string }>()
   const { chainId, account, provider } = useWeb3React()
   const theme = useTheme()
 

src/pages/RemoveLiquidity/V3.tsx

@@ -25,7 +25,7 @@ import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useCallback, useMemo, useState } from 'react'
-import { Redirect, RouteComponentProps } from 'react-router-dom'
+import { Redirect, useLocation, useParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useBurnV3ActionHandlers, useBurnV3State, useDerivedV3BurnInfo } from 'state/burn/v3/hooks'
 import { useTransactionAdder } from 'state/transactions/hooks'
@@ -43,12 +43,9 @@ import { ResponsiveHeaderText, SmallMaxButton, Wrapper } from './styled'
 const DEFAULT_REMOVE_V3_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100)
 
 // redirect invalid tokenIds
-export default function RemoveLiquidityV3({
-  location,
-  match: {
-    params: { tokenId },
-  },
-}: RouteComponentProps<{ tokenId: string }>) {
+export default function RemoveLiquidityV3() {
+  const { tokenId } = useParams<{ tokenId: string }>()
+  const location = useLocation()
   const parsedTokenId = useMemo(() => {
     try {
       return BigNumber.from(tokenId)

src/pages/RemoveLiquidity/index.tsx

@@ -10,7 +10,7 @@ import { sendEvent } from 'components/analytics'
 import { useV2LiquidityTokenPermit } from 'hooks/useV2LiquidityTokenPermit'
 import { useCallback, useContext, useMemo, useState } from 'react'
 import { ArrowDown, Plus } from 'react-feather'
-import { RouteComponentProps } from 'react-router'
+import { useHistory, useParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components/macro'
 
@@ -47,12 +47,9 @@ import { ClickableText, MaxButton, Wrapper } from '../Pool/styleds'
 
 const DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE = new Percent(5, 100)
 
-export default function RemoveLiquidity({
-  history,
-  match: {
-    params: { currencyIdA, currencyIdB },
-  },
-}: RouteComponentProps<{ currencyIdA: string; currencyIdB: string }>) {
+export default function RemoveLiquidity() {
+  const history = useHistory()
+  const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string }>()
   const [currencyA, currencyB] = [useCurrency(currencyIdA) ?? undefined, useCurrency(currencyIdB) ?? undefined]
   const { account, chainId, provider } = useWeb3React()
   const [tokenA, tokenB] = useMemo(() => [currencyA?.wrapped, currencyB?.wrapped], [currencyA, currencyB])

src/pages/Swap/index.tsx

@@ -19,7 +19,7 @@ import JSBI from 'jsbi'
 import { Context, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { ReactNode } from 'react'
 import { ArrowDown, CheckCircle, HelpCircle } from 'react-feather'
-import { RouteComponentProps } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useToggleWalletModal } from 'state/application/hooks'
 import { InterfaceTrade } from 'state/routing/types'
@@ -77,7 +77,8 @@ export function getIsValidSwapQuote(
   return !!swapInputError && !!trade && (tradeState === TradeState.VALID || tradeState === TradeState.SYNCING)
 }
 
-export default function Swap({ history }: RouteComponentProps) {
+export default function Swap() {
+  const history = useHistory()
   const { account, chainId } = useWeb3React()
   const loadedUrlParams = useDefaultsFromURLSearch()
 

src/pages/Swap/redirects.tsx

@@ -1,27 +1,25 @@
 import { useEffect } from 'react'
-import { Redirect, RouteComponentProps } from 'react-router-dom'
+import { Redirect, useLocation, useParams } from 'react-router-dom'
 import { useAppDispatch } from 'state/hooks'
 
 import { ApplicationModal, setOpenModal } from '../../state/application/reducer'
 
 // Redirects to swap but only replace the pathname
-export function RedirectPathToSwapOnly({ location }: RouteComponentProps) {
+export function RedirectPathToSwapOnly() {
+  const location = useLocation()
   return <Redirect to={{ ...location, pathname: '/swap' }} />
 }
 
 // Redirects from the /swap/:outputCurrency path to the /swap?outputCurrency=:outputCurrency format
-export function RedirectToSwap(props: RouteComponentProps<{ outputCurrency: string }>) {
-  const {
-    location: { search },
-    match: {
-      params: { outputCurrency },
-    },
-  } = props
+export function RedirectToSwap() {
+  const location = useLocation()
+  const { search } = location
+  const { outputCurrency } = useParams<{ outputCurrency: string }>()
 
   return (
     <Redirect
       to={{
-        ...props.location,
+        ...location,
         pathname: '/swap',
         search:
           search && search.length > 1
@@ -32,10 +30,10 @@ export function RedirectToSwap(props: RouteComponentProps<{ outputCurrency: stri
   )
 }
 
-export function OpenClaimAddressModalAndRedirectToSwap(props: RouteComponentProps) {
+export function OpenClaimAddressModalAndRedirectToSwap() {
   const dispatch = useAppDispatch()
   useEffect(() => {
     dispatch(setOpenModal(ApplicationModal.ADDRESS_CLAIM))
   }, [dispatch])
-  return <RedirectPathToSwapOnly {...props} />
+  return <RedirectPathToSwapOnly />
 }

src/pages/Vote/VotePage.tsx

@@ -14,7 +14,7 @@ import ms from 'ms.macro'
 import { useState } from 'react'
 import { ArrowLeft } from 'react-feather'
 import ReactMarkdown from 'react-markdown'
-import { RouteComponentProps } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 import { ButtonPrimary } from '../../components/Button'
@@ -152,11 +152,8 @@ function getDateFromBlock(
   return undefined
 }
 
-export default function VotePage({
-  match: {
-    params: { governorIndex, id },
-  },
-}: RouteComponentProps<{ governorIndex: string; id: string }>) {
+export default function VotePage() {
+  const { governorIndex, id } = useParams<{ governorIndex: string; id: string }>()
   const parsedGovernorIndex = Number.parseInt(governorIndex)
 
   const { chainId, account } = useWeb3React()

src/pages/Vote/index.tsx

@@ -7,9 +7,15 @@ import VotePage from './VotePage'
 export default function Vote() {
   return (
     <>
-      <Route exact strict path="/vote/:governorIndex/:id" component={VotePage} />
-      <Route exact strict path="/vote/create-proposal" component={CreateProposal} />
-      <Route exact strict path="/vote" component={Landing} />
+      <Route exact strict path="/vote/:governorIndex/:id">
+        <VotePage />
+      </Route>
+      <Route exact strict path="/vote/create-proposal">
+        <CreateProposal />
+      </Route>
+      <Route exact strict path="/vote">
+        <Landing />
+      </Route>
     </>
   )
 }

src/theme/DarkModeQueryParamReader.tsx

@@ -1,11 +1,12 @@
 import { parse } from 'qs'
 import { useEffect } from 'react'
-import { RouteComponentProps } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { useAppDispatch } from 'state/hooks'
 
 import { updateUserDarkMode } from '../state/user/reducer'
 
-export default function DarkModeQueryParamReader({ location: { search } }: RouteComponentProps): null {
+export default function DarkModeQueryParamReader(): null {
+  const { search } = useLocation()
   const dispatch = useAppDispatch()
 
   useEffect(() => {