@lifi/widget 2.0.0-beta.13 → 2.0.0-beta.15

package/cjs/pages/SettingsPage/EnabledToolsButton.style.d.ts

@@ -17,5 +17,5 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "divider" | "dense" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/pages/SettingsPage/ResetSettingsButton.js

@@ -24,6 +24,6 @@ const ResetSettingsButton = () => {
         }
         toggleDialog();
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 3, mt: 1.5, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('swap.warning.title.resetSettings') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('swap.warning.message.resetSettings') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 3, mt: 1.5, mb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, fullWidth: true, children: t('button.resetSettings') }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.resetSettings') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.resetSettings') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleReset, autoFocus: true, children: t('button.reset') })] })] })] }));
 };
 exports.ResetSettingsButton = ResetSettingsButton;

package/cjs/pages/SettingsPage/RoutePrioritySelect.js

@@ -15,7 +15,7 @@ const RoutePrioritySelect = () => {
     const { routePriority } = (0, stores_1.useSettings)(['routePriority']);
     const value = routePriority ?? '';
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`settings.routePriority`) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(Select_1.Select, { MenuProps: { elevation: 2 }, value: value, onChange: (event) => setValue('routePriority', event.target.value), IconComponent: KeyboardArrowDown_1.default, dense: true, children: sdk_1.Orders.map((order) => {
-                        const tag = t(`swap.tags.${order.toLowerCase()}`);
+                        const tag = t(`main.tags.${order.toLowerCase()}`);
                         const tagName = `${tag[0]}${tag.slice(1).toLowerCase()}`;
                         return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: order, children: tagName }, order));
                     }) }) })] }));

package/cjs/pages/TransactionDetailsPage/TransactionDetailsPage.d.ts

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

package/cjs/pages/{SwapDetailsPage/SwapDetailsPage.js → TransactionDetailsPage/TransactionDetailsPage.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapDetailsPage = void 0;
+exports.TransactionDetailsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentCopyRounded_1 = require("@mui/icons-material/ContentCopyRounded");
 const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
@@ -19,11 +19,11 @@ const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
-const SwapDetailsPage_style_1 = require("./SwapDetailsPage.style");
-const SwapDetailsPage = () => {
+const TransactionDetailsPage_style_1 = require("./TransactionDetailsPage.style");
+const TransactionDetailsPage = () => {
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
+    const { subvariant, contractComponent, contractSecondaryComponent } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const [routeExecution, deleteRoute] = (0, stores_1.useRouteExecutionStore)((store) => [store.routes[state?.routeId], store.deleteRoute], shallow_1.shallow);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -48,18 +48,18 @@ const SwapDetailsPage = () => {
         await navigator.clipboard.writeText(supportId);
     };
     (0, react_1.useEffect)(() => {
-        return Header_1.useHeaderActionStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
+        return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
     }, [toggleDialog]);
     const startedAt = new Date(routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0);
-    return ((0, jsx_runtime_1.jsxs)(SwapDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(TransactionDetailsPage_style_1.Container, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'flex',
                     flex: 1,
                     justifyContent: 'space-between',
                 }, pb: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
                             timeStyle: 'short',
-                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), variant === 'nft' ? (0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2 }) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(routeExecution.route.toAmountMin, routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        }).format(startedAt) })] }), (0, Step_1.getStepList)(routeExecution?.route), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, routeExecution?.route?.insurance?.state === 'INSURED' ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: routeExecution.status, feeAmountUsd: routeExecution.route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(routeExecution.route.toAmountMin, routeExecution.route.toToken.decimals), insuredTokenSymbol: routeExecution.route.toToken.symbol, insurableRouteId: routeExecution.route.id, insuranceCoverageId: insuranceCoverageId })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                             display: 'flex',
                             flex: 1,
