@lifi/widget 3.13.1 → 3.14.0-beta.0

package/src/hooks/useRoutes.ts

@@ -1,5 +1,12 @@
-import type { Route, RoutesResponse, Token } from '@lifi/sdk'
-import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk'
+import type { Route, Token } from '@lifi/sdk'
+import {
+  LiFiErrorCode,
+  convertQuoteToRoute,
+  getContractCallsQuote,
+  getRelayerQuote,
+  getRoutes,
+  isEVMPermitStep,
+} from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { parseUnits } from 'viem'
@@ -32,6 +39,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     exchanges,
     fee,
     feeConfig,
+    useRelayerRoutes,
   } = useWidgetConfig()
   const setExecutableRoute = useSetExecutableRoute()
   const queryClient = useQueryClient()
@@ -258,27 +266,9 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             contractCallQuote.toolDetails = toolDetails
           }
 
-          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' },
-          }
+          const route: Route = convertQuoteToRoute(contractCallQuote)
 
-          return { routes: [route] } as RoutesResponse
+          return [route]
         }
 
         // Prevent sending a request for the same chain token combinations.
@@ -286,50 +276,110 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           return
         }
 
-        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
+        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,
+                          }
                         : undefined,
-                    }
-                  : undefined,
-              exchanges:
-                allowExchanges?.length || disabledExchanges.length
-                  ? {
-                      allow: allowExchanges,
-                      deny: disabledExchanges.length
-                        ? disabledExchanges
+                    exchanges:
+                      allowExchanges?.length || disabledExchanges.length
+                        ? {
+                            allow: allowExchanges,
+                            deny: disabledExchanges.length
+                              ? disabledExchanges
+                              : undefined,
+                          }
                         : undefined,
-                    }
-                  : undefined,
-              order: routePriority,
-              slippage: formattedSlippage,
-              fee: calculatedFee || fee,
-            },
-          },
-          { signal }
-        )
-        if (data.routes[0] && fromAddress) {
+                    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) {
           // Update local tokens cache to keep priceUSD in sync
-          const { fromToken, toToken } = data.routes[0]
+          const { fromToken, toToken } = routesResult.routes[0]
           ;[fromToken, toToken].forEach((token) => {
             queryClient.setQueriesData<Token[]>(
               { queryKey: ['token-balances', fromAddress, token.chainId] },
@@ -349,8 +399,16 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             )
           })
         }
-        emitter.emit(WidgetEvent.AvailableRoutes, data.routes)
-        return data
+
+        const routes = routesResult?.routes ?? []
+
+        // Add relayer route if available
+        if (relayerRouteResult) {
+          routes.splice(1, 0, relayerRouteResult)
+        }
+
+        emitter.emit(WidgetEvent.AvailableRoutes, routes)
+        return routes
       },
       enabled: isEnabled,
       staleTime: refetchTime,
@@ -361,6 +419,9 @@ 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
         }
