@lifi/widget 1.17.1 → 1.18.0

package/cjs/hooks/useWidgetEvents.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWidgetEvents = void 0;
-const mitt_1 = __importDefault(require("mitt"));
-const zustand_1 = __importDefault(require("zustand"));
+const mitt_1 = require("mitt");
+const zustand_1 = require("zustand");
 const emitterStore = (0, zustand_1.default)()(() => (0, mitt_1.default)());
 const useWidgetEvents = () => {
     return emitterStore();

package/cjs/i18n/index.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureReactI18next = exports.resources = exports.defaultNS = void 0;
-const i18next_1 = __importDefault(require("i18next"));
+const i18next_1 = require("i18next");
 const react_i18next_1 = require("react-i18next");
-const translation_json_1 = __importDefault(require("./en/translation.json"));
+const translation_json_1 = require("./en/translation.json");
 exports.defaultNS = 'translation';
 exports.resources = {
     en: {

package/cjs/pages/ActiveSwapsPage/ActiveSwapsEmpty.js

@@ -13,6 +13,7 @@ const ActiveSwapsEmpty = () => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
+            paddingY: 12,
         } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptyActiveSwaps') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptyActiveSwaps') }))] })));
 };
 exports.ActiveSwapsEmpty = ActiveSwapsEmpty;

package/cjs/pages/MainPage/MainPage.js

@@ -4,12 +4,14 @@ exports.MainPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const ActiveSwaps_1 = require("../../components/ActiveSwaps");
+const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
 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 MainPage_style_1 = require("./MainPage.style");
 const MainSwapButton_1 = require("./MainSwapButton");
-const SwapRoutes_1 = require("./SwapRoutes");
 const MainPage = () => {
-    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: (0, jsx_runtime_1.jsx)(MainSwapButton_1.MainSwapButton, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(MainPage_style_1.FormContainer, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsx)(ActiveSwaps_1.ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), (0, jsx_runtime_1.jsx)(SelectChainAndToken_1.SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mx: 3, mb: 3 }, { children: (0, jsx_runtime_1.jsx)(SwapInput_1.SwapInput, { formType: "from" }) })), (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutes, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { mx: 3, mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mx: 3, mb: 1 }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_1.SendToWallet, { mb: 3 }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ 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

@@ -11,13 +11,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainSwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_router_dom_1 = require("react-router-dom");
 const SwapButton_1 = require("../../components/SwapButton");
 const hooks_1 = require("../../hooks");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
-const MainSwapButton = () => {
+exports.MainSwapButton = (0, react_1.forwardRef)((_, ref) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
@@ -31,6 +32,5 @@ const MainSwapButton = () => {
             });
         }
     });
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid }));
-};
-exports.MainSwapButton = MainSwapButton;
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid, ref: ref }));
+});

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -8,16 +8,17 @@ const ChainSelect_1 = require("../../components/ChainSelect");
 const TokenList_1 = require("../../components/TokenList");
 const hooks_1 = require("../../hooks");
 const SearchTokenInput_1 = require("./SearchTokenInput");
+const minTokenListHeight = 330;
 const SelectTokenPage = ({ formType }) => {
     (0, hooks_1.useScrollableOverflowHidden)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const headerRef = (0, react_1.useRef)(null);
     const contentHeight = (0, hooks_1.useContentHeight)();
-    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
+    const [tokenListHeight, setTokenListHeight] = (0, react_1.useState)(0);
     (0, react_1.useLayoutEffect)(() => {
         var _a, _b;
-        setHeaderHeight(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0));
+        setTokenListHeight(Math.max(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0), minTokenListHeight));
     }, [contentHeight]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: headerHeight, onClick: navigateBack, formType: formType })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/cjs/pages/SettingsPage/EnabledBridgesSelect.js

@@ -1,14 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnabledBridgesSelect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const Card_1 = require("../../components/Card");
 const Select_1 = require("../../components/Select");
 const hooks_1 = require("../../hooks");

package/cjs/pages/SettingsPage/EnabledExchangesSelect.js

@@ -1,14 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnabledExchangesSelect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const Card_1 = require("../../components/Card");
 const Select_1 = require("../../components/Select");
 const hooks_1 = require("../../hooks");

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -8,9 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapDetailsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -19,7 +16,7 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const Card_1 = require("../../components/Card");
 const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
