@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
140 lines • 7.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment, useEffect, useRef, useState } from "react";
import { Dot, Dots, ImageContainer, ImageContainerInner, MobileImageContainer, Slide, Slider, Slides, } from "./styles";
import { ModalBody, ModalContent, ModalH1, PageContent, } from "../../ui/Modal/styles";
import { AnimatePresence, MotionConfig } from "framer-motion";
import useLocales from "../../../hooks/useLocales";
import usePayContext from "../../contexts/pay/index";
import Button from "../../ui/Button/index";
import FitText from "../../ui/FitText/index";
import { OrDivider } from "../../ui/Modal/index";
import { SlideOne, SlideThree, SlideTwo } from "./graphics";
export default function About() {
const locales = useLocales({
//CONNECTORNAME: connector.name,
});
const context = usePayContext();
const ctaUrl = context.options?.ethereumOnboardingUrl ?? locales.aboutScreen_ctaUrl;
const [slider, setSlider] = useState(0);
const interacted = useRef(false);
const scrollPos = useRef(0);
const animationEase = [0.16, 1, 0.3, 1];
const animationDuration = 600;
const autoplayDelay = 5100;
let interval;
useEffect(() => {
return () => clearInterval(interval);
}, []);
const isSwipe = () => {
if (sliderRef.current) {
const { overflow } = getComputedStyle(sliderRef.current);
return overflow !== "visible";
}
return false;
};
const gotoSlide = (index) => {
if (isSwipe()) {
scrollToSlide(index);
}
else {
setSlider(index);
}
};
const _nextSlide = () => {
if (interacted.current) {
return;
}
setSlider((prevSlider) => {
const index = (prevSlider + 1) % slides.length;
scrollToSlide(index);
return index;
});
interval = setTimeout(_nextSlide, autoplayDelay);
};
const scrollToSlide = (index) => {
if (sliderRef.current) {
const { offsetWidth: width } = sliderRef.current;
sliderRef.current.scrollLeft = width * index;
setTimeout(() => setSlider(index), 100);
}
};
// This event should not fire on mobile
const onScroll = () => {
if (!sliderRef.current) {
return;
}
const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
const prevScroll = scrollPos.current;
scrollPos.current = x;
// Limit when the slider should be set after swipe
const threshold = 4;
if (prevScroll - x > -threshold && prevScroll - x < threshold) {
const currentSlide = Math.round(x / width);
setSlider(currentSlide);
}
};
const onTouchMove = () => {
didInteract();
};
const onTouchEnd = () => {
const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
const currentSlide = Math.round(x / width);
setSlider(currentSlide);
};
const didInteract = () => {
interacted.current = true;
clearTimeout(interval);
};
const sliderRef = useRef(null);
useEffect(() => {
if (!sliderRef.current) {
return;
}
sliderRef.current.addEventListener("scroll", onScroll);
sliderRef.current.addEventListener("touchmove", onTouchMove);
sliderRef.current.addEventListener("touchend", onTouchEnd);
return () => {
if (!sliderRef.current) {
return;
}
sliderRef.current.removeEventListener("scroll", onScroll);
sliderRef.current.removeEventListener("touchmove", onTouchMove);
sliderRef.current.removeEventListener("touchend", onTouchEnd);
};
}, [sliderRef]);
const graphics = [
_jsx(SlideOne, { layoutId: "graphicCircle", duration: animationDuration, ease: animationEase }, "slide-1"),
_jsx(SlideTwo, { layoutId: "graphicCircle", duration: animationDuration, ease: animationEase }, "slide-2"),
_jsx(SlideThree, { layoutId: "graphicCircle", duration: animationDuration, ease: animationEase }, "slide-3"),
];
const mobileGraphics = [
_jsx(SlideOne, { duration: animationDuration, ease: animationEase }, "slige-1"),
_jsx(SlideTwo, { duration: animationDuration, ease: animationEase }, "slige-2"),
_jsx(SlideThree, { duration: animationDuration, ease: animationEase }, "slige-3"),
];
// Adjust height of ModalBody to fit content based on language
const slideHeight = (() => {
switch (context.options?.language) {
case "en-US":
case "zh-CN":
return 64;
default:
return 84;
}
})();
const slides = [
_jsxs(Fragment, { children: [_jsx(ModalH1, { style: { height: 24 }, "$small": true, children: _jsx(FitText, { children: locales.aboutScreen_a_h1 }) }), _jsx(ModalBody, { style: { height: slideHeight }, children: _jsx(FitText, { children: locales.aboutScreen_a_p }) })] }, "aboutScreen_a"),
_jsxs(Fragment, { children: [_jsx(ModalH1, { style: { height: 24 }, "$small": true, children: _jsx(FitText, { children: locales.aboutScreen_b_h1 }) }), _jsx(ModalBody, { style: { height: slideHeight }, children: _jsx(FitText, { children: locales.aboutScreen_b_p }) })] }, "aboutScreen_b"),
_jsxs(Fragment, { children: [_jsx(ModalH1, { style: { height: 24 }, "$small": true, children: _jsx(FitText, { children: locales.aboutScreen_c_h1 }) }), _jsx(ModalBody, { style: { height: slideHeight }, children: _jsx(FitText, { children: locales.aboutScreen_c_p }) })] }, "aboutScreen_c"),
];
return (_jsxs(PageContent, { children: [_jsxs(Slider, { children: [_jsx(ImageContainer, { children: _jsx(MotionConfig, { transition: {
duration: animationDuration / 1000,
ease: animationEase,
}, children: _jsx(AnimatePresence, { initial: false, children: graphics.map((g, i) => slider === i && (_jsx(ImageContainerInner, { style: { position: "absolute" }, children: g }, i))) }) }) }), _jsx(Slides, { ref: sliderRef, children: _jsx(AnimatePresence, { children: slides.map((s, i) => (_jsxs(Slide, { "$active": slider === i, children: [_jsx(MobileImageContainer, { children: _jsx(MotionConfig, { transition: {
duration: 0,
}, children: _jsx(ImageContainerInner, { children: mobileGraphics[i] }) }) }), _jsx(ModalContent, { style: { gap: 8, paddingBottom: 0 }, children: s })] }, i))) }) })] }), _jsx(OrDivider, { children: _jsx(Dots, { children: slides.map((_s, i) => (_jsx(Dot, { "$active": slider === i, onClick: () => {
didInteract();
gotoSlide(i);
} }, i))) }) }), _jsx(Button, { href: ctaUrl, arrow: true, children: locales.aboutScreen_ctaText })] }));
}
//# sourceMappingURL=index.js.map