@lifi/widget 3.14.0-beta.0 → 3.14.1

package/src/components/TokenList/TokenListItem.tsx

@@ -13,7 +13,6 @@ import {
 import type { MouseEventHandler } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
@@ -66,12 +65,6 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
   const { t } = useTranslation()
   const { getAddressLink } = useExplorer()
 
-  const tokenPrice = token.amount
-    ? formatTokenPrice(
-        formatUnits(token.amount, token.decimals),
-        token.priceUSD
-      )
-    : undefined
   const container = useRef(null)
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
   const [showAddress, setShowAddress] = useState(false)
@@ -93,6 +86,12 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
       setShowAddress(false)
     }
   }
+  const tokenAmount = formatTokenAmount(token.amount, token.decimals)
+  const tokenPrice = formatTokenPrice(
+    token.amount,
+    token.priceUSD,
+    token.decimals
+  )
 
   return (
     <ListItemButton
@@ -186,9 +185,10 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
                 sx={{
                   fontWeight: 600,
                 }}
+                title={tokenAmount}
               >
-                {t('format.number', {
-                  value: formatTokenAmount(token.amount, token.decimals),
+                {t('format.tokenAmount', {
+                  value: tokenAmount,
                 })}
               </Typography>
             ) : null}

package/src/components/TokenRate/TokenRate.tsx

@@ -1,12 +1,9 @@
 import type { RouteExtended } from '@lifi/sdk'
 import type { TypographyProps } from '@mui/material'
 import type { MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
 import { formatUnits } from 'viem'
 import { create } from 'zustand'
-import {
-  convertToSubscriptFormat,
-  precisionFormatter,
-} from '../../utils/format.js'
 import { TokenRateTypography } from './TokenRate.style.js'
 
 interface TokenRateProps extends TypographyProps {
@@ -24,6 +21,7 @@ const useTokenRate = create<TokenRateState>((set) => ({
 }))
 
 export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
+  const { t } = useTranslation()
   const { isForward, toggleIsForward } = useTokenRate()
 
   const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {
@@ -54,16 +52,12 @@ export const TokenRate: React.FC<TokenRateProps> = ({ route }) => {
     Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))
 
   const rateText = isForward
-    ? `1 ${fromToken.symbol} ≈ ${convertToSubscriptFormat(fromToRate)} ${toToken.symbol}`
-    : `1 ${toToken.symbol} ≈ ${convertToSubscriptFormat(toFromRate)} ${fromToken.symbol}`
-
-  const rateTitle = isForward
-    ? `1 ${fromToken.symbol} ≈ ${precisionFormatter.format(fromToRate)} ${toToken.symbol}`
-    : `1 ${toToken.symbol} ≈ ${precisionFormatter.format(toFromRate)} ${fromToken.symbol}`
+    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`
+    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`
 
   return (
     // biome-ignore lint/a11y/useSemanticElements:
-    <TokenRateTypography onClick={toggleRate} role="button" title={rateTitle}>
+    <TokenRateTypography onClick={toggleRate} role="button">
       {rateText}
     </TokenRateTypography>
   )

package/src/components/TransactionDetails.tsx

@@ -8,11 +8,10 @@ import type { CardProps } from '@mui/material'
 import { Box, Collapse, Tooltip, Typography } from '@mui/material'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { isRouteDone } from '../stores/routes/utils.js'
 import { getAccumulatedFeeCostsBreakdown } from '../utils/fees.js'
-import { formatTokenAmount } from '../utils/format.js'
+import { formatTokenAmount, formatTokenPrice } from '../utils/format.js'
 import { getPriceImpact } from '../utils/getPriceImpact.js'
 import { Card } from './Card/Card.js'
 import { CardIconButton } from './Card/CardIconButton.js'
@@ -56,14 +55,11 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
       BigInt(feeCollectionStep.estimate.fromAmount) -
       BigInt(feeCollectionStep.estimate.toAmount)
 
-    const feeAmount = formatUnits(
+    feeAmountUSD = formatTokenPrice(
       estimatedFromAmount,
+      feeCollectionStep.action.fromToken.priceUSD,
       feeCollectionStep.action.fromToken.decimals
     )
-
-    feeAmountUSD =
-      Number.parseFloat(feeAmount) *
-      Number.parseFloat(feeCollectionStep.action.fromToken.priceUSD)
   }
 
   const showIntegratorFeeCollectionDetails =
@@ -245,7 +241,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   sx={{ cursor: 'help' }}
                 >
                   <Typography variant="body2">
-                    {t('format.number', {
+                    {t('format.tokenAmount', {
                       value: formatTokenAmount(
                         BigInt(route.toAmountMin),
                         route.toToken.decimals

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.14.0-beta.0'
+export const version = '3.14.1'

package/src/hooks/useProcessMessage.ts

@@ -39,7 +39,6 @@ const processStatusMessages: Record<
       ProcessStatus,
       (
         t: TFunction,
-        step: LiFiStep,
         subvariant?: WidgetSubvariant,
         subvariantOptions?: SubvariantOptions
       ) => string
@@ -48,18 +47,9 @@ const processStatusMessages: Record<
 > = {
   TOKEN_ALLOWANCE: {
     STARTED: (t) => t('main.process.tokenAllowance.started'),
-    ACTION_REQUIRED: (t, step) =>
-      t('main.process.tokenAllowance.actionRequired', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
-    PENDING: (t, step) =>
-      t('main.process.tokenAllowance.pending', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
-    DONE: (t, step) =>
-      t('main.process.tokenAllowance.done', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
+    ACTION_REQUIRED: (t) => t('main.process.tokenAllowance.pending'),
+    PENDING: (t) => t('main.process.tokenAllowance.pending'),
+    DONE: (t) => t('main.process.tokenAllowance.done'),
   },
   SWITCH_CHAIN: {
     ACTION_REQUIRED: (t) => t('main.process.switchChain.actionRequired'),
@@ -67,30 +57,22 @@ const processStatusMessages: Record<
   },
   SWAP: {
     STARTED: (t) => t('main.process.swap.started'),
-    PERMIT_REQUIRED: (t, step) =>
-      t('main.process.swap.permitRequired', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
     ACTION_REQUIRED: (t) => t('main.process.swap.actionRequired'),
     PENDING: (t) => t('main.process.swap.pending'),
-    DONE: (t, _, subvariant, subvariantOptions) =>
+    DONE: (t, subvariant, subvariantOptions) =>
       subvariant === 'custom'
         ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)
         : t('main.process.swap.done'),
   },
   CROSS_CHAIN: {
     STARTED: (t) => t('main.process.bridge.started'),
-    PERMIT_REQUIRED: (t, step) =>
-      t('main.process.bridge.permitRequired', {
-        tokenSymbol: step.action.fromToken.symbol,
-      }),
     ACTION_REQUIRED: (t) => t('main.process.bridge.actionRequired'),
     PENDING: (t) => t('main.process.bridge.pending'),
     DONE: (t) => t('main.process.bridge.done'),
   },
   RECEIVING_CHAIN: {
     PENDING: (t) => t('main.process.receivingChain.pending'),
-    DONE: (t, _, subvariant, subvariantOptions) =>
+    DONE: (t, subvariant, subvariantOptions) =>
       subvariant === 'custom'
         ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)
         : t('main.process.receivingChain.done'),
@@ -247,7 +229,6 @@ export function getProcessMessage(
     ]?.(t) ??
     processStatusMessages[process.type]?.[process.status]?.(
       t,
-      step,
       subvariant,
       subvariantOptions
     )

package/src/hooks/useRoutes.ts

@@ -1,12 +1,5 @@
-import type { Route, Token } from '@lifi/sdk'
-import {
-  LiFiErrorCode,
-  convertQuoteToRoute,
-  getContractCallsQuote,
-  getRelayerQuote,
-  getRoutes,
-  isEVMPermitStep,
-} from '@lifi/sdk'
+import type { Route, RoutesResponse, Token } from '@lifi/sdk'
+import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { parseUnits } from 'viem'
@@ -39,7 +32,6 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     exchanges,
     fee,
     feeConfig,
-    useRelayerRoutes,
   } = useWidgetConfig()
   const setExecutableRoute = useSetExecutableRoute()
   const queryClient = useQueryClient()
@@ -266,9 +258,27 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             contractCallQuote.toolDetails = toolDetails
           }
 
-          const route: Route = convertQuoteToRoute(contractCallQuote)
+          const route: Route = {
+            id: crypto.randomUUID(),
+            fromChainId: contractCallQuote.action.fromChainId,
+            fromAmountUSD: contractCallQuote.estimate.fromAmountUSD || '',
+            fromAmount: contractCallQuote.action.fromAmount,
+            fromToken: contractCallQuote.action.fromToken,
+            fromAddress: contractCallQuote.action.fromAddress,
+            toChainId: contractCallQuote.action.toChainId,
+            toAmountUSD: contractCallQuote.estimate.toAmountUSD || '',
+            toAmount: contractCallQuote.estimate.toAmount,
+            toAmountMin: contractCallQuote.estimate.toAmountMin,
+            toToken: toToken!,
+            toAddress:
+              contractCallQuote.action.toAddress ||
+              contractCallQuote.action.fromAddress,
+            gasCostUSD: contractCallQuote.estimate.gasCosts?.[0].amountUSD,
+            steps: [contractCallQuote],
+            insurance: { state: 'NOT_INSURABLE', feeAmountUsd: '0' },
+          }
 
-          return [route]
+          return { routes: [route] } as RoutesResponse
         }
 
         // Prevent sending a request for the same chain token combinations.
@@ -276,110 +286,50 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           return
         }
 
-        const isObservableRelayerRoute =
-          observableRoute?.steps?.some(isEVMPermitStep)
-
-        const shouldUseMainRoutes =
-          !observableRoute || !isObservableRelayerRoute
-        const shouldUseRelayerQuote =
-          fromAddress &&
-          useRelayerRoutes &&
-          (!observableRoute || isObservableRelayerRoute)
-
-        const [routesResult, relayerRouteResult] = await Promise.all([
-          shouldUseMainRoutes
-            ? getRoutes(
-                {
-                  fromAddress,
-                  fromAmount: fromAmount.toString(),
-                  fromChainId,
-                  fromTokenAddress,
-                  toAddress,
-                  toChainId,
-                  toTokenAddress,
-                  fromAmountForGas:
-                    enabledRefuel && gasRecommendationFromAmount
-                      ? gasRecommendationFromAmount
-                      : undefined,
-                  options: {
-                    allowSwitchChain:
-                      subvariant === 'refuel' ? false : allowSwitchChain,
-                    bridges:
-                      allowBridges?.length || disabledBridges.length
-                        ? {
-                            allow: allowBridges,
-                            deny: disabledBridges.length
-                              ? disabledBridges
-                              : undefined,
-                          }
+        const data = await getRoutes(
+          {
+            fromAddress,
+            fromAmount: fromAmount.toString(),
+            fromChainId,
+            fromTokenAddress,
+            toAddress,
+            toChainId,
+            toTokenAddress,
+            fromAmountForGas:
+              enabledRefuel && gasRecommendationFromAmount
+                ? gasRecommendationFromAmount
+                : undefined,
+            options: {
+              allowSwitchChain:
+                subvariant === 'refuel' ? false : allowSwitchChain,
+              bridges:
+                allowBridges?.length || disabledBridges.length
+                  ? {
+                      allow: allowBridges,
+                      deny: disabledBridges.length
+                        ? disabledBridges
                         : undefined,
-                    exchanges:
-                      allowExchanges?.length || disabledExchanges.length
-                        ? {
-                            allow: allowExchanges,
-                            deny: disabledExchanges.length
-                              ? disabledExchanges
-                              : undefined,
-                          }
+                    }
+                  : undefined,
+              exchanges:
+                allowExchanges?.length || disabledExchanges.length
+                  ? {
+                      allow: allowExchanges,
+                      deny: disabledExchanges.length
+                        ? disabledExchanges
                         : undefined,
-                    order: routePriority,
-                    slippage: formattedSlippage,
-                    fee: calculatedFee || fee,
-                  },
-                },
-                { signal }
-              )
-            : Promise.resolve(null),
-          shouldUseRelayerQuote
-            ? getRelayerQuote(
-                {
-                  fromAddress,
-                  fromAmount: fromAmount.toString(),
-                  fromChain: fromChainId,
-                  fromToken: fromTokenAddress,
-                  toAddress,
-                  toChain: toChainId,
-                  toToken: toTokenAddress,
-                  fromAmountForGas:
-                    enabledRefuel && gasRecommendationFromAmount
-                      ? gasRecommendationFromAmount
-                      : undefined,
-                  order: routePriority,
-                  slippage: formattedSlippage,
-                  fee: calculatedFee || fee,
-                  ...(allowBridges?.length || disabledBridges.length
-                    ? {
-                        allowBridges: allowBridges,
-                        denyBridges: disabledBridges.length
-                          ? disabledBridges
-                          : undefined,
-                      }
-                    : undefined),
-                  ...(allowExchanges?.length || disabledExchanges.length
-                    ? {
-                        allowExchanges: allowExchanges,
-                        denyExchanges: disabledExchanges.length
-                          ? disabledExchanges
-                          : undefined,
-                      }
-                    : undefined),
-                },
-                { signal }
-              )
-                .then((response) => {
-                  const quote = {
-                    ...response.data.quote.step,
-                    ...response.data.quote,
-                  }
-                  return convertQuoteToRoute(quote)
-                })
-                .catch(() => null)
-            : Promise.resolve(null),
-        ])
-
-        if (routesResult?.routes[0] && fromAddress) {
+                    }
+                  : undefined,
+              order: routePriority,
+              slippage: formattedSlippage,
+              fee: calculatedFee || fee,
+            },
+          },
+          { signal }
+        )
+        if (data.routes[0] && fromAddress) {
           // Update local tokens cache to keep priceUSD in sync
-          const { fromToken, toToken } = routesResult.routes[0]
+          const { fromToken, toToken } = data.routes[0]
           ;[fromToken, toToken].forEach((token) => {
             queryClient.setQueriesData<Token[]>(
               { queryKey: ['token-balances', fromAddress, token.chainId] },
@@ -399,16 +349,8 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             )
           })
         }
-
-        const routes = routesResult?.routes ?? []
-
-        // Add relayer route if available
-        if (relayerRouteResult) {
-          routes.splice(1, 0, relayerRouteResult)
-        }
-
-        emitter.emit(WidgetEvent.AvailableRoutes, routes)
-        return routes
+        emitter.emit(WidgetEvent.AvailableRoutes, data.routes)
+        return data
       },
       enabled: isEnabled,
       staleTime: refetchTime,
@@ -419,9 +361,6 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         )
       },
       retry(failureCount, error: any) {
-        if (process.env.NODE_ENV === 'development') {
-          console.warn('Route query failed:', { failureCount, error })
-        }
         if (failureCount >= 5) {
           return false
         }
@@ -443,7 +382,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   }
 
   return {
-    routes: data,
+    routes: data?.routes,
     isLoading: isEnabled && isLoading,
     isFetching,
     isFetched,

package/src/hooks/useSetContentHeight.ts

@@ -8,9 +8,11 @@ import { useDefaultElementId } from './useDefaultElementId.js'
 //   CSS changes in those components can have implications for the functionality in this hook
 
 export const useSetContentHeight = (
-  ref: MutableRefObject<HTMLElement | null>
+  ref: MutableRefObject<HTMLElement | null>,
+  dependency?: unknown
 ) => {
   const elementId = useDefaultElementId()
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we use dependency to refresh height
   useLayoutEffect(() => {
     const relativeContainer = getRelativeContainer(elementId)
     if (
@@ -24,5 +26,5 @@ export const useSetContentHeight = (
     return () => {
       relativeContainer.style.removeProperty('min-height')
     }
-  }, [elementId, ref])
+  }, [elementId, ref, dependency])
 }

package/src/i18n/en.json

@@ -6,7 +6,8 @@
   "format": {
     "currency": "{{value, currencyExt(currency: USD)}}",
     "number": "{{value, number(maximumFractionDigits: 9)}}",
-    "percent": "{{value, percent(maximumFractionDigits: 2)}}"
+    "percent": "{{value, percent(maximumFractionDigits: 2)}}",
+    "tokenAmount": "{{value, numberExt}}"
   },
   "button": {
     "auto": "Auto",
@@ -88,7 +89,8 @@
       "emptyBridgesList": "We couldn't find any bridges that match your search",
       "emptyExchangesList": "We couldn't find any exchanges that match your search",
       "emptyTransactionHistory": "Transaction history is only stored locally and will be deleted if you clear your browser data.",
-      "fundsToExchange": "Funds sent to an exchange may be lost",
+      "smartContractAccount": "Always ensure your smart contract account is set up on the destination chain to avoid potential fund loss.",
+      "fundsToExchange": "Funds sent directly to exchanges might not be recoverable.",
       "toAddressIsRequired": "Please provide the destination wallet address to which the funds will be transferred.",
       "routeNotFound": "Reasons for that could be: low liquidity, amount selected is too low, gas costs are too high or there are no routes for the selected combination."
     },
@@ -220,10 +222,9 @@
     "priceImpact": "Price impact",
     "process": {
       "bridge": {
-        "permitRequired": "Sign permit for {{tokenSymbol}}",
-        "actionRequired": "Sign bridge transaction",
+        "actionRequired": "Please sign the transaction",
         "done": "Bridge transaction confirmed",
-        "pending": "Bridge transaction pending",
+        "pending": "Waiting for bridge transaction",
         "started": "Preparing bridge transaction"
       },
       "checkout": {
@@ -239,21 +240,19 @@
         "refunded": "Bridge transaction refunded"
       },
       "swap": {
-        "permitRequired": "Sign permit for {{tokenSymbol}}",
-        "actionRequired": "Sign swap transaction",
+        "actionRequired": "Please sign the transaction",
         "done": "Swap completed",
-        "pending": "Swap transaction pending",
+        "pending": "Waiting for swap transaction",
         "started": "Preparing swap transaction"
       },
       "switchChain": {
-        "actionRequired": "Confirm chain switch",
-        "done": "Chain switched"
+        "actionRequired": "Chain switch required",
+        "done": "Chain switched successfully"
       },
       "tokenAllowance": {
-        "actionRequired": "Approve {{tokenSymbol}} spending",
-        "done": "{{tokenSymbol}} spending approved",
-        "pending": "{{tokenSymbol}} approval pending",
-        "started": "Preparing approval transaction"
+        "done": "Token allowance approved",
+        "pending": "Waiting for token allowance",
+        "started": "Setting token allowance"
       }
     },
     "quotedAmount": "Quoted amount",
@@ -281,8 +280,7 @@
     "transferId": "Transfer ID",
     "tags": {
       "cheapest": "Best Return",
-      "fastest": "Fastest",
-      "gasless": "Gasless"
+      "fastest": "Fastest"
     },
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",

package/src/index.ts

@@ -24,4 +24,7 @@ export * from './types/events.js'
 export type { TokenAmount } from './types/token.js'
 export * from './types/widget.js'
 export { getPriceImpact } from './utils/getPriceImpact.js'
+export { percentFormatter } from './utils/percentFormatter.js'
+export { compactNumberFormatter } from './utils/compactNumberFormatter.js'
+export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js'
 export { navigationRoutes } from './utils/navigationRoutes.js'