@lifi/widget 1.17.2 → 1.18.0

package/components/Token/Token.js

@@ -10,22 +10,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
 import { formatTokenAmount } from '../../utils';
+import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
 import { TextSecondary } from './Token.style';
 export const Token = (_a) => {
     var _b;
-    var { token, connected } = _a, other = __rest(_a, ["token", "connected"]);
+    var { token, connected, step } = _a, other = __rest(_a, ["token", "connected", "step"]);
     const { t } = useTranslation();
     const { getChainById } = useChains();
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(TokenAvatar, { token: token, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 32, textStyle: {
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
-                    tokenSymbol: token.symbol,
-                    chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
-                }) }))] })));
+                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                            tokenSymbol: token.symbol,
+                            chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
+                        }) })), step ? (_jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1 }, { children: "\u2022" })), _jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
+                                        border: 0,
+                                        marginBottom: -0.25,
+                                    } }, { children: step.toolDetails.name[0] })) })), _jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary" }, { children: step.toolDetails.name }))] }))) : null] }))] })));
 };

package/components/Token/Token.style.js

@@ -18,6 +18,8 @@ export const TextSecondary = styled(Typography, {
     padding: connected
         ? theme.spacing(0, 0, 0, 3.875)
         : theme.spacing(0, 0, 0, 0),
+    display: 'flex',
+    alignItems: 'flex-start',
 }));
 export const TokenDivider = styled(Box)(({ theme }) => ({
     height: 12,

package/config/theme.js

@@ -25,6 +25,17 @@ const palette = {
         main: '#297EFF',
     },
 };
+const paletteLight = {
+    text: {
+        primary: '#000000',
+        secondary: '#747474',
+    },
+};
+const paletteDark = {
+    background: {
+        paper: '#212121',
+    },
+};
 const shape = {
     borderRadius: 12,
     borderRadiusSecondary: 6,
@@ -44,27 +55,7 @@ export const createTheme = (mode, theme = {}) => {
                 main: (_m = (_l = (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.secondary) === null || _l === void 0 ? void 0 : _l.main) !== null && _m !== void 0 ? _m : palette.secondary.main,
                 light: lighten((_q = (_p = (_o = theme.palette) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p.main) !== null && _q !== void 0 ? _q : palette.secondary.main, 0.5),
                 dark: darken((_t = (_s = (_r = theme.palette) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s.main) !== null && _t !== void 0 ? _t : palette.secondary.main, 0.2),
-            } }), (mode === 'light'
-            ? {
-                text: {
-                    primary: '#000',
-                    secondary: '#52575b',
-                },
-                grey: {
-                    100: '#F4F5F6',
-                    200: '#EFF1F2',
-                    300: '#E3E7E9',
-                    400: '#C6C9CD',
-                    500: '#AEB3B7',
-                    600: '#798086',
-                    700: '#57595C',
-                },
-            }
-            : {
-                background: {
-                    paper: '#212121',
-                },
-            })),
+            } }), (mode === 'light' ? paletteLight : paletteDark)),
         shape: Object.assign(Object.assign({}, shape), theme.shape),
         breakpoints: {
             values: {
@@ -96,6 +87,11 @@ export const createTheme = (mode, theme = {}) => {
                             cursor: 'not-allowed',
                             pointerEvents: 'auto',
                         },
+                    }, text: {
+                        backgroundColor: alpha(primaryMainColor, 0.08),
+                        '&:hover': {
+                            backgroundColor: alpha(primaryMainColor, 0.12),
+                        },
                     }, contained: {
                         '&:hover': {
                             color: getContrastRatio(common.white, primaryMainColor) >= 3
@@ -118,10 +114,10 @@ export const createTheme = (mode, theme = {}) => {
                             },
                         },
                         text: {
-                            color: primaryLightColor,
+                            backgroundColor: paletteDark.background.paper,
+                            color: common.white,
                             '&:hover': {
-                                backgroundColor: alpha(primaryLightColor, 0.08),
-                                borderColor: primaryLightColor,
+                                backgroundColor: lighten(paletteDark.background.paper, 0.02),
                             },
                         },
                     }

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/useChains.js

@@ -11,7 +11,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { isItemAllowed, SwapFormKey, useLiFi, useWidgetConfig, } from '../providers';
-import { useChainOrderStore } from '../stores/chains';
+import { useChainOrderStore } from '../stores';
 export const useChains = () => {
     const { disabledChains, chains } = useWidgetConfig();
     const lifi = useLiFi();

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.17.2",
+  "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",
@@ -44,24 +44,24 @@
     "@ethersproject/providers": "^5.7.1",
     "@lifi/sdk": "^1.6.0",
     "@lifi/wallet-management": "^1.1.10",
-    "@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",
+    "@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.4.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/ActiveSwapsPage/ActiveSwapsPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ActiveSwapsPage: () => JSX.Element;

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/SearchTokenInput.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SearchTokenInput: () => JSX.Element;

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/SelectWalletPage/SelectWalletPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SelectWalletPage: () => JSX.Element;

package/pages/SettingsPage/AdvancedPreferences.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const AdvancedPreferences: () => JSX.Element;

package/pages/SettingsPage/GasPriceSelect.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const GasPriceSelect: () => JSX.Element;

package/pages/SettingsPage/SettingsPage.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SettingsPage: () => JSX.Element;

package/pages/SettingsPage/ShowDestinationWallet.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const ShowDestinationWallet: () => JSX.Element;

package/pages/SettingsPage/SlippageInput.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const SlippageInput: () => JSX.Element;

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

@@ -30,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',