@lifi/widget 1.17.1 → 1.18.0

package/hooks/useNavigateBack.js

@@ -3,12 +3,19 @@ import { useNavigate } from 'react-router-dom';
 export const useNavigateBack = () => {
     const navigate = useNavigate();
     const navigateBack = useCallback(() => {
-        if (window.history.state && window.history.state.idx > 0) {
-            navigate(-1);
-        }
-        else {
-            navigate(window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) || '/', { replace: true });
-        }
+        // https://github.com/remix-run/react-router/pull/9112
+        //
+        // if (window.history.length > 2) {
+        navigate(-1);
+        // } else {
+        //   navigate(
+        //     window.location.pathname.substring(
+        //       0,
+        //       window.location.pathname.lastIndexOf('/'),
+        //     ) || '/',
+        //     { replace: true },
+        //   );
+        // }
     }, [navigate]);
     return { navigateBack, navigate };
 };

package/hooks/useRouteExecution.js

@@ -11,7 +11,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 import { useLiFi, useWallet } from '../providers';
-import { getUpdatedProcess, isRouteActive, isRouteCompleted, isRouteFailed, useRouteStore, } from '../stores';
+import { getUpdatedProcess, isRouteActive, isRouteCompleted, isRouteFailed, useRouteExecutionStore, } from '../stores';
 import { WidgetEvent } from '../types/events';
 import { deepClone } from '../utils';
 import { useWidgetEvents } from './useWidgetEvents';
