@lifi/widget 2.4.5 → 2.5.0

package/cjs/components/Card/CardLabel.d.ts

@@ -2,7 +2,7 @@
 export declare const CardLabel: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    type?: "insurance" | "active" | "insurance-icon" | undefined;
+    type?: "active" | "insurance" | "insurance-icon" | undefined;
 }, {}, {}>;
 export declare const CardLabelTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;

package/cjs/components/GasMessage/GasMessage.js

@@ -9,10 +9,10 @@ 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 { insufficientFromToken } = (0, hooks_1.useFromTokenSufficiency)(route);
     const { sdkConfig } = (0, providers_1.useWidgetConfig)();
     const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
     const validInsufficientGas = insufficientGas?.length && !isMultisigSigner;
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFunds || validInsufficientGas), unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: insufficientFunds ? ((0, jsx_runtime_1.jsx)(FundsSufficiencyMessage_1.FundsSufficiencyMessage, {})) : validInsufficientGas ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: Boolean(insufficientFromToken || validInsufficientGas), unmountOnExit: true, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...props, children: insufficientFromToken ? ((0, jsx_runtime_1.jsx)(FundsSufficiencyMessage_1.FundsSufficiencyMessage, {})) : validInsufficientGas ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
 };
 exports.GasMessage = GasMessage;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.4.5";
+export declare const version = "2.5.0";

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.4.5';
+exports.version = '2.5.0';

package/cjs/hooks/index.d.ts

@@ -5,7 +5,7 @@ export * from './useDebouncedWatch';
 export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
-export * from './useFundsSufficiency';
+export * from './useFromTokenSufficiency';
 export * from './useGasRecommendation';
 export * from './useGasRefuel';
 export * from './useGasSufficiency';

package/cjs/hooks/index.js

