@coin-voyage/paykit/dist/components/Pages/Confirmation/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getChainExplorerTxUrl, PayOrderMode, PayOrderStatus } from "@coin-voyage/shared/common";
import { motion } from "framer-motion";
import { useEffect, useMemo } from "react";
import { ExternalLinkIcon, LoadingCircleIcon, TickIcon } from "../../../assets/icons";
import styled from "../../../styles/styled/index";
import usePayContext from "../../contexts/pay/index";
import { ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
import PoweredByFooter from "../../ui/PoweredByFooter/index";
const confirmingState = [PayOrderStatus.AWAITING_CONFIRMATION, PayOrderStatus.EXECUTING_ORDER, PayOrderStatus.COMPLETED];
export default function Confirmation() {
    const { paymentState, onSuccess } = usePayContext();
    const { payOrder } = paymentState;
    const isDeposit = payOrder?.mode === PayOrderMode.DEPOSIT;
    const { status, done, txURL } = useMemo(() => {
        if (!payOrder || !confirmingState.includes(payOrder.status)) {
            return {
                status: "Awaiting Payment...",
                done: false,
                txURL: undefined,
            };
        }
        const sourceTxHash = payOrder.deposit_tx_hash;
        const chainId = payOrder.source_currency?.chain_id;
        const sourceTxUrl = sourceTxHash && chainId ? getChainExplorerTxUrl(chainId, sourceTxHash) : undefined;
        if (payOrder.status === PayOrderStatus.AWAITING_CONFIRMATION) {
            return {
                status: "Confirming payment...",
                done: false,
                txURL: sourceTxUrl,
            };
        }
        if (payOrder.status === PayOrderStatus.EXECUTING_ORDER) {
            return {
                status: isDeposit ? "Executing order..." : "Payment complete",
                done: !isDeposit,
                txURL: sourceTxUrl,
            };
        }
        if (payOrder.status === PayOrderStatus.COMPLETED) {
            const receivingTxHash = payOrder.receiving_tx_hash;
            const destChainId = payOrder.destination_currency?.chain_id;
            const exposedTxURL = isDeposit && destChainId && receivingTxHash ? getChainExplorerTxUrl(destChainId, receivingTxHash) : sourceTxUrl;
            return {
                status: isDeposit ? "Deposit complete" : "Payment complete",
                done: true,
                txURL: exposedTxURL
            };
        }
        return {
            status: "Confirming...",
            done: false,
            txURL: sourceTxUrl,
        };
    }, [payOrder, isDeposit]);
    useEffect(() => {
        if (done) {
            onSuccess();
        }
    }, [done, onSuccess]);
    return (_jsx(PageContent, { style: {
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
        }, children: _jsxs(ModalContent, { style: {
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                paddingBottom: 0,
            }, children: [_jsx(AnimationContainer, { children: _jsxs(InsetContainer, { children: [_jsx(Spinner, { "$status": done }), _jsx(SuccessIcon, { "$status": done })] }) }), _jsx(ModalH1, { children: status }), txURL &&
                    _jsxs(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLinkIcon, { width: 14, height: 14, fillOpacity: 0.9 }), " view transaction"] }), _jsx(PoweredByFooter, {})] }) }));
}
const AnimationContainer = styled(motion.div) `
  position: relative;
  width: 100px;
  height: 100px;
  transition: transform 0.5s ease-in-out;
  margin-bottom: 16px;
`;
const InsetContainer = styled(motion.div) `
  position: absolute;
  overflow: hidden;
  inset: 6px;
  border-radius: 50px;
  background: var(--ck-body-background);
  display: flex;
  align-items: center;
  justify-content: center;
  svg {
    position: absolute;
    width: 100%;
    height: 100%;
  }
`;
const Link = styled.a `
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--ck-body-color);
  text-decoration: none;

  &:hover {
    color: var(--ck-body-color-muted);
  }
`;
const SuccessIcon = styled(TickIcon) `
  color: var(--ck-body-color-valid);

  transform: scale(0.5);
  transition: all 0.2s ease-in-out;
  position: absolute;
  opacity: ${(props) => (props.$status ? 1 : 0)};
  transform: ${(props) => (props.$status ? "scale(1)" : "scale(0.5)")};
`;
const Spinner = styled(LoadingCircleIcon) `
  position: absolute;
  transition: all 0.2s ease-in-out;
  animation: rotateSpinner 400ms linear infinite;
  opacity: ${(props) => (props.$status ? 0 : 1)};
  transform: ${(props) => (props.$status ? "scale(0.5)" : "scale(1)")};

  @keyframes rotateSpinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;
//# sourceMappingURL=index.js.map