@lifi/widget 1.13.0 → 1.13.3

package/cjs/pages/SwapDetailsPage/SwapDetailsPage.js

@@ -0,0 +1,69 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapDetailsPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const shallow_1 = __importDefault(require("zustand/shallow"));
+const Card_1 = require("../../components/Card");
+const Dialog_1 = require("../../components/Dialog");
+const Header_1 = require("../../components/Header");
+const Step_1 = require("../../components/Step");
+const StepDivider_1 = require("../../components/StepDivider");
+const stores_1 = require("../../stores");
+const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
+const SwapDetailsPage = () => {
+    var _a, _b;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const setHeaderAction = (0, Header_1.useSetHeaderAction)();
+    const { state } = (0, react_router_dom_1.useLocation)();
+    const [routeExecution, deleteRoute] = (0, stores_1.useRouteStore)((store) => [store.routes[state === null || state === void 0 ? void 0 : state.routeId], store.deleteRoute], shallow_1.default);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleDialog = (0, react_1.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 : '');
+    });
+    (0, react_1.useEffect)(() => {
+        return setHeaderAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+    }, [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 ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pb: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
+                                ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
+                                ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
+            }), (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                            display: 'flex',
+                            flex: 1,
+                        } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: t('swap.routeId') })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 1, mt: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", onClick: copyRouteId }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ContentCopy, { fontSize: "small" }) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.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 }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", href: "https://discord.com/channels/849912621360218112/863689862514343946", target: "_blank", rel: "nofollow noreferrer", fullWidth: true }, { children: t('button.contactSupport') })) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwap') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleDeleteRoute, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+};
+exports.SwapDetailsPage = SwapDetailsPage;

package/cjs/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/cjs/pages/SwapDetailsPage/SwapDetailsPage.style.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.Container = (0, styles_1.styled)(material_1.Container)(({ theme }) => ({
+    padding: theme.spacing(1, 3),
+}));

package/cjs/pages/SwapDetailsPage/index.d.ts

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

package/cjs/pages/SwapDetailsPage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SwapDetailsPage"), exports);

package/cjs/pages/SwapHistoryPage/SwapHistoryEmpty.d.ts

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

package/cjs/pages/SwapHistoryPage/SwapHistoryEmpty.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapHistoryEmpty = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const SwapHistoryEmpty = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ sx: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('swap.info.title.emptySwapHistory') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('swap.info.message.emptySwapHistory') }))] })));
+};
+exports.SwapHistoryEmpty = SwapHistoryEmpty;

package/cjs/pages/SwapHistoryPage/SwapHistoryItem.d.ts

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

package/cjs/pages/SwapHistoryPage/SwapHistoryItem.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapHistoryItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const Card_1 = require("../../components/Card");
+const Token_1 = require("../../components/Token");
+const utils_1 = require("../../utils");
+const SwapHistoryItem = ({ route }) => {
+    var _a, _b, _c, _d, _e;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const handleClick = () => {
+        navigate(utils_1.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 ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ onClick: handleClick }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pt: 1.75, px: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(startedAt) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12 }, { children: new Intl.DateTimeFormat(undefined, { timeStyle: 'short' }).format(startedAt) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.fromToken), { amount: route.fromAmount }), px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.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 })] }))] })));
+};
+exports.SwapHistoryItem = SwapHistoryItem;

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.d.ts

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

