@lifi/widget 4.0.0 → 4.2.0

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -3,7 +3,7 @@ import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'
 import type React from 'react'
-import { forwardRef, type PropsWithChildren, useMemo } from 'react'
+import { type JSX, type PropsWithChildren, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
@@ -17,208 +17,207 @@ import {
   TokenDetailsSheetContainer,
   TokenDetailsSheetHeader,
 } from './TokenDetailsSheetContent.style.js'
-import type { TokenDetailsSheetBase } from './types.js'
 
 interface TokenDetailsSheetContentProps {
   tokenAddress: string | undefined
   chainId: number | undefined
   withoutContractAddress: boolean
+  onClose: () => void
 }
 
 const noDataLabel = '-'
 
-export const TokenDetailsSheetContent: React.ForwardRefExoticComponent<
-  TokenDetailsSheetContentProps & React.RefAttributes<TokenDetailsSheetBase>
-> = forwardRef<TokenDetailsSheetBase, TokenDetailsSheetContentProps>(
-  ({ tokenAddress, chainId, withoutContractAddress }, ref) => {
-    const { t } = useTranslation()
-    const { getAddressLink } = useExplorer()
-    const { getChainById } = useAvailableChains()
+export const TokenDetailsSheetContent = ({
+  tokenAddress,
+  chainId,
+  withoutContractAddress,
+  onClose,
+}: TokenDetailsSheetContentProps): JSX.Element => {
+  const { t } = useTranslation()
+  const { getAddressLink } = useExplorer()
+  const { getChainById } = useAvailableChains()
 
-    const { token, isLoading } = useToken(chainId, tokenAddress, true)
-    const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
+  const { token, isLoading } = useToken(chainId, tokenAddress, true)
+  const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
 
-    const copyContractAddress = async (e: React.MouseEvent) => {
-      e.stopPropagation()
-      try {
-        // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)
-        await navigator.clipboard.writeText(tokenAddress || '')
-      } catch {
-        // Silently fail to avoid crashing the UI if clipboard write fails
-      }
+  const copyContractAddress = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)
+      await navigator.clipboard.writeText(tokenAddress || '')
+    } catch {
+      // Silently fail to avoid crashing the UI if clipboard write fails
     }
+  }
 
-    return (
-      <TokenDetailsSheetContainer>
-        <TokenDetailsSheetHeader>
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 3,
-            }}
-          >
-            <TokenAvatar
-              token={token}
-              chain={chain}
-              tokenAvatarSize={72}
-              chainAvatarSize={28}
-              isLoading={isLoading}
-            />
-            <MetricContainer>
-              {isLoading ? (
-                <>
-                  <Skeleton variant="rounded" width={80} height={24} />
-                  <Skeleton variant="rounded" width={80} height={16} />
-                </>
-              ) : (
-                <>
-                  <Typography
-                    sx={{
-                      fontWeight: 700,
-                      fontSize: '24px',
-                      lineHeight: '24px',
-                      color: 'text.primary',
-                    }}
-                  >
-                    {token?.symbol || noDataLabel}
-                  </Typography>
-                  <Label>{token?.name || noDataLabel}</Label>
-                </>
-              )}
-            </MetricContainer>
-          </Box>
-          <IconButton
-            onClick={(e) => {
-              e.stopPropagation()
-              if (ref && typeof ref !== 'function') {
-                ref.current?.close()
-              }
-            }}
-            sx={{ mt: '-8px', mr: '-8px' }}
-          >
-            <Close />
-          </IconButton>
-        </TokenDetailsSheetHeader>
-        <MetricWithSkeleton
-          isLoading={isLoading}
-          label={t('tokenMetric.currentPrice')}
-          width={200}
-          height={40}
+  return (
+    <TokenDetailsSheetContainer>
+      <TokenDetailsSheetHeader>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 3,
+          }}
         >
