From c42a5ccf26076e933b15f0f6c6cb065268e98e3e Mon Sep 17 00:00:00 2001 From: Sam Chen Date: Wed, 20 Jul 2022 04:14:16 +0800 Subject: [PATCH] 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 | 5 +- src/pages/AddLiquidity/index.tsx | 16 ++-- src/pages/AddLiquidity/redirects.tsx | 14 +--- src/pages/AddLiquidityV2/index.tsx | 11 +-- src/pages/AddLiquidityV2/redirects.tsx | 12 +-- src/pages/App.tsx | 101 ++++++++++++++++--------- src/pages/Earn/Manage.tsx | 10 +-- src/pages/MigrateV2/MigrateV2Pair.tsx | 10 +-- src/pages/Pool/PositionPage.tsx | 9 +-- src/pages/RemoveLiquidity/V3.tsx | 11 +-- src/pages/RemoveLiquidity/index.tsx | 11 +-- src/pages/Swap/index.tsx | 5 +- src/pages/Swap/redirects.tsx | 22 +++--- src/pages/Vote/VotePage.tsx | 9 +-- src/pages/Vote/index.tsx | 12 ++- src/theme/DarkModeQueryParamReader.tsx | 5 +- 16 files changed, 134 insertions(+), 129 deletions(-) diff --git a/src/components/analytics/index.ts b/src/components/analytics/index.ts index 34c3111704..df628d673b 100644 --- a/src/components/analytics/index.ts +++ b/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) diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 8ce82dfa0b..3a10593f13 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/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 diff --git a/src/pages/AddLiquidity/redirects.tsx b/src/pages/AddLiquidity/redirects.tsx index 1dd555b51f..a5c7aea66f 100644 --- a/src/pages/AddLiquidity/redirects.tsx +++ b/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 } - return + return } diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx index 00cb93eaae..b9ec12f5a2 100644 --- a/src/pages/AddLiquidityV2/index.tsx +++ b/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) diff --git a/src/pages/AddLiquidityV2/redirects.tsx b/src/pages/AddLiquidityV2/redirects.tsx index cfcc3be862..58d31ed051 100644 --- a/src/pages/AddLiquidityV2/redirects.tsx +++ b/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 } - return + return } diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 072c554eb5..6105bfd9df 100644 --- a/src/pages/App.tsx +++ b/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 ( - - + + + + + + @@ -110,50 +114,73 @@ export default function App() { }> - + + + - - - + + + + + + + + + - - - + + + + + + + + + - - - - + + + + + + + + + + + + - - + + + + + + - + + + - - + + + + + + - - + + + + + + - + + + diff --git a/src/pages/Earn/Manage.tsx b/src/pages/Earn/Manage.tsx index 8e42968574..00635aed59 100644 --- a/src/pages/Earn/Manage.tsx +++ b/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 diff --git a/src/pages/MigrateV2/MigrateV2Pair.tsx b/src/pages/MigrateV2/MigrateV2Pair.tsx index b4b6591554..6a25be18ce 100644 --- a/src/pages/MigrateV2/MigrateV2Pair.tsx +++ b/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(() => { diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx index 4593d9eb03..c73b9e2b26 100644 --- a/src/pages/Pool/PositionPage.tsx +++ b/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() diff --git a/src/pages/RemoveLiquidity/V3.tsx b/src/pages/RemoveLiquidity/V3.tsx index 250fe7a996..415afa807c 100644 --- a/src/pages/RemoveLiquidity/V3.tsx +++ b/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) diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx index 9d38090974..411b5e3fd8 100644 --- a/src/pages/RemoveLiquidity/index.tsx +++ b/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]) diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index a3b0d98f75..49fc3f896f 100644 --- a/src/pages/Swap/index.tsx +++ b/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() diff --git a/src/pages/Swap/redirects.tsx b/src/pages/Swap/redirects.tsx index 912e602aa0..3b0c916966 100644 --- a/src/pages/Swap/redirects.tsx +++ b/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 } // 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 ( 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 + return } diff --git a/src/pages/Vote/VotePage.tsx b/src/pages/Vote/VotePage.tsx index 155703ef7a..28850e24dc 100644 --- a/src/pages/Vote/VotePage.tsx +++ b/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() diff --git a/src/pages/Vote/index.tsx b/src/pages/Vote/index.tsx index 1e49d34b13..74d04bfa3f 100644 --- a/src/pages/Vote/index.tsx +++ b/src/pages/Vote/index.tsx @@ -7,9 +7,15 @@ import VotePage from './VotePage' export default function Vote() { return ( <> - - - + + + + + + + + + ) } diff --git a/src/theme/DarkModeQueryParamReader.tsx b/src/theme/DarkModeQueryParamReader.tsx index 1a3359cd89..b345193ce4 100644 --- a/src/theme/DarkModeQueryParamReader.tsx +++ b/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(() => {