@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
15 lines • 2.33 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FloatWrapper, Graphic, GraphicBackground, Logo, LogoGraphic, LogoGroup, LogoInner, LogoPosition, RotateWrapper, } from "./styles";
import Logos from "../../../assets/logos";
import wave from "../../../assets/wave";
import { ModalBody, ModalContent, ModalH1, PageContent, } from "../../ui/Modal/styles";
import useLocales from "../../../hooks/useLocales";
import usePayContext from "../../contexts/pay";
import Button from "../../ui/Button";
export default function Introduction() {
const context = usePayContext();
const locales = useLocales({});
const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
return (_jsxs(PageContent, { children: [_jsxs(Graphic, { children: [_jsxs(LogoGroup, { children: [_jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Trust, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.Argent, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), _jsx(GraphicBackground, { children: wave })] }), _jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [_jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), _jsx(ModalBody, { children: locales.onboardingScreen_p })] }), _jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
}
//# sourceMappingURL=index.js.map