@openocean.finance/widget 1.0.16 → 1.0.18

package/dist/esm/pages/TransactionPage/RouteTracker.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js';
+import { useRoutes } from '../../hooks/useRoutes.js';
+import { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js';
+import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js';
+export const RouteTracker = ({ observableRouteId, onChange, onFetching, }) => {
+    const routeExecutionStore = useRouteExecutionStoreContext();
+    const setExecutableRoute = useSetExecutableRoute();
+    const [observableRoute] = useState(() => routeExecutionStore.getState().routes[observableRouteId]?.route);
+    const observableRouteIdRef = useRef(observableRoute?.id);
+    const { routes, isFetching, dataUpdatedAt, refetchTime, refetch } = useRoutes({ observableRoute });
+    const currentRoute = routes?.[0];
+    /**
+     * The reviewable route is the route that the user currently sees on the review page.
+     * The observable route is the route for which we track bridges and exchanges.
+     * This allows us to query the route using the same tool each time we refresh.
+     * The observable and reviewable routes can be the same when we first enter the review page.
+     */
+    // biome-ignore lint/correctness/useExhaustiveDependencies:
+    useEffect(() => {
+        if (observableRouteIdRef.current &&
+            currentRoute &&
+            observableRouteIdRef.current !== currentRoute.id) {
+            const reviewableRouteId = observableRouteIdRef.current;
+            observableRouteIdRef.current = currentRoute.id;
+            setExecutableRoute(currentRoute, [observableRouteId, reviewableRouteId]);
+            onChange(currentRoute.id);
+        }
+    }, [currentRoute?.id, observableRouteId]);
+    useEffect(() => {
+        onFetching(isFetching);
+    }, [isFetching, onFetching]);
+    const handleRefetch = () => {
+        refetch();
+    };
+    return (_jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: handleRefetch, sx: { marginRight: -1 }, size: "medium" }));
+};
+//# sourceMappingURL=RouteTracker.js.map

package/dist/esm/pages/TransactionPage/RouteTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteTracker.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/RouteTracker.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAA;AAC1F,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAA;AAQpF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,iBAAiB,EACjB,QAAQ,EACR,UAAU,GACQ,EAAE,EAAE;IACtB,MAAM,mBAAmB,GAAG,6BAA6B,EAAE,CAAA;IAC3D,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAA;IAClD,MAAM,CAAC,eAAe,CAAC,GAAG,QAAQ,CAChC,GAAG,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,KAAK,CACtE,CAAA;IACD,MAAM,oBAAoB,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;IACxD,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,CAC3E,EAAE,eAAe,EAAE,CACpB,CAAA;IACD,MAAM,YAAY,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC,CAAA;IAEhC;;;;;OAKG;IACH,2DAA2D;IAC3D,SAAS,CAAC,GAAG,EAAE;QACb,IACE,oBAAoB,CAAC,OAAO;YAC5B,YAAY;YACZ,oBAAoB,CAAC,OAAO,KAAK,YAAY,CAAC,EAAE,EAChD,CAAC;YACD,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAA;YACtD,oBAAoB,CAAC,OAAO,GAAG,YAAY,CAAC,EAAE,CAAA;YAC9C,kBAAkB,CAAC,YAAY,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAA;YACxE,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,UAAU,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAA;IAE5B,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,OAAO,EAAE,CAAA;IACX,CAAC,CAAA;IAED,OAAO,CACL,KAAC,oBAAoB,IACnB,SAAS,EAAE,aAAa,IAAI,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAChD,YAAY,EAAE,WAAW,EACzB,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,aAAa,EACtB,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,EACvB,IAAI,EAAC,QAAQ,GACb,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/pages/TransactionPage/StartTransactionButton.d.ts

@@ -0,0 +1,2 @@
+import type { StartTransactionButtonProps } from './types.js';
+export declare const StartTransactionButton: React.FC<StartTransactionButtonProps>;

package/dist/esm/pages/TransactionPage/StartTransactionButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js';
+import { useMessageQueue, useStorePriceImpactAcknowledged, } from '../../components/Messages/useMessageQueue.js';
+export const StartTransactionButton = ({ onClick, route, text, loading, }) => {
+    const { messages, isLoading } = useMessageQueue(route);
+    const priceImpactAcknowledged = useStorePriceImpactAcknowledged((state) => state.priceImpactAcknowledged);
+    let hasMessages = messages.length > 0;
+    if (messages.length > 0) {
+        const message = messages.find((message) => message.id === 'PRICE_IMPACT_HIGH');
+        if (message && priceImpactAcknowledged) {
+            hasMessages = false;
+        }
+    }
+    return (_jsx(BaseTransactionButton, { onClick: onClick, text: text, disabled: hasMessages, loading: isLoading || loading }));
+};
+//# sourceMappingURL=StartTransactionButton.js.map

