feat: uniswapX default feature flag (#7246)

* feat: uniswapX default feature flag

* fix: bad merge

* fix: toggle behavior and style issues

* fix: toggle behavior
This commit is contained in:
eddie 2023-09-07 12:52:24 -07:00 committed by GitHub
parent 28ea390863
commit 24d62d9594
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 83 additions and 32 deletions

@ -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}

@ -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
)
}
/>

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

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

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

@ -1,5 +1,6 @@
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,
]

@ -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} />}
</>
)
}

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

@ -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)