feat(widget): add limit order mode

.changeset/limit-order-mode.md

@@ -0,0 +1,5 @@
+---
+'@lifi/widget': minor
+---
+
+Add limit order mode with a limit price card, expiry selector, partial-fill toggle, and linked send/receive amounts.

packages/widget-light/src/index.ts

@@ -76,6 +76,7 @@ export type {
   WidgetLightEvents,
   WidgetLightFormFieldChanged,
   WidgetLightLowAddressActivityConfirmed,
+  WidgetLightNavigationTabChanged,
   WidgetLightRouteExecutionUpdate,
   WidgetLightRouteHighValueLoss,
   WidgetLightRouteSelected,

packages/widget-light/src/shared/widgetLightEvents.ts

@@ -21,6 +21,7 @@ export enum WidgetLightEvent {
   DestinationChainTokenSelected = 'destinationChainTokenSelected',
   FormFieldChanged = 'formFieldChanged',
   LowAddressActivityConfirmed = 'lowAddressActivityConfirmed',
+  NavigationTabChanged = 'navigationTabChanged',
   PageEntered = 'pageEntered',
   RouteExecutionCompleted = 'routeExecutionCompleted',
   RouteExecutionFailed = 'routeExecutionFailed',
@@ -61,6 +62,11 @@ export interface WidgetLightLowAddressActivityConfirmed {
   chainId: number
 }
 
+export interface WidgetLightNavigationTabChanged {
+  tab: string
+  previousTab?: string
+}
+
 export interface WidgetLightRouteHighValueLoss {
   fromAmountUSD: number
   toAmountUSD: number
@@ -126,6 +132,7 @@ export interface WidgetLightEvents {
   destinationChainTokenSelected: WidgetLightChainTokenSelected
   formFieldChanged: WidgetLightFormFieldChanged
   lowAddressActivityConfirmed: WidgetLightLowAddressActivityConfirmed
+  navigationTabChanged: WidgetLightNavigationTabChanged
   pageEntered: string
   routeExecutionCompleted: unknown
   routeExecutionFailed: WidgetLightRouteExecutionUpdate

packages/widget-playground/src/defaultWidgetConfig.ts

@@ -63,7 +63,7 @@ export const widgetBaseConfig: WidgetConfig = {
   ],
   variant: 'wide',
   // mode: 'split',
-  // _navigationTabs: ['default', 'private', 'refuel'], ['swap-advanced', 'bridge-advanced', 'limit'],
+  _navigationTabs: ['limit'],
   // hiddenUI: {
   //   chainSidebar: true,
   // },

packages/widget-playground/src/utils/events.ts

@@ -21,6 +21,8 @@ export const widgetEventDescriptions: Record<WidgetEventName, string> = {
     'The event fires whenever a form value is changed in the widget.',
   [WidgetEvent.LowAddressActivityConfirmed]:
     'The event fires when the user confirms proceeding despite a low address activity warning for the specified address and chain.',
+  [WidgetEvent.NavigationTabChanged]:
+    'The event fires when the user switches between navigation tabs in the widget header.',
   [WidgetEvent.PageEntered]:
     'The event fires when the user navigates to a page in the widget.',
   [WidgetEvent.RouteExecutionCompleted]:
@@ -60,6 +62,7 @@ export const widgetEventDisplayOrder: WidgetEventName[] = [
   WidgetEvent.DestinationChainTokenSelected,
   WidgetEvent.SendToWalletToggled,
   WidgetEvent.WidgetExpanded,
+  WidgetEvent.NavigationTabChanged,
   WidgetEvent.PageEntered,
   WidgetEvent.FormFieldChanged,
   WidgetEvent.SettingUpdated,

packages/widget/src/components/AmountInputCard/AmountInputCardPair.tsx

@@ -2,6 +2,7 @@ import type { BoxProps } from '@mui/material'
 import type React from 'react'
 import type { JSX } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { LimitPriceCard } from '../LimitPriceCard/LimitPriceCard.js'
 import { SwapButton } from '../SwapButton/SwapButton.js'
 import { CardContainer } from './AmountInputCard.style.js'
 import { ReceiveAmountCard } from './ReceiveAmountCard.js'
@@ -15,6 +16,7 @@ export const AmountInputCardPair: React.FC<BoxProps> = (props): JSX.Element => {
 
   return (
     <CardContainer {...props}>
+      {mode === 'limit' ? <LimitPriceCard sx={{ marginBottom: 1 }} /> : null}
       <SendAmountCard mask={showSwapButton} />
       <SwapButton sx={{ visibility: showSwapButton ? 'visible' : 'hidden' }} />
       <ReceiveAmountCard mask={showSwapButton} />

packages/widget/src/components/AmountInputCard/PercentageChips.tsx

@@ -4,6 +4,7 @@ import { type JSX, memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
+import { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
@@ -18,7 +19,8 @@ export const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(
     const { t } = useTranslation()
     const { getChainById } = useAvailableChains()
     const { setFieldValue } = useFieldActions()
-    const { disabledUI } = useWidgetConfig()
+    const { disabledUI, mode } = useWidgetConfig()
+    const { setSendAmount } = useLinkedLimitFields()
 
     const amountKey = FormKeyHelper.getAmountKey(formType)
     const isDisabled = !!disabledUI?.[amountKey as keyof DisabledUIConfig]
@@ -48,26 +50,29 @@ export const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(
       return maxAmount
     }
 
+    // In limit mode the send amount must flow through the linked-field
+    // derivation so the receive amount recomputes; otherwise it is a plain
+    // form-field write.
+    const applyAmount = (value: string): void => {
+      if (mode === 'limit') {
+        setSendAmount(value)
+      } else {
+        setFieldValue(amountKey, value, { isTouched: true })
+      }
+    }
+
     const handlePercentage = (percentage: number): void => {
       const maxAmount = getMaxAmount()
       if (maxAmount && token?.decimals) {
         const percentageAmount = (maxAmount * BigInt(percentage)) / 100n
-        setFieldValue(
-          FormKeyHelper.getAmountKey(formType),
-          formatUnits(percentageAmount, token.decimals),
-          { isTouched: true }
-        )
+        applyAmount(formatUnits(percentageAmount, token.decimals))
       }
     }
 
     const handleMax = (): void => {
       const maxAmount = getMaxAmount()
       if (maxAmount && token?.decimals) {
-        setFieldValue(
-          FormKeyHelper.getAmountKey(formType),
-          formatUnits(maxAmount, token.decimals),
-          { isTouched: true }
-        )
+        applyAmount(formatUnits(maxAmount, token.decimals))
       }
     }