@lifi/widget 1.10.2 → 1.11.0

package/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -0,0 +1,63 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContentCopy as ContentCopyIcon, DeleteOutline as DeleteIcon, } from '@mui/icons-material';
+import { Box, Button, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Typography, } from '@mui/material';
+import { Fragment, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import shallow from 'zustand/shallow';
+import { Card, CardTitle } from '../../components/Card';
+import { Dialog } from '../../components/Dialog';
+import { useSetHeaderAction } from '../../components/Header';
+import { Step } from '../../components/Step';
+import { StepDivider } from '../../components/StepDivider';
+import { useRouteStore } from '../../stores';
+import { navigationRoutes } from '../../utils';
+import { Container } from './SwapDetailsPage.style';
+export const SwapDetailsPage = () => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const setHeaderAction = useSetHeaderAction();
+    const { state } = useLocation();
+    const [routeExecution, deleteRoute] = useRouteStore((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);
+    }, []);
+    const handleDeleteRoute = () => {
+        navigate(-1);
+        if (routeExecution) {
+            deleteRoute(routeExecution.route.id);
+        }
+    };
+    const copyRouteId = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _c;
+        yield navigator.clipboard.writeText((_c = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id) !== null && _c !== void 0 ? _c : '');
+    });
+    useEffect(() => {
+        return setHeaderAction(navigationRoutes.swapDetails, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+    }, [setHeaderAction, toggleDialog]);
+    const startedAt = new Date((_b = (_a = routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
+    return (_jsxs(Container, { children: [_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pb: 1 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(startedAt) })), _jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { timeStyle: 'short' }).format(startedAt) }))] })), routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.steps.map((step, index, steps) => {
+                var _a, _b;
+                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));
+            }), _jsxs(Card, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
+                            display: 'flex',
+                            flex: 1,
+                        } }, { children: [_jsx(CardTitle, Object.assign({ flex: 1 }, { children: t('swap.routeId') })), _jsx(Box, Object.assign({ mr: 1, mt: 1 }, { children: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", onClick: copyRouteId }, { children: _jsx(ContentCopyIcon, { fontSize: "small" }) })) }))] })), _jsx(Typography, Object.assign({ variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' } }, { children: routeExecution === null || routeExecution === void 0 ? void 0 : routeExecution.route.id }))] })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "contained", href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwap') }), _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: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+};

package/pages/SwapDetailsPage/SwapDetailsPage.style.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
+    disableGutters?: boolean | undefined;
+    fixed?: boolean | undefined;
+    maxWidth?: false | import("@mui/material").Breakpoint | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SwapDetailsPage/SwapDetailsPage.style.js

@@ -0,0 +1,5 @@
+import { Container as MuiContainer } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Container = styled(MuiContainer)(({ theme }) => ({
+    padding: theme.spacing(1, 3),
+}));

package/pages/SwapDetailsPage/index.d.ts

@@ -0,0 +1 @@
+export * from './SwapDetailsPage';

package/pages/SwapDetailsPage/index.js

@@ -0,0 +1 @@
+export * from './SwapDetailsPage';

package/pages/SwapHistoryPage/SwapHistoryEmpty.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SwapHistoryEmpty: React.FC;

package/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { History as HistoryIcon } from '@mui/icons-material';
+import { Container, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+export const SwapHistoryEmpty = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Container, Object.assign({ sx: {
+            display: 'flex',
+            flex: 1,
+            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." }))] })));
+};

package/pages/SwapHistoryPage/SwapHistoryItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Route } from '@lifi/sdk';
+export declare const SwapHistoryItem: React.FC<{
+    route: Route;
+}>;

package/pages/SwapHistoryPage/SwapHistoryItem.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Card } from '../../components/Card';
+import { Token, TokenDivider } from '../../components/Token';
+import { navigationRoutes } from '../../utils';
+export const SwapHistoryItem = ({ route }) => {
+    var _a, _b, _c, _d, _e;
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const handleClick = () => {
+        navigate(navigationRoutes.swapDetails, {
+            state: { routeId: route.id },
+        });
+    };
+    const startedAt = new Date((_b = (_a = route.steps[0].execution) === null || _a === void 0 ? void 0 : _a.process[0].startedAt) !== null && _b !== void 0 ? _b : 0);
+    return (_jsxs(Card, Object.assign({ onClick: handleClick }, { children: [_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pt: 1.75, px: 2 }, { children: [_jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(startedAt) })), _jsx(Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { timeStyle: 'short' }).format(startedAt) }))] })), _jsxs(Box, Object.assign({ py: 1 }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_d = (_c = route.steps.at(-1)) === null || _c === void 0 ? void 0 : _c.execution) === null || _d === void 0 ? void 0 : _d.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), px: 2, pt: 0.5, pb: 1 })] }))] })));
+};

