@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
13 lines (12 loc) • 2.19 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 WaveIcon from "../../../assets/wave";
import { ModalBody, ModalContent, ModalH1, PageContent } from "../../ui/Modal/styles";
import useLocales from "../../../hooks/useLocales";
import Button from "../../ui/Button";
export default function Introduction() {
const locales = useLocales({});
const ctaUrl = 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.Ready, {}) }) }) }) }) }) }), _jsx(Logo, { children: _jsx(LogoPosition, { children: _jsx(LogoInner, { children: _jsx(FloatWrapper, { children: _jsx(RotateWrapper, { children: _jsx(LogoGraphic, { children: _jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), _jsx(GraphicBackground, { children: _jsx(WaveIcon, {}) })] }), _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 })] }));
}