@lifi/widget 4.0.0 → 4.2.0

package/src/components/LimitPriceCard/LimitPricePresets.tsx

@@ -0,0 +1,139 @@
+import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'
+import {
+  EditablePriceChip,
+  PriceChip,
+  PriceChipInput,
+} from './LimitPriceCard.style.js'
+
+/** Quick-set presets, as percentage offsets from market (0 = at market). */
+const PRESETS = [0, 1, 5, 10] as const
+
+interface LimitPricePresetsProps {
+  /** Apply a percentage offset from the market rate (0 = at market). */
+  onSelect: (pct: number) => void
+  /** Disables the free-form custom pill (no tokens / no market rate yet). */
+  disabled: boolean
+}
+
+/**
+ * Row of quick-set price controls: fixed percentage presets plus a free-form
+ * "custom %" pill that collapses to a button until engaged. Owns its own
+ * custom-input state so the card only deals with applying an offset.
+ */
+export const LimitPricePresets = ({
+  onSelect,
+  disabled,
+}: LimitPricePresetsProps): JSX.Element => {
+  const { t } = useTranslation()
+  const customInputRef = useRef<HTMLInputElement>(null)
+  const [customPct, setCustomPct] = useState('')
+  const [customFocused, setCustomFocused] = useState(false)
+
+  // The custom pill renders as a plain button until engaged; when it flips into
+  // edit mode (focused), move the caret into the freshly-mounted input.
+  useEffect(() => {
+    if (customFocused) {
+      customInputRef.current?.focus()
+    }
+  }, [customFocused])
+
+  // Picking a fixed preset clears any custom value so the custom pill collapses
+  // back to its "Custom" button instead of showing a stale, no-longer-applied %.
+  const handlePresetClick = (pct: number): void => {
+    setCustomPct('')
+    setCustomFocused(false)
+    onSelect(pct)
+  }
+
+  // Free-form offset pill: apply the typed percentage live so the price input
+  // tracks the offset as the user types. Accepts an optional leading +/- sign
+  // so the price can be set above (premium) or below (discount) market.
+  const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    const raw = event.target.value
+    if (raw && !/^[+-]?\d*\.?\d*$/.test(raw)) {
+      return
+    }
+    setCustomPct(raw)
+    const numeric = Number(raw)
+    // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps
+    // the signs/dot to NaN, and '' to 0, so guard both.
+    if (raw === '' || Number.isNaN(numeric)) {
+      return
+    }
+    onSelect(numeric)
+  }
+
+  const handleCustomKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ): void => {
+    if (event.key === 'Enter') {
+      event.currentTarget.blur()
+    }
+  }
+
+  // On blur, surface an explicit sign: a bare positive entry like "10" reads as
+  // "+10" so the direction (above/below market) is unambiguous once collapsed.
+  const handleCustomBlur = (): void => {
+    setCustomFocused(false)
+    setCustomPct((prev) => {
+      if (!prev || prev.startsWith('+') || prev.startsWith('-')) {
+        return prev
+      }
+      return Number.isNaN(Number(prev)) ? prev : `+${prev}`
+    })
+  }
+
+  // Collapse to a plain "Custom" label only while empty and unfocused; once the
+  // user engages (focus) or has typed a value, reveal the `+__%` affixes.
+  const showCustomLabel = customPct === '' && !customFocused
+
+  return (
+    <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>
+      {PRESETS.map((pct) => (
+        <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>
+          {pct === 0 ? t('limitOrder.market') : `+${pct}%`}
+        </PriceChip>
+      ))}
+      {showCustomLabel ? (
+        <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>
+          {t('limitOrder.custom')}
+        </PriceChip>
+      ) : (
+        <EditablePriceChip
+          aria-disabled={disabled}
+          onClick={(event) => {
+            // `aria-disabled` only announces the state; enforce it so a
+            // programmatic click can't apply an offset while disabled.
+            if (disabled) {
+              return
+            }
+            const input = event.currentTarget.querySelector('input')
+            input?.focus()
+            const numeric = Number(customPct)
+            if (customPct && !Number.isNaN(numeric)) {
+              onSelect(numeric)
+            }
+          }}
+        >
+          <PriceChipInput
+            ref={customInputRef}
+            inputMode="decimal"
+            autoComplete="off"
+            placeholder="0"
+            aria-label={t('limitOrder.custom')}
+            value={customPct}
+            onChange={handleCustomChange}
+            onKeyDown={handleCustomKeyDown}
+            onFocus={() => setCustomFocused(true)}
+            onBlur={handleCustomBlur}
+            disabled={disabled}
+            style={{ width: `${Math.max(customPct.length, 1)}ch` }}
+          />
+          %
+        </EditablePriceChip>
+      )}
+    </ChipContainer>
+  )
+}