package/dist/esm/pages/TransactionPage/StartTransactionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartTransactionButton.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/StartTransactionButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAA;AACvG,OAAO,EACL,eAAe,EACf,+BAA+B,GAChC,MAAM,8CAA8C,CAAA;AAGrD,MAAM,CAAC,MAAM,sBAAsB,GAA0C,CAAC,EAC5E,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,GACR,EAAE,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IACtD,MAAM,uBAAuB,GAAG,+BAA+B,CAC7D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,uBAAuB,CACzC,CAAA;IAED,IAAI,WAAW,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;IACrC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACxB,MAAM,OAAO,GAAQ,QAAQ,CAAC,IAAI,CAChC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,mBAAmB,CAChD,CAAA;QACD,IAAI,OAAO,IAAI,uBAAuB,EAAE,CAAC;YACvC,WAAW,GAAG,KAAK,CAAA;QACrB,CAAC;IACH,CAAC;IACD,OAAO,CACL,KAAC,qBAAqB,IACpB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,SAAS,IAAI,OAAO,GAC7B,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/pages/TransactionPage/StatusBottomSheet.d.ts

@@ -0,0 +1,7 @@
+import { type RouteExecution } from '../../stores/routes/types.js';
+interface StatusBottomSheetContentProps extends RouteExecution {
+    onClose(): void;
+}
+export declare const StatusBottomSheet: React.FC<RouteExecution>;
+export declare const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps>;
+export {};

