@luxexchange/lx 1.0.0

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/TradeRoutingPreference/TradeRoutingPreferenceScreen.tsx

@@ -0,0 +1,473 @@
+import { TradingApi } from '@luxfi/api'
+import { FeatureFlags, useFeatureFlag } from '@luxfi/gating'
+import type { TFunction } from 'i18next'
+import type { ReactNode } from 'react'
+import { useCallback, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Flex, type FlexProps, HeightAnimator, Switch, Text, TouchableArea, DEXText, useSporeColors } from '@luxfi/ui/src'
+import { InfoCircleFilled } from '@luxfi/ui/src/components/icons/InfoCircleFilled'
+import { Lightning } from '@luxfi/ui/src/components/icons/Lightning'
+import { DEX } from '@luxfi/ui/src/components/icons/DEX'
+import { spacing, zIndexes } from '@luxfi/ui/src/theme'
+import { WarningSeverity } from '@luxexchange/lx/src/components/modals/WarningModal/types'
+import { WarningInfo } from '@luxexchange/lx/src/components/modals/WarningModal/WarningInfo'
+import { WarningModal } from '@luxexchange/lx/src/components/modals/WarningModal/WarningModal'
+import { LearnMoreLink } from '@luxexchange/lx/src/components/text/LearnMoreLink'
+import { InfoTooltip } from '@luxexchange/lx/src/components/tooltip/InfoTooltip'
+import WarningIcon from '@luxexchange/lx/src/components/warnings/WarningIcon'
+import { luxUrls } from '@luxexchange/lx/src/constants/urls'
+import { useLuxContextSelector } from '@luxexchange/lx/src/contexts/LuxContext'
+import { getChainInfo } from '@luxexchange/lx/src/features/chains/chainInfo'
+import { ElementName, ModalName } from '@luxexchange/lx/src/features/telemetry/constants'
+import Trace from '@luxexchange/lx/src/features/telemetry/Trace'
+import { TransactionSettingsModalId } from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/createTransactionSettingsModalStore'
+import { useModalHide } from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/useTransactionSettingsModalStore'
+import {
+  useTransactionSettingsActions,
+  useTransactionSettingsStore,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/transactionSettingsStore/useTransactionSettingsStore'
+import { isDefaultTradeRouteOptions } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/TradeRoutingPreference/isDefaultTradeRouteOptions'
+import { DEXInfo } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/TradeRoutingPreference/DEXInfo'
+import { V4HooksInfo } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/TradeRoutingPreference/V4HooksInfo'
+import { useV4SwapEnabled } from '@luxexchange/lx/src/features/transactions/swap/hooks/useV4SwapEnabled'
+import { useSwapFormStoreDerivedSwapInfo } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import type { FrontendSupportedProtocol } from '@luxexchange/lx/src/features/transactions/swap/utils/protocols'
+import { DEFAULT_PROTOCOL_OPTIONS } from '@luxexchange/lx/src/features/transactions/swap/utils/protocols'
+import { openUri } from '@luxexchange/lx/src/utils/linking'
+import { isExtensionApp, isMobileApp, isMobileWeb, isWebApp, isWebPlatform } from '@luxfi/utilities/src/platform'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+export function TradeRoutingPreferenceScreen(): JSX.Element {
+  const { t } = useTranslation()
+  const getIsDEXSupported = useLuxContextSelector((state) => state.getIsDEXSupported)
+  const { selectedProtocols, isV4HookPoolsEnabled } = useTransactionSettingsStore((s) => ({
+    selectedProtocols: s.selectedProtocols,
+    isV4HookPoolsEnabled: s.isV4HookPoolsEnabled,
+  }))
+  const { setSelectedProtocols, setIsV4HookPoolsEnabled, toggleProtocol } = useTransactionSettingsActions()
+
+  const [isDefault, setIsDefault] = useState(
+    isDefaultTradeRouteOptions({
+      selectedProtocols,
+      isV4HookPoolsEnabled,
+    }),
+  )
+  const dexEnabled = useFeatureFlag(FeatureFlags.DEX)
+  const allowDEXOnly = useFeatureFlag(FeatureFlags.AllowDEXOnlyRoutesInSwapSettings)
+
+  const chainId = useSwapFormStoreDerivedSwapInfo((s) => s.chainId)
+  const isDEXSupported = getIsDEXSupported?.(chainId)
+  const v4SwapEnabled = useV4SwapEnabled(chainId)
+  const chainName = getChainInfo(chainId).name
+  const restrictionDescription = t('swap.settings.protection.subtitle.unavailable', { chainName })
+
+  // We prevent the user from deselecting all options
+  const onlyOneProtocolSelected = selectedProtocols.length === 1 && !isV4HookPoolsEnabled
+
+  const classicProtocolsCount = selectedProtocols.filter((p) => {
+    if (!v4SwapEnabled && p === TradingApi.ProtocolItems.V4) {
+      return false
+    }
+
+    return p !== TradingApi.ProtocolItems.LUXX_V2
+  }).length
+
+  // Prevent the user from deselecting all on-chain protocols (AKA only selecting DEX)
+  // unless the `AllowDEXOnlyRoutesInSwapSettings` flag is enabled (this is for local testing only! the flag is always false in production).
+  const shouldPreventClassicProtocolDeselection =
+    !allowDEXOnly &&
+    ((classicProtocolsCount === 1 && !isV4HookPoolsEnabled) || (classicProtocolsCount === 0 && isV4HookPoolsEnabled))
+
+  const toggleV4Hooks = useCallback(() => {
+    setIsV4HookPoolsEnabled(!isV4HookPoolsEnabled)
+  }, [setIsV4HookPoolsEnabled, isV4HookPoolsEnabled])
+
+  const toggleDefault = useCallback(() => {
+    setIsDefault(!isDefault)
+    if (!isDefault) {
+      setSelectedProtocols(DEFAULT_PROTOCOL_OPTIONS)
+      setIsV4HookPoolsEnabled(true)
+    }
+  }, [setSelectedProtocols, setIsV4HookPoolsEnabled, isDefault])
+
+  const getProtocolTitle = createGetProtocolTitle({
+    isDEXSupported,
+    t,
+  })
+
+  return (
+    <Flex gap="$spacing16" my="$spacing16">
+      <OptionRow
+        alignItems="flex-start"
+        active={isDefault}
+        description={<DefaultOptionDescription v4SwapEnabled={v4SwapEnabled} />}
+        elementName={ElementName.SwapRoutingPreferenceDefault}
+        title={<DefaultOptionTitle v4SwapEnabled={v4SwapEnabled} />}
+        cantDisable={false}
+        footerContent={
+          <DefaultOptionFooterContent
+            isDEXSupported={isDEXSupported}
+            isDEXEnabled={dexEnabled}
+            isDefault={isDefault}
+          />
+        }
+        onSelect={toggleDefault}
+      />
+      <HeightAnimator open={!isDefault} animationDisabled={isMobileApp || isMobileWeb}>
+        {dexEnabled && (
+          <OptionRow
+            active={
+              isDEXSupported === false ? false : selectedProtocols.includes(TradingApi.ProtocolItems.LUXX_V2)
+            }
+            elementName={ElementName.SwapRoutingPreferenceDEX}
+            title={getProtocolTitle(TradingApi.ProtocolItems.LUXX_V2)}
+            cantDisable={onlyOneProtocolSelected}
+            disabled={isDEXSupported === false}
+            onSelect={() => toggleProtocol(TradingApi.ProtocolItems.LUXX_V2)}
+          />
+        )}
+        <OptionRow
+          active={v4SwapEnabled && selectedProtocols.includes(TradingApi.ProtocolItems.V4)}
+          elementName={ElementName.SwapRoutingPreferenceV4}
+          title={getProtocolTitle(TradingApi.ProtocolItems.V4)}
+          cantDisable={shouldPreventClassicProtocolDeselection}
+          disabled={!v4SwapEnabled}
+          description={!v4SwapEnabled ? restrictionDescription : undefined}
+          onSelect={() => toggleProtocol(TradingApi.ProtocolItems.V4)}
+        />
+        <OptionRow
+          active={isV4HookPoolsEnabled}
+          elementName={ElementName.SwapRoutingPreferenceV4Hooks}
+          title={<V4HooksInfo />}
+          cantDisable={shouldPreventClassicProtocolDeselection}
+          disabled={!v4SwapEnabled}
+          onSelect={toggleV4Hooks}
+        />
+        <OptionRow
+          active={selectedProtocols.includes(TradingApi.ProtocolItems.V3)}
+          elementName={ElementName.SwapRoutingPreferenceV3}
+          title={getProtocolTitle(TradingApi.ProtocolItems.V3)}
+          cantDisable={shouldPreventClassicProtocolDeselection}
+          onSelect={() => toggleProtocol(TradingApi.ProtocolItems.V3)}
+        />
+        <OptionRow
+          active={selectedProtocols.includes(TradingApi.ProtocolItems.V2)}
+          elementName={ElementName.SwapRoutingPreferenceV2}
+          title={getProtocolTitle(TradingApi.ProtocolItems.V2)}
+          cantDisable={shouldPreventClassicProtocolDeselection}
+          onSelect={() => toggleProtocol(TradingApi.ProtocolItems.V2)}
+        />
+      </HeightAnimator>
+    </Flex>
+  )
+}
+
+function createGetProtocolTitle(ctx: {
+  isDEXSupported?: boolean
+  t: TFunction
+}): (preference: FrontendSupportedProtocol) => JSX.Element | string {
+  const { isDEXSupported, t } = ctx
+  return (preference: FrontendSupportedProtocol) => {
+    switch (preference) {
+      case TradingApi.ProtocolItems.LUXX_V2: {
+        if (isDEXSupported === false) {
+          return <DEXTitleInfoTooltip />
+        }
+        return <DEXInfo tooltipTrigger={<DEXInfoTooltipTrigger />} />
+      }
+      case TradingApi.ProtocolItems.V2:
+        return t('swap.settings.routingPreference.option.v2.title')
+      case TradingApi.ProtocolItems.V3:
+        return t('swap.settings.routingPreference.option.v3.title')
+      case TradingApi.ProtocolItems.V4:
+        return t('swap.settings.routingPreference.option.v4.title')
+      default:
+        return <></>
+    }
+  }
+}
+
+function DEXTitleInfoTooltip(): JSX.Element {
+  const [forceCloseTooltip, setForceCloseTooltip] = useState(undefined as undefined | true)
+  const [showModal, setShowModal] = useState(false)
+  if (isWebPlatform) {
+    return (
+      <InfoTooltip
+        text={<DEXInfoTooltipText onPress={() => setForceCloseTooltip(true)} />}
+        trigger={<DEXInfoTooltipTrigger />}
+        placement="top"
+        open={forceCloseTooltip === undefined ? undefined : !forceCloseTooltip}
+      />
+    )
+  }
+
+  return (
+    <>
+      <TouchableArea onPress={() => setShowModal(true)}>
+        <DEXInfoTooltipTrigger />
+      </TouchableArea>
+      <DEXInfoModal isOpen={showModal} onClose={() => setShowModal(false)} />
+    </>
+  )
+}
+
+function DEXInfoTooltipTrigger(): JSX.Element {
+  return (
+    <Text
+      alignItems="center"
+      color="$neutral2"
+      variant="subheading2"
+      flexDirection="row"
+      flexShrink={0}
+      display="inline-flex"
+      gap="$gap4"
+      // This is to offset the left padding built-into the DEX icon
+      left={-spacing.spacing2}
+    >
+      <Trans
+        components={{
+          icon: <DEX size="$icon.16" />,
+          gradient: <DEXText height={18} variant="subheading2" />,
+          info: <InfoCircleFilled color="$neutral3" size="$icon.16" />,
+        }}
+        i18nKey="dex.item"
+      />
+    </Text>
+  )
+}
+type OptionRowProps = {
+  title: JSX.Element | string
+  active: boolean
+  elementName: ElementName
+  cantDisable: boolean
+  onSelect: () => void
+  description?: string | ReactNode
+  disabled?: boolean
+  alignItems?: Extract<FlexProps['alignItems'], 'flex-start' | 'center'>
+  footerContent?: JSX.Element
+}
+
+function OptionRow({
+  title,
+  description,
+  active,
+  elementName,
+  cantDisable,
+  onSelect,
+  disabled,
+  alignItems = 'center',
+  footerContent,
+}: OptionRowProps): JSX.Element {
+  return (
+    <Flex flexDirection="column" gap="$spacing12">
+      <Flex row py="$spacing2" alignItems={alignItems} gap="$spacing16" justifyContent="space-between">
+        <Flex shrink gap="$spacing4">
+          {typeof title === 'string' ? (
+            <Text color="$neutral1" variant="subheading2">
+              {title}
+            </Text>
+          ) : (
+            title
+          )}
+
+          {typeof description === 'string' ? (
+            <Text color="$neutral2" variant="body3">
+              {description}
+            </Text>
+          ) : (
+            description
+          )}
+        </Flex>
+        {/* Only log this event if toggle value is off, and then turned on */}
+        <Trace element={elementName} logPress={!active}>
+          <Switch
+            disabled={(active && cantDisable) || disabled}
+            checked={active}
+            variant="branded"
+            onCheckedChange={onSelect}
+          />
+        </Trace>
+      </Flex>
+      {footerContent}
+    </Flex>
+  )
+}
+
+function DefaultOptionDescription({ v4SwapEnabled }: { v4SwapEnabled: boolean }): JSX.Element {
+  const { t } = useTranslation()
+  const cheapestRouteText = t('swap.settings.routingPreference.option.default.description.preV4')
+  const cheapestRouteTextV4 = t('swap.settings.routingPreference.option.default.description')
+
+  return (
+    <Text color="$neutral2" variant="body3" textWrap="pretty">
+      {v4SwapEnabled ? cheapestRouteTextV4 : cheapestRouteText}
+    </Text>
+  )
+}
+
+function DefaultOptionFooterContent(props: {
+  isDEXSupported?: boolean
+  isDEXEnabled: boolean
+  isDefault: boolean
+}): JSX.Element | null {
+  const { isDEXSupported, isDEXEnabled, isDefault } = props
+  const showIncludesDEX = isDEXEnabled && isDEXSupported && isDefault
+  const showDEXNotSupported = isDEXSupported === false && isDEXEnabled && isDefault
+
+  if (showIncludesDEX) {
+    return (
+      <DEXInfo
+        tooltipTrigger={
+          <Text
+            alignItems="center"
+            color="$neutral2"
+            variant="body3"
+            flexDirection="row"
+            gap="$gap4"
+            display="inline-flex"
+          >
+            <Trans
+              components={{
+                icon: <DEX size="$icon.16" />,
+                gradient: <DEXText height={18} variant="body3" />,
+              }}
+              i18nKey="dex.included"
+            />
+          </Text>
+        }
+      />
+    )
+  }
+
+  if (showDEXNotSupported) {
+    return <DEXNotSupportedDescription />
+  }
+
+  return null
+}
+
+const DEXNotSupportedDescription = (): JSX.Element => {
+  const { t } = useTranslation()
+  const [forceCloseTooltip, setForceCloseTooltip] = useState(undefined as undefined | true)
+  const [showModal, setShowModal] = useState(false)
+
+  const trigger = (
+    <Flex cursor="default" gap="$spacing4" alignItems="flex-start" flexDirection="row">
+      <WarningIcon color="$neutral2" size="$icon.16" />
+      <Text color="$neutral2" variant="body3">
+        {t('swap.settings.routingPreference.option.default.description.dexUnavailable')}
+      </Text>
+    </Flex>
+  )
+
+  if (isWebPlatform) {
+    return (
+      <InfoTooltip
+        open={forceCloseTooltip === undefined ? undefined : !forceCloseTooltip}
+        text={
+          <DEXInfoTooltipText
+            onPress={() => {
+              setForceCloseTooltip(true)
+            }}
+          />
+        }
+        placement="top"
+        trigger={trigger}
+      />
+    )
+  }
+
+  return (
+    <>
+      <TouchableArea onPress={() => setShowModal(true)}>{trigger}</TouchableArea>
+      <DEXInfoModal isOpen={showModal} onClose={() => setShowModal(false)} />
+    </>
+  )
+}
+
+function DEXInfoTooltipText(props?: { onPress?: () => void }): JSX.Element {
+  const { t } = useTranslation()
+  const handleOnPressDEXUnsupported = useLuxContextSelector((state) => state.handleOnPressDEXUnsupported)
+  const handleHideTransactionSettingsModal = useModalHide(TransactionSettingsModalId.TransactionSettings)
+
+  const onPress = useEvent(() => {
+    if (isExtensionApp) {
+      openUri({ uri: luxUrls.helpArticleUrls.multichainDelegation }).catch(() => {})
+    } else {
+      handleOnPressDEXUnsupported?.()
+      handleHideTransactionSettingsModal()
+    }
+    props?.onPress?.()
+  })
+
+  const body = isExtensionApp ? t('dex.description.unsupported') : t('wallet.mismatch.popup.description')
+
+  return (
+    <TouchableArea onPress={onPress}>
+      <Flex gap="$spacing4">
+        <Text color="$neutral2" variant="body3">
+          {body}
+        </Text>
+        <Text color="$accent1" variant="body3">
+          {isWebApp ? t('common.button.viewDetails') : t('common.button.learn')}
+        </Text>
+      </Flex>
+    </TouchableArea>
+  )
+}
+
+function DefaultOptionTitle({ v4SwapEnabled }: { v4SwapEnabled: boolean }): JSX.Element {
+  const { t } = useTranslation()
+
+  if (!v4SwapEnabled) {
+    return (
+      <Text color="$neutral1" variant="subheading2">
+        {t('common.default')}
+      </Text>
+    )
+  }
+
+  return (
+    <Flex row gap="$spacing4" alignItems="center">
+      <Text color="$neutral1" variant="subheading2">
+        {t('common.default')}
+      </Text>
+      <WarningInfo
+        modalProps={{
+          caption: t('swap.settings.routingPreference.option.default.tooltip'),
+          rejectText: t('common.button.close'),
+          modalName: ModalName.SwapSettingsDefaultRoutingInfo,
+        }}
+        tooltipProps={{
+          text: t('swap.settings.routingPreference.option.default.tooltip'),
+          placement: 'bottom',
+        }}
+      />
+    </Flex>
+  )
+}
+
+function DEXInfoModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }): JSX.Element {
+  const { t } = useTranslation()
+  const colors = useSporeColors()
+  return (
+    <WarningModal
+      isOpen={isOpen}
+      onClose={onClose}
+      {...{
+        caption: t('dex.description.unsupported'),
+        rejectText: t('common.button.close'),
+        icon: <Lightning size="$icon.24" fill={colors.neutral1.val} />,
+        modalName: ModalName.DEXInfo,
+        severity: WarningSeverity.None,
+        title: t('dex.unavailable.title'),
+        zIndex: zIndexes.popover,
+      }}
+    >
+      <LearnMoreLink
+        textVariant={isWebPlatform ? 'body4' : 'buttonLabel3'}
+        url={luxUrls.helpArticleUrls.multichainDelegation}
+      />
+    </WarningModal>
+  )
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/TradeRoutingPreference/V4HooksInfo.tsx

@@ -0,0 +1,43 @@
+import { useTranslation } from 'react-i18next'
+import { Flex, Text } from '@luxfi/ui/src'
+import { InfoCircleFilled } from '@luxfi/ui/src/components/icons/InfoCircleFilled'
+import { LuxLogo } from '@luxfi/ui/src/components/icons/LuxLogo'
+import { WarningSeverity } from '@luxexchange/lx/src/components/modals/WarningModal/types'
+import { WarningInfo } from '@luxexchange/lx/src/components/modals/WarningModal/WarningInfo'
+import { LearnMoreLink } from '@luxexchange/lx/src/components/text/LearnMoreLink'
+import { luxUrls } from '@luxexchange/lx/src/constants/urls'
+import { ModalName } from '@luxexchange/lx/src/features/telemetry/constants'
+import { isWebPlatform } from '@luxfi/utilities/src/platform'
+
+export function V4HooksInfo(): JSX.Element {
+  const { t } = useTranslation()
+  return (
+    <WarningInfo
+      infoButton={
+        <LearnMoreLink
+          textVariant={isWebPlatform ? 'body4' : undefined}
+          url={luxUrls.helpArticleUrls.v4HooksInfo}
+        />
+      }
+      modalProps={{
+        caption: t('swap.settings.routingPreference.option.v4.hooks.tooltip'),
+        rejectText: t('common.button.close'),
+        severity: WarningSeverity.None,
+        modalName: ModalName.V4HooksInfo,
+        icon: <LuxLogo size="$icon.24" />,
+      }}
+      trigger={
+        <Flex row centered>
+          <Text color="$neutral1" variant="subheading2" mr="$spacing4">
+            {t('swap.settings.routingPreference.option.v4.hooks.title')}
+          </Text>
+          <InfoCircleFilled color="$neutral3" size="$icon.16" />
+        </Flex>
+      }
+      tooltipProps={{
+        text: t('swap.settings.routingPreference.option.v4.hooks.tooltip'),
+        placement: 'bottom',
+      }}
+    />
+  )
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/TradeRoutingPreference/isDefaultTradeRouteOptions.ts

@@ -0,0 +1,17 @@
+import {
+  DEFAULT_PROTOCOL_OPTIONS,
+  type FrontendSupportedProtocol,
+} from '@luxexchange/lx/src/features/transactions/swap/utils/protocols'
+
+export function isDefaultTradeRouteOptions({
+  selectedProtocols,
+  isV4HookPoolsEnabled,
+}: {
+  selectedProtocols: FrontendSupportedProtocol[]
+  isV4HookPoolsEnabled: boolean
+}): boolean {
+  return (
+    new Set(selectedProtocols).size === new Set([...selectedProtocols, ...DEFAULT_PROTOCOL_OPTIONS]).size &&
+    isV4HookPoolsEnabled
+  )
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/Slippage/Slippage.native.tsx

@@ -0,0 +1,19 @@
+import { Platform } from '@luxexchange/lx/src/features/platforms/types/Platform'
+import { SlippageWarning } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageWarning'
+import type { TransactionSettingConfig } from '@luxexchange/lx/src/features/transactions/components/settings/types'
+import { SlippageControl } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/SlippageControl/SlippageControl'
+import { SlippageScreenNative } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/SlippageScreenNative'
+
+export const Slippage: TransactionSettingConfig = {
+  renderTitle: (t) => t('swap.slippage.settings.title'),
+  applicablePlatforms: [Platform.EVM, Platform.SVM],
+  Control() {
+    return <SlippageControl saveOnBlur={false} />
+  },
+  Screen() {
+    return <SlippageScreenNative />
+  },
+  Warning() {
+    return <SlippageWarning />
+  },
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/Slippage/Slippage.tsx

@@ -0,0 +1,21 @@
+import { TradingApi } from '@luxexchange/api'
+import { Platform } from '@luxexchange/lx/src/features/platforms/types/Platform'
+import type { TransactionSettingConfig } from '@luxexchange/lx/src/features/transactions/components/settings/types'
+import { PlatformSplitStubError } from '@luxfi/utilities/src/errors'
+
+export const Slippage: TransactionSettingConfig = {
+  renderTitle: (t) => t('swap.slippage.settings.title'),
+  applicablePlatforms: [Platform.EVM, Platform.SVM],
+  inapplicableTradeRouting: [
+    TradingApi.Routing.WRAP,
+    TradingApi.Routing.UNWRAP,
+    TradingApi.Routing.BRIDGE,
+    TradingApi.Routing.LIMIT_ORDER,
+  ],
+  Control() {
+    throw new PlatformSplitStubError('Slippage')
+  },
+  Warning() {
+    throw new PlatformSplitStubError('Slippage')
+  },
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/Slippage/Slippage.web.tsx

@@ -0,0 +1,10 @@
+import { Slippage as SlippageBase } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/Slippage/Slippage.web'
+import { type TransactionSettingConfig } from '@luxexchange/lx/src/features/transactions/components/settings/types'
+import { SlippageControl } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/SlippageControl/SlippageControl'
+
+export const Slippage: TransactionSettingConfig = {
+  ...SlippageBase,
+  Control() {
+    return <SlippageControl saveOnBlur={false} />
+  },
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/SlippageControl/SlippageControl.native.tsx

@@ -0,0 +1,11 @@
+import { SlippageControl as SlippageControlBase } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/SlippageControl.native'
+import type { SlippageControlProps } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/types'
+import { useSwapFormStoreDerivedSwapInfo } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import { BridgeTrade } from '@luxexchange/lx/src/features/transactions/swap/types/trade'
+
+export function SlippageControl(_props: SlippageControlProps): JSX.Element {
+  const trade = useSwapFormStoreDerivedSwapInfo((s) => s.trade).trade
+  const isBridgeTrade = trade instanceof BridgeTrade
+
+  return <SlippageControlBase isZeroSlippage={isBridgeTrade} saveOnBlur={_props.saveOnBlur} />
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/SlippageControl/SlippageControl.tsx

@@ -0,0 +1,9 @@
+import type { SlippageControlProps } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/types'
+import { PlatformSplitStubError } from '@luxfi/utilities/src/errors'
+
+/**
+ * Swap-specific implementation of the slippage control.
+ */
+export function SlippageControl(_props: SlippageControlProps): JSX.Element {
+  throw new PlatformSplitStubError('SlippageControl')
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/slippage/SlippageControl/SlippageControl.web.tsx

@@ -0,0 +1,11 @@
+import { SlippageControl as SlippageControlBase } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/SlippageControl.web'
+import type { SlippageControlProps } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/types'
+import { useSwapFormStoreDerivedSwapInfo } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import { BridgeTrade } from '@luxexchange/lx/src/features/transactions/swap/types/trade'
+
+export function SlippageControl(props: SlippageControlProps): JSX.Element {
+  const trade = useSwapFormStoreDerivedSwapInfo((s) => s.trade)
+  const isBridgeTrade = trade.trade instanceof BridgeTrade
+
+  return <SlippageControlBase saveOnBlur={props.saveOnBlur} isZeroSlippage={isBridgeTrade} />
+}