@lifi/widget 4.1.0 → 4.2.0

package/src/components/AmountInputCard/ReceiveAmountCard.tsx

@@ -0,0 +1,219 @@
+import type { Route } from '@lifi/sdk'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import SwapVertIcon from '@mui/icons-material/SwapVert'
+import type { CardProps } from '@mui/material'
+import { Box, Skeleton, Tooltip } from '@mui/material'
+import { type JSX, type ReactNode, useLayoutEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRoutes } from '../../hooks/useRoutes.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { getPriceImpact } from '../../utils/getPriceImpact.js'
+import { fitInputText } from '../../utils/input.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
+import { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'
+import {
+  AmountCard,
+  AmountDisplay,
+  amountHeight,
+  CardBodyRow,
+  CardFooterRow,
+  CardHeaderRow,
+  FooterText,
+  footerFontSize,
+  maxInputFontSize,
+  minInputFontSize,
+  ToggleButton,
+} from './AmountInputCard.style.js'
+
+const formType = 'to' as const
+
+type ReceiveCardProps = CardProps & { mask?: boolean }
+
+const ReceiveAmountCardLayout = ({
+  cardProps,
+  title,
+  headerEnd,
+  amount,
+  footerStart,
+  footerEnd,
+}: {
+  cardProps: ReceiveCardProps
+  title: string
+  headerEnd?: ReactNode
+  amount: ReactNode
+  footerStart: ReactNode
+  footerEnd?: ReactNode
+}): JSX.Element => (
+  <AmountCard {...cardProps} formType={formType}>
+    <CardHeaderRow>
+      <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>
+      {headerEnd}
+    </CardHeaderRow>
+    <CardBodyRow>
+      {amount}
+      <TokenPillButton formType={formType} />
+    </CardBodyRow>
+    <CardFooterRow>
+      {footerStart}
+      {footerEnd}
+    </CardFooterRow>
+  </AmountCard>
+)
+
+const PriceImpactBadge = ({
+  priceImpact,
+}: {
+  priceImpact: number | undefined
+}): JSX.Element | null => {
+  const { t } = useTranslation()
+  if (priceImpact === undefined) {
+    return null
+  }
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+      <FooterText>
+        {t('format.percent', { value: priceImpact, usePlusSign: true })}
+      </FooterText>
+      <Tooltip title={t('tooltip.priceImpact')}>
+        <InfoOutlinedIcon
+          sx={{ fontSize: 16, color: 'text.secondary', cursor: 'help' }}
+        />
+      </Tooltip>
+    </Box>
+  )
+}
+
+const useReceivePriceImpact = (
+  route: Route | undefined
+): number | undefined => {
+  const { hiddenUI } = useWidgetConfig()
+  if (!route || hiddenUI?.routeCardPriceImpact) {
+    return undefined
+  }
+  return getPriceImpact({
+    fromAmount: BigInt(route.fromAmount),
+    toAmount: BigInt(route.toAmount),
+    fromToken: route.fromToken,
+    toToken: route.toToken,
+  })
+}
+
+/**
+ * The receive amount is a read-only quote derived from the best route, with a
+ * fiat/token toggle and price impact in the footer. In limit mode the amount is
+ * still the quote for the current limit (the limit price drives it via the
+ * dedicated price card); it is never edited here, and the header shows the
+ * refetch progress indicator with a "Buy" title.
+ */
+export const ReceiveAmountCard: React.FC<ReceiveCardProps> = (
+  props
+): JSX.Element => {
+  const { t } = useTranslation()
+  const amountRef = useRef<HTMLSpanElement>(null)
+  const { inputMode, toggleInputMode } = useInputModeStore()
+  const showFiat = inputMode[formType] === 'price'
+  const { hiddenUI, mode } = useWidgetConfig()
+  const isLimit = mode === 'limit'
+
+  const [selectedRouteId] = useFieldValues('selectedRouteId')
+  const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } =
+    useRoutes()
+  // Reflect the route the user selected in the routes list (falling back to the
+  // best route), so the buy amount matches the highlighted provider card.
+  const route = routes?.find((r) => r.id === selectedRouteId) ?? routes?.[0]
+  const priceImpact = useReceivePriceImpact(route)
+  const showPriceImpact = !hiddenUI?.routeCardPriceImpact
+
+  const receiveAmount = route?.toAmount
+    ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals)
+    : undefined
+  // Only show skeletons on the initial fetch.
+  const showSkeleton = isFetching && !receiveAmount
+
+  const fiatValue =
+    receiveAmount && route?.toToken.priceUSD
+      ? formatTokenPrice(receiveAmount, route.toToken.priceUSD)
+      : 0
+  const canToggle = !!receiveAmount && !!route?.toToken.priceUSD
+
+  const mainDisplay = showFiat
+    ? t('format.currency', { value: fiatValue })
+    : t('format.tokenAmount', { value: receiveAmount || '0' })
+  const footerDisplay = showFiat
+    ? t('format.tokenAmount', { value: receiveAmount || '0' })
+    : t('format.currency', { value: fiatValue })
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change
+  useLayoutEffect(() => {
+    if (amountRef.current) {
+      fitInputText(maxInputFontSize, minInputFontSize, amountRef.current)
+    }
+  }, [mainDisplay])
+
+  return (
+    <ReceiveAmountCardLayout
+      cardProps={props}
+      title={isLimit ? t('header.buy') : t('header.receive')}
+      headerEnd={
+        isLimit && (isFetching || routes?.length) ? (
+          <ProgressToNextUpdate
+            updatedAt={dataUpdatedAt || Date.now()}
+            timeToUpdate={refetchTime}
+            isLoading={isFetching}
+            onClick={() => refetch()}
+            sx={{ padding: 0 }}
+          />
+        ) : undefined
+      }
+      amount={
+        showSkeleton ? (
+          <Skeleton variant="rounded" height={amountHeight} sx={{ flex: 1 }} />
+        ) : (
+          <AmountDisplay
+            ref={amountRef}
+            sx={{ color: 'text.primary', opacity: receiveAmount ? 1 : 0.5 }}
+          >
+            {mainDisplay}
+          </AmountDisplay>
+        )
+      }
+      footerStart={
+        showSkeleton ? (
+          <Skeleton
+            variant="text"
+            width={72}
+            sx={{ fontSize: footerFontSize }}
+          />
+        ) : (
+          <ToggleButton
+            clickable={canToggle}
+            onClick={canToggle ? () => toggleInputMode(formType) : undefined}
+            aria-label={canToggle ? 'Toggle fiat value' : undefined}
+          >
+            <FooterText>{footerDisplay}</FooterText>
+            {canToggle ? (
+              <SwapVertIcon sx={{ fontSize: 14, color: 'text.secondary' }} />
+            ) : null}
+          </ToggleButton>
+        )
+      }
+      footerEnd={
+        showSkeleton ? (
+          showPriceImpact ? (
+            <Skeleton
+              variant="text"
+              width={56}
+              sx={{ fontSize: footerFontSize }}
+            />
+          ) : null
+        ) : (
+          <PriceImpactBadge priceImpact={priceImpact} />
+        )
+      }
+    />
+  )
+}