package/cjs/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapHistoryPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const Dialog_1 = require("../../components/Dialog");
+const Header_1 = require("../../components/Header");
+const WalletProvider_1 = require("../../providers/WalletProvider");
+const stores_1 = require("../../stores");
+const route_1 = require("../../stores/route");
+const SwapHistoryEmpty_1 = require("./SwapHistoryEmpty");
+const SwapHistoryItem_1 = require("./SwapHistoryItem");
+const SwapHistoryPage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { account } = (0, WalletProvider_1.useWallet)();
+    const swaps = (0, route_1.useSwapHistory)(account.address);
+    const deleteRoutes = (0, stores_1.useRouteStore)((store) => store.deleteRoutes);
+    const setHeaderAction = (0, Header_1.useSetHeaderAction)();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleDialog = (0, react_1.useCallback)(() => {
+        setOpen((open) => !open);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return setHeaderAction((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.DeleteOutline, {}) })));
+    }, [setHeaderAction, toggleDialog]);
+    if (!swaps.length) {
+        return (0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => ((0, jsx_runtime_1.jsx)(SwapHistoryItem_1.SwapHistoryItem, { route: route }, route.id)))) : ((0, jsx_runtime_1.jsx)(SwapHistoryEmpty_1.SwapHistoryEmpty, {})) })), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: deleteRoutes, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
+};
+exports.SwapHistoryPage = SwapHistoryPage;

package/cjs/pages/SwapHistoryPage/index.d.ts

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

package/cjs/pages/SwapHistoryPage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SwapHistoryPage"), exports);

package/cjs/pages/SwapPage/StatusBottomSheet.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RouteExecution } from '../../stores';
+export declare const StatusBottomSheet: React.FC<RouteExecution>;

package/cjs/pages/SwapPage/StatusBottomSheet.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBottomSheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const BottomSheet_1 = require("../../components/BottomSheet");
+const Token_1 = require("../../components/Token");
+const hooks_1 = require("../../hooks");
+const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
+const utils_1 = require("./utils");
+const StatusBottomSheet = ({ status, route, }) => {
+    var _a, _b, _c, _d, _e;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const ref = (0, react_1.useRef)(null);
+    const { getChainById } = (0, hooks_1.useChains)();
+    const { token, refetch: refetchBalance } = (0, hooks_1.useTokenBalance)(route.toChainId, route.toToken.address);
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const clearFromAmount = () => {
+        refetchBalance();
+        setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '');
+    };
+    const handleDone = () => {
+        clearFromAmount();
+        navigate(-1);
+    };
+    const handleClose = () => {
+        var _a;
+        clearFromAmount();
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.closeDrawer();
+    };
+    const { title, message } = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        switch (status) {
+            case 'success':
+                return {
+                    title: t('swap.success.title.fundsReceived'),
+                    message: t('swap.success.message.fundsReceived', {
+                        amount: token === null || token === void 0 ? void 0 : token.amount,
+                        tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol,
+                        chainName: (_a = getChainById(route.toChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                    }),
+                };
+            case 'error': {
+                const step = route.steps.find((step) => {
+                    var _a;
+                    return (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
+                });
+                const process = (_b = step === null || step === void 0 ? void 0 : step.execution) === null || _b === void 0 ? void 0 : _b.process.find((process) => process.status === 'FAILED');
+                if (!step || !process) {
+                    return {};
+                }
+                return (0, utils_1.getProcessMessage)(t, getChainById, step, process);
+            }
+            default:
+                return {};
+        }
+    }, [
+        getChainById,
+        route.steps,
+        route.toChainId,
+        status,
+        t,
+        token === null || token === void 0 ? void 0 : token.amount,
+        token === null || token === void 0 ? void 0 : token.symbol,
+    ]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if ((status === 'success' || status === 'error') &&
+            !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isOpen())) {
+            refetchBalance();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.openDrawer();
+        }
+    }, [refetchBalance, status]);
+    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, Object.assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3 }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: status, mb: 1 }, { children: [status === 'idle' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'success' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: StatusBottomSheet_style_1.iconStyles })) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: StatusBottomSheet_style_1.iconStyles })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: title })), status === 'success' ? ((0, jsx_runtime_1.jsx)(Token_1.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] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ pt: 2, pb: 1 }, { children: message })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.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' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", fullWidth: true, onClick: handleClose }, { children: t('button.seeDetails') })) }))) : null] })) })));
+};
+exports.StatusBottomSheet = StatusBottomSheet;

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Theme } from '@mui/material';
+import { RouteExecutionStatus } from '../../stores';
+export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const IconCircle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    status: RouteExecutionStatus;
+}, {}, {}>;
+export declare const iconStyles: {
+    position: string;
+    fontSize: string;
+};

