feat: x rollout cleanup (Uniswap#7582)

* feat: cleanup post x rollout

* feat: remove feature flag

* fix: remove more unused styled components

* fix: delete deprecated value from redux store

* fix: lint

* fix: remove userOptedOutOfUniswapX

* fix: migrate verion in edge case, add test

Author: just-toby

cypress/e2e/swap/fees.test.ts

@@ -120,10 +120,7 @@ describe('Swap with fees', () => {
   describe('UniswapX swaps', () => {
     it('displays UniswapX fee in UI', () => {
       cy.visit('/swap', {
-        featureFlags: [
-          { name: FeatureFlag.feesEnabled, value: true },
-          { name: FeatureFlag.uniswapXDefaultEnabled, value: true },
-        ],
+        featureFlags: [{ name: FeatureFlag.feesEnabled, value: true }],
       })
 
       // Intercept the trade quote

cypress/e2e/swap/uniswapx.test.ts

@@ -1,6 +1,5 @@
 import { ChainId, CurrencyAmount } from '@uniswap/sdk-core'
 import { CyHttpMessages } from 'cypress/types/net-stubbing'
-import { FeatureFlag } from 'featureFlags'
 
 import { DAI, nativeOnChain, USDC_MAINNET } from '../../../src/constants/tokens'
 import { getTestSelector } from '../../utils'
@@ -45,9 +44,7 @@ function stubSwapTxReceipt() {
 describe('UniswapX Toggle', () => {
   beforeEach(() => {
     stubNonPriceQuoteWith(QuoteWhereUniswapXIsBetter)
-    cy.visit(`/swap/?inputCurrency=${USDC_MAINNET.address}&outputCurrency=${DAI.address}`, {
-      featureFlags: [{ name: FeatureFlag.uniswapXDefaultEnabled, value: true }],
-    })
+    cy.visit(`/swap/?inputCurrency=${USDC_MAINNET.address}&outputCurrency=${DAI.address}`)
   })
 
   it('displays uniswapx ui when setting is on', () => {
@@ -69,9 +66,7 @@ describe('UniswapX Orders', () => {
     stubSwapTxReceipt()
 
     cy.hardhat().then((hardhat) => hardhat.fund(hardhat.wallet, CurrencyAmount.fromRawAmount(USDC_MAINNET, 3e8)))
-    cy.visit(`/swap/?inputCurrency=${USDC_MAINNET.address}&outputCurrency=${DAI.address}`, {
-      featureFlags: [{ name: FeatureFlag.uniswapXDefaultEnabled, value: true }],
-    })
+    cy.visit(`/swap/?inputCurrency=${USDC_MAINNET.address}&outputCurrency=${DAI.address}`)
   })
 
   it('can swap exact-in trades using uniswapX', () => {
@@ -159,9 +154,7 @@ describe('UniswapX Eth Input', () => {
 
     stubSwapTxReceipt()
 
-    cy.visit(`/swap/?inputCurrency=ETH&outputCurrency=${DAI.address}`, {
-      featureFlags: [{ name: FeatureFlag.uniswapXDefaultEnabled, value: true }],
-    })
+    cy.visit(`/swap/?inputCurrency=ETH&outputCurrency=${DAI.address}`)
   })
 
   it('can swap using uniswapX with ETH as input', () => {
@@ -247,9 +240,7 @@ describe('UniswapX activity history', () => {
     cy.hardhat().then(async (hardhat) => {
       await hardhat.fund(hardhat.wallet, CurrencyAmount.fromRawAmount(USDC_MAINNET, 3e8))
     })
-    cy.visit(`/swap/?inputCurrency=${USDC_MAINNET.address}&outputCurrency=${DAI.address}`, {
-      featureFlags: [{ name: FeatureFlag.uniswapXDefaultEnabled, value: true }],
-    })
+    cy.visit(`/swap/?inputCurrency=${USDC_MAINNET.address}&outputCurrency=${DAI.address}`)
   })
 
   it('can view UniswapX order status progress in activity', () => {

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -14,7 +14,6 @@ import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx'
 import { useProgressIndicatorV2Flag } from 'featureFlags/flags/progressIndicatorV2'
 import { useQuickRouteMainnetFlag } from 'featureFlags/flags/quickRouteMainnet'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
-import { useUniswapXDefaultEnabledFlag } from 'featureFlags/flags/uniswapXDefault'
 import { useUniswapXSyntheticQuoteFlag } from 'featureFlags/flags/uniswapXUseSyntheticQuote'
 import { useFeesEnabledFlag } from 'featureFlags/flags/useFees'
 import { useUpdateAtom } from 'jotai/utils'
@@ -324,12 +323,6 @@ export default function FeatureFlagModal() {
             featureFlag={FeatureFlag.uniswapXSyntheticQuote}
             label="Force synthetic quotes for UniswapX"
           />
-          <FeatureFlagOption
-            variant={BaseVariant}
-            value={useUniswapXDefaultEnabledFlag()}
-            featureFlag={FeatureFlag.uniswapXDefaultEnabled}
-            label="Enable UniswapX by default"
-          />
         </FeatureFlagGroup>
         <FeatureFlagGroup name="Info Site Migration">
           <FeatureFlagOption

src/components/Popover/index.tsx

@@ -20,7 +20,7 @@ const ReferenceElement = styled.div`
   height: inherit;
 `
 
-export const Arrow = styled.div`
+const Arrow = styled.div`
   width: 8px;
   height: 8px;
   z-index: 9998;

src/components/Settings/RouterPreferenceSettings/index.tsx

@@ -3,11 +3,8 @@ import Column from 'components/Column'
 import UniswapXBrandMark from 'components/Logo/UniswapXBrandMark'
 import { RowBetween, RowFixed } from 'components/Row'
 import Toggle from 'components/Toggle'
-import { useUniswapXDefaultEnabled } from 'featureFlags/flags/uniswapXDefault'
-import { useAppDispatch } from 'state/hooks'
 import { RouterPreference } from 'state/routing/types'
-import { useRouterPreference, useUserOptedOutOfUniswapX } from 'state/user/hooks'
-import { updateDisabledUniswapX, updateOptedOutOfUniswapX } from 'state/user/reducer'
+import { useRouterPreference } from 'state/user/hooks'
 import styled from 'styled-components'
 import { ExternalLink, ThemedText } from 'theme/components'
 
@@ -22,12 +19,6 @@ const InlineLink = styled(ThemedText.BodySmall)`
 
 export default function RouterPreferenceSettings() {
   const [routerPreference, setRouterPreference] = useRouterPreference()
-  const dispatch = useAppDispatch()
-  const userOptedOutOfUniswapX = useUserOptedOutOfUniswapX()
-  const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled()
-  const isUniswapXOverrideEnabled = isUniswapXDefaultEnabled && !userOptedOutOfUniswapX
-
-  const uniswapXInEffect = routerPreference === RouterPreference.X || isUniswapXOverrideEnabled
 
   return (
     <RowBetween gap="sm">
@@ -46,21 +37,9 @@ export default function RouterPreferenceSettings() {
       </RowFixed>
       <Toggle
         id="toggle-uniswap-x-button"
-        // 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}
+        isActive={routerPreference === RouterPreference.X}
         toggle={() => {
-          if (uniswapXInEffect) {
-            if (isUniswapXDefaultEnabled) {
-              // We need to remember if a opts out of UniswapX, so we don't request UniswapX quotes.
-              dispatch(updateOptedOutOfUniswapX({ optedOutOfUniswapX: true }))
-            } else {
-              // 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(uniswapXInEffect ? RouterPreference.API : RouterPreference.X)
+          setRouterPreference(routerPreference === RouterPreference.X ? RouterPreference.API : RouterPreference.X)
         }}
       />
     </RowBetween>

src/components/swap/styled.tsx

@@ -4,7 +4,6 @@ import { AlertTriangle } from 'react-feather'
 import styled, { css } from 'styled-components'
 import { Z_INDEX } from 'theme/zIndex'
 
-import { useIsDarkMode } from '../../theme/components/ThemeToggle'
 import { AutoColumn } from '../Column'
 
 export const PageWrapper = styled.div`
@@ -61,109 +60,6 @@ const SwapWrapperInner = styled.div`
   padding-top: 12px;
 `
 
-export const UniswapPopoverContainer = styled.div`
-  padding: 18px;
-  color: ${({ theme }) => theme.neutral1};
-  font-weight: 485;
-  font-size: 12px;
-  line-height: 16px;
-  word-break: break-word;
-  background: ${({ theme }) => theme.surface1};
-  border-radius: 20px;
-  border: 1px solid ${({ theme }) => theme.surface3};
-  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
-  position: relative;
-  overflow: hidden;
-`
-
-const springDownKeyframes = `@keyframes spring-down {
-  0% { transform: translateY(-80px); }
-  25% { transform: translateY(4px); }
-  50% { transform: translateY(-1px); }
-  75% { transform: translateY(0px); }
-  100% { transform: translateY(0px); }
-}`
-
-const backUpKeyframes = `@keyframes back-up {
-  0% { transform: translateY(0px); }
-  100% { transform: translateY(-80px); }
-}`
-
-export const UniswapXShine = (props: any) => {
-  const isDarkMode = useIsDarkMode()
-  return <UniswapXShineInner {...props} style={{ opacity: isDarkMode ? 0.15 : 0.05, ...props.style }} />
-}
-
-const UniswapXShineInner = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: linear-gradient(130deg, transparent 20%, ${({ theme }) => theme.accent1}, transparent 80%);
-  opacity: 0.15;
-`
-
-// overflow hidden to hide the SwapMustacheShadow
-export const SwapOptInSmallContainer = styled.div<{ visible: boolean }>`
-  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
-  overflow: hidden;
-  margin-top: -14px;
-  transform: translateY(${({ visible }) => (visible ? 0 : -80)}px);
-  transition: all ease 400ms;
-  animation: ${({ visible }) => (visible ? `spring-down 900ms ease forwards` : 'back-up 200ms ease forwards')};
-
-  ${springDownKeyframes}
-  ${backUpKeyframes}
-`
-
-export const UniswapXOptInLargeContainerPositioner = styled.div`
-  position: absolute;
-  top: 211px;
-  right: ${-320 - 15}px;
-  width: 320px;
-  align-items: center;
-  min-height: 170px;
-  display: flex;
-  pointer-events: none;
-`
-
-export const UniswapXOptInLargeContainer = styled.div<{ visible: boolean }>`
-  opacity: ${({ visible }) => (visible ? 1 : 0)};
-  transform: ${({ visible }) => `translateY(${visible ? 0 : -6}px)`};
-  transition: all ease-in 300ms;
-  transition-delay: ${({ visible }) => (visible ? '350ms' : '0')};
-  pointer-events: ${({ visible }) => (visible ? 'auto' : 'none')};
-`
-
-export const SwapMustache = styled.main`
-  position: relative;
-  background: ${({ theme }) => theme.surface1};
-  border-radius: 16px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border: 1px solid ${({ theme }) => theme.surface3};
-  border-top-width: 0;
-  padding: 18px;
-  padding-top: calc(12px + 18px);
-  z-index: 0;
-  transition: transform 250ms ease;
-`
-
-export const SwapMustacheShadow = styled.main`
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-radius: 16px;
-  height: 100%;
-  width: 100%;
-  transform: translateY(-100%);
-  box-shadow: 0 0 20px 20px ${({ theme }) => theme.surface2};
-  background: red;
-`
-
 export const ArrowWrapper = styled.div<{ clickable: boolean }>`
   border-radius: 12px;
   height: 40px;

src/featureFlags/flags/uniswapXDefault.ts

@@ -16,7 +16,6 @@ export enum FeatureFlag {
   infoTDP = 'info_tdp',
   infoPoolPage = 'info_pool_page',
   infoLiveViews = 'info_live_views',
-  uniswapXDefaultEnabled = 'uniswapx_default_enabled',
   quickRouteMainnet = 'enable_quick_route_mainnet',
   progressIndicatorV2 = 'progress_indicator_v2',
   feesEnabled = 'fees_enabled',

src/featureFlags/index.tsx

@@ -1,12 +1,10 @@
 import { SkipToken, skipToken } from '@reduxjs/toolkit/query/react'
 import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
-import { useUniswapXDefaultEnabled } from 'featureFlags/flags/uniswapXDefault'
 import { useUniswapXSyntheticQuoteEnabled } from 'featureFlags/flags/uniswapXUseSyntheticQuote'
 import { useFeesEnabled } from 'featureFlags/flags/useFees'
 import { useMemo } from 'react'
 import { GetQuoteArgs, INTERNAL_ROUTER_PREFERENCE_PRICE, RouterPreference } from 'state/routing/types'
 import { currencyAddressForSwapQuote } from 'state/routing/utils'
-import { useUserDisabledUniswapX, useUserOptedOutOfUniswapX } from 'state/user/hooks'
 
 /**
  * Returns query arguments for the Routing API query or undefined if the
@@ -29,9 +27,6 @@ export function useRoutingAPIArguments({
   routerPreference: RouterPreference | typeof INTERNAL_ROUTER_PREFERENCE_PRICE
 }): GetQuoteArgs | SkipToken {
   const uniswapXForceSyntheticQuotes = useUniswapXSyntheticQuoteEnabled()
-  const userDisabledUniswapX = useUserDisabledUniswapX()
-  const userOptedOutOfUniswapX = useUserOptedOutOfUniswapX()
-  const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled()
 
   const feesEnabled = useFeesEnabled()
   // Don't enable fee logic if this is a quote for pricing
@@ -56,23 +51,8 @@ export function useRoutingAPIArguments({
             tradeType,
             needsWrapIfUniswapX: tokenIn.isNative,
             uniswapXForceSyntheticQuotes,
-            userDisabledUniswapX,
-            userOptedOutOfUniswapX,
-            isUniswapXDefaultEnabled,
             sendPortionEnabled,
           },
-    [
-      account,
-      amount,
-      routerPreference,
-      tokenIn,
-      tokenOut,
-      tradeType,
-      uniswapXForceSyntheticQuotes,
-      userDisabledUniswapX,
-      userOptedOutOfUniswapX,
-      isUniswapXDefaultEnabled,
-      sendPortionEnabled,
-    ]
+    [account, amount, routerPreference, tokenIn, tokenOut, tradeType, uniswapXForceSyntheticQuotes, sendPortionEnabled]
   )
 }

src/lib/hooks/routing/useRoutingAPIArguments.ts

@@ -5,18 +5,16 @@ import ErrorBoundary from 'components/ErrorBoundary'
 import Loader from 'components/Icons/LoadingSpinner'
 import NavBar, { PageTabs } from 'components/NavBar'
 import { UK_BANNER_HEIGHT, UK_BANNER_HEIGHT_MD, UK_BANNER_HEIGHT_SM, UkBanner } from 'components/NavBar/UkBanner'
-import { FeatureFlag, useFeatureFlagsIsLoaded } from 'featureFlags'
-import { useUniswapXDefaultEnabled } from 'featureFlags/flags/uniswapXDefault'
+import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import { useAtom } from 'jotai'
 import { useBag } from 'nft/hooks/useBag'
 import { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { Navigate, Route, Routes, useLocation, useSearchParams } from 'react-router-dom'
 import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import { useAppSelector } from 'state/hooks'
 import { AppState } from 'state/reducer'
-import { RouterPreference } from 'state/routing/types'
-import { useRouterPreference, useUserOptedOutOfUniswapX } from 'state/user/hooks'
-import { StatsigProvider, StatsigUser, useGate } from 'statsig-react'
+import { useRouterPreference } from 'state/user/hooks'
+import { StatsigProvider, StatsigUser } from 'statsig-react'
 import styled from 'styled-components'
 import DarkModeQueryParamReader from 'theme/components/DarkModeQueryParamReader'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
@@ -212,9 +210,6 @@ function UserPropertyUpdater() {
   const isDarkMode = useIsDarkMode()
 
   const [routerPreference] = useRouterPreference()
-  const userOptedOutOfUniswapX = useUserOptedOutOfUniswapX()
-  const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled()
-  const { isLoading: isUniswapXDefaultLoading } = useGate(FeatureFlag.uniswapXDefaultEnabled)
   const rehydrated = useAppSelector((state) => state._persist.rehydrated)
 
   useEffect(() => {
@@ -248,22 +243,8 @@ function UserPropertyUpdater() {
   }, [isDarkMode])
 
   useEffect(() => {
-    if (isUniswapXDefaultLoading || !rehydrated) return
-
-    // If we're not in the transition period to UniswapX opt-out, set the router preference to whatever is specified.
-    if (!isUniswapXDefaultEnabled) {
-      user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference)
-      return
-    }
-
-    // In the transition period, override the stored API preference to UniswapX if the user hasn't opted out.
-    if (routerPreference === RouterPreference.API && !userOptedOutOfUniswapX) {
-      user.set(CustomUserProperties.ROUTER_PREFERENCE, RouterPreference.X)
-      return
-    }
-
-    // Otherwise, the user has opted out or their preference is UniswapX/client, so set the preference to whatever is specified.
+    if (!rehydrated) return
     user.set(CustomUserProperties.ROUTER_PREFERENCE, routerPreference)
-  }, [routerPreference, isUniswapXDefaultEnabled, userOptedOutOfUniswapX, isUniswapXDefaultLoading, rehydrated])
+  }, [routerPreference, rehydrated])
   return null
 }