@lifi/widget 2.9.4 → 3.0.0-alpha.1

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

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

package/cjs/pages/TransactionHistoryPage/TransactionHistoryItem.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-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 TransactionHistoryItem = ({ route }) => {
-    const { i18n } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const handleClick = () => {
-        navigate(utils_1.navigationRoutes.transactionDetails, {
-            state: { routeId: route.id },
-        });
-    };
-    const startedAt = new Date(route.steps[0].execution?.process[0].startedAt ?? 0);
-    const fromToken = { ...route.fromToken, amount: route.fromAmount };
-    const toToken = {
-        ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
-        amount: route.steps.at(-1)?.execution?.toAmount ?? route.toAmount,
-    };
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { onClick: handleClick, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                    display: 'flex',
-                    flex: 1,
-                    justifyContent: 'space-between',
-                }, pt: 1.75, px: 2, 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, 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.TransactionHistoryItem = TransactionHistoryItem;

package/cjs/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -1,35 +0,0 @@
-"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 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 headerStoreContext = (0, stores_1.useHeaderStoreContext)();
-    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 headerStoreContext.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, headerStoreContext]);
-    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.js

@@ -1,17 +0,0 @@
-"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/TransactionPage/ExchangeRateBottomSheet.js

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExchangeRateBottomSheet = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
-const material_1 = require("@mui/material");
-const big_js_1 = require("big.js");
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const BottomSheet_1 = require("../../components/BottomSheet");
-const hooks_1 = require("../../hooks");
-const utils_1 = require("../../utils");
-const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
-exports.ExchangeRateBottomSheet = (0, react_1.forwardRef)(({ onContinue, onCancel }, ref) => {
-    const [data, setData] = (0, react_1.useState)();
-    const bottomSheetRef = (0, react_1.useRef)(null);
-    const resolverRef = (0, react_1.useRef)();
-    const handleContinue = () => {
-        ref.current?.close(true);
-        onContinue?.();
-    };
-    const handleCancel = (0, react_1.useCallback)(() => {
-        ref.current?.close(false);
-        onCancel?.();
-    }, [onCancel, ref]);
-    const handleClose = (0, react_1.useCallback)(() => {
-        ref.current?.close(false, false);
-        onCancel?.();
-    }, [onCancel, ref]);
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        isOpen: () => bottomSheetRef.current?.isOpen(),
-        open: (resolver, data) => {
-            setData(data);
-            resolverRef.current = resolver;
-            bottomSheetRef.current?.open();
-        },
-        close: (value = false, bottomSheetClose = true) => {
-            resolverRef.current?.(value);
-            if (bottomSheetClose) {
-                bottomSheetRef.current?.close();
-            }
-        },
-    }), []);
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: bottomSheetRef, onClose: handleClose, children: (0, jsx_runtime_1.jsx)(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) }));
-});
-const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const ref = (0, react_1.useRef)();
-    (0, hooks_1.useSetContentHeight)(ref);
-    const oldAmount = (0, big_js_1.default)(data?.oldToAmount || 1);
-    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('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('main.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 600, children: [(0, big_js_1.default)(data?.newToAmount || 0)
-                                .div(oldAmount.eq(0) ? (0, big_js_1.default)(1) : oldAmount)
-                                .minus(1)
-                                .mul(100)
-                                .round(2, big_js_1.default.roundUp)
-                                .toString(), "%"] })] }), (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') })] })] }));
-};

