fix: hotfix fot ui bug in swap details dropdown + update flag and sentry (#7276)

* init

* fix: use updated feature flag

* fix: remove sentry warnings for failed tax fetches

* fix: completely hide tax rows while syncing

* test: use syncing = false for fot tests

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'
@@ -84,8 +84,8 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
       )}
       {isClassicTrade(trade) && (
         <>
-          <TokenTaxLineItem trade={trade} type="input" />
-          <TokenTaxLineItem trade={trade} type="output" />
+          <TokenTaxLineItem trade={trade} type="input" syncing={syncing} />
+          <TokenTaxLineItem trade={trade} type="output" syncing={syncing} />
           <RowBetween>
             <MouseoverTooltip text={<Trans>The impact your trade has on the market price of this pool.</Trans>}>
               <ThemedText.BodySmall color="neutral2">
@@ -182,7 +182,17 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
   )
 }
 
-function TokenTaxLineItem({ trade, type }: { trade: ClassicTrade; type: 'input' | 'output' }) {
+function TokenTaxLineItem({
+  trade,
+  type,
+  syncing,
+}: {
+  trade: ClassicTrade
+  type: 'input' | 'output'
+  syncing: boolean
+}) {
+  if (syncing) return null
+
   const [currency, percentage] =
     type === 'input' ? [trade.inputAmount.currency, trade.inputTax] : [trade.outputAmount.currency, trade.outputTax]
 
@@ -192,13 +202,18 @@ 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>
+              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>{' '}
+            <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>
+        <ThemedText.BodySmall color="neutral2">{`${currency.symbol} fee`}</ThemedText.BodySmall>
       </MouseoverTooltip>
       <ThemedText.BodySmall>{formatPriceImpact(percentage)}</ThemedText.BodySmall>
     </RowBetween>

src/components/swap/SwapDetailsDropdown.test.tsx

@@ -51,7 +51,7 @@ describe('SwapDetailsDropdown.tsx', () => {
     render(
       <SwapDetailsDropdown
         trade={TEST_TRADE_FEE_ON_SELL}
-        syncing={true}
+        syncing={false}
         loading={true}
         allowedSlippage={TEST_ALLOWED_SLIPPAGE}
       />
@@ -70,7 +70,7 @@ describe('SwapDetailsDropdown.tsx', () => {
     render(
       <SwapDetailsDropdown
         trade={TEST_TRADE_FEE_ON_BUY}
-        syncing={true}
+        syncing={false}
         loading={true}
         allowedSlippage={TEST_ALLOWED_SLIPPAGE}
       />

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>
+                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>{' '}
+              <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/featureFlags/index.tsx

@@ -13,7 +13,7 @@ export enum FeatureFlag {
   uniswapXExactOutputEnabled = 'uniswapx_exact_output_enabled',
   multichainUX = 'multichain_ux',
   currencyConversion = 'currency_conversion',
-  fotAdjustedmentsEnabled = 'fot_adjustments_enabled',
+  fotAdjustedmentsEnabled = 'fot_dynamic_adjustments_enabled',
   infoExplore = 'info_explore',
   infoTDP = 'info_tdp',
   infoPoolPage = 'info_pool_page',

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/hooks/useSwapTaxes.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react'
 import { InterfaceEventName } from '@uniswap/analytics-events'
 import { ChainId, Percent } from '@uniswap/sdk-core'
 import { WETH_ADDRESS as getWethAddress } from '@uniswap/universal-router-sdk'
@@ -61,11 +60,7 @@ async function getSwapTaxes(
       })
     }
   } catch (e) {
-    Sentry.withScope(function (scope) {
-      scope.setTag('method', 'getSwapTaxes')
-      scope.setLevel('warning')
-      Sentry.captureException(e)
-    })
+    console.warn('Failed to get swap taxes for token(s):', addresses, e)
   }
 
   const inputTax = (inputTokenAddress ? FEE_CACHE[inputTokenAddress]?.sellTax : ZERO_PERCENT) ?? ZERO_PERCENT

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,
-    outputCurrency?.isToken ? outputCurrency.address : undefined
+    inputCurrency?.isToken && fotAdjustmentsEnabled ? inputCurrency.address : undefined,
+    outputCurrency?.isToken && fotAdjustmentsEnabled ? outputCurrency.address : undefined
   )
 
   const recipientLookup = useENS(recipient ?? undefined)