-                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('swap.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { 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.deleteSwapHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
+                        }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: t('main.supportId') }), (0, jsx_runtime_1.jsx)(material_1.Box, { mr: 1, mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: copySupportId, children: (0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, { fontSize: "small" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", pt: 1, pb: 2, px: 2, sx: { wordBreak: 'break-all' }, children: supportId })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { href: "https://discord.gg/lifi", target: "_blank", rel: "nofollow noreferrer", fullWidth: true, children: t('button.contactSupport') }) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.deleteTransaction') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleDeleteRoute, autoFocus: true, children: t('button.delete') })] })] })] }));
 };
-exports.SwapDetailsPage = SwapDetailsPage;
+exports.TransactionDetailsPage = TransactionDetailsPage;

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

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

package/cjs/pages/{SwapDetailsPage → TransactionDetailsPage}/index.js

@@ -14,4 +14,4 @@ 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);
+__exportStar(require("./TransactionDetailsPage"), exports);

package/cjs/pages/TransactionHistoryPage/TransactionHistoryEmpty.d.ts

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

package/cjs/pages/{SwapHistoryPage/SwapHistoryEmpty.js → TransactionHistoryPage/TransactionHistoryEmpty.js}

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

package/{pages/SwapHistoryPage/SwapHistoryItem.d.ts → cjs/pages/TransactionHistoryPage/TransactionHistoryItem.d.ts}

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

package/cjs/pages/{SwapHistoryPage/SwapHistoryItem.js → TransactionHistoryPage/TransactionHistoryItem.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwapHistoryItem = void 0;
+exports.TransactionHistoryItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
@@ -8,11 +8,11 @@ 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 }) => {
+const TransactionHistoryItem = ({ route }) => {
     const { i18n } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const handleClick = () => {
-        navigate(utils_1.navigationRoutes.swapDetails, {
+        navigate(utils_1.navigationRoutes.transactionDetails, {
             state: { routeId: route.id },
         });
     };
@@ -30,4 +30,4 @@ const SwapHistoryItem = ({ route }) => {
                             timeStyle: 'short',
                         }).format(startedAt) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { py: 1, children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, pt: 1, connected: true }), (0, jsx_runtime_1.jsx)(Token_1.TokenDivider, {}), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] })] }));
 };
-exports.SwapHistoryItem = SwapHistoryItem;
+exports.TransactionHistoryItem = TransactionHistoryItem;

package/cjs/pages/TransactionHistoryPage/TransactionHistoryPage.d.ts

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

package/cjs/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionHistoryPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DeleteOutline_1 = require("@mui/icons-material/DeleteOutline");
+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 providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const routes_1 = require("../../stores/routes");
+const TransactionHistoryEmpty_1 = require("./TransactionHistoryEmpty");
+const TransactionHistoryItem_1 = require("./TransactionHistoryItem");
+const TransactionHistoryPage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { account } = (0, providers_1.useWallet)();
+    const transactions = (0, routes_1.useTransactionHistory)(account.address);
+    const deleteRoutes = (0, stores_1.useRouteExecutionStore)((store) => store.deleteRoutes);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleDialog = (0, react_1.useCallback)(() => {
+        setOpen((open) => !open);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (transactions.length) {
+            return Header_1.useHeaderStore.getState().setAction((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "end", onClick: toggleDialog, children: (0, jsx_runtime_1.jsx)(DeleteOutline_1.default, {}) }));
+        }
+    }, [transactions.length, toggleDialog]);
+    if (!transactions.length) {
+        return (0, jsx_runtime_1.jsx)(TransactionHistoryEmpty_1.TransactionHistoryEmpty, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, mt: 1, children: transactions.length ? (transactions.map(({ route }) => ((0, jsx_runtime_1.jsx)(TransactionHistoryItem_1.TransactionHistoryItem, { route: route }, route.id)))) : ((0, jsx_runtime_1.jsx)(TransactionHistoryEmpty_1.TransactionHistoryEmpty, {})) }), (0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { open: open, onClose: toggleDialog, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: t('warning.title.deleteTransactionHistory') }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: t('warning.message.deleteTransactionHistory') }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: toggleDialog, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => deleteRoutes('completed'), autoFocus: true, children: t('button.delete') })] })] })] }));
+};
+exports.TransactionHistoryPage = TransactionHistoryPage;

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

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

package/cjs/pages/TransactionHistoryPage/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("./TransactionHistoryPage"), exports);

package/cjs/pages/{SwapPage → TransactionPage}/ExchangeRateBottomSheet.js

