@lifi/widget 4.0.0 → 4.2.0

package/src/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from '@tanstack/react-router'
 import type { FC, PropsWithChildren } from 'react'
-import { useLayoutEffect, useRef } from 'react'
+import { useCallback } from 'react'
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'
 import { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'
 import { createElementId, ElementId } from '../../utils/elements.js'
@@ -12,31 +12,33 @@ import { WalletHeader } from './WalletHeader.js'
 const HeaderContainer: FC<PropsWithChildren> = ({ children }) => {
   const { pathname } = useLocation()
   const elementId = useDefaultElementId()
-  const headerRef = useRef<HTMLDivElement>(null)
   const { setHeaderHeight } = useSetHeaderHeight()
 
-  useLayoutEffect(() => {
-    const handleHeaderResize = () => {
-      const height = headerRef.current?.getBoundingClientRect().height
-
-      if (height) {
-        setHeaderHeight(height)
+  // React 19 ref cleanup callback: set up the ResizeObserver when the node
+  // mounts and tear it down when it unmounts.
+  const headerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!node) {
+        return
       }
-    }
 
-    let resizeObserver: ResizeObserver
+      const handleHeaderResize = () => {
+        const height = node.getBoundingClientRect().height
+
+        if (height) {
+          setHeaderHeight(height)
+        }
+      }
 
-    if (headerRef.current) {
-      resizeObserver = new ResizeObserver(handleHeaderResize)
-      resizeObserver.observe(headerRef.current)
-    }
+      const resizeObserver = new ResizeObserver(handleHeaderResize)
+      resizeObserver.observe(node)
 
-    return () => {
-      if (resizeObserver) {
+      return () => {
         resizeObserver.disconnect()
       }
-    }
-  }, [setHeaderHeight])
+    },
+    [setHeaderHeight]
+  )
 
   return (
     <Container

package/src/components/Header/HeaderNavigationTabs.tsx

@@ -0,0 +1,42 @@
+import { type JSX, useEffect, useRef } from 'react'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { useNavigationTabLabel } from '../../stores/navigationTabs/useNavigationTabLabel.js'
+import { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'
+import { WidgetEvent } from '../../types/events.js'
+import type { NavigationTabKey } from '../../types/widget.js'
+import { HeaderTabs } from './HeaderTabs.js'
+
+export const HeaderNavigationTabs = (): JSX.Element | null => {
+  const [tabs, activeTab, setActiveTab] = useNavigationTabsStore((store) => [
+    store.tabs,
+    store.activeTab,
+    store.setActiveTab,
+  ])
+  const getLabel = useNavigationTabLabel()
+  const emitter = useWidgetEvents()
+  const previousTabRef = useRef<NavigationTabKey | undefined>(undefined)
+
+  // Emit on the first resolved tab and on every subsequent switch.
+  useEffect(() => {
+    if (!activeTab || previousTabRef.current === activeTab) {
+      return
+    }
+    emitter.emit(WidgetEvent.NavigationTabChanged, {
+      tab: activeTab,
+      previousTab: previousTabRef.current,
+    })
+    previousTabRef.current = activeTab
+  }, [emitter, activeTab])
+
+  if (!tabs.length || !activeTab) {
+    return null
+  }
+
+  return (
+    <HeaderTabs
+      tabs={tabs.map((key) => ({ key, label: getLabel(key) }))}
+      value={activeTab}
+      onChange={setActiveTab}
+    />
+  )
+}

package/src/components/Header/HeaderTabs.tsx

@@ -0,0 +1,48 @@
+import type { JSX } from 'react'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'
+
+interface HeaderTab<K extends string> {
+  key: K
+  label: string
+}
+
+interface HeaderTabsProps<K extends string> {
+  tabs: HeaderTab<K>[]
+  value: K
+  onChange: (key: K) => void
+}
+
+/**
+ * Presentational header tabs bar shared by split mode and configured
+ * navigation tabs.
+ * Clears the form fields on switch; the caller supplies the labelled tabs, the
+ * active key, and what selecting a key means for its store.
+ */
+export const HeaderTabs = <K extends string>({
+  tabs,
+  value,
+  onChange,
+}: HeaderTabsProps<K>): JSX.Element => {
+  const { setFieldValue } = useFieldActions()
+
+  const handleChange = (_: React.SyntheticEvent, key: K) => {
+    setFieldValue('fromAmount', '')
+    setFieldValue('fromToken', '')
+    setFieldValue('toToken', '')
+    onChange(key)
+  }
+
+  return (
+    <NavigationTabs value={value} onChange={handleChange} aria-label="tabs">
+      {tabs.map((tab) => (
+        <NavigationTab
+          key={tab.key}
+          value={tab.key}
+          label={tab.label}
+          disableRipple
+        />
+      ))}
+    </NavigationTabs>
+  )
+}

package/src/components/Header/NavigationHeader.tsx

@@ -3,6 +3,7 @@ import { Box, Typography } from '@mui/material'
 import { useLocation } from '@tanstack/react-router'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
+import { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'
 import {
   backButtonRoutes,
   navigationRoutes,
@@ -12,11 +13,14 @@ import { ActivitiesButton } from './ActivitiesButton.js'
 import { BackButton } from './BackButton.js'
 import { CloseDrawerButton } from './CloseDrawerButton.js'
 import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'
+import { HeaderNavigationTabs } from './HeaderNavigationTabs.js'
 import { SettingsButton } from './SettingsButton.js'
-import { SplitNavigationTabs } from './SplitNavigationTabs.js'
 
 export const NavigationHeader: React.FC = () => {
-  const { mode, hiddenUI, variant, defaultUI, modeOptions } = useWidgetConfig()
+  const { hiddenUI, variant, defaultUI } = useWidgetConfig()
+  const navigationTabsCount = useNavigationTabsStore(
+    (state) => state.tabs.length
+  )
   const { account } = useAccount()
   const [element, title] = useHeaderStore((state) => [
     state.element,
@@ -29,17 +33,16 @@ export const NavigationHeader: React.FC = () => {
   const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)
   const hasPath = navigationRoutesValues.includes(path)
 
-  // Show tabs when split is undefined (default tabs) or an object with defaultTab
-  // Hide tabs when split is a string ('bridge' or 'swap' - single mode)
-  const showSplitOptions =
-    mode === 'split' && !hasPath && typeof modeOptions?.split !== 'string'
+  // The store resolves which tabs to show (split Swap/Bridge or configured
+  // navigation tabs); the header just reflects whether there are any.
+  const showHeaderTabs = !hasPath && navigationTabsCount > 0
 
   return (
     <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>
       {backButtonRoutes.includes(path) ? <BackButton /> : null}
-      {showSplitOptions ? (
+      {showHeaderTabs ? (
         <Box sx={{ flex: 1, marginRight: 1 }}>
-          <SplitNavigationTabs />
+          <HeaderNavigationTabs />
         </Box>
       ) : (
         <Typography

package/src/components/LimitOrderSettings/LimitOrderSettings.style.tsx

@@ -0,0 +1,69 @@
+import { Box, ButtonBase, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const Container: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+}))
+
+export const SettingsRow: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: theme.spacing(2),
+  padding: theme.spacing(1.5, 2),
+}))
+
+export const ToggleLabel: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  fontSize: 14,
+  fontWeight: 700,
+  lineHeight: 1,
+  color: theme.vars.palette.text.primary,
+  flex: '1 0 0',
+  minWidth: 0,
+}))
+
+export const ExpiryValue: React.FC<React.ComponentProps<typeof Box>> = styled(
+  Box
+)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.5),
+  color: theme.vars.palette.text.secondary,
+  height: 14,
+}))
+
+export const SettingItemButton: React.FC<
+  React.ComponentProps<typeof ButtonBase>
+> = styled(ButtonBase)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: theme.spacing(2),
+  borderRadius: theme.vars.shape.borderRadius,
+}))
+
+export const SettingItemTitle: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  fontWeight: 700,
+  color: theme.vars.palette.text.primary,
+  lineHeight: 1,
+}))
+
+export const SettingItemValue: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  fontWeight: 700,
+  color: theme.vars.palette.text.primary,
+}))