-          <Typography
-            sx={{
-              fontWeight: 700,
-              fontSize: '32px',
-              lineHeight: '40px',
-              color: 'text.primary',
-            }}
-          >
-            {token?.priceUSD
-              ? t('format.currency', {
-                  value: token.priceUSD,
-                })
-              : noDataLabel}
-          </Typography>
-        </MetricWithSkeleton>
-        {!withoutContractAddress && (
-          <MetricWithSkeleton
+          <TokenAvatar
+            token={token}
+            chain={chain}
+            tokenAvatarSize={72}
+            chainAvatarSize={28}
             isLoading={isLoading}
-            label={t('tokenMetric.contractAddress')}
-            width={200}
-            height={24}
-          >
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 1,
-              }}
-            >
-              <Typography
-                sx={{
-                  fontWeight: 700,
-                  fontSize: '18px',
-                  lineHeight: '24px',
-                  color: 'text.primary',
-                }}
-              >
-                {shortenAddress(tokenAddress)}
-              </Typography>
-              {tokenAddress && (
-                <CardIconButton size="small" onClick={copyContractAddress}>
-                  <ContentCopyRounded fontSize="inherit" />
-                </CardIconButton>
-              )}
-              {tokenAddress && (
-                <CardIconButton
-                  size="small"
-                  LinkComponent={Link}
-                  href={getAddressLink(tokenAddress, chainId)}
-                  target="_blank"
-                  rel="nofollow noreferrer"
-                  onClick={(e) => e.stopPropagation()}
+          />
+          <MetricContainer>
+            {isLoading ? (
+              <>
+                <Skeleton variant="rounded" width={80} height={24} />
+                <Skeleton variant="rounded" width={80} height={16} />
+              </>
+            ) : (
+              <>
+                <Typography
+                  sx={{
+                    fontWeight: 700,
+                    fontSize: '24px',
+                    lineHeight: '24px',
+                    color: 'text.primary',
+                  }}
                 >
-                  <OpenInNewRounded fontSize="inherit" />
-                </CardIconButton>
-              )}
-            </Box>
-          </MetricWithSkeleton>
-        )}
-        <MetricWithSkeleton
-          isLoading={isLoading}
-          label={t('tokenMetric.marketCap')}
-          width={200}
-          height={24}
+                  {token?.symbol || noDataLabel}
+                </Typography>
+                <Label>{token?.name || noDataLabel}</Label>
+              </>
+            )}
+          </MetricContainer>
+        </Box>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation()
+            onClose()
+          }}
+          sx={{ mt: '-8px', mr: '-8px' }}
         >
