@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, assertNotNull, getOrderSourceChainId, 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 { showContactSupport, confirmationMessage, onSuccess } = usePayContext();
  const { order, paymentState } = useDaimoPay();
  const { done, txURL } = useMemo(() => {
    if (paymentState === "payment_completed" || paymentState === "payment_bounced") {
      let finalChainId;
      let finalTxHash;
      if (order.passedToAddress == null) {
        finalChainId = getOrderDestChainId(order);
        finalTxHash = order.destFastFinishTxHash ?? order.destClaimTxHash;
      } else {
        finalChainId = assertNotNull(getOrderSourceChainId(order));
        finalTxHash = order.sourceInitiateTxHash;
      }
      assert(
        finalTxHash != null,
        `[CONFIRMATION] paymentState: ${paymentState}, but missing txHash`
      );
      const txURL2 = getChainExplorerTxUrl(finalChainId, finalTxHash);
      return { done: true, txURL: txURL2 };
    }
    return { done: false, txURL: void 0 };
  }, [paymentState, order]);
  useEffect(() => {
    if (done) {
      onSuccess();
    }
  }, [done, onSuccess]);
  return /* @__PURE__ */ jsx(
    PageContent,
    {
      style: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      },
      children: /* @__PURE__ */ jsxs(
        ModalContent,
        {
          style: {
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            paddingBottom: 0
          },
          children: [
            /* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsxs(InsetContainer, { children: [
              /* @__PURE__ */ jsx(Spinner, { $status: done }),
              /* @__PURE__ */ jsx(SuccessIcon, { $status: done })
            ] }) }),
            !done ? /* @__PURE__ */ jsx(ModalH1, { children: "Confirming..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(ModalH1, { children: /* @__PURE__ */ jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: "Payment Completed" }) }),
              confirmationMessage && /* @__PURE__ */ jsx(ModalBody, { children: confirmationMessage })
            ] }),
            /* @__PURE__ */ jsx(
              PoweredByFooter,
              {
                supportUrl: showContactSupport ? getSupportUrl(
                  order?.id?.toString() ?? "",
                  done ? "Confirmed" : "Confirming"
                ) : void 0
              }
            )
          ]
        }
      )
    }
  );
};
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