@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.5

package/_esm/pages/TransactionHistoryPage/TransactionHistoryItem.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Card } from '../../components/Card';
+import { Token, TokenDivider } from '../../components/Token';
+import { navigationRoutes } from '../../utils';
+export const TransactionHistoryItem = ({ transaction, size, start }) => {
+    const { i18n } = useTranslation();
+    const navigate = useNavigate();
+    const sending = transaction.sending;
+    const receiving = transaction.receiving;
+    const handleClick = () => {
+        navigate(navigationRoutes.transactionDetails, {
+            state: {
+                transactionHash: transaction.sending.txHash,
+            },
+        });
+    };
+    const startedAt = new Date((sending.timestamp ?? 0) * 1000);
+    if (!sending.token?.chainId || !receiving.token?.chainId) {
+        return null;
+    }
+    const fromToken = {
+        ...sending.token,
+        amount: BigInt(sending.amount ?? '0'),
+        priceUSD: sending.token.priceUSD ?? '0',
+        symbol: sending.token?.symbol ?? '',
+        decimals: sending.token?.decimals ?? 0,
+        name: sending.token?.name ?? '',
+        chainId: sending.token?.chainId,
+    };
+    const toToken = {
+        ...receiving.token,
+        amount: BigInt(receiving.amount ?? '0'),
+        priceUSD: receiving.token.priceUSD ?? '0',
+        symbol: receiving.token?.symbol ?? '',
+        decimals: receiving.token?.decimals ?? 0,
+        name: receiving.token?.name ?? '',
+        chainId: receiving.token?.chainId,
+    };
+    return (_jsxs(Card, { onClick: handleClick, style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            // height: `${size}px`,
+            transform: `translateY(${start}px)`,
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pt: 1.75, px: 2, children: [_jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, { dateStyle: 'long' }).format(startedAt) }), _jsx(Typography, { fontSize: 12, children: new Intl.DateTimeFormat(i18n.language, {
+                            timeStyle: 'short',
+                        }).format(startedAt) })] }), _jsxs(Box, { py: 1, children: [_jsx(Token, { token: fromToken, px: 2, pt: 1, connected: true }), _jsx(TokenDivider, {}), _jsx(Token, { token: toToken, px: 2, pt: 0.5, pb: 1 })] })] }));
+};

package/_esm/pages/TransactionHistoryPage/TransactionHistoryPage.d.ts

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

package/_esm/pages/TransactionHistoryPage/TransactionHistoryPage.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container, List } from '@mui/material';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useRef } from 'react';
+import { useTransactionHistory } from '../../hooks/useTransactionHistory';
+import { TransactionHistoryEmpty } from './TransactionHistoryEmpty';
+import { TransactionHistoryItem } from './TransactionHistoryItem';
+import { TransactionHistorySkeleton } from './TransactionHistorySkeleton';
+import { minTransactionListHeight } from './constants';
+export const TransactionHistoryPage = () => {
+    // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
+    const parentRef = useRef(null);
+    const { data: transactions, isLoading } = useTransactionHistory();
+    const { getVirtualItems, getTotalSize } = useVirtualizer({
+        count: transactions.length,
+        overscan: 10,
+        paddingStart: 8,
+        paddingEnd: 12,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 194,
+        getItemKey: (index) => `${transactions[index].transactionId}-${index}`,
+    });
+    if (!transactions.length && !isLoading) {
+        return _jsx(TransactionHistoryEmpty, {});
+    }
+    return (_jsx(Container, { ref: parentRef, style: { height: minTransactionListHeight, overflow: 'auto' }, children: _jsx(List, { style: { height: getTotalSize(), width: '100%', position: 'relative' }, disablePadding: true, children: isLoading ? (_jsx(List, { disablePadding: true, sx: { paddingTop: 1 }, children: Array.from({ length: 3 }).map((_, index) => (_jsx(TransactionHistorySkeleton, {}, index))) })) : (getVirtualItems().map((item) => {
+                const transaction = transactions[item.index];
+                return (_jsx(TransactionHistoryItem, { size: item.size, start: item.start, transaction: transaction }, item.key));
+            })) }) }));
+};

package/_esm/pages/TransactionHistoryPage/TransactionHistorySkeleton.d.ts

@@ -0,0 +1 @@
+export declare const TransactionHistorySkeleton: () => import("react/jsx-runtime").JSX.Element;