package/dist/esm/pages/TransactionPage/StatusBottomSheet.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Done, ErrorRounded, InfoRounded, WarningRounded, } from '@mui/icons-material';
+import { Box, Button, Skeleton, Typography } from '@mui/material';
+import { useCallback, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import { Token } from '../../components/Token/Token.js';
+import { useAvailableChains } from '../../hooks/useAvailableChains.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { getProcessMessage } from '../../hooks/useProcessMessage.js';
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
+import { useTokenBalance } from '../../hooks/useTokenBalance.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { RouteExecutionStatus, } from '../../stores/routes/types.js';
+import { getSourceTxHash } from '../../stores/routes/utils.js';
+import { hasEnumFlag } from '../../utils/enum.js';
+import { formatTokenAmount } from '../../utils/format.js';
+import { navigationRoutes } from '../../utils/navigationRoutes.js';
+import { shortenAddress } from '../../utils/wallet.js';
+import { CenterContainer, IconCircle, MessageSkeletonContainer, } from './StatusBottomSheet.style.js';
+const MessageSkeleton = () => (_jsxs(MessageSkeletonContainer, { children: [_jsx(Skeleton, { height: 24, variant: "text", width: "92%" }), _jsx(Skeleton, { height: 24, variant: "text", width: "56%" })] }));
+export const StatusBottomSheet = ({ status, route, }) => {
+    const ref = useRef(null);
+    const onClose = useCallback(() => {
+        ref.current?.close();
+    }, []);
+    useEffect(() => {
+        const hasSuccessFlag = hasEnumFlag(status, RouteExecutionStatus.Done);
+        const hasFailedFlag = hasEnumFlag(status, RouteExecutionStatus.Failed);
+        if ((hasSuccessFlag || hasFailedFlag) && !ref.current?.isOpen()) {
+            ref.current?.open();
+        }
+    }, [status]);
+    return (_jsx(BottomSheet, { ref: ref, children: _jsx(StatusBottomSheetContent, { status: status, route: route, onClose: onClose }) }));
+};
+export const StatusBottomSheetContent = ({ status, route, onClose }) => {
+    const { t } = useTranslation();
+    const { navigateBack, navigate } = useNavigateBack();
+    const { setFieldValue } = useFieldActions();
+    const { subvariant, subvariantOptions, contractSecondaryComponent, contractCompactComponent, } = useWidgetConfig();
+    const { getChainById } = useAvailableChains();
+    const ref = useRef(null);
+    useSetContentHeight(ref);
+    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 } = useTokenBalance(route.toAddress, toToken);
+    const cleanFields = () => {
+        setFieldValue('fromAmount', '');
+        setFieldValue('toAmount', '');
+    };
+    const handleDone = () => {
+        cleanFields();
+        navigateBack();
+    };
+    const handlePartialDone = () => {
+        if (toToken.chainId !== route.toToken.chainId &&
+            toToken.address !== route.toToken.address) {
+            setFieldValue('fromAmount', formatTokenAmount(toToken.amount, toToken.decimals), { isTouched: true });
+            setFieldValue('fromChain', toToken.chainId, { isTouched: true });
+            setFieldValue('fromToken', toToken.address, { isTouched: true });
+            setFieldValue('toChain', route.toToken.chainId, {
+                isTouched: true,
+            });
+            setFieldValue('toToken', route.toToken.address, {
+                isTouched: true,
+            });
+        }
+        else {
+            cleanFields();
+        }
+        navigateBack();
+    };
+    const handleClose = () => {
+        cleanFields();
+        onClose();
+    };
+    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 === 'custom'
+                    ? t(`success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`)
+                    : t(`success.title.${transactionType}Successful`);
+            if (token) {
+                primaryMessage = t('success.message.exchangeSuccessful', {
+                    amount: formatTokenAmount(token.amount, token.decimals),
+                    tokenSymbol: token.symbol,
+                    chainName: getChainById(toToken.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(toToken.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(toToken.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) {
+            refetchNewBalance();
+            refetch();
+        }
+    }, [refetch, refetchNewBalance, status]);
+    const showContractComponent = subvariant === 'custom' &&
+        hasEnumFlag(status, RouteExecutionStatus.Done) &&
+        (contractCompactComponent || contractSecondaryComponent);
+    return (_jsxs(Box, { ref: ref, sx: {
+            p: 3,
+        }, children: [!showContractComponent ? (_jsx(CenterContainer, { children: _jsxs(IconCircle, { status: status, mb: 1, children: [status === RouteExecutionStatus.Idle ? (_jsx(InfoRounded, { color: "primary" })) : null, status === RouteExecutionStatus.Done ? (_jsx(Done, { color: "success" })) : null, hasEnumFlag(status, RouteExecutionStatus.Partial) ||
+                            hasEnumFlag(status, RouteExecutionStatus.Refunded) ? (_jsx(WarningRounded, { color: "warning" })) : null, hasEnumFlag(status, RouteExecutionStatus.Failed) ? (_jsx(ErrorRounded, { color: "error" })) : null] }) })) : null, _jsx(CenterContainer, { children: _jsx(Typography, { sx: {
+                        py: 1,
+                        fontSize: 18,
+                        fontWeight: 700,
+                    }, children: title }) }), showContractComponent ? (contractCompactComponent || contractSecondaryComponent) : (_jsx(CenterContainer, { children: hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Token, { token: toToken, py: 1, disableDescription: true })) : null })), !showContractComponent ? (primaryMessage ? (_jsx(Typography, { sx: {
+                    py: 1,
+                }, children: primaryMessage })) : (_jsx(MessageSkeleton, {}))) : null, secondaryMessage ? (_jsx(Typography, { sx: {
+                    py: 1,
+                }, children: secondaryMessage })) : null, _jsxs(Box, { sx: { display: 'flex', marginTop: 2, gap: 1.5 }, children: [hasEnumFlag(status, RouteExecutionStatus.Done) ? (_jsx(Button, { variant: "text", onClick: handleSeeDetails, fullWidth: true, children: t('button.seeDetails') })) : null, _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] })] })] }));
+};
+//# sourceMappingURL=StatusBottomSheet.js.map

package/dist/esm/pages/TransactionPage/StatusBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBottomSheet.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.tsx"],"names":[],"mappings":"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"}

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.d.ts

@@ -0,0 +1,9 @@
+import type { Theme } from '@mui/material';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+type StatusColor = RouteExecutionStatus | 'warning';
+export declare const CenterContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 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<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    status: StatusColor;
+}, {}, {}>;
+export declare const MessageSkeletonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export {};

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js

