@coin-voyage/paykit
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
69 lines (68 loc) • 4.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getChainTypeName, isMobile } from "@coin-voyage/shared/common";
import { FocusTrap, usePrevious } from "@coin-voyage/shared/hooks";
import useLocales from "../../../hooks/useLocales";
import { useThemeContext } from "../../../providers/theme/provider";
import { ResetContainer } from "../../../styles";
import { ROUTES } from "../../../types/routes";
import usePayContext from "../../contexts/pay";
import Portal from "../Portal";
import { ModalControls } from "./ModalControls";
import { ModalDisclaimer } from "./ModalDisclaimer";
import { ModalErrorBanner } from "./ModalErrorBanner";
import { ModalHeadingBar } from "./ModalHeadingBar";
import { ModalPageRenderer } from "./ModalPageRenderer";
import { BackgroundOverlay, BoxContainer, Container, ModalContainer } from "./styles";
import { useModalTransition } from "./useModalTransition";
const contentTransitionDuration = 0.22;
export const contentVariants = {
initial: { zIndex: 2, opacity: 0 },
animate: {
opacity: 1,
scale: 1,
transition: {
duration: contentTransitionDuration * 0.75,
delay: contentTransitionDuration * 0.25,
ease: [0.26, 0.08, 0.25, 1],
},
},
exit: {
zIndex: 1,
opacity: 0,
pointerEvents: "none",
position: "absolute",
left: ["50%", "50%"],
x: ["-50%", "-50%"],
transition: { duration: contentTransitionDuration, ease: [0.26, 0.08, 0.25, 1] },
},
};
export default function Modal({ pages, pageId, heading, depth = 1, positionInside, inline, onClose, onBack, onInfo, }) {
const context = usePayContext();
const themeContext = useThemeContext();
const mobile = isMobile();
const { connectorChainType } = context.paymentState;
const locales = useLocales({ CHAIN_TYPE: getChainTypeName(connectorChainType) });
const { state, mounted, rendered, inTransition, contentRef, dimensionsCSS } = useModalTransition({
open: context.open,
positionInside,
onClose,
resizeDependency: context.resize,
});
const prevDepth = usePrevious(depth, depth);
const Content = (_jsx(ResetContainer, { "$useTheme": themeContext.theme, "$useMode": themeContext.mode, "$customTheme": themeContext.customTheme, children: _jsxs(ModalContainer, { role: "dialog", style: { pointerEvents: rendered ? "auto" : "none", position: positionInside ? "absolute" : undefined }, children: [!inline && _jsx(BackgroundOverlay, { "$active": rendered, onClick: onClose, "$blur": context.options?.overlayBlur }), _jsxs(Container, { style: dimensionsCSS, initial: false, children: [_jsx("div", { style: {
pointerEvents: inTransition ? "all" : "none",
position: "absolute",
top: 0,
bottom: 0,
left: "50%",
transform: "translateX(-50%)",
width: "var(--width)",
zIndex: 9,
transition: "width 200ms ease",
} }), _jsxs(BoxContainer, { className: `${rendered && "active"}`, children: [_jsx(ModalDisclaimer, { disclaimer: context.options?.disclaimer, visible: context.route === ROUTES.CONNECTORS }), _jsx(ModalErrorBanner, { errorMessage: context.errorMessage, onDismiss: () => context.displayError(null) }), _jsx(ModalControls, { locales: locales, mobile: mobile, inTransition: inTransition, hideQuestionMarkCTA: context.options?.hideQuestionMarkCTA, onClose: onClose, onBack: onBack, onInfo: onInfo }), _jsx(ModalHeadingBar, { heading: heading, routeKey: `${context.route}`, mobile: mobile }), _jsx(ModalPageRenderer, { pages: pages, pageId: pageId, currentDepth: depth, prevDepth: prevDepth, positionInside: positionInside, transitionState: state, contentRef: contentRef, rendered: rendered })] })] })] }) }));
if (!mounted)
return null;
if (positionInside)
return Content;
return (_jsx(Portal, { children: _jsx(FocusTrap, { children: Content }) }));
}