@@ -20,10 +20,10 @@ export const useRouteExecution = (routeId, executeInBackground) => {
     const { account, switchChain } = useWallet();
     const resumedAfterMount = useRef(false);
     const emitter = useWidgetEvents();
-    const routeExecution = useRouteStore((state) => state.routes[routeId]);
-    const [updateRoute, restartRoute, deleteRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
+    const routeExecution = useRouteExecutionStore((state) => state.routes[routeId]);
+    const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore((state) => [state.updateRoute, state.restartRoute, state.deleteRoute], shallow);
     const updateCallback = (updatedRoute) => {
-        const routeExecution = useRouteStore.getState().routes[updatedRoute.id];
+        const routeExecution = useRouteExecutionStore.getState().routes[updatedRoute.id];
         if (!routeExecution) {
             return;
         }
@@ -144,7 +144,7 @@ export const useRouteExecution = (routeId, executeInBackground) => {
     useEffect(() => {
         return () => {
             var _a;
-            const route = (_a = useRouteStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
+            const route = (_a = useRouteExecutionStore.getState().routes[routeId]) === null || _a === void 0 ? void 0 : _a.route;
             if (!route || !isRouteActive(route)) {
                 return;
             }

package/hooks/useTelemetry.js

@@ -1,11 +1,12 @@
 /* eslint-disable consistent-return */
 import { useEffect } from 'react';
 import { initSentry } from '../config/sentry';
+import { name } from '../config/version';
 export const useTelemetry = (disabled) => {
     useEffect(() => {
         if (disabled) {
-            if (process.env.NODE_ENV === 'production') {
-                console.warn('Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.');
+            if (process.env.NODE_ENV === 'development') {
+                console.warn(`[${name}] Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.`);
             }
         }
         else {

package/hooks/useTokenBalances.d.ts

@@ -1,5 +1,5 @@
 import type { Token } from '../types';
-export declare const useTokenBalances: (selectedChainId: number) => {
+export declare const useTokenBalances: (selectedChainId?: number) => {
     tokens: Token[] | undefined;
     tokensWithBalance: Token[] | undefined;
     featuredTokens: import("@lifi/types").Token[];

package/hooks/useTokenBalances.js

@@ -22,7 +22,9 @@ export const useTokenBalances = (selectedChainId) => {
     const featuredTokens = useFeaturedTokens(selectedChainId);
     const { tokens, isLoading } = useTokens(selectedChainId);
     const [refetchInterval, setRefetchInterval] = useState(defaultRefetchInterval);
-    const isBalanceLoadingEnabled = Boolean(account.address) && Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length);
+    const isBalanceLoadingEnabled = Boolean(account.address) &&
+        Boolean(tokens === null || tokens === void 0 ? void 0 : tokens.length) &&
+        Boolean(selectedChainId);
     const { data: tokensWithBalance, isLoading: isBalanceLoading, refetch, } = useQuery(['token-balances', account.address, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.length], ({ queryKey: [, accountAddress] }) => __awaiter(void 0, void 0, void 0, function* () {
         if (!accountAddress || !tokens) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -41,27 +41,27 @@
     "@emotion/styled": "^11.10.4",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
-    "@ethersproject/providers": "^5.7.0",
-    "@lifi/sdk": "^1.5.0",
-    "@lifi/wallet-management": "^1.1.9",
-    "@mui/icons-material": "^5.10.3",
-    "@mui/lab": "^5.0.0-alpha.99",
-    "@mui/material": "^5.10.5",
-    "@sentry/integrations": "^7.12.1",
-    "@sentry/react": "^7.12.1",
-    "@sentry/tracing": "^7.12.1",
-    "@tanstack/react-query": "^4.3.4",
+    "@ethersproject/providers": "^5.7.1",
+    "@lifi/sdk": "^1.6.0",
+    "@lifi/wallet-management": "^1.1.10",
+    "@mui/icons-material": "^5.10.6",
+    "@mui/lab": "^5.0.0-alpha.100",
+    "@mui/material": "^5.10.6",
+    "@sentry/integrations": "^7.13.0",
+    "@sentry/react": "^7.13.0",
+    "@sentry/tracing": "^7.13.0",
+    "@tanstack/react-query": "^4.3.9",
     "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",
-    "i18next": "^21.9.1",
+    "i18next": "^21.9.2",
     "immer": "^9.0.15",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.35.0",
+    "react-hook-form": "^7.36.0",
     "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.1",
     "react-timer-hook": "^3.0.5",
     "zustand": "^4.1.1"
   },

package/pages/ActiveSwapsPage/ActiveSwapsEmpty.js

@@ -10,5 +10,6 @@ export const ActiveSwapsEmpty = () => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
+            paddingY: 12,
         } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(SwapHorizIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptyActiveSwaps') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptyActiveSwaps') }))] })));
 };

package/pages/MainPage/MainPage.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ActiveSwaps } from '../../components/ActiveSwaps';
+import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
+import { SendToWallet, SendToWalletButton, } from '../../components/SendToWallet';
 import { SwapInput } from '../../components/SwapInput';
+import { SwapRoutes } from '../../components/SwapRoutes';
 import { FormContainer } from './MainPage.style';
 import { MainSwapButton } from './MainSwapButton';
-import { SwapRoutes } from './SwapRoutes';
 export const MainPage = () => {
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(MainSwapButton, {}) }))] })));
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(ActiveSwaps, { mx: 3, mt: 1, mb: 2 }), _jsx(SelectChainAndToken, { mt: 1, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(GasSufficiencyMessage, { mx: 3, mb: 3 }), _jsxs(Box, Object.assign({ mx: 3, mb: 1 }, { children: [_jsx(SendToWallet, { mb: 3 }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(MainSwapButton, {}), _jsx(SendToWalletButton, {})] }))] }))] })));
 };

package/pages/MainPage/MainSwapButton.js

@@ -8,13 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { useFormState } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { SwapButton } from '../../components/SwapButton';
 import { useSwapRoutes } from '../../hooks';
 import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
-export const MainSwapButton = () => {
+export const MainSwapButton = forwardRef((_, ref) => {
     const navigate = useNavigate();
     const { isValid, isValidating } = useFormState();
     const setExecutableRoute = useSetExecutableRoute();
@@ -28,5 +29,5 @@ export const MainSwapButton = () => {
             });
         }
     });
