fix: improve relay support

examples/deposit-flow/package.json

@@ -10,9 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lifi/sdk": "^3.5.0",
+    "@lifi/sdk": "^3.5.2",
     "@lifi/widget": "workspace:^",
-    "@mui/material": "^6.3.1",
+    "@mui/material": "^6.4.0",
     "@tanstack/react-query": "^5.64.1",
     "events": "^3.3.0",
     "react": "^19.0.0",

examples/dynamic/package.json

@@ -9,14 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dynamic-labs/bitcoin": "^3.9.8",
-    "@dynamic-labs/ethereum": "^3.9.8",
-    "@dynamic-labs/sdk-react-core": "^3.9.8",
-    "@dynamic-labs/solana": "^3.9.8",
-    "@dynamic-labs/wagmi-connector": "^3.9.8",
+    "@dynamic-labs/bitcoin": "^3.9.9",
+    "@dynamic-labs/ethereum": "^3.9.9",
+    "@dynamic-labs/sdk-react-core": "^3.9.9",
+    "@dynamic-labs/solana": "^3.9.9",
+    "@dynamic-labs/wagmi-connector": "^3.9.9",
     "@lifi/wallet-management": "workspace:^",
     "@lifi/widget": "workspace:^",
-    "@mui/material": "^6.3.1",
+    "@mui/material": "^6.4.0",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.98.0",

examples/nextjs/package.json

@@ -8,7 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@lifi/sdk": "^3.5.0",
+    "@lifi/sdk": "^3.5.2",
     "@lifi/widget": "^3.13.2",
     "@mui/material-nextjs": "^6.3.1",
     "next": "^15.1.4",

examples/nuxt/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@lifi/widget": "^3.13.2",
-    "nuxt": "3.15.1",
+    "nuxt": "3.15.2",
     "veaury": "^2.6.1",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vue": "^3.5.13",

examples/svelte/package.json

@@ -16,7 +16,7 @@
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "svelte": "^5.17.4",
+    "svelte": "^5.18.0",
     "svelte-check": "^4.1.4",
     "svelte-preprocess": "^6.0.2",
     "tslib": "^2.8.1",

examples/vite/package.json

@@ -10,10 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@lifi/sdk": "^3.5.0",
+    "@lifi/sdk": "^3.5.2",
     "@lifi/wallet-management": "^3.5.2",
     "@lifi/widget": "^3.13.2",
-    "@mui/material": "^6.3.1",
+    "@mui/material": "^6.4.0",
     "@tanstack/react-query": "^5.64.1",
     "@wagmi/connectors": "^5.7.3",
     "events": "^3.3.0",

examples/zustand-widget-config/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@lifi/widget": "workspace:^",
-    "@mui/material": "^6.3.1",
+    "@mui/material": "^6.4.0",
     "@tanstack/react-query": "^5.64.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

packages/wallet-management/package.json

@@ -52,11 +52,10 @@
     "@bigmi/core": "^0.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.6.0-beta.2",
+    "@lifi/sdk": "3.6.0-beta.3",
     "@mui/icons-material": "6.0.2",
-    "@mui/lab": "6.0.0-beta.22",
-    "@mui/material": "^6.3.1",
-    "@mui/system": "^6.3.1",
+    "@mui/material": "^6.4.0",
+    "@mui/system": "^6.4.0",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/web3.js": "^1.98.0",
     "@wagmi/core": "^2.16.3",

packages/widget-embedded/package.json