@@ -21,7 +21,7 @@ __exportStar(require("./useDebouncedWatch"), exports);
 __exportStar(require("./useDefaultElementId"), exports);
 __exportStar(require("./useExpandableVariant"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
-__exportStar(require("./useFundsSufficiency"), exports);
+__exportStar(require("./useFromTokenSufficiency"), exports);
 __exportStar(require("./useGasRecommendation"), exports);
 __exportStar(require("./useGasRefuel"), exports);
 __exportStar(require("./useGasSufficiency"), exports);

package/cjs/hooks/useFromTokenSufficiency.d.ts

@@ -0,0 +1,5 @@
+import type { Route } from '@lifi/sdk';
+export declare const useFromTokenSufficiency: (route?: Route) => {
+    insufficientFromToken: boolean | undefined;
+    isInitialLoading: boolean;
+};

package/cjs/hooks/{useFundsSufficiency.js → useFromTokenSufficiency.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFundsSufficiency = void 0;
+exports.useFromTokenSufficiency = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const big_js_1 = require("big.js");
 const react_hook_form_1 = require("react-hook-form");
@@ -9,7 +9,7 @@ const stores_1 = require("../stores");
 const useGetTokenBalancesWithRetry_1 = require("./useGetTokenBalancesWithRetry");
 const useTokenAddressBalance_1 = require("./useTokenAddressBalance");
 const refetchInterval = 30000;
-const useFundsSufficiency = (route) => {
+const useFromTokenSufficiency = (route) => {
     const { account } = (0, providers_1.useWallet)();
     const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(account.signer?.provider);
     const [fromChainId, fromTokenAddress, fromAmount] = (0, react_hook_form_1.useWatch)({
@@ -22,8 +22,8 @@ const useFundsSufficiency = (route) => {
         tokenAddress = route.fromToken.address;
     }
     const { token, isLoading } = (0, useTokenAddressBalance_1.useTokenAddressBalance)(chainId, tokenAddress);
-    const { data: insufficientFunds, isInitialLoading } = (0, react_query_1.useQuery)([
-        'funds-sufficiency-check',
+    const { data: insufficientFromToken, isInitialLoading } = (0, react_query_1.useQuery)([
+        'from-token-sufficiency-check',
         account.address,
         chainId,
         tokenAddress,
@@ -62,8 +62,8 @@ const useFundsSufficiency = (route) => {
         keepPreviousData: true,
     });
     return {
-        insufficientFunds,
+        insufficientFromToken,
         isInitialLoading,
     };
 };
-exports.useFundsSufficiency = useFundsSufficiency;
+exports.useFromTokenSufficiency = useFromTokenSufficiency;

package/cjs/hooks/useGasSufficiency.js

@@ -30,21 +30,27 @@ const useGasSufficiency = (route) => {
                 const gasCostAmount = step.estimate.gasCosts
                     .reduce((amount, gasCost) => amount.plus((0, big_js_1.default)(gasCost.amount || 0)), (0, big_js_1.default)(0))
                     .div(10 ** token.decimals);
-                const groupedGasCost = groupedGasCosts[token.chainId];
-                const gasAmount = groupedGasCost
-                    ? groupedGasCost.gasAmount.plus(gasCostAmount)
-                    : gasCostAmount;
                 groupedGasCosts[token.chainId] = {
-                    gasAmount,
-                    tokenAmount: gasAmount,
+                    gasAmount: groupedGasCosts[token.chainId]?.gasAmount.plus(gasCostAmount) ?? gasCostAmount,
+                    token,
+                };
+            }
+            // Add fees paid in native tokens to gas sufficiency check (included: false)
+            const nonIncludedFeeCosts = step.estimate.feeCosts?.filter((feeCost) => !feeCost.included);
+            if (nonIncludedFeeCosts?.length) {
+                const { token } = nonIncludedFeeCosts[0];
+                const feeCostAmount = nonIncludedFeeCosts
+                    .reduce((amount, feeCost) => amount.plus((0, big_js_1.default)(feeCost.amount || 0)), (0, big_js_1.default)(0))
+                    .div(10 ** token.decimals);
+                groupedGasCosts[token.chainId] = {
+                    gasAmount: groupedGasCosts[token.chainId]?.gasAmount.plus(feeCostAmount) ?? feeCostAmount,
                     token,
                 };
-                return groupedGasCosts;
             }
             return groupedGasCosts;
         }, {});
         if (route.fromToken.address === gasCosts[route.fromChainId]?.token.address) {
-            gasCosts[route.fromChainId].tokenAmount = gasCosts[route.fromChainId]?.gasAmount.plus((0, big_js_1.default)(route.fromAmount).div(10 ** route.fromToken.decimals));
+            gasCosts[route.fromChainId].tokenAmount = gasCosts[route.fromChainId].gasAmount.plus((0, big_js_1.default)(route.fromAmount).div(10 ** route.fromToken.decimals));
         }
         const tokenBalances = await getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!tokenBalances?.length) {

package/cjs/i18n/en.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Route priority",
     "showDestinationWallet": "Show destination wallet",
-    "slippage": "Slippage"
+    "slippage": "Slippage",
+    "resetSettings": "You're using custom setting limiting the number of available routes."
   },
   "wallet": {
     "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."

package/cjs/i18n/pt.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Prioridade de rota / caminho",
     "showDestinationWallet": "Mostrar carteira de destino",
-    "slippage": "Derrapagem"
+    "slippage": "Derrapagem",
+    "resetSettings": "Você está usando a configuração personalizada que limita a quantidade de rotas disponíveis."
   },
   "wallet": {
     "extensionNotFound": "Por favor, certifique-se de que apenas a extensão do navegador da {{name}} está ativa antes de escolher esta carteira."

package/cjs/i18n/tr.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Rota önceliği",
     "showDestinationWallet": "Hedef Adresi Göster",
-    "slippage": "Sapma toleransı"
+    "slippage": "Sapma toleransı",
+    "resetSettings": "Kullanılabilir rotaların sayısını sınırlayan özel bir ayar kullanıyorsunuz."
   },
   "wallet": {
     "extensionNotFound": "Lütfen bu cüzdanı seçmeden önce yalnızca {{name}} tarayıcı uzantısının etkin olduğundan emin olun."

package/cjs/i18n/uk.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Пріоритет маршруту",
     "showDestinationWallet": "Показати цільовий гаманець",
-    "slippage": "Прослизання"
+    "slippage": "Прослизання",
+    "resetSettings": "Ви використовуєте налаштування які можуть обмежувати кількість доступних маршрутів."
   },
   "wallet": {
     "extensionNotFound": "Перш ніж вибрати цей гаманець, переконайтеся, що в браузері активне лише розширення {{name}}."

package/cjs/pages/SettingsPage/ResetSettingsButton.js

@@ -9,7 +9,17 @@ const Dialog_1 = require("../../components/Dialog");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
+const ResetSettingsButton_style_1 = require("./ResetSettingsButton.style");
+const icons_material_1 = require("@mui/icons-material");
+const shallow_1 = require("zustand/shallow");
 const ResetSettingsButton = () => {
+    const [enabledBridges, enabledExchanges, routePriority, slippage, gasPrice] = (0, stores_1.useSettingsStore)((state) => [
+        state.enabledBridges,
+        state.enabledExchanges,
+        state.routePriority,
+        state.slippage,
+        state.gasPrice,
+    ], shallow_1.shallow);
     const { t } = (0, react_i18next_1.useTranslation)();
     const { tools } = (0, hooks_1.useTools)();
     const config = (0, providers_1.useWidgetConfig)();
@@ -21,9 +31,27 @@ const ResetSettingsButton = () => {
     const handleReset = () => {
         if (tools) {
             resetSettings(config, tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
+            (0, stores_1.setDefaultSettings)(config);
         }
         toggleDialog();
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 3, mt: 1.5, mb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.resetSettings') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.resetSettings') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
+    const isSlippageChanged = config.slippage
+        ? Number(slippage) !== config.slippage * 100
+        : slippage !== stores_1.defaultConfigurableSettings.slippage;
+    const isRoutePriorityChanged = config.routePriority
+        ? routePriority !== config.routePriority
+        : routePriority !== stores_1.defaultConfigurableSettings.routePriority;
+    const isGasPriceChanged = gasPrice !== stores_1.defaultConfigurableSettings.gasPrice;
+    const isCustomRouteSettings = tools?.bridges?.length !== enabledBridges?.length ||
+        tools?.exchanges?.length !== enabledExchanges?.length ||
+        isSlippageChanged ||
+        isRoutePriorityChanged ||
+        isGasPriceChanged;
+    if (!isCustomRouteSettings) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 3, mt: 1.5, mb: 1, children: (0, jsx_runtime_1.jsxs)(ResetSettingsButton_style_1.ResetButtonContainer, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", marginBottom: "12px", children: [(0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { sx: {
+                                marginRight: '8px',
+                            } }), (0, jsx_runtime_1.jsx)(material_1.Box, { fontSize: 14, children: t(`settings.resetSettings`) })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.resetSettings') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.resetSettings') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }) }));
 };
 exports.ResetSettingsButton = ResetSettingsButton;

package/cjs/pages/SettingsPage/ResetSettingsButton.style.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ResetButtonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/SettingsPage/ResetSettingsButton.style.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetButtonContainer = void 0;
+const utils_1 = require("../../utils");
+const material_1 = require("@mui/material");
+exports.ResetButtonContainer = (0, material_1.styled)(material_1.Box)(({ theme }) => ({
+    background: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '4%'),
+    borderRadius: '16px',
+    padding: '16px',
+    [`svg`]: {
+        fill: (0, utils_1.getContrastAlphaColor)(theme.palette.mode, '40%'),
+    },
+}));