package/cjs/pages/TransactionPage/StartTransactionButton.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StartInsurableTransactionButton = exports.StartTransactionButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const BaseTransactionButton_1 = require("../../components/BaseTransactionButton");
-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 { insufficientFromToken, isInitialLoading: isFromTokenSufficiencyLoading, } = (0, hooks_1.useFromTokenSufficiency)(route);
-    const shouldDisableButton = insufficientFromToken || !!insufficientGas?.length;
-    return ((0, jsx_runtime_1.jsx)(BaseTransactionButton_1.BaseTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFromTokenSufficiencyLoading || 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/TransactionPage/StatusBottomSheet.js

@@ -1,161 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusBottomSheet = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Done_1 = require("@mui/icons-material/Done");
-const ErrorRounded_1 = require("@mui/icons-material/ErrorRounded");
-const InfoRounded_1 = require("@mui/icons-material/InfoRounded");
-const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
-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 BottomSheet_1 = require("../../components/BottomSheet");
-const Token_1 = require("../../components/Token");
-const hooks_1 = require("../../hooks");
-const providers_1 = require("../../providers");
-const stores_1 = require("../../stores");
-const utils_1 = require("../../utils");
-const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
-const StatusBottomSheet = ({ status, route, }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { navigateBack, navigate } = (0, hooks_1.useNavigateBack)();
-    const ref = (0, react_1.useRef)(null);
-    const { getChainById } = (0, hooks_1.useChains)();
-    const { setValue } = (0, react_hook_form_1.useFormContext)();
-    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 ??
-            route.steps.at(-1)?.estimate.toAmount ??
-            route.toAmount,
-    };
-    const { token, refetch, refetchNewBalance, refetchAllBalances } = (0, hooks_1.useTokenBalance)(toToken, route.toAddress);
-    const clearFromAmount = () => {
-        refetchAllBalances();
-        setValue(providers_1.FormKey.FromAmount, '');
-        setValue(providers_1.FormKey.ToAmount, '');
-    };
-    const handleDone = () => {
-        clearFromAmount();
-        navigateBack();
-    };
-    const handlePartialDone = () => {
-        clearFromAmount();
-        if (toToken.chainId !== route.toToken.chainId &&
-            toToken.address !== route.toToken.address) {
-            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.FormKey.ToToken, route.toToken.address, {
-                shouldTouch: true,
-            });
-        }
-        navigateBack();
-    };
-    const handleClose = () => {
-        clearFromAmount();
-        ref.current?.close();
-    };
-    const handleSeeDetails = () => {
-        handleClose();
-        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;
-    let handlePrimaryButton = handleDone;
-    switch (status) {
-        case stores_1.RouteExecutionStatus.Done: {
-            title =
-                subvariant === 'nft'
-                    ? t('success.title.purchaseSuccessful')
-                    : t(`success.title.${transactionType}Successful`);
-            if (token) {
-                primaryMessage = t('success.message.exchangeSuccessful', {
-                    amount: (0, utils_1.formatTokenAmount)(token.amount),
-                    tokenSymbol: token.symbol,
-                    chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
-                });
-            }
-            handlePrimaryButton = handleDone;
-            break;
-        }
-        case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Partial: {
-            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('success.message.exchangeSuccessful', {
-                    amount: (0, utils_1.formatTokenAmount)(token.amount),
-                    tokenSymbol: token.symbol,
-                    chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
-                });
-            }
-            handlePrimaryButton = handlePartialDone;
-            break;
-        }
-        case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Refunded: {
-            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('success.message.exchangeSuccessful', {
-                    amount: (0, utils_1.formatTokenAmount)(token.amount),
-                    tokenSymbol: token.symbol,
-                    chainName: getChainById(token.chainId)?.name,
-                    walletAddress: (0, utils_1.shortenAddress)(route.toAddress),
-                });
-            }
-            break;
-        }
-        case stores_1.RouteExecutionStatus.Failed: {
-            const step = route.steps.find((step) => step.execution?.status === 'FAILED');
-            const process = step?.execution?.process.find((process) => process.status === 'FAILED');
-            if (!step || !process) {
-                break;
-            }
-            const processMessage = (0, hooks_1.getProcessMessage)(t, getChainById, step, process);
-            title = processMessage.title;
-            primaryMessage = processMessage.message;
-            handlePrimaryButton = handleClose;
-            break;
-        }
-        default:
-            break;
-    }
-    (0, react_1.useEffect)(() => {
-        const hasSuccessFlag = (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done);
-        if ((hasSuccessFlag || (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Failed)) &&
-            !ref.current?.isOpen()) {
-            if (hasSuccessFlag) {
-                refetchNewBalance();
-                refetch();
-            }
-            ref.current?.open();
-        }
-    }, [refetch, refetchNewBalance, status]);
-    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 ||
-                    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')
-                                : null] }) }), (0, utils_1.hasEnumFlag)(status, stores_1.RouteExecutionStatus.Done) ? ((0, jsx_runtime_1.jsx)(material_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: handleSeeDetails, fullWidth: true, children: t('button.seeDetails') }) })) : null] }) }));
-};
-exports.StatusBottomSheet = StatusBottomSheet;

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

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconCircle = exports.CenterContainer = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const stores_1 = require("../../stores");
-const getStatusColor = (status, theme) => {
-    switch (status) {
-        case stores_1.RouteExecutionStatus.Done:
-            return { color: theme.palette.success.main, alpha: 0.12, darken: 0 };
-        case stores_1.RouteExecutionStatus.Failed:
-            return { color: theme.palette.error.main, alpha: 0.12, darken: 0 };
-        case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Partial:
-        case stores_1.RouteExecutionStatus.Done | stores_1.RouteExecutionStatus.Refunded:
-        case 'warning':
-            return {
-                color: theme.palette.warning.main,
-                alpha: 0.48,
-                darken: theme.palette.mode === 'light' ? 0.32 : 0,
-            };
-        default:
-            return { color: theme.palette.primary.main, alpha: 0.12, darken: 0 };
-    }
-};
-exports.CenterContainer = (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 }) => {
-    const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
-    return {
-        backgroundColor: (0, styles_1.alpha)(color, alphaValue),
-        borderRadius: '50%',
-        width: 64,
-        height: 64,
-        display: 'grid',
-        position: 'relative',
-        placeItems: 'center',
-        '& > svg': {
-            color: (0, styles_1.darken)(color, darkenValue),
-            width: 32,
-            height: 32,
-        },
-    };
-});

