chore: simplify useSelector and useDispatch types using inference (#1760)

* chore: simplify app dispatch and selector types with ts inference

* update SearchModal to use new types inference

* chore: simplify useSelector and useDispatch types using inference

src/components/AccountDetails/index.tsx

 import React, { useCallback, useContext } from 'react'
-import { useDispatch } from 'react-redux'
 import styled, { ThemeContext } from 'styled-components'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import { useActiveWeb3React } from '../../hooks/web3'
-import { AppDispatch } from '../../state'
 import { clearAllTransactions } from '../../state/transactions/actions'
 import { shortenAddress } from '../../utils'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
@@ -22,6 +20,7 @@ import { ButtonSecondary } from '../Button'
 import { ExternalLink as LinkIcon } from 'react-feather'
 import { ExternalLink, LinkStyledButton, TYPE } from '../../theme'
 import { Trans } from '@lingui/macro'
+import { useAppDispatch } from 'state/hooks'
 
 const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
@@ -227,7 +226,7 @@ export default function AccountDetails({
 }: AccountDetailsProps) {
   const { chainId, account, connector } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   function formatConnectorName() {
     const { ethereum } = window

src/components/NavigationTabs/index.tsx

@@ -8,8 +8,8 @@ import { Percent } from '@uniswap/sdk-core'
 import { ArrowLeft } from 'react-feather'
 import { RowBetween } from '../Row'
 import SettingsTab from '../Settings'
-import { useDispatch } from 'react-redux'
-import { AppDispatch } from 'state'
+
+import { useAppDispatch } from 'state/hooks'
 import { resetMintState } from 'state/mint/actions'
 import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
 import { TYPE } from 'theme'
@@ -101,7 +101,7 @@ export function AddRemoveTabs({
   const theme = useTheme()
 
   // reset states on back
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   return (
     <Tabs>

src/hooks/useApeModeQueryParamReader.ts

 import { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-import { AppDispatch } from 'state'
+
+import { useAppDispatch } from 'state/hooks'
 import { updateUserExpertMode } from '../state/user/actions'
 import useParsedQueryString from './useParsedQueryString'
 
@@ -10,7 +10,7 @@ export default function ApeModeQueryParamReader(): null {
 }
 
 function useApeModeQueryParamReader() {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   const { ape } = useParsedQueryString()
 
   useEffect(() => {

src/hooks/useFetchListCallback.ts

 import { nanoid } from '@reduxjs/toolkit'
 import { TokenList } from '@uniswap/token-lists'
 import { useCallback } from 'react'
-import { useDispatch } from 'react-redux'
+
 import { getNetworkLibrary } from '../connectors'
-import { AppDispatch } from '../state'
+import { useAppDispatch } from 'state/hooks'
 import { fetchTokenList } from '../state/lists/actions'
 import getTokenList from '../utils/getTokenList'
 import resolveENSContentHash from '../utils/resolveENSContentHash'
@@ -11,7 +11,7 @@ import { useActiveWeb3React } from './web3'
 
 export function useFetchListCallback(): (listUrl: string, sendDispatch?: boolean) => Promise<TokenList> {
   const { chainId, library } = useActiveWeb3React()
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   const ensResolver = useCallback(
     async (ensName: string) => {

src/hooks/useTransactionDeadline.ts

 import { BigNumber } from 'ethers'
 import { useMemo } from 'react'
-import { useSelector } from 'react-redux'
-import { AppState } from '../state'
+import { useAppSelector } from 'state/hooks'
 import useCurrentBlockTimestamp from './useCurrentBlockTimestamp'
 
 // combines the block timestamp with the user setting to give the deadline that should be used for any submitted transaction
 export default function useTransactionDeadline(): BigNumber | undefined {
-  const ttl = useSelector<AppState, number>((state) => state.user.userDeadline)
+  const ttl = useAppSelector((state) => state.user.userDeadline)
   const blockTimestamp = useCurrentBlockTimestamp()
   return useMemo(() => {
     if (blockTimestamp && ttl) return blockTimestamp.add(ttl)

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -46,8 +46,8 @@ import useTheme from 'hooks/useTheme'
 import { unwrappedToken } from 'utils/unwrappedToken'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import Badge, { BadgeVariant } from 'components/Badge'
-import { useDispatch } from 'react-redux'
-import { AppDispatch } from 'state'
+
+import { useAppDispatch } from 'state/hooks'
 import SettingsTab from 'components/Settings'
 
 const ZERO = JSBI.BigInt(0)
@@ -668,7 +668,7 @@ export default function MigrateV2Pair({
   },
 }: RouteComponentProps<{ address: string }>) {
   // reset mint state on component mount, and as a cleanup (on unmount)
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   useEffect(() => {
     dispatch(resetMintState())
     return () => {

src/pages/Swap/redirects.tsx

 import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
+
 import { Redirect, RouteComponentProps } from 'react-router-dom'
-import { AppDispatch } from '../../state'
+import { useAppDispatch } from 'state/hooks'
 import { ApplicationModal, setOpenModal } from '../../state/application/actions'
 
 // Redirects to swap but only replace the pathname
@@ -33,7 +33,7 @@ export function RedirectToSwap(props: RouteComponentProps<{ outputCurrency: stri
 }
 
 export function OpenClaimAddressModalAndRedirectToSwap(props: RouteComponentProps) {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   useEffect(() => {
     dispatch(setOpenModal(ApplicationModal.ADDRESS_CLAIM))
   }, [dispatch])

src/state/application/hooks.ts

 import { useCallback, useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { useActiveWeb3React } from '../../hooks/web3'
-import { AppDispatch, AppState } from '../index'
+import { AppState } from '../index'
 import { addPopup, ApplicationModal, PopupContent, removePopup, setOpenModal } from './actions'
 
 export function useBlockNumber(): number | undefined {
   const { chainId } = useActiveWeb3React()
 
-  return useSelector((state: AppState) => state.application.blockNumber[chainId ?? -1])
+  return useAppSelector((state: AppState) => state.application.blockNumber[chainId ?? -1])
 }
 
 export function useModalOpen(modal: ApplicationModal): boolean {
-  const openModal = useSelector((state: AppState) => state.application.openModal)
+  const openModal = useAppSelector((state: AppState) => state.application.openModal)
   return openModal === modal
 }
 
 export function useToggleModal(modal: ApplicationModal): () => void {
   const open = useModalOpen(modal)
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   return useCallback(() => dispatch(setOpenModal(open ? null : modal)), [dispatch, modal, open])
 }
 
 export function useOpenModal(modal: ApplicationModal): () => void {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   return useCallback(() => dispatch(setOpenModal(modal)), [dispatch, modal])
 }
 
 export function useCloseModals(): () => void {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   return useCallback(() => dispatch(setOpenModal(null)), [dispatch])
 }
 
@@ -61,7 +61,7 @@ export function useToggleVoteModal(): () => void {
 
 // returns a function that allows adding a popup
 export function useAddPopup(): (content: PopupContent, key?: string) => void {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
   return useCallback(
     (content: PopupContent, key?: string) => {
@@ -73,7 +73,7 @@ export function useAddPopup(): (content: PopupContent, key?: string) => void {
 
 // returns a function that allows removing a popup via its key
 export function useRemovePopup(): (key: string) => void {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   return useCallback(
     (key: string) => {
       dispatch(removePopup({ key }))
@@ -84,6 +84,6 @@ export function useRemovePopup(): (key: string) => void {
 
 // get the list of active popups
 export function useActivePopups(): AppState['application']['popupList'] {
-  const list = useSelector((state: AppState) => state.application.popupList)
+  const list = useAppSelector((state: AppState) => state.application.popupList)
   return useMemo(() => list.filter((item) => item.show), [list])
 }

src/state/application/updater.ts

@@ -3,11 +3,11 @@ import { useActiveWeb3React } from '../../hooks/web3'
 import useDebounce from '../../hooks/useDebounce'
 import useIsWindowVisible from '../../hooks/useIsWindowVisible'
 import { updateBlockNumber } from './actions'
-import { useDispatch } from 'react-redux'
+import { useAppDispatch } from 'state/hooks'
 
 export default function Updater(): null {
   const { library, chainId } = useActiveWeb3React()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
   const windowVisible = useIsWindowVisible()
 

src/state/burn/hooks.ts

@@ -3,18 +3,18 @@ import JSBI from 'jsbi'
 import { Token, Currency, Percent, CurrencyAmount } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useCallback } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import { useV2Pair } from '../../hooks/useV2Pairs'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 
 import { useActiveWeb3React } from '../../hooks/web3'
-import { AppDispatch, AppState } from '../index'
+import { AppState } from '../index'
 import { tryParseAmount } from '../swap/hooks'
 import { useTokenBalances } from '../wallet/hooks'
 import { Field, typeInput } from './actions'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 export function useBurnState(): AppState['burn'] {
-  return useSelector<AppState, AppState['burn']>((state) => state.burn)
+  return useAppSelector((state) => state.burn)
 }
 
 export function useDerivedBurnInfo(
@@ -137,7 +137,7 @@ export function useDerivedBurnInfo(
 export function useBurnActionHandlers(): {
   onUserInput: (field: Field, typedValue: string) => void
 } {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   const onUserInput = useCallback(
     (field: Field, typedValue: string) => {

src/state/burn/v3/hooks.ts

@@ -5,15 +5,15 @@ import { useActiveWeb3React } from 'hooks/web3'
 import { useToken } from 'hooks/Tokens'
 import { useV3PositionFees } from 'hooks/useV3PositionFees'
 import { useCallback, useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import { PositionDetails } from 'types/position'
 
-import { AppDispatch, AppState } from '../../index'
+import { AppState } from '../../index'
 import { selectPercent } from './actions'
 import { unwrappedToken } from 'utils/unwrappedToken'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 export function useBurnV3State(): AppState['burnV3'] {
-  return useSelector<AppState, AppState['burnV3']>((state) => state.burnV3)
+  return useAppSelector((state) => state.burnV3)
 }
 
 export function useDerivedV3BurnInfo(
@@ -95,7 +95,7 @@ export function useDerivedV3BurnInfo(
 export function useBurnV3ActionHandlers(): {
   onPercentSelect: (percent: number) => void
 } {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   const onPercentSelect = useCallback(
     (percent: number) => {

src/state/lists/hooks.ts

 import DEFAULT_TOKEN_LIST from '@uniswap/default-token-list'
 import { TokenList } from '@uniswap/token-lists'
 import { useMemo } from 'react'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from 'state/hooks'
 import sortByListPriority from 'utils/listSort'
 import UNSUPPORTED_TOKEN_LIST from '../../constants/tokenLists/uniswap-v2-unsupported.tokenlist.json'
 import { AppState } from '../index'
@@ -43,7 +43,7 @@ export function listToTokenMap(list: TokenList): TokenAddressMap {
 const TRANSFORMED_DEFAULT_TOKEN_LIST = listToTokenMap(DEFAULT_TOKEN_LIST)
 
 export function useAllLists(): AppState['lists']['byUrl'] {
-  return useSelector<AppState, AppState['lists']['byUrl']>((state) => state.lists.byUrl)
+  return useAppSelector((state) => state.lists.byUrl)
 }
 
 function combineMaps(map1: TokenAddressMap, map2: TokenAddressMap): TokenAddressMap {
@@ -82,9 +82,7 @@ function useCombinedTokenMapFromUrls(urls: string[] | undefined): TokenAddressMa
 
 // filter out unsupported lists
 export function useActiveListUrls(): string[] | undefined {
-  return useSelector<AppState, AppState['lists']['activeListUrls']>((state) => state.lists.activeListUrls)?.filter(
-    (url) => !UNSUPPORTED_LIST_URLS.includes(url)
-  )
+  return useAppSelector((state) => state.lists.activeListUrls)?.filter((url) => !UNSUPPORTED_LIST_URLS.includes(url))
 }
 
 export function useInactiveListUrls(): string[] {

src/state/lists/updater.ts

 import { useAllLists } from 'state/lists/hooks'
 import { getVersionUpgrade, minVersionBump, VersionUpgrade } from '@uniswap/token-lists'
 import { useCallback, useEffect } from 'react'
-import { useDispatch } from 'react-redux'
+
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useFetchListCallback } from '../../hooks/useFetchListCallback'
 import useInterval from '../../hooks/useInterval'
 import useIsWindowVisible from '../../hooks/useIsWindowVisible'
-import { AppDispatch } from '../index'
 import { acceptListUpdate } from './actions'
 import { useActiveListUrls } from './hooks'
 import { UNSUPPORTED_LIST_URLS } from 'constants/lists'
+import { useAppDispatch } from 'state/hooks'
 
 export default function Updater(): null {
   const { library } = useActiveWeb3React()
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   const isWindowVisible = useIsWindowVisible()
 
   // get all loaded lists, and the active urls

src/state/mint/hooks.ts

 import { t } from '@lingui/macro'
 import { useCallback, useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { AppDispatch, AppState } from '../index'
+import { AppState } from '../index'
 import { Field, typeInput } from './actions'
 import { Pair } from '@uniswap/v2-sdk'
 import { Currency, Token, Percent, Price, CurrencyAmount } from '@uniswap/sdk-core'
@@ -12,18 +11,19 @@ import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { tryParseAmount } from '../swap/hooks'
 import { useCurrencyBalances } from '../wallet/hooks'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 const ZERO = JSBI.BigInt(0)
 
 export function useMintState(): AppState['mint'] {
-  return useSelector<AppState, AppState['mint']>((state) => state.mint)
+  return useAppSelector((state) => state.mint)
 }
 
 export function useMintActionHandlers(noLiquidity: boolean | undefined): {
   onFieldAInput: (typedValue: string) => void
   onFieldBInput: (typedValue: string) => void
 } {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   const onFieldAInput = useCallback(
     (typedValue: string) => {

src/state/mint/v3/hooks.ts

@@ -15,17 +15,17 @@ import {
 } from '@uniswap/v3-sdk/dist/'
 import { Currency, Token, CurrencyAmount, Price, Rounding } from '@uniswap/sdk-core'
 import { useCallback, useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import { useActiveWeb3React } from '../../../hooks/web3'
-import { AppDispatch, AppState } from '../../index'
+import { AppState } from '../../index'
 import { tryParseAmount } from '../../swap/hooks'
 import { useCurrencyBalances } from '../../wallet/hooks'
 import { Field, Bound, typeInput, typeStartPriceInput, typeLeftRangeInput, typeRightRangeInput } from './actions'
 import { tryParseTick } from './utils'
 import { usePool } from 'hooks/usePools'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 export function useV3MintState(): AppState['mintV3'] {
-  return useSelector<AppState, AppState['mintV3']>((state) => state.mintV3)
+  return useAppSelector((state) => state.mintV3)
 }
 
 export function useV3MintActionHandlers(noLiquidity: boolean | undefined): {
@@ -35,7 +35,7 @@ export function useV3MintActionHandlers(noLiquidity: boolean | undefined): {
   onRightRangeInput: (typedValue: string) => void
   onStartPriceInput: (typedValue: string) => void
 } {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   const onFieldAInput = useCallback(
     (typedValue: string) => {

src/state/multicall/hooks.ts

@@ -2,10 +2,9 @@ import { Interface, FunctionFragment } from '@ethersproject/abi'
 import { BigNumber } from '@ethersproject/bignumber'
 import { Contract } from '@ethersproject/contracts'
 import { useEffect, useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useBlockNumber } from '../application/hooks'
-import { AppDispatch, AppState } from '../index'
 import {
   addMulticallListeners,
   Call,
@@ -51,10 +50,8 @@ export const NEVER_RELOAD: ListenerOptions = {
 // the lowest level call for subscribing to contract data
 function useCallsData(calls: (Call | undefined)[], options?: ListenerOptions): CallResult[] {
   const { chainId } = useActiveWeb3React()
-  const callResults = useSelector<AppState, AppState['multicall']['callResults']>(
-    (state) => state.multicall.callResults
-  )
-  const dispatch = useDispatch<AppDispatch>()
+  const callResults = useAppSelector((state) => state.multicall.callResults)
+  const dispatch = useAppDispatch()
 
   const serializedCallKeys: string = useMemo(
     () =>

src/state/multicall/updater.tsx

 import { useEffect, useMemo, useRef } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import { Multicall2 } from '../../abis/types'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useMulticall2Contract } from '../../hooks/useContract'
@@ -7,7 +6,7 @@ import useDebounce from '../../hooks/useDebounce'
 import chunkArray from '../../utils/chunkArray'
 import { retry, RetryableError } from '../../utils/retry'
 import { useBlockNumber } from '../application/hooks'
-import { AppDispatch, AppState } from '../index'
+import { AppState } from '../index'
 import {
   Call,
   errorFetchingMulticallResults,
@@ -15,6 +14,7 @@ import {
   parseCallKey,
   updateMulticallResults,
 } from './actions'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 /**
  * Fetches a chunk of calls, enforcing a minimum block number constraint
@@ -117,8 +117,8 @@ export function outdatedListeningKeys(
 }
 
 export default function Updater(): null {
-  const dispatch = useDispatch<AppDispatch>()
-  const state = useSelector<AppState, AppState['multicall']>((state) => state.multicall)
+  const dispatch = useAppDispatch()
+  const state = useAppSelector((state) => state.multicall)
   // wait for listeners to settle before triggering updates
   const debouncedListeners = useDebounce(state.callListeners, 100)
   const latestBlockNumber = useBlockNumber()

src/state/swap/hooks.ts

@@ -8,7 +8,6 @@ import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { ParsedQs } from 'qs'
 import { useCallback, useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useCurrency } from '../../hooks/Tokens'
 import useSwapSlippageTolerance from '../../hooks/useSwapSlippageTolerance'
@@ -16,14 +15,15 @@ import { Version } from '../../hooks/useToggledVersion'
 import { useV2TradeExactIn, useV2TradeExactOut } from '../../hooks/useV2Trade'
 import useParsedQueryString from '../../hooks/useParsedQueryString'
 import { isAddress } from '../../utils'
-import { AppDispatch, AppState } from '../index'
+import { AppState } from '../index'
 import { useCurrencyBalances } from '../wallet/hooks'
 import { Field, replaceSwapState, selectCurrency, setRecipient, switchCurrencies, typeInput } from './actions'
 import { SwapState } from './reducer'
 import { useUserSingleHopOnly } from 'state/user/hooks'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 export function useSwapState(): AppState['swap'] {
-  return useSelector<AppState, AppState['swap']>((state) => state.swap)
+  return useAppSelector((state) => state.swap)
 }
 
 export function useSwapActionHandlers(): {
@@ -32,7 +32,7 @@ export function useSwapActionHandlers(): {
   onUserInput: (field: Field, typedValue: string) => void
   onChangeRecipient: (recipient: string | null) => void
 } {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   const onCurrencySelection = useCallback(
     (field: Field, currency: Currency) => {
       dispatch(
@@ -279,7 +279,7 @@ export function useDefaultsFromURLSearch():
   | { inputCurrencyId: string | undefined; outputCurrencyId: string | undefined }
   | undefined {
   const { chainId } = useActiveWeb3React()
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   const parsedQs = useParsedQueryString()
   const [result, setResult] =
     useState<{ inputCurrencyId: string | undefined; outputCurrencyId: string | undefined } | undefined>()

src/state/transactions/hooks.tsx

 import { TransactionResponse } from '@ethersproject/providers'
 import { useCallback, useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 import { useActiveWeb3React } from '../../hooks/web3'
-import { AppDispatch, AppState } from '../index'
 import { addTransaction } from './actions'
 import { TransactionDetails } from './reducer'
 
@@ -13,7 +12,7 @@ export function useTransactionAdder(): (
   customData?: { summary?: string; approval?: { tokenAddress: string; spender: string }; claim?: { recipient: string } }
 ) => void {
   const { chainId, account } = useActiveWeb3React()
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   return useCallback(
     (
@@ -41,7 +40,7 @@ export function useTransactionAdder(): (
 export function useAllTransactions(): { [txHash: string]: TransactionDetails } {
   const { chainId } = useActiveWeb3React()
 
-  const state = useSelector<AppState, AppState['transactions']>((state) => state.transactions)
+  const state = useAppSelector((state) => state.transactions)
 
   return chainId ? state[chainId] ?? {} : {}
 }

src/state/transactions/updater.tsx

 import { useEffect, useMemo } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { updateBlockNumber } from '../application/actions'
 import { useAddPopup, useBlockNumber } from '../application/hooks'
-import { AppDispatch, AppState } from '../index'
 import { checkedTransaction, finalizeTransaction } from './actions'
 
 interface TxInterface {
@@ -35,8 +34,8 @@ export default function Updater(): null {
 
   const lastBlockNumber = useBlockNumber()
 
-  const dispatch = useDispatch<AppDispatch>()
-  const state = useSelector<AppState, AppState['transactions']>((state) => state.transactions)
+  const dispatch = useAppDispatch()
+  const state = useAppSelector((state) => state.transactions)
 
   const transactions = useMemo(() => (chainId ? state[chainId] ?? {} : {}), [chainId, state])
 

src/state/user/hooks.tsx

@@ -3,12 +3,12 @@ import { Pair } from '@uniswap/v2-sdk'
 import JSBI from 'jsbi'
 import flatMap from 'lodash.flatmap'
 import { useCallback, useMemo } from 'react'
-import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+import { shallowEqual } from 'react-redux'
 import { BASES_TO_TRACK_LIQUIDITY_FOR, PINNED_PAIRS } from '../../constants/routing'
 
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useAllTokens } from '../../hooks/Tokens'
-import { AppDispatch, AppState } from '../index'
+import { AppState } from '../index'
 import {
   addSerializedPair,
   addSerializedToken,
@@ -25,6 +25,7 @@ import {
   updateUserLocale,
 } from './actions'
 import { SupportedLocale } from 'constants/locales'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 function serializeToken(token: Token): SerializedToken {
   return {
@@ -47,10 +48,7 @@ function deserializeToken(serializedToken: SerializedToken): Token {
 }
 
 export function useIsDarkMode(): boolean {
-  const { userDarkMode, matchesDarkMode } = useSelector<
-    AppState,
-    { userDarkMode: boolean | null; matchesDarkMode: boolean }
-  >(
+  const { userDarkMode, matchesDarkMode } = useAppSelector(
     ({ user: { matchesDarkMode, userDarkMode } }) => ({
       userDarkMode,
       matchesDarkMode,
@@ -62,7 +60,7 @@ export function useIsDarkMode(): boolean {
 }
 
 export function useDarkModeManager(): [boolean, () => void] {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   const darkMode = useIsDarkMode()
 
   const toggleSetDarkMode = useCallback(() => {
@@ -73,11 +71,11 @@ export function useDarkModeManager(): [boolean, () => void] {
 }
 
 export function useUserLocale(): SupportedLocale | null {
-  return useSelector<AppState, AppState['user']['userLocale']>((state) => state.user.userLocale)
+  return useAppSelector((state) => state.user.userLocale)
 }
 
 export function useUserLocaleManager(): [SupportedLocale | null, (newLocale: SupportedLocale) => void] {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   const locale = useUserLocale()
 
   const setLocale = useCallback(
@@ -91,11 +89,11 @@ export function useUserLocaleManager(): [SupportedLocale | null, (newLocale: Sup
 }
 
 export function useIsExpertMode(): boolean {
-  return useSelector<AppState, AppState['user']['userExpertMode']>((state) => state.user.userExpertMode)
+  return useAppSelector((state) => state.user.userExpertMode)
 }
 
 export function useExpertModeManager(): [boolean, () => void] {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   const expertMode = useIsExpertMode()
 
   const toggleSetExpertMode = useCallback(() => {
@@ -106,11 +104,9 @@ export function useExpertModeManager(): [boolean, () => void] {
 }
 
 export function useUserSingleHopOnly(): [boolean, (newSingleHopOnly: boolean) => void] {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
-  const singleHopOnly = useSelector<AppState, AppState['user']['userSingleHopOnly']>(
-    (state) => state.user.userSingleHopOnly
-  )
+  const singleHopOnly = useAppSelector((state) => state.user.userSingleHopOnly)
 
   const setSingleHopOnly = useCallback(
     (newSingleHopOnly: boolean) => {
@@ -123,7 +119,7 @@ export function useUserSingleHopOnly(): [boolean, (newSingleHopOnly: boolean) =>
 }
 
 export function useSetUserSlippageTolerance(): (slippageTolerance: Percent | 'auto') => void {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   return useCallback(
     (userSlippageTolerance: Percent | 'auto') => {
@@ -148,7 +144,7 @@ export function useSetUserSlippageTolerance(): (slippageTolerance: Percent | 'au
  * Return the user's slippage tolerance, from the redux store, and a function to update the slippage tolerance
  */
 export function useUserSlippageTolerance(): Percent | 'auto' {
-  const userSlippageTolerance = useSelector<AppState, AppState['user']['userSlippageTolerance']>((state) => {
+  const userSlippageTolerance = useAppSelector((state) => {
     return state.user.userSlippageTolerance
   })
 
@@ -159,11 +155,9 @@ export function useUserSlippageTolerance(): Percent | 'auto' {
 }
 
 export function useUserHideClosedPositions(): [boolean, (newHideClosedPositions: boolean) => void] {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
-  const hideClosedPositions = useSelector<AppState, AppState['user']['userHideClosedPositions']>(
-    (state) => state.user.userHideClosedPositions
-  )
+  const hideClosedPositions = useAppSelector((state) => state.user.userHideClosedPositions)
 
   const setHideClosedPositions = useCallback(
     (newHideClosedPositions: boolean) => {
@@ -188,8 +182,8 @@ export function useUserSlippageToleranceWithDefault(defaultSlippageTolerance: Pe
 }
 
 export function useUserTransactionTTL(): [number, (slippage: number) => void] {
-  const dispatch = useDispatch<AppDispatch>()
-  const userDeadline = useSelector<AppState, AppState['user']['userDeadline']>((state) => {
+  const dispatch = useAppDispatch()
+  const userDeadline = useAppSelector((state) => {
     return state.user.userDeadline
   })
 
@@ -204,7 +198,7 @@ export function useUserTransactionTTL(): [number, (slippage: number) => void] {
 }
 
 export function useAddUserToken(): (token: Token) => void {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   return useCallback(
     (token: Token) => {
       dispatch(addSerializedToken({ serializedToken: serializeToken(token) }))
@@ -214,7 +208,7 @@ export function useAddUserToken(): (token: Token) => void {
 }
 
 export function useRemoveUserAddedToken(): (chainId: number, address: string) => void {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
   return useCallback(
     (chainId: number, address: string) => {
       dispatch(removeSerializedToken({ chainId, address }))
@@ -225,7 +219,7 @@ export function useRemoveUserAddedToken(): (chainId: number, address: string) =>
 
 export function useUserAddedTokens(): Token[] {
   const { chainId } = useActiveWeb3React()
-  const serializedTokensMap = useSelector<AppState, AppState['user']['tokens']>(({ user: { tokens } }) => tokens)
+  const serializedTokensMap = useAppSelector(({ user: { tokens } }) => tokens)
 
   return useMemo(() => {
     if (!chainId) return []
@@ -241,7 +235,7 @@ function serializePair(pair: Pair): SerializedPair {
 }
 
 export function usePairAdder(): (pair: Pair) => void {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   return useCallback(
     (pair: Pair) => {
@@ -252,11 +246,11 @@ export function usePairAdder(): (pair: Pair) => void {
 }
 
 export function useURLWarningVisible(): boolean {
-  return useSelector((state: AppState) => state.user.URLWarningVisible)
+  return useAppSelector((state: AppState) => state.user.URLWarningVisible)
 }
 
 export function useURLWarningToggle(): () => void {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   return useCallback(() => dispatch(toggleURLWarning()), [dispatch])
 }
 
@@ -305,7 +299,7 @@ export function useTrackedTokenPairs(): [Token, Token][] {
   )
 
   // pairs saved by users
-  const savedSerializedPairs = useSelector<AppState, AppState['user']['pairs']>(({ user: { pairs } }) => pairs)
+  const savedSerializedPairs = useAppSelector(({ user: { pairs } }) => pairs)
 
   const userPairs: [Token, Token][] = useMemo(() => {
     if (!chainId || !savedSerializedPairs) return []

src/state/user/updater.tsx

 import { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-import { AppDispatch } from '../index'
+import { useAppDispatch } from 'state/hooks'
+
 import { updateMatchesDarkMode } from './actions'
 
 export default function Updater(): null {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   // keep dark mode in sync with the system
   useEffect(() => {

src/theme/DarkModeQueryParamReader.tsx

 import { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
+
 import { RouteComponentProps } from 'react-router-dom'
 import { parse } from 'qs'
-import { AppDispatch } from '../state'
+import { useAppDispatch } from 'state/hooks'
 import { updateUserDarkMode } from '../state/user/actions'
 
 export default function DarkModeQueryParamReader({ location: { search } }: RouteComponentProps): null {
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch()
 
   useEffect(() => {
     if (!search) return