package/cjs/pages/TransactionPage/StartTransactionButton.js

@@ -10,9 +10,9 @@ const StartTransactionButton = ({ onClick, route, text, loading, }) => {
     const { sdkConfig } = (0, providers_1.useWidgetConfig)();
     const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
     const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = (0, hooks_1.useGasSufficiency)(route);
-    const { insufficientFunds, isInitialLoading: isFundsSufficiencyLoading } = (0, hooks_1.useFundsSufficiency)(route);
-    const shouldDisableButton = !isMultisigSigner && (insufficientFunds || !!insufficientGas?.length);
-    return ((0, jsx_runtime_1.jsx)(DefaultTransactionButton_1.DefaultTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
+    const { insufficientFromToken, isInitialLoading: isFromTokenSufficiencyLoading, } = (0, hooks_1.useFromTokenSufficiency)(route);
+    const shouldDisableButton = !isMultisigSigner && (insufficientFromToken || !!insufficientGas?.length);
+    return ((0, jsx_runtime_1.jsx)(DefaultTransactionButton_1.DefaultTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading }));
 };
 exports.StartTransactionButton = StartTransactionButton;
 const StartInsurableTransactionButton = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -11,16 +11,17 @@ const SDKContext = (0, react_1.createContext)(null);
 const useLiFi = () => (0, react_1.useContext)(SDKContext);
 exports.useLiFi = useLiFi;
 const SDKProvider = ({ children, }) => {
-    const { sdkConfig, fee, integrator, referrer, routePriority, slippage } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { sdkConfig, integrator, apiKey, fee, referrer, routePriority, slippage, } = (0, WidgetProvider_1.useWidgetConfig)();
     const value = (0, react_1.useMemo)(() => {
         const config = {
             ...sdkConfig,
+            apiKey,
             integrator: integrator ?? window.location.hostname,
             defaultRouteOptions: {
-                fee,
                 integrator: integrator ?? window.location.hostname,
+                fee,
                 referrer,
-                routePriority,
+                order: routePriority,
                 slippage,
                 ...sdkConfig?.defaultRouteOptions,
             },
@@ -34,7 +35,7 @@ const SDKProvider = ({ children, }) => {
         }
         lifi.setConfig(config);
         return lifi;
-    }, [fee, integrator, referrer, routePriority, sdkConfig, slippage]);
+    }, [apiKey, fee, integrator, referrer, routePriority, sdkConfig, slippage]);
     return (0, jsx_runtime_1.jsx)(SDKContext.Provider, { value: value, children: children });
 };
 exports.SDKProvider = SDKProvider;