@@ -33,7 +30,7 @@ const SwapDetailsPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const { state } = (0, react_router_dom_1.useLocation)();
-    const [routeExecution, deleteRoute] = (0, stores_1.useRouteStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
+    const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
         setOpen((open) => !open);

package/cjs/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -13,6 +13,7 @@ const SwapHistoryEmpty = () => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
+            paddingY: 12,
         } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
 };
 exports.SwapHistoryEmpty = SwapHistoryEmpty;

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapHistoryPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable consistent-return */
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -10,21 +11,23 @@ const Dialog_1 = require("../../components/Dialog");
 const Header_1 = require("../../components/Header");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
-const route_1 = require("../../stores/route");
+const routes_1 = require("../../stores/routes");
 const SwapHistoryEmpty_1 = require("./SwapHistoryEmpty");
 const SwapHistoryItem_1 = require("./SwapHistoryItem");
 const SwapHistoryPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { account } = (0, providers_1.useWallet)();
-    const swaps = (0, route_1.useSwapHistory)(account.address);
-    const deleteRoutes = (0, stores_1.useRouteStore)((store) => store.deleteRoutes);
+    const swaps = (0, routes_1.useSwapHistory)(account.address);
+    const deleteRoutes = (0, stores_1.useRouteExecutionStore)((store) => store.deleteRoutes);
     const [open, setOpen] = (0, react_1.useState)(false);
     const toggleDialog = (0, react_1.useCallback)(() => {
         setOpen((open) => !open);
     }, []);
     (0, react_1.useEffect)(() => {
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
-    }, [toggleDialog]);
+        if (swaps.length) {
+            return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+        }
+    }, [swaps.length, toggleDialog]);
     if (!swaps.length) {
         return (0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {});
     }

package/cjs/pages/SwapPage/SwapPage.js

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -57,6 +58,9 @@ const SwapPage = () => {
                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
                                 ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
                                 ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }) }))) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }), status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                            minWidth: 48,
+                            marginLeft: 1,
+                        } }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, {}) }))) : null] }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
 };
 exports.SwapPage = SwapPage;

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRoutesPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
 const Header_1 = require("../../components/Header");
 const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../../components/SwapRouteCard");
@@ -12,8 +11,7 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const SwapRoutesPage_style_1 = require("./SwapRoutesPage.style");
 const SwapRoutesPage = () => {
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
     const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
     const setExecutableRoute = (0, stores_1.useSetExecutableRoute)();
     const handleRouteClick = (route) => {
@@ -24,7 +22,7 @@ const SwapRoutesPage = () => {
     };
     (0, react_1.useEffect)(() => {
         if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
-            navigate(pathname.substring(0, pathname.lastIndexOf('/')));
+            navigateBack();
         }
         // redirect to the home page if no routes are found on page reload
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -35,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 === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching;
-    return ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
+    return ((0, jsx_runtime_1.jsx)(SwapRoutesPage_style_1.Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0 }, route.id)))) })));
 };
 exports.SwapRoutesPage = SwapRoutesPage;

