@lifi/widget 1.32.7 → 2.0.0-alpha.0

package/cjs/index.d.ts

@@ -7,9 +7,3 @@ export { useWidgetEvents, widgetEvents } from './hooks';
 export { useWallet } from './providers/WalletProvider';
 export * from './types';
 export declare const LiFiWidget: import("react").FC<import("./types").WidgetProps>;
-/**
- * @deprecated Use configuration { variant: 'drawer' } instead
- */
-export declare const LiFiWidgetDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & import("./types").WidgetConfig & {
-    config?: import("./types").WidgetConfig | undefined;
-} & import("react").RefAttributes<import("./AppDrawer").WidgetDrawer>>;

package/cjs/index.js

@@ -14,9 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LiFiWidgetDrawer = exports.LiFiWidget = exports.useWallet = exports.widgetEvents = exports.useWidgetEvents = void 0;
+exports.LiFiWidget = exports.useWallet = exports.widgetEvents = exports.useWidgetEvents = void 0;
 const App_1 = require("./App");
-const AppDrawer_1 = require("./AppDrawer");
 // TODO: remove or make optional
 require("./fonts/inter.css");
 __exportStar(require("./components/NFT"), exports);
@@ -31,7 +30,3 @@ __exportStar(require("./types"), exports);
 //   componentName.replace('Mui', 'LiFi'),
 // );
 exports.LiFiWidget = App_1.App;
-/**
- * @deprecated Use configuration { variant: 'drawer' } instead
- */
-exports.LiFiWidgetDrawer = AppDrawer_1.AppDrawer;

package/cjs/pages/MainPage/MainGasMessage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+export declare const MainGasMessage: React.FC<BoxProps>;

package/cjs/pages/MainPage/MainGasMessage.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainGasMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GasMessage_1 = require("../../components/GasMessage");
+const hooks_1 = require("../../hooks");
+const MainGasMessage = (props) => {
+    const { routes } = (0, hooks_1.useSwapRoutes)();
+    const currentRoute = routes?.[0];
+    return (0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { route: currentRoute, ...props });
+};
+exports.MainGasMessage = MainGasMessage;

package/cjs/pages/MainPage/MainPage.js

@@ -5,19 +5,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const ActiveSwaps_1 = require("../../components/ActiveSwaps");
 const ContractComponent_1 = require("../../components/ContractComponent");
-const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
+const GasMessage_1 = require("../../components/GasMessage");
 const SelectChainAndToken_1 = require("../../components/SelectChainAndToken");
 const SendToWallet_1 = require("../../components/SendToWallet");
 const SwapInput_1 = require("../../components/SwapInput");
 const SwapRoutes_1 = require("../../components/SwapRoutes");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
+const MainGasMessage_1 = require("./MainGasMessage");
 const MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
 const MainPage = () => {
     const expandable = (0, hooks_1.useExpandableVariant)();
     const { variant } = (0, providers_1.useWidgetConfig)();
     const nft = variant === 'nft';
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), nft ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), !nft ? (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from", mx: 3, mb: 3 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }) : null, (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mx: 3, mb: 1, children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, { disableGutters: true, children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 1 }), nft ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mx: 3, mt: 1, mb: 1 }) : null, (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 2 }), !nft ? (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from", mx: 3, mb: 2 }) : null, !expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 2 }) : null, (0, jsx_runtime_1.jsx)(GasMessage_1.GasRefuelMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsx)(MainGasMessage_1.MainGasMessage, { mx: 3, mb: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mx: 3, mb: 1, children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}), (0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWalletButton, {})] })] })] }));
 };
 exports.MainPage = MainPage;

package/cjs/pages/MainPage/MainSwapButton.js

@@ -22,6 +22,6 @@ const MainSwapButton = () => {
             });
         }
     };
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disabled: currentRoute && (isLoading || isFetching || isValidating || !isValid) }));
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, hasRoute: Boolean(currentRoute), disabled: currentRoute && (isLoading || isFetching || isValidating || !isValid) }));
 };
 exports.MainSwapButton = MainSwapButton;

package/cjs/pages/SettingsPage/ColorSchemeButtonGroup.js