-          <Typography
-            sx={{
-              fontWeight: 700,
-              fontSize: '18px',
-              lineHeight: '24px',
-              color: 'text.primary',
-            }}
-          >
-            {token?.marketCapUSD
-              ? t('format.currency', {
-                  value: token.marketCapUSD,
-                  notation: 'compact',
-                  compactDisplay: 'short',
-                  maximumFractionDigits: 2,
-                })
-              : noDataLabel}
-          </Typography>
-        </MetricWithSkeleton>
+          <Close />
+        </IconButton>
+      </TokenDetailsSheetHeader>
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.currentPrice')}
+        width={200}
+        height={40}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '32px',
+            lineHeight: '40px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.priceUSD
+            ? t('format.currency', {
+                value: token.priceUSD,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+      {!withoutContractAddress && (
         <MetricWithSkeleton
           isLoading={isLoading}
-          label={t('tokenMetric.volume24h')}
+          label={t('tokenMetric.contractAddress')}
           width={200}
           height={24}
         >
-          <Typography
+          <Box
             sx={{
-              fontWeight: 700,
-              fontSize: '18px',
-              lineHeight: '24px',
-              color: 'text.primary',
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 1,
             }}
           >
-            {token?.volumeUSD24H
-              ? t('format.currency', {
-                  value: token.volumeUSD24H,
-                  notation: 'compact',
-                  compactDisplay: 'short',
-                  maximumFractionDigits: 2,
-                })
-              : noDataLabel}
-          </Typography>
+            <Typography
+              sx={{
+                fontWeight: 700,
+                fontSize: '18px',
+                lineHeight: '24px',
+                color: 'text.primary',
+              }}
+            >
+              {shortenAddress(tokenAddress)}
+            </Typography>
+            {tokenAddress && (
+              <CardIconButton size="small" onClick={copyContractAddress}>
+                <ContentCopyRounded fontSize="inherit" />
+              </CardIconButton>
+            )}
+            {tokenAddress && (
+              <CardIconButton
+                size="small"
+                LinkComponent={Link}
+                href={getAddressLink(tokenAddress, chainId)}
+                target="_blank"
+                rel="nofollow noreferrer"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <OpenInNewRounded fontSize="inherit" />
+              </CardIconButton>
+            )}
+          </Box>
         </MetricWithSkeleton>
-      </TokenDetailsSheetContainer>
-    )
-  }
-)
+      )}
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.marketCap')}
+        width={200}
+        height={24}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.marketCapUSD
+            ? t('format.currency', {
+                value: token.marketCapUSD,
+                notation: 'compact',
+                compactDisplay: 'short',
+                maximumFractionDigits: 2,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+      <MetricWithSkeleton
+        isLoading={isLoading}
+        label={t('tokenMetric.volume24h')}
+        width={200}
+        height={24}
+      >
+        <Typography
+          sx={{
+            fontWeight: 700,
+            fontSize: '18px',
+            lineHeight: '24px',
+            color: 'text.primary',
+          }}
+        >
+          {token?.volumeUSD24H
+            ? t('format.currency', {
+                value: token.volumeUSD24H,
+                notation: 'compact',
+                compactDisplay: 'short',
+                maximumFractionDigits: 2,
+              })
+            : noDataLabel}
+        </Typography>
+      </MetricWithSkeleton>
+    </TokenDetailsSheetContainer>
+  )
+}
 
 interface MetricWithSkeletonProps {
   label: string

package/src/components/TokenList/useTokenSelect.ts

@@ -6,7 +6,7 @@ import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useSplitModeStore } from '../../stores/settings/useSplitModeStore.js'
+import { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUIConfig } from '../../types/widget.js'
 import { isItemAllowed } from '../../utils/item.js'