@@ -382,7 +443,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   }
 
   return {
-    routes: data?.routes,
+    routes: data,
     isLoading: isEnabled && isLoading,
     isFetching,
     isFetched,

package/src/hooks/useSetContentHeight.ts

@@ -8,7 +8,7 @@ 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 | undefined>
+  ref: MutableRefObject<HTMLElement | null>
 ) => {
   const elementId = useDefaultElementId()
   useLayoutEffect(() => {

package/src/i18n/bn.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "",
+    "amount": "",
     "bookmarkedWallets": "",
     "bridge": "",
     "checkout": "চেকআউট",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "",
     "from": "থেকে সোওয়াপ করুন",
     "gas": "গ্যাস",
@@ -265,13 +267,15 @@
     "stepBridge": "ব্রিজ",
     "stepBridgeAndBuy": "",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "",
+    "stepDeposit": "",
     "stepDetails": "লি.ফাই এর মাধ্যমে {{tool}}",
     "stepSwap": "সোওয়াপ",
     "stepSwapAndBridge": "সোওয়াপ এবং ব্রিজ",
     "stepSwapAndBuy": "",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "{{tool}} এর মাধ্যমে {{chain}} এ সোওয়াপ করুন",
+    "transferId": "",
     "tags": {
       "cheapest": "",
       "fastest": ""

package/src/i18n/de.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "Aktive Transaktion",
+    "amount": "",
     "bookmarkedWallets": "",
     "bridge": "Bridge",
     "checkout": "Zur Kasse",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "Exchange",
     "from": "Swap von",
     "gas": "Gas",
@@ -265,13 +267,15 @@
     "stepBridge": "Bridge",
     "stepBridgeAndBuy": "Bridge und Kauf",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "Buy",
+    "stepDeposit": "",
     "stepDetails": "{{tool}} via LI.FI",
     "stepSwap": "Swap",
     "stepSwapAndBridge": "Tauschen und überbrücken",
     "stepSwapAndBuy": "Tauschen und kaufen",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "Tausche auf {{chain}} über {{tool}}",
+    "transferId": "",
     "tags": {
       "cheapest": "",
       "fastest": ""

package/src/i18n/en.json

@@ -220,9 +220,10 @@
     "priceImpact": "Price impact",
     "process": {
       "bridge": {
-        "actionRequired": "Please sign the transaction",
+        "permitRequired": "Sign permit for {{tokenSymbol}}",
+        "actionRequired": "Sign bridge transaction",
         "done": "Bridge transaction confirmed",
-        "pending": "Waiting for bridge transaction",
+        "pending": "Bridge transaction pending",
         "started": "Preparing bridge transaction"
       },
       "checkout": {
@@ -238,19 +239,21 @@
         "refunded": "Bridge transaction refunded"
       },
       "swap": {
-        "actionRequired": "Please sign the transaction",
+        "permitRequired": "Sign permit for {{tokenSymbol}}",
+        "actionRequired": "Sign swap transaction",
         "done": "Swap completed",
-        "pending": "Waiting for swap transaction",
+        "pending": "Swap transaction pending",
         "started": "Preparing swap transaction"
       },
       "switchChain": {
-        "actionRequired": "Chain switch required",
-        "done": "Chain switched successfully"
+        "actionRequired": "Confirm chain switch",
+        "done": "Chain switched"
       },
       "tokenAllowance": {
-        "done": "Token allowance approved",
-        "pending": "Waiting for token allowance",
-        "started": "Setting token allowance"
+        "actionRequired": "Approve {{tokenSymbol}} spending",
+        "done": "{{tokenSymbol}} spending approved",
+        "pending": "{{tokenSymbol}} approval pending",
+        "started": "Preparing approval transaction"
       }
     },
     "quotedAmount": "Quoted amount",
@@ -278,7 +281,8 @@
     "transferId": "Transfer ID",
     "tags": {
       "cheapest": "Best Return",
-      "fastest": "Fastest"
+      "fastest": "Fastest",
+      "gasless": "Gasless"
     },
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",

package/src/i18n/es.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "Transacciones activas",
+    "amount": "",
     "bookmarkedWallets": "Billeteras preferidas",
     "bridge": "Puente",
     "checkout": "Checkout",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "Intercambio",
     "from": "Intercambiar de",
     "gas": "Gas",
@@ -265,13 +267,15 @@
     "stepBridge": "Cruzar",
     "stepBridgeAndBuy": "Puente y compra",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "Comprar",
+    "stepDeposit": "",
     "stepDetails": "{{tool}} a través de LI.FI",
     "stepSwap": "Swap",
     "stepSwapAndBridge": "Swap y cruzar",
     "stepSwapAndBuy": "Intercambiar y comprar",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "Intercambiar en {{chain}} a través de {{tool}}",
+    "transferId": "",
     "tags": {
       "cheapest": "Mejor retorno",
       "fastest": "Más rápido"

package/src/i18n/fr.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "Transactions actives",
+    "amount": "",
     "bookmarkedWallets": "Portefeuilles favoris",
     "bridge": "Bridge",
     "checkout": "Paiement",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "Échanger",
     "from": "Échanger de",
     "gas": "Gaz",
@@ -265,13 +267,15 @@
     "stepBridge": "Bridge",
     "stepBridgeAndBuy": "Bridge et acheter",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "Acheter",
+    "stepDeposit": "",
     "stepDetails": "{{tool}} via LI.FI",
     "stepSwap": "Échanger",
     "stepSwapAndBridge": "Échange et Bridge",
     "stepSwapAndBuy": "Échanger et acheter",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "Échanger sur {{chain}} via {{tool}}",
+    "transferId": "",
     "tags": {
       "cheapest": "Meilleur Retour",
       "fastest": "Le plus rapide"

package/src/i18n/hi.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "",
+    "amount": "",
     "bookmarkedWallets": "",
     "bridge": "",
     "checkout": "",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "",
     "from": "",
     "gas": "गैस",
@@ -265,13 +267,15 @@
     "stepBridge": "",
     "stepBridgeAndBuy": "",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "",
+    "stepDeposit": "",
     "stepDetails": "",
     "stepSwap": "",
     "stepSwapAndBridge": "",
     "stepSwapAndBuy": "",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "",
+    "transferId": "",
     "tags": {
       "cheapest": "",
       "fastest": ""

package/src/i18n/id.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "Transaksi aktif",
+    "amount": "",
     "bookmarkedWallets": "Dompet yang ditandai",
     "bridge": "Bridge",
     "checkout": "Checkout",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "Pertukaran",
     "from": "Swap dari",
     "gas": "Gas",
@@ -265,13 +267,15 @@
     "stepBridge": "Bridge",
     "stepBridgeAndBuy": "Bridge dan beli",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "Beli",
+    "stepDeposit": "",
     "stepDetails": "{{tool}} melalui LI.FI",
     "stepSwap": "Swap",
     "stepSwapAndBridge": "Swap dan bridge",
     "stepSwapAndBuy": "Swap dan beli",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "Swap di {{chain}} melalui {{tool}}",
+    "transferId": "",
     "tags": {
       "cheapest": "Pengembalian terbaik",
       "fastest": "Tercepat"

package/src/i18n/it.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "Transazioni attive",
+    "amount": "",
     "bookmarkedWallets": "",
     "bridge": "Bridge",
     "checkout": "Checkout",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "Exchange",
     "from": "Scambia da",
     "gas": "Gas",
@@ -265,13 +267,15 @@
     "stepBridge": "Bridge",
     "stepBridgeAndBuy": "Trasferisci e acquista",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "Acquista",
+    "stepDeposit": "",
     "stepDetails": "{{tool}} tramite LI.FI",
     "stepSwap": "Scambio",
     "stepSwapAndBridge": "Scambia e bridge",
     "stepSwapAndBuy": "Scambia e acquista",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "Scambio su {{chain}} tramite {{tool}}.",
+    "transferId": "",
     "tags": {
       "cheapest": "",
       "fastest": ""

package/src/i18n/ja.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "アクティブなトランザクション",
+    "amount": "",
     "bookmarkedWallets": "ブックマークされたウォレット",
     "bridge": "ブリッジ",
     "checkout": "支払い",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "スワップ",
     "from": "交換元",
     "gas": "ガス",
@@ -265,13 +267,15 @@
     "stepBridge": "ブリッジ",
     "stepBridgeAndBuy": "ブリッジと購入",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "購入",
+    "stepDeposit": "",
     "stepDetails": "LI.FI経由の{{tool}}",
     "stepSwap": "スワップ",
     "stepSwapAndBridge": "スワップとブリッジ",
     "stepSwapAndBuy": "スワップと購入",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "{{chain}} で {{tool}} 経由のスワップ",
+    "transferId": "",
     "tags": {
       "cheapest": "最良",
       "fastest": "最速"

package/src/i18n/ko.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "활성화된 거래",
+    "amount": "",
     "bookmarkedWallets": "",
     "bridge": "브릿지",
     "checkout": "주문",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "교환",
     "from": "다음에서 스왑",
     "gas": "가스",
@@ -265,13 +267,15 @@
     "stepBridge": "브릿지",
     "stepBridgeAndBuy": "브릿지 그리고 매수",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "매수",
+    "stepDeposit": "",
     "stepDetails": "LI.FI 를 통한 {{tool}}",
     "stepSwap": "스왑",
     "stepSwapAndBridge": "스왑 그리고 브릿지",
     "stepSwapAndBuy": "스왑 그리고 매수",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "{{tool}}로 {{chain}}에서 스왑",
+    "transferId": "",
     "tags": {
       "cheapest": "",
       "fastest": ""

package/src/i18n/pt.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "Transações ativas",
+    "amount": "",
     "bookmarkedWallets": "Carteiras favoritas",
     "bridge": "Ponte",
     "checkout": "Finalizar",
     "checkoutDetails": "Detalhes de pagamento",
     "deposit": "Depósito",
     "depositDetails": "Detalhes do depósito",
+    "depositTo": "",
     "exchange": "Conversão",
     "from": "Converter a partir de",
     "gas": "Gás",
@@ -265,13 +267,15 @@
     "stepBridge": "Ponte",
     "stepBridgeAndBuy": "Transfira e compre",
     "stepBridgeAndDeposit": "Ponte e depósito",
+    "stepBuy": "Comprar",
+    "stepDeposit": "Depósito",
     "stepDetails": "{{tool}} via LI.FI",
     "stepSwap": "Conversão",
     "stepSwapAndBridge": "Converter e enviar pela ponte",
     "stepSwapAndBuy": "Converta e compre",
     "stepSwapAndDeposit": "Converter e depositar",
-    "transferId": "ID de transferência",
     "swapStepDetails": "Converter na {{chain}} via {{tool}}",
+    "transferId": "ID de transferência",
     "tags": {
       "cheapest": "Melhor retorno",
       "fastest": "Mais rápido"

package/src/i18n/th.json

@@ -52,12 +52,14 @@
   },
   "header": {
     "activeTransactions": "ธุรกรรมมีผล",
+    "amount": "",
     "bookmarkedWallets": "กระเป๋าเงินที่ Bokkmark ไว้แล้ว",
     "bridge": "บริดจ์",
     "checkout": "เช็คเอาท์",
     "checkoutDetails": "",
     "deposit": "",
     "depositDetails": "",
+    "depositTo": "",
     "exchange": "แลกเปลี่ยน",
     "from": "แลกเปลี่ยนจาก",
     "gas": "แก็ส",
@@ -265,13 +267,15 @@
     "stepBridge": "บริดจ์",
     "stepBridgeAndBuy": "บริดจ์และซื้อ",
     "stepBridgeAndDeposit": "",
+    "stepBuy": "ซื้อ",
+    "stepDeposit": "",
     "stepDetails": "{{tool}} โดย LI.FI",
     "stepSwap": "แลกเปลี่ยน",
     "stepSwapAndBridge": "แลกเปลี่ยนและบริดจ์",
     "stepSwapAndBuy": "แลกเปลี่ยน และ ซื้อ",
     "stepSwapAndDeposit": "",
-    "transferId": "",
     "swapStepDetails": "แลกเปลี่ยนบน {{chain}} ผ่าน {{tool}}",
+    "transferId": "",
     "tags": {
       "cheapest": "ผลตอบแทนที่ดีที่สุด",
       "fastest": "รวดเร็วที่สุด"