@luxexchange/lx 1.0.0

package/src/features/transactions/swap/components/SwapFormButton/hooks/useSwapFormButtonText.ts

@@ -0,0 +1,90 @@
+import { FeatureFlags, useFeatureFlag } from '@luxfi/gating'
+import { useTranslation } from 'react-i18next'
+import { nativeOnChain } from '@luxexchange/lx/src/constants/tokens'
+import { useConnectionStatus } from '@luxexchange/lx/src/features/accounts/store/hooks'
+import { isSVMChain } from '@luxexchange/lx/src/features/platforms/utils/chains'
+import { useIsWebFORNudgeEnabled } from '@luxexchange/lx/src/features/providers/webForNudgeProvider'
+import { useTransactionModalContext } from '@luxexchange/lx/src/features/transactions/components/TransactionModal/TransactionModalContext'
+import { useIsAmountSelectionInvalid } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormButton/hooks/useIsAmountSelectionInvalid'
+import { useIsMissingPlatformWallet } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormButton/hooks/useIsMissingPlatformWallet'
+import { useIsTokenSelectionInvalid } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormButton/hooks/useIsTokenSelectionInvalid'
+import { useIsTradeIndicative } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormButton/hooks/useIsTradeIndicative'
+import { useParsedSwapWarnings } from '@luxexchange/lx/src/features/transactions/swap/hooks/useSwapWarnings/useSwapWarnings'
+import { getActionText } from '@luxexchange/lx/src/features/transactions/swap/review/SwapReviewScreen/SwapReviewFooter/SubmitSwapButton'
+import { useSwapFormStoreDerivedSwapInfo } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import { WrapType } from '@luxexchange/lx/src/features/transactions/types/wrap'
+import { CurrencyField } from '@luxexchange/lx/src/types/currency'
+
+export const useSwapFormButtonText = (): string => {
+  const { t } = useTranslation()
+  const { swapRedirectCallback } = useTransactionModalContext()
+  const { currencies, wrapType, chainId } = useSwapFormStoreDerivedSwapInfo((s) => ({
+    currencies: s.currencies,
+    wrapType: s.wrapType,
+    chainId: s.chainId,
+  }))
+  const isTokenSelectionInvalid = useIsTokenSelectionInvalid()
+  const isAmountSelectionInvalid = useIsAmountSelectionInvalid()
+
+  const { isDisconnected } = useConnectionStatus()
+  const isMissingPlatformWallet = useIsMissingPlatformWallet(chainId)
+
+  const isEmbeddedWalletEnabled = useFeatureFlag(FeatureFlags.EmbeddedWallet)
+  const { insufficientBalanceWarning, blockingWarning, insufficientGasFundsWarning } = useParsedSwapWarnings()
+
+  const isLogIn = isEmbeddedWalletEnabled
+
+  const nativeCurrency = nativeOnChain(chainId)
+
+  const isIndicative = useIsTradeIndicative()
+  const isWebFORNudgeEnabled = useIsWebFORNudgeEnabled()
+  const isWrap = wrapType !== WrapType.NotApplicable
+
+  if (swapRedirectCallback) {
+    return t('common.getStarted')
+  }
+
+  if (isWebFORNudgeEnabled) {
+    return t('empty.swap.button.text')
+  }
+
+  if (isIndicative) {
+    return t('swap.finalizingQuote')
+  }
+
+  if (isDisconnected) {
+    return isLogIn ? t('nav.logIn.button') : t('common.connectWallet.button')
+  }
+
+  if (isMissingPlatformWallet) {
+    return t('common.connectTo', { platform: isSVMChain(chainId) ? 'Solana' : 'Ethereum' })
+  }
+
+  if (blockingWarning?.buttonText) {
+    return blockingWarning.buttonText
+  }
+
+  if (isTokenSelectionInvalid) {
+    return t('common.selectToken.label')
+  }
+
+  if (isAmountSelectionInvalid) {
+    return t('common.noAmount.error')
+  }
+
+  if (insufficientBalanceWarning) {
+    return t('common.insufficientTokenBalance.error.simple', {
+      tokenSymbol: currencies[CurrencyField.INPUT]?.currency.symbol ?? '',
+    })
+  }
+
+  if (insufficientGasFundsWarning) {
+    return t('common.insufficientTokenBalance.error.simple', { tokenSymbol: nativeCurrency.symbol ?? '' })
+  }
+
+  if (isWrap) {
+    return getActionText({ t, wrapType })
+  }
+
+  return t('swap.button.review')
+}