package/pages/SwapHistoryPage/SwapHistoryPage.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SwapHistoryPage: React.FC;

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container, Stack } from '@mui/material';
+import { useWallet } from '../../providers/WalletProvider';
+import { useSwapHistory } from '../../stores/route';
+import { SwapHistoryEmpty } from './SwapHistoryEmpty';
+import { SwapHistoryItem } from './SwapHistoryItem';
+export const SwapHistoryPage = () => {
+    const { account } = useWallet();
+    const swaps = useSwapHistory(account.address);
+    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, {})) })) }));
+};

package/pages/SwapHistoryPage/index.d.ts

@@ -0,0 +1 @@
+export * from './SwapHistoryPage';

package/pages/SwapHistoryPage/index.js

@@ -0,0 +1 @@
+export * from './SwapHistoryPage';

package/pages/SwapPage/StatusBottomSheet.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useMemo, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { BottomSheet } from '../../components/BottomSheet';
-import { StepToken } from '../../components/StepToken';
+import { Token } from '../../components/Token';
 import { useChains, useTokenBalance } from '../../hooks';
 import { SwapFormKey } from '../../providers/SwapFormProvider';
 import { IconCircle, IconContainer, iconStyles, } from './StatusBottomSheet.style';
-import { Button } from './SwapPage.style';
 import { getProcessMessage } from './utils';
 export const StatusBottomSheet = ({ status, route, }) => {
+    var _a, _b, _c, _d, _e;
     const { t } = useTranslation();
     const navigate = useNavigate();
     const ref = useRef(null);
@@ -75,5 +75,5 @@ export const StatusBottomSheet = ({ status, route, }) => {
             (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
         }
     }, [refetchBalance, status]);
-    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(StepToken, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsxs(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })), status === 'success' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') }))) : null] })) })));
+    return (_jsx(BottomSheet, Object.assign({ ref: ref }, { children: _jsxs(Box, Object.assign({ p: 3 }, { children: [_jsxs(IconContainer, { children: [_jsxs(IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? (_jsx(InfoIcon, { color: "primary", sx: iconStyles })) : null, status === 'success' ? (_jsx(DoneIcon, { color: "success", sx: iconStyles })) : null, status === 'error' ? (_jsx(WarningIcon, { color: "error", sx: iconStyles })) : null] })), _jsx(Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? (_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: (_e = (_c = (_b = (_a = route.steps.at(-1)) === null || _a === void 0 ? void 0 : _a.execution) === null || _b === void 0 ? void 0 : _b.toAmount) !== null && _c !== void 0 ? _c : (_d = route.steps.at(-1)) === null || _d === void 0 ? void 0 : _d.estimate.toAmount) !== null && _e !== void 0 ? _e : route.toAmount }), py: 1 })) : null] }), _jsx(Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsxs(Button, Object.assign({ variant: "contained", fullWidth: true, onClick: status === 'success' ? handleDone : handleClose }, { children: [status === 'idle' ? t('button.okay') : null, status === 'success' ? t('button.done') : null, status === 'error' ? t('button.tryAgain') : null] })) })), status === 'success' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
 };

package/pages/SwapPage/SwapPage.js

@@ -1,23 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { InsufficientGasOrFundsMessage } from '../../components/InsufficientGasOrFundsMessage';
+import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
+import { Step } from '../../components/Step';
+import { StepDivider } from '../../components/StepDivider';
 import { SwapButton } from '../../components/SwapButton';
 import { useRouteExecution } from '../../hooks';
 import { StatusBottomSheet } from './StatusBottomSheet';