@@ -16,7 +16,7 @@ export const useTokenSelect = (
   onClick?: () => void
 ): ((tokenAddress: string, chainId?: number) => void) => {
   const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig()
-  const splitMode = useSplitModeStore((store) => store.state)
+  const splitMode = useSplitMode()
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const autoPopulateToAddress = useToAddressAutoPopulate()

package/src/components/TokenPillButton/TokenPillButton.style.tsx

@@ -0,0 +1,50 @@
+import { Button, styled, type Theme, Typography } from '@mui/material'
+import type React from 'react'
+
+const pillLayout = (theme: Theme) => ({
+  height: 36,
+  borderRadius: theme.vars.shape.borderRadiusSecondary,
+  padding: theme.spacing(0.5, 1),
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+})
+
+export const TokenPill: React.FC<React.ComponentProps<typeof Button>> = styled(
+  Button
+)(({ theme }) => ({
+  ...pillLayout(theme),
+  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+  border: '1px solid transparent',
+  transition: theme.transitions.create(['background-color'], {
+    duration: theme.transitions.duration.short,
+  }),
+  '&:hover': {
+    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+  },
+}))
+
+export const TokenSelectPill: React.FC<React.ComponentProps<typeof Button>> =
+  styled(TokenPill)({ minWidth: 0 })
+
+export const TokenPillSymbol: React.FC<
+  React.ComponentProps<typeof Typography>
+> = styled(Typography)(({ theme }) => ({
+  fontSize: 14,
+  fontWeight: 700,
+  lineHeight: '18px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: theme.vars.palette.text.primary,
+}))
+
+export const TokenPillLabel: React.FC<React.ComponentProps<typeof Typography>> =
+  styled(Typography)(({ theme }) => ({
+    fontSize: 16,
+    fontWeight: 700,
+    lineHeight: '20px',
+    color: theme.vars.palette.text.secondary,
+  }))

package/src/components/TokenPillButton/TokenPillButton.tsx

@@ -0,0 +1,81 @@
+import { useNavigate } from '@tanstack/react-router'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useChain } from '../../hooks/useChain.js'
+import { useToken } from '../../hooks/useToken.js'
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import type { DisabledUIConfig } from '../../types/widget.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { AvatarBadgedDefault } from '../Avatar/Avatar.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import {
+  TokenPill,
+  TokenPillLabel,
+  TokenPillSymbol,
+  TokenSelectPill,
+} from './TokenPillButton.style.js'
+
+export const TokenPillButton: React.FC<FormTypeProps> = ({
+  formType,
+}): JSX.Element => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { disabledUI, mode } = useWidgetConfig()
+
+  const tokenKey = FormKeyHelper.getTokenKey(formType)
+  const [chainId, tokenAddress] = useFieldValues(
+    FormKeyHelper.getChainKey(formType),
+    tokenKey
+  )
+
+  const { chain } = useChain(chainId)
+  const { token } = useToken(chainId, tokenAddress)
+
+  const isSelected = !!(chain && token)
+
+  const handleClick = (): void => {
+    navigate({
+      to:
+        formType === 'from'
+          ? navigationRoutes.fromToken
+          : mode === 'refuel'
+            ? navigationRoutes.toTokenNative
+            : navigationRoutes.toToken,
+    })
+  }
+
+  const isDisabled = !!disabledUI?.[tokenKey as keyof DisabledUIConfig]
+
+  const testId = `widget-${formType}-token-button`
+
+  if (isSelected) {
+    return (
+      <TokenPill
+        onClick={isDisabled ? undefined : handleClick}
+        disabled={isDisabled}
+        data-testid={testId}
+      >
+        <TokenAvatar
+          token={token}
+          chain={chain}
+          tokenAvatarSize={24}
+          chainAvatarSize={12}
+        />
+        <TokenPillSymbol>{token.symbol}</TokenPillSymbol>
+      </TokenPill>
+    )
+  }
+
+  return (
+    <TokenSelectPill
+      onClick={isDisabled ? undefined : handleClick}
+      data-testid={testId}
+    >
+      <AvatarBadgedDefault chain={chain} avatarSize={24} badgeSize={12} />
+      <TokenPillLabel>{t('main.select')}</TokenPillLabel>
+    </TokenSelectPill>
+  )
+}

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.0.0'
+export const version = '4.2.0'

package/src/hooks/useLimitMarketRate.ts

@@ -0,0 +1,39 @@
+import { FormKeyHelper } from '../stores/form/types.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { useToken } from './useToken.js'
+
+/**
+ * Canonical limit-order market rate (receive token per send token), derived
+ * from the tokens' USD prices: 1 send token ≈ sendPrice / receivePrice receive
+ * tokens. This is the spot ratio — what the price card's "Market" reference and
+ * proximity indicator compare against. Returns `undefined` until both token
+ * prices are known.
+ */
+export const useLimitMarketRate = (): number | undefined => {
+  const [fromChainId, fromTokenAddress, toChainId, toTokenAddress] =
+    useFieldValues(
+      FormKeyHelper.getChainKey('from'),
+      FormKeyHelper.getTokenKey('from'),
+      FormKeyHelper.getChainKey('to'),
+      FormKeyHelper.getTokenKey('to')
+    )
+  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)
+  const { token: toToken } = useToken(toChainId, toTokenAddress)
+
+  const fromPrice = Number(fromToken?.priceUSD)
+  const toPrice = Number(toToken?.priceUSD)
+
+  // A `priceUSD` of `"0"` (or missing) means the price is unknown — there's no
+  // meaningful spot ratio to derive, and dividing by a zero `toPrice` would be
+  // `Infinity`, so the falsy guard intentionally suppresses the rate here.
+  if (
+    !fromPrice ||
+    !toPrice ||
+    Number.isNaN(fromPrice) ||
+    Number.isNaN(toPrice)
+  ) {
+    return undefined
+  }
+
+  return fromPrice / toPrice
+}