package/_esm/pages/TransactionHistoryPage/TransactionHistorySkeleton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Skeleton } from '@mui/material';
+import { Card } from '../../components/Card';
+import { TokenDivider } from '../../components/Token';
+const TokenSkeleton = ({ showDivider }) => {
+    return (_jsxs(Box, { flex: 1, px: 2, pt: showDivider ? 1 : 0.5, pb: showDivider ? 0 : 1, children: [_jsxs(Box, { display: "flex", flex: 1, alignItems: "center", children: [_jsx(Skeleton, { variant: "rounded", width: 32, height: 32, sx: {
+                            borderRadius: '100%',
+                        } }), _jsx(Box, { display: "flex", flexDirection: "column", flex: 1, ml: 2, children: _jsx(Skeleton, { width: 40, height: 30, variant: "text" }) })] }), _jsxs(Box, { display: "flex", marginLeft: "-16px", children: [_jsx(Box, { display: "flex", flexDirection: 'column', marginTop: 0.5, visibility: showDivider ? 'visible' : 'hidden', children: _jsx(TokenDivider, {}) }), _jsx(Skeleton, { width: 64, height: 12, sx: { marginTop: 0.5 }, variant: "rounded" }), _jsx(Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5, marginLeft: 0.5 } })] })] }));
+};
+export const TransactionHistorySkeleton = () => {
+    return (_jsxs(Card, { style: {
+            marginBottom: '16px',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, pt: 2, px: 2, children: [_jsx(Skeleton, { variant: "rectangular", width: 96, height: 16, sx: (theme) => ({
+                            borderRadius: `${theme.shape.borderRadius}px`,
+                        }) }), _jsx(Skeleton, { variant: "rectangular", width: 64, height: 16, sx: (theme) => ({
+                            borderRadius: `${theme.shape.borderRadius}px`,
+                        }) })] }), _jsxs(Box, { py: 1, children: [_jsx(TokenSkeleton, { showDivider: true }), _jsx(TokenDivider, {}), _jsx(TokenSkeleton, {})] })] }));
+};

package/_esm/pages/TransactionHistoryPage/constants.d.ts

@@ -0,0 +1 @@
+export declare const minTransactionListHeight = 544;

package/_esm/pages/TransactionHistoryPage/index.js

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

package/_esm/pages/TransactionPage/ExchangeRateBottomSheet.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { ExchangeRateUpdateParams } from '@lifi/sdk';
+export interface ExchangeRateBottomSheetBase {
+    isOpen(): void;
+    open(resolver: (value: boolean) => void, data: ExchangeRateUpdateParams): void;
+    close(value?: boolean, bottomSheetClose?: boolean): void;
+}
+interface ExchangeRateBottomSheetProps {
+    data?: ExchangeRateUpdateParams;
+    onContinue?(): void;
+    onCancel?(): void;
+}
+export declare const ExchangeRateBottomSheet: import("react").ForwardRefExoticComponent<ExchangeRateBottomSheetProps & import("react").RefAttributes<ExchangeRateBottomSheetBase>>;
+export {};

package/_esm/pages/TransactionPage/ExchangeRateBottomSheet.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { Box, Button, Typography } from '@mui/material';
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet';
+import { useSetContentHeight } from '../../hooks';
+import { formatTokenAmount } from '../../utils';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
+export const ExchangeRateBottomSheet = forwardRef(({ onContinue, onCancel }, ref) => {
+    const [data, setData] = useState();
+    const bottomSheetRef = useRef(null);
+    const resolverRef = useRef();
+    const handleContinue = () => {
+        ref.current?.close(true);
+        onContinue?.();
+    };
+    const handleCancel = useCallback(() => {
+        ref.current?.close(false);
+        onCancel?.();
+    }, [onCancel, ref]);
+    const handleClose = useCallback(() => {
+        ref.current?.close(false, false);
+        onCancel?.();
+    }, [onCancel, ref]);
+    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 (_jsx(BottomSheet, { ref: bottomSheetRef, onClose: handleClose, children: _jsx(ExchangeRateBottomSheetContent, { data: data, onContinue: handleContinue, onCancel: handleCancel }) }));
+});
+const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
+    const { t } = useTranslation();
+    const ref = useRef();
+    useSetContentHeight(ref);
+    if (!data) {
+        return;
+    }
+    const oldAmount = BigInt(data.oldToAmount || 1);
+    const rateChange = ((Number((BigInt(data.newToAmount || 0) * 1000000n) / oldAmount) /
+        1000000) *
+        100 -
+        100).toFixed(2);
+    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.rateChanged') })] }), _jsx(Typography, { py: 1, children: t('warning.message.rateChanged') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('main.quotedAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
+                                value: formatTokenAmount(BigInt(data.oldToAmount), data.toToken.decimals, 5),
+                            }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.currentAmount') }), _jsxs(Typography, { fontWeight: 600, children: [t('format.number', {
+                                value: formatTokenAmount(BigInt(data?.newToAmount), data?.toToken.decimals, 5),
+                            }), ' ', data?.toToken.symbol] })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.rateChange') }), _jsxs(Typography, { fontWeight: 600, children: [rateChange, "%"] })] }), _jsxs(Box, { display: "flex", mt: 3, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+};

