@luxexchange/lx 1.0.0

package/src/features/transactions/components/settings/settingsConfigurations/deadline/useDeadlineSettings.ts

@@ -0,0 +1,95 @@
+import { useCallback, useState } from 'react'
+import { DEFAULT_CUSTOM_DEADLINE, MAX_CUSTOM_DEADLINE } from '@luxexchange/lx/src/constants/transactions'
+import {
+  useTransactionSettingsActions,
+  useTransactionSettingsStore,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/transactionSettingsStore/useTransactionSettingsStore'
+
+export function useDeadlineSettings(): {
+  isEditingDeadline: boolean
+  showDeadlineWarning: boolean
+  inputDeadline: string
+  currentDeadline: number
+  onChangeDeadlineInput: (value: string) => void
+  onFocusDeadlineInput: () => void
+  onBlurDeadlineInput: () => void
+} {
+  const { customDeadline } = useTransactionSettingsStore((s) => ({ customDeadline: s.customDeadline }))
+  const { setCustomDeadline } = useTransactionSettingsActions()
+
+  const [isEditingDeadline, setIsEditingDeadline] = useState<boolean>(false)
+  const [inputDeadline, setInputDeadline] = useState<string>(
+    customDeadline?.toString() || DEFAULT_CUSTOM_DEADLINE.toString(),
+  )
+
+  // Determine numerical currentDeadline value to use based on inputDeadline string value
+  // ex. if inputDeadline is '' or '.', currentDeadline is set to default deadline
+  const parsedInputDeadline = parseFloat(inputDeadline)
+  const currentDeadlineNum = isNaN(parsedInputDeadline) ? DEFAULT_CUSTOM_DEADLINE : parsedInputDeadline
+
+  // Make input text the warning color if user is setting custom deadline higher than auto deadline value or 0
+  const showDeadlineWarning = parsedInputDeadline > MAX_CUSTOM_DEADLINE
+
+  const onChangeDeadlineInput = useCallback(
+    async (value: string): Promise<void> => {
+      // Handle keyboards that use `,` as decimal separator
+      value = value.replace(',', '.')
+
+      // Allow empty input value and single decimal point
+      if (value === '' || value === '.') {
+        setInputDeadline(value)
+        return
+      }
+
+      const parsedValue = Number(value)
+
+      // Validate input
+      const overMaxDeadline = parsedValue > MAX_CUSTOM_DEADLINE
+      const isZero = parsedValue === 0
+
+      if (isZero) {
+        setInputDeadline('0')
+        setCustomDeadline(DEFAULT_CUSTOM_DEADLINE)
+        return
+      }
+
+      if (isNaN(parsedValue)) {
+        setInputDeadline('')
+        return
+      }
+
+      if (overMaxDeadline) {
+        setInputDeadline(MAX_CUSTOM_DEADLINE.toString())
+        setCustomDeadline(MAX_CUSTOM_DEADLINE)
+        return
+      }
+
+      setInputDeadline(value)
+      setCustomDeadline(parsedValue)
+    },
+    [setCustomDeadline],
+  )
+
+  const onFocusDeadlineInput = useCallback((): void => {
+    setIsEditingDeadline(true)
+  }, [])
+
+  const onBlurDeadlineInput = useCallback(() => {
+    setIsEditingDeadline(false)
+
+    if (isNaN(parsedInputDeadline)) {
+      setCustomDeadline(undefined)
+      return
+    }
+  }, [parsedInputDeadline, setCustomDeadline])
+
+  return {
+    isEditingDeadline,
+    showDeadlineWarning,
+    inputDeadline,
+    currentDeadline: currentDeadlineNum,
+    onChangeDeadlineInput,
+    onFocusDeadlineInput,
+    onBlurDeadlineInput,
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Platform } from '@luxexchange/lx/src/features/platforms/types/Platform'
+import { SlippageControl } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/SlippageControl'
+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'
+
+export const Slippage: TransactionSettingConfig = {
+  renderTitle: (t) => t('swap.slippage.settings.title'),
+  applicablePlatforms: [Platform.EVM, Platform.SVM],
+  Control() {
+    return <SlippageControl />
+  },
+  Warning() {
+    return <SlippageWarning />
+  },
+}

package/src/features/transactions/components/settings/settingsConfigurations/slippage/Slippage/Slippage.tsx

@@ -0,0 +1,18 @@
+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'
+
+/**
+ * Base implementation of the slippage setting.
+ * For the swap-specific implementation, see SwapFormSettings.
+ */
+export const Slippage: TransactionSettingConfig = {
+  renderTitle: (t) => t('swap.slippage.settings.title'),
+  applicablePlatforms: [Platform.EVM, Platform.SVM],
+  Control() {
+    throw new PlatformSplitStubError('Slippage')
+  },
+  Warning() {
+    throw new PlatformSplitStubError('Slippage')
+  },
+}

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

@@ -0,0 +1,27 @@
+import { TradingApi } from '@luxexchange/api'
+import { Platform } from '@luxexchange/lx/src/features/platforms/types/Platform'
+import { SlippageControl } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/SlippageControl.web'
+import { SlippageWarning } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageWarning'
+import {
+  type TransactionSettingConfig,
+  TransactionSettingId,
+} from '@luxexchange/lx/src/features/transactions/components/settings/types'
+
+export const Slippage: TransactionSettingConfig = {
+  applicablePlatforms: [Platform.EVM, Platform.SVM],
+  inapplicableTradeRouting: [
+    TradingApi.Routing.WRAP,
+    TradingApi.Routing.UNWRAP,
+    TradingApi.Routing.BRIDGE,
+    TradingApi.Routing.LIMIT_ORDER,
+  ],
+  renderTitle: (t) => t('swap.slippage.settings.title'),
+  renderTooltip: (t) => t('swap.settings.slippage.description'),
+  settingId: TransactionSettingId.SLIPPAGE,
+  Control() {
+    return <SlippageControl saveOnBlur={false} />
+  },
+  Warning() {
+    return <SlippageWarning />
+  },
+}

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

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next'
+import { Flex, Text } from '@luxfi/ui/src'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import type { SlippageControlProps } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/types'
+import { useSlippageSettings } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/useSlippageSettings'
+
+export function SlippageControl(props: SlippageControlProps): JSX.Element {
+  const { t } = useTranslation()
+  const { formatPercent } = useLocalizationContext()
+  const isZeroSlippage = props.isZeroSlippage
+  const { currentSlippageTolerance, autoSlippageEnabled } = useSlippageSettings({
+    saveOnBlur: props.saveOnBlur,
+    isZeroSlippage: props.isZeroSlippage,
+  })
+
+  return (
+    <Flex row gap="$spacing8">
+      {autoSlippageEnabled && !isZeroSlippage ? (
+        <Flex centered backgroundColor="$accent2" borderRadius="$roundedFull" px="$spacing8">
+          <Text color="$accent1" variant="buttonLabel3">
+            {t('swap.settings.slippage.control.auto')}
+          </Text>
+        </Flex>
+      ) : null}
+      <Text color="$neutral2" variant="subheading2">
+        {formatPercent(currentSlippageTolerance)}
+      </Text>
+    </Flex>
+  )
+}

package/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/SlippageControl.tsx

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

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

@@ -0,0 +1,165 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { LayoutChangeEvent } from 'react-native'
+import { ColorTokens, Flex, Input, type InputRef, Text } from '@luxfi/ui/src'
+import type { SlippageControlProps } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/types'
+import { useSlippageSettings } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/useSlippageSettings'
+import { getSlippageWarningColor } from '@luxexchange/lx/src/features/transactions/swap/utils/styleHelpers'
+
+const INPUT_MIN_WIDTH = 44
+
+export function SlippageControl(props: SlippageControlProps): JSX.Element {
+  const { t } = useTranslation()
+  const inputRef = useRef<InputRef>(null)
+  const [inputWidth, setInputWidth] = useState(0)
+  const [isLayoutReady, setIsLayoutReady] = useState(false)
+
+  const {
+    isEditingSlippage,
+    autoSlippageEnabled,
+    inputSlippageTolerance,
+    autoSlippageTolerance,
+    inputAnimatedStyle,
+    onPressAutoSlippage,
+    onChangeSlippageInput,
+    onFocusSlippageInput,
+    onBlurSlippageInput,
+    showSlippageWarning,
+    showSlippageCritical,
+  } = useSlippageSettings({
+    saveOnBlur: props.saveOnBlur,
+    isZeroSlippage: props.isZeroSlippage,
+  })
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: +isLayoutReady
+  useEffect(() => {
+    inputRef.current?.blur()
+  }, [isLayoutReady])
+
+  function onInputTextLayout(event: LayoutChangeEvent): void {
+    setInputWidth(event.nativeEvent.layout.width)
+    setIsLayoutReady(true)
+  }
+
+  const backgroundColor = isEditingSlippage ? '$surface2' : '$surface1'
+  const inputValue = autoSlippageEnabled ? autoSlippageTolerance.toFixed(2).toString() : inputSlippageTolerance
+  const parsedInputValue = parseFloat(inputValue)
+
+  const inputValueTextColor = useMemo(
+    () =>
+      getSlippageWarningColor({
+        customSlippageValue: parsedInputValue,
+        autoSlippageTolerance,
+        fallbackColorValue: autoSlippageEnabled ? '$neutral2' : '$neutral1',
+      }),
+    [parsedInputValue, autoSlippageEnabled, autoSlippageTolerance],
+  )
+
+  const borderColor = ((): ColorTokens => {
+    if (isEditingSlippage) {
+      if (showSlippageCritical) {
+        return '$statusCritical'
+      }
+      if (showSlippageWarning) {
+        return '$statusWarning'
+      }
+      return '$accent1'
+    }
+    if (showSlippageCritical) {
+      return '$statusCritical'
+    }
+    if (showSlippageWarning) {
+      return '$statusWarning'
+    }
+    return '$surface3'
+  })()
+
+  const hoverBorderColor = ((): ColorTokens => {
+    if (showSlippageCritical) {
+      return '$statusCriticalHovered'
+    }
+    if (showSlippageWarning) {
+      return '$statusWarningHovered'
+    }
+    return '$surface3Hovered'
+  })()
+
+  return (
+    <Flex
+      row
+      group
+      alignItems="center"
+      justifyContent="space-between"
+      style={{
+        containerType: 'normal',
+      }}
+    >
+      <Flex
+        row
+        backgroundColor={backgroundColor}
+        borderColor={borderColor}
+        borderRadius="$rounded16"
+        borderWidth="$spacing1"
+        gap="$spacing8"
+        p="$spacing4"
+        pr="$spacing8"
+        style={inputAnimatedStyle}
+        $group-hover={{
+          borderColor: hoverBorderColor,
+          backgroundColor: '$surface1Hovered',
+        }}
+      >
+        <Flex
+          centered
+          backgroundColor={autoSlippageEnabled ? '$accent2' : '$surface3'}
+          borderRadius="$roundedFull"
+          px="$spacing8"
+          onPress={onPressAutoSlippage}
+        >
+          <Text color={autoSlippageEnabled ? '$accent1' : '$neutral2'} variant="buttonLabel3">
+            {t('swap.settings.slippage.control.auto')}
+          </Text>
+        </Flex>
+        <Flex row alignItems="center" paddingEnd="$spacing12" paddingStart="$spacing4">
+          <Flex style={{ position: 'relative' }}>
+            <Input
+              ref={inputRef}
+              keyboardType="decimal-pad"
+              backgroundColor={backgroundColor}
+              $group-hover={{ backgroundColor: '$surface1Hovered' }}
+              color={inputValueTextColor}
+              editable={true}
+              fontFamily="$subHeading"
+              fontWeight="normal"
+              fontSize="$small"
+              height="100%"
+              outlineColor="$transparent"
+              p="$none"
+              paddingEnd="$spacing4"
+              textAlign="right"
+              value={inputValue}
+              width={inputWidth}
+              onBlur={onBlurSlippageInput}
+              onChangeText={onChangeSlippageInput}
+              onPressIn={onFocusSlippageInput}
+            />
+            <Text
+              minWidth={INPUT_MIN_WIDTH}
+              opacity={0}
+              px="$spacing4"
+              style={{ position: 'absolute' }}
+              variant="subheading2"
+              zIndex={-1}
+              onLayout={onInputTextLayout}
+            >
+              {inputValue}
+            </Text>
+          </Flex>
+          <Text color={inputValueTextColor} variant="subheading2">
+            %
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}

package/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageControl/types.ts

@@ -0,0 +1,3 @@
+import type { SlippageSettingsProps } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/useSlippageSettings'
+
+export type SlippageControlProps = SlippageSettingsProps

package/src/features/transactions/components/settings/settingsConfigurations/slippage/SlippageWarning.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import { WarningMessage } from '@luxexchange/lx/src/components/WarningMessage/WarningMessage'
+import { SLIPPAGE_CRITICAL_TOLERANCE } from '@luxexchange/lx/src/constants/transactions'
+import { useSlippageSettings } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/useSlippageSettings'
+import {
+  useTransactionSettingsAutoSlippageToleranceStore,
+  useTransactionSettingsStore,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/transactionSettingsStore/useTransactionSettingsStore'
+import { isMobileWeb, isWebPlatform } from '@luxfi/utilities/src/platform'
+
+export function SlippageWarning(): JSX.Element | null {
+  const { t } = useTranslation()
+  const customSlippageTolerance = useTransactionSettingsStore((s) => s.customSlippageTolerance)
+  const storeAutoSlippageTolerance = useTransactionSettingsAutoSlippageToleranceStore((s) => s.autoSlippageTolerance)
+  const { autoSlippageTolerance } = useSlippageSettings()
+  const actualAutoSlippageTolerance = storeAutoSlippageTolerance ?? autoSlippageTolerance
+
+  const isCriticalSlippage = Boolean(customSlippageTolerance && customSlippageTolerance >= SLIPPAGE_CRITICAL_TOLERANCE)
+
+  if (!customSlippageTolerance || customSlippageTolerance <= actualAutoSlippageTolerance) {
+    return null
+  }
+
+  return (
+    <WarningMessage
+      warningMessage={isCriticalSlippage ? t('swap.settings.slippage.warning') : t('swap.settings.slippage.alert')}
+      tooltipText={isWebPlatform && !isMobileWeb ? t('swap.settings.slippage.warning.hover') : undefined}
+      color={isCriticalSlippage ? '$statusCritical' : '$statusWarning'}
+    />
+  )
+}

package/src/features/transactions/components/settings/settingsConfigurations/slippage/useSlippageSettings.ts

@@ -0,0 +1,220 @@
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { useShakeAnimation } from '@luxfi/ui/src/animations'
+import { PlusMinusButtonType } from '@luxfi/ui/src/components/buttons/PlusMinusButton'
+import {
+  MAX_AUTO_SLIPPAGE_TOLERANCE,
+  MAX_CUSTOM_SLIPPAGE_TOLERANCE,
+  SLIPPAGE_CRITICAL_TOLERANCE,
+} from '@luxexchange/lx/src/constants/transactions'
+import {
+  useTransactionSettingsActions,
+  useTransactionSettingsAutoSlippageToleranceStore,
+  useTransactionSettingsStore,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/transactionSettingsStore/useTransactionSettingsStore'
+
+const SLIPPAGE_INCREMENT = 0.1
+
+export interface SlippageSettingsProps {
+  saveOnBlur?: boolean
+  isZeroSlippage?: boolean
+}
+
+export function useSlippageSettings(params?: SlippageSettingsProps): {
+  isEditingSlippage: boolean
+  autoSlippageEnabled: boolean
+  showSlippageWarning: boolean
+  showSlippageCritical: boolean
+  inputSlippageTolerance: string
+  inputWarning: string | undefined
+  autoSlippageTolerance: number
+  currentSlippageTolerance: number
+  inputAnimatedStyle: StyleProp<ViewStyle>
+  onPressAutoSlippage: () => void
+  onChangeSlippageInput: (value: string) => void
+  onFocusSlippageInput: () => void
+  onBlurSlippageInput: () => void
+  onPressPlusMinusButton: (type: PlusMinusButtonType) => void
+} {
+  const { saveOnBlur, isZeroSlippage } = params ?? {}
+  const { t } = useTranslation()
+
+  const { customSlippageTolerance } = useTransactionSettingsStore((s) => ({
+    customSlippageTolerance: s.customSlippageTolerance,
+  }))
+  const { setCustomSlippageTolerance } = useTransactionSettingsActions()
+  const derivedAutoSlippageTolerance = useTransactionSettingsAutoSlippageToleranceStore((s) => s.autoSlippageTolerance)
+  const actualAutoSlippageTolerance = isZeroSlippage ? 0 : derivedAutoSlippageTolerance
+
+  const [isEditingSlippage, setIsEditingSlippage] = useState<boolean>(false)
+  const [autoSlippageEnabled, setAutoSlippageEnabled] = useState<boolean>(!customSlippageTolerance)
+  const [inputSlippageTolerance, setInputSlippageTolerance] = useState<string>(
+    customSlippageTolerance?.toFixed(2).toString() ?? '',
+  )
+  const [inputWarning, setInputWarning] = useState<string | undefined>()
+
+  // Get auto slippage tolerance or fallback to max auto slippage tolerance
+  const autoSlippageTolerance = actualAutoSlippageTolerance ?? MAX_AUTO_SLIPPAGE_TOLERANCE
+
+  // Determine numerical currentSlippage value to use based on inputSlippageTolerance string value
+  // ex. if inputSlippageTolerance is '' or '.', currentSlippage is set to autoSlippageTolerance
+  const parsedInputSlippageTolerance = parseFloat(inputSlippageTolerance)
+  const currentSlippageToleranceNum = params?.isZeroSlippage
+    ? 0
+    : isNaN(parsedInputSlippageTolerance)
+      ? autoSlippageTolerance
+      : parsedInputSlippageTolerance
+
+  // Make input text the warning color if user is setting custom slippage higher than auto slippage value or 0
+  const showSlippageWarning = parsedInputSlippageTolerance > autoSlippageTolerance
+
+  const { shakeStyle: inputAnimatedStyle, triggerShakeAnimation: triggerInputShake } = useShakeAnimation()
+
+  const onPressAutoSlippage = (): void => {
+    setAutoSlippageEnabled(true)
+    setInputWarning(undefined)
+    setInputSlippageTolerance('')
+    setCustomSlippageTolerance(undefined)
+  }
+
+  const updateInputWarning = useCallback(
+    (parsedValue: number) => {
+      const overMaxTolerance = parsedValue > MAX_CUSTOM_SLIPPAGE_TOLERANCE
+      const overWarningTolerance = parsedValue > autoSlippageTolerance
+      const overCriticalTolerance = parsedValue >= SLIPPAGE_CRITICAL_TOLERANCE
+      const isZero = parsedValue === 0
+
+      if (isZero) {
+        return setInputWarning(t('swap.settings.slippage.warning.min'))
+      } else if (overMaxTolerance) {
+        return setInputWarning(
+          t('swap.settings.slippage.warning.max', {
+            maxSlippageTolerance: MAX_CUSTOM_SLIPPAGE_TOLERANCE,
+          }),
+        )
+      } else if (overCriticalTolerance) {
+        return setInputWarning(t('swap.settings.slippage.warning'))
+      } else if (overWarningTolerance) {
+        return setInputWarning(t('swap.settings.slippage.alert'))
+      }
+
+      return setInputWarning(undefined)
+    },
+    [autoSlippageTolerance, t],
+  )
+
+  const onChangeSlippageInput = useCallback(
+    async (value: string): Promise<void> => {
+      setAutoSlippageEnabled(false)
+      setInputWarning(undefined)
+
+      // Handle keyboards that use `,` as decimal separator
+      value = value.replace(',', '.')
+
+      // Allow empty input value and single decimal point
+      if (value === '' || value === '.') {
+        setInputSlippageTolerance(value)
+        return
+      }
+
+      const parsedValue = parseFloat(value)
+
+      // Validate input and prevent invalid updates with animation
+      const isInvalidNumber = isNaN(parsedValue)
+      const overMaxTolerance = parsedValue > MAX_CUSTOM_SLIPPAGE_TOLERANCE
+      const decimalParts = value.split('.')
+      const moreThanOneDecimalSymbol = decimalParts.length > 2
+      const moreThanTwoDecimals = decimalParts[1] && decimalParts[1].length > 2
+      const isZero = parsedValue === 0
+
+      updateInputWarning(parsedValue)
+
+      /* Prevent invalid updates to input value with animation and haptic
+       * isZero is intentionally left out here because the user should be able to type "0"
+       * without the input shaking (ex. typing 0.x shouldn't shake after typing char)
+       */
+      if (isInvalidNumber || overMaxTolerance || moreThanOneDecimalSymbol || moreThanTwoDecimals) {
+        triggerInputShake()
+        return
+      }
+
+      setInputSlippageTolerance(value)
+
+      if (!saveOnBlur && !isZero) {
+        setCustomSlippageTolerance(parsedValue)
+      }
+    },
+    [updateInputWarning, saveOnBlur, setCustomSlippageTolerance, triggerInputShake],
+  )
+
+  const onFocusSlippageInput = useCallback((): void => {
+    setIsEditingSlippage(true)
+
+    // Clear the input if auto slippage is enabled
+    if (autoSlippageEnabled) {
+      setAutoSlippageEnabled(false)
+      setInputSlippageTolerance('')
+    }
+  }, [autoSlippageEnabled])
+
+  const onBlurSlippageInput = useCallback(() => {
+    setIsEditingSlippage(false)
+
+    // Set autoSlippageEnabled to true if input is invalid (ex. '' or '.')
+    if (isNaN(parsedInputSlippageTolerance)) {
+      setAutoSlippageEnabled(true)
+      setCustomSlippageTolerance(undefined)
+      return
+    }
+
+    setInputSlippageTolerance(parsedInputSlippageTolerance.toFixed(2))
+    if (saveOnBlur) {
+      setCustomSlippageTolerance(parsedInputSlippageTolerance)
+    }
+  }, [parsedInputSlippageTolerance, setCustomSlippageTolerance, saveOnBlur])
+
+  const onPressPlusMinusButton = useCallback(
+    (type: PlusMinusButtonType): void => {
+      if (autoSlippageEnabled) {
+        setAutoSlippageEnabled(false)
+      }
+
+      const newSlippage =
+        currentSlippageToleranceNum + (type === PlusMinusButtonType.Plus ? SLIPPAGE_INCREMENT : -SLIPPAGE_INCREMENT)
+      const constrainedNewSlippage =
+        type === PlusMinusButtonType.Plus
+          ? Math.min(newSlippage, MAX_CUSTOM_SLIPPAGE_TOLERANCE)
+          : Math.max(newSlippage, 0)
+
+      const isZero = constrainedNewSlippage === 0
+
+      updateInputWarning(constrainedNewSlippage)
+
+      setInputSlippageTolerance(constrainedNewSlippage.toFixed(2).toString())
+      if (!isZero) {
+        setCustomSlippageTolerance(constrainedNewSlippage)
+      }
+    },
+    [autoSlippageEnabled, currentSlippageToleranceNum, updateInputWarning, setCustomSlippageTolerance],
+  )
+
+  return {
+    isEditingSlippage,
+    autoSlippageEnabled,
+    showSlippageWarning,
+    showSlippageCritical: parsedInputSlippageTolerance >= SLIPPAGE_CRITICAL_TOLERANCE,
+    inputSlippageTolerance: autoSlippageEnabled
+      ? currentSlippageToleranceNum.toFixed(2).toString()
+      : inputSlippageTolerance,
+    inputWarning,
+    autoSlippageTolerance,
+    currentSlippageTolerance: currentSlippageToleranceNum,
+    inputAnimatedStyle,
+    onPressAutoSlippage,
+    onChangeSlippageInput,
+    onFocusSlippageInput,
+    onBlurSlippageInput,
+    onPressPlusMinusButton,
+  }
+}

package/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/TransactionSettingsModalStoreContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+import type {
+  TransactionSettingsModalId,
+  TransactionSettingsModalState,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/createTransactionSettingsModalStore'
+import type { StoreApi } from 'zustand/vanilla'
+
+export const TransactionSettingsModalStoreContext = createContext<StoreApi<
+  TransactionSettingsModalState<TransactionSettingsModalId>
+> | null>(null)

package/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/TransactionSettingsModalStoreContextProvider.tsx

@@ -0,0 +1,28 @@
+import { type ReactNode, useState } from 'react'
+import type {
+  ModalId,
+  TransactionSettingsModalId,
+  TransactionSettingsModalState,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/createTransactionSettingsModalStore'
+import { createTransactionSettingsModalStore } from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/createTransactionSettingsModalStore'
+import { TransactionSettingsModalStoreContext } from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/TransactionSettingsModalStoreContext'
+import type { StoreApi } from 'zustand/vanilla'
+
+// Create the provider component
+export function TransactionSettingsModalStoreContextProvider<T extends TransactionSettingsModalId>({
+  children,
+  modalIds,
+}: {
+  children: ReactNode
+  modalIds: ModalId<T>[]
+}): JSX.Element {
+  const [store] = useState(() => createTransactionSettingsModalStore(modalIds))
+
+  return (
+    <TransactionSettingsModalStoreContext.Provider
+      value={store as StoreApi<TransactionSettingsModalState<TransactionSettingsModalId>>}
+    >
+      {children}
+    </TransactionSettingsModalStoreContext.Provider>
+  )
+}