fix: gate FOT UI in swap component (#7271)

* fix: gate FOT UI in swap component

* feat: help article

CODEOWNERS

@@ -0,0 +1 @@
+@uniswap/web-admins

src/components/AccountDrawer/MiniPortfolio/Activity/parseRemote.tsx

@@ -351,7 +351,7 @@ function parseRemoteActivity(assetActivity: AssetActivityPartsFragment): Activit
       return parseUniswapXOrder(assetActivity as OrderActivity)
     }
 
-    const changes = assetActivity.assetChanges.reduce(
+    const changes = assetActivity.details.assetChanges.reduce(
       (acc: TransactionChanges, assetChange) => {
         if (assetChange.__typename === 'NftApproval') acc.NftApproval.push(assetChange)
         else if (assetChange.__typename === 'NftApproveForAll') acc.NftApproveForAll.push(assetChange)
@@ -377,13 +377,16 @@ function parseRemoteActivity(assetActivity: AssetActivityPartsFragment): Activit
       status: assetActivity.details.status,
       timestamp: assetActivity.timestamp,
       logos: getLogoSrcs(changes),
-      title: assetActivity.type,
+      title: assetActivity.details.type,
       descriptor: assetActivity.details.to,
       from: assetActivity.details.from,
       nonce: assetActivity.details.nonce,
     }
 
-    const parsedFields = ActivityParserByType[assetActivity.type]?.(changes, assetActivity as TransactionActivity)
+    const parsedFields = ActivityParserByType[assetActivity.details.type]?.(
+      changes,
+      assetActivity as TransactionActivity
+    )
     return { ...defaultFields, ...parsedFields }
   } catch (e) {
     console.error('Failed to parse activity', e, assetActivity)

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
               receive any of these fees.
-          </Trans>
+            </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'
@@ -227,10 +227,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
                 receive any of these fees.
-            </Trans>
+              </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/graphql/data/activity.graphql

@@ -110,37 +110,6 @@ fragment TransactionDetailsParts on TransactionDetails {
   hash
   nonce
   status
-}
-
-fragment SwapOrderDetailsParts on SwapOrderDetails {
-  id
-  offerer
-  hash
-  orderStatus: status
-  inputToken {
-    ...TokenAssetParts
-  }
-  inputTokenQuantity
-  outputToken {
-    ...TokenAssetParts
-  }
-  outputTokenQuantity
-}
-
-fragment AssetActivityParts on AssetActivity {
-  id
-  timestamp
-  type
-  chain
-  details {
-    __typename
-    ... on TransactionDetails {
-      ...TransactionDetailsParts
-    }
-    ... on SwapOrderDetails {
-      ...SwapOrderDetailsParts
-    }
-  }
   assetChanges {
     __typename
     ... on TokenTransfer {
@@ -161,6 +130,36 @@ fragment AssetActivityParts on AssetActivity {
   }
 }
 
+fragment SwapOrderDetailsParts on SwapOrderDetails {
+  id
+  offerer
+  hash
+  orderStatus: status
+  inputToken {
+    ...TokenAssetParts
+  }
+  inputTokenQuantity
+  outputToken {
+    ...TokenAssetParts
+  }
+  outputTokenQuantity
+}
+
+fragment AssetActivityParts on AssetActivity {
+  id
+  timestamp
+  chain
+  details {
+    __typename
+    ... on TransactionDetails {
+      ...TransactionDetailsParts
+    }
+    ... on SwapOrderDetails {
+      ...SwapOrderDetailsParts
+    }
+  }
+}
+
 # TODO(UniswapX): return to a pagesize of 50 pre-launch
 query Activity($account: String!) {
   portfolios(ownerAddresses: [$account]) {

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)