package/src/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -50,7 +50,10 @@ export const ReverseTokensButton = (): JSX.Element => {
   }
   return (
     <ReverseContainer>
-      <IconCard onClick={handleClick}>
+      <IconCard
+        data-testid="widget-reverse-tokens-button"
+        onClick={handleClick}
+      >
         <ArrowForward fontSize="inherit" />
       </IconCard>
     </ReverseContainer>

package/src/components/RouteCard/RouteProviderCard.tsx

@@ -0,0 +1,113 @@
+import type { Route } from '@lifi/sdk'
+import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'
+import { Box, Skeleton, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'
+import { SmallAvatar } from '../Avatar/SmallAvatar.js'
+import type { CardProps } from '../Card/Card.js'
+import { Card } from '../Card/Card.js'
+import { IconTypography } from '../IconTypography.js'
+
+interface RouteProviderCardProps {
+  route: Route
+  active?: boolean
+}
+
+export const RouteProviderCard: React.FC<
+  RouteProviderCardProps & Omit<CardProps, 'variant'>
+> = ({ route, active, onClick, ...other }) => {
+  const { t } = useTranslation()
+
+  const provider = route.steps[0]?.toolDetails
+  const { gasCostUSD } = getAccumulatedFeeCostsBreakdown(route)
+
+  return (
+    <Card
+      type={active ? 'selected' : 'default'}
+      selectionColor="secondary"
+      onClick={onClick}
+      sx={{ py: 1.5, px: 2, ...(onClick ? { cursor: 'pointer' } : {}) }}
+      {...other}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 1,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            minWidth: 0,
+          }}
+        >
+          <SmallAvatar src={provider?.logoURI} alt={provider?.name} size={20}>
+            {provider?.name?.[0]}
+          </SmallAvatar>
+          <Typography
+            noWrap
+            sx={{
+              fontSize: 14,
+              fontWeight: 600,
+              color: 'text.primary',
+            }}
+          >
+            {provider?.name}
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <IconTypography component="span" sx={{ mr: 0.5, fontSize: 16 }}>
+            <LocalGasStationRounded fontSize="inherit" />
+          </IconTypography>
+          <Typography
+            data-value={gasCostUSD}
+            sx={{
+              fontSize: 14,
+              color: 'text.primary',
+              fontWeight: 600,
+              lineHeight: 1,
+            }}
+          >
+            {!gasCostUSD
+              ? t('main.fees.free')
+              : t('format.currency', {
+                  value: gasCostUSD,
+                })}
+          </Typography>
+        </Box>
+      </Box>
+    </Card>
+  )
+}
+
+export const RouteProviderCardSkeleton: React.FC<Omit<CardProps, 'variant'>> = (
+  props
+) => {
+  return (
+    <Card sx={{ py: 1.5, px: 2 }} {...props}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 1,
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Skeleton variant="circular" width={20} height={20} />
+          <Skeleton variant="text" width={80} height={20} />
+        </Box>
+        <Skeleton variant="text" width={56} height={20} />
+      </Box>
+    </Card>
+  )
+}

package/src/components/Routes/LimitOrderRoutes.tsx

