@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
69 lines (66 loc) • 3.51 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 } from '@daimo/pay-common';
import { ExternalLinkIcon } from '../../../assets/icons.js';
import useIsMobile from '../../../hooks/useIsMobile.js';
import Button from '../../Common/Button/index.js';
import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';
const WaitingExternal = () => {
const context = usePayContext();
const { triggerResize, paymentState } = context;
const { isMobile } = useIsMobile();
const { selectedExternalOption, payWithExternal, paymentWaitingMessage } = paymentState;
let isPaymentApp = false;
if (selectedExternalOption) {
isPaymentApp =
selectedExternalOption.id === ExternalPaymentOptions.Venmo ||
selectedExternalOption.id === ExternalPaymentOptions.CashApp ||
selectedExternalOption.id === ExternalPaymentOptions.MercadoPago ||
selectedExternalOption.id === ExternalPaymentOptions.Revolut ||
selectedExternalOption.id === ExternalPaymentOptions.Wise;
}
const [externalURL, setExternalURL] = useState(null);
useEffect(() => {
if (!selectedExternalOption)
return;
payWithExternal(selectedExternalOption.id).then((url) => {
setExternalURL(url);
openExternalWindow(url);
});
}, [selectedExternalOption]); // eslint-disable-line react-hooks/exhaustive-deps
const openExternalWindow = (url) => {
if (isMobile || isPaymentApp) {
// on mobile: open in a new tab
window.open(url, "_blank");
}
else {
// on desktop: open in a popup window in
// portrait mode in the center of the screen
let width = 500;
let height = 700;
// if (isPaymentApp) {
// height = 800;
// width = 800;
// }
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]); // eslint-disable-line react-hooks/exhaustive-deps
if (!selectedExternalOption) {
return jsx(PageContent, {});
}
return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedExternalOption.logoURI, logoShape: selectedExternalOption.logoShape }), jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsx(ModalH1, { children: "Waiting For Payment" }), paymentWaitingMessage && (jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage }))] }), jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: () => {
if (externalURL) {
openExternalWindow(externalURL);
}
}, children: selectedExternalOption.cta })] }));
};
export { WaitingExternal as default };
//# sourceMappingURL=index.js.map