@daimo/pay/build/src/components/Pages/WaitingExternal/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 { useState, useEffect } from 'react';
import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
import { ExternalPaymentOptions, shouldShowExternalQRCodeOnDesktop } from '@daimo/pay-common';
import { ExternalLinkIcon } from '../../../assets/icons.js';
import useIsMobile from '../../../hooks/useIsMobile.js';
import useLocales from '../../../hooks/useLocales.js';
import styled from '../../../styles/styled/index.js';
import Button from '../../Common/Button/index.js';
import ConnectWithQRCode from '../../DaimoPayModal/ConnectWithQRCode.js';
import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';

const WaitingExternal = () => {
  const context = usePayContext();
  const { triggerResize, paymentState } = context;
  const { isMobile } = useIsMobile();
  const locales = useLocales();
  const { selectedExternalOption, payWithExternal, paymentWaitingMessage } = paymentState;
  useDaimoPay();
  let isCoinbase = false;
  let isBinance = false;
  if (selectedExternalOption) {
    isCoinbase = selectedExternalOption.id === ExternalPaymentOptions.Coinbase;
    isBinance = selectedExternalOption.id === ExternalPaymentOptions.Binance;
  }
  const [externalURL, setExternalURL] = useState(null);
  const [isRegenerating, setIsRegenerating] = useState(false);
  useEffect(() => {
    if (!selectedExternalOption) return;
    payWithExternal(selectedExternalOption.id).then((url) => {
      setExternalURL(url);
      if (!shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id)) {
        openExternalWindow(url);
      }
    });
  }, [selectedExternalOption]);
  const openExternalWindow = (url) => {
    if (!isCoinbase || isMobile) {
      window.open(url, "_blank");
    } else {
      let width = 500;
      let height = 700;
      const left = Math.max(
        0,
        Math.floor((window.innerWidth - width) / 2) + window.screenX
      );
      const top = Math.max(
        0,
        Math.floor((window.innerHeight - height) / 2) + window.screenY
      );
      window.open(
        url,
        "popupWindow",
        `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`
      );
    }
  };
  const regenerateOrder = async () => {
    if (!selectedExternalOption) return;
    setIsRegenerating(true);
    setExternalURL(null);
    try {
      payWithExternal(selectedExternalOption.id).then((url) => {
        setExternalURL(url);
        setIsRegenerating(false);
      });
    } catch (error) {
      console.error("failed to regenerate order:", error);
    }
  };
  const waitingMessageLength = paymentWaitingMessage?.length;
  useEffect(() => {
    triggerResize();
  }, [waitingMessageLength, externalURL]);
  if (!selectedExternalOption) {
    return /* @__PURE__ */ jsx(PageContent, {});
  }
  return shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id) && !isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(ConnectWithQRCode, { externalUrl: externalURL ?? "" }),
    isBinance && paymentWaitingMessage && !isRegenerating && /* @__PURE__ */ jsx(RegenerateContainer, { children: /* @__PURE__ */ jsx(
      RegenerateLink,
      {
        as: "button",
        onClick: regenerateOrder,
        disabled: isRegenerating,
        children: /* @__PURE__ */ jsxs("span", { children: [
          locales.notWorking,
          " ",
          /* @__PURE__ */ jsx(Underline, { children: locales.regenerateOrder })
        ] })
      }
    ) })
  ] }) : /* @__PURE__ */ jsxs(PageContent, { children: [
    /* @__PURE__ */ jsx(
      ExternalPaymentSpinner,
      {
        logoURI: selectedExternalOption.logoURI,
        logoShape: selectedExternalOption.logoShape
      }
    ),
    /* @__PURE__ */ jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [
      /* @__PURE__ */ jsx(ModalH1, { children: locales.waitingForPayment }),
      paymentWaitingMessage && /* @__PURE__ */ jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage })
    ] }),
    /* @__PURE__ */ jsx(
      Button,
      {
        icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}),
        onClick: () => {
          if (externalURL) {
            openExternalWindow(externalURL);
          }
        },
        children: selectedExternalOption.cta
      }
    ),
    isBinance && paymentWaitingMessage && /* @__PURE__ */ jsx(RegenerateContainer, { children: /* @__PURE__ */ jsx(
      RegenerateLink,
      {
        as: "button",
        onClick: regenerateOrder,
        disabled: isRegenerating,
        children: /* @__PURE__ */ jsx("span", { children: isRegenerating ? /* @__PURE__ */ jsx(Fragment, { children: locales.generatingNewOrder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
          locales.notWorking,
          " ",
          /* @__PURE__ */ jsx(Underline, { children: locales.regenerateOrder })
        ] }) })
      }
    ) })
  ] });
};
const RegenerateContainer = styled.div`
  text-align: center;
  margin-top: 16px;
  margin-bottom: -4px;
`;
const RegenerateLink = styled.a`
  appearance: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--ck-body-color-muted);
  text-decoration-color: var(--ck-body-color-muted);
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  cursor: pointer;

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  span {
    opacity: 1;
    transition: opacity 300ms ease;
  }
`;
const Underline = styled.span`
  text-underline-offset: 2px;
  text-decoration: underline;
`;

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