@lifi/widget 2.0.0-beta.8 → 2.0.0-beta.9

package/cjs/components/GasMessage/GasMessage.js

@@ -4,16 +4,11 @@ exports.GasMessage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const hooks_1 = require("../../hooks");
-const stores_1 = require("../../stores");
 const FundsSufficiencyMessage_1 = require("./FundsSufficiencyMessage");
 const GasSufficiencyMessage_1 = require("./GasSufficiencyMessage");
 const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
     const { insufficientFunds } = (0, hooks_1.useFundsSufficiency)(route);
-    const { enabledAutoRefuel } = (0, stores_1.useSettings)(['enabledAutoRefuel']);
-    const { enabled, isLoading: isRefuelLoading } = (0, hooks_1.useGasRefuel)();
-    const enabledRefuel = enabled && enabledAutoRefuel;
-    const showGasSufficiencyMessage = insufficientGas?.length && !isRefuelLoading && !enabledRefuel;
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFunds || showGasSufficiencyMessage), unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: insufficientFunds ? ((0, jsx_runtime_1.jsx)(FundsSufficiencyMessage_1.FundsSufficiencyMessage, {})) : showGasSufficiencyMessage ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: insufficientFunds ? ((0, jsx_runtime_1.jsx)(FundsSufficiencyMessage_1.FundsSufficiencyMessage, {})) : insufficientGas?.length ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
 };
 exports.GasMessage = GasMessage;

package/cjs/components/Insurance/InsuranceCollapsed.js

@@ -3,22 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsuranceCollapsed = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const InsuranceCard_1 = require("./InsuranceCard");
 const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