package/src/components/LimitOrderSettings/LimitOrderSettings.tsx

@@ -0,0 +1,124 @@
+import Check from '@mui/icons-material/Check'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import type { BoxProps } from '@mui/material'
+import { Menu, MenuItem } from '@mui/material'
+import { type ChangeEvent, type JSX, type MouseEvent, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { formatDuration } from '../../utils/format.js'
+import { Card } from '../Card/Card.js'
+import { Switch } from '../Switch.js'
+import {
+  Container,
+  ExpiryValue,
+  SettingItemButton,
+  SettingItemTitle,
+  SettingItemValue,
+  SettingsRow,
+  ToggleLabel,
+} from './LimitOrderSettings.style.js'
+
+/** Selectable order-validity durations, in seconds. */
+const DURATIONS = [3600, 86400, 604800, 2592000, 31536000]
+
+export const LimitOrderSettings: React.FC<BoxProps> = (props): JSX.Element => {
+  const { t, i18n } = useTranslation()
+  const [validUntil, partiallyFillable] = useFieldValues(
+    'validUntil',
+    'partiallyFillable'
+  )
+  const { setFieldValue } = useFieldActions()
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const open = Boolean(anchorEl)
+
+  const handleOpen = (event: MouseEvent<HTMLElement>): void => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = (): void => {
+    setAnchorEl(null)
+  }
+
+  const handleSelect = (duration: number): void => {
+    setFieldValue('validUntil', duration)
+    setAnchorEl(null)
+  }
+
+  const handlePartiallyFillableChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    setFieldValue('partiallyFillable', event.target.checked)
+  }
+
+  return (
+    <Container {...props}>
+      <Card>
+        <SettingItemButton
+          onClick={handleOpen}
+          disableRipple
+          aria-haspopup="menu"
+          aria-expanded={open}
+        >
+          <SettingItemTitle>{t('limitOrder.expiresIn')}</SettingItemTitle>
+          <ExpiryValue>
+            <SettingItemValue>
+              {formatDuration(validUntil, i18n.language, 'long')}
+            </SettingItemValue>
+            <KeyboardArrowDownIcon
+              sx={{ fontSize: 20, height: '18px', marginTop: '2px' }}
+            />
+          </ExpiryValue>
+        </SettingItemButton>
+      </Card>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        slotProps={{
+          paper: {
+            sx: (theme) => ({
+              border: `1px solid ${theme.vars.palette.grey[300]}`,
+              boxShadow: 'none',
+              ...theme.applyStyles('dark', {
+                borderColor: theme.vars.palette.grey[800],
+              }),
+            }),
+          },
+        }}
+      >
+        {DURATIONS.map((duration) => (
+          <MenuItem
+            key={duration}
+            onClick={() => handleSelect(duration)}
+            sx={(theme) => ({
+              justifyContent: 'space-between',
+              gap: 4,
+              fontSize: 14,
+              fontWeight: 700,
+              lineHeight: '18px',
+              color: theme.vars.palette.text.primary,
+            })}
+          >
+            {formatDuration(duration, i18n.language, 'long')}
+            {duration === validUntil ? (
+              <Check color="primary" fontSize="small" />
+            ) : null}
+          </MenuItem>
+        ))}
+      </Menu>
+      <Card>
+        <SettingsRow>
+          <ToggleLabel>{t('limitOrder.partiallyFillable')}</ToggleLabel>
+          <Switch
+            checked={partiallyFillable}
+            onChange={handlePartiallyFillableChange}
+            aria-label={t('limitOrder.partiallyFillable')}
+          />
+        </SettingsRow>
+      </Card>
+    </Container>
+  )
+}