@@ -0,0 +1,64 @@
+import { Stack } from '@mui/material'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import type { CardProps } from '../Card/Card.js'
+import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
+import {
+  RouteProviderCard,
+  RouteProviderCardSkeleton,
+} from '../RouteCard/RouteProviderCard.js'
+
+export const LimitOrderRoutes: React.FC<CardProps> = (props) => {
+  const { routes, isLoading, isFetching, isFetched } = useRoutes()
+  const [toAddress, selectedRouteId] = useFieldValues(
+    'toAddress',
+    'selectedRouteId'
+  )
+  const { setFieldValue } = useFieldActions()
+  const { requiredToAddress } = useToAddressRequirements()
+
+  const currentRoute = routes?.[0]
+
+  if (!currentRoute && !isLoading && !isFetching && !isFetched) {
+    return null
+  }
+
+  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+  const allowInteraction = !toAddressUnsatisfied
+
+  const activeRouteId =
+    routes?.find((route) => route.id === selectedRouteId)?.id ??
+    currentRoute?.id
+
+  return (
+    <Stack
+      direction="column"
+      spacing={1}
+      sx={props.sx}
+      className={props.className}
+    >
+      {isLoading && !currentRoute ? (
+        Array.from({ length: 2 }).map((_, index) => (
+          <RouteProviderCardSkeleton key={index} />
+        ))
+      ) : !currentRoute ? (
+        <RouteNotFoundCard />
+      ) : (
+        routes?.map((route) => (
+          <RouteProviderCard
+            key={route.id}
+            route={route}
+            active={route.id === activeRouteId}
+            onClick={
+              allowInteraction
+                ? () => setFieldValue('selectedRouteId', route.id)
+                : undefined
+            }
+          />
+        ))
+      )}
+    </Stack>
+  )
+}

package/src/components/Routes/Routes.tsx

@@ -16,7 +16,7 @@ import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
 export const Routes: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { mode, modeOptions, showSingleRoute } = useWidgetConfig()
+  const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig()
   const {
     routes,
     isLoading,
@@ -51,7 +51,8 @@ export const Routes: React.FC<CardProps> = (props) => {
 
   return (
     <Card {...props}>
-      <CardTitle>{title}</CardTitle>
+      {/* The cards layout's Receive card already carries this header. */}
+      {defaultUI?.layout === 'cards' ? null : <CardTitle>{title}</CardTitle>}
       <ProgressToNextUpdate
         updatedAt={dataUpdatedAt || Date.now()}
         timeToUpdate={refetchTime}

package/src/components/SettingsPanel/SettingsPanel.style.tsx

@@ -0,0 +1,41 @@
+import { Box, ButtonBase, styled, Typography } from '@mui/material'
+import type React from 'react'
+
+export const SettingsPanelContainer: React.FC<
+  React.ComponentProps<typeof Box>
+> = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1),
+}))
+
+export const SettingsPanelButton: React.FC<
+  React.ComponentProps<typeof ButtonBase>
+> = styled(ButtonBase)(({ theme }) => ({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  padding: theme.spacing(2),
+  borderRadius: theme.vars.shape.borderRadius,
+}))
+
+export const SettingsPanelTitle: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  lineHeight: 1,
+  fontWeight: 700,
+  color: theme.vars.palette.text.primary,
+}))
+
+export const SettingsPanelValue: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  lineHeight: 1,
+  fontWeight: 500,
+  color: theme.vars.palette.text.secondary,
+  whiteSpace: 'nowrap',
+}))

package/src/components/SettingsPanel/SettingsPanel.tsx