-import { StepDivider } from './StepDivider';
-import { StepItem } from './StepItem';
-import { Button, Container } from './SwapPage.style';
+import { Container } from './SwapPage.style';
 export const SwapPage = () => {
     const { t } = useTranslation();
     const { state } = useLocation();
     const navigate = useNavigate();
-    const { route, status, executeRoute, restartRoute, removeRoute } = useRouteExecution(state.routeId);
+    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution(state === null || state === void 0 ? void 0 : state.routeId);
     const handleRemoveRoute = () => {
-        removeRoute();
         navigate(-1);
+        deleteRoute();
     };
     const handleSwapClick = () => {
         if (status === 'idle') {
@@ -36,7 +36,10 @@ export const SwapPage = () => {
             return t('button.restartSwap');
         }
     };
-    return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => (_jsxs(Fragment, { children: [_jsx(StepItem, { step: step, fromToken: index === 0
-                            ? Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }) : undefined, toToken: index === steps.length - 1
-                            ? Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id))), status === 'idle' ? _jsx(InsufficientGasOrFundsMessage, { mt: 2 }) : null, status === 'idle' || status === 'error' ? (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SwapButton, { onClick: handleSwapClick, text: getSwapButtonText() }) }))) : null, status === 'error' ? (_jsx(Button, Object.assign({ variant: "outlined", disableElevation: true, fullWidth: true, onClick: handleRemoveRoute }, { children: t('button.removeSwap') }))) : null, _jsx(StatusBottomSheet, { status: status, route: route })] }));
+    return (_jsxs(Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
+                var _a, _b;
+                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] }));
 };

package/pages/SwapPage/SwapPage.style.d.ts

@@ -9,36 +9,3 @@ export declare const Container: import("@emotion/styled").StyledComponent<{
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const Button: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "info" | "warning" | "error" | "primary" | "secondary" | undefined;
-    disabled?: boolean | undefined;
-    disableElevation?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    endIcon?: import("react").ReactNode;
-    fullWidth?: boolean | undefined;
-    href?: string | undefined;
-    size?: "small" | "large" | "medium" | undefined;
-    startIcon?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "outlined" | "contained" | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SwapPage/SwapPage.style.js

@@ -1,12 +1,5 @@
-import { Button as MuiButton, Container as MuiContainer } from '@mui/material';
+import { Container as MuiContainer } from '@mui/material';
 import { styled } from '@mui/material/styles';
 export const Container = styled(MuiContainer)(({ theme }) => ({
-    padding: theme.spacing(1, 3, 3, 3),
-}));
-export const Button = styled(MuiButton)(({ theme }) => ({
-    textTransform: 'none',
-    borderRadius: theme.shape.borderRadiusSecondary,
-    padding: theme.spacing(1.25, 2),
-    fontSize: '1rem',
-    marginTop: theme.spacing(2),
+    padding: theme.spacing(1, 3),
 }));

package/pages/SwapPage/utils.js

@@ -1,5 +1,5 @@
 import { LifiErrorCode, MetaMaskProviderErrorCode, } from '@lifi/sdk';
-import { formatTokenAmount } from '../../utils/format';
+import { formatTokenAmount } from '../../utils';
 const formatProcessMessage = (initialMessage, args = {}) => {
     return Object.keys(args).reduce((message, key) => {
         return message.replace(`{${key}}`, args[key]);

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -1,27 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useSetHeaderAction } from '../../components/Header';
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
-import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
-import { routes } from '../../utils/routes';
+import { useSetExecutableRoute } from '../../stores';
+import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutesPage.style';
 export const SwapRoutesPage = () => {
     const navigate = useNavigate();
-    const { routes: swapRoutes, isLoading, isFetching, isFetched, } = useSwapRoutes();
-    const [currentRoute] = useCurrentRoute();
+    const setHeaderAction = useSetHeaderAction();
+    const { routes: swapRoutes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
     const setExecutableRoute = useSetExecutableRoute();
     const handleRouteClick = (route) => {
         setExecutableRoute(route);
-        navigate(routes.swap, { state: { routeId: route.id }, replace: true });
+        navigate(navigationRoutes.swap, {
+            state: { routeId: route.id },
+        });
     };
     useEffect(() => {
         if (!(swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.length) && !isLoading && !isFetching) {
-            navigate(routes.home);
+            navigate(navigationRoutes.home);
         }
         // redirect to the home page if no routes are found on page reload
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useEffect(() => {
+        return setHeaderAction(navigationRoutes.swapRoutes, _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt, 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, { minWidth: "100%", dense: true })) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { minWidth: "100%", dense: true }, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, active: (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id) === route.id, onClick: () => handleRouteClick(route) }, route.id)))) })));
+    return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2 }, { children: routeNotFound ? (_jsx(SwapRouteNotFoundCard, { dense: true })) : isLoading || isFetching ? (Array.from({ length: 3 }).map((_, index) => (_jsx(SwapRouteCardSkeleton, { dense: true }, index)))) : (swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, onClick: () => handleRouteClick(route) }, route.id)))) })));
 };

package/pages/SwapRoutesPage/SwapRoutesPage.style.js

