@daimo/pay/build/src/components/Pages/Error/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

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();
  let errorBody = "Unknown error";
  if (pay.paymentState === "error") {
    errorBody = pay.paymentErrorMessage;
  }
  const supportUrl = getSupportUrl(pay.order?.id?.toString() ?? "", errorBody);
  return /* @__PURE__ */ jsx(PageContent, { children: /* @__PURE__ */ jsxs(
    ModalContent,
    {
      style: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        paddingBottom: 0,
        position: "relative"
      },
      children: [
        /* @__PURE__ */ jsxs(CenterContainer, { children: [
          /* @__PURE__ */ jsx(FailIcon, {}),
          /* @__PURE__ */ jsx(ErrorBody, { children: /* @__PURE__ */ jsx("strong", { children: errorBody }) })
        ] }),
        /* @__PURE__ */ jsx(PoweredByFooter, { 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