package/_esm/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/_esm/pages/TransactionPage/StartTransactionButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseTransactionButton } from '../../components/BaseTransactionButton';
+import { useFromTokenSufficiency, useGasSufficiency, useRoutes, } from '../../hooks';
+import { useRouteExecutionStore } from '../../stores';
+export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
+    const { insufficientGas, isLoading: isGasSufficiencyLoading } = useGasSufficiency(route);
+    const { insufficientFromToken, isLoading: isFromTokenSufficiencyLoading } = useFromTokenSufficiency(route);
+    const shouldDisableButton = insufficientFromToken || !!insufficientGas?.length;
+    return (_jsx(BaseTransactionButton, { onClick: onClick, text: text, disabled: shouldDisableButton, loading: isFromTokenSufficiencyLoading || isGasSufficiencyLoading || loading }));
+};
+export const StartInsurableTransactionButton = ({ onClick, text, route, loading, disabled, insurableRouteId }) => {
+    const routeExecution = useRouteExecutionStore((state) => state.routes[insurableRouteId]);
+    const { isFetching } = useRoutes({
+        insurableRoute: routeExecution?.route,
+    });
+    return (_jsx(StartTransactionButton, { onClick: onClick, text: text, route: route, disabled: disabled, loading: loading || isFetching, insurableRouteId: insurableRouteId }));
+};

package/_esm/pages/TransactionPage/StatusBottomSheet.d.ts

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