@@ -0,0 +1,52 @@
+import { Box, alpha, darken, styled } from '@mui/material';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+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)(() => ({
+    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,
+        },
+    };
+});
+export const MessageSkeletonContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: 64,
+    gap: theme.spacing(0.5),
+    paddingTop: theme.spacing(1),
+}));
+//# sourceMappingURL=StatusBottomSheet.style.js.map

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBottomSheet.style.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAInE,MAAM,cAAc,GAAG,CAAC,MAAmB,EAAE,KAAY,EAAE,EAAE;IAC3D,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,oBAAoB,CAAC,IAAI;YAC5B,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAA;QACtE,KAAK,oBAAoB,CAAC,MAAM;YAC9B,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAA;QACpE,KAAK,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,OAAO,CAAC;QAC9D,KAAK,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,QAAQ,CAAC;QAC/D,KAAK,SAAS;YACZ,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;gBACjC,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aAClD,CAAA;QACH;YACE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAA;IACxE,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IACpC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAA0B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IAChD,MAAM,EACJ,KAAK,EACL,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,WAAW,GACpB,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACjC,OAAO;QACL,eAAe,EAAE,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC;QACzC,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC;YACjC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX;KACF,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAClE,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7B,CAAC,CAAC,CAAA"}

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.d.ts

@@ -0,0 +1,9 @@
+import type { Route } from '@openocean.finance/widget-sdk';
+import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+interface TokenValueBottomSheetProps {
+    route: Route;
+    onContinue(): void;
+    onCancel?(): void;
+}
+export declare const TokenValueBottomSheet: import("react").ForwardRefExoticComponent<TokenValueBottomSheetProps & import("react").RefAttributes<BottomSheetBase>>;
+export {};

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WarningRounded } from '@mui/icons-material';
+import { Box, Button, Typography } from '@mui/material';
+import { isGaslessStep } from '@openocean.finance/widget-sdk';
+import { forwardRef, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
+import { FeeBreakdownTooltip } from '../../components/FeeBreakdownTooltip.js';
+import { useSetContentHeight } from '../../hooks/useSetContentHeight.js';
+import { useFieldValues } from '../../stores/form/useFieldValues.js';
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
+import { CenterContainer, IconCircle } from './StatusBottomSheet.style.js';
+import { calculateValueLossPercentage } from './utils.js';
+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 [fromChainId] = useFieldValues('fromChain');
+    const [toChainId] = useFieldValues('toChain');
+    const isBradge = fromChainId !== toChainId;
+    const { t } = useTranslation();
+    const ref = useRef(null);
+    useSetContentHeight(ref);
+    let { gasCosts, feeCosts, gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+    const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+    const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+    const hasGaslessSupport = route.steps.some(isGaslessStep);
+    if (isBradge && route?.data?.prependedOperatingExpenseCost) {
+        const decimals = 10 ** route.fromToken.decimals;
+        gasCostUSD =
+            (route.data.prependedOperatingExpenseCost / decimals) *
+                Number(route.fromToken.priceUSD);
+    }
+    return (_jsxs(Box, { ref: ref, sx: {
+            p: 3,
+        }, children: [_jsxs(CenterContainer, { children: [_jsx(IconCircle, { status: "warning", mb: 1, children: _jsx(WarningRounded, { color: "warning" }) }), _jsx(Typography, { sx: {
+                            py: 1,
+                            fontSize: 18,
+                            fontWeight: 700,
+                        }, children: t('warning.title.highValueLoss') })] }), _jsx(Typography, { sx: {
+                    py: 1,
+                }, children: t('warning.message.highValueLoss') }), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: 1,
+                }, children: [_jsx(Typography, { children: t('main.sending') }), _jsx(Typography, { sx: {
+                            fontWeight: 600,
+                        }, children: t('format.currency', { value: route.fromAmountUSD }) })] }), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: 0.25,
+                }, children: [_jsx(Typography, { children: isBradge ? 'Fee' : t('main.fees.network') }), _jsx(FeeBreakdownTooltip, { gasCosts: gasCosts, relayerSupport: hasGaslessSupport, children: _jsx(Typography, { sx: {
+                                fontWeight: 600,
+                            }, children: hasGaslessSupport
+                                ? t('main.fees.free')
+                                : t('format.currency', { value: gasCostUSD }) }) })] }), feeCostUSD ? (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: 0.25,
+                }, children: [_jsx(Typography, { children: t('main.fees.provider') }), _jsx(FeeBreakdownTooltip, { feeCosts: feeCosts, children: _jsx(Typography, { sx: {
+                                fontWeight: 600,
+                            }, children: t('format.currency', { value: feeCostUSD }) }) })] })) : null, _jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: 0.25,
+                }, children: [_jsx(Typography, { children: t('main.receiving') }), _jsx(Typography, { sx: {
+                            fontWeight: 600,
+                        }, children: t('format.currency', { value: route.toAmountUSD }) })] }), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mt: 0.25,
+                }, children: [_jsx(Typography, { children: t('main.valueLoss') }), _jsxs(Typography, { sx: {
+                            fontWeight: 600,
+                        }, children: [calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD), "%"] })] }), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    mt: 3,
+                }, children: [_jsx(Button, { variant: "text", onClick: onCancel, fullWidth: true, children: t('button.cancel') }), _jsx(Box, { sx: {
+                            display: 'flex',
+                            p: 1,
+                        } }), _jsx(Button, { variant: "contained", onClick: onContinue, fullWidth: true, children: t('button.continue') })] })] }));
+};
+//# sourceMappingURL=TokenValueBottomSheet.js.map

