@daimo/pay/build/src/components/Pages/Confirmation/index.js

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

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useMemo, useEffect } from 'react';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { PageContent, ModalContent, ModalH1, Link, ModalBody } from '../../Common/Modal/styles.js';
import { getOrderDestChainId, assert, getChainExplorerTxUrl } from '@daimo/pay-common';
import { motion } from 'framer-motion';
import { TickIcon, LoadingCircleIcon } from '../../../assets/icons.js';
import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
import styled from '../../../styles/styled/index.js';
import { getSupportUrl } from '../../../utils/supportUrl.js';
import PoweredByFooter from '../../Common/PoweredByFooter/index.js';

const Confirmation = () => {
    const { confirmationMessage, onSuccess } = usePayContext();
    const { order, paymentState } = useDaimoPay();
    const { done, txURL } = useMemo(() => {
        if (paymentState === "payment_completed" ||
            paymentState === "payment_bounced") {
            const txHash = order.destFastFinishTxHash ?? order.destClaimTxHash;
            const destChainId = getOrderDestChainId(order);
            assert(txHash != null, `[CONFIRMATION] paymentState: ${paymentState}, but missing txHash`);
            const txURL = getChainExplorerTxUrl(destChainId, txHash);
            return { done: true, txURL };
        }
        return { done: false, txURL: undefined };
    }, [paymentState, order]);
    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 })] }) }), !done ? (jsx(ModalH1, { children: "Confirming..." })) : (jsxs(Fragment, { children: [jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: "Payment Completed" }) }), confirmationMessage && (jsx(ModalBody, { children: confirmationMessage }))] })), jsx(PoweredByFooter, { supportUrl: getSupportUrl(order?.id?.toString() ?? "", done ? "Confirmed" : "Confirming") })] }) }));
};
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 SuccessIcon = styled(TickIcon) `
  color: var(--ck-body-color-valid);
  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)};

  @keyframes rotateSpinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;

export { Confirmation as default };
//# sourceMappingURL=index.js.map