package/cjs/pages/SwapPage/StatusBottomSheet.style.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconStyles = exports.IconCircle = exports.IconContainer = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const getStatusColor = (status, theme) => {
+    switch (status) {
+        case 'success':
+            return theme.palette.success.main;
+        case 'error':
+            return theme.palette.error.main;
+        default:
+            return theme.palette.primary.main;
+    }
+};
+exports.IconContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'grid',
+    placeItems: 'center',
+    position: 'relative',
+}));
+exports.IconCircle = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'status',
+})(({ theme, status }) => ({
+    border: `3px solid ${getStatusColor(status, theme)}`,
+    borderRadius: '50%',
+    width: 64,
+    height: 64,
+    display: 'grid',
+    position: 'relative',
+    placeItems: 'center',
+}));
+exports.iconStyles = {
+    position: 'absolute',
+    fontSize: '2.5rem',
+};

package/cjs/pages/SwapPage/SwapPage.d.ts

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

package/cjs/pages/SwapPage/SwapPage.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const GasSufficiencyMessage_1 = require("../../components/GasSufficiencyMessage");
+const Step_1 = require("../../components/Step");
+const StepDivider_1 = require("../../components/StepDivider");
+const SwapButton_1 = require("../../components/SwapButton");
+const hooks_1 = require("../../hooks");
+const StatusBottomSheet_1 = require("./StatusBottomSheet");
+const SwapPage_style_1 = require("./SwapPage.style");
+const SwapPage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { state } = (0, react_router_dom_1.useLocation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)(state === null || state === void 0 ? void 0 : state.routeId);
+    const handleRemoveRoute = () => {
+        navigate(-1);
+        deleteRoute();
+    };
+    const handleSwapClick = () => {
+        if (status === 'idle') {
+            executeRoute();
+        }
+        if (status === 'error') {
+            restartRoute();
+        }
+    };
+    // eslint-disable-next-line consistent-return
+    const getSwapButtonText = () => {
+        if (status === 'idle') {
+            return t('button.startSwap');
+        }
+        if (status === 'error') {
+            return t('button.restartSwap');
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(SwapPage_style_1.Container, { children: [route === null || route === void 0 ? void 0 : route.steps.map((step, index, steps) => {
+                var _a, _b;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: index === 0
+                                ? Object.assign(Object.assign({}, step.action.fromToken), { amount: step.action.fromAmount }) : undefined, toToken: index === steps.length - 1
+                                ? Object.assign(Object.assign({}, step.action.toToken), { amount: (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount }) : undefined }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
+            }), status === 'idle' ? ((0, jsx_runtime_1.jsx)(GasSufficiencyMessage_1.GasSufficiencyMessage, { route: route, mt: 2 })) : null, status === 'idle' || status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { text: getSwapButtonText(), onClick: handleSwapClick, currentRoute: route }) }))) : null, status === 'error' ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", onClick: handleRemoveRoute, fullWidth: true }, { children: t('button.removeSwap') })) }))) : null, route && status ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route })) : null] }));
+};
+exports.SwapPage = SwapPage;

package/cjs/pages/SwapPage/SwapPage.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/cjs/pages/SwapPage/SwapPage.style.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.Container = (0, styles_1.styled)(material_1.Container)(({ theme }) => ({
+    padding: theme.spacing(1, 3),
+}));

package/cjs/pages/SwapPage/index.d.ts

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

package/cjs/pages/SwapPage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SwapPage"), exports);

package/cjs/pages/SwapPage/utils.d.ts

@@ -0,0 +1,6 @@
+import { EVMChain, Process, Step } from '@lifi/sdk';
+import { TFunction } from 'react-i18next';
+export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
+    title?: string;
+    message?: string;
+};