package/cjs/stores/StoreProvider.js

@@ -7,6 +7,8 @@ const header_1 = require("./header");
 const routes_1 = require("./routes");
 const settings_1 = require("./settings");
 const StoreProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(settings_1.SplitSubvariantStoreProvider, { state: config.subvariant === 'split' ? 'swap' : undefined, children: (0, jsx_runtime_1.jsx)(header_1.HeaderStoreProvider, { namePrefix: config?.keyPrefix, children: (0, jsx_runtime_1.jsx)(chains_1.ChainOrderStoreProvider, { namePrefix: config?.keyPrefix, children: (0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: config?.keyPrefix, children: children }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(settings_1.SplitSubvariantStoreProvider, { state: config.subvariant === 'split'
+            ? config.subvariantOptions || 'swap'
+            : undefined, children: (0, jsx_runtime_1.jsx)(header_1.HeaderStoreProvider, { namePrefix: config?.keyPrefix, children: (0, jsx_runtime_1.jsx)(chains_1.ChainOrderStoreProvider, { namePrefix: config?.keyPrefix, children: (0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: config?.keyPrefix, children: children }) }) }) }));
 };
 exports.StoreProvider = StoreProvider;

package/cjs/stores/routes/createRouteExecutionStore.js

@@ -154,7 +154,7 @@ const createRouteExecutionStore = ({ namePrefix }) => (0, traditional_1.createWi
             }
         }
         catch (error) {
-            console.log(error);
+            console.error(error);
         }
         return state;
     },

package/cjs/stores/settings/types.d.ts

@@ -35,12 +35,13 @@ export interface SendToWalletStore extends SendToWalletState {
     toggleSendToWallet(): void;
     setSendToWallet(value: boolean): void;
 }
+export type SplitSubvariantOptions = 'bridge' | 'swap';
 export interface SplitSubvariantState {
-    state?: 'swap' | 'bridge';
-    setState(state: 'swap' | 'bridge'): void;
+    state?: SplitSubvariantOptions;
+    setState(state: SplitSubvariantOptions): void;
 }
 export type SplitSubvariantStore = UseBoundStoreWithEqualityFn<StoreApi<SplitSubvariantState>>;
 export interface SplitSubvariantProps {
-    state?: 'swap' | 'bridge';
+    state?: SplitSubvariantOptions;
 }
 export type SplitSubvariantProviderProps = PropsWithChildren<SplitSubvariantProps>;

package/cjs/stores/settings/useSettingsStore.d.ts

@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '../../types';
 import type { SettingsProps, SettingsState } from './types';
-export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage'>;
+export declare const defaultConfigurableSettings: Pick<SettingsState, 'routePriority' | 'slippage' | 'gasPrice'>;
 export declare const defaultSettings: SettingsProps;
 export declare const useSettingsStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand").StoreApi<SettingsState>>;
 export declare const setDefaultSettings: (config?: WidgetConfig) => void;

package/cjs/stores/settings/useSettingsStore.js

@@ -7,6 +7,7 @@ const types_1 = require("./types");
 exports.defaultConfigurableSettings = {
     routePriority: 'RECOMMENDED',
     slippage: '0.5',
+    gasPrice: 'normal',
 };
 exports.defaultSettings = {
     appearance: 'auto',
@@ -67,10 +68,10 @@ exports.useSettingsStore = (0, traditional_1.createWithEqualityFn)((0, middlewar
         }, {}),
     })),
     reset: (config, bridges, exchanges) => {
+        const { appearance, ...restDefaultSettings } = exports.defaultSettings;
         set(() => ({
-            ...exports.defaultSettings,
+            ...restDefaultSettings,
             ...exports.defaultConfigurableSettings,
-            appearance: config.appearance ?? exports.defaultSettings.appearance,
         }));
         get().initializeTools('Bridges', bridges, true);
         get().initializeTools('Exchanges', exchanges, true);
@@ -102,7 +103,7 @@ exports.useSettingsStore = (0, traditional_1.createWithEqualityFn)((0, middlewar
     },
 }), Object.is);
 const setDefaultSettings = (config) => {
-    const { slippage, routePriority, setValue } = exports.useSettingsStore.getState();
+    const { slippage, routePriority, setValue, gasPrice } = exports.useSettingsStore.getState();
     const defaultSlippage = (config?.slippage ||
         config?.sdkConfig?.defaultRouteOptions?.slippage ||
         0) * 100;
@@ -116,5 +117,8 @@ const setDefaultSettings = (config) => {
     if (!routePriority) {
         setValue('routePriority', exports.defaultConfigurableSettings.routePriority);
     }
+    if (!gasPrice) {
+        setValue('gasPrice', exports.defaultConfigurableSettings.gasPrice);
+    }
 };
 exports.setDefaultSettings = setDefaultSettings;

package/cjs/stores/settings/useSplitSubvariantStore.js

@@ -7,7 +7,7 @@ const traditional_1 = require("zustand/traditional");
 exports.SplitSubvariantStoreContext = (0, react_1.createContext)(null);
 const shouldRecreateStore = (store, props) => {
     const { state } = store.getState();
-    return (!state && props.state) || (state && !props.state);
+    return state !== props.state;
 };
 function SplitSubvariantStoreProvider({ children, ...props }) {
     const storeRef = (0, react_1.useRef)();

package/cjs/types/widget.d.ts

@@ -4,6 +4,7 @@ import type { Components, PaletteMode, PaletteOptions, Shape, Theme } from '@mui
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { CSSProperties, ReactNode, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
+import type { SplitSubvariantOptions } from '../stores';
 export type WidgetVariant = 'default' | 'expandable' | 'drawer';
 export type WidgetSubvariant = 'default' | 'split' | 'nft' | 'refuel';
 export declare enum DisabledUI {
@@ -71,14 +72,16 @@ export interface WidgetConfig {
     contractSecondaryComponent?: ReactNode;
     contractCompactComponent?: ReactNode;
     contractTool?: WidgetContractTool;
-    fee?: number;
     integrator: string;
+    apiKey?: string;
+    fee?: number;
     referrer?: string;
     routePriority?: Order;
     slippage?: number;
     insurance?: boolean;
     variant?: WidgetVariant;
     subvariant?: WidgetSubvariant;
+    subvariantOptions?: SplitSubvariantOptions;
     appearance?: Appearance;
     theme?: ThemeConfig;
     containerStyle?: CSSProperties;

package/components/Card/CardLabel.d.ts

@@ -2,7 +2,7 @@
 export declare const CardLabel: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    type?: "insurance" | "active" | "insurance-icon" | undefined;
+    type?: "active" | "insurance" | "insurance-icon" | undefined;
 }, {}, {}>;
 export declare const CardLabelTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;

package/components/GasMessage/GasMessage.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Collapse } from '@mui/material';
-import { useFundsSufficiency, useGasSufficiency } from '../../hooks';
+import { useFromTokenSufficiency, useGasSufficiency } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { FundsSufficiencyMessage } from './FundsSufficiencyMessage';
 import { GasSufficiencyMessage } from './GasSufficiencyMessage';
 export const GasMessage = ({ route, ...props }) => {
     const { insufficientGas } = useGasSufficiency(route);
-    const { insufficientFunds } = useFundsSufficiency(route);
+    const { insufficientFromToken } = useFromTokenSufficiency(route);
     const { sdkConfig } = useWidgetConfig();
     const isMultisigSigner = sdkConfig?.multisigConfig?.isMultisigSigner;
     const validInsufficientGas = insufficientGas?.length && !isMultisigSigner;
-    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFunds || validInsufficientGas), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFunds ? (_jsx(FundsSufficiencyMessage, {})) : validInsufficientGas ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
+    return (_jsx(Collapse, { timeout: 225, in: Boolean(insufficientFromToken || validInsufficientGas), unmountOnExit: true, mountOnEnter: true, children: _jsx(Box, { ...props, children: insufficientFromToken ? (_jsx(FundsSufficiencyMessage, {})) : validInsufficientGas ? (_jsx(GasSufficiencyMessage, { insufficientGas: insufficientGas })) : null }) }));
 };

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.4.5";
+export declare const version = "2.5.0";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '2.4.5';
+export const version = '2.5.0';

package/hooks/index.d.ts

@@ -5,7 +5,7 @@ export * from './useDebouncedWatch';
 export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
-export * from './useFundsSufficiency';
+export * from './useFromTokenSufficiency';
 export * from './useGasRecommendation';
 export * from './useGasRefuel';
 export * from './useGasSufficiency';

package/hooks/index.js

@@ -5,7 +5,7 @@ export * from './useDebouncedWatch';
 export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
-export * from './useFundsSufficiency';
+export * from './useFromTokenSufficiency';
 export * from './useGasRecommendation';
 export * from './useGasRefuel';
 export * from './useGasSufficiency';

package/hooks/useFromTokenSufficiency.d.ts

@@ -0,0 +1,5 @@
+import type { Route } from '@lifi/sdk';
+export declare const useFromTokenSufficiency: (route?: Route) => {
+    insufficientFromToken: boolean | undefined;
+    isInitialLoading: boolean;
+};

package/hooks/{useFundsSufficiency.js → useFromTokenSufficiency.js}

@@ -6,7 +6,7 @@ import { isRouteDone } from '../stores';
 import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 import { useTokenAddressBalance } from './useTokenAddressBalance';
 const refetchInterval = 30000;
-export const useFundsSufficiency = (route) => {
+export const useFromTokenSufficiency = (route) => {
     const { account } = useWallet();
     const getTokenBalancesWithRetry = useGetTokenBalancesWithRetry(account.signer?.provider);
     const [fromChainId, fromTokenAddress, fromAmount] = useWatch({
@@ -19,8 +19,8 @@ export const useFundsSufficiency = (route) => {
         tokenAddress = route.fromToken.address;
     }
     const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-    const { data: insufficientFunds, isInitialLoading } = useQuery([
-        'funds-sufficiency-check',
+    const { data: insufficientFromToken, isInitialLoading } = useQuery([
+        'from-token-sufficiency-check',
         account.address,
         chainId,
         tokenAddress,
@@ -59,7 +59,7 @@ export const useFundsSufficiency = (route) => {
         keepPreviousData: true,
     });
     return {
-        insufficientFunds,
+        insufficientFromToken,
         isInitialLoading,
     };
 };

package/hooks/useGasSufficiency.js

@@ -27,21 +27,27 @@ export const useGasSufficiency = (route) => {
                 const gasCostAmount = step.estimate.gasCosts
                     .reduce((amount, gasCost) => amount.plus(Big(gasCost.amount || 0)), Big(0))
                     .div(10 ** token.decimals);
-                const groupedGasCost = groupedGasCosts[token.chainId];
-                const gasAmount = groupedGasCost
-                    ? groupedGasCost.gasAmount.plus(gasCostAmount)
-                    : gasCostAmount;
                 groupedGasCosts[token.chainId] = {
-                    gasAmount,
-                    tokenAmount: gasAmount,
+                    gasAmount: groupedGasCosts[token.chainId]?.gasAmount.plus(gasCostAmount) ?? gasCostAmount,
+                    token,
+                };
+            }
+            // Add fees paid in native tokens to gas sufficiency check (included: false)
+            const nonIncludedFeeCosts = step.estimate.feeCosts?.filter((feeCost) => !feeCost.included);
+            if (nonIncludedFeeCosts?.length) {
+                const { token } = nonIncludedFeeCosts[0];
+                const feeCostAmount = nonIncludedFeeCosts
+                    .reduce((amount, feeCost) => amount.plus(Big(feeCost.amount || 0)), Big(0))
+                    .div(10 ** token.decimals);
+                groupedGasCosts[token.chainId] = {
+                    gasAmount: groupedGasCosts[token.chainId]?.gasAmount.plus(feeCostAmount) ?? feeCostAmount,
                     token,
                 };
-                return groupedGasCosts;
             }
             return groupedGasCosts;
         }, {});
         if (route.fromToken.address === gasCosts[route.fromChainId]?.token.address) {
-            gasCosts[route.fromChainId].tokenAmount = gasCosts[route.fromChainId]?.gasAmount.plus(Big(route.fromAmount).div(10 ** route.fromToken.decimals));
+            gasCosts[route.fromChainId].tokenAmount = gasCosts[route.fromChainId].gasAmount.plus(Big(route.fromAmount).div(10 ** route.fromToken.decimals));
         }
         const tokenBalances = await getTokenBalancesWithRetry(account.address, Object.values(gasCosts).map((item) => item.token));
         if (!tokenBalances?.length) {

package/i18n/en.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Route priority",
     "showDestinationWallet": "Show destination wallet",
-    "slippage": "Slippage"
+    "slippage": "Slippage",
+    "resetSettings": "You're using custom setting limiting the number of available routes."
   },
   "wallet": {
     "extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."

package/i18n/pt.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Prioridade de rota / caminho",
     "showDestinationWallet": "Mostrar carteira de destino",
-    "slippage": "Derrapagem"
+    "slippage": "Derrapagem",
+    "resetSettings": "Você está usando a configuração personalizada que limita a quantidade de rotas disponíveis."
   },
   "wallet": {
     "extensionNotFound": "Por favor, certifique-se de que apenas a extensão do navegador da {{name}} está ativa antes de escolher esta carteira."

package/i18n/tr.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Rota önceliği",
     "showDestinationWallet": "Hedef Adresi Göster",
-    "slippage": "Sapma toleransı"
+    "slippage": "Sapma toleransı",
+    "resetSettings": "Kullanılabilir rotaların sayısını sınırlayan özel bir ayar kullanıyorsunuz."
   },
   "wallet": {
     "extensionNotFound": "Lütfen bu cüzdanı seçmeden önce yalnızca {{name}} tarayıcı uzantısının etkin olduğundan emin olun."

package/i18n/uk.json

@@ -255,7 +255,8 @@
     },
     "routePriority": "Пріоритет маршруту",
     "showDestinationWallet": "Показати цільовий гаманець",
-    "slippage": "Прослизання"
+    "slippage": "Прослизання",
+    "resetSettings": "Ви використовуєте налаштування які можуть обмежувати кількість доступних маршрутів."
   },
   "wallet": {
     "extensionNotFound": "Перш ніж вибрати цей гаманець, переконайтеся, що в браузері активне лише розширення {{name}}."