@@ -13,9 +13,9 @@ const types_1 = require("../../types");
 const ColorSchemeButtonGroup_style_1 = require("./ColorSchemeButtonGroup.style");
 const ColorSchemeButtonGroup = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { disableAppearance, hiddenUI } = (0, providers_1.useWidgetConfig)();
+    const { hiddenUI } = (0, providers_1.useWidgetConfig)();
     const [appearance, setAppearance] = (0, stores_1.useAppearance)();
-    if (disableAppearance || hiddenUI?.includes(types_1.HiddenUI.Appearance)) {
+    if (hiddenUI?.includes(types_1.HiddenUI.Appearance)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { pb: 2, children: (0, jsx_runtime_1.jsxs)(material_1.ToggleButtonGroup, { color: "primary", value: appearance, onChange: (_, value) => {

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

@@ -2,14 +2,14 @@
 export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | "standard" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"success" | "warning" | "error" | "primary" | "secondary" | "info" | "standard", import("@mui/material").ToggleButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;
     onChange?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
     onClick?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
     selected?: boolean | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ToggleButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     value: {};
 } & Omit<{

package/cjs/pages/SettingsPage/ResetSettingsButton.js

@@ -7,10 +7,12 @@ const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const Dialog_1 = require("../../components/Dialog");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const ResetSettingsButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { tools } = (0, hooks_1.useTools)();
+    const config = (0, providers_1.useWidgetConfig)();
     const resetSettings = (0, stores_1.useSettingsStore)((state) => state.reset);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
@@ -18,7 +20,7 @@ const ResetSettingsButton = () => {
     }, []);
     const handleReset = () => {
         if (tools) {
-            resetSettings(tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
+            resetSettings(config, tools.bridges.map((tool) => tool.key), tools.exchanges.map((tool) => tool.key));
         }
         toggleDialog();
     };

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -15,7 +15,7 @@ const RoutePrioritySelect = () => {
     const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
     const value = routePriority ?? '';
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDown_1.default, dense: true, children: sdk_1.Orders.map((order) => {
-                        const tag = t(`swap.tags.${order.toUpperCase()}`);
+                        const tag = t(`swap.tags.${order.toLowerCase()}`);
                         const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
                         return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: order, children: tagName }, order));
                     }) }) })] }));

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapDetailsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ContentCopy_1 = require("@mui/icons-material/ContentCopy");
+const ContentCopyRounded_1 = require("@mui/icons-material/ContentCopyRounded");
 const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -12,6 +12,7 @@ const shallow_1 = require("zustand/shallow");
 const Card_1 = require("../../components/Card");
 const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
+const Insurance_1 = require("../../components/Insurance");
 const Step_1 = require("../../components/Step");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
@@ -50,9 +51,9 @@ const SwapDetailsPage = () => {
                     justifyContent: 'space-between',
                 }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insurableRouteId: routeExecution.route.id })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopy_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (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: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwapHistory') }) }), (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: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };
 exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ExchangeRateUpdateParams, Route } from '@lifi/sdk';
+import type { ExchangeRateUpdateParams } from '@lifi/sdk';
 export interface ExchangeRateBottomSheetBase {
     isOpen(): void;
     open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
@@ -11,5 +11,4 @@ interface ExchangeRateBottomSheetProps {
     onCancel?(): void;
 }
 export declare const ExchangeRateBottomSheet: import("react").ForwardRefExoticComponent<ExchangeRateBottomSheetProps & import("react").RefAttributes<ExchangeRateBottomSheetBase>>;
-export declare const getTokenValueLossThreshold: (route?: Route) => boolean;
 export {};

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTokenValueLossThreshold = exports.ExchangeRateBottomSheet = void 0;
+exports.ExchangeRateBottomSheet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
 const material_1 = require("@mui/material");
@@ -58,16 +58,3 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
                                 .round(2, big_js_1.default.roundUp)
                                 .toString(), "%"] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
 };
-const getTokenValueLossThreshold = (route) => {
-    if (!route) {
-        return false;
-    }
-    const fromAmountUSD = (0, big_js_1.default)(route?.fromAmountUSD || 0);
-    const toAmountUSD = (0, big_js_1.default)(route?.toAmountUSD || 0);
-    const gasCostUSD = (0, big_js_1.default)(route?.gasCostUSD || 0);
-    if (fromAmountUSD.eq(0) && toAmountUSD.eq(0)) {
-        return false;
-    }
-    return toAmountUSD.div(fromAmountUSD.plus(gasCostUSD)).lt(0.9);
-};
-exports.getTokenValueLossThreshold = getTokenValueLossThreshold;