@@ -47,11 +47,11 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.rateChanged') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('warning.message.rateChanged') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: (0, utils_1.formatTokenAmount)(data?.oldToAmount, data?.toToken.decimals, 5),
-                            }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
+                            }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [t('format.number', {
                                 value: (0, utils_1.formatTokenAmount)(data?.newToAmount, data?.toToken.decimals, 5),
-                            }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(data?.newToAmount || 0)
+                            }), ' ', data?.toToken.symbol] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(data?.newToAmount || 0)
                                 .div((0, big_js_1.default)(data?.oldToAmount || 0))
                                 .minus(1)
                                 .mul(100)

package/cjs/pages/TransactionPage/StartTransactionButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { StartTransactionButtonProps } from './types';
+export declare const StartTransactionButton: React.FC<StartTransactionButtonProps>;
+export declare const StartInsurableTransactionButton: React.FC<StartTransactionButtonProps>;

package/cjs/pages/TransactionPage/StartTransactionButton.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StartInsurableTransactionButton = exports.StartTransactionButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DefaultTransactionButton_1 = require("../../components/DefaultTransactionButton");
+const hooks_1 = require("../../hooks");
+const stores_1 = require("../../stores");
+const StartTransactionButton = ({ onClick, route, text, loading, }) => {
+    const { insufficientGas, isInitialLoading: isGasSufficiencyLoading } = (0, hooks_1.useGasSufficiency)(route);
+    const { insufficientFunds, isInitialLoading: isFundsSufficiencyLoading } = (0, hooks_1.useFundsSufficiency)(route);
+    return ((0, jsx_runtime_1.jsx)(DefaultTransactionButton_1.DefaultTransactionButton, { onClick: onClick, text: text, disabled: insufficientFunds || !!insufficientGas?.length, loading: isFundsSufficiencyLoading || isGasSufficiencyLoading || loading }));
+};
+exports.StartTransactionButton = StartTransactionButton;
+const StartInsurableTransactionButton = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {
+    const routeExecution = (0, stores_1.useRouteExecutionStore)((state) => state.routes[insurableRouteId]);
+    const { isFetching } = (0, hooks_1.useRoutes)({
+        insurableRoute: routeExecution?.route,
+    });
+    return ((0, jsx_runtime_1.jsx)(exports.StartTransactionButton, { onClick: onClick, text: text, route: route, disabled: disabled, loading: loading || isFetching, insurableRouteId: insurableRouteId }));
+};
+exports.StartInsurableTransactionButton = StartInsurableTransactionButton;

package/cjs/pages/{SwapPage → TransactionPage}/StatusBottomSheet.js