package/cjs/providers/SDKProvider/SDKProvider.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDKProvider = exports.useLiFi = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = __importDefault(require("@lifi/sdk"));
+const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
 const WidgetProvider_1 = require("../WidgetProvider");
 let lifi;

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -14,7 +14,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const wallet_management_1 = require("@lifi/wallet-management");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
-const chains_1 = require("../../stores/chains");
+const stores_1 = require("../../stores");
 const SwapFormProvider_1 = require("../SwapFormProvider");
 const WidgetProvider_1 = require("../WidgetProvider");
 const stub = () => {
@@ -112,7 +112,7 @@ const WalletProvider = ({ children }) => {
         const { isDirty: isToChainDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.ToChain, methods.formState);
         const { isDirty: isFromTokenDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.FromToken, methods.formState);
         const { isDirty: isToTokenDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.ToToken, methods.formState);
-        const { chainOrder, setChain } = chains_1.useChainOrderStore.getState();
+        const { chainOrder, setChain } = stores_1.useChainOrderStore.getState();
         // Users can switch chains in the wallet.
         // If we don't have a chain in the ordered chain list we should add it.
         setChain(account.chainId);

package/cjs/stores/chains/useChainOrder.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChainOrder = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const useChainOrderStore_1 = require("./useChainOrderStore");
 const useChainOrder = () => {
     return (0, useChainOrderStore_1.useChainOrderStore)((state) => [state.chainOrder, state.setChain], shallow_1.default);

package/cjs/stores/chains/useChainOrderStore.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChainOrderStore = exports.maxChainToOrder = void 0;
 /* eslint-disable no-underscore-dangle */
-const zustand_1 = __importDefault(require("zustand"));
+const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 exports.maxChainToOrder = 9;

package/cjs/stores/index.d.ts

@@ -1,2 +1,3 @@
-export * from './route';
+export * from './chains';
+export * from './routes';
 export * from './settings';

package/cjs/stores/index.js

@@ -14,5 +14,6 @@ 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 });
-__exportStar(require("./route"), exports);
+__exportStar(require("./chains"), exports);
+__exportStar(require("./routes"), exports);
 __exportStar(require("./settings"), exports);

package/cjs/stores/{route → routes}/index.d.ts

@@ -1,6 +1,7 @@
 export * from './types';
 export * from './useExecutingRoutesIds';
-export * from './useRouteStore';
+export * from './useRouteExecutionStore';
+export * from './useSelectedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/cjs/stores/{route → routes}/index.js

@@ -16,7 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
 __exportStar(require("./useExecutingRoutesIds"), exports);
-__exportStar(require("./useRouteStore"), exports);
+__exportStar(require("./useRouteExecutionStore"), exports);
+__exportStar(require("./useSelectedRouteStore"), exports);
 __exportStar(require("./useSetExecutableRoute"), exports);
 __exportStar(require("./useSwapHistory"), exports);
 __exportStar(require("./utils"), exports);

package/cjs/stores/{route → routes}/types.d.ts

@@ -12,3 +12,7 @@ export interface RouteExecution {
     route: Route;
     status: RouteExecutionStatus;
 }
+export interface SelectedRouteStore {
+    selectedRoute?: Route;
+    setSelectedRoute: (route?: Route) => void;
+}

package/cjs/stores/routes/types.js

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

package/cjs/stores/{route → routes}/useExecutingRoutesIds.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExecutingRoutesIds = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
-const useRouteStore_1 = require("./useRouteStore");
+const shallow_1 = require("zustand/shallow");
+const useRouteExecutionStore_1 = require("./useRouteExecutionStore");
 const useExecutingRoutesIds = (address) => {
-    return (0, useRouteStore_1.useRouteStore)((state) => Object.values(state.routes)
+    return (0, useRouteExecutionStore_1.useRouteExecutionStore)((state) => Object.values(state.routes)
         .filter((item) => item.route.fromAddress === address &&
         (item.status === 'loading' || item.status === 'error'))
         .sort((a, b) => {

package/cjs/stores/{route/useRouteStore.d.ts → routes/useRouteExecutionStore.d.ts}

@@ -1,5 +1,5 @@
 import type { RouteExecutionStore } from './types';
-export declare const useRouteStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
+export declare const useRouteExecutionStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<RouteExecutionStore, {
             routes: Partial<Record<string, import("./types").RouteExecution>>;

package/cjs/stores/{route/useRouteStore.js → routes/useRouteExecutionStore.js}

@@ -1,14 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRouteStore = void 0;
-const zustand_1 = __importDefault(require("zustand"));
+exports.useRouteExecutionStore = void 0;
+const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 const utils_1 = require("./utils");
-exports.useRouteStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
+exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
     routes: {},
     setExecutableRoute: (route) => set((state) => {
         if (!state.routes[route.id]) {

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

@@ -0,0 +1,4 @@
+import type { SelectedRouteStore } from './types';
+export declare const useSelectedRouteStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SelectedRouteStore>, "setState"> & {
+    setState(nextStateOrUpdater: SelectedRouteStore | Partial<SelectedRouteStore> | ((state: import("immer/dist/internal").WritableDraft<SelectedRouteStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/cjs/stores/routes/useSelectedRouteStore.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectedRouteStore = void 0;
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+exports.useSelectedRouteStore = (0, zustand_1.default)()((0, immer_1.immer)((set) => ({
+    setSelectedRoute: (route) => {
+        set((state) => {
+            state.selectedRoute = route;
+        });
+    },
+})));

package/cjs/stores/{route → routes}/useSetExecutableRoute.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSetExecutableRoute = void 0;
-const useRouteStore_1 = require("./useRouteStore");
+const useRouteExecutionStore_1 = require("./useRouteExecutionStore");
 const useSetExecutableRoute = () => {
-    return (0, useRouteStore_1.useRouteStore)((state) => state.setExecutableRoute);
+    return (0, useRouteExecutionStore_1.useRouteExecutionStore)((state) => state.setExecutableRoute);
 };
 exports.useSetExecutableRoute = useSetExecutableRoute;

package/cjs/stores/{route → routes}/useSwapHistory.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSwapHistory = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
-const useRouteStore_1 = require("./useRouteStore");
+const shallow_1 = require("zustand/shallow");
+const useRouteExecutionStore_1 = require("./useRouteExecutionStore");
 const useSwapHistory = (address) => {
-    return (0, useRouteStore_1.useRouteStore)((state) => Object.values(state.routes)
+    return (0, useRouteExecutionStore_1.useRouteExecutionStore)((state) => Object.values(state.routes)
         .filter((item) => (item === null || item === void 0 ? void 0 : item.route.fromAddress) === address && (item === null || item === void 0 ? void 0 : item.status) === 'success')
         .sort((a, b) => {
         var _a, _b, _c, _d;

package/cjs/stores/{route → routes}/utils.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getUpdatedProcess = exports.isRouteActive = exports.isRouteFailed = exports.isRouteCompleted = void 0;
-const microdiff_1 = __importDefault(require("microdiff"));
+const microdiff_1 = require("microdiff");
 const isRouteCompleted = (route) => {
     return route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
 };

package/cjs/stores/settings/useAppearance.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAppearance = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const useSettingsStore_1 = require("./useSettingsStore");
 const useAppearance = () => {
     const [appearance, setValue] = (0, useSettingsStore_1.useSettingsStore)((state) => [state.appearance, state.setValue], shallow_1.default);

package/cjs/stores/settings/useSettings.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSettings = void 0;
-const shallow_1 = __importDefault(require("zustand/shallow"));
+const shallow_1 = require("zustand/shallow");
 const useSettingsStore_1 = require("./useSettingsStore");
 const useSettings = (keys) => {
     return (0, useSettingsStore_1.useSettingsStore)((state) => keys.reduce((values, key) => {

package/cjs/stores/settings/useSettingsStore.js

@@ -10,19 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSettingsStore = void 0;
 /* eslint-disable no-underscore-dangle */
-const zustand_1 = __importDefault(require("zustand"));
+const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 const types_1 = require("./types");
 exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
     advancedPreferences: false,
-    showDestinationWallet: false,
+    showDestinationWallet: true,
     appearance: 'auto',
     gasPrice: 'normal',
     routePriority: 'RECOMMENDED',

package/cjs/types/widget.d.ts

@@ -3,6 +3,7 @@ import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { Signer } from 'ethers';
 import type { CSSProperties } from 'react';
+export declare type WidgetVariant = 'default' | 'expandable' | 'drawer';
 export declare type Appearance = PaletteMode | 'auto';
 export declare type ThemeConfig = {
     palette?: Pick<PaletteOptions, 'primary' | 'secondary'>;
@@ -34,6 +35,7 @@ export interface WidgetConfig {
     /** @deprecated Use tokens.featured instead */
     featuredTokens?: Token[];
     integrator?: string;
+    variant?: WidgetVariant;
     walletManagement?: WidgetWalletManagement;
     sdkConfig?: ConfigUpdate;
     bridges?: {

package/cjs/utils/colors.d.ts

@@ -1,3 +1,3 @@
 import type { Theme } from '@mui/material';
 export declare const getContrastAlphaColor: (theme: Theme, alpha: string | number) => string;
-export declare const getContrastTextColor: (theme: Theme, background?: string) => "#000" | "#fff";
+export declare const getContrastTextColor: (theme: Theme, background?: string) => "#fff" | "#000";

package/cjs/utils/format.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatTokenPrice = exports.formatAmount = exports.formatSlippage = exports.formatTokenAmount = void 0;
-const big_js_1 = __importDefault(require("big.js"));
+const big_js_1 = require("big.js");
 // JavaScript numbers use exponential notation for positive exponents of 21 and above. We need more.
 big_js_1.default.PE = 42;
 // JavaScript numbers use exponential notation for negative exponents of -7 and below. We need more.