package/_esm/pages/TransactionPage/StatusBottomSheet.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { Box, Button, Typography } from '@mui/material';
+import { useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet';
+import { Token } from '../../components/Token';
+import { getProcessMessage, useAvailableChains, useNavigateBack, useTokenBalance, } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
+import { RouteExecutionStatus, getSourceTxHash } from '../../stores';
+import { formatTokenAmount, hasEnumFlag, navigationRoutes, shortenAddress, } from '../../utils';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
+export const StatusBottomSheet = ({ status, route, }) => {
+    const { t } = useTranslation();
+    const { navigateBack, navigate } = useNavigateBack();
+    const ref = useRef(null);
+    const { getChainById } = useAvailableChains();
+    const { setValue } = useFormContext();
+    const { subvariant, contractComponent, contractSecondaryComponent, contractCompactComponent, } = useWidgetConfig();
+    const toToken = {
+        ...(route.steps.at(-1)?.execution?.toToken ?? route.toToken),
+        amount: BigInt(route.steps.at(-1)?.execution?.toAmount ??
+            route.steps.at(-1)?.estimate.toAmount ??
+            route.toAmount),
+    };
+    const { token, refetch, refetchNewBalance, refetchAllBalances } = useTokenBalance(route.toAddress, toToken);
+    const clearFromAmount = () => {
+        refetchAllBalances();
+        setValue(FormKey.FromAmount, '');
+        setValue(FormKey.ToAmount, '');
+    };
+    const handleDone = () => {
+        clearFromAmount();
+        navigateBack();
+    };
+    const handlePartialDone = () => {
+        clearFromAmount();
+        if (toToken.chainId !== route.toToken.chainId &&
+            toToken.address !== route.toToken.address) {
+            setValue(FormKey.FromAmount, formatTokenAmount(toToken.amount, toToken.decimals), { shouldTouch: true });
+            setValue(FormKey.FromChain, toToken.chainId, { shouldTouch: true });
+            setValue(FormKey.FromToken, toToken.address, { shouldTouch: true });
+            setValue(FormKey.ToChain, route.toToken.chainId, {
+                shouldTouch: true,
+            });
+            setValue(FormKey.ToToken, route.toToken.address, {
+                shouldTouch: true,
+            });
+        }
+        navigateBack();
+    };
+    const handleClose = () => {
+        clearFromAmount();
+        ref.current?.close();
+    };
+    const handleSeeDetails = () => {
+        handleClose();
+        const transactionHash = getSourceTxHash(route);
+        navigate(navigationRoutes.transactionDetails, {
+            state: {
+                routeId: route.id,
+                transactionHash,
+            },
+            replace: true,
+        });
+    };
+    const transactionType = route.fromChainId === route.toChainId ? 'swap' : 'bridge';
+    let title;
+    let primaryMessage;
+    let secondaryMessage;
+    let handlePrimaryButton = handleDone;
+    switch (status) {
+        case RouteExecutionStatus.Done: {
+            title =
+                subvariant === 'nft'
+                    ? t('success.title.purchaseSuccessful')
+                    : t(`success.title.${transactionType}Successful`);
+            if (token) {
+                primaryMessage = t('success.message.exchangeSuccessful', {
+                    amount: formatTokenAmount(token.amount, token.decimals),
+                    tokenSymbol: token.symbol,
+                    chainName: getChainById(token.chainId)?.name,
+                    walletAddress: shortenAddress(route.toAddress),
+                });
+            }
+            handlePrimaryButton = handleDone;
+            break;
+        }
+        case RouteExecutionStatus.Done | 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: formatTokenAmount(token.amount, token.decimals),
+                    tokenSymbol: token.symbol,
+                    chainName: getChainById(token.chainId)?.name,
+                    walletAddress: shortenAddress(route.toAddress),
+                });
+            }
+            handlePrimaryButton = handlePartialDone;
+            break;
+        }
+        case RouteExecutionStatus.Done | 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: formatTokenAmount(token.amount, token.decimals),
+                    tokenSymbol: token.symbol,
+                    chainName: getChainById(token.chainId)?.name,
+                    walletAddress: shortenAddress(route.toAddress),
+                });
+            }
+            break;
+        }
+        case 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 = getProcessMessage(t, getChainById, step, process);
+            title = processMessage.title;
+            primaryMessage = processMessage.message;
+            handlePrimaryButton = handleClose;
+            break;
+        }
+        default:
+            break;
+    }
+    useEffect(() => {
+        const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
+        if ((hasSuccessFlag || hasEnumFlag(status, RouteExecutionStatus.Failed)) &&
+            !ref.current?.isOpen()) {
+            if (hasSuccessFlag) {
+                refetchNewBalance();
+                refetch();
+            }
+            ref.current?.open();
+        }
+    }, [refetch, refetchNewBalance, status]);
+    const showContractComponent = subvariant === 'nft' && hasEnumFlag(status, RouteExecutionStatus.Done);
+    return (_jsx(BottomSheet, { ref: ref, children: _jsxs(Box, { p: 3, children: [!showContractComponent ? (_jsx(CenterContainer, { children: _jsxs(IconCircle, { status: status, mb: 1, children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoRoundedIcon, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(DoneIcon, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
+                                hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningRoundedIcon, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorRoundedIcon, { color: "error" })) : null] }) })) : null, _jsx(CenterContainer, { children: _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: title }) }), showContractComponent ? (contractCompactComponent ||
+                    contractSecondaryComponent ||
+                    contractComponent) : (_jsx(CenterContainer, { children: hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? (_jsx(Typography, { py: 1, children: primaryMessage })) : null, secondaryMessage ? (_jsx(Typography, { py: 1, children: secondaryMessage })) : null, _jsx(Box, { mt: 2, children: _jsxs(Button, { variant: "contained", fullWidth: true, onClick: handlePrimaryButton, children: [status === RouteExecutionStatus.Idle ? t('button.ok') : null, hasEnumFlag(status, RouteExecutionStatus.Done)
+                                ? t('button.done')
+                                : null, status === RouteExecutionStatus.Failed
+                                ? t('button.seeDetails')
+                                : null] }) }), hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Box, { mt: 2, children: _jsx(Button, { variant: "text", onClick: handleSeeDetails, fullWidth: true, children: t('button.seeDetails') }) })) : null] }) }));
+};

package/_esm/pages/TransactionPage/StatusBottomSheet.style.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Theme } from '@mui/material';
+import { RouteExecutionStatus } from '../../stores';
+type StatusColor = RouteExecutionStatus | 'warning';
+export declare const CenterContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const IconCircle: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    status: StatusColor;
+}, {}, {}>;
+export {};

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

