@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
90 lines (87 loc) • 3.37 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
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 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;
let isCoinbase = false;
if (selectedExternalOption) {
isCoinbase = selectedExternalOption.id === ExternalPaymentOptions.Coinbase;
}
const [externalURL, setExternalURL] = useState(null);
useEffect(() => {
if (!selectedExternalOption) return;
payWithExternal(selectedExternalOption.id).then((url) => {
setExternalURL(url);
if (!shouldShowExternalQRCodeOnDesktop) {
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 waitingMessageLength = paymentWaitingMessage?.length;
useEffect(() => {
triggerResize();
}, [waitingMessageLength, externalURL]);
if (!selectedExternalOption) {
return /* @__PURE__ */ jsx(PageContent, {});
}
return shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id) && !isMobile ? /* @__PURE__ */ jsx(ConnectWithQRCode, { externalUrl: externalURL ?? "" }) : /* @__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
}
)
] });
};
export { WaitingExternal as default };
//# sourceMappingURL=index.js.map