package/cjs/pages/SwapPage/utils.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProcessMessage = void 0;
+const sdk_1 = require("@lifi/sdk");
+const utils_1 = require("../../utils");
+const formatProcessMessage = (initialMessage, args = {}) => {
+    return Object.keys(args).reduce((message, key) => {
+        return message.replace(`{${key}}`, args[key]);
+    }, initialMessage);
+};
+const processMessages = {
+    TOKEN_ALLOWANCE: {
+        STARTED: (t) => t(`swap.process.tokenAllowance.started`),
+        PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
+        DONE: (t) => t(`swap.process.tokenAllowance.done`),
+    },
+    SWITCH_CHAIN: {
+        PENDING: (t) => t(`swap.process.switchChain.pending`),
+        DONE: (t) => t(`swap.process.switchChain.done`),
+    },
+    SWAP: {
+        STARTED: (t) => t(`swap.process.swap.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.swap.actionRequired`),
+        PENDING: (t) => t(`swap.process.swap.pending`),
+        DONE: (t) => t(`swap.process.swap.done`),
+    },
+    CROSS_CHAIN: {
+        STARTED: (t) => t(`swap.process.crossChain.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.crossChain.actionRequired`),
+        PENDING: (t) => t(`swap.process.crossChain.pending`),
+        DONE: (t) => t(`swap.process.crossChain.done`),
+    },
+    RECEIVING_CHAIN: {
+        PENDING: (t) => t(`swap.process.receivingChain.pending`),
+        DONE: (t) => t(`swap.process.receivingChain.done`),
+    },
+    TRANSACTION: {},
+};
+function getProcessMessage(t, getChainById, step, process) {
+    var _a, _b, _c, _d;
+    if (process.error && process.status === 'FAILED') {
+        const getTransactionNotSentMessage = () => {
+            var _a, _b;
+            return t(`swap.error.message.transactionNotSent`, {
+                amount: (0, utils_1.formatTokenAmount)(step.action.fromAmount, step.action.fromToken.decimals),
+                tokenSymbol: step.action.fromToken.symbol,
+                chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
+            });
+        };
+        let title = '';
+        let message = '';
+        switch (process.error.code) {
+            case sdk_1.LifiErrorCode.ChainSwitchError:
+                title = t(`swap.error.title.chainSwitch`);
+                message = getTransactionNotSentMessage();
+                break;
+            case sdk_1.LifiErrorCode.TransactionFailed:
+                title = t(`swap.error.title.transactionFailed`);
+                message = t(`swap.error.message.transactionFailed`);
+                break;
+            case sdk_1.LifiErrorCode.TransactionUnderpriced:
+                title = t(`swap.error.title.transactionUnderpriced`);
+                message = getTransactionNotSentMessage();
+                break;
+            case sdk_1.LifiErrorCode.TransactionUnprepared:
+                title = t(`swap.error.title.transactionUnprepared`);
+                message = getTransactionNotSentMessage();
+                break;
+            case sdk_1.LifiErrorCode.SlippageError:
+                title = t(`swap.error.title.slippageTooLarge`);
+                message = t(`swap.error.message.slippageTooLarge`);
+                break;
+            case sdk_1.MetaMaskProviderErrorCode.userRejectedRequest:
+                title = t(`swap.error.title.userRejectedSignatureRequest`);
+                message = t(`swap.error.message.signatureRequired`, {
+                    amount: (0, utils_1.formatTokenAmount)(step.action.fromAmount, step.action.fromToken.decimals),
+                    tokenSymbol: step.action.fromToken.symbol,
+                    chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
+                });
+                break;
+            default:
+                title = t(`swap.error.title.unknown`);
+                if (process.txLink) {
+                    message = t(`swap.error.message.transactionFailed`);
+                }
+                break;
+        }
+        return { title, message };
+    }
+    const title = (_d = (_c = processMessages[process.type])[process.status]) === null || _d === void 0 ? void 0 : _d.call(_c, t);
+    return { title };
+}
+exports.getProcessMessage = getProcessMessage;

package/cjs/pages/SwapRoutesPage/SwapRoutesPage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+export declare const SwapRoutesPage: React.FC<BoxProps>;