package/src/components/LimitPriceCard/LimitPriceCard.style.tsx

@@ -0,0 +1,103 @@
+import { Box, Button, ButtonBase, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+/**
+ * Quick-set preset pill. Mirrors the percentage chips' pill look but is always
+ * visible (no reveal-on-hover), since presets are the card's primary control.
+ */
+export const PriceChip: React.FC<React.ComponentProps<typeof Button>> = styled(
+  Button
+)(({ theme }) => ({
+  minWidth: 0,
+  padding: theme.spacing(0.5, 1.5),
+  fontSize: 12,
+  fontWeight: 700,
+  lineHeight: 1.3334,
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  color: theme.vars.palette.text.primary,
+  transition: 'background-color 200ms ease',
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+  },
+}))
+
+/**
+ * Editable variant of the preset pill: looks identical to {@link PriceChip} but
+ * wraps an inline input so the user can type an arbitrary percentage premium
+ * (`+__%`) instead of picking a fixed preset.
+ */
+export const EditablePriceChip: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    minWidth: 0,
+    padding: theme.spacing(0.5, 1.5),
+    borderRadius: theme.vars.shape.borderRadius,
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 1.3334,
+    color: theme.vars.palette.text.primary,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    transition: 'background-color 200ms ease',
+    cursor: 'text',
+    '&:hover, &:focus-within': {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+    },
+    '&[aria-disabled="true"]': {
+      opacity: 0.5,
+      pointerEvents: 'none',
+    },
+  }))
+
+/** Bare input inside {@link EditablePriceChip}; inherits the pill's typography. */
+export const PriceChipInput: React.FC<React.ComponentProps<'input'>> = styled(
+  'input'
+)(({ theme }) => ({
+  appearance: 'none',
+  border: 'none',
+  outline: 'none',
+  background: 'transparent',
+  padding: 0,
+  margin: 0,
+  font: 'inherit',
+  color: 'inherit',
+  textAlign: 'right',
+  minWidth: '1ch',
+  '&::placeholder': {
+    color: theme.vars.palette.text.secondary,
+    opacity: 1,
+  },
+}))
+
+export const UnitSymbol: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: 1.4,
+    whiteSpace: 'nowrap',
+    color: theme.vars.palette.text.primary,
+  }))
+
+/**
+ * Invert affordance anchored to the far right of the lead row. Styled as a
+ * pill to mirror the percentage chips, but always visible (no reveal-on-hover).
+ */
+export const InvertChip: React.FC<React.ComponentProps<typeof ButtonBase>> =
+  styled(ButtonBase)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing(0.5),
+    minWidth: 0,
+    padding: theme.spacing(0.5, 1.5),
+    borderRadius: '9999px',
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 1.3334,
+    color: theme.vars.palette.text.primary,
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+    transition: 'background-color 200ms ease',
+    '&:hover': {
+      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+    },
+  }))

