fix: gate FOT UI (#7272)

* fix: gate FOT UI in swap component

* feat: help article

src/components/swap/AdvancedSwapDetails.tsx

@@ -11,7 +11,7 @@ import { ClassicTrade, InterfaceTrade } from 'state/routing/types'
 import { getTransactionCount, isClassicTrade } from 'state/routing/utils'
 import { formatCurrencyAmount, formatNumber, formatPriceImpact, NumberType } from 'utils/formatNumbers'
 
-import { Separator, ThemedText } from '../../theme'
+import { ExternalLink, Separator, ThemedText } from '../../theme'
 import Column from '../Column'
 import RouterLabel from '../RouterLabel'
 import { RowBetween, RowFixed } from '../Row'
@@ -192,10 +192,15 @@ function TokenTaxLineItem({ trade, type }: { trade: ClassicTrade; type: 'input'
     <RowBetween>
       <MouseoverTooltip
         text={
-          <Trans>
+          <>
-            Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not
+            <Trans>
-            receive any of these fees.
+              Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not
-          </Trans>
+              receive any of these fees.
+            </Trans>{' '}
+            <ExternalLink href="https://support.uniswap.org/hc/en-us/articles/18673568523789-What-is-a-token-fee-">
+              Learn more
+            </ExternalLink>
+          </>
         }
       >
         <ThemedText.BodySmall color="textSecondary">{`${currency.symbol} fee`}</ThemedText.BodySmall>

src/components/swap/SwapModalFooter.tsx

@@ -15,7 +15,7 @@ import { ClassicTrade, InterfaceTrade, RouterPreference } from 'state/routing/ty
 import { getTransactionCount, isClassicTrade } from 'state/routing/utils'
 import { useRouterPreference, useUserSlippageTolerance } from 'state/user/hooks'
 import styled, { DefaultTheme, useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme'
 import { formatNumber, formatPriceImpact, NumberType } from 'utils/formatNumbers'
 import { formatTransactionAmount, priceToPreciseFloat } from 'utils/formatNumbers'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
@@ -232,10 +232,15 @@ function TokenTaxLineItem({ trade, type }: { trade: ClassicTrade; type: 'input'
       <Row align="flex-start" justify="space-between" gap="sm">
         <MouseoverTooltip
           text={
-            <Trans>
+            <>
-              Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not
+              <Trans>
-              receive any of these fees.
+                Some tokens take a fee when they are bought or sold, which is set by the token issuer. Uniswap does not
-            </Trans>
+                receive any of these fees.
+              </Trans>{' '}
+              <ExternalLink href="https://support.uniswap.org/hc/en-us/articles/18673568523789-What-is-a-token-fee-">
+                Learn more
+              </ExternalLink>
+            </>
           }
         >
           <Label cursor="help">{t`${currency.symbol} fee`}</Label>

src/lib/hooks/routing/useRoutingAPIArguments.ts

@@ -1,6 +1,5 @@
 import { SkipToken, skipToken } from '@reduxjs/toolkit/query/react'
 import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
-import { useFotAdjustmentsEnabled } from 'featureFlags/flags/fotAdjustments'
 import { useUniswapXEthOutputEnabled } from 'featureFlags/flags/uniswapXEthOutput'
 import { useUniswapXExactOutputEnabled } from 'featureFlags/flags/uniswapXExactOutput'
 import { useUniswapXSyntheticQuoteEnabled } from 'featureFlags/flags/uniswapXUseSyntheticQuote'
@@ -37,7 +36,6 @@ export function useRoutingAPIArguments({
   const userDisabledUniswapX = useUserDisabledUniswapX()
   const uniswapXEthOutputEnabled = useUniswapXEthOutputEnabled()
   const uniswapXExactOutputEnabled = useUniswapXExactOutputEnabled()
-  const fotAdjustmentsEnabled = useFotAdjustmentsEnabled()
 
   return useMemo(
     () =>
@@ -61,7 +59,6 @@ export function useRoutingAPIArguments({
             userDisabledUniswapX,
             uniswapXEthOutputEnabled,
             uniswapXExactOutputEnabled,
-            fotAdjustmentsEnabled,
             inputTax,
             outputTax,
           },
@@ -76,7 +73,6 @@ export function useRoutingAPIArguments({
       uniswapXForceSyntheticQuotes,
       userDisabledUniswapX,
       uniswapXEthOutputEnabled,
-      fotAdjustmentsEnabled,
       inputTax,
       outputTax,
     ]

src/state/routing/types.ts

@@ -46,7 +46,6 @@ export interface GetQuoteArgs {
   uniswapXEthOutputEnabled: boolean
   uniswapXExactOutputEnabled: boolean
   userDisabledUniswapX: boolean
-  fotAdjustmentsEnabled: boolean
   inputTax: Percent
   outputTax: Percent
 }

src/state/swap/hooks.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { ChainId, Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { useFotAdjustmentsEnabled } from 'featureFlags/flags/fotAdjustments'
 import useAutoSlippageTolerance from 'hooks/useAutoSlippageTolerance'
 import { useDebouncedTrade } from 'hooks/useDebouncedTrade'
 import { useSwapTaxes } from 'hooks/useSwapTaxes'
@@ -108,9 +109,10 @@ export function useDerivedSwapInfo(state: SwapState, chainId: ChainId | undefine
   const inputCurrency = useCurrency(inputCurrencyId, chainId)
   const outputCurrency = useCurrency(outputCurrencyId, chainId)
 
+  const fotAdjustmentsEnabled = useFotAdjustmentsEnabled()
   const { inputTax, outputTax } = useSwapTaxes(
-    inputCurrency?.isToken ? inputCurrency.address : undefined,
+    inputCurrency?.isToken && fotAdjustmentsEnabled ? inputCurrency.address : undefined,
-    outputCurrency?.isToken ? outputCurrency.address : undefined
+    outputCurrency?.isToken && fotAdjustmentsEnabled ? outputCurrency.address : undefined
   )
 
   const recipientLookup = useENS(recipient ?? undefined)