refactor some hooks into the hooks directory

src/hooks/useApproveCallback.ts

@@ -4,13 +4,13 @@ import { TokenAmount, CurrencyAmount, ETHER } from '@uniswap/sdk-core'
 import { Trade } from '@uniswap/v2-sdk'
 import { useCallback, useMemo } from 'react'
 import { ROUTER_ADDRESS } from '../constants'
-import { useTokenAllowance } from '../data/Allowances'
 import { Field } from '../state/swap/actions'
 import { useTransactionAdder, useHasPendingApproval } from '../state/transactions/hooks'
 import { computeSlippageAdjustedAmounts } from '../utils/prices'
 import { calculateGasMargin } from '../utils'
 import { useTokenContract } from './useContract'
 import { useActiveWeb3React } from './index'
+import { useTokenAllowance } from './useTokenAllowance'
 
 export enum ApprovalState {
   UNKNOWN,

src/hooks/useIsSwapUnsupported.ts

+import { Currency, Token } from '@uniswap/sdk-core'
+import { useMemo } from 'react'
+import { useUnsupportedTokens } from './Tokens'
+
+/**
+ * Returns true if the input currency or output currency cannot be traded in the interface
+ * @param currencyIn the input currency to check
+ * @param currencyOut the output currency to check
+ */
+export function useIsSwapUnsupported(currencyIn?: Currency, currencyOut?: Currency): boolean {
+  const unsupportedTokens: { [address: string]: Token } = useUnsupportedTokens()
+
+  return useMemo(() => {
+    // if unsupported list loaded & either token on list, mark as unsupported
+    return Boolean(
+      unsupportedTokens &&
+        ((currencyIn && currencyIn instanceof Token && unsupportedTokens[currencyIn.address]) ||
+          (currencyOut && currencyOut instanceof Token && unsupportedTokens[currencyOut.address]))
+    )
+  }, [currencyIn, currencyOut, unsupportedTokens])
+}

src/data/Allowances.ts → src/hooks/useTokenAllowance.ts

 import { Token, TokenAmount } from '@uniswap/sdk-core'
 import { useMemo } from 'react'
-
-import { useTokenContract } from '../hooks/useContract'
 import { useSingleCallResult } from '../state/multicall/hooks'
+import { useTokenContract } from './useContract'
 
 export function useTokenAllowance(token?: Token, owner?: string, spender?: string): TokenAmount | undefined {
   const contract = useTokenContract(token?.address, false)

src/hooks/Trades.ts → src/hooks/v2Trades.ts

-import { isTradeBetter } from 'utils/trades'
-import { Pair, Trade } from '@uniswap/v2-sdk'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { Pair, Trade } from '@uniswap/v2-sdk'
 import flatMap from 'lodash.flatmap'
 import { useMemo } from 'react'
-
+import { useUserSingleHopOnly } from 'state/user/hooks'
+import { isTradeBetter } from 'utils/trades'
 import {
+  ADDITIONAL_BASES,
   BASES_TO_CHECK_TRADES_AGAINST,
-  CUSTOM_BASES,
   BETTER_TRADE_LESS_HOPS_THRESHOLD,
-  ADDITIONAL_BASES,
+  CUSTOM_BASES,
 } from '../constants'
 import { PairState, usePairs } from '../data/V2'
 import { wrappedCurrency } from '../utils/wrappedCurrency'
-
 import { useActiveWeb3React } from './index'
-import { useUnsupportedTokens } from './Tokens'
-import { useUserSingleHopOnly } from 'state/user/hooks'
 
 function useAllCommonPairs(currencyA?: Currency, currencyB?: Currency): Pair[] {
   const { chainId } = useActiveWeb3React()
@@ -96,7 +93,7 @@ const MAX_HOPS = 3
 /**
  * Returns the best trade for the exact amount of tokens in to the given token out
  */
-export function useTradeExactIn(currencyAmountIn?: CurrencyAmount, currencyOut?: Currency): Trade | null {
+export function useV2TradeExactIn(currencyAmountIn?: CurrencyAmount, currencyOut?: Currency): Trade | null {
   const allowedPairs = useAllCommonPairs(currencyAmountIn?.currency, currencyOut)
 
   const [singleHopOnly] = useUserSingleHopOnly()
@@ -130,7 +127,7 @@ export function useTradeExactIn(currencyAmountIn?: CurrencyAmount, currencyOut?:
 /**
  * Returns the best trade for the token in to the exact amount of token out
  */
-export function useTradeExactOut(currencyIn?: Currency, currencyAmountOut?: CurrencyAmount): Trade | null {
+export function useV2TradeExactOut(currencyIn?: Currency, currencyAmountOut?: CurrencyAmount): Trade | null {
   const allowedPairs = useAllCommonPairs(currencyIn, currencyAmountOut?.currency)
 
   const [singleHopOnly] = useUserSingleHopOnly()
@@ -158,23 +155,3 @@ export function useTradeExactOut(currencyIn?: Currency, currencyAmountOut?: Curr
     return null
   }, [currencyIn, currencyAmountOut, allowedPairs, singleHopOnly])
 }
-
-export function useIsTransactionUnsupported(currencyIn?: Currency, currencyOut?: Currency): boolean {
-  const unsupportedTokens: { [address: string]: Token } = useUnsupportedTokens()
-  const { chainId } = useActiveWeb3React()
-
-  const tokenIn = wrappedCurrency(currencyIn, chainId)
-  const tokenOut = wrappedCurrency(currencyOut, chainId)
-
-  // if unsupported list loaded & either token on list, mark as unsupported
-  if (unsupportedTokens) {
-    if (tokenIn && Object.keys(unsupportedTokens).includes(tokenIn.address)) {
-      return true
-    }
-    if (tokenOut && Object.keys(unsupportedTokens).includes(tokenOut.address)) {
-      return true
-    }
-  }
-
-  return false
-}

src/pages/AddLiquidity/index.tsx

@@ -13,6 +13,7 @@ import { AutoColumn, ColumnCenter } from '../../components/Column'
 import { TransactionSubmittedContent, ConfirmationPendingContent } from '../../components/TransactionConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import { AutoRow, RowBetween, RowFixed } from '../../components/Row'
+import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import Review from './Review'
 import { useActiveWeb3React } from '../../hooks'
 import { useCurrency } from '../../hooks/Tokens'
@@ -29,7 +30,6 @@ import { wrappedCurrency } from '../../utils/wrappedCurrency'
 import AppBody from '../AppBody'
 import { Dots } from '../Pool/styleds'
 import { currencyId } from '../../utils/currencyId'
-import { useIsTransactionUnsupported } from 'hooks/Trades'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import {
   DynamicSection,
@@ -317,7 +317,7 @@ export default function AddLiquidity({
 
   // const isCreate = history.location.pathname.includes('/create')
 
-  const addIsUnsupported = useIsTransactionUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
+  const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
 
   const clearAll = useCallback(() => {
     onFieldAInput('')

src/pages/AddLiquidityV2/index.tsx

@@ -22,6 +22,7 @@ import { PairState } from '../../data/V2'
 import { useActiveWeb3React } from '../../hooks'
 import { useCurrency } from '../../hooks/Tokens'
 import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallback'
+import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import { useWalletModalToggle } from '../../state/application/hooks'
 import { Field } from '../../state/mint/actions'
@@ -38,7 +39,6 @@ import { Dots, Wrapper } from '../Pool/styleds'
 import { ConfirmAddModalBottom } from './ConfirmAddModalBottom'
 import { currencyId } from '../../utils/currencyId'
 import { PoolPriceBar } from './PoolPriceBar'
-import { useIsTransactionUnsupported } from 'hooks/Trades'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import { useV2DerivedMintInfo } from 'state/mint/v2'
 
@@ -309,7 +309,7 @@ export default function AddLiquidity({
 
   const isCreate = history.location.pathname.includes('/create')
 
-  const addIsUnsupported = useIsTransactionUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
+  const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
 
   return (
     <>

src/pages/Pool/PositionPage.tsx

@@ -69,7 +69,9 @@ const ResponsiveGrid = styled.div`
 `
 
 // responsive text
-const Label = styled(TYPE.label)<{ end?: boolean }>`
+// disable the warning because we don't use the end prop, we just want to filter it out
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Label = styled(({ end, ...props }) => <TYPE.label {...props} />)<{ end?: boolean }>`
   display: flex;
   font-size: 16px;
   justify-content: ${({ end }) => (end ? 'flex-end' : 'flex-start')};

src/pages/Swap/index.tsx

@@ -27,6 +27,7 @@ import { useActiveWeb3React } from '../../hooks'
 import { useCurrency, useAllTokens } from '../../hooks/Tokens'
 import { ApprovalState, useApproveCallbackFromTrade } from '../../hooks/useApproveCallback'
 import useENSAddress from '../../hooks/useENSAddress'
+import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
 import { useSwapCallback } from '../../hooks/useSwapCallback'
 import useToggledVersion, { Version } from '../../hooks/useToggledVersion'
 import useWrapCallback, { WrapType } from '../../hooks/useWrapCallback'
@@ -45,7 +46,6 @@ import { computeTradePriceBreakdown, warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
 import { ClickableText } from '../Pool/styleds'
 import Loader from '../../components/Loader'
-import { useIsTransactionUnsupported } from 'hooks/Trades'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import { RouteComponentProps } from 'react-router-dom'
 
@@ -284,7 +284,7 @@ export default function Swap({ history }: RouteComponentProps) {
     onCurrencySelection,
   ])
 
-  const swapIsUnsupported = useIsTransactionUnsupported(currencies?.INPUT, currencies?.OUTPUT)
+  const swapIsUnsupported = useIsSwapUnsupported(currencies?.INPUT, currencies?.OUTPUT)
 
   return (
     <>

src/state/swap/hooks.ts

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useActiveWeb3React } from '../../hooks'
 import { useCurrency } from '../../hooks/Tokens'
-import { useTradeExactIn, useTradeExactOut } from '../../hooks/Trades'
+import { useV2TradeExactIn, useV2TradeExactOut } from '../../hooks/v2Trades'
 import useParsedQueryString from '../../hooks/useParsedQueryString'
 import { isAddress } from '../../utils'
 import { AppDispatch, AppState } from '../index'
@@ -135,8 +135,8 @@ export function useDerivedSwapInfo(): {
   const isExactIn: boolean = independentField === Field.INPUT
   const parsedAmount = tryParseAmount(typedValue, (isExactIn ? inputCurrency : outputCurrency) ?? undefined)
 
-  const bestTradeExactIn = useTradeExactIn(isExactIn ? parsedAmount : undefined, outputCurrency ?? undefined)
-  const bestTradeExactOut = useTradeExactOut(inputCurrency ?? undefined, !isExactIn ? parsedAmount : undefined)
+  const bestTradeExactIn = useV2TradeExactIn(isExactIn ? parsedAmount : undefined, outputCurrency ?? undefined)
+  const bestTradeExactOut = useV2TradeExactOut(inputCurrency ?? undefined, !isExactIn ? parsedAmount : undefined)
 
   const v2Trade = isExactIn ? bestTradeExactIn : bestTradeExactOut