@@ -2,5 +2,5 @@ import { Stack as MuiStack } from '@mui/material';
 import { styled } from '@mui/material/styles';
 export const Stack = styled(MuiStack)(({ theme }) => ({
     position: 'relative',
-    padding: theme.spacing(2, 3, 3, 3),
+    padding: theme.spacing(1, 3),
 }));

package/providers/WalletProvider/WalletProvider.js

@@ -20,7 +20,6 @@ const initialContext = {
     switchChain: stub,
     addChain: stub,
     addToken: stub,
-    attemptEagerConnect: stub,
     account: {},
 };
 const WalletContext = createContext(initialContext);
@@ -48,7 +47,8 @@ export const WalletProvider = ({ children }) => {
     }), [config.walletManagement, walletManagementDisconnect]);
     // only for injected wallets
     const switchChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.walletManagement) {
+        var _a;
+        if ((_a = config.walletManagement) === null || _a === void 0 ? void 0 : _a.switchChain) {
             const signer = yield config.walletManagement.switchChain(chainId);
             const account = yield extractAccountFromSigner(signer);
             setAccount(account);
@@ -56,29 +56,19 @@ export const WalletProvider = ({ children }) => {
         return walletSwitchChain(chainId);
     }), [config.walletManagement]);
     const addChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.walletManagement) {
+        var _b;
+        if ((_b = config.walletManagement) === null || _b === void 0 ? void 0 : _b.addChain) {
             return config.walletManagement.addChain(chainId);
         }
         return walletAddChain(chainId);
     }), [config.walletManagement]);
     const addToken = useCallback((chainId, token) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.walletManagement) {
+        var _c;
+        if ((_c = config.walletManagement) === null || _c === void 0 ? void 0 : _c.addToken) {
             return config.walletManagement.addToken(token, chainId);
         }
         return switchChainAndAddToken(chainId, token);
     }), [config.walletManagement]);
-    const attemptEagerConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.walletManagement) {
-            try {
-                const signer = yield config.walletManagement.getSigner();
-                const account = yield extractAccountFromSigner(signer);
-                setAccount(() => (Object.assign({}, account)));
-            }
-            catch (e) {
-                console.warn('WalletProvider: attempted eager connect.', e);
-            }
-        }
-    }), [config.walletManagement]);
     // keep account information up to date
     useEffect(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -99,17 +89,8 @@ export const WalletProvider = ({ children }) => {
         switchChain,
         addChain,
         addToken,
-        attemptEagerConnect,
-        account,
-    }), [
         account,
-        addChain,
-        addToken,
-        connect,
-        disconnect,
-        switchChain,
-        attemptEagerConnect,
-    ]);
+    }), [account, addChain, addToken, connect, disconnect, switchChain]);
     return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {

package/providers/WalletProvider/types.d.ts

@@ -8,7 +8,6 @@ export interface WalletContextProps {
     disconnect(): void;
     switchChain(chainId: number): Promise<boolean>;
     connect(wallet?: Wallet | undefined): Promise<void>;
-    attemptEagerConnect(): Promise<void>;
 }
 export interface WalletAccount {
     address?: string;

package/providers/WidgetProvider/WidgetProvider.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChainId, getChainByKey } from '@lifi/sdk';
-import { updateLiFiConfig } from '@lifi/widget/config/lifi';
 import { createContext, useContext, useEffect, useMemo } from 'react';
+import { updateLiFiConfig } from '../../config/lifi';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WidgetProvider>.');
 };

package/stores/route/index.d.ts

@@ -1,5 +1,5 @@
 export * from './types';
-export * from './useCurrentRoute';
 export * from './useExecutingRoutes';
 export * from './useRouteStore';
 export * from './useSetExecutableRoute';
+export * from './useSwapHistory';

package/stores/route/index.js

@@ -1,5 +1,5 @@
 export * from './types';
-export * from './useCurrentRoute';
 export * from './useExecutingRoutes';
 export * from './useRouteStore';
 export * from './useSetExecutableRoute';
+export * from './useSwapHistory';

package/stores/route/types.d.ts