package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenValueBottomSheet.js","sourceRoot":"","sources":["../../../../src/pages/TransactionPage/TokenValueBottomSheet.tsx"],"names":[],"mappings":"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"}

package/dist/esm/pages/TransactionPage/TransactionPage.d.ts

@@ -0,0 +1 @@
+export declare const TransactionPage: React.FC;

package/dist/esm/pages/TransactionPage/TransactionPage.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Delete } from '@mui/icons-material';
+import { Box, Button, Tooltip } from '@mui/material';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
+import { WarningMessages } from '../../components/Messages/WarningMessages.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { getStepList } from '../../components/Step/StepList.js';
+import { TransactionDetails } from '../../components/TransactionDetails.js';
+import { useAddressActivity } from '../../hooks/useAddressActivity.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useRouteExecution } from '../../hooks/useRouteExecution.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useFieldActions } from '../../stores/form/useFieldActions.js';
+import { RouteExecutionStatus } from '../../stores/routes/types.js';
+import { WidgetEvent } from '../../types/events.js';
+import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
+import { ConfirmToAddressSheet } from './ConfirmToAddressSheet.js';
+import { ExchangeRateBottomSheet } from './ExchangeRateBottomSheet.js';
+import { RouteTracker } from './RouteTracker.js';
+import { StartTransactionButton } from './StartTransactionButton.js';
+import { StatusBottomSheet } from './StatusBottomSheet.js';
+import { TokenValueBottomSheet } from './TokenValueBottomSheet.js';
+import { calculateValueLossPercentage, getTokenValueLossThreshold, } from './utils.js';
+export const TransactionPage = () => {
+    const { t } = useTranslation();
+    const { setFieldValue } = useFieldActions();
+    const emitter = useWidgetEvents();
+    const { navigateBack } = useNavigateBack();
+    const { subvariant, subvariantOptions, contractSecondaryComponent } = useWidgetConfig();
+    const { state } = useLocation();
+    const stateRouteId = state?.routeId;
+    const [routeId, setRouteId] = useState(stateRouteId);
+    const [routeRefreshing, setRouteRefreshing] = useState(false);
+    const tokenValueBottomSheetRef = useRef(null);
+    const exchangeRateBottomSheetRef = useRef(null);
+    const confirmToAddressSheetRef = useRef(null);
+    const onAcceptExchangeRateUpdate = (resolver, data) => {
+        exchangeRateBottomSheetRef.current?.open(resolver, data);
+    };
+    const { route, status, executeRoute, restartRoute, deleteRoute } = useRouteExecution({
+        routeId: routeId,
+        onAcceptExchangeRateUpdate,
+    });
+    const { toAddress, hasActivity, isLoading: isLoadingAddressActivity, isFetched: isActivityAddressFetched, } = useAddressActivity(route?.toChainId);
+    const getHeaderTitle = () => {
+        if (subvariant === 'custom') {
+            return t(`header.${subvariantOptions?.custom ?? 'checkout'}`);
+        }
+        if (route) {
+            const transactionType = route.fromChainId === route.toChainId ? 'swap' : 'bridge';
+            return status === RouteExecutionStatus.Idle
+                ? t(`Confirm ${transactionType}`)
+                : t(`header.${transactionType}`);
+        }
+        return t('header.exchange');
+    };
+    const headerAction = useMemo(() => status === RouteExecutionStatus.Idle ? (_jsx(RouteTracker, { observableRouteId: stateRouteId, onChange: setRouteId, onFetching: setRouteRefreshing })) : undefined, [stateRouteId, status]);
+    useHeader(getHeaderTitle(), headerAction);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to emit event only when the page is mounted
+    useEffect(() => {
+        if (status === RouteExecutionStatus.Idle) {
+            emitter.emit(WidgetEvent.ReviewTransactionPageEntered, route);
+        }
+    }, []);
+    if (!route) {
+        return null;
+    }
+    const handleExecuteRoute = () => {
+        if (tokenValueBottomSheetRef.current?.isOpen()) {
+            const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+            const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+            const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+            emitter.emit(WidgetEvent.RouteHighValueLoss, {
+                fromAmountUSD,
+                toAmountUSD,
+                gasCostUSD,
+                feeCostUSD,
+                valueLoss: calculateValueLossPercentage(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD),
+            });
+        }
+        tokenValueBottomSheetRef.current?.close();
+        executeRoute();
+        setFieldValue('fromAmount', '');
+        if (subvariant === 'custom') {
+            setFieldValue('fromToken', '');
+            setFieldValue('toToken', '');
+        }
+    };
+    const handleStartClick = async () => {
+        if (status === RouteExecutionStatus.Idle) {
+            if (toAddress &&
+                !hasActivity &&
+                !isLoadingAddressActivity &&
+                isActivityAddressFetched) {
+                confirmToAddressSheetRef.current?.open();
+                return;
+            }
+            const { gasCostUSD, feeCostUSD } = getAccumulatedFeeCostsBreakdown(route);
+            const fromAmountUSD = Number.parseFloat(route.fromAmountUSD);
+            const toAmountUSD = Number.parseFloat(route.toAmountUSD);
+            const tokenValueLossThresholdExceeded = getTokenValueLossThreshold(fromAmountUSD, toAmountUSD, gasCostUSD, feeCostUSD);
+            if (tokenValueLossThresholdExceeded && subvariant !== 'custom') {
+                tokenValueBottomSheetRef.current?.open();
+            }
+            else {
+                handleExecuteRoute();
+            }
+        }
+        if (status === RouteExecutionStatus.Failed) {
+            restartRoute();
+        }
+    };
+    const handleRemoveRoute = () => {
+        navigateBack();
+        deleteRoute();
+    };
+    const getButtonText = () => {
+        switch (status) {
+            case RouteExecutionStatus.Idle:
+                switch (subvariant) {
+                    case 'custom':
+                        return subvariantOptions?.custom === 'deposit'
+                            ? t('button.deposit')
+                            : t('button.buy');
+                    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 '';
+        }
+    };
+    return (_jsxs(PageContainer, { bottomGutters: true, children: [getStepList(route, subvariant), subvariant === 'custom' && contractSecondaryComponent ? (_jsx(ContractComponent, { sx: { marginTop: 2 }, children: contractSecondaryComponent })) : null, _jsx(TransactionDetails, { route: route, sx: { marginTop: 2 } }), status === RouteExecutionStatus.Idle ||
+                status === RouteExecutionStatus.Failed ? (_jsxs(_Fragment, { children: [_jsx(WarningMessages, { mt: 2, route: route, allowInteraction: true }), _jsxs(Box, { sx: {
+                            mt: 2,
+                            display: 'flex',
+                        }, children: [_jsx(StartTransactionButton, { text: getButtonText(), onClick: handleStartClick, route: route, loading: routeRefreshing || isLoadingAddressActivity }), status === RouteExecutionStatus.Failed ? (_jsx(Tooltip, { title: t('button.removeTransaction'), placement: "bottom-end", children: _jsx(Button, { onClick: handleRemoveRoute, sx: {
+                                        minWidth: 48,
+                                        marginLeft: 1,
+                                    }, children: _jsx(Delete, {}) }) })) : null] })] })) : null, status ? _jsx(StatusBottomSheet, { status: status, route: route }) : null, subvariant !== 'custom' ? (_jsx(TokenValueBottomSheet, { route: route, ref: tokenValueBottomSheetRef, onContinue: handleExecuteRoute })) : null, _jsx(ExchangeRateBottomSheet, { ref: exchangeRateBottomSheetRef }), _jsx(ConfirmToAddressSheet, { ref: confirmToAddressSheetRef, onContinue: handleExecuteRoute, toAddress: toAddress, toChainId: route.toChainId })] }));
+};
+//# sourceMappingURL=TransactionPage.js.map