package/cjs/pages/SwapPage/StartSwapButton.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-import type { SwapButtonProps } from '../../components/SwapButton';
-export declare const StartSwapButton: React.FC<SwapButtonProps>;
+import type { StartSwapButtonProps } from './types';
+export declare const StartSwapButton: React.FC<StartSwapButtonProps>;
+export declare const StartIdleSwapButton: React.FC<StartSwapButtonProps>;

package/cjs/pages/SwapPage/StartSwapButton.js

@@ -1,11 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StartSwapButton = void 0;
+exports.StartIdleSwapButton = exports.StartSwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
-const StartSwapButton = ({ onClick, currentRoute, text, }) => {
-    const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = (0, hooks_1.useGasSufficiency)(currentRoute);
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: onClick, text: text, currentRoute: currentRoute, disabled: insufficientFunds || !!insufficientGas?.length, loading: isGasSufficiencyLoading }));
+const stores_1 = require("../../stores");
+const StartSwapButton = ({ onClick, route, text, loading, }) => {
+    const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = (0, hooks_1.useGasSufficiency)(route);
+    const { insufficientFunds, isInitialLoading: isFundsSufficiencyLoading } = (0, hooks_1.useFundsSufficiency)(route);
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: onClick, text: text, hasRoute: Boolean(route), disabled: insufficientFunds || !!insufficientGas?.length, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
 };
 exports.StartSwapButton = StartSwapButton;
+const StartIdleSwapButton = ({ onClick, route, text, loading, disabled, insurableRouteId, }) => {
+    const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[insurableRouteId]);
+    const { isFetching } = (0, hooks_1.useSwapRoutes)({
+        insurableRoute: routeExecution?.route,
+    });
+    return ((0, jsx_runtime_1.jsx)(exports.StartSwapButton, { onClick: onClick, text: text, route: route, disabled: disabled, loading: loading || isFetching, insurableRouteId: insurableRouteId }));
+};
+exports.StartIdleSwapButton = StartIdleSwapButton;

package/cjs/pages/SwapPage/SwapPage.js

@@ -8,7 +8,8 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
-const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
+const GasMessage_1 = require("../../components/GasMessage");
+const Insurance_1 = require("../../components/Insurance");
 const Step_1 = require("../../components/Step");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
@@ -20,14 +21,16 @@ const SwapPage_style_1 = require("./SwapPage.style");
 const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
 const SwapPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
-    const { state } = (0, react_router_dom_1.useLocation)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { variant, insurance } = (0, providers_1.useWidgetConfig)();
+    const { state } = (0, react_router_dom_1.useLocation)();
+    const stateRouteId = state?.routeId;
+    const [routeId, setRouteId] = (0, react_1.useState)(stateRouteId);
     const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
     const exchangeRateBottomSheetRef = (0, react_1.useRef)(null);
-    const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)({
-        routeId: state?.routeId,
+        routeId: routeId,
         onAcceptExchangeRateUpdate: exchangeRateBottomSheetRef.current?.open,
     });
     const handleExecuteRoute = (0, react_1.useCallback)(() => {
@@ -67,8 +70,16 @@ const SwapPage = () => {
                 return '';
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), status === stores_1.RouteExecutionStatus.Idle ||
-                status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(StartSwapButton_1.StartSwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
+    const SwapButton = insurance && status === stores_1.RouteExecutionStatus.Idle
+        ? StartSwapButton_1.StartIdleSwapButton
+        : StartSwapButton_1.StartSwapButton;
+    const insuranceAvailable = insurance &&
+        variant !== 'refuel' &&
+        (route?.insurance?.state === 'INSURED' ||
+            (status === stores_1.RouteExecutionStatus.Idle &&
+                route?.insurance?.state === 'INSURABLE'));
+    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route?.insurance.feeAmountUsd, onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
+                status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { mt: 2, route: route }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, route: route, insurableRouteId: stateRouteId }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeSwap'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
                                         minWidth: 48,
                                         marginLeft: 1,
                                     }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) })) : null] })] })) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null, route ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, route ? ((0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })) : null] }));