@@ -0,0 +1,45 @@
+import { Box } from '@mui/material';
+import { alpha, darken, styled } from '@mui/material/styles';
+import { RouteExecutionStatus } from '../../stores';
+const getStatusColor = (status, theme) => {
+    switch (status) {
+        case RouteExecutionStatus.Done:
+            return { color: theme.palette.success.main, alpha: 0.12, darken: 0 };
+        case RouteExecutionStatus.Failed:
+            return { color: theme.palette.error.main, alpha: 0.12, darken: 0 };
+        case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
+        case RouteExecutionStatus.Done | 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 };
+    }
+};
+export const CenterContainer = styled(Box)(({ theme }) => ({
+    display: 'grid',
+    placeItems: 'center',
+    position: 'relative',
+}));
+export const IconCircle = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'status',
+})(({ theme, status }) => {
+    const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
+    return {
+        backgroundColor: alpha(color, alphaValue),
+        borderRadius: '50%',
+        width: 64,
+        height: 64,
+        display: 'grid',
+        position: 'relative',
+        placeItems: 'center',
+        '& > svg': {
+            color: darken(color, darkenValue),
+            width: 32,
+            height: 32,
+        },
+    };
+});

package/_esm/pages/TransactionPage/TokenValueBottomSheet.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Route } from '@lifi/sdk';
+import type { BottomSheetBase } from '../../components/BottomSheet';
+interface TokenValueBottomSheetProps {
+    route: Route;
+    onContinue(): void;
+    onCancel?(): void;
+}
+export declare const TokenValueBottomSheet: import("react").ForwardRefExoticComponent<TokenValueBottomSheetProps & import("react").RefAttributes<BottomSheetBase>>;
+export declare const getTokenValueLossThreshold: (route?: Route) => boolean;
+export {};

