@lifi/widget 1.11.2 → 1.12.0

package/components/Header/Header.js

@@ -9,10 +9,12 @@ const stickyHeaderRoutes = [
     navigationRoutes.selectWallet,
     navigationRoutes.settings,
     navigationRoutes.swapRoutes,
+    navigationRoutes.swapHistory,
+    navigationRoutes.swapDetails,
 ];
 const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
-    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.includes(pathname) }, { children: children })));
+    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
 export const Header = () => {
     const { walletManagement } = useWidgetConfig();

package/components/NotFound.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Block as BlockIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 export const NotFound = () => {
@@ -10,5 +11,5 @@ export const NotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: t('tooltip.notFound.title') })), _jsx(Typography, { children: t('tooltip.notFound.text') })] })));
+        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(BlockIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('tooltip.notFound.title') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('tooltip.notFound.text') }))] })));
 };

package/components/SwapButton/SwapButton.js

@@ -52,6 +52,9 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
             if (!isCurrentChainMatch) {
                 return t(`button.switchChain`);
             }
+            if (!currentRoute) {
+                return t(`button.swap`);
+            }
             return text || t(`button.reviewSwap`);
         }
         return t(`button.connectWallet`);
@@ -59,5 +62,6 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
         // loading={isLoading || isFetching}
         disabled: (insufficientFunds || !!insufficientGas.length || loading) &&
+            currentRoute &&
             isCurrentChainMatch, fullWidth: true }, { children: getButtonText() })));
 };

package/components/SwapRouteCard/SwapRouteCard.js

@@ -32,7 +32,7 @@ export const SwapRouteCard = (_a) => {
                 : null, _jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
-                } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
+                } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500", lineHeight: 1, pt: 0.25 }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.5 }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end", lineHeight: 1, pt: 0.25 }, { children: ["~", (route.steps
                                         .map((step) => step.estimate.executionDuration)
-                                        .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end" }, { children: t(`swap.minutes`) }))] })] }))] })));
+                                        .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
 };

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -20,9 +20,9 @@ export const SwapRouteCardSkeleton = (_a) => {
                         } }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsx(Box, Object.assign({ ml: 6 }, { children: _jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }) }))] })), _jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
-                } }, { children: [_jsxs(Box, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 27 }), _jsx(Skeleton, { variant: "text", width: 52, height: 18 })] }), _jsxs(Box, Object.assign({ sx: {
+                } }, { children: [_jsxs(Box, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 20 }), _jsx(Skeleton, { variant: "text", width: 52, height: 16 })] }), _jsxs(Box, Object.assign({ sx: {
                             display: 'flex',
                             alignItems: 'flex-end',
                             flexDirection: 'column',
-                        } }, { children: [_jsx(Skeleton, { variant: "text", width: 40, height: 27 }), _jsx(Skeleton, { variant: "text", width: 48, height: 18 })] }))] }))] })));
+                        } }, { children: [_jsx(Skeleton, { variant: "text", width: 40, height: 20 }), _jsx(Skeleton, { variant: "text", width: 48, height: 16 })] }))] }))] })));
 };

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -13,15 +13,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Route as RouteIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Card } from '../Card';
 export const SwapRouteNotFoundCard = (_a) => {
     var { dense } = _a, other = __rest(_a, ["dense"]);
     const { t } = useTranslation();
-    return (_jsx(Card, Object.assign({ dense: dense, indented: true }, other, { children: _jsxs(Box, Object.assign({ sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexDirection: 'column',
-                flex: 1,
-            }, py: 1.375 }, { children: [_jsx(RouteIcon, { fontSize: "large" }), _jsx(Typography, Object.assign({ fontSize: 16, fontWeight: "500", mt: 2 }, { children: t('swap.info.title.routeNotFound') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 1 }, { children: t('swap.info.message.routeNotFound') }))] })) })));
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            flex: 1,
+        }, py: 2.375 }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(RouteIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.routeNotFound') })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.routeNotFound') }))] })));
 };

package/config/theme.js