-    const [insuredRoute, setInsuredRoute] = (0, react_1.useState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[insurableRouteId]);
-    (0, hooks_1.useSwapRoutes)({
+    const { routes } = (0, hooks_1.useSwapRoutes)({
         insurableRoute: routeExecution?.route,
-        onSettled(data) {
-            if (data?.routes?.[0]) {
-                setInsuredRoute(data.routes[0]);
-            }
-        },
     });
+    const insuredRoute = routes?.[0];
     const toggleInsurance = (checked) => {
         if (insuredRoute) {
             if (checked) {

package/cjs/components/StepActions/StepActions.js

@@ -55,7 +55,8 @@ const StepDetailsContent = ({ step, variant }) => {
     if (sameTokenProtocolStep) {
         fromAmount = (0, big_js_1.default)(step.estimate.fromAmount)
             .div(10 ** step.action.fromToken.decimals)
-            .minus((0, big_js_1.default)(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
+            .minus((0, big_js_1.default)(step.estimate.toAmount).div(10 ** step.action.toToken.decimals))
+            .toString();
     }
     else {
         fromAmount = (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals);

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.8";
+export declare const version = "2.0.0-beta.9";

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '2.0.0-beta.8';
+exports.version = '2.0.0-beta.9';

package/cjs/hooks/useGasSufficiency.js

@@ -5,15 +5,23 @@ const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
 const _1 = require(".");
 const providers_1 = require("../providers");
+const stores_1 = require("../stores");
 const refetchInterval = 30000;
 const useGasSufficiency = (route) => {
     const { account } = (0, providers_1.useWallet)();
     const { getChainById } = (0, _1.useChains)();
     const getTokenBalancesWithRetry = (0, _1.useGetTokenBalancesWithRetry)(account.signer?.provider);
+    const { enabledAutoRefuel } = (0, stores_1.useSettings)(['enabledAutoRefuel']);
+    const { enabled, isLoading: isRefuelLoading } = (0, _1.useGasRefuel)();
+    const enabledRefuel = enabled && enabledAutoRefuel;
     const { data: insufficientGas, isInitialLoading } = (0, react_query_1.useQuery)(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
             return;
         }
+        // TODO: include LI.Fuel into calculation once steps and tools are properly typed
+        // const refuelSteps = route.steps
+        //   .flatMap((step) => step.includedSteps)
+        //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
         const gasCosts = route.steps
             .filter((step) => !step.execution || step.execution.status !== 'DONE')
             .reduce((groupedGasCosts, step) => {
@@ -69,8 +77,9 @@ const useGasSufficiency = (route) => {
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
     });
+    const isInsufficientGas = Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
     return {
-        insufficientGas,
+        insufficientGas: isInsufficientGas ? insufficientGas : undefined,
         isInitialLoading,
     };
 };

package/cjs/hooks/useProcessMessage.js

@@ -103,6 +103,10 @@ function getProcessMessage(t, getChainById, step, process, variant) {
                 title = t(`swap.error.title.gasLimitIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
+            case sdk_1.LifiErrorCode.InsufficientFunds:
+                title = t(`swap.error.title.insufficientFunds`);
+                message = `${t(`swap.error.message.insufficientFunds`)} ${getTransactionNotSentMessage()}`;
+                break;
             case sdk_1.LifiErrorCode.SlippageError:
                 title = t(`swap.error.title.slippageNotMet`);
                 message = t(`swap.error.message.slippageThreshold`);

package/cjs/hooks/useSwapRoutes.d.ts

@@ -1,9 +1,8 @@
 import type { Route, RoutesResponse } from '@lifi/sdk';
 interface SwapRoutesProps {
-    onSettled?: (data?: RoutesResponse) => void;
     insurableRoute?: Route;
 }
-export declare const useSwapRoutes: ({ onSettled, insurableRoute, }?: SwapRoutesProps) => {
+export declare const useSwapRoutes: ({ insurableRoute }?: SwapRoutesProps) => {
     routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;

package/cjs/hooks/useSwapRoutes.js

@@ -12,7 +12,7 @@ const providers_1 = require("../providers");
 const stores_1 = require("../stores");
 const useSwapOnly_1 = require("./useSwapOnly");
 const refetchTime = 60000;
-const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
+const useSwapRoutes = ({ insurableRoute } = {}) => {
     const lifi = (0, providers_1.useLiFi)();
     const { variant, sdkConfig, insurance, contractTool } = (0, providers_1.useWidgetConfig)();
     const { account } = (0, providers_1.useWallet)();
@@ -207,7 +207,6 @@ const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
                 });
             }
         },
-        onSettled,
     });
     return {
         routes: data?.routes,

package/cjs/i18n/en.json

@@ -83,6 +83,7 @@
     "error": {
       "message": {
         "allowanceRequired": "Transfer amount for {{tokenSymbol}} exceeds your current allowance. Please increase your allowance and try again.",
+        "insufficientFunds": "You don't have enough gas to cover the cost of the transaction.",
         "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote.",
         "transactionFailed": "Please check the block explorer for more information.",
         "transactionNotSent": "Transaction was not sent. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
@@ -95,6 +96,7 @@
         "chainSwitch": "Chain switch required",
         "failed": "Swap failed",
         "gasLimitIsTooLow": "The gas limit is too low",
+        "insufficientFunds": "Insufficient funds",
         "slippageNotMet": "Slippage conditions not met",
         "transactionCanceled": "Transaction canceled",
         "transactionFailed": "Transaction failed",

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -4,6 +4,7 @@ exports.SDKProvider = exports.useLiFi = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
+const version_1 = require("../../config/version");
 const WidgetProvider_1 = require("../WidgetProvider");
 let lifi;
 const SDKContext = (0, react_1.createContext)(null);
@@ -27,6 +28,7 @@ const SDKProvider = ({ children, }) => {
         if (!lifi) {
             lifi = new sdk_1.LiFi({
                 disableVersionCheck: true,
+                widgetVersion: version_1.version,
                 ...config,
             });
         }

package/components/GasMessage/GasMessage.js

@@ -1,15 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Collapse } from '@mui/material';
-import { useFundsSufficiency, useGasRefuel, useGasSufficiency, } from '../../hooks';
-import { useSettings } from '../../stores';
+import { useFundsSufficiency, useGasSufficiency } from '../../hooks';
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
 import { GasSufficiencyMessage } from './GasSufficiencyMessage';
 export const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = useGasSufficiency(route);
     const { insufficientFunds } = useFundsSufficiency(route);
-    const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
-    const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
-    const enabledRefuel = enabled && enabledAutoRefuel;
-    const showGasSufficiencyMessage = insufficientGas?.length && !isRefuelLoading && !enabledRefuel;
-    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || showGasSufficiencyMessage), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : showGasSufficiencyMessage ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || insufficientGas?.length), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : insufficientGas?.length ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
 };

package/components/Insurance/InsuranceCollapsed.js

@@ -1,21 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Collapse } from '@mui/material';
-import { useState } from 'react';
 import { useSwapRoutes } from '../../hooks';
 import { RouteExecutionStatus, useRouteExecutionStore, useSetExecutableRoute, } from '../../stores';
 import { InsuranceCard } from './InsuranceCard';
 export const InsuranceCollapsed = ({ status, insurableRouteId, insuranceCoverageId, feeAmountUsd, onChange, ...props }) => {
-    const [insuredRoute, setInsuredRoute] = useState();
     const setExecutableRoute = useSetExecutableRoute();
     const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);
-    useSwapRoutes({
+    const { routes } = useSwapRoutes({
         insurableRoute: routeExecution?.route,
-        onSettled(data) {
-            if (data?.routes?.[0]) {
-                setInsuredRoute(data.routes[0]);
-            }
-        },
     });
+    const insuredRoute = routes?.[0];
     const toggleInsurance = (checked) => {
         if (insuredRoute) {
             if (checked) {

package/components/StepActions/StepActions.js

@@ -50,7 +50,8 @@ export const StepDetailsContent = ({ step, variant }) => {
     if (sameTokenProtocolStep) {
         fromAmount = Big(step.estimate.fromAmount)
             .div(10 ** step.action.fromToken.decimals)
-            .minus(Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
+            .minus(Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals))
+            .toString();
     }
     else {
         fromAmount = formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals);

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.8";
+export declare const version = "2.0.0-beta.9";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.0.0-beta.8';
+export const version = '2.0.0-beta.9';

package/hooks/useGasSufficiency.js

@@ -1,16 +1,24 @@
 import { useQuery } from '@tanstack/react-query';
 import Big from 'big.js';
-import { useChains, useGetTokenBalancesWithRetry } from '.';
+import { useChains, useGasRefuel, useGetTokenBalancesWithRetry } from '.';
 import { useWallet } from '../providers';
+import { useSettings } from '../stores';
 const refetchInterval = 30000;
 export const useGasSufficiency = (route) => {
     const { account } = useWallet();
     const { getChainById } = useChains();
     const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
+    const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel']);
+    const { enabled, isLoading: isRefuelLoading } = useGasRefuel();
+    const enabledRefuel = enabled && enabledAutoRefuel;
     const { data: insufficientGas, isInitialLoading } = useQuery(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
             return;
         }
+        // TODO: include LI.Fuel into calculation once steps and tools are properly typed
+        // const refuelSteps = route.steps
+        //   .flatMap((step) => step.includedSteps)
+        //   .filter((includedStep) => includedStep.tool === 'lifuelProtocol');
         const gasCosts = route.steps
             .filter((step) => !step.execution || step.execution.status !== 'DONE')
             .reduce((groupedGasCosts, step) => {
@@ -66,8 +74,9 @@ export const useGasSufficiency = (route) => {
         staleTime: refetchInterval,
         cacheTime: refetchInterval,
     });
+    const isInsufficientGas = Boolean(insufficientGas?.length) && !isRefuelLoading && !enabledRefuel;
     return {
-        insufficientGas,
+        insufficientGas: isInsufficientGas ? insufficientGas : undefined,
         isInitialLoading,
     };
 };

package/hooks/useProcessMessage.js

@@ -99,6 +99,10 @@ export function getProcessMessage(t, getChainById, step, process, variant) {
                 title = t(`swap.error.title.gasLimitIsTooLow`);
                 message = getTransactionNotSentMessage();
                 break;
+            case LifiErrorCode.InsufficientFunds:
+                title = t(`swap.error.title.insufficientFunds`);
+                message = `${t(`swap.error.message.insufficientFunds`)} ${getTransactionNotSentMessage()}`;
+                break;
             case LifiErrorCode.SlippageError:
                 title = t(`swap.error.title.slippageNotMet`);
                 message = t(`swap.error.message.slippageThreshold`);

package/hooks/useSwapRoutes.d.ts

@@ -1,9 +1,8 @@
 import type { Route, RoutesResponse } from '@lifi/sdk';
 interface SwapRoutesProps {
-    onSettled?: (data?: RoutesResponse) => void;
     insurableRoute?: Route;
 }
-export declare const useSwapRoutes: ({ onSettled, insurableRoute, }?: SwapRoutesProps) => {
+export declare const useSwapRoutes: ({ insurableRoute }?: SwapRoutesProps) => {
     routes: Route[] | undefined;
     isLoading: boolean;
     isFetching: boolean;

package/hooks/useSwapRoutes.js

@@ -9,7 +9,7 @@ import { SwapFormKey, useLiFi, useWallet, useWidgetConfig } from '../providers';
 import { useSettings } from '../stores';
 import { useSwapOnly } from './useSwapOnly';
 const refetchTime = 60000;
-export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
+export const useSwapRoutes = ({ insurableRoute } = {}) => {
     const lifi = useLiFi();
     const { variant, sdkConfig, insurance, contractTool } = useWidgetConfig();
     const { account } = useWallet();
@@ -204,7 +204,6 @@ export const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
                 });
             }
         },
-        onSettled,
     });
     return {
         routes: data?.routes,

package/i18n/en.json

@@ -83,6 +83,7 @@
     "error": {
       "message": {
         "allowanceRequired": "Transfer amount for {{tokenSymbol}} exceeds your current allowance. Please increase your allowance and try again.",
+        "insufficientFunds": "You don't have enough gas to cover the cost of the transaction.",
         "slippageThreshold": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote.",
         "transactionFailed": "Please check the block explorer for more information.",
         "transactionNotSent": "Transaction was not sent. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
@@ -95,6 +96,7 @@
         "chainSwitch": "Chain switch required",
         "failed": "Swap failed",
         "gasLimitIsTooLow": "The gas limit is too low",
+        "insufficientFunds": "Insufficient funds",
         "slippageNotMet": "Slippage conditions not met",
         "transactionCanceled": "Transaction canceled",
         "transactionFailed": "Transaction failed",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -43,12 +43,12 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.0.0-beta.12",
-    "@lifi/wallet-management": "^2.0.0-beta.6",
+    "@lifi/sdk": "^2.0.0-beta.13",
+    "@lifi/wallet-management": "^2.0.0-beta.7",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.129",
     "@mui/material": "^5.13.0",
-    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
     "i18next": "^22.4.15",
@@ -61,7 +61,7 @@
     "react-i18next": "^12.2.2",
     "react-intersection-observer": "^9.4.3",
     "react-router-dom": "^6.11.1",
-    "react-timer-hook": "^3.0.5",
+    "react-timer-hook": "^3.0.6",
     "uuid": "^9.0.0",
     "zustand": "^4.3.8"
   },

package/providers/SDKProvider/SDKProvider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LiFi } from '@lifi/sdk';
 import { createContext, useContext, useMemo } from 'react';
+import { version } from '../../config/version';
 import { useWidgetConfig } from '../WidgetProvider';
 let lifi;
 const SDKContext = createContext(null);
@@ -23,6 +24,7 @@ export const SDKProvider = ({ children, }) => {
         if (!lifi) {
             lifi = new LiFi({
                 disableVersionCheck: true,
+                widgetVersion: version,
                 ...config,
             });
         }