@@ -23,7 +23,7 @@ const StatusBottomSheet = ({ status, route, }) => {
     const ref = (0, react_1.useRef)(null);
     const { getChainById } = (0, hooks_1.useChains)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
-    const { variant, contractComponent, contractCompactComponent } = (0, providers_1.useWidgetConfig)();
+    const { subvariant, contractComponent, contractSecondaryComponent, contractCompactComponent, } = (0, providers_1.useWidgetConfig)();
     const toToken = {
         ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
         amount: route.steps.at(-1)?.execution?.toAmount ??
@@ -33,8 +33,8 @@ const StatusBottomSheet = ({ status, route, }) => {
     const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(toToken, route.toAddress);
     const clearFromAmount = () => {
         refetchAllBalances();
-        setValue(providers_1.SwapFormKey.FromAmount, '');
-        setValue(providers_1.SwapFormKey.ToAmount, '');
+        setValue(providers_1.FormKey.FromAmount, '');
+        setValue(providers_1.FormKey.ToAmount, '');
     };
     const handleDone = () => {
         clearFromAmount();
@@ -44,13 +44,13 @@ const StatusBottomSheet = ({ status, route, }) => {
         clearFromAmount();
         if (toToken.chainId !== route.toToken.chainId &&
             toToken.address !== route.toToken.address) {
-            setValue(providers_1.SwapFormKey.FromAmount, (0, utils_1.formatTokenAmount)(toToken.amount, toToken.decimals), { shouldTouch: true });
-            setValue(providers_1.SwapFormKey.FromChain, toToken.chainId, { shouldTouch: true });
-            setValue(providers_1.SwapFormKey.FromToken, toToken.address, { shouldTouch: true });
-            setValue(providers_1.SwapFormKey.ToChain, route.toToken.chainId, {
+            setValue(providers_1.FormKey.FromAmount, (0, utils_1.formatTokenAmount)(toToken.amount, toToken.decimals), { shouldTouch: true });
+            setValue(providers_1.FormKey.FromChain, toToken.chainId, { shouldTouch: true });
+            setValue(providers_1.FormKey.FromToken, toToken.address, { shouldTouch: true });
+            setValue(providers_1.FormKey.ToChain, route.toToken.chainId, {
                 shouldTouch: true,
             });
-            setValue(providers_1.SwapFormKey.ToToken, route.toToken.address, {
+            setValue(providers_1.FormKey.ToToken, route.toToken.address, {
                 shouldTouch: true,
             });
         }
@@ -62,11 +62,12 @@ const StatusBottomSheet = ({ status, route, }) => {
     };
     const handleSeeDetails = () => {
         handleClose();
-        navigate(utils_1.navigationRoutes.swapDetails, {
+        navigate(utils_1.navigationRoutes.transactionDetails, {
             state: { routeId: route.id },
             replace: true,
         });
     };
+    const transactionType = route.fromChainId === route.toChainId ? 'swap' : 'bridge';
     let title;
     let primaryMessage;
     let secondaryMessage;
@@ -74,11 +75,11 @@ const StatusBottomSheet = ({ status, route, }) => {
     switch (status) {
         case stores_1.RouteExecutionStatus.Done: {
             title =
-                variant === 'nft'
-                    ? t('swap.success.title.purchaseSuccessful')
-                    : t('swap.success.title.swapSuccessful');
+                subvariant === 'nft'
+                    ? t('success.title.purchaseSuccessful')
+                    : t(`success.title.${transactionType}Successful`);
             if (token) {
-                primaryMessage = t('swap.success.message.swapSuccessful', {
+                primaryMessage = t('success.message.exchangeSuccessful', {
                     amount: (0, utils_1.formatTokenAmount)(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
@@ -89,13 +90,13 @@ const StatusBottomSheet = ({ status, route, }) => {
             break;
         }
         case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Partial: {
-            title = t('swap.success.title.swapPartiallySuccessful');
-            primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
+            title = t(`success.title.${transactionType}PartiallySuccessful`);
+            primaryMessage = t('success.message.exchangePartiallySuccessful', {
                 tool: route.steps.at(-1)?.toolDetails.name,
                 tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
             });
             if (token) {
-                secondaryMessage = t('swap.success.message.swapSuccessful', {
+                secondaryMessage = t('success.message.exchangeSuccessful', {
                     amount: (0, utils_1.formatTokenAmount)(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
@@ -106,13 +107,13 @@ const StatusBottomSheet = ({ status, route, }) => {
             break;
         }
         case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Refunded: {
-            title = t('swap.success.title.refundIssued');
-            primaryMessage = t('swap.success.message.swapPartiallySuccessful', {
+            title = t('success.title.refundIssued');
+            primaryMessage = t('success.message.exchangePartiallySuccessful', {
                 tool: route.steps.at(-1)?.toolDetails.name,
                 tokenSymbol: route.steps.at(-1)?.action.toToken.symbol,
             });
             if (token) {
-                secondaryMessage = t('swap.success.message.swapSuccessful', {
+                secondaryMessage = t('success.message.exchangeSuccessful', {
                     amount: (0, utils_1.formatTokenAmount)(token.amount),
                     tokenSymbol: token.symbol,
                     chainName: getChainById(token.chainId)?.name,
@@ -147,9 +148,11 @@ const StatusBottomSheet = ({ status, route, }) => {
             ref.current?.open();
         }
     }, [refetch, refetchNewBalance, status]);
-    const showContractComponent = variant === 'nft' && (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done);
+    const showContractComponent = subvariant === 'nft' && (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done);
     return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: ref, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, children: [!showContractComponent ? ((0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.CenterContainer, { children: (0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconCircle, { status: status, mb: 1, children: [status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "primary" })) : null, status === stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(Done_1.default, { color: "success" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Partial) ||
-                                (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error" })) : null] }) })) : null, (0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.CenterContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }) }), showContractComponent ? (contractCompactComponent || contractComponent) : ((0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.CenterContainer, { children: (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: primaryMessage })) : null, secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: secondaryMessage })) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
+                                (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Refunded) ? ((0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" })) : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed) ? ((0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error" })) : null] }) })) : null, (0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.CenterContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }) }), showContractComponent ? (contractCompactComponent ||
+                    contractSecondaryComponent ||
+                    contractComponent) : ((0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.CenterContainer, { children: (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: primaryMessage })) : null, secondaryMessage ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: secondaryMessage })) : null, (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === stores_1.RouteExecutionStatus.Idle ? t('button.ok') : null, (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done)
                                 ? t('button.done')
                                 : null, status === stores_1.RouteExecutionStatus.Failed
                                 ? t('button.seeDetails')

package/cjs/pages/{SwapPage → TransactionPage}/TokenValueBottomSheet.js

@@ -21,7 +21,7 @@ const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('swap.warning.title.highValueLoss') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('swap.warning.message.highValueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.swapping') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.valueLoss') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: (0, utils_1.calcValueLoss)(route) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { p: 3, ref: ref, children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.CenterContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, { status: "warning", mb: 1, children: (0, jsx_runtime_1.jsx)(WarningRounded_1.default, { color: "warning" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.highValueLoss') })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { py: 1, children: t('warning.message.highValueLoss') }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.sending') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.gasCost') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.receiving') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('main.valueLoss') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 600, children: (0, utils_1.calcValueLoss)(route) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", mt: 3, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", p: 1 }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
 };
 const getTokenValueLossThreshold = (route) => {
     if (!route) {

package/cjs/pages/TransactionPage/TransactionPage.d.ts

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

package/cjs/pages/TransactionPage/TransactionPage.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransactionPage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Delete_1 = require("@mui/icons-material/Delete");
+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 ContractComponent_1 = require("../../components/ContractComponent");
+const GasMessage_1 = require("../../components/GasMessage");
+const Header_1 = require("../../components/Header");
+const Insurance_1 = require("../../components/Insurance");
+const Step_1 = require("../../components/Step");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const events_1 = require("../../types/events");
+const utils_1 = require("../../utils");
+const ExchangeRateBottomSheet_1 = require("./ExchangeRateBottomSheet");
+const StartTransactionButton_1 = require("./StartTransactionButton");
+const StatusBottomSheet_1 = require("./StatusBottomSheet");
+const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
+const TransactionPage_style_1 = require("./TransactionPage.style");
+const utils_2 = require("./utils");
+const TransactionPage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const emitter = (0, hooks_1.useWidgetEvents)();
+    const { navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { subvariant, insurance, contractComponent, contractSecondaryComponent, } = (0, providers_1.useWidgetConfig)();
+    const { state } = (0, react_router_dom_1.useLocation)();
+    const stateRouteId = state?.routeId;
+    const [routeId, setRouteId] = (0, react_1.useState)(stateRouteId);
+    const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
+    const exchangeRateBottomSheetRef = (0, react_1.useRef)(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
+    const { route, status, executeRoute, restartRoute, deleteRoute } = (0, hooks_1.useRouteExecution)({
+        routeId: routeId,
+        onAcceptExchangeRateUpdate,
+    });
+    (0, react_1.useEffect)(() => {
+        if (route && subvariant !== 'nft') {
+            const transactionType = route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
+            return Header_1.useHeaderStore
+                .getState()
+                .setTitle(status === stores_1.RouteExecutionStatus.Idle
+                ? t(`button.review${transactionType}`)
+                : t(`header.${transactionType.toLowerCase()}`));
+        }
+    }, [route, status, subvariant, t]);
+    if (!route) {
+        return null;
+    }
+    const tokenValueLossThresholdExceeded = (0, TokenValueBottomSheet_1.getTokenValueLossThreshold)(route);
+    const handleExecuteRoute = () => {
+        if (tokenValueBottomSheetRef.current?.isOpen()) {
+            emitter.emit(events_1.WidgetEvent.RouteHighValueLoss, {
+                fromAmountUsd: route.fromAmountUSD,
+                gasCostUSD: route.gasCostUSD,
+                toAmountUSD: route.toAmountUSD,
+                valueLoss: (0, utils_2.calcValueLoss)(route),
+            });
+        }
+        tokenValueBottomSheetRef.current?.close();
+        executeRoute();
+        setValue(providers_1.FormKey.FromAmount, '');
+    };
+    const handleStartClick = async () => {
+        if (status === stores_1.RouteExecutionStatus.Idle) {
+            if (tokenValueLossThresholdExceeded && subvariant !== 'nft') {
+                tokenValueBottomSheetRef.current?.open();
+            }
+            else {
+                handleExecuteRoute();
+            }
+        }
+        if (status === stores_1.RouteExecutionStatus.Failed) {
+            restartRoute();
+        }
+    };
+    const handleRemoveRoute = () => {
+        navigateBack();
+        deleteRoute();
+    };
+    const getButtonText = () => {
+        switch (status) {
+            case stores_1.RouteExecutionStatus.Idle:
+                switch (subvariant) {
+                    case 'nft':
+                        return t('button.buyNow');
+                    case 'refuel':
+                        return t('button.startBridging');
+                    default:
+                        const transactionType = route.fromChainId === route.toChainId ? 'Swapping' : 'Bridging';
+                        return t(`button.start${transactionType}`);
+                }
+            case stores_1.RouteExecutionStatus.Failed:
+                return t('button.tryAgain');
+            default:
+                return '';
+        }
+    };
+    const insuredRoute = route.insurance?.state === 'INSURED';
+    const insurableRoute = insurance &&
+        subvariant !== 'refuel' &&
+        status === stores_1.RouteExecutionStatus.Idle &&
+        route.insurance?.state === 'INSURABLE';
+    const insuranceAvailable = insuredRoute || insurableRoute;
+    const StartButton = insurableRoute
+        ? StartTransactionButton_1.StartInsurableTransactionButton
+        : StartTransactionButton_1.StartTransactionButton;
+    const getInsuranceCoverageId = () => route.steps[0].execution?.process
+        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+        .find((process) => process.txHash)?.txHash ?? route.fromAddress;
+    return ((0, jsx_runtime_1.jsxs)(TransactionPage_style_1.Container, { children: [(0, Step_1.getStepList)(route), subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(ContractComponent_1.ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? ((0, jsx_runtime_1.jsx)(Insurance_1.Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: (0, utils_1.formatTokenAmount)(route.toAmountMin, route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), onChange: setRouteId })) : null, status === stores_1.RouteExecutionStatus.Idle ||
+                status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GasMessage_1.GasMessage, { mt: 2, route: route }), (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, display: "flex", children: [(0, jsx_runtime_1.jsx)(StartButton, { text: getButtonText(), onClick: handleStartClick, route: route, insurableRouteId: stateRouteId }), status === stores_1.RouteExecutionStatus.Failed ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleRemoveRoute, sx: {
+                                        minWidth: 48,
+                                        marginLeft: 1,
+                                    }, children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }) })) : null] })] })) : null, status ? (0, jsx_runtime_1.jsx)(StatusBottomSheet_1.StatusBottomSheet, { status: status, route: route }) : null, tokenValueLossThresholdExceeded && subvariant !== 'nft' ? ((0, jsx_runtime_1.jsx)(TokenValueBottomSheet_1.TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheet_1.ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })] }));
+};
+exports.TransactionPage = TransactionPage;

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

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

package/cjs/pages/{SwapHistoryPage → TransactionPage}/index.js

@@ -14,4 +14,4 @@ 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);
+__exportStar(require("./TransactionPage"), exports);

package/cjs/pages/TransactionPage/types.d.ts

@@ -0,0 +1,6 @@
+import type { Route } from '@lifi/sdk';
+import type { DefaultTransactionButtonProps } from '../../components/DefaultTransactionButton';
+export interface StartTransactionButtonProps extends DefaultTransactionButtonProps {
+    route?: Route;
+    insurableRouteId: string;
+}

package/cjs/providers/{SwapFormProvider/SwapFormProvider.d.ts → FormProvider/FormProvider.d.ts}

@@ -9,4 +9,4 @@ export declare const formDefaultValues: {
     ToContractGasLimit: string;
     toAmount: string;
 };
-export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;
+export declare const FormProvider: React.FC<React.PropsWithChildren<{}>>;