package/cjs/pages/TransactionPage/TokenValueBottomSheet.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTokenValueLossThreshold = exports.TokenValueBottomSheet = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const WarningRounded_1 = require("@mui/icons-material/WarningRounded");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const BottomSheet_1 = require("../../components/BottomSheet");
-const hooks_1 = require("../../hooks");
-const StatusBottomSheet_style_1 = require("./StatusBottomSheet.style");
-const utils_1 = require("./utils");
-exports.TokenValueBottomSheet = (0, react_1.forwardRef)(({ route, onContinue, onCancel }, ref) => {
-    const handleCancel = () => {
-        ref.current?.close();
-        onCancel?.();
-    };
-    return ((0, jsx_runtime_1.jsx)(BottomSheet_1.BottomSheet, { ref: ref, onClose: onCancel, children: (0, jsx_runtime_1.jsx)(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) }));
-});
-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('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) {
-        return false;
-    }
-    const fromAmountUSD = Number(route.fromAmountUSD || 0);
-    const toAmountUSD = Number(route.toAmountUSD || 0);
-    const gasCostUSD = Number(route.gasCostUSD || 0);
-    if (!fromAmountUSD && !toAmountUSD) {
-        return false;
-    }
-    return toAmountUSD / (fromAmountUSD + gasCostUSD) < 0.9;
-};
-exports.getTokenValueLossThreshold = getTokenValueLossThreshold;

package/cjs/pages/TransactionPage/TransactionPage.js

@@ -1,136 +0,0 @@
-"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 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 headerStoreContext = (0, stores_1.useHeaderStoreContext)();
-    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 headerStoreContext
-                .getState()
-                .setTitle(status === stores_1.RouteExecutionStatus.Idle
-                ? t(`button.review${transactionType}`)
-                : t(`header.${transactionType.toLowerCase()}`));
-        }
-    }, [headerStoreContext, route, status, subvariant, t]);
-    (0, react_1.useEffect)(() => {
-        if (status === stores_1.RouteExecutionStatus.Idle) {
-            emitter.emit(events_1.WidgetEvent.ReviewTransactionPageEntered, route);
-        }
-        // We want to emit event only when the page is mounted
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    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, '');
-        if (subvariant === 'nft') {
-            setValue(providers_1.FormKey.FromToken, '');
-            setValue(providers_1.FormKey.ToToken, '');
-        }
-    };
-    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), 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/TransactionPage.style.js

@@ -1,8 +0,0 @@
-"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/TransactionPage/index.js

@@ -1,17 +0,0 @@
-"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("./TransactionPage"), exports);

package/cjs/pages/TransactionPage/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/pages/TransactionPage/utils.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcValueLoss = void 0;
-const calcValueLoss = (route) => {
-    return `${((Number(route.toAmountUSD || 0) /
-        (Number(route.fromAmountUSD || 0) + Number(route.gasCostUSD || 0)) -
-        1) *
-        100).toFixed(2)}%`;
-};
-exports.calcValueLoss = calcValueLoss;