@lifi/widget 4.1.0 → 4.3.0

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>
+  )
+}

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/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>
+  )
+}