@lifi/widget 4.1.0 → 4.3.0

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/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/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.1.0'
+export const version = '4.3.0'

package/src/hooks/useFilteredByTokenBalances.ts

@@ -11,6 +11,7 @@ import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
+import { getVerifiedTokensSets } from '../utils/token.js'
 import { isSupportedToken } from '../utils/tokenList.js'
 
 export const useFilteredTokensByBalance = (
@@ -56,11 +57,14 @@ export const useFilteredTokensByBalance = (
       return result
     }
 
+    const verifiedTokensSets = getVerifiedTokensSets(configTokens)
+
     for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
       result[address] = {}
 
       for (const [chainIdStr, chainTokens] of Object.entries(tokens)) {
         const chainId = Number(chainIdStr)
+        const verifiedAddresses = verifiedTokensSets?.get(chainId)
         // Get balances for this specific chain
         const balances = existingBalances?.[chainId]
         // If no balances, RPC all tokens of the chain
@@ -115,10 +119,11 @@ export const useFilteredTokensByBalance = (
               )
             )
           })
-          // Mark tokens from wallet balances as unverified
+          // Mark tokens from wallet balances as unverified unless allowlisted
           .map((token: WalletTokenExtended) => ({
             ...token,
-            verified: false,
+            verified:
+              verifiedAddresses?.has(token.address.toLowerCase()) ?? false,
           })) as TokenExtended[]
 
         // Combine both sets of tokens - convert WalletTokenExtended to TokenAmount

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