@luxexchange/lx 1.0.0

package/src/features/transactions/components/TransactionModal/TransactionModalContext.tsx

@@ -0,0 +1,108 @@
+import { Currency } from '@luxfi/amm-core'
+import { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { AuthTrigger } from '@luxexchange/lx/src/features/auth/types'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+
+export enum TransactionScreen {
+  Form = 'Form',
+  Review = 'Review',
+  UnichainInstantBalance = 'UnichainInstantBalance',
+}
+
+export type PasskeyAuthStatus = {
+  isSignedInWithPasskey: boolean
+  isSessionAuthenticated: boolean
+  needsPasskeySignin: boolean
+}
+
+export type SwapRedirectFn = ({
+  inputCurrency,
+  outputCurrency,
+  typedValue,
+  independentField,
+  chainId,
+}: {
+  inputCurrency?: Currency
+  outputCurrency?: Currency
+  typedValue?: string
+  independentField?: CurrencyField
+  chainId: UniverseChainId
+}) => void
+
+export type BiometricsIconProps = {
+  color?: string
+}
+
+export type TransactionModalContextState = {
+  bottomSheetViewStyles: StyleProp<ViewStyle>
+  openWalletRestoreModal?: () => void
+  walletNeedsRestore?: boolean
+  onClose: () => void
+  onCurrencyChange?: (selected: { inputCurrency?: Currency; outputCurrency?: Currency }, isBridgePair?: boolean) => void
+  renderBiometricsIcon?: (({ color }: BiometricsIconProps) => JSX.Element) | null
+  authTrigger?: AuthTrigger
+  screen: TransactionScreen
+  setScreen: (newScreen: TransactionScreen) => void
+  swapRedirectCallback?: SwapRedirectFn
+  passkeyAuthStatus?: PasskeyAuthStatus
+}
+
+export const TransactionModalContext = createContext<TransactionModalContextState | undefined>(undefined)
+
+export function TransactionModalContextProvider({
+  children,
+  renderBiometricsIcon,
+  authTrigger,
+  bottomSheetViewStyles,
+  onClose,
+  onCurrencyChange,
+  openWalletRestoreModal,
+  walletNeedsRestore,
+  screen,
+  setScreen,
+  swapRedirectCallback,
+  passkeyAuthStatus,
+}: PropsWithChildren<TransactionModalContextState>): JSX.Element {
+  const state = useMemo<TransactionModalContextState>(
+    (): TransactionModalContextState => ({
+      renderBiometricsIcon,
+      authTrigger,
+      bottomSheetViewStyles,
+      onClose,
+      onCurrencyChange,
+      openWalletRestoreModal,
+      screen,
+      setScreen,
+      swapRedirectCallback,
+      walletNeedsRestore,
+      passkeyAuthStatus,
+    }),
+    [
+      renderBiometricsIcon,
+      authTrigger,
+      bottomSheetViewStyles,
+      onClose,
+      onCurrencyChange,
+      openWalletRestoreModal,
+      screen,
+      setScreen,
+      swapRedirectCallback,
+      walletNeedsRestore,
+      passkeyAuthStatus,
+    ],
+  )
+
+  return <TransactionModalContext.Provider value={state}>{children}</TransactionModalContext.Provider>
+}
+
+export const useTransactionModalContext = (): TransactionModalContextState => {
+  const context = useContext(TransactionModalContext)
+
+  if (context === undefined) {
+    throw new Error('`useTransactionModalContext` must be used inside of `TransactionModalContextProvider`')
+  }
+
+  return context
+}

package/src/features/transactions/components/TransactionModal/TransactionModalProps.tsx

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { ModalNameType } from '@luxexchange/lx/src/features/telemetry/constants'
+import { TransactionModalContextState } from '@luxexchange/lx/src/features/transactions/components/TransactionModal/TransactionModalContext'
+
+export type TransactionModalProps = PropsWithChildren<{
+  modalName: ModalNameType
+  onClose: () => void
+  onCurrencyChange?: TransactionModalContextState['onCurrencyChange']
+  openWalletRestoreModal?: TransactionModalContextState['openWalletRestoreModal']
+  swapRedirectCallback?: TransactionModalContextState['swapRedirectCallback']
+  renderBiometricsIcon?: TransactionModalContextState['renderBiometricsIcon']
+  walletNeedsRestore?: TransactionModalContextState['walletNeedsRestore']
+  authTrigger?: TransactionModalContextState['authTrigger']
+  passkeyAuthStatus?: TransactionModalContextState['passkeyAuthStatus']
+}>
+
+export type TransactionModalInnerContainerProps = PropsWithChildren<{
+  bottomSheetViewStyles: StyleProp<ViewStyle>
+  fullscreen: boolean
+}>
+
+export type TransactionModalFooterContainerProps = PropsWithChildren

package/src/features/transactions/components/TransactionModal/TransactionModalUpdateLogger.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react'
+import type { ModalNameType } from '@luxexchange/lx/src/features/telemetry/constants'
+import { ModalName } from '@luxexchange/lx/src/features/telemetry/constants'
+import { useTransactionModalContext } from '@luxexchange/lx/src/features/transactions/components/TransactionModal/TransactionModalContext'
+import { logContextUpdate } from '@luxfi/utilities/src/logger/contextEnhancer'
+
+export function TransactionModalUpdateLogger({ modalName }: { modalName: ModalNameType }): null {
+  const { screen } = useTransactionModalContext()
+
+  useEffect(() => {
+    if (modalName === ModalName.Swap) {
+      logContextUpdate('TransactionModal', { screen, modalName })
+    }
+  }, [modalName, screen])
+
+  return null
+}

package/src/features/transactions/components/cancel/CancelConfirmationView.tsx

@@ -0,0 +1,178 @@
+import { providers } from 'ethers/lib/ethers'
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button, Flex, FlexLoader, Separator, Skeleton, Text } from '@luxfi/ui/src'
+import { SlashCircle } from '@luxfi/ui/src/components/icons/SlashCircle'
+import { fonts } from '@luxfi/ui/src/theme'
+import { AuthTrigger } from '@luxexchange/lx/src/features/auth/types'
+import { useUSDValueOfGasFee } from '@luxexchange/lx/src/features/gas/hooks'
+import { useCancellationGasFeeInfo } from '@luxexchange/lx/src/features/gas/hooks/useCancellationGasFeeInfo'
+import { PlanCancellationGasFeeDetails } from '@luxexchange/lx/src/features/gas/hooks/usePlanCancellationGasFeeInfo'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { ElementName, ModalName } from '@luxexchange/lx/src/features/telemetry/constants'
+import Trace from '@luxexchange/lx/src/features/telemetry/Trace'
+import { CancelableStepInfo } from '@luxexchange/lx/src/features/transactions/hooks/useIsCancelable'
+import { isDEX } from '@luxexchange/lx/src/features/transactions/swap/utils/routing'
+import {
+  PlanTransactionInfo,
+  TransactionDetails,
+  TransactionStatus,
+  TransactionType,
+} from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { NumberType } from '@luxfi/utilities/src/format/types'
+import { isWebPlatform } from '@luxfi/utilities/src/platform'
+
+export interface PlanCancellationInfo {
+  isPlanCancellation: true
+  planId: string
+  cancelableStepInfo: CancelableStepInfo
+}
+
+export function CancelConfirmationView({
+  authTrigger,
+  onBack,
+  onCancel,
+  transactionDetails,
+}: {
+  authTrigger?: AuthTrigger
+  onBack: () => void
+  onCancel: (txRequest: providers.TransactionRequest, planCancellationInfo?: PlanCancellationInfo) => void
+  transactionDetails: TransactionDetails
+}): JSX.Element {
+  const { t } = useTranslation()
+  const { convertFiatAmountFormatted } = useLocalizationContext()
+
+  const isPlan = transactionDetails.typeInfo.type === TransactionType.Plan
+  const isDEXOrder = isDEX(transactionDetails)
+
+  const cancellationGasFeeInfo = useCancellationGasFeeInfo(transactionDetails)
+  const { value: gasFeeUSD } = useUSDValueOfGasFee(
+    transactionDetails.chainId,
+    cancellationGasFeeInfo?.gasFeeDisplayValue,
+  )
+  const gasFee = convertFiatAmountFormatted(gasFeeUSD, NumberType.FiatGasPrice)
+
+  // Get cancelable step info for plans (if available in cancellation info)
+  const cancelableStepInfo = useMemo(() => {
+    if (!isPlan || !cancellationGasFeeInfo) {
+      return undefined
+    }
+    return (cancellationGasFeeInfo as PlanCancellationGasFeeDetails).cancelableStepInfo
+  }, [isPlan, cancellationGasFeeInfo])
+
+  const onCancelConfirm = useCallback(() => {
+    if (!cancellationGasFeeInfo?.cancelRequest) {
+      return
+    }
+
+    if (isPlan && cancelableStepInfo) {
+      // For plans, pass step info along with cancel request
+      const planTypeInfo = transactionDetails.typeInfo as PlanTransactionInfo
+      onCancel(cancellationGasFeeInfo.cancelRequest, {
+        isPlanCancellation: true,
+        planId: planTypeInfo.planId,
+        cancelableStepInfo,
+      })
+    } else {
+      onCancel(cancellationGasFeeInfo.cancelRequest)
+    }
+  }, [cancellationGasFeeInfo, onCancel, isPlan, cancelableStepInfo, transactionDetails])
+
+  const onPressCancel = useCallback(async () => {
+    if (authTrigger) {
+      await authTrigger({ successCallback: onCancelConfirm, failureCallback: () => {} })
+    } else {
+      onCancelConfirm()
+    }
+  }, [authTrigger, onCancelConfirm])
+
+  const title = useMemo(() => {
+    if (isDEXOrder) {
+      return t('common.cancelOrder')
+    }
+    return t('transaction.action.cancel.title')
+  }, [isDEXOrder, t])
+
+  // Determine warning message based on cancellation type
+  const warningMessage = useMemo(() => {
+    if (!isPlan) {
+      if (isDEXOrder) {
+        return t('swap.cancel.cannotExecute', { count: 1 })
+      }
+      return t('transaction.action.cancel.description')
+    }
+
+    if (cancelableStepInfo?.cancellationType === 'dex') {
+      return t('transaction.action.cancel.plan.dex.warning')
+    }
+
+    return t('transaction.action.cancel.plan.warning')
+  }, [isPlan, isDEXOrder, cancelableStepInfo, t])
+
+  const disableConfirmationButton =
+    !cancellationGasFeeInfo?.cancelRequest || transactionDetails.status !== TransactionStatus.Pending
+
+  return (
+    <Flex
+      centered
+      grow
+      backgroundColor="$surface1"
+      borderRadius="$rounded20"
+      gap="$spacing16"
+      mt={isWebPlatform ? '$spacing16' : '$none'}
+      px={isWebPlatform ? '$none' : '$spacing24'}
+      py={isWebPlatform ? '$none' : '$spacing12'}
+    >
+      <Flex centered backgroundColor="$surface3" borderRadius="$rounded12" p="$spacing12">
+        <SlashCircle color="$neutral2" size="$icon.20" />
+      </Flex>
+      <Flex centered gap="$spacing8">
+        <Text variant="buttonLabel2">{title}</Text>
+        <Text color="$neutral2" textAlign="center" variant="body3">
+          {warningMessage}
+        </Text>
+      </Flex>
+      <Flex width="100%">
+        <Separator />
+      </Flex>
+      <Flex row justifyContent="space-between" pb="$spacing8" px="$spacing12" width="100%">
+        <Text color="$neutral2" variant="body3">
+          {t('transaction.networkCost.label')}
+        </Text>
+        {!gasFeeUSD ? (
+          <Skeleton>
+            <FlexLoader borderRadius="$rounded4" height={fonts.body3.lineHeight} opacity={0.4} width="$spacing48" />
+          </Skeleton>
+        ) : (
+          <Text variant="body3">{gasFee}</Text>
+        )}
+      </Flex>
+      <Flex row gap="$spacing8" width="100%">
+        <Button emphasis="secondary" onPress={onBack}>
+          {t('common.button.back')}
+        </Button>
+        <Trace
+          logPress
+          element={ElementName.Confirm}
+          modal={ModalName.TransactionCancellation}
+          properties={{
+            transaction_hash: transactionDetails.hash,
+            chain_id: transactionDetails.chainId,
+            status: transactionDetails.status,
+          }}
+        >
+          <Button
+            isDisabled={disableConfirmationButton}
+            testID={TestID.Cancel}
+            variant="critical"
+            emphasis="secondary"
+            onPress={onPressCancel}
+          >
+            {t('common.button.confirm')}
+          </Button>
+        </Trace>
+      </Flex>
+    </Flex>
+  )
+}