package/src/components/LimitPriceCard/LimitPriceCard.tsx

@@ -0,0 +1,153 @@
+import SwapHorizIcon from '@mui/icons-material/SwapHoriz'
+import type { CardProps } from '@mui/material'
+import { Skeleton } from '@mui/material'
+import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'
+import { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useToken } from '../../hooks/useToken.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { formatInputAmount } from '../../utils/format.js'
+import { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'
+import {
+  AmountCard,
+  amountHeight,
+  CardBodyRow,
+  CardHeaderRow,
+  LargeInput,
+} from '../AmountInputCard/AmountInputCard.style.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { InvertChip } from './LimitPriceCard.style.js'
+import { LimitPricePresets } from './LimitPricePresets.js'
+
+const cleanDisplay = (value: string): string =>
+  value ? formatInputAmount(value, 8) : ''
+
+export const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {
+  const { t } = useTranslation()
+  const isEditingRef = useRef(false)
+  const [inputValue, setInputValue] = useState('')
+
+  const [
+    fromChainId,
+    fromTokenAddress,
+    toChainId,
+    toTokenAddress,
+    priceInverted,
+  ] = useFieldValues(
+    FormKeyHelper.getChainKey('from'),
+    FormKeyHelper.getTokenKey('from'),
+    FormKeyHelper.getChainKey('to'),
+    FormKeyHelper.getTokenKey('to'),
+    'priceInverted'
+  )
+  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)
+  const { token: toToken } = useToken(toChainId, toTokenAddress)
+
+  const { isFetching } = useRoutes()
+
+  // limitPrice is derived from the from/to amount fields, not stored.
+  const { limitPrice, setLimitPrice } = useLinkedLimitFields()
+  const { setFieldValue } = useFieldActions()
+
+  const hasTokens = Boolean(fromToken && toToken)
+  const showSkeleton = isFetching && !limitPrice
+  const leadToken = priceInverted ? toToken : fromToken
+  const unitToken = priceInverted ? fromToken : toToken
+
+  const marketCanonical = useLimitMarketRate()
+
+  // Canonical price is orientation-independent; flip only for display.
+  const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body
+  useEffect(() => {
+    setFieldValue('toAmount', '', { isDirty: false, isTouched: false })
+    setFieldValue('selectedRouteId', undefined)
+  }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])
+
+  // Keep the input in sync with derived/preset/invert updates, but never yank
+  // the value out from under an actively-typing user.
+  useEffect(() => {
+    if (!isEditingRef.current) {
+      setInputValue(cleanDisplay(displayPrice))
+    }
+  }, [displayPrice])
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
+    isEditingRef.current = true
+    const formatted = formatInputAmount(event.target.value, 18, true)
+    setInputValue(formatted)
+    const numeric = Number(formatted)
+    if (!formatted || Number.isNaN(numeric) || numeric <= 0) {
+      setLimitPrice('')
+      return
+    }
+    // Canonical price is orientation-independent; un-flip the displayed value.
+    const canonical = priceInverted ? 1 / numeric : numeric
+    setLimitPrice(String(canonical))
+  }
+
+  const handleBlur = (): void => {
+    isEditingRef.current = false
+    setInputValue(cleanDisplay(displayPrice))
+  }
+
+  const handleInvert = (): void => {
+    isEditingRef.current = false
+    setFieldValue('priceInverted', !priceInverted)
+  }
+
+  // Apply a percentage offset to the canonical market rate (0 = at market).
+  const handlePreset = (pct: number): void => {
+    if (marketCanonical === undefined) {
+      return
+    }
+    isEditingRef.current = false
+    setLimitPrice(applyPriceOffset(String(marketCanonical), pct))
+  }
+
+  const label = hasTokens
+    ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })
+    : t('limitOrder.price')
+
+  return (
+    <AmountCard {...props} mask={false}>
+      <CardHeaderRow>
+        <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>
+        {hasTokens ? (
+          <InvertChip onClick={handleInvert} aria-label="invert price">
+            {unitToken?.symbol}
+            <SwapHorizIcon sx={{ fontSize: 16 }} />
+          </InvertChip>
+        ) : null}
+      </CardHeaderRow>
+      <CardBodyRow>
+        {showSkeleton ? (
+          <Skeleton variant="rounded" height={amountHeight} sx={{ flex: 1 }} />
+        ) : (
+          <LargeInput
+            size="small"
+            autoComplete="off"
+            placeholder="0"
+            inputProps={{ inputMode: 'decimal' }}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={inputValue}
+            name="limitPrice"
+            disabled={!hasTokens}
+          />
+        )}
+      </CardBodyRow>
+      <LimitPricePresets
+        onSelect={handlePreset}
+        disabled={!hasTokens || marketCanonical === undefined}
+      />
+    </AmountCard>
+  )
+}