@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
46 lines (43 loc) • 1.66 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { ModalBody, PageContent, ModalContent } from '../../Common/Modal/styles.js';
import { AlertIcon } 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';
function ErrorPage() {
const pay = useDaimoPay();
const supportUrl = getSupportUrl(pay.order?.id?.toString() ?? "", "Error");
let errorBody = "Unknown error";
if (pay.paymentState === "error") {
errorBody = pay.paymentErrorMessage;
}
return (jsx(PageContent, { children: jsxs(ModalContent, { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
paddingBottom: 0,
position: "relative",
}, children: [jsxs(CenterContainer, { children: [jsx(FailIcon, {}), jsx(ErrorBody, { children: jsx("strong", { children: errorBody }) })] }), jsx(PoweredByFooter, { supportUrl: supportUrl, showNeedHelpImmediately: true })] }) }));
}
const CenterContainer = styled.div `
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
max-width: 100%;
`;
const ErrorBody = styled(ModalBody) `
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
`;
const FailIcon = styled(AlertIcon) `
color: var(--ck-body-color-alert);
width: 32px;
height: 32px;
margin-top: auto;
margin-bottom: 16px;
`;
export { ErrorPage as default };
//# sourceMappingURL=index.js.map