-    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid }));
-};
+    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disable: isLoading || isFetching || isValidating || !isValid, ref: ref }));
+});

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -5,15 +5,16 @@ import { ChainSelect } from '../../components/ChainSelect';
 import { TokenList } from '../../components/TokenList';
 import { useContentHeight, useNavigateBack, useScrollableOverflowHidden, } from '../../hooks';
 import { SearchTokenInput } from './SearchTokenInput';
+const minTokenListHeight = 330;
 export const SelectTokenPage = ({ formType }) => {
     useScrollableOverflowHidden();
     const { navigateBack } = useNavigateBack();
     const headerRef = useRef(null);
     const contentHeight = useContentHeight();
-    const [headerHeight, setHeaderHeight] = useState(0);
+    const [tokenListHeight, setTokenListHeight] = useState(0);
     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 (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: headerHeight, onClick: navigateBack, formType: formType })] })));
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
 };

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -20,14 +20,14 @@ import { useHeaderActionStore } from '../../components/Header';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
 import { useNavigateBack } from '../../hooks';
-import { useRouteStore } from '../../stores';
+import { useRouteExecutionStore } from '../../stores';
 import { Container } from './SwapDetailsPage.style';
 export const SwapDetailsPage = () => {
     var _a, _b;
     const { t } = useTranslation();
     const { navigateBack } = useNavigateBack();
     const { state } = useLocation();
-    const [routeExecution, deleteRoute] = useRouteStore((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow);
+    const [routeExecution, deleteRoute] = useRouteExecutionStore((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow);
     const [open, setOpen] = useState(false);
     const toggleDialog = useCallback(() => {
         setOpen((open) => !open);

package/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -10,5 +10,6 @@ export const SwapHistoryEmpty = () => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
+            paddingY: 12,
         } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(HistoryIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
 };

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable consistent-return */
 import { DeleteOutline as DeleteIcon } from '@mui/icons-material';
 import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
@@ -6,22 +7,24 @@ import { useTranslation } from 'react-i18next';
 import { Dialog } from '../../components/Dialog';
 import { useHeaderActionStore } from '../../components/Header';
 import { useWallet } from '../../providers';
-import { useRouteStore } from '../../stores';
-import { useSwapHistory } from '../../stores/route';
+import { useRouteExecutionStore } from '../../stores';
+import { useSwapHistory } from '../../stores/routes';
 import { SwapHistoryEmpty } from './SwapHistoryEmpty';
 import { SwapHistoryItem } from './SwapHistoryItem';
 export const SwapHistoryPage = () => {
     const { t } = useTranslation();
     const { account } = useWallet();
     const swaps = useSwapHistory(account.address);
-    const deleteRoutes = useRouteStore((store) => store.deleteRoutes);
+    const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
     const [open, setOpen] = useState(false);
     const toggleDialog = useCallback(() => {
         setOpen((open) => !open);
     }, []);
     useEffect(() => {
-        return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
-    }, [toggleDialog]);
+        if (swaps.length) {
+            return useHeaderActionStore.getState().setAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+        }
+    }, [swaps.length, toggleDialog]);
     if (!swaps.length) {
         return _jsx(SwapHistoryEmpty, {});
     }

package/pages/SwapPage/SwapPage.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Delete as DeleteIcon } from '@mui/icons-material';
 import { Box, Button } from '@mui/material';
 import { Fragment } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -54,5 +55,8 @@ export const SwapPage = () => {
                 return (_jsxs(Fragment, { children: [_jsx(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 ? (_jsx(StepDivider, {})) : null] }, step.id));
-            }), status === 'idle' ? (_jsx(GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }) }))) : null, status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null] }));
+            }), status === 'idle' ? (_jsx(GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex" }, { children: [_jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route, disable: status === 'idle' && (isValidating || !isValid) }), status === 'error' ? (_jsx(Button, Object.assign({ onClick: handleRemoveRoute, sx: {
+                            minWidth: 48,
+                            marginLeft: 1,
+                        } }, { children: _jsx(DeleteIcon, {}) }))) : null] }))) : null, route && status ? (_jsx(StatusBottomSheet, { status: status, route: route })) : null] }));
 };

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
 import { useHeaderActionStore } from '../../components/Header';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