package/src/components/AmountInputCard/SendAmountCard.tsx

@@ -0,0 +1,179 @@
+import type { CardProps } from '@mui/material'
+import type { ChangeEvent, JSX } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'
+import { useToken } from '../../hooks/useToken.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
+import {
+  formatInputAmount,
+  formatTokenPrice,
+  priceToTokenAmount,
+  usdDecimals,
+} from '../../utils/format.js'
+import { fitInputText } from '../../utils/input.js'
+import { CardTitle } from '../Card/CardTitle.js'
+import { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'
+import {
+  AmountCard,
+  CardBodyRow,
+  CardFooterRow,
+  CardHeaderRow,
+  LargeInput,
+  maxInputFontSize,
+  minInputFontSize,
+} from './AmountInputCard.style.js'
+import { BalanceDisplay } from './BalanceDisplay.js'
+import { FiatValueToggle } from './FiatValueToggle.js'
+import { PercentageChips } from './PercentageChips.js'
+
+export const SendAmountCard: React.FC<CardProps & { mask?: boolean }> = (
+  props
+): JSX.Element => {
+  const { t } = useTranslation()
+  const { disabledUI, mode, modeOptions } = useWidgetConfig()
+  const ref = useRef<HTMLInputElement>(null)
+  const isEditingRef = useRef(false)
+  const [formattedPriceInput, setFormattedPriceInput] = useState('')
+
+  const formType = 'from' as const
+
+  const [chainId, tokenAddress, value] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    FormKeyHelper.getTokenKey(formType),
+    FormKeyHelper.getAmountKey(formType)
+  )
+
+  const { token } = useToken(chainId, tokenAddress)
+  const { setFieldValue } = useFieldActions()
+  const { inputMode } = useInputModeStore()
+  const { setSendAmount } = useLinkedLimitFields()
+  const currentInputMode = inputMode[formType]
+  const disabled = disabledUI?.fromAmount
+
+  // In limit mode the send amount drives the linked receive amount; otherwise
+  // it is a plain form-field write.
+  const applyFromAmount = (value: string): void => {
+    if (mode === 'limit') {
+      setSendAmount(value)
+    } else {
+      setFieldValue('fromAmount', value, { isDirty: true, isTouched: true })
+    }
+  }
+
+  const title =
+    mode === 'limit'
+      ? t('header.sell')
+      : mode === 'custom' && modeOptions?.custom?.type === 'deposit'
+        ? t('header.deposit')
+        : t('header.send')
+
+  let displayValue: string
+  if (isEditingRef.current) {
+    if (currentInputMode === 'price') {
+      displayValue = formattedPriceInput
+    } else {
+      displayValue = value as string
+    }
+  } else {
+    if (currentInputMode === 'price') {
+      const priceValue = formatTokenPrice(value as string, token?.priceUSD)
+      displayValue = formatInputAmount(
+        priceValue.toFixed(usdDecimals),
+        usdDecimals
+      )
+    } else {
+      displayValue = value as string
+    }
+  }
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
+    const { value: inputValue } = event.target
+    isEditingRef.current = true
+
+    if (currentInputMode === 'price') {
+      const cleanInputValue = inputValue.replace('$', '')
+      const formattedValue = formatInputAmount(
+        cleanInputValue,
+        usdDecimals,
+        true
+      )
+      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)
+      setFormattedPriceInput(formattedValue)
+      applyFromAmount(tokenValue)
+    } else {
+      const formattedValue = formatInputAmount(
+        inputValue,
+        token?.decimals,
+        true
+      )
+      applyFromAmount(formattedValue)
+    }
+  }
+
+  const handleBlur = (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
+    const { value: inputValue } = event.target
+    isEditingRef.current = false
+
+    if (currentInputMode === 'price') {
+      const cleanInputValue = inputValue.replace('$', '')
+      const formattedValue = formatInputAmount(cleanInputValue, usdDecimals)
+      const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)
+      const formattedAmount = formatInputAmount(tokenValue, token?.decimals)
+      applyFromAmount(formattedAmount)
+    } else {
+      const formattedValue = formatInputAmount(inputValue, token?.decimals)
+      applyFromAmount(formattedValue)
+    }
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: effect must run on value change
+  useLayoutEffect(() => {
+    if (ref.current) {
+      fitInputText(maxInputFontSize, minInputFontSize, ref.current)
+    }
+  }, [displayValue])
+
+  return (
+    <AmountCard {...props} formType={formType}>
+      <CardHeaderRow>
+        <CardTitle sx={{ padding: 0 }}>{title}</CardTitle>
+        <PercentageChips formType={formType} />
+      </CardHeaderRow>
+      <CardBodyRow>
+        <LargeInput
+          inputRef={ref}
+          size="small"
+          autoComplete="off"
+          placeholder={currentInputMode === 'price' ? '$0' : '0'}
+          inputProps={{ inputMode: 'decimal' }}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={
+            currentInputMode === 'price'
+              ? displayValue
+                ? `$${displayValue}`
+                : ''
+              : displayValue
+          }
+          name="fromAmount"
+          disabled={disabled}
+          required
+        />
+        <TokenPillButton formType={formType} />
+      </CardBodyRow>
+      <CardFooterRow>
+        <FiatValueToggle formType={formType} />
+        <BalanceDisplay formType={formType} />
+      </CardFooterRow>
+    </AmountCard>
+  )
+}