@@ -13,13 +13,12 @@
   },
   "author": "Eugene Chybisov <[email protected]>",
   "dependencies": {
-    "@lifi/sdk": "^3.6.0-beta.2",
+    "@lifi/sdk": "3.6.0-beta.3",
     "@lifi/wallet-management": "workspace:*",
     "@lifi/widget": "workspace:*",
     "@mui/icons-material": "6.0.2",
-    "@mui/lab": "6.0.0-beta.22",
-    "@mui/material": "^6.3.1",
-    "@mui/system": "^6.3.1",
+    "@mui/material": "^6.4.0",
+    "@mui/system": "^6.4.0",
     "@opensea/seaport-js": "4.0.4",
     "@tanstack/react-query": "^5.64.1",
     "bignumber.js": "^9.1.2",

packages/widget-playground-next/package.json

@@ -12,9 +12,9 @@
     "@emotion/styled": "^11.14.0",
     "@lifi/widget": "workspace:*",
     "@lifi/widget-playground": "workspace:*",
-    "@mui/material": "^6.3.1",
+    "@mui/material": "^6.4.0",
     "@mui/material-nextjs": "^6.3.1",
-    "@mui/system": "^6.3.1",
+    "@mui/system": "^6.4.0",
     "@tanstack/react-query": "^5.64.1",
     "core-js": "^3.40.0",
     "next": "^15.1.4",

packages/widget-playground-vite/package.json

@@ -16,8 +16,8 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@lifi/widget-playground": "workspace:*",
-    "@mui/material": "^6.3.1",
-    "@mui/system": "^6.3.1",
+    "@mui/material": "^6.4.0",
+    "@mui/system": "^6.4.0",
     "@tanstack/react-query": "^5.64.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

packages/widget-playground/package.json

@@ -30,14 +30,14 @@
     "@bigmi/react": "^0.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.6.0-beta.2",
+    "@lifi/sdk": "3.6.0-beta.3",
     "@lifi/wallet-management": "workspace:*",
     "@lifi/widget": "workspace:*",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "6.0.2",
-    "@mui/lab": "6.0.0-beta.22",
-    "@mui/material": "^6.3.1",
-    "@mui/system": "^6.3.1",
+    "@mui/lab": "^6.0.0-beta.23",
+    "@mui/material": "^6.4.0",
+    "@mui/system": "^6.4.0",
     "@rainbow-me/rainbowkit": "^2.2.2",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",

packages/widget/package.json

@@ -52,12 +52,11 @@
     "@bigmi/core": "^0.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@lifi/sdk": "^3.6.0-beta.2",
+    "@lifi/sdk": "3.6.0-beta.3",
     "@lifi/wallet-management": "workspace:^",
     "@mui/icons-material": "6.0.2",
-    "@mui/lab": "6.0.0-beta.22",
-    "@mui/material": "^6.3.1",
-    "@mui/system": "^6.3.1",
+    "@mui/material": "^6.4.0",
+    "@mui/system": "^6.4.0",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-virtual": "^3.11.2",

packages/widget/src/components/BaseTransactionButton/BaseTransactionButton.tsx

@@ -1,5 +1,5 @@
 import { useAccount, useWalletMenu } from '@lifi/wallet-management'
-import { LoadingButton } from '@mui/lab'
+import { Button } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useChain } from '../../hooks/useChain.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -39,7 +39,7 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
   }
 
   return (
-    <LoadingButton
+    <Button
       variant="contained"
       color="primary"
       onClick={handleClick}
@@ -49,6 +49,6 @@ export const BaseTransactionButton: React.FC<BaseTransactionButtonProps> = ({
       fullWidth
     >
       {getButtonText()}
-    </LoadingButton>
+    </Button>
   )
 }

packages/widget/src/components/ButtonTertiary.tsx

@@ -1,19 +1,18 @@
-import { LoadingButton, loadingButtonClasses } from '@mui/lab'
-import { styled } from '@mui/material'
+import { Button, buttonClasses, styled } from '@mui/material'
 import { getContrastAlphaColor } from '../utils/colors.js'
 
-export const ButtonTertiary = styled(LoadingButton)(({ theme }) => ({
+export const ButtonTertiary = styled(Button)(({ theme }) => ({
   color: theme.palette.text.primary,
   height: 40,
   fontSize: 14,
   backgroundColor: getContrastAlphaColor(theme, 0.04),
   '&:hover, &:active': {
     backgroundColor: getContrastAlphaColor(theme, 0.08),
   },
-  [`&.${loadingButtonClasses.loading}:disabled`]: {
+  [`&.${buttonClasses.loading}:disabled`]: {
     backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
-  [`.${loadingButtonClasses.loadingIndicator}`]: {
+  [`.${buttonClasses.loadingIndicator}`]: {
     color: theme.palette.text.primary,
   },
 }))

packages/widget/src/hooks/useRoutes.ts

@@ -1,10 +1,11 @@
-import type { Route, RoutesResponse, Token } 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'
@@ -267,58 +268,69 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
 
           const route: Route = convertQuoteToRoute(contractCallQuote)
 
-          return { routes: [route] } as RoutesResponse
+          return [route]
         }
 
         // Prevent sending a request for the same chain token combinations.
         if (fromChainId === toChainId && fromTokenAddress === toTokenAddress) {
           return
         }
 
+        const isObservableRelayerRoute =
+          observableRoute?.steps?.some(isEVMPermitStep)
+
+        const shouldUseMainRoutes =
+          !observableRoute || !isObservableRelayerRoute
+        const shouldUseRelayerQuote =
+          fromAddress &&
+          useRelayerRoutes &&
+          (!observableRoute || isObservableRelayerRoute)
+
         const [routesResult, relayerRouteResult] = await Promise.all([
-          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,
-                exchanges:
-                  allowExchanges?.length || disabledExchanges.length
-                    ? {
-                        allow: allowExchanges,
-                        deny: disabledExchanges.length
-                          ? disabledExchanges
-                          : undefined,
-                      }
-                    : undefined,
-                order: routePriority,
-                slippage: formattedSlippage,
-                fee: calculatedFee || fee,
-              },
-            },
-            { signal }
-          ),
-          // Relayer quote is available only if fromAddress is present
-          fromAddress && useRelayerRoutes
+          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,
+                    exchanges:
+                      allowExchanges?.length || disabledExchanges.length
+                        ? {
+                            allow: allowExchanges,
+                            deny: disabledExchanges.length
+                              ? disabledExchanges
+                              : undefined,
+                          }
+                        : undefined,
+                    order: routePriority,
+                    slippage: formattedSlippage,
+                    fee: calculatedFee || fee,
+                  },
+                },
+                { signal }
+              )
+            : Promise.resolve(null),
+          shouldUseRelayerQuote
             ? getRelayerQuote(
                 {
                   fromAddress,
@@ -365,7 +377,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
             : Promise.resolve(null),
         ])
 
-        if (routesResult.routes[0] && fromAddress) {
+        if (routesResult?.routes[0] && fromAddress) {
           // Update local tokens cache to keep priceUSD in sync
           const { fromToken, toToken } = routesResult.routes[0]
           ;[fromToken, toToken].forEach((token) => {
@@ -388,13 +400,15 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           })
         }
 
+        const routes = routesResult?.routes ?? []
+
         // Add relayer route if available
         if (relayerRouteResult) {
-          routesResult.routes.splice(1, 0, relayerRouteResult)
+          routes.splice(1, 0, relayerRouteResult)
         }
 
-        emitter.emit(WidgetEvent.AvailableRoutes, routesResult.routes)
-        return routesResult
+        emitter.emit(WidgetEvent.AvailableRoutes, routes)
+        return routes
       },
       enabled: isEnabled,
       staleTime: refetchTime,
@@ -429,7 +443,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   }
 
   return {
-    routes: data?.routes,
+    routes: data,
     isLoading: isEnabled && isLoading,
     isFetching,
     isFetched,