-import { useSwapRoutes } from '../../hooks';
+import { useNavigateBack, useSwapRoutes } from '../../hooks';
 import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutesPage.style';
 export const SwapRoutesPage = () => {
-    const navigate = useNavigate();
-    const { pathname } = useLocation();
+    const { navigateBack, navigate } = useNavigateBack();
     const { routes: swapRoutes, isLoading, isFetching, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
@@ -21,7 +19,7 @@ export const SwapRoutesPage = () => {
     };
     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
@@ -32,5 +30,5 @@ export const SwapRoutesPage = () => {
             .setAction(_jsx(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 (_jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
+    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2, flex: 1 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, {})) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, {}, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route), active: index === 0 }, route.id)))) })));
 };

package/providers/WalletProvider/WalletProvider.js

@@ -11,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLiFiWalletManagement, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { useChainOrderStore } from '../../stores/chains';
+import { useChainOrderStore } from '../../stores';
 import { SwapFormKey } from '../SwapFormProvider';
 import { isItemAllowed, useWidgetConfig } from '../WidgetProvider';
 const stub = () => {

package/stores/index.d.ts

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

package/stores/index.js

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

package/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/stores/{route → routes}/index.js

@@ -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/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/stores/routes/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,7 @@
 import shallow from 'zustand/shallow';
-import { useRouteStore } from './useRouteStore';
+import { useRouteExecutionStore } from './useRouteExecutionStore';
 export const useExecutingRoutesIds = (address) => {
-    return useRouteStore((state) => Object.values(state.routes)
+    return useRouteExecutionStore((state) => Object.values(state.routes)
         .filter((item) => item.route.fromAddress === address &&
         (item.status === 'loading' || item.status === 'error'))
         .sort((a, b) => {

package/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/stores/{route/useRouteStore.js → routes/useRouteExecutionStore.js}

@@ -2,7 +2,7 @@ import create from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { isRouteCompleted, isRouteFailed } from './utils';
-export const useRouteStore = create()(persist(immer((set) => ({
+export const useRouteExecutionStore = create()(persist(immer((set) => ({
     routes: {},
     setExecutableRoute: (route) => set((state) => {
         if (!state.routes[route.id]) {

package/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/stores/routes/useSelectedRouteStore.js

@@ -0,0 +1,9 @@
+import create from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+export const useSelectedRouteStore = create()(immer((set) => ({
+    setSelectedRoute: (route) => {
+        set((state) => {
+            state.selectedRoute = route;
+        });
+    },
+})));

package/stores/routes/useSetExecutableRoute.js

@@ -0,0 +1,4 @@
+import { useRouteExecutionStore } from './useRouteExecutionStore';
+export const useSetExecutableRoute = () => {
+    return useRouteExecutionStore((state) => state.setExecutableRoute);
+};

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

@@ -1,7 +1,7 @@
 import shallow from 'zustand/shallow';
-import { useRouteStore } from './useRouteStore';
+import { useRouteExecutionStore } from './useRouteExecutionStore';
 export const useSwapHistory = (address) => {
-    return useRouteStore((state) => Object.values(state.routes)
+    return 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/stores/settings/useSettingsStore.js

@@ -16,7 +16,7 @@ import { immer } from 'zustand/middleware/immer';
 import { SettingsToolTypes } from './types';
 export const useSettingsStore = create()(persist(immer((set) => ({
     advancedPreferences: false,
-    showDestinationWallet: false,
+    showDestinationWallet: true,
     appearance: 'auto',
     gasPrice: 'normal',
     routePriority: 'RECOMMENDED',