@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
35 lines (32 loc) • 3.08 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { Graphic, LogoGroup, Logo, LogoPosition, LogoInner, FloatWrapper, RotateWrapper, LogoGraphic, GraphicBackground } from './styles.js';
import Logos from '../../../assets/logos.js';
import wave from '../../../assets/wave.js';
import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
import useLocales from '../../../hooks/useLocales.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import Button from '../../Common/Button/index.js';
const Introduction = () => {
const context = usePayContext();
const locales = useLocales({});
const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
return /* @__PURE__ */ jsxs(PageContent, { children: [
/* @__PURE__ */ jsxs(Graphic, { children: [
/* @__PURE__ */ jsxs(LogoGroup, { children: [
/* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Base, {}) }) }) }) }) }) }),
/* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.MetaMask, {}) }) }) }) }) }) }),
/* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Rainbow, {}) }) }) }) }) }) }),
/* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Phantom, {}) }) }) }) }) }) }),
/* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Trust, {}) }) }) }) }) }) })
] }),
/* @__PURE__ */ jsx(GraphicBackground, { children: wave })
] }),
/* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [
/* @__PURE__ */ jsx(ModalH1, { $small: true, children: locales.onboardingScreen_h1 }),
/* @__PURE__ */ jsx(ModalBody, { children: locales.onboardingScreen_p })
] }),
/* @__PURE__ */ jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })
] });
};
export { Introduction as default };
//# sourceMappingURL=index.js.map