package/src/features/transactions/swap/components/SwapFormSettings/SlippageWarningModal.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next'
+import { Button, Flex, Text, TouchableArea } from '@luxfi/ui/src'
+import { AlertTriangleFilled } from '@luxfi/ui/src/components/icons/AlertTriangleFilled'
+import { X } from '@luxfi/ui/src/components/icons/X'
+import { Modal } from '@luxexchange/lx/src/components/modals/Modal'
+import { ModalName } from '@luxexchange/lx/src/features/telemetry/constants'
+import { isMobileApp, isMobileWeb } from '@luxfi/utilities/src/platform'
+
+interface SlippageWarningModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function SlippageWarningModal({ isOpen, onClose }: SlippageWarningModalProps): JSX.Element {
+  const { t } = useTranslation()
+  return (
+    <Modal
+      isDismissible
+      name={ModalName.SlippageWarningModal}
+      gap="$gap16"
+      padding={isMobileApp ? '$spacing24' : '$spacing16'}
+      height="max-content"
+      isModalOpen={isOpen}
+      maxWidth={420}
+      onClose={onClose}
+    >
+      {!isMobileApp && !isMobileWeb && (
+        <TouchableArea alignSelf="flex-end" onPress={onClose}>
+          <X color="$neutral2" size="$icon.24" />
+        </TouchableArea>
+      )}
+      <Flex flexDirection="column" alignItems="center" gap="$gap24">
+        <Flex gap="$gap16" backgroundColor="$statusCritical2" borderRadius="$rounded12" p="$spacing12">
+          <AlertTriangleFilled color="$statusCritical" size="$icon.24" />
+        </Flex>
+        <Flex centered rowGap="$spacing8">
+          <Text variant="subheading1">{t('swap.settings.slippage.warning')}</Text>
+          <Text variant="body2" color="$neutral2" px="$spacing8" textAlign="center">
+            {t('swap.settings.slippage.warning.description')}
+          </Text>
+        </Flex>
+        <Flex centered row width="100%" px={isMobileApp ? '$spacing24' : '$spacing6'}>
+          <Button emphasis="secondary" onPress={onClose}>
+            {t('common.close')}
+          </Button>
+        </Flex>
+      </Flex>
+    </Modal>
+  )
+}

package/src/features/transactions/swap/components/SwapFormSettings/SwapFormSettings.tsx