@@ -1,12 +1,10 @@
 import { Route } from '@lifi/sdk';
 export interface RouteExecutionStore {
-    currentRoute?: Route;
-    routes: Record<string, RouteExecution>;
-    setCurrentRoute: (route?: Route) => void;
+    routes: Partial<Record<string, RouteExecution>>;
     setExecutableRoute: (route: Route) => void;
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
-    removeRoute: (routeId: string) => void;
+    deleteRoute: (routeId: string) => void;
 }
 export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
 export interface RouteExecution {

package/stores/route/useExecutingRoutes.d.ts

@@ -1 +1,2 @@
-export declare const useExecutingRoutes: () => import("./types").RouteExecution[];
+import { RouteExecution } from './types';
+export declare const useExecutingRoutes: (address?: string) => RouteExecution[];

package/stores/route/useExecutingRoutes.js

@@ -1,4 +1,6 @@
+import shallow from 'zustand/shallow';
 import { useRouteStore } from './useRouteStore';
-export const useExecutingRoutes = () => {
-    return useRouteStore((state) => Object.values(state.routes).filter((route) => route.status === 'loading' || route.status === 'error'));
+export const useExecutingRoutes = (address) => {
+    return useRouteStore((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) === 'loading' || (item === null || item === void 0 ? void 0 : item.status) === 'error')), shallow);
 };

package/stores/route/useRouteStore.d.ts

@@ -2,13 +2,16 @@ import type { RouteExecutionStore } from './types';
 export declare const useRouteStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<RouteExecutionStore, {
-            routes: Record<string, import("./types").RouteExecution>;
+            routes: Partial<Record<string, import("./types").RouteExecution>>;
         }>>) => void;
         clearStorage: () => void;
         rehydrate: () => Promise<void>;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: RouteExecutionStore) => void) => () => void;
         onFinishHydration: (fn: (state: RouteExecutionStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<RouteExecutionStore, {
+            routes: Partial<Record<string, import("./types").RouteExecution>>;
+        }>>;
     };
 }, "setState"> & {
     setState(nextStateOrUpdater: RouteExecutionStore | Partial<RouteExecutionStore> | ((state: import("immer/dist/internal").WritableDraft<RouteExecutionStore>) => void), shouldReplace?: boolean | undefined): void;

package/stores/route/useRouteStore.js

@@ -3,41 +3,40 @@ import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 export const useRouteStore = create()(persist(immer((set) => ({
     routes: {},
-    setCurrentRoute: (route) => set((state) => {
-        state.currentRoute = route;
-    }),
     setExecutableRoute: (route) => set((state) => {
         if (!state.routes[route.id]) {
             // clean previous idle routes that were not executed
             Object.keys(state.routes)
-                .filter((routeId) => state.routes[routeId].status === 'idle')
+                .filter((routeId) => { var _a; return ((_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.status) === 'idle'; })
                 .forEach((routeId) => delete state.routes[routeId]);
             state.routes[route.id] = {
                 route,
                 status: 'idle',
             };
-            state.currentRoute = route;
         }
     }),
     updateRoute: (route) => set((state) => {
-        state.routes[route.id].route = route;
-        const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
-        if (isFailed) {
-            state.routes[route.id].status = 'error';
-            return;
-        }
-        const isDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
-        if (isDone) {
-            state.routes[route.id].status = 'success';
-            return;
-        }
-        const isLoading = route.steps.some((step) => step.execution);
-        if (isLoading) {
-            state.routes[route.id].status = 'loading';
+        if (state.routes[route.id]) {
+            state.routes[route.id].route = route;
+            const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+            if (isFailed) {
+                state.routes[route.id].status = 'error';
+                return;
+            }
+            const isDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+            if (isDone) {
+                state.routes[route.id].status = 'success';
+                return;
+            }
+            const isLoading = route.steps.some((step) => step.execution);
+            if (isLoading) {
+                state.routes[route.id].status = 'loading';
+            }
         }
     }),
     restartRoute: (routeId) => set((state) => {
-        state.routes[routeId].route.steps.forEach((step) => {
+        var _a;
+        (_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.route.steps.forEach((step) => {
             var _a, _b;
             const stepHasFailed = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED';
             // check if the step has been cancelled which is a "failed" state
@@ -50,10 +49,10 @@ export const useRouteStore = create()(persist(immer((set) => ({
         });
         state.routes[routeId].status = 'loading';
     }),
-    removeRoute: (routeId) => set((state) => {
-        // TODO: handle immediate removal
-        // delete state.routes[routeId];
-        state.routes[routeId].status = 'idle';
+    deleteRoute: (routeId) => set((state) => {
+        if (state.routes[routeId]) {
+            delete state.routes[routeId];
+        }
     }),
 })), {
     name: 'li.fi-widget-routes',

package/stores/route/useSwapHistory.d.ts

@@ -0,0 +1,2 @@
+import { RouteExecution } from './types';
+export declare const useSwapHistory: (address?: string) => RouteExecution[];