feat: uniswapX default feature flag (#7246)

* feat: uniswapX default feature flag

* fix: bad merge

* fix: toggle behavior and style issues

* fix: toggle behavior

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -8,6 +8,7 @@ import { useInfoPoolPageFlag } from 'featureFlags/flags/infoPoolPage'
 import { useInfoTDPFlag } from 'featureFlags/flags/infoTDP'
 import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
+import { useUniswapXDefaultEnabledFlag } from 'featureFlags/flags/uniswapXDefault'
 import { useUniswapXEthOutputFlag } from 'featureFlags/flags/uniswapXEthOutput'
 import { useUniswapXExactOutputFlag } from 'featureFlags/flags/uniswapXExactOutput'
 import { useUniswapXSyntheticQuoteFlag } from 'featureFlags/flags/uniswapXUseSyntheticQuote'
@@ -228,6 +229,25 @@ export default function FeatureFlagModal() {
             <X size={24} />
           </CloseButton>
         </Header>
+        <FeatureFlagOption
+          variant={BaseVariant}
+          value={useCurrencyConversionFlag()}
+          featureFlag={FeatureFlag.currencyConversion}
+          label="Enable currency conversion"
+        />
+        <FeatureFlagOption
+          variant={BaseVariant}
+          value={useMultichainUXFlag()}
+          featureFlag={FeatureFlag.multichainUX}
+          label="Updated Multichain UX"
+        />
+        <FeatureFlagOption
+          variant={BaseVariant}
+          value={useFotAdjustmentsFlag()}
+          featureFlag={FeatureFlag.fotAdjustedmentsEnabled}
+          label="Enable fee-on-transfer UI and slippage adjustments"
+        />
+        <FeatureFlagGroup name="UniswapX Flags">
           <FeatureFlagOption
             variant={BaseVariant}
             value={useUniswapXSyntheticQuoteFlag()}
@@ -248,22 +268,11 @@ export default function FeatureFlagModal() {
           />
           <FeatureFlagOption
             variant={BaseVariant}
-          value={useCurrencyConversionFlag()}
-          featureFlag={FeatureFlag.currencyConversion}
-          label="Enable currency conversion"
-        />
-        <FeatureFlagOption
-          variant={BaseVariant}
-          value={useMultichainUXFlag()}
-          featureFlag={FeatureFlag.multichainUX}
-          label="Updated Multichain UX"
-        />
-        <FeatureFlagOption
-          variant={BaseVariant}
-          value={useFotAdjustmentsFlag()}
-          featureFlag={FeatureFlag.fotAdjustedmentsEnabled}
-          label="Enable fee-on-transfer UI and slippage adjustments"
+            value={useUniswapXDefaultEnabledFlag()}
+            featureFlag={FeatureFlag.uniswapXDefaultEnabled}
+            label="Enable UniswapX by default"
           />
+        </FeatureFlagGroup>
         <FeatureFlagGroup name="Info Site Migration">
           <FeatureFlagOption
             variant={BaseVariant}

src/components/Settings/RouterPreferenceSettings/index.tsx

@@ -5,9 +5,10 @@ import UniswapXBrandMark from 'components/Logo/UniswapXBrandMark'
 import { RowBetween, RowFixed } from 'components/Row'
 import Toggle from 'components/Toggle'
 import { isUniswapXSupportedChain } from 'constants/chains'
+import { useUniswapXDefaultEnabled } from 'featureFlags/flags/uniswapXDefault'
 import { useAppDispatch } from 'state/hooks'
 import { RouterPreference } from 'state/routing/types'
-import { useRouterPreference } from 'state/user/hooks'
+import { useRouterPreference, useUserDisabledUniswapX } from 'state/user/hooks'
 import { updateDisabledUniswapX } from 'state/user/reducer'
 import styled from 'styled-components'
 import { Divider, ExternalLink, ThemedText } from 'theme'
@@ -26,6 +27,13 @@ export default function RouterPreferenceSettings() {
   const [routerPreference, setRouterPreference] = useRouterPreference()
   const uniswapXEnabled = chainId && isUniswapXSupportedChain(chainId)
   const dispatch = useAppDispatch()
+  const userDisabledUniswapX = useUserDisabledUniswapX()
+  const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled()
+  const isUniswapXOverrideEnabled = isUniswapXDefaultEnabled && !userDisabledUniswapX
+
+  const uniswapXInEffect =
+    routerPreference === RouterPreference.X ||
+    (routerPreference !== RouterPreference.CLIENT && isUniswapXOverrideEnabled)
 
   return (
     <>
@@ -47,13 +55,16 @@ export default function RouterPreferenceSettings() {
             </RowFixed>
             <Toggle
               id="toggle-uniswap-x-button"
-              isActive={routerPreference === RouterPreference.X}
+              // If UniswapX-by-default is enabled we need to render this as active even if routerPreference === RouterPreference.API
+              // because we're going to default to the UniswapX quote.
+              // If the user manually toggles it off, this doesn't apply.
+              isActive={uniswapXInEffect}
               toggle={() => {
-                if (routerPreference === RouterPreference.X) {
+                if (uniswapXInEffect) {
                   // We need to remember if a user disables Uniswap X, so we don't show the opt-in flow again.
                   dispatch(updateDisabledUniswapX({ disabledUniswapX: true }))
                 }
-                setRouterPreference(routerPreference === RouterPreference.X ? RouterPreference.API : RouterPreference.X)
+                setRouterPreference(uniswapXInEffect ? RouterPreference.API : RouterPreference.X)
               }}
             />
           </RowBetween>
@@ -73,7 +84,11 @@ export default function RouterPreferenceSettings() {
           isActive={routerPreference === RouterPreference.CLIENT}
           toggle={() =>
             setRouterPreference(
-              routerPreference === RouterPreference.CLIENT ? RouterPreference.API : RouterPreference.CLIENT
+              routerPreference === RouterPreference.CLIENT
+                ? isUniswapXDefaultEnabled
+                  ? RouterPreference.X
+                  : RouterPreference.API
+                : RouterPreference.CLIENT
             )
           }
         />

src/featureFlags/flags/uniswapXDefault.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useUniswapXDefaultEnabledFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.uniswapXDefaultEnabled)
+}
+
+export function useUniswapXDefaultEnabled(): boolean {
+  return useUniswapXDefaultEnabledFlag() === BaseVariant.Enabled
+}

src/featureFlags/index.tsx

@@ -18,6 +18,7 @@ export enum FeatureFlag {
   infoTDP = 'info_tdp',
   infoPoolPage = 'info_pool_page',
   infoLiveViews = 'info_live_views',
+  uniswapXDefaultEnabled = 'uniswapx_default_enabled',
 }
 
 interface FeatureFlagsContextType {

src/hooks/useUniversalRouter.ts

@@ -152,6 +152,7 @@ export function useUniversalRouterSwapCallback(
   }, [
     account,
     analyticsContext,
+    blockNumber,
     chainId,
     fiatValues,
     options.deadline,

src/lib/hooks/routing/useRoutingAPIArguments.ts

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

src/pages/Swap/index.tsx

@@ -32,6 +32,7 @@ import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
 import { getChainInfo } from 'constants/chainInfo'
 import { asSupportedChain, isSupportedChain } from 'constants/chains'
 import { getSwapCurrencyId, TOKEN_SHORTHANDS } from 'constants/tokens'
+import { useUniswapXDefaultEnabled } from 'featureFlags/flags/uniswapXDefault'
 import { useCurrency, useDefaultActiveTokens } from 'hooks/Tokens'
 import { useIsSwapUnsupported } from 'hooks/useIsSwapUnsupported'
 import { useLocalCurrencyPrice } from 'hooks/useLocalCurrencyPrice'
@@ -565,6 +566,7 @@ export function Swap({
   const switchingChain = useAppSelector((state) => state.wallets.switchingChain)
   const showOptInSmall = !useScreenSize().navSearchInputVisible
   const isDark = useIsDarkMode()
+  const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled()
 
   const swapElement = (
     <SwapWrapper isDark={isDark} className={className} id="swap-page">
@@ -791,14 +793,14 @@ export function Swap({
           )}
         </div>
       </AutoColumn>
-      {!showOptInSmall && <UniswapXOptIn isSmall={false} swapInfo={swapInfo} />}
+      {!showOptInSmall && !isUniswapXDefaultEnabled && <UniswapXOptIn isSmall={false} swapInfo={swapInfo} />}
     </SwapWrapper>
   )
 
   return (
     <>
       {swapElement}
-      {showOptInSmall && <UniswapXOptIn isSmall swapInfo={swapInfo} />}
+      {showOptInSmall && !isUniswapXDefaultEnabled && <UniswapXOptIn isSmall swapInfo={swapInfo} />}
     </>
   )
 }

src/state/routing/types.ts

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

src/state/routing/utils.ts

@@ -192,11 +192,20 @@ export async function transformRoutesToTrade(
   data: URAQuoteResponse,
   quoteMethod: QuoteMethod
 ): Promise<TradeResult> {
-  const { tradeType, needsWrapIfUniswapX, routerPreference, account, amount } = args
+  const {
+    tradeType,
+    needsWrapIfUniswapX,
+    routerPreference,
+    account,
+    amount,
+    isUniswapXDefaultEnabled,
+    inputTax,
+    outputTax,
+  } = args
 
-  // During the opt-in period, only return UniswapX quotes if the user has turned on the setting,
-  // even if it is the better quote.
-  const showUniswapXTrade = data.routing === URAQuoteType.DUTCH_LIMIT && routerPreference === RouterPreference.X
+  const showUniswapXTrade =
+    data.routing === URAQuoteType.DUTCH_LIMIT &&
+    (routerPreference === RouterPreference.X || (isUniswapXDefaultEnabled && routerPreference === RouterPreference.API))
 
   const [currencyIn, currencyOut] = getTradeCurrencies(args, showUniswapXTrade)
   const { gasUseEstimateUSD, blockNumber, routes, gasUseEstimate } = getClassicTradeDetails(
@@ -247,13 +256,13 @@ export async function transformRoutesToTrade(
     isUniswapXBetter,
     requestId: data.quote.requestId,
     quoteMethod,
-    inputTax: args.inputTax,
-    outputTax: args.outputTax,
+    inputTax,
+    outputTax,
   })
 
   // During the opt-in period, only return UniswapX quotes if the user has turned on the setting,
   // even if it is the better quote.
-  if (isUniswapXBetter && args.routerPreference === RouterPreference.X) {
+  if (isUniswapXBetter && (routerPreference === RouterPreference.X || isUniswapXDefaultEnabled)) {
     const orderInfo = toDutchOrderInfo(data.quote.orderInfo)
     const wrapInfo = await getWrapInfo(needsWrapIfUniswapX, account, currencyIn.chainId, amount, usdCostPerGas)