package/src/features/transactions/components/settings/TransactionSettings.tsx

@@ -0,0 +1,138 @@
+import type { ColorTokens, FlexProps, GeneratedIcon } from '@luxfi/ui/src'
+import { Flex, Popover, TouchableArea } from '@luxfi/ui/src'
+import { Settings } from '@luxfi/ui/src/components/icons/Settings'
+import type { IconSizeTokens } from '@luxfi/ui/src/theme'
+import { AccountType } from '@luxexchange/lx/src/features/accounts/types'
+import { TransactionSettingsModalId } from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/createTransactionSettingsModalStore'
+import {
+  useModalHide,
+  useModalShow,
+  useModalVisibility,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/useTransactionSettingsModalStore'
+import { TransactionSettingsButton } from '@luxexchange/lx/src/features/transactions/components/settings/TransactionSettingsButton'
+import { TransactionSettingsModal } from '@luxexchange/lx/src/features/transactions/components/settings/TransactionSettingsModal/TransactionSettingsModal'
+import type { TransactionSettingConfig } from '@luxexchange/lx/src/features/transactions/components/settings/types'
+import { ViewOnlyButton } from '@luxexchange/lx/src/features/transactions/components/settings/ViewOnlyButton'
+import { ViewOnlyModal } from '@luxexchange/lx/src/features/transactions/modals/ViewOnlyModal'
+import { useWallet } from '@luxexchange/lx/src/features/wallet/hooks/useWallet'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { dismissNativeKeyboard } from '@luxfi/utilities/src/device/keyboard/dismissNativeKeyboard'
+import { isMobileApp, isWebApp } from '@luxfi/utilities/src/platform'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+export interface TransactionSettingsProps {
+  settings: TransactionSettingConfig[]
+  adjustTopAlignment?: boolean
+  adjustRightAlignment?: boolean
+  position?: FlexProps['position']
+  iconColor?: ColorTokens
+  backgroundColor?: ColorTokens
+  iconSize?: IconSizeTokens
+  defaultTitle?: string
+  shouldShowSettingsIconTooltip?: boolean
+  IconLabel?: React.ReactNode
+  CustomIconComponent?: GeneratedIcon
+  testID?: string
+  CustomSettingsButton?: React.ReactNode
+  onClose?: () => void
+}
+
+export function TransactionSettings({
+  settings,
+  adjustTopAlignment = true,
+  adjustRightAlignment = true,
+  position = 'absolute',
+  defaultTitle,
+  CustomSettingsButton,
+  testID,
+  CustomIconComponent,
+  iconColor = '$neutral2',
+  backgroundColor,
+  iconSize,
+  IconLabel,
+  onClose,
+}: TransactionSettingsProps): JSX.Element {
+  const account = useWallet().evmAccount
+  const IconComponent = CustomIconComponent ?? Settings
+
+  const isTransactionSettingsModalVisible = useModalVisibility(TransactionSettingsModalId.TransactionSettings)
+  const handleShowTransactionSettingsModal = useModalShow(TransactionSettingsModalId.TransactionSettings)
+  const handleHideTransactionSettingsModal = useModalHide(TransactionSettingsModalId.TransactionSettings)
+  const isViewOnlyModalVisible = useModalVisibility(TransactionSettingsModalId.ViewOnly)
+  const handleShowViewOnlyModal = useModalShow(TransactionSettingsModalId.ViewOnly)
+  const handleHideViewOnlyModal = useModalHide(TransactionSettingsModalId.ViewOnly)
+
+  const onCloseSettingsModal = useEvent((): void => {
+    if (onClose) {
+      onClose()
+    } else {
+      handleHideTransactionSettingsModal()
+    }
+  })
+
+  const onPopoverOpenChange = useEvent((open: boolean): void => {
+    // Only close on interface because SwapSettings are rendered in a modal on mobile/extension
+    // and when click is triggered inside extension Modal it causes onOpenChange to trigger
+    if (!open && isWebApp) {
+      onCloseSettingsModal()
+    }
+  })
+
+  const onPressTransactionSettings = useEvent((): void => {
+    if (isTransactionSettingsModalVisible) {
+      onCloseSettingsModal()
+    } else {
+      handleShowTransactionSettingsModal()
+    }
+
+    dismissNativeKeyboard()
+  })
+
+  const isViewOnlyWallet = account?.accountType === AccountType.Readonly
+
+  const topAlignment = adjustTopAlignment ? (isWebApp ? -38 : 6) : 0
+  const rightAlignment = adjustRightAlignment ? (isMobileApp ? 24 : 4) : 0
+  const popoverOffset = isWebApp
+    ? { crossAxis: adjustRightAlignment ? 0 : 8, mainAxis: adjustTopAlignment ? 0 : 8 }
+    : undefined
+
+  return (
+    <>
+      <ViewOnlyModal isOpen={isViewOnlyModalVisible} onDismiss={handleHideViewOnlyModal} />
+      <Flex row gap="$spacing4" position={position} top={topAlignment} right={rightAlignment} zIndex="$default">
+        {isViewOnlyWallet ? (
+          <ViewOnlyButton onPress={handleShowViewOnlyModal} />
+        ) : (
+          <Popover
+            offset={popoverOffset}
+            placement="bottom-end"
+            open={isTransactionSettingsModalVisible}
+            onOpenChange={onPopoverOpenChange}
+          >
+            <Flex>
+              <Popover.Trigger>
+                <TouchableArea testID={testID ?? TestID.TransactionSettings} onPress={onPressTransactionSettings}>
+                  {CustomSettingsButton ?? (
+                    <TransactionSettingsButton
+                      contentColor={iconColor}
+                      backgroundColor={backgroundColor}
+                      CustomIconComponent={IconComponent}
+                      iconSize={iconSize}
+                      IconLabel={IconLabel}
+                    />
+                  )}
+                </TouchableArea>
+              </Popover.Trigger>
+              <TransactionSettingsModal
+                settings={settings}
+                defaultTitle={defaultTitle}
+                isOpen={isTransactionSettingsModalVisible}
+                onClose={onCloseSettingsModal}
+              />
+            </Flex>
+          </Popover>
+        )}
+      </Flex>
+    </>
+  )
+}

package/src/features/transactions/components/settings/TransactionSettingsButton.tsx

@@ -0,0 +1,96 @@
+import { memo } from 'react'
+import type { ColorTokens, GeneratedIcon } from '@luxfi/ui/src'
+import { Flex, Tooltip as TooltipComponent } from '@luxfi/ui/src'
+import { Settings } from '@luxfi/ui/src/components/icons/Settings'
+import { type IconSizeTokens, zIndexes } from '@luxfi/ui/src/theme'
+import { TransactionSettingsModalId } from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/createTransactionSettingsModalStore'
+import { useModalVisibility } from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/useTransactionSettingsModalStore'
+import { isWebApp, isWebPlatform } from '@luxfi/utilities/src/platform'
+
+type TransactionSettingsButtonProps = {
+  Tooltip?: React.ReactNode
+  contentColor?: ColorTokens
+  iconSize?: IconSizeTokens
+  backgroundColor?: ColorTokens
+  CustomIconComponent?: GeneratedIcon
+  IconLabel?: React.ReactNode
+}
+
+export const TransactionSettingsButton = memo(
+  ({
+    iconSize: iconSizeProp,
+    contentColor,
+    backgroundColor,
+    CustomIconComponent,
+    IconLabel,
+  }: Omit<TransactionSettingsButtonProps, 'Tooltip'>): JSX.Element => {
+    const IconComponent = CustomIconComponent ?? Settings
+
+    const iconSize = iconSizeProp ?? (isWebPlatform ? '$icon.20' : '$icon.24')
+
+    return (
+      <Flex
+        centered
+        row
+        backgroundColor={backgroundColor}
+        borderRadius="$roundedFull"
+        gap="$spacing4"
+        px={IconLabel ? '$spacing8' : '$spacing4'}
+        py="$spacing4"
+        height={isWebApp ? '$spacing32' : 'auto'}
+      >
+        {IconLabel}
+        <Flex
+          animation="simple"
+          rotate="0deg"
+          hoverStyle={{
+            rotate: '90deg',
+          }}
+          $platform-web={{
+            cursor: 'pointer',
+            transition: 'transform 80ms ease-out',
+          }}
+        >
+          <IconComponent color={contentColor} hoverColor="$neutral2Hovered" size={iconSize} />
+        </Flex>
+      </Flex>
+    )
+  },
+)
+
+export const TransactionSettingsButtonWithTooltip = memo(
+  ({
+    Tooltip,
+    iconSize: iconSizeProp,
+    IconLabel,
+    contentColor,
+    backgroundColor,
+    CustomIconComponent,
+  }: TransactionSettingsButtonProps): JSX.Element => {
+    const iconSize = iconSizeProp ?? (isWebPlatform ? '$icon.20' : '$icon.24')
+    const isTransactionSettingsModalVisible = useModalVisibility(TransactionSettingsModalId.TransactionSettings)
+
+    const button = (
+      <TransactionSettingsButton
+        iconSize={iconSize}
+        contentColor={contentColor}
+        backgroundColor={backgroundColor}
+        CustomIconComponent={CustomIconComponent}
+        IconLabel={IconLabel}
+      />
+    )
+
+    if (Tooltip && !isTransactionSettingsModalVisible) {
+      return (
+        <TooltipComponent>
+          <TooltipComponent.Trigger>{button}</TooltipComponent.Trigger>
+          <TooltipComponent.Content zIndex={zIndexes.overlay}>{Tooltip}</TooltipComponent.Content>
+        </TooltipComponent>
+      )
+    }
+
+    return button
+  },
+)
+
+TransactionSettingsButton.displayName = 'TransactionSettingsButton'

package/src/features/transactions/components/settings/TransactionSettingsButtonWithSlippage.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { ColorTokens } from '@luxfi/ui/src'
+import { Text } from '@luxfi/ui/src'
+import { Settings } from '@luxfi/ui/src/components/icons/Settings'
+import { SettingsWarning } from '@luxfi/ui/src/components/icons/SettingsWarning'
+import type { IconSizeTokens } from '@luxfi/ui/src/theme'
+import { SLIPPAGE_CRITICAL_TOLERANCE } from '@luxexchange/lx/src/constants/transactions'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { useTransactionSettingsStore } from '@luxexchange/lx/src/features/transactions/components/settings/stores/transactionSettingsStore/useTransactionSettingsStore'
+import { TransactionSettingsButtonWithTooltip } from '@luxexchange/lx/src/features/transactions/components/settings/TransactionSettingsButton'
+import { getSlippageWarningColor } from '@luxexchange/lx/src/features/transactions/swap/utils/styleHelpers'
+import { isExtensionApp, isMobileWeb, isWebApp } from '@luxfi/utilities/src/platform'
+
+const getSettingsIconBackgroundColor = (autoSlippageTolerance: number, slippageTolerance?: number): ColorTokens => {
+  if (!slippageTolerance) {
+    return '$transparent'
+  }
+  if (slippageTolerance >= SLIPPAGE_CRITICAL_TOLERANCE) {
+    return '$statusCritical2'
+  }
+  if (slippageTolerance > autoSlippageTolerance) {
+    return '$statusWarning2'
+  }
+  return '$surface3'
+}
+
+interface TransactionSettingsButtonProps {
+  iconColor?: ColorTokens
+  iconSize?: IconSizeTokens
+  customSlippageTolerance?: number
+  autoSlippageTolerance: number
+  isZeroSlippage?: boolean
+}
+
+export function TransactionSettingsButtonWithSlippage({
+  iconColor = '$neutral2',
+  iconSize,
+  autoSlippageTolerance,
+  isZeroSlippage,
+}: TransactionSettingsButtonProps): JSX.Element {
+  const { t } = useTranslation()
+  const { formatPercent } = useLocalizationContext()
+  const customSlippageTolerance = useTransactionSettingsStore((s) => s.customSlippageTolerance)
+
+  const shouldShowCustomSlippage = customSlippageTolerance && !isZeroSlippage
+
+  const meetsPlatformConditions = (isWebApp || isExtensionApp) && !isMobileWeb
+  const exceedsSlippageTolerance = !!customSlippageTolerance && customSlippageTolerance > autoSlippageTolerance
+
+  const shouldShowSettingsIconTooltip = meetsPlatformConditions && exceedsSlippageTolerance
+
+  const { backgroundColor, contentColor, IconComponent } = useMemo(() => {
+    const iconBackgroundColor = getSettingsIconBackgroundColor(autoSlippageTolerance, customSlippageTolerance)
+    const fillColor = getSlippageWarningColor({
+      customSlippageValue: customSlippageTolerance ?? 0,
+      autoSlippageTolerance,
+      fallbackColorValue: iconColor,
+    })
+    const SettingsIconComponent =
+      customSlippageTolerance && customSlippageTolerance > SLIPPAGE_CRITICAL_TOLERANCE ? SettingsWarning : Settings
+
+    return { backgroundColor: iconBackgroundColor, contentColor: fillColor, IconComponent: SettingsIconComponent }
+  }, [customSlippageTolerance, iconColor, autoSlippageTolerance])
+
+  return (
+    <TransactionSettingsButtonWithTooltip
+      iconSize={iconSize}
+      contentColor={contentColor}
+      backgroundColor={backgroundColor}
+      CustomIconComponent={IconComponent}
+      Tooltip={
+        shouldShowSettingsIconTooltip && <Text variant="body4">{t('swap.settings.slippage.warning.hover')}</Text>
+      }
+      IconLabel={
+        shouldShowCustomSlippage && (
+          <Text color={contentColor} variant="buttonLabel3">
+            {formatPercent(customSlippageTolerance)}
+          </Text>
+        )
+      }
+    />
+  )
+}

package/src/features/transactions/components/settings/TransactionSettingsModal/TransactionSettingsModal.tsx

@@ -0,0 +1,11 @@
+import { TransactionSettingsModalInterface } from '@luxexchange/lx/src/features/transactions/components/settings/TransactionSettingsModal/TransactionSettingsModalInterface'
+import { TransactionSettingsModalWallet } from '@luxexchange/lx/src/features/transactions/components/settings/TransactionSettingsModal/TransactionSettingsModalWallet'
+import { TransactionSettingsModalProps } from '@luxexchange/lx/src/features/transactions/components/settings/TransactionSettingsModal/types'
+import { isWebApp } from '@luxfi/utilities/src/platform'
+
+export function TransactionSettingsModal(props: TransactionSettingsModalProps): JSX.Element {
+  if (isWebApp) {
+    return <TransactionSettingsModalInterface {...props} />
+  }
+  return <TransactionSettingsModalWallet {...props} />
+}