@@ -108,7 +108,7 @@ export const createTheme = (mode, theme = {}) => {
                         [`.${dialogActionsClasses.root} &`]: {
                             padding: '6px 12px',
                         },
-                        '&.Mui-disabled': {
+                        '&.Mui-disabled, &.Mui-disabled:hover': {
                             color: mode === 'light'
                                 ? 'rgb(0 0 0 / 70%)'
                                 : 'rgb(255 255 255 / 70%)',

package/config/version.d.ts

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

package/config/version.js

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

package/i18n/en/translation.json

@@ -14,6 +14,7 @@
   "button": {
     "connectWallet": "Connect wallet",
     "switchChain": "Switch chain",
+    "swap": "Swap",
     "reviewSwap": "Review swap",
     "startSwap": "Start swap",
     "restartSwap": "Restart swap",
@@ -78,16 +79,19 @@
     },
     "info": {
       "title": {
-        "routeNotFound": "No routes available"
+        "routeNotFound": "No routes available",
+        "emptySwapHistory": "No recent swaps"
       },
       "message": {
-        "routeNotFound": "Try another token combination."
+        "routeNotFound": "Try another token combination.",
+        "emptySwapHistory": "Swap history is only stored locally and will be deleted if you clear your browser data."
       }
     },
     "warning": {
       "title": {
         "insufficientGas": "Insufficient gas",
-        "deleteSwap": "Delete this swap?"
+        "deleteSwap": "Delete this swap?",
+        "deleteSwapHistory": "Delete swap history?"
       },
       "message": {
         "insufficientFunds": "You don't have enough funds to execute the swap.",
@@ -161,7 +165,7 @@
   },
   "tooltip": {
     "notFound": {
-      "title": "Sorry 🥲",
+      "title": "404",
       "text": "We couldn't find this page."
     },
     "progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."

package/i18n/index.d.ts

@@ -17,6 +17,7 @@ export declare const resources: {
             button: {
                 connectWallet: string;
                 switchChain: string;
+                swap: string;
                 reviewSwap: string;
                 startSwap: string;
                 restartSwap: string;
@@ -82,15 +83,18 @@ export declare const resources: {
                 info: {
                     title: {
                         routeNotFound: string;
+                        emptySwapHistory: string;
                     };
                     message: {
                         routeNotFound: string;
+                        emptySwapHistory: string;
                     };
                 };
                 warning: {
                     title: {
                         insufficientGas: string;
                         deleteSwap: string;
+                        deleteSwapHistory: string;
                     };
                     message: {
                         insufficientFunds: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",
@@ -46,9 +46,9 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.92",
     "@mui/material": "^5.9.2",
-    "@sentry/integrations": "^7.7.0",
-    "@sentry/react": "^7.7.0",
-    "@sentry/tracing": "^7.7.0",
+    "@sentry/integrations": "^7.8.0",
+    "@sentry/react": "^7.8.0",
+    "@sentry/tracing": "^7.8.0",
     "@tanstack/react-query": "^4.0.10",
     "big.js": "^6.2.1",
     "i18next": "^21.8.14",
@@ -56,7 +56,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.1",
-    "react-i18next": "^11.18.1",
+    "react-i18next": "^11.18.3",
     "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",

package/pages/MainPage/SwapRoutes.js

@@ -23,8 +23,8 @@ export const SwapRoutes = (props) => {
     if (!currentRoute && !isLoading && !isFetching && !isFetched) {
         return null;
     }
-    const routeNotFound = !currentRoute && isFetched;
-    return (_jsxs(_Fragment, { children: [_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt, timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
+    const routeNotFound = !currentRoute && !isLoading && !isFetching;
+    return (_jsxs(_Fragment, { children: [_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                             position: 'absolute',
                             top: 8,
                             right: 8,
@@ -32,5 +32,5 @@ export const SwapRoutes = (props) => {
                                     borderWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
                                         ? 1
                                         : 0,
-                                } }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : isLoading || isFetching || !currentRoute ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props))] }));
+                                } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", dense: true })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, { minWidth: "100%", dense: true })) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, active: true, dense: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], dense: true })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", "aria-label": "swap-routes" }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })), _jsx(GasSufficiencyMessage, Object.assign({ route: !isFetching ? currentRoute : undefined }, props))] }));
 };

package/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -10,5 +10,5 @@ export const SwapHistoryEmpty = () => {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-        } }, { children: [_jsx(Typography, Object.assign({ fontSize: 48 }, { children: _jsx(HistoryIcon, { fontSize: "inherit" }) })), _jsx(Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: "No recent swaps" })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: "Swap history is only stored locally and will be deleted if you clear your browser data." }))] })));
+        } }, { 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,14 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container, Stack } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../components/Dialog';
+import { useSetHeaderAction } from '../../components/Header';
 import { useWallet } from '../../providers/WalletProvider';
+import { useRouteStore } from '../../stores';
 import { useSwapHistory } from '../../stores/route';
 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 setHeaderAction = useSetHeaderAction();
+    const [open, setOpen] = useState(false);
+    const toggleDialog = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    useEffect(() => {
+        return setHeaderAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+    }, [setHeaderAction, toggleDialog]);
     if (!swaps.length) {
         return _jsx(SwapHistoryEmpty, {});
     }
-    return (_jsx(Container, { children: _jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })) }));
+    return (_jsxs(Container, { children: [_jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ onClick: deleteRoutes, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };

package/pages/SwapPage/SwapPage.js

@@ -41,5 +41,5 @@ 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, { onClick: handleSwapClick, text: getSwapButtonText() }) }))) : 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' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }) }))) : 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] }));
 };

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -28,8 +28,8 @@ export const SwapRoutesPage = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        return setHeaderAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt, timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
+        return setHeaderAction(_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: { marginRight: -1 }, size: "medium", edge: "end" }));
     }, [dataUpdatedAt, isFetching, refetch, refetchTime, setHeaderAction]);
-    const routeNotFound = !(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && isFetched;
-    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2 }, { 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) }, route.id)))) })));
+    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)))) })));
 };

package/stores/route/types.d.ts

@@ -5,6 +5,7 @@ export interface RouteExecutionStore {
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
     deleteRoute: (routeId: string) => void;
+    deleteRoutes: () => void;
 }
 export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
 export interface RouteExecution {

package/stores/route/useRouteStore.js

@@ -54,6 +54,9 @@ export const useRouteStore = create()(persist(immer((set) => ({
             delete state.routes[routeId];
         }
     }),
+    deleteRoutes: () => set((state) => {
+        state.routes = {};
+    }),
 })), {
     name: 'li.fi-widget-routes',
     partialize: (state) => ({ routes: state.routes }),