package/cjs/pages/SwapPage/types.d.ts

@@ -0,0 +1,9 @@
+import type { Route } from '@lifi/sdk';
+export interface StartSwapButtonProps {
+    onClick?(): void;
+    route?: Route;
+    text?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    insurableRouteId: string;
+}

package/cjs/pages/SwapPage/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -33,6 +33,6 @@ const SwapRoutesPage = () => {
             .setAction((0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
     }, [dataUpdatedAt, isFetching, refetch, refetchTime]);
     const routeNotFound = !swapRoutes?.length && !isLoading && !isFetching;
-    return ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0 }, route.id)))) }));
+    return ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, { direction: "column", spacing: 2, flex: 1, children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes?.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0, expanded: swapRoutes?.length <= 2 }, route.id)))) }));
 };
 exports.SwapRoutesPage = SwapRoutesPage;

package/cjs/providers/SDKProvider/SDKProvider.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import LIFI from '@lifi/sdk';
-export declare const useLiFi: () => LIFI;
+import { LiFi } from '@lifi/sdk';
+export declare const useLiFi: () => LiFi;
 export declare const SDKProvider: React.FC<React.PropsWithChildren>;

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -14,6 +14,7 @@ const SDKProvider = ({ children, }) => {
     const value = (0, react_1.useMemo)(() => {
         const config = {
             ...sdkConfig,
+            integrator: integrator ?? window.location.hostname,
             defaultRouteOptions: {
                 fee,
                 integrator: integrator ?? window.location.hostname,
@@ -24,7 +25,7 @@ const SDKProvider = ({ children, }) => {
             },
         };
         if (!lifi) {
-            lifi = new sdk_1.default({
+            lifi = new sdk_1.LiFi({
                 disableVersionCheck: true,
                 ...config,
             });

package/cjs/providers/SwapFormProvider/FormUpdater.js

@@ -8,7 +8,7 @@ const SwapFormProvider_1 = require("../SwapFormProvider");
 const WalletProvider_1 = require("../WalletProvider");
 const WidgetProvider_1 = require("../WidgetProvider");
 const FormUpdater = ({ defaultValues }) => {
-    const { fromChain, toChain, chains, disabledChains } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { fromChain, toChain, chains } = (0, WidgetProvider_1.useWidgetConfig)();
     const { account } = (0, WalletProvider_1.useWallet)();
     const { setValue, getValues, getFieldState, resetField, 
     // Subscription to touchedFields is required by getFieldState to work
@@ -16,7 +16,7 @@ const FormUpdater = ({ defaultValues }) => {
     const previousDefaultValues = (0, react_1.useRef)(defaultValues);
     // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
     (0, react_1.useEffect)(() => {
-        const chainAllowed = account.chainId && (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains, disabledChains);
+        const chainAllowed = account.chainId && (0, WidgetProvider_1.isItemAllowed)(account.chainId, chains);
         if (!account.isActive || !account.chainId || !chainAllowed) {
             return;
         }
@@ -40,7 +40,6 @@ const FormUpdater = ({ defaultValues }) => {
         account.chainId,
         account.isActive,
         chains,
-        disabledChains,
         fromChain,
         getFieldState,
         getValues,

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -7,14 +7,17 @@ const react_1 = require("react");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const initialContext = {
-    disabledChains: [],
     elementId: '',
+    integrator: '',
 };
 const WidgetContext = (0, react_1.createContext)(initialContext);
 const useWidgetConfig = () => (0, react_1.useContext)(WidgetContext);
 exports.useWidgetConfig = useWidgetConfig;
-const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toToken, fromAmount, ...config } = {}, }) => {
+const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toToken, fromAmount, integrator, ...config } = {}, }) => {
     const elementId = (0, react_1.useId)();
+    if (!integrator) {
+        throw Error('Required property "integrator" is missing.');
+    }
     const value = (0, react_1.useMemo)(() => {
         try {
             const searchParams = Object.fromEntries(new URLSearchParams(window?.location.search));
@@ -50,15 +53,25 @@ const WidgetProvider = ({ children, config: { fromChain, fromToken, toChain, toT
                     ? (0, utils_1.formatAmount)(searchParams.fromAmount)
                     : fromAmount,
                 elementId,
+                integrator,
             };
             (0, stores_1.setDefaultSettings)(value);
             return value;
         }
         catch (e) {
             console.warn(e);
-            return { ...config, elementId };
+            return { ...config, elementId, integrator };
         }
-    }, [config, elementId, fromAmount, fromChain, fromToken, toChain, toToken]);
+    }, [
+        config,
+        elementId,
+        fromAmount,
+        fromChain,
+        fromToken,
+        integrator,
+        toChain,
+        toToken,
+    ]);
     return ((0, jsx_runtime_1.jsx)(WidgetContext.Provider, { value: value, children: children }));
 };
 exports.WidgetProvider = WidgetProvider;

package/cjs/providers/WidgetProvider/utils.d.ts

@@ -1,4 +1,4 @@
 export declare const isItemAllowed: <T>(itemId: T, items?: {
     allow?: T[] | undefined;
     deny?: T[] | undefined;
-} | undefined, disabledChains?: T[] | undefined) => boolean;
+} | undefined) => boolean;

package/cjs/providers/WidgetProvider/utils.js

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isItemAllowed = void 0;
-const isItemAllowed = (itemId, items, 
-/** @deprecated Remove in the next major release */
-disabledChains) => {
+const isItemAllowed = (itemId, items) => {
     if (items?.allow?.length) {
         return items.allow.includes(itemId);
     }
-    return !(disabledChains?.includes(itemId) || items?.deny?.includes(itemId));
+    return !items?.deny?.includes(itemId);
 };
 exports.isItemAllowed = isItemAllowed;

package/cjs/stores/StoreProvider.js

@@ -4,6 +4,6 @@ exports.StoreProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const routes_1 = require("./routes");
 const StoreProvider = ({ children, namePrefix }) => {
-    return ((0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: namePrefix, children: (0, jsx_runtime_1.jsx)(routes_1.RecommendedRouteStoreProvider, { children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(routes_1.RouteExecutionStoreProvider, { namePrefix: namePrefix, children: children }));
 };
 exports.StoreProvider = StoreProvider;

package/cjs/stores/routes/createRouteExecutionStore.js

@@ -8,13 +8,14 @@ const types_1 = require("./types");
 const utils_2 = require("./utils");
 const createRouteExecutionStore = ({ namePrefix }) => (0, zustand_1.create)((0, middleware_1.persist)((set, get) => ({
     routes: {},
-    setExecutableRoute: (route) => {
+    setExecutableRoute: (route, insurableRouteId) => {
         if (!get().routes[route.id]) {
             set((state) => {
                 const routes = { ...state.routes };
                 // clean previous idle routes that were not executed
                 Object.keys(routes)
-                    .filter((routeId) => routes[routeId]?.status === types_1.RouteExecutionStatus.Idle)
+                    .filter((routeId) => routeId !== insurableRouteId &&
+                    routes[routeId]?.status === types_1.RouteExecutionStatus.Idle)
                     .forEach((routeId) => delete routes[routeId]);
                 routes[route.id] = {
                     route,

package/cjs/stores/routes/index.d.ts

@@ -1,7 +1,6 @@
 export * from './RouteExecutionStore';
 export * from './types';
 export * from './useExecutingRoutesIds';
-export * from './useRecommendedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/cjs/stores/routes/index.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./RouteExecutionStore"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./useExecutingRoutesIds"), exports);
-__exportStar(require("./useRecommendedRouteStore"), exports);
 __exportStar(require("./useSetExecutableRoute"), exports);
 __exportStar(require("./useSwapHistory"), exports);
 __exportStar(require("./utils"), exports);

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

@@ -5,7 +5,7 @@ export interface RouteExecution {
 }
 export interface RouteExecutionState {
     routes: Partial<Record<string, RouteExecution>>;
-    setExecutableRoute: (route: Route) => void;
+    setExecutableRoute: (route: Route, insurableRouteId?: string) => void;
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
     deleteRoute: (routeId: string) => void;
@@ -19,7 +19,3 @@ export declare enum RouteExecutionStatus {
     Partial = 8,
     Refunded = 16
 }
-export interface RecommendedRouteState {
-    recommendedRoute?: Route;
-    setRecommendedRoute: (route?: Route) => void;
-}

package/cjs/stores/routes/useSetExecutableRoute.d.ts

@@ -1 +1 @@
-export declare const useSetExecutableRoute: () => (route: import("@lifi/types").Route) => void;
+export declare const useSetExecutableRoute: () => (route: import("@lifi/types").Route, insurableRouteId?: string | undefined) => void;

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

@@ -1,5 +1,5 @@
 import type { Order } from '@lifi/sdk';
-import type { Appearance } from '../../types';
+import type { Appearance, WidgetConfig } from '../../types';
 export type ValueSetter<S> = <K extends keyof S>(key: K, value: S[Extract<K, string>]) => void;
 export type ValuesSetter<S> = <K extends keyof S>(values: Record<K, S[Extract<K, string>]>) => void;
 export type SettingsToolType = 'Bridges' | 'Exchanges';
@@ -9,6 +9,7 @@ export interface SettingsProps {
     gasPrice?: string;
     language?: string;
     routePriority?: Order;
+    enabledAutoRefuel: boolean;
     showDestinationWallet: boolean;
     slippage?: string;
     enabledBridges: string[];
@@ -21,7 +22,7 @@ export interface SettingsState extends SettingsProps {
     setValues: ValuesSetter<SettingsProps>;
     initializeTools(toolType: SettingsToolType, tools: string[], reset?: boolean): void;
     setTools(toolType: SettingsToolType, tools: string[], availableTools: string[]): void;
-    reset(bridges: string[], exchanges: string[]): void;
+    reset(config: WidgetConfig, bridges: string[], exchanges: string[]): void;
 }
 export interface SendToWalletState {
     showSendToWallet: boolean;

package/cjs/stores/settings/useSettingsStore.js

@@ -11,6 +11,7 @@ exports.defaultConfigurableSettings = {
 exports.defaultSettings = {
     appearance: 'auto',
     gasPrice: 'normal',
+    enabledAutoRefuel: true,
     showDestinationWallet: true,
     enabledBridges: [],
     enabledExchanges: [],
@@ -65,10 +66,11 @@ exports.useSettingsStore = (0, zustand_1.create)((0, middleware_1.persist)((set,
             return values;
         }, {}),
     })),
-    reset: (bridges, exchanges) => {
+    reset: (config, bridges, exchanges) => {
         set(() => ({
             ...exports.defaultSettings,
             ...exports.defaultConfigurableSettings,
+            appearance: config.appearance ?? exports.defaultSettings.appearance,
         }));
         get().initializeTools('Bridges', bridges, true);
         get().initializeTools('Exchanges', exchanges, true);

package/cjs/types/widget.d.ts

@@ -38,8 +38,8 @@ export interface WidgetWalletManagement {
     addChain?(chainId: number): Promise<boolean>;
     signer?: Signer;
 }
-export interface SDKConfig extends Omit<ConfigUpdate, 'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck'> {
-    defaultRouteOptions?: Omit<RouteOptions, 'bridges' | 'exchanges'>;
+export interface SDKConfig extends Omit<ConfigUpdate, 'defaultExecutionSettings' | 'defaultRouteOptions' | 'disableVersionCheck' | 'integrator'> {
+    defaultRouteOptions?: Omit<RouteOptions, 'bridges' | 'exchanges' | 'insurance'>;
 }
 export interface WidgetContractTool {
     logoURI: string;
@@ -66,10 +66,11 @@ export interface WidgetConfig {
     contractCompactComponent?: ReactNode;
     contractTool?: WidgetContractTool;
     fee?: number;
-    integrator?: string;
+    integrator: string;
     referrer?: string;
-    slippage?: number;
     routePriority?: Order;
+    slippage?: number;
+    insurance?: boolean;
     variant?: WidgetVariant;
     appearance?: Appearance;
     theme?: ThemeConfig;
@@ -107,12 +108,6 @@ export interface WidgetConfig {
     };
     languageResources?: LanguageResources;
     disableI18n?: boolean;
-    /** @deprecated Use hiddenUI: ['appearance'] instead */
-    disableAppearance?: boolean;
-    /** @deprecated Use chains.deny instead */
-    disabledChains?: number[];
-    /** @deprecated Use tokens.featured instead */
-    featuredTokens?: Token[];
 }
 export type WidgetDrawerProps = {
     elementRef?: RefObject<HTMLDivElement>;