@@ -0,0 +1,73 @@
+import type { BoxProps } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'
+import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
+import { useSettings } from '../../stores/settings/useSettings.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { Card } from '../Card/Card.js'
+import {
+  SettingsPanelButton,
+  SettingsPanelContainer,
+  SettingsPanelTitle,
+  SettingsPanelValue,
+} from './SettingsPanel.style.js'
+import {
+  bridgeSettingsPanelKeys,
+  type SettingsPanelKey,
+  swapSettingsPanelKeys,
+} from './utils.js'
+
+export const SettingsPanel: React.FC<BoxProps> = (props): JSX.Element => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const splitMode = useSplitMode()
+  const { slippage, routePriority } = useSettings(['slippage', 'routePriority'])
+  const [enabledBridges, totalBridges, enabledExchanges, totalExchanges] =
+    useSettingsStore((state) => [
+      Object.values(state._enabledBridges).filter(Boolean).length,
+      Object.values(state._enabledBridges).length,
+      Object.values(state._enabledExchanges).filter(Boolean).length,
+      Object.values(state._enabledExchanges).length,
+    ])
+
+  const rows =
+    splitMode === 'bridge' ? bridgeSettingsPanelKeys : swapSettingsPanelKeys
+
+  const labelByKey: Record<SettingsPanelKey, string> = {
+    routePriority: t('settings.routePriority'),
+    exchanges: t('settings.enabledExchanges'),
+    bridges: t('settings.enabledBridges'),
+    slippage: t('settings.slippage'),
+  }
+
+  const valueByKey: Record<SettingsPanelKey, string> = {
+    routePriority:
+      routePriority === 'FASTEST'
+        ? t('settings.routePriorityOptions.fastest.title')
+        : t('settings.routePriorityOptions.cheapest.title'),
+    exchanges: `${enabledExchanges}/${totalExchanges}`,
+    bridges: `${enabledBridges}/${totalBridges}`,
+    slippage: slippage ? `${slippage}%` : t('button.auto'),
+  }
+
+  const handleClick = (key: SettingsPanelKey) => {
+    navigate({
+      to: `/${navigationRoutes.settings}/${navigationRoutes[key]}`,
+    })
+  }
+
+  return (
+    <SettingsPanelContainer {...props}>
+      {rows.map((key) => (
+        <Card key={key}>
+          <SettingsPanelButton onClick={() => handleClick(key)} disableRipple>
+            <SettingsPanelTitle>{labelByKey[key]}</SettingsPanelTitle>
+            <SettingsPanelValue>{valueByKey[key]}</SettingsPanelValue>
+          </SettingsPanelButton>
+        </Card>
+      ))}
+    </SettingsPanelContainer>
+  )
+}

package/src/components/SettingsPanel/utils.ts

@@ -0,0 +1,27 @@
+import type { NavigationTabKey } from '../../types/widget.js'
+
+export type SettingsPanelKey =
+  | 'routePriority'
+  | 'exchanges'
+  | 'bridges'
+  | 'slippage'
+
+/** Navigation tabs that surface the settings panel on the main page. */
+export const advancedNavigationTabKeys: NavigationTabKey[] = [
+  'swap-advanced',
+  'bridge-advanced',
+]
+
+// Keys are ordered to match the settings page layout.
+// Swap is same-chain, so route priority and bridges are not relevant.
+export const swapSettingsPanelKeys: SettingsPanelKey[] = [
+  'slippage',
+  'exchanges',
+]
+
+export const bridgeSettingsPanelKeys: SettingsPanelKey[] = [
+  'routePriority',
+  'slippage',
+  'bridges',
+  'exchanges',
+]

package/src/components/Skeleton/WidgetSkeleton.tsx

