@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
73 lines (72 loc) • 4.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { getChainExplorerTxUrl } from "@coin-voyage/shared/common";
import { PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/types";
import { useEffect, useMemo } from "react";
import { ExternalLinkIcon } from "../../../assets/icons";
import useLocales from "../../../hooks/useLocales";
import usePayContext from "../../contexts/pay/index";
import { ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
import PoweredByFooter from "../../ui/PoweredByFooter/index";
import { AnimationContainer, ErrorIcon, InsetContainer, Link, Spinner, SuccessIcon } from "./styles";
export default function Confirmation() {
const locales = useLocales();
const { paymentState, onSuccess, options } = usePayContext();
const { payOrder } = paymentState;
const isDeposit = payOrder?.mode === PayOrderMode.DEPOSIT;
const { title, uiState, txURL } = useMemo(() => getConfirmationState(payOrder, isDeposit, locales, options?.optimisticConfirmation), [payOrder, isDeposit, locales, options?.optimisticConfirmation]);
useEffect(() => {
if (uiState === "success") {
onSuccess();
}
}, [uiState, onSuccess]);
return (_jsx(PageContent, { "$center": true, children: _jsxs(ModalContent, { "$center": true, style: { paddingBottom: 0 }, children: [_jsx(AnimationContainer, { children: _jsxs(InsetContainer, { children: [_jsx(Spinner, { "$status": uiState === "loading" }), _jsx(SuccessIcon, { "$status": uiState === "success" }), _jsx(ErrorIcon, { "$status": uiState === "error" })] }) }), _jsx(ModalH1, { children: title }), txURL && (_jsxs(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLinkIcon, { width: 14, height: 14, fillOpacity: 0.9 }), "view transaction"] })), _jsx(PoweredByFooter, {})] }) }));
}
function getConfirmationState(payOrder, isDeposit, locales, optimisticConfirmation) {
if (!payOrder) {
return {
title: _jsxs(_Fragment, { children: [locales.confirmationScreen_awaiting, "..."] }),
uiState: "loading",
};
}
const payment = payOrder.payment;
const confirmOptimistically = optimisticConfirmation && !isDeposit;
const sourceTxURL = payment?.src.chain_id && payOrder.deposit_tx_hash
? getChainExplorerTxUrl(payment.src.chain_id, payOrder.deposit_tx_hash)
: undefined;
if (payOrder.status === PayOrderStatus.FAILED) {
return {
title: locales.confirmationScreen_failed ?? "Transaction failed",
uiState: "error",
};
}
if (payOrder.status === PayOrderStatus.AWAITING_CONFIRMATION ||
payOrder.status === PayOrderStatus.OPTIMISTIC_CONFIRMED) {
return {
title: confirmOptimistically ? locales.confirmationScreen_completed : _jsxs(_Fragment, { children: [locales.awaitingConfirmation, "..."] }),
uiState: confirmOptimistically ? "success" : "loading",
txURL: sourceTxURL,
};
}
if (payOrder.status === PayOrderStatus.EXECUTING_ORDER) {
return {
title: confirmOptimistically ? (locales.confirmationScreen_completed) : (_jsxs(_Fragment, { children: [locales.confirmationScreen_executing, "..."] })),
uiState: confirmOptimistically ? "success" : "loading",
txURL: sourceTxURL,
};
}
if (payOrder.status === PayOrderStatus.COMPLETED) {
const receivingTxHash = payOrder.receiving_tx_hash;
const destChainId = payment?.dst.chain_id;
const txURL = isDeposit && destChainId && receivingTxHash ? getChainExplorerTxUrl(destChainId, receivingTxHash) : sourceTxURL;
return {
title: locales.confirmationScreen_completed,
uiState: "success",
txURL,
};
}
return {
title: _jsxs(_Fragment, { children: [locales.confirmationScreen_awaiting, "..."] }),
uiState: "loading",
txURL: sourceTxURL,
};
}