package/_esm/pages/TransactionPage/TokenValueBottomSheet.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { Box, Button, Typography } from '@mui/material';
+import { forwardRef, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet';
+import { useSetContentHeight } from '../../hooks';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style';
+import { calcValueLoss } from './utils';
+export const TokenValueBottomSheet = forwardRef(({ route, onContinue, onCancel }, ref) => {
+    const handleCancel = () => {
+        ref.current?.close();
+        onCancel?.();
+    };
+    return (_jsx(BottomSheet, { ref: ref, onClose: onCancel, children: _jsx(TokenValueBottomSheetContent, { route: route, onContinue: onContinue, onCancel: handleCancel }) }));
+});
+const TokenValueBottomSheetContent = ({ route, onCancel, onContinue, }) => {
+    const { t } = useTranslation();
+    const ref = useRef();
+    useSetContentHeight(ref);
+    return (_jsxs(Box, { p: 3, ref: ref, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRoundedIcon, { color: "warning" }) }), _jsx(Typography, { py: 1, fontSize: 18, fontWeight: 700, children: t('warning.title.highValueLoss') })] }), _jsx(Typography, { py: 1, children: t('warning.message.highValueLoss') }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 1, children: [_jsx(Typography, { children: t('main.sending') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.gasCost') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.gasCostUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.receiving') }), _jsx(Typography, { fontWeight: 600, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 0.25, children: [_jsx(Typography, { children: t('main.valueLoss') }), _jsx(Typography, { fontWeight: 600, children: calcValueLoss(route) })] }), _jsxs(Box, { display: "flex", mt: 3, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { display: "flex", p: 1 }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+};
+export 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;
+};

package/_esm/pages/TransactionPage/TransactionPage.d.ts

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

package/_esm/pages/TransactionPage/TransactionPage.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, Button, Tooltip } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { ContractComponent } from '../../components/ContractComponent';
+import { GasMessage } from '../../components/GasMessage';
+import { Insurance } from '../../components/Insurance';
+import { getStepList } from '../../components/Step';
+import { useNavigateBack, useRouteExecution, useWidgetEvents, } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
+import { RouteExecutionStatus, useHeaderStoreContext } from '../../stores';
+import { WidgetEvent } from '../../types/events';
+import { formatTokenAmount } from '../../utils';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet';
+import { StartInsurableTransactionButton, StartTransactionButton, } from './StartTransactionButton';
+import { StatusBottomSheet } from './StatusBottomSheet';
+import { TokenValueBottomSheet, getTokenValueLossThreshold, } from './TokenValueBottomSheet';
+import { Container } from './TransactionPage.style';
+import { calcValueLoss } from './utils';
+export const TransactionPage = () => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const emitter = useWidgetEvents();
+    const { navigateBack } = useNavigateBack();
+    const { subvariant, insurance, contractComponent, contractSecondaryComponent, } = useWidgetConfig();
+    const { state } = useLocation();
+    const headerStoreContext = useHeaderStoreContext();
+    const stateRouteId = state?.routeId;
+    const [routeId, setRouteId] = useState(stateRouteId);
+    const tokenValueBottomSheetRef = useRef(null);
+    const exchangeRateBottomSheetRef = useRef(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
+    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
+        routeId: routeId,
+        onAcceptExchangeRateUpdate,
+    });
+    useEffect(() => {
+        if (route && subvariant !== 'nft') {
+            const transactionType = route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
+            return headerStoreContext
+                .getState()
+                .setTitle(status === RouteExecutionStatus.Idle
+                ? t(`button.review${transactionType}`)
+                : t(`header.${transactionType.toLowerCase()}`));
+        }
+    }, [headerStoreContext, route, status, subvariant, t]);
+    useEffect(() => {
+        if (status === RouteExecutionStatus.Idle) {
+            emitter.emit(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 = getTokenValueLossThreshold(route);
+    const handleExecuteRoute = () => {
+        if (tokenValueBottomSheetRef.current?.isOpen()) {
+            emitter.emit(WidgetEvent.RouteHighValueLoss, {
+                fromAmountUsd: route.fromAmountUSD,
+                gasCostUSD: route.gasCostUSD,
+                toAmountUSD: route.toAmountUSD,
+                valueLoss: calcValueLoss(route),
+            });
+        }
+        tokenValueBottomSheetRef.current?.close();
+        executeRoute();
+        setValue(FormKey.FromAmount, '');
+        if (subvariant === 'nft') {
+            setValue(FormKey.FromToken, '');
+            setValue(FormKey.ToToken, '');
+        }
+    };
+    const handleStartClick = async () => {
+        if (status === RouteExecutionStatus.Idle) {
+            if (tokenValueLossThresholdExceeded && subvariant !== 'nft') {
+                tokenValueBottomSheetRef.current?.open();
+            }
+            else {
+                handleExecuteRoute();
+            }
+        }
+        if (status === RouteExecutionStatus.Failed) {
+            restartRoute();
+        }
+    };
+    const handleRemoveRoute = () => {
+        navigateBack();
+        deleteRoute();
+    };
+    const getButtonText = () => {
+        switch (status) {
+            case 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 RouteExecutionStatus.Failed:
+                return t('button.tryAgain');
+            default:
+                return '';
+        }
+    };
+    const insuredRoute = route.insurance?.state === 'INSURED';
+    const insurableRoute = insurance &&
+        subvariant !== 'refuel' &&
+        status === RouteExecutionStatus.Idle &&
+        route.insurance?.state === 'INSURABLE';
+    const insuranceAvailable = insuredRoute || insurableRoute;
+    const StartButton = insurableRoute
+        ? StartInsurableTransactionButton
+        : StartTransactionButton;
+    const getInsuranceCoverageId = () => route.steps[0].execution?.process
+        .filter((process) => process.type !== 'TOKEN_ALLOWANCE')
+        .find((process) => process.txHash)?.txHash ?? route.fromAddress;
+    return (_jsxs(Container, { children: [getStepList(route, subvariant), subvariant === 'nft' ? (_jsx(ContractComponent, { mt: 2, children: contractSecondaryComponent || contractComponent })) : null, insuranceAvailable ? (_jsx(Insurance, { mt: 2, status: status, insurableRouteId: stateRouteId, feeAmountUsd: route.insurance.feeAmountUsd, insuredAmount: formatTokenAmount(BigInt(route.toAmountMin), route.toToken.decimals), insuredTokenSymbol: route.toToken.symbol, insuranceCoverageId: getInsuranceCoverageId(), onChange: setRouteId })) : null, status === RouteExecutionStatus.Idle ||
+                status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(GasMessage, { mt: 2, route: route }), _jsxs(Box, { mt: 2, display: "flex", children: [_jsx(StartButton, { text: getButtonText(), onClick: handleStartClick, route: route, insurableRouteId: stateRouteId }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
+                                        minWidth: 48,
+                                        marginLeft: 1,
+                                    }, children: _jsx(DeleteIcon, {}) }) })) : null] })] })) : null, status ? _jsx(StatusBottomSheet, { status: status, route: route }) : null, tokenValueLossThresholdExceeded && subvariant !== 'nft' ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, _jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef })] }));
+};