@@ -0,0 +1,92 @@
+import { useEffect } from 'react'
+import type { ColorTokens, FlexProps } from '@luxfi/ui/src'
+import type { IconSizeTokens } from '@luxfi/ui/src/theme'
+import { useTransactionSettingsWithSlippage } from '@luxexchange/lx/src/features/transactions/components/settings/hooks/useTransactionSettingsWithSlippage'
+import { Slippage } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/Slippage/Slippage'
+import { useSlippageSettings } from '@luxexchange/lx/src/features/transactions/components/settings/settingsConfigurations/slippage/useSlippageSettings'
+import {
+  type ModalIdWithSlippage,
+  TransactionSettingsModalId,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/createTransactionSettingsModalStore'
+import { TransactionSettingsModalStoreContextProvider } from '@luxexchange/lx/src/features/transactions/components/settings/stores/TransactionSettingsModalStore/TransactionSettingsModalStoreContextProvider'
+import { useSetTransactionSettingsAutoSlippageTolerance } from '@luxexchange/lx/src/features/transactions/components/settings/stores/transactionSettingsStore/useTransactionSettingsStore'
+import { TransactionSettings as BaseTransactionSettings } from '@luxexchange/lx/src/features/transactions/components/settings/TransactionSettings'
+import { TransactionSettingsButtonWithSlippage } from '@luxexchange/lx/src/features/transactions/components/settings/TransactionSettingsButtonWithSlippage'
+import type { TransactionSettingConfig } from '@luxexchange/lx/src/features/transactions/components/settings/types'
+import { getShouldSettingApplyToRouting } from '@luxexchange/lx/src/features/transactions/components/settings/utils'
+import SlippageWarningModal from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/SlippageWarningModal'
+import { useSwapFormStoreDerivedSwapInfo } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+
+interface SwapFormSettingsProps {
+  settings: TransactionSettingConfig[]
+  adjustTopAlignment?: boolean
+  adjustRightAlignment?: boolean
+  position?: FlexProps['position']
+  iconColor?: ColorTokens
+  iconSize?: IconSizeTokens
+  defaultTitle?: string
+  isZeroSlippage?: boolean
+}
+
+const customModalIds: ModalIdWithSlippage[] = [TransactionSettingsModalId.SlippageWarning]
+
+export function SwapFormSettings(props: SwapFormSettingsProps): JSX.Element {
+  const setAutoSlippageTolerance = useSetTransactionSettingsAutoSlippageTolerance()
+  const slippageTolerance = useSwapFormStoreDerivedSwapInfo((s) => {
+    if (!getShouldSettingApplyToRouting(Slippage, s.trade.trade?.routing)) {
+      return 0
+    }
+    return s.trade.trade?.slippageTolerance ?? s.trade.indicativeTrade?.slippageTolerance
+  })
+
+  useEffect(() => {
+    setAutoSlippageTolerance(slippageTolerance)
+  }, [slippageTolerance, setAutoSlippageTolerance])
+
+  return (
+    <TransactionSettingsModalStoreContextProvider<ModalIdWithSlippage> modalIds={customModalIds}>
+      <SwapFormSettingsInner {...props} />
+    </TransactionSettingsModalStoreContextProvider>
+  )
+}
+
+export function SwapFormSettingsInner({
+  settings,
+  adjustTopAlignment = true,
+  adjustRightAlignment = true,
+  position = 'absolute',
+  iconColor = '$neutral2',
+  iconSize,
+  defaultTitle,
+  isZeroSlippage,
+}: SwapFormSettingsProps): JSX.Element {
+  const { isSlippageWarningModalVisible, handleHideSlippageWarningModalWithSeen, onCloseSettingsModal } =
+    useTransactionSettingsWithSlippage()
+  const { autoSlippageTolerance } = useSlippageSettings()
+
+  return (
+    <>
+      <SlippageWarningModal isOpen={isSlippageWarningModalVisible} onClose={handleHideSlippageWarningModalWithSeen} />
+      <BaseTransactionSettings
+        settings={settings}
+        adjustTopAlignment={adjustTopAlignment}
+        adjustRightAlignment={adjustRightAlignment}
+        position={position}
+        iconColor={iconColor}
+        iconSize={iconSize}
+        defaultTitle={defaultTitle}
+        testID={TestID.SwapSettings}
+        CustomSettingsButton={
+          <TransactionSettingsButtonWithSlippage
+            autoSlippageTolerance={autoSlippageTolerance}
+            isZeroSlippage={isZeroSlippage}
+            iconColor={iconColor}
+            iconSize={iconSize}
+          />
+        }
+        onClose={onCloseSettingsModal}
+      />
+    </>
+  )
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/RoutingMethodPreference/RoutingMethodPreference.tsx

@@ -0,0 +1,15 @@
+import { Platform } from '@luxexchange/lx/src/features/platforms/types/Platform'
+import type { TransactionSettingConfig } from '@luxexchange/lx/src/features/transactions/components/settings/types'
+import { RoutingMethodPreferenceControl } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/RoutingMethodPreference/RoutingMethodPreferenceControl'
+import { RoutingMethodPreferenceScreen } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/RoutingMethodPreference/RoutingMethodPreferenceScreen'
+
+export const RoutingMethodPreference: TransactionSettingConfig = {
+  renderTitle: (t) => t('swap.settings.routingMethod.title'),
+  applicablePlatforms: [Platform.EVM],
+  Control() {
+    return <RoutingMethodPreferenceControl />
+  },
+  Screen() {
+    return <RoutingMethodPreferenceScreen />
+  },
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/RoutingMethodPreference/RoutingMethodPreferenceControl.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next'
+import { Text } from '@luxfi/ui/src'
+import { useTransactionSettingsStore } from '@luxexchange/lx/src/features/transactions/components/settings/stores/transactionSettingsStore/useTransactionSettingsStore'
+
+export function RoutingMethodPreferenceControl(): JSX.Element {
+  const { t } = useTranslation()
+  const routeVia = useTransactionSettingsStore((s) => s.routeVia)
+
+  const label =
+    routeVia === 'auto'
+      ? t('swap.settings.routingMethod.option.auto.title')
+      : routeVia === 'amm'
+        ? t('swap.settings.routingMethod.option.amm.title')
+        : t('swap.settings.routingMethod.option.dexPrecompile.title')
+
+  return (
+    <Text
+      color="$neutral2"
+      flexWrap="wrap"
+      variant="subheading2"
+      $group-hover={{
+        color: '$neutral2Hovered',
+      }}
+    >
+      {label}
+    </Text>
+  )
+}

package/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/RoutingMethodPreference/RoutingMethodPreferenceScreen.tsx

@@ -0,0 +1,89 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, Switch, Text } from '@luxfi/ui/src'
+import {
+  useTransactionSettingsActions,
+  useTransactionSettingsStore,
+} from '@luxexchange/lx/src/features/transactions/components/settings/stores/transactionSettingsStore/useTransactionSettingsStore'
+import type { RoutingMethod } from '@luxexchange/lx/src/features/transactions/components/settings/types'
+import { isLuxChain } from '@luxexchange/lx/src/data/apiClients/tradingApi/LuxGatewayClient'
+import { useSwapFormStoreDerivedSwapInfo } from '@luxexchange/lx/src/features/transactions/swap/stores/swapFormStore/useSwapFormStore'
+import { ElementName } from '@luxexchange/lx/src/features/telemetry/constants'
+import Trace from '@luxexchange/lx/src/features/telemetry/Trace'
+
+const ROUTING_METHODS: {
+  value: RoutingMethod
+  titleKey: string
+  descriptionKey: string
+  element: ElementName
+  luxOnly?: boolean
+}[] = [
+  {
+    value: 'auto',
+    titleKey: 'swap.settings.routingMethod.option.auto.title',
+    descriptionKey: 'swap.settings.routingMethod.option.auto.description',
+    element: ElementName.SwapRoutingMethodAuto,
+  },
+  {
+    value: 'amm',
+    titleKey: 'swap.settings.routingMethod.option.amm.title',
+    descriptionKey: 'swap.settings.routingMethod.option.amm.description',
+    element: ElementName.SwapRoutingMethodAMM,
+  },
+  {
+    value: 'dex-precompile',
+    titleKey: 'swap.settings.routingMethod.option.dexPrecompile.title',
+    descriptionKey: 'swap.settings.routingMethod.option.dexPrecompile.description',
+    element: ElementName.SwapRoutingMethodDEXPrecompile,
+    luxOnly: true,
+  },
+]
+
+export function RoutingMethodPreferenceScreen(): JSX.Element {
+  const { t } = useTranslation()
+  const routeVia = useTransactionSettingsStore((s) => s.routeVia)
+  const { setRouteVia } = useTransactionSettingsActions()
+  const chainId = useSwapFormStoreDerivedSwapInfo((s) => s.chainId)
+  const isOnLuxChain = isLuxChain(chainId)
+
+  const handleSelect = useCallback(
+    (method: RoutingMethod) => {
+      setRouteVia(method)
+    },
+    [setRouteVia],
+  )
+
+  return (
+    <Flex gap="$spacing16" my="$spacing16">
+      {ROUTING_METHODS.map((method) => {
+        const isDisabled = method.luxOnly && !isOnLuxChain
+        const isActive = routeVia === method.value
+
+        return (
+          <Flex key={method.value} flexDirection="column" gap="$spacing12">
+            <Flex row py="$spacing2" alignItems="flex-start" gap="$spacing16" justifyContent="space-between">
+              <Flex shrink gap="$spacing4">
+                <Text color="$neutral1" variant="subheading2">
+                  {t(method.titleKey)}
+                </Text>
+                <Text color="$neutral2" variant="body3" textWrap="pretty">
+                  {isDisabled
+                    ? t('swap.settings.routingMethod.option.dexPrecompile.unavailable')
+                    : t(method.descriptionKey)}
+                </Text>
+              </Flex>
+              <Trace element={method.element} logPress={!isActive}>
+                <Switch
+                  disabled={isDisabled}
+                  checked={isActive}
+                  variant="branded"
+                  onCheckedChange={() => handleSelect(method.value)}
+                />
+              </Trace>
+            </Flex>
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}

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

@@ -0,0 +1,55 @@
+import type { PropsWithChildren } from 'react'
+import { useTranslation } from 'react-i18next'
+import { DEXText } from '@luxfi/ui/src'
+import { DEX } from '@luxfi/ui/src/components/icons/DEX'
+import { colors, opacify, 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 { LearnMoreLink } from '@luxexchange/lx/src/components/text/LearnMoreLink'
+import type { InfoTooltipProps } from '@luxexchange/lx/src/components/tooltip/InfoTooltipProps'
+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 DEXInfo({
+  children,
+  tooltipTrigger,
+  placement = 'top',
+}: PropsWithChildren<{
+  tooltipTrigger?: InfoTooltipProps['trigger']
+  placement?: InfoTooltipProps['placement']
+}>): JSX.Element {
+  const { t } = useTranslation()
+
+  return (
+    <WarningInfo
+      infoButton={
+        <LearnMoreLink
+          textVariant={isWebPlatform ? 'body4' : undefined}
+          url={luxUrls.helpArticleUrls.dexInfo}
+        />
+      }
+      modalProps={{
+        backgroundIconColor: opacify(16, colors.dexPurple),
+        caption: t('dex.description'),
+        rejectText: t('common.button.close'),
+        icon: <DEX size="$icon.24" />,
+        modalName: ModalName.DEXInfo,
+        severity: WarningSeverity.None,
+        titleComponent: (
+          <DEXText variant={isWebPlatform ? 'subheading2' : 'body1'}>{t('dex.label')}</DEXText>
+        ),
+        zIndex: zIndexes.popover,
+      }}
+      tooltipProps={{
+        text: t('dex.description'),
+        placement,
+        icon: <DEX size="$icon.24" />,
+      }}
+      trigger={tooltipTrigger}
+      analyticsTitle="DEX info"
+    >
+      {children}
+    </WarningInfo>
+  )
+}

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

@@ -0,0 +1,15 @@
+import { Platform } from '@luxexchange/lx/src/features/platforms/types/Platform'
+import type { TransactionSettingConfig } from '@luxexchange/lx/src/features/transactions/components/settings/types'
+import { TradeRoutingPreferenceControl } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/TradeRoutingPreference/TradeRoutingPreferenceControl'
+import { TradeRoutingPreferenceScreen } from '@luxexchange/lx/src/features/transactions/swap/components/SwapFormSettings/settingsConfigurations/TradeRoutingPreference/TradeRoutingPreferenceScreen'
+
+export const TradeRoutingPreference: TransactionSettingConfig = {
+  renderTitle: (t) => t('swap.settings.routingPreference.title'),
+  applicablePlatforms: [Platform.EVM],
+  Control() {
+    return <TradeRoutingPreferenceControl />
+  },
+  Screen() {
+    return <TradeRoutingPreferenceScreen />
+  },
+}

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

@@ -0,0 +1,39 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Text } from '@luxfi/ui/src'
+import { 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'
+
+export function TradeRoutingPreferenceControl(): JSX.Element {
+  const { t } = useTranslation()
+  const { selectedProtocols, isV4HookPoolsEnabled } = useTransactionSettingsStore((s) => ({
+    selectedProtocols: s.selectedProtocols,
+    isV4HookPoolsEnabled: s.isV4HookPoolsEnabled,
+  }))
+
+  const getTradeRouteOptionTitle = useMemo((): string => {
+    if (
+      isDefaultTradeRouteOptions({
+        selectedProtocols,
+        isV4HookPoolsEnabled,
+      })
+    ) {
+      return t('common.default')
+    }
+
+    return t('common.custom')
+  }, [selectedProtocols, isV4HookPoolsEnabled, t])
+
+  return (
+    <Text
+      color="$neutral2"
+      flexWrap="wrap"
+      variant="subheading2"
+      $group-hover={{
+        color: '$neutral2Hovered',
+      }}
+    >
+      {getTradeRouteOptionTitle}
+    </Text>
+  )
+}