@lifi/widget 1.32.8 → 2.0.0-alpha.1

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/pages/SwapRoutesPage/SwapRoutesPage.style.d.ts

@@ -4,7 +4,8 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
     divider?: import("react").ReactNode;
+    useFlexGap?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & 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/material/OverridableComponent").CommonProps | "children" | "sx" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "direction" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "divider" | "spacing" | "useFlexGap"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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/SwapFormProvider/SwapFormProvider.js

@@ -7,7 +7,6 @@ const react_hook_form_1 = require("react-hook-form");
 const WidgetProvider_1 = require("../WidgetProvider");
 const FormUpdater_1 = require("./FormUpdater");
 const types_1 = require("./types");
-const URLSearchParamsBuilder_1 = require("./URLSearchParamsBuilder");
 exports.formDefaultValues = {
     [types_1.SwapFormKey.FromAmount]: '',
     [types_1.SwapFormKey.ToAddress]: '',
@@ -19,7 +18,7 @@ exports.formDefaultValues = {
     [types_1.SwapFormKey.ToAmount]: '',
 };
 const SwapFormProvider = ({ children, }) => {
-    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress, buildSwapUrl, } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } = (0, WidgetProvider_1.useWidgetConfig)();
     const defaultValues = (0, react_1.useMemo)(() => ({
         ...exports.formDefaultValues,
         fromChain,
@@ -35,6 +34,6 @@ const SwapFormProvider = ({ children, }) => {
         // values,
         defaultValues,
     });
-    return ((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, { ...methods, children: [(0, jsx_runtime_1.jsx)(FormUpdater_1.FormUpdater, { defaultValues: defaultValues }), buildSwapUrl ? (0, jsx_runtime_1.jsx)(URLSearchParamsBuilder_1.URLSearchParamsBuilder, {}) : null, children] }));
+    return ((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, { ...methods, children: [(0, jsx_runtime_1.jsx)(FormUpdater_1.FormUpdater, { defaultValues: defaultValues }), children] }));
 };
 exports.SwapFormProvider = SwapFormProvider;

package/cjs/providers/SwapFormProvider/index.d.ts

@@ -1,2 +1,3 @@
 export * from './SwapFormProvider';
+export * from './URLSearchParamsBuilder';
 export * from './types';

package/cjs/providers/SwapFormProvider/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./SwapFormProvider"), exports);
+__exportStar(require("./URLSearchParamsBuilder"), exports);
 __exportStar(require("./types"), exports);

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

@@ -9,6 +9,7 @@ export interface SettingsProps {
     gasPrice?: string;
     language?: string;
     routePriority?: Order;
+    enabledAutoRefuel: boolean;
     showDestinationWallet: boolean;
     slippage?: string;
     enabledBridges: string[];

package/cjs/stores/settings/useSettingsStore.js

@@ -11,6 +11,7 @@ exports.defaultConfigurableSettings = {
 exports.defaultSettings = {
     appearance: 'auto',
     gasPrice: 'normal',
+    enabledAutoRefuel: true,
     showDestinationWallet: true,
     enabledBridges: [],
     enabledExchanges: [],

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>;

package/cjs/utils/format.js

@@ -54,7 +54,10 @@ const formatAmount = (amount = '', returnInitial = false) => {
     if (!amount) {
         return amount;
     }
-    const formattedAmount = amount.replaceAll(',', '.');
+    let formattedAmount = amount.replaceAll(',', '.');
+    if (formattedAmount.startsWith('.')) {
+        formattedAmount = '0' + formattedAmount;
+    }
     const parsedAmount = parseFloat(formattedAmount);
     if (isNaN(Number(formattedAmount)) && !isNaN(parsedAmount)) {
         return parsedAmount.toString();

package/components/ActiveSwaps/ActiveSwaps.style.d.ts

@@ -17,7 +17,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -35,21 +35,21 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "outlined" | "contained" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"text" | "outlined" | "contained", import("@mui/material").ButtonPropsVariantOverrides> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/components/Card/CardIconButton.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const CardIconButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").IconButtonPropsColorOverrides> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "large", import("@mui/material").IconButtonPropsSizeOverrides> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Card/CardIconButton.js

@@ -0,0 +1,14 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
+    const backgroundColor = theme.palette.mode === 'light'
+        ? theme.palette.common.black
+        : theme.palette.common.white;
+    return {
+        padding: theme.spacing(0.5),
+        backgroundColor: alpha(backgroundColor, 0.04),
+        '&:hover': {
+            backgroundColor: alpha(backgroundColor, 0.08),
+        },
+    };
+});

package/components/Card/CardLabel.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const CardLabel: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    type?: "active" | "insurance" | "insurance-icon" | undefined;
+}, {}, {}>;
+export declare const CardLabelTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "center" | "left" | "right" | "inherit" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides> | undefined;
+    variantMapping?: Partial<Record<import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides>, string>> | undefined;
+} & 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;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    type?: "icon" | undefined;
+}, {}, {}>;

package/components/Card/CardLabel.js

@@ -0,0 +1,42 @@
+import { Box, Typography } from '@mui/material';
+import { alpha, lighten, styled } from '@mui/material/styles';
+export const CardLabel = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'type',
+})(({ theme, type }) => ({
+    backgroundColor: type === 'active'
+        ? theme.palette.mode === 'light'
+            ? theme.palette.secondary.main
+            : alpha(theme.palette.secondary.main, 0.32)
+        : type?.includes('insurance')
+            ? alpha(theme.palette.success.main, theme.palette.mode === 'light' ? 0.12 : 0.24)
+            : theme.palette.mode === 'light'
+                ? alpha(theme.palette.common.black, 0.12)
+                : alpha(theme.palette.common.white, 0.16),
+    borderRadius: theme.shape.borderRadius,
+    color: type?.includes('insurance')
+        ? lighten(theme.palette.success.main, theme.palette.mode === 'light' ? 0 : 0.24)
+        : theme.palette.text.primary,
+    padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 24,
+    minWidth: 24,
+    userSelect: 'none',
+    fontSize: '1rem',
+    marginRight: theme.spacing(1),
+}));
+export const CardLabelTypography = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'type',
+})(({ theme, type }) => ({
+    padding: type === 'icon'
+        ? theme.spacing(0.75, 0, 0.75, 0.75)
+        : theme.spacing(0.75, 1.5),
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: '600',
+    textTransform: 'lowercase',
+    '&::first-letter': {
+        textTransform: 'uppercase',
+    },
+}));

package/components/Card/CardTitle.d.ts

@@ -7,8 +7,8 @@ export declare const CardTitle: import("@emotion/styled").StyledComponent<import
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides> | undefined;
+    variantMapping?: Partial<Record<import("@mui/types").OverridableStringUnion<"inherit" | import("@mui/material").TypographyVariant, import("@mui/material").TypographyPropsVariantOverrides>, string>> | undefined;
 } & 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;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {

package/components/Card/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Card';
 export * from './CardHeader';
+export * from './CardIconButton';
+export * from './CardLabel';
 export * from './CardTitle';

package/components/Card/index.js

@@ -1,3 +1,5 @@
 export * from './Card';
 export * from './CardHeader';
+export * from './CardIconButton';
+export * from './CardLabel';
 export * from './CardTitle';

package/components/GasMessage/FundsSufficiencyMessage.d.ts

@@ -0,0 +1 @@
+export declare const FundsSufficiencyMessage: () => JSX.Element;