package/src/hooks/useLinkedLimitFields.ts

@@ -0,0 +1,74 @@
+import { FormKeyHelper } from '../stores/form/types.js'
+import { useFieldActions } from '../stores/form/useFieldActions.js'
+import { useFieldValues } from '../stores/form/useFieldValues.js'
+import { deriveLimitPrice, deriveReceiveAmount } from '../utils/limitOrder.js'
+import { useToken } from './useToken.js'
+
+export interface LinkedLimitFields {
+  limitPrice: string
+  /** Set the send amount (explicit user edit); derives receiveAmount when a price is set. */
+  setSendAmount: (value: string) => void
+  /** Set the limit price (canonical: receive per send); derives receiveAmount when a send amount is set. */
+  setLimitPrice: (value: string) => void
+}
+
+/**
+ * Implements the linked-field derivation for limit orders:
+ * - `limitPrice = receiveAmount / sendAmount`
+ * - editing sendAmount recomputes receiveAmount, holding the current price
+ * - editing limitPrice (with a send amount set) recomputes receiveAmount
+ * - sendAmount never changes without an explicit user edit
+ *
+ * The receive amount (`toAmount`) is read-only in the UI — it is derived here
+ * from the send amount and limit price, then sent to the routes request; the
+ * receive card only displays the resulting quote.
+ *
+ * The limit price is NOT stored: it is purely a function of the `fromAmount`
+ * and `toAmount` form fields (canonical receive-per-send). The UI layer handles
+ * base/quote display inversion. Because it's derived, editing the send amount
+ * only has to preserve the pre-edit price.
+ */
+export const useLinkedLimitFields = (): LinkedLimitFields => {
+  const { setFieldValue } = useFieldActions()
+  const [toChainId, toTokenAddress, sendAmount, receiveAmount] = useFieldValues(
+    FormKeyHelper.getChainKey('to'),
+    FormKeyHelper.getTokenKey('to'),
+    FormKeyHelper.getAmountKey('from'),
+    FormKeyHelper.getAmountKey('to')
+  )
+  const { token: toToken } = useToken(toChainId, toTokenAddress)
+
+  const limitPrice = deriveLimitPrice(sendAmount, receiveAmount)
+
+  const setSendAmount = (value: string): void => {
+    // Hold the pre-edit price (derived from the current fields) so changing the
+    // send amount rescales the receive amount instead of moving the price.
+    setFieldValue('fromAmount', value, { isDirty: true, isTouched: true })
+    const nextReceive = deriveReceiveAmount(
+      value,
+      limitPrice,
+      toToken?.decimals
+    )
+    if (nextReceive) {
+      setFieldValue('toAmount', nextReceive, { isDirty: true })
+    }
+  }
+
+  const setLimitPrice = (value: string): void => {
+    // Write unconditionally (including '') so the receive amount tracks the
+    // price both ways — clearing the price clears the derived receive amount
+    // instead of leaving a stale value that re-derives the old price.
+    const nextReceive = deriveReceiveAmount(
+      sendAmount,
+      value,
+      toToken?.decimals
+    )
+    setFieldValue('toAmount', nextReceive, { isDirty: true })
+  }
+
+  return {
+    limitPrice,
+    setSendAmount,
+    setLimitPrice,
+  }
+}