@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
223 lines (220 loc) • 7.39 kB
JavaScript
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
import { Slider, ImageContainer, ImageContainerInner, Slides, Slide, MobileImageContainer, Dots, Dot } from './styles.js';
import { MotionConfig, AnimatePresence } from 'framer-motion';
import useLocales from '../../../hooks/useLocales.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import Button from '../../Common/Button/index.js';
import FitText from '../../Common/FitText/index.js';
import { OrDivider } from '../../Common/Modal/index.js';
import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
import { SlideOne, SlideTwo, SlideThree } from './graphics.js';
const About = () => {
const locales = useLocales({
//CONNECTORNAME: connector.name,
});
const context = usePayContext();
const ctaUrl = context.options?.ethereumOnboardingUrl ?? locales.aboutScreen_ctaUrl;
const [ready, setReady] = useState(true);
const [slider, setSlider] = useState(0);
const interacted = useRef(false);
const scrollPos = useRef(0);
const animationEase = [0.16, 1, 0.3, 1];
const animationDuration = 600;
let interval;
useEffect(() => {
return () => clearInterval(interval);
}, []);
const isSwipe = () => {
if (sliderRef.current) {
const { overflow } = getComputedStyle(sliderRef.current);
return overflow !== "visible";
}
return false;
};
const gotoSlide = (index) => {
setReady(false);
if (isSwipe()) {
scrollToSlide(index);
} else {
setSlider(index);
}
};
const scrollToSlide = (index) => {
if (sliderRef.current) {
const { offsetWidth: width } = sliderRef.current;
sliderRef.current.scrollLeft = width * index;
setTimeout(() => setSlider(index), 100);
}
};
const onScroll = () => {
if (!sliderRef.current) return;
const { offsetWidth: width, scrollLeft: x } = sliderRef.current;
const prevScroll = scrollPos.current;
scrollPos.current = x;
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(() => {
const slider2 = sliderRef.current;
if (slider2 == null) return;
slider2.addEventListener("scroll", onScroll);
slider2.addEventListener("touchmove", onTouchMove);
slider2.addEventListener("touchend", onTouchEnd);
return () => {
slider2.removeEventListener("scroll", onScroll);
slider2.removeEventListener("touchmove", onTouchMove);
slider2.removeEventListener("touchend", onTouchEnd);
};
}, [sliderRef.current]);
const graphics = [
/* @__PURE__ */ jsx(
SlideOne,
{
layoutId: "graphicCircle",
duration: animationDuration,
ease: animationEase
},
"slideOne"
),
/* @__PURE__ */ jsx(
SlideTwo,
{
layoutId: "graphicCircle",
duration: animationDuration,
ease: animationEase
},
"slideTwo"
),
/* @__PURE__ */ jsx(
SlideThree,
{
layoutId: "graphicCircle",
duration: animationDuration,
ease: animationEase
},
"slideThree"
)
];
const mobileGraphics = [
/* @__PURE__ */ jsx(
SlideOne,
{
duration: animationDuration,
ease: animationEase
},
"slideOne"
),
/* @__PURE__ */ jsx(
SlideTwo,
{
duration: animationDuration,
ease: animationEase
},
"slideTwo"
),
/* @__PURE__ */ jsx(
SlideThree,
{
duration: animationDuration,
ease: animationEase
},
"slideThree"
)
];
const slideHeight = (() => {
switch (context.options?.language) {
case "en-US":
case "zh-CN":
return 64;
default:
return 84;
}
})();
const slides = [
/* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(ModalH1, { style: { height: 24 }, $small: true, children: /* @__PURE__ */ jsx(FitText, { children: locales.aboutScreen_a_h1 }) }),
/* @__PURE__ */ jsx(ModalBody, { style: { height: slideHeight }, children: /* @__PURE__ */ jsx(FitText, { children: locales.aboutScreen_a_p }) })
] }),
/* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(ModalH1, { style: { height: 24 }, $small: true, children: /* @__PURE__ */ jsx(FitText, { children: locales.aboutScreen_b_h1 }) }),
/* @__PURE__ */ jsx(ModalBody, { style: { height: slideHeight }, children: /* @__PURE__ */ jsx(FitText, { children: locales.aboutScreen_b_p }) })
] }),
/* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(ModalH1, { style: { height: 24 }, $small: true, children: /* @__PURE__ */ jsx(FitText, { children: locales.aboutScreen_c_h1 }) }),
/* @__PURE__ */ jsx(ModalBody, { style: { height: slideHeight }, children: /* @__PURE__ */ jsx(FitText, { children: locales.aboutScreen_c_p }) })
] })
];
return /* @__PURE__ */ jsxs(PageContent, { children: [
/* @__PURE__ */ jsxs(Slider, { children: [
/* @__PURE__ */ jsx(ImageContainer, { children: /* @__PURE__ */ jsx(
MotionConfig,
{
transition: {
duration: animationDuration / 1e3,
ease: animationEase
},
children: /* @__PURE__ */ jsx(
AnimatePresence,
{
initial: false,
onExitComplete: () => setReady(true),
children: graphics.map(
(g, i) => slider === i && /* @__PURE__ */ jsx(
ImageContainerInner,
{
style: { position: "absolute" },
children: g
},
i
)
)
}
)
}
) }),
/* @__PURE__ */ jsx(Slides, { ref: sliderRef, children: /* @__PURE__ */ jsx(AnimatePresence, { children: slides.map((s, i) => /* @__PURE__ */ jsxs(Slide, { $active: slider === i, children: [
/* @__PURE__ */ jsx(MobileImageContainer, { children: /* @__PURE__ */ jsx(
MotionConfig,
{
transition: {
duration: 0
},
children: /* @__PURE__ */ jsx(ImageContainerInner, { children: mobileGraphics[i] })
}
) }),
/* @__PURE__ */ jsx(ModalContent, { style: { gap: 8, paddingBottom: 0 }, children: s })
] }, i)) }) })
] }),
/* @__PURE__ */ jsx(OrDivider, { children: /* @__PURE__ */ jsx(Dots, { children: slides.map((s, i) => /* @__PURE__ */ jsx(
Dot,
{
$active: slider === i,
onClick: () => {
didInteract();
gotoSlide(i);
}
},
i
)) }) }),
/* @__PURE__ */ jsx(Button, { href: ctaUrl, arrow: true, children: locales.aboutScreen_ctaText })
] });
};
export { About as default };
//# sourceMappingURL=index.js.map