@@ -89,7 +89,7 @@ export const WidgetSkeleton = ({
       colorSchemeStorageKey="li.fi-widget-color-scheme"
       disableTransitionOnChange
     >
-      <AppExpandedContainer>
+      <AppExpandedContainer data-testid="widget-skeleton-container">
         <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>
           <SkeletonHeaderContainer>
             {!hiddenUI?.walletMenu ? (

package/src/components/SwapButton/SwapButton.style.tsx

@@ -0,0 +1,28 @@
+import { Box, styled } from '@mui/material'
+import type React from 'react'
+import { Card } from '../Card/Card.js'
+
+// Sits just above MUI's appBar layer (1100) so the swap icon stays on top of the
+// two overlapping amount cards it bridges.
+const swapButtonZIndex = 1110
+
+export const SwapIconCard: React.FC<React.ComponentProps<typeof Card>> = styled(
+  Card
+)(({ theme }) => ({
+  height: 32,
+  width: 32,
+  fontSize: 16,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: theme.vars.shape.borderRadiusTertiary,
+  zIndex: swapButtonZIndex,
+}))
+
+export const SwapButtonContainer: React.FC<React.ComponentProps<typeof Box>> =
+  styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: theme.spacing(-1.5),
+  }))

package/src/components/SwapButton/SwapButton.tsx

@@ -0,0 +1,71 @@
+import ArrowDownward from '@mui/icons-material/ArrowDownward'
+import type { BoxProps } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
+import { useToAddressReset } from '../../hooks/useToAddressReset.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { SwapButtonContainer, SwapIconCard } from './SwapButton.style.js'
+
+export const SwapButton: React.FC<BoxProps> = ({
+  sx,
+  ...props
+}): JSX.Element => {
+  const { t } = useTranslation()
+  const { mode } = useWidgetConfig()
+  const { setFieldValue, getFieldValues } = useFieldActions()
+  const { getChainById } = useAvailableChains()
+  const { tryResetToAddress } = useToAddressReset()
+  const autoPopulateToAddress = useToAddressAutoPopulate()
+
+  const handleClick = (): void => {
+    const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] =
+      getFieldValues(
+        'fromChain',
+        'fromToken',
+        'toChain',
+        'toToken',
+        'toAddress',
+        'toAmount'
+      )
+    const newFromAmount =
+      mode === 'limit' && toAmount ? (toAmount as string) : ''
+    setFieldValue('fromAmount', newFromAmount, { isTouched: true })
+    setFieldValue('fromChain', toChainId, { isTouched: true })
+    setFieldValue('fromToken', toToken, { isTouched: true })
+    setFieldValue('toChain', fromChainId, { isTouched: true })
+    setFieldValue('toToken', fromToken, { isTouched: true })
+
+    const autoPopulatedToAddress = autoPopulateToAddress({
+      formType: 'from',
+      selectedToAddress: toAddress,
+      selectedChainId: toChainId,
+      selectedOppositeChainId: fromChainId,
+      selectedOppositeTokenAddress: fromToken,
+    })
+
+    if (autoPopulatedToAddress) {
+      return
+    }
+
+    const toChain = getChainById(fromChainId)
+    if (toChain) {
+      tryResetToAddress(toChain)
+    }
+  }
+
+  return (
+    <SwapButtonContainer sx={sx} {...props}>
+      <SwapIconCard
+        component="button"
+        onClick={handleClick}
+        aria-label={t('button.swap')}
+        data-testid="widget-swap-tokens-button"
+      >
+        <ArrowDownward fontSize="inherit" />
+      </SwapIconCard>
+    </SwapButtonContainer>
+  )
+}

package/src/components/Tabs/NavigationTabs.tsx

@@ -40,6 +40,9 @@ export const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(
     slot: 'root',
   }
 )(({ theme }) => ({
+  flex: 'none',
+  whiteSpace: 'nowrap',
+  minWidth: 'auto',
   minHeight: theme.spacing(5),
   maxHeight: theme.spacing(5),
 }))

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -1,13 +1,15 @@
-import type React from 'react'
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import type { JSX, Ref } from 'react'
+import { useImperativeHandle, useRef, useState } from 'react'
 import { BottomSheet } from '../BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../BottomSheet/types.js'
 import { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'
 import type { TokenDetailsSheetBase } from './types.js'
 
-export const TokenDetailsSheet: React.ForwardRefExoticComponent<
-  React.RefAttributes<TokenDetailsSheetBase>
-> = forwardRef<TokenDetailsSheetBase>((_, ref) => {
+export const TokenDetailsSheet = ({
+  ref,
+}: {
+  ref?: Ref<TokenDetailsSheetBase>
+}): JSX.Element => {
   const bottomSheetRef = useRef<BottomSheetBase>(null)
   const [tokenAddress, setTokenAddress] = useState<string | undefined>(
     undefined
@@ -35,11 +37,11 @@ export const TokenDetailsSheet: React.ForwardRefExoticComponent<
   return (
     <BottomSheet ref={bottomSheetRef} keepMounted>
       <TokenDetailsSheetContent
-        ref={ref}
+        onClose={() => bottomSheetRef.current?.close()}
         tokenAddress={tokenAddress}
         withoutContractAddress={withoutContractAddress}
         chainId={chainId}
       />
     </BottomSheet>
   )
-})
+}