@lifi/widget 4.0.0 → 4.2.0

package/src/components/AmountInputCard/PercentageChips.tsx

@@ -0,0 +1,100 @@
+import { formatUnits } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+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'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import type { DisabledUIConfig } from '../../types/widget.js'
+import { Chip, ChipContainer } from './PercentageChips.style.js'
+
+export const PercentageChips: React.NamedExoticComponent<FormTypeProps> = memo(
+  ({ formType }: FormTypeProps): JSX.Element | null => {
+    const { t } = useTranslation()
+    const { getChainById } = useAvailableChains()
+    const { setFieldValue } = useFieldActions()
+    const { disabledUI, mode } = useWidgetConfig()
+    const { setSendAmount } = useLinkedLimitFields()
+
+    const amountKey = FormKeyHelper.getAmountKey(formType)
+    const isDisabled = !!disabledUI?.[amountKey as keyof DisabledUIConfig]
+
+    const [chainId, tokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
+
+    const chain = getChainById(chainId)
+    const { account } = useAccount({ chainType: chain?.chainType })
+
+    const { data } = useGasRecommendation(chainId)
+    const { token } = useTokenAddressBalance(chainId, tokenAddress)
+
+    const getMaxAmount = (): bigint => {
+      if (!token?.amount) {
+        return 0n
+      }
+      let maxAmount = token.amount
+      if (chain?.nativeToken.address === tokenAddress && data?.recommended) {
+        const recommendedAmount = BigInt(data.recommended.amount)
+        if (token.amount > recommendedAmount) {
+          maxAmount = token.amount - recommendedAmount
+        }
+      }
+      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
+        applyAmount(formatUnits(percentageAmount, token.decimals))
+      }
+    }
+
+    const handleMax = (): void => {
+      const maxAmount = getMaxAmount()
+      if (maxAmount && token?.decimals) {
+        applyAmount(formatUnits(maxAmount, token.decimals))
+      }
+    }
+
+    if (formType !== 'from' || isDisabled || !token || !account?.isConnected) {
+      return null
+    }
+
+    return (
+      <ChipContainer>
+        <Chip data-delay="0" onClick={() => handlePercentage(25)}>
+          25%
+        </Chip>
+        <Chip data-delay="1" onClick={() => handlePercentage(50)}>
+          50%
+        </Chip>
+        <Chip data-delay="2" onClick={() => handlePercentage(75)}>
+          75%
+        </Chip>
+        <Chip data-delay="3" onClick={handleMax}>
+          {t('button.max')}
+        </Chip>
+      </ChipContainer>
+    )
+  }
+)

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/BaseTransactionButton/BaseTransactionButton.tsx

@@ -64,6 +64,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
       loadingPosition="center"
       fullWidth
       sx={sx}
+      data-testid="widget-transaction-button"
     >
       {getButtonText()}
     </Button>

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,7 +1,6 @@
 import { Drawer } from '@mui/material'
-import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+import type { JSX, Ref } from 'react'
 import {
-  forwardRef,
   startTransition,
   useCallback,
   useImperativeHandle,
@@ -12,56 +11,61 @@ import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js
 import { modalProps, slotProps } from '../Dialog/Dialog.js'
 import type { BottomSheetBase, BottomSheetProps } from './types.js'
 
-export const BottomSheet: ForwardRefExoticComponent<
-  Omit<BottomSheetProps, 'ref'> & RefAttributes<BottomSheetBase>
-> = forwardRef<BottomSheetBase, BottomSheetProps>(
-  ({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
-    const getContainer = useGetScrollableContainer()
-    const openRef = useRef(open)
-    const [drawerOpen, setDrawerOpen] = useState(open)
-    const [isInert, setIsInert] = useState(!open)
+export const BottomSheet = ({
+  elementRef,
+  children,
+  open,
+  onClose,
+  keepMounted = false,
+  ref,
+}: Omit<BottomSheetProps, 'ref'> & {
+  ref?: Ref<BottomSheetBase>
+}): JSX.Element => {
+  const getContainer = useGetScrollableContainer()
+  const openRef = useRef(open)
+  const [drawerOpen, setDrawerOpen] = useState(open)
+  const [isInert, setIsInert] = useState(!open)
 
-    const close = useCallback(() => {
-      // Set inert first to prevent focus issues
-      setIsInert(true)
-      // Push the state update to the next event loop tick
-      // to ensure the inert is applied to before the drawer is closed
-      startTransition(() => {
-        setDrawerOpen(false)
-        openRef.current = false
-        onClose?.()
-      })
-    }, [onClose])
+  const close = useCallback(() => {
+    // Set inert first to prevent focus issues
+    setIsInert(true)
+    // Push the state update to the next event loop tick
+    // to ensure the inert is applied to before the drawer is closed
+    startTransition(() => {
+      setDrawerOpen(false)
+      openRef.current = false
+      onClose?.()
+    })
+  }, [onClose])
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        isOpen: () => openRef.current,
-        open: () => {
-          setIsInert(false)
-          setDrawerOpen(true)
-          openRef.current = true
-        },
-        close,
-      }),
-      [close]
-    )
+  useImperativeHandle(
+    ref,
+    () => ({
+      isOpen: () => openRef.current,
+      open: () => {
+        setIsInert(false)
+        setDrawerOpen(true)
+        openRef.current = true
+      },
+      close,
+    }),
+    [close]
+  )
 
-    return (
-      <Drawer
-        container={getContainer}
-        ref={elementRef}
-        anchor="bottom"
-        open={drawerOpen}
-        onClose={close}
-        ModalProps={modalProps}
-        slotProps={slotProps}
-        disableAutoFocus
-        keepMounted={keepMounted}
-        inert={isInert}
-      >
-        {children}
-      </Drawer>
-    )
-  }
-)
+  return (
+    <Drawer
+      container={getContainer}
+      ref={elementRef}
+      anchor="bottom"
+      open={drawerOpen}
+      onClose={close}
+      ModalProps={modalProps}
+      slotProps={slotProps}
+      disableAutoFocus
+      keepMounted={keepMounted}
+      inert={isInert}
+    >
+      {children}
+    </Drawer>
+  )
+}

package/src/components/Header/CloseDrawerButton.tsx

@@ -23,7 +23,11 @@ export const CloseDrawerButton = ({
 
   return showInNavigationHeader || showInWalletHeader ? (
     <Tooltip title={t('button.close')}>
-      <IconButton size="medium" onClick={closeDrawer}>
+      <IconButton
+        size="medium"
+        data-testid="widget-close-drawer-button"
+        onClick={closeDrawer}
+      >
         <CloseRounded />
       </IconButton>
     </Tooltip>