package/src/components/Avatar/Avatar.tsx

@@ -8,15 +8,20 @@ import { SmallAvatarSkeleton } from './SmallAvatar.js'
 export const AvatarBadgedDefault: React.FC<{
   sx?: SxProps<Theme>
   chain?: ExtendedChain
-}> = ({ sx, chain }) => {
+  avatarSize?: number
+  badgeSize?: number
+}> = ({ sx, chain, avatarSize, badgeSize }) => {
   return (
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<ChainBadgeContent chain={chain} />}
+      badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}
       sx={sx}
     >
-      <AvatarDefault />
+      <AvatarDefault
+        badgeSize={badgeSize}
+        sx={avatarSize ? { width: avatarSize, height: avatarSize } : undefined}
+      />
     </Badge>
   )
 }

package/src/components/Header/HeaderNavigationTabs.tsx

@@ -1,6 +1,9 @@
-import type { JSX } from 'react'
+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 => {
@@ -10,6 +13,20 @@ export const HeaderNavigationTabs = (): JSX.Element | null => {
     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
@@ -19,7 +36,7 @@ export const HeaderNavigationTabs = (): JSX.Element | null => {
     <HeaderTabs
       tabs={tabs.map((key) => ({ key, label: getLabel(key) }))}
       value={activeTab}
-      onChange={(key) => setActiveTab(key)}
+      onChange={setActiveTab}
     />
   )
 }

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