@daimo/pay 0.3.21 → 1.0.1

package/build/src/components/Common/CopyToClipboard/index.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import Button from '../Button/index.js';
+import CopyToClipboardIcon from './CopyToClipboardIcon.js';
+
+const Container = styled.div `
+  --color: var(--ck-copytoclipboard-stroke);
+  --bg: var(--ck-body-background);
+  transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
+
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4px;
+  gap: 8px;
+
+  ${(props) => props.$disabled
+    ? css `
+          cursor: not-allowed;
+          opacity: 0.4;
+        `
+    : css `
+          &:hover {
+            --color: var(--ck-body-color-muted);
+          }
+        `}
+`;
+const CopyToClipboard = ({ string, children, variant }) => {
+    const [clipboard, setClipboard] = useState(false);
+    let timeout;
+    const onCopy = () => {
+        if (!string)
+            return;
+        const str = string.trim();
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(str);
+        }
+        setClipboard(true);
+        clearTimeout(timeout);
+        timeout = setTimeout(() => setClipboard(false), 1000);
+    };
+    if (variant === "button")
+        return (jsx(Button, { disabled: !string, onClick: onCopy, icon: jsx(CopyToClipboardIcon, { copied: clipboard }), children: children }));
+    return (jsxs(Container, { onClick: onCopy, "$disabled": !string, children: [jsx(CopyToClipboardIcon, { copied: clipboard, dark: true }), children] }));
+};
+
+export { CopyToClipboard as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Common/CopyToClipboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Common/CustomQRCode/QRCode.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import QRCodeUtil from 'qrcode';
+import { useMemo } from 'react';
+
+const generateMatrix = (value, errorCorrectionLevel) => {
+    const arr = Array.prototype.slice.call(QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data, 0);
+    const sqrt = Math.sqrt(arr.length);
+    return arr.reduce((rows, key, index) => (index % sqrt === 0
+        ? rows.push([key])
+        : rows[rows.length - 1].push(key)) && rows, []);
+};
+function QRCode({ ecl = "M", size: sizeProp = 200, uri, clearArea = false, image, imageBackground = "transparent", }) {
+    const logoSize = clearArea ? 168 : 0;
+    const size = sizeProp - 10 * 2;
+    const dots = useMemo(() => {
+        const dots = [];
+        const matrix = generateMatrix(uri, ecl);
+        const cellSize = size / matrix.length;
+        let qrList = [
+            { x: 0, y: 0 },
+            { x: 1, y: 0 },
+            { x: 0, y: 1 },
+        ];
+        qrList.forEach(({ x, y }) => {
+            const x1 = (matrix.length - 7) * cellSize * x;
+            const y1 = (matrix.length - 7) * cellSize * y;
+            for (let i = 0; i < 3; i++) {
+                dots.push(jsx("rect", { fill: i % 2 !== 0
+                        ? "var(--ck-qr-background, var(--ck-body-background))"
+                        : "var(--ck-qr-dot-color)", rx: (i - 2) * -5 + (i === 0 ? 2 : 3), ry: (i - 2) * -5 + (i === 0 ? 2 : 3), width: cellSize * (7 - i * 2), height: cellSize * (7 - i * 2), x: x1 + cellSize * i, y: y1 + cellSize * i }, `${i}-${x}-${y}`));
+            }
+        });
+        if (image) {
+            const x1 = (matrix.length - 7) * cellSize * 1;
+            const y1 = (matrix.length - 7) * cellSize * 1;
+            dots.push(jsxs(Fragment, { children: [jsx("rect", { fill: imageBackground, rx: (0 - 2) * -5 + 2, ry: (0 - 2) * -5 + 2, width: cellSize * (7 - 0 * 2), height: cellSize * (7 - 0 * 2), x: x1 + cellSize * 0, y: y1 + cellSize * 0 }), jsx("foreignObject", { width: cellSize * (7 - 0 * 2), height: cellSize * (7 - 0 * 2), x: x1 + cellSize * 0, y: y1 + cellSize * 0, children: jsx("div", { style: { borderRadius: (0 - 2) * -5 + 2, overflow: "hidden" }, children: image }) })] }));
+        }
+        const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
+        const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+        const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+        matrix.forEach((row, i) => {
+            row.forEach((_, j) => {
+                if (matrix[i][j]) {
+                    // Do not render dots under position squares
+                    if (!((i < 7 && j < 7) ||
+                        (i > matrix.length - 8 && j < 7) ||
+                        (i < 7 && j > matrix.length - 8))) {
+                        //if (image && i > matrix.length - 9 && j > matrix.length - 9) return;
+                        if (image ||
+                            !(i > matrixMiddleStart &&
+                                i < matrixMiddleEnd &&
+                                j > matrixMiddleStart &&
+                                j < matrixMiddleEnd)) {
+                            dots.push(jsx("circle", { cx: i * cellSize + cellSize / 2, cy: j * cellSize + cellSize / 2, fill: "var(--ck-qr-dot-color)", r: cellSize / 3 }, `circle-${i}-${j}`));
+                        }
+                    }
+                }
+            });
+        });
+        return dots;
+    }, [ecl, size, uri]);
+    return (jsxs("svg", { height: size, width: size, viewBox: `0 0 ${size} ${size}`, style: {
+            width: size,
+            height: size,
+        }, children: [jsx("rect", { fill: "transparent", height: size, width: size }), dots] }));
+}
+
+export { QRCode };
+//# sourceMappingURL=QRCode.js.map

package/build/src/components/Common/CustomQRCode/QRCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Common/CustomQRCode/index.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { QRCodeContainer, QRCodeContent, LogoContainer, LogoIcon, QRPlaceholder } from './styles.js';
+import { AnimatePresence, motion } from 'framer-motion';
+import Tooltip from '../Tooltip/index.js';
+import useWindowSize from '../../../hooks/useWindowSize.js';
+import { QRCode } from './QRCode.js';
+
+function CustomQRCode({ value, image, imageBackground, imagePosition = "center", tooltipMessage, }) {
+    const windowSize = useWindowSize();
+    const Logo = windowSize.width > 920 && tooltipMessage ? (jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image })) : (image);
+    return (jsx(QRCodeContainer, { children: jsxs(QRCodeContent, { children: [image && (jsx(LogoContainer, { children: jsx(LogoIcon, { "$wcLogo": imagePosition !== "center", style: {
+                            background: imagePosition === "center" ? imageBackground : undefined,
+                        }, children: Logo }) })), jsx(AnimatePresence, { initial: false, children: value ? (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: "absolute", inset: [0, 0] }, transition: {
+                            duration: 0.2,
+                        }, children: jsx(QRCode, { uri: value, size: 576, ecl: "H", clearArea: !!(imagePosition === "center" && image) }) }, value)) : (jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: "absolute", inset: [0, 0] }, transition: {
+                            duration: 0.2,
+                        }, children: [jsx("span", {}), jsx("span", {}), jsx("span", {}), jsx("div", {})] })) })] }) }));
+}
+CustomQRCode.displayName = "CustomQRCode";
+
+export { CustomQRCode as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Common/CustomQRCode/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Common/CustomQRCode/styles.js

@@ -0,0 +1,155 @@
+import { motion } from 'framer-motion';
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const QRCodeContainer = styled(motion.div) `
+  z-index: 3;
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1px 0 2px;
+  border-radius: var(--ck-qr-border-radius, 24px);
+  background: var(--ck-qr-background, transparent);
+  box-shadow: 0 0 0 1px var(--ck-qr-border-color);
+  backface-visibility: hidden;
+  svg {
+    display: block;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+`;
+const QRCodeContent = styled(motion.div) `
+  position: absolute;
+  inset: 13px;
+  svg {
+    width: 100% !important;
+    height: auto !important;
+  }
+`;
+const PlaceholderKeyframes = keyframes `
+  0%{ background-position: 100% 0; }
+  100%{ background-position: -100% 0; }
+`;
+const QRPlaceholder = styled(motion.div) `
+  --color: var(--ck-qr-dot-color);
+  --bg: var(--ck-qr-background, var(--ck-body-background));
+
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > div {
+    z-index: 4;
+    position: relative;
+    width: 28%;
+    height: 28%;
+    border-radius: 20px;
+    background: var(--bg);
+    box-shadow: 0 0 0 7px var(--bg);
+  }
+  > span {
+    z-index: 4;
+    position: absolute;
+    background: var(--color);
+    border-radius: 12px;
+    width: 13.25%;
+    height: 13.25%;
+    box-shadow: 0 0 0 4px var(--bg);
+    &:before {
+      content: "";
+      position: absolute;
+      inset: 9px;
+      border-radius: 3px;
+      box-shadow: 0 0 0 4px var(--bg);
+    }
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+  }
+  &:before {
+    z-index: 3;
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: repeat;
+    background-size: 1.888% 1.888%;
+    background-image: radial-gradient(var(--color) 41%, transparent 41%);
+  }
+  &:after {
+    z-index: 5;
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: scale(1.5) rotate(45deg);
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 50%,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+    background-size: 200% 100%;
+    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
+  }
+`;
+const LogoContainer = styled(motion.div) `
+  z-index: 6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateY(50%) scale(0.9999); // Shifting fix
+`;
+const LogoIcon = styled(motion.div) `
+  z-index: 6;
+  position: absolute;
+  left: 50%;
+  overflow: hidden;
+
+  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  ${(props) => props.$wcLogo
+    ? css `
+          width: 29%;
+          height: 20.5%;
+        `
+    : css `
+          width: 28%;
+          height: 28%;
+          border-radius: 17px;
+          &:before {
+            pointer-events: none;
+            z-index: 2;
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+          }
+        `}
+`;
+
+export { LogoContainer, LogoIcon, PlaceholderKeyframes, QRCodeContainer, QRCodeContent, QRPlaceholder };
+//# sourceMappingURL=styles.js.map

package/build/src/components/Common/CustomQRCode/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Common/FitText/index.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import useFitText from '../../../hooks/useFitText.js';
+
+const FitText = ({ children }) => {
+    const [ready, setReady] = React.useState(false);
+    const { fontSize, ref: textRef } = useFitText({
+        logLevel: "none",
+        maxFontSize: 100,
+        minFontSize: 70,
+        onStart: () => setReady(true),
+        onFinish: () => setReady(true),
+    });
+    return (jsx("div", { ref: textRef, style: {
+            visibility: ready ? "visible" : "hidden",
+            fontSize: `${fontSize}%`,
+            maxHeight: "100%",
+            maxWidth: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        }, children: children }));
+};
+FitText.displayName = "FitText";
+
+export { FitText as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Common/FitText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Common/Modal/index.js

@@ -0,0 +1,297 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ResetContainer } from '../../../styles/index.js';
+import Portal from '../Portal/index.js';
+import { isMobile, flattenChildren, isWalletConnectConnector } from '../../../utils/index.js';
+import { ModalContainer, BackgroundOverlay, Container, BoxContainer, DisclaimerBackground, Disclaimer, ErrorMessage, ControllerContainer, CloseButton, BackButton, InfoButton, ModalHeading, InnerContainer, PageContents, PageContainer, TextWithHr } from './styles.js';
+import useLockBodyScroll from '../../../hooks/useLockBodyScroll.js';
+import { usePayContext, ROUTES } from '../../DaimoPay.js';
+import { getChainName } from '@daimo/contract';
+import { useTransition } from 'react-transition-state';
+import { useAccount, useSwitchChain } from 'wagmi';
+import FocusTrap from '../../../hooks/useFocusTrap.js';
+import useLocales from '../../../hooks/useLocales.js';
+import usePrevious from '../../../hooks/usePrevious.js';
+import { useWallet } from '../../../wallets/useWallets.js';
+import { useThemeContext } from '../../DaimoPayThemeProvider/DaimoPayThemeProvider.js';
+import FitText from '../FitText/index.js';
+
+const InfoIcon = ({ ...props }) => (jsx("svg", { "aria-hidden": "true", width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 11C20 15.9706 15.9706 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2C15.9706 2 20 6.02944 20 11ZM22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11ZM11.6445 12.7051C11.6445 13.1348 11.3223 13.4678 10.7744 13.4678C10.2266 13.4678 9.92578 13.1885 9.92578 12.6191V12.4795C9.92578 11.4268 10.4951 10.8574 11.2686 10.3203C12.2031 9.67578 12.665 9.32129 12.665 8.59082C12.665 7.76367 12.0205 7.21582 11.043 7.21582C10.3232 7.21582 9.80762 7.57031 9.45312 8.16113C9.38282 8.24242 9.32286 8.32101 9.2667 8.39461C9.04826 8.68087 8.88747 8.8916 8.40039 8.8916C8.0459 8.8916 7.66992 8.62305 7.66992 8.15039C7.66992 7.96777 7.70215 7.7959 7.75586 7.61328C8.05664 6.625 9.27051 5.75488 11.1182 5.75488C12.9336 5.75488 14.5234 6.71094 14.5234 8.50488C14.5234 9.7832 13.7822 10.417 12.7402 11.1045C11.999 11.5986 11.6445 11.9746 11.6445 12.5762V12.7051ZM11.9131 15.5625C11.9131 16.1855 11.376 16.6797 10.7529 16.6797C10.1299 16.6797 9.59277 16.1748 9.59277 15.5625C9.59277 14.9395 10.1191 14.4453 10.7529 14.4453C11.3867 14.4453 11.9131 14.9287 11.9131 15.5625Z", fill: "currentColor" }) }));
+const CloseIcon = ({ ...props }) => (jsx(motion.svg, { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M1 13L13 1M1 1L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+const BackIcon = ({ ...props }) => (jsx(motion.svg, { width: 9, height: 16, viewBox: "0 0 9 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M8 1L1 8L8 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const contentTransitionDuration = 0.22;
+const contentVariants = {
+    initial: {
+        //willChange: 'transform,opacity',
+        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],
+        },
+    },
+};
+const Modal = ({ open, pages, pageId, positionInside, inline, demo, onClose, onBack, onInfo, }) => {
+    const context = usePayContext();
+    const themeContext = useThemeContext();
+    const mobile = isMobile();
+    const { daimoPayOrder, selectedExternalOption, selectedTokenOption, selectedSolanaTokenOption, selectedDepositAddressOption, } = context.paymentState;
+    const wallet = useWallet(context.connector?.id);
+    const walletInfo = {
+        name: wallet?.name,
+        shortName: wallet?.shortName ?? wallet?.name,
+        icon: wallet?.iconConnector ?? wallet?.icon,
+        iconShape: wallet?.iconShape ?? "circle",
+        iconShouldShrink: wallet?.iconShouldShrink,
+    };
+    const locales = useLocales({
+        CONNECTORNAME: walletInfo?.name,
+    });
+    const [state, setOpen] = useTransition({
+        timeout: mobile ? 160 : 160, // different animations, 10ms extra to avoid final-frame drops
+        preEnter: true,
+        mountOnEnter: true,
+        unmountOnExit: true,
+    });
+    const mounted = !(state === "exited" || state === "unmounted");
+    const rendered = state === "preEnter" || state !== "exiting";
+    const currentDepth = context.route === ROUTES.CONNECTORS
+        ? 0
+        : context.route === ROUTES.DOWNLOAD
+            ? 2
+            : 1;
+    const prevDepth = usePrevious(currentDepth, currentDepth);
+    if (!positionInside)
+        useLockBodyScroll(mounted);
+    usePrevious(pageId, pageId);
+    useEffect(() => {
+        setOpen(open);
+        if (open)
+            setInTransition(undefined);
+    }, [open]);
+    const [dimensions, setDimensions] = useState({
+        width: undefined,
+        height: undefined,
+    });
+    const [inTransition, setInTransition] = useState(undefined);
+    // Calculate new content bounds
+    const updateBounds = (node) => {
+        const bounds = {
+            width: node?.offsetWidth,
+            height: node?.offsetHeight,
+        };
+        setDimensions({
+            width: `${bounds?.width}px`,
+            height: `${bounds?.height}px`,
+        });
+    };
+    let blockTimeout;
+    const contentRef = useCallback((node) => {
+        if (!node)
+            return;
+        ref.current = node;
+        // Avoid transition mixups
+        setInTransition(inTransition === undefined ? false : true);
+        clearTimeout(blockTimeout);
+        blockTimeout = setTimeout(() => setInTransition(false), 360);
+        // Calculate new content bounds
+        updateBounds(node);
+    }, [open, inTransition]);
+    // Update layout on chain/network switch to avoid clipping
+    const { chain } = useAccount();
+    const { switchChain } = useSwitchChain();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            updateBounds(ref.current);
+    }, [chain, switchChain, mobile, context.options, context.resize]);
+    useEffect(() => {
+        if (!mounted) {
+            setDimensions({
+                width: undefined,
+                height: undefined,
+            });
+            return;
+        }
+        const listener = (e) => {
+            if (e.key === "Escape" && onClose)
+                onClose();
+        };
+        document.addEventListener("keydown", listener);
+        return () => {
+            document.removeEventListener("keydown", listener);
+        };
+    }, [mounted, onClose]);
+    const dimensionsCSS = {
+        "--height": dimensions.height,
+        "--width": dimensions.width,
+    };
+    function shouldUseQrcode() {
+        if (!wallet)
+            return false; // Fail states are shown in the injector flow
+        const useInjector = !wallet.getWalletConnectDeeplink || wallet.isInstalled;
+        return !useInjector;
+    }
+    function getHeading() {
+        switch (context.route) {
+            case ROUTES.ABOUT:
+                return locales.aboutScreen_heading;
+            case ROUTES.CONNECT:
+                if (shouldUseQrcode()) {
+                    return isWalletConnectConnector(wallet?.connector?.id)
+                        ? locales.scanScreen_heading
+                        : locales.scanScreen_heading_withConnector;
+                }
+                else {
+                    return walletInfo?.name;
+                }
+            case ROUTES.SOLANA_CONNECT:
+                return "Connect Solana Wallet";
+            case ROUTES.SOLANA_CONNECTOR:
+                return context.solanaConnector ?? "Solana Wallet";
+            case ROUTES.CONNECTORS:
+                return locales.connectorsScreen_heading;
+            case ROUTES.MOBILECONNECTORS:
+                return locales.mobileConnectorsScreen_heading;
+            case ROUTES.DOWNLOAD:
+                return locales.downloadAppScreen_heading;
+            case ROUTES.ONBOARDING:
+                return locales.onboardingScreen_heading;
+            case ROUTES.SWITCHNETWORKS:
+                return locales.switchNetworkScreen_heading;
+            case ROUTES.SELECT_METHOD:
+            case ROUTES.SELECT_TOKEN:
+            case ROUTES.SOLANA_SELECT_TOKEN:
+                return daimoPayOrder?.metadata.intent;
+            case ROUTES.SOLANA_PAY_WITH_TOKEN:
+                if (!selectedSolanaTokenOption)
+                    return undefined;
+                return `Pay with ${selectedSolanaTokenOption.required.token.symbol}`;
+            case ROUTES.WAITING_OTHER:
+                return selectedExternalOption?.cta;
+            case ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN:
+                return "Select Chain";
+            case ROUTES.WAITING_DEPOSIT_ADDRESS:
+                if (!selectedDepositAddressOption)
+                    return undefined;
+                return `Pay with ${selectedDepositAddressOption.id}`;
+            case ROUTES.PAY_WITH_TOKEN:
+                if (!selectedTokenOption)
+                    return undefined;
+                const chainName = getChainName(selectedTokenOption.required.token.chainId ?? 0);
+                const capitalizedChainName = chainName.charAt(0).toUpperCase() + chainName.slice(1);
+                return `Pay with ${capitalizedChainName} ${selectedTokenOption.required.token.symbol}`;
+            case ROUTES.CONFIRMATION:
+                return "Payment Successful";
+        }
+    }
+    const Content = (jsx(ResetContainer, { "$useTheme": demo?.theme ?? themeContext.theme, "$useMode": demo?.mode ?? themeContext.mode, "$customTheme": demo?.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", // Block interaction while transitioning
+                                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(AnimatePresence, { initial: false, children: context.options?.disclaimer &&
+                                        context.route === ROUTES.CONNECTORS && (jsx(DisclaimerBackground, { initial: {
+                                            opacity: 0,
+                                        }, animate: {
+                                            opacity: 1,
+                                        }, exit: { opacity: 0 }, transition: {
+                                            delay: 0,
+                                            duration: 0.2,
+                                            ease: [0.25, 0.1, 0.25, 1.0],
+                                        }, children: jsx(Disclaimer, { children: jsx("div", { children: context.options?.disclaimer }) }) })) }), jsx(AnimatePresence, { initial: false, children: context.errorMessage && (jsxs(ErrorMessage, { initial: { y: "10%", x: "-50%" }, animate: { y: "-100%" }, exit: { y: "100%" }, transition: { duration: 0.2, ease: "easeInOut" }, children: [jsx("span", { children: context.errorMessage }), jsx("div", { onClick: () => context.displayError(null), style: {
+                                                    position: "absolute",
+                                                    right: 24,
+                                                    top: 24,
+                                                    cursor: "pointer",
+                                                }, children: jsx(CloseIcon, {}) })] })) }), jsxs(ControllerContainer, { children: [onClose && (jsx(CloseButton, { "aria-label": flattenChildren(locales.close).toString(), onClick: onClose, children: jsx(CloseIcon, {}) })), jsx("div", { style: {
+                                                position: "absolute",
+                                                top: 23,
+                                                left: 20,
+                                                width: 32,
+                                                height: 32,
+                                            }, children: jsx(AnimatePresence, { children: onBack ? (jsx(BackButton, { disabled: inTransition, "aria-label": flattenChildren(locales.back).toString(), onClick: onBack, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                                                        duration: mobile ? 0 : 0.1,
+                                                        delay: mobile ? 0.01 : 0,
+                                                    }, children: jsx(BackIcon, {}) }, "backButton")) : (onInfo &&
+                                                    !context.options?.hideQuestionMarkCTA && (jsx(InfoButton, { disabled: inTransition, "aria-label": flattenChildren(locales.moreInformation).toString(), onClick: onInfo, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                                                        duration: mobile ? 0 : 0.1,
+                                                        delay: mobile ? 0.01 : 0,
+                                                    }, children: jsx(InfoIcon, {}) }, "infoButton"))) }) })] }), jsx(ModalHeading, { children: jsx(AnimatePresence, { children: jsx(motion.div, { style: {
+                                                position: "absolute",
+                                                top: 0,
+                                                bottom: 0,
+                                                left: 52,
+                                                right: 52,
+                                                display: "flex",
+                                                //alignItems: 'center',
+                                                justifyContent: "center",
+                                            }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                                                duration: mobile ? 0 : 0.17,
+                                                delay: mobile ? 0.01 : 0,
+                                            }, children: jsx(FitText, { children: getHeading() }) }, `${context.route}`) }) }), jsx(InnerContainer, { children: Object.keys(pages).map((key) => (jsx(Page, { open: key === pageId, initial: !positionInside && state !== "entered", enterAnim: key === pageId
+                                            ? currentDepth > prevDepth
+                                                ? "active-scale-up"
+                                                : "active"
+                                            : "", exitAnim: key !== pageId
+                                            ? currentDepth < prevDepth
+                                                ? "exit-scale-down"
+                                                : "exit"
+                                            : "", children: jsx(PageContents, { ref: contentRef, style: {
+                                                pointerEvents: key === pageId && rendered ? "auto" : "none",
+                                            }, children: pages[key] }, `inner-${key}`) }, key))) })] })] })] }) }));
+    return (jsx(Fragment, { children: mounted && (jsx(Fragment, { children: positionInside ? (Content) : (jsx(Fragment, { children: jsx(Portal, { children: jsx(FocusTrap, { children: Content }) }) })) })) }));
+};
+const Page = ({ children, open, initial, prevDepth, currentDepth, enterAnim, exitAnim, }) => {
+    const [state, setOpen] = useTransition({
+        timeout: 400,
+        preEnter: true,
+        initialEntered: open,
+        mountOnEnter: true,
+        unmountOnExit: true,
+    });
+    const mounted = !(state === "exited" || state === "unmounted");
+    const rendered = state === "preEnter" || state !== "exiting";
+    useEffect(() => {
+        setOpen(open);
+    }, [open]);
+    if (!mounted)
+        return null;
+    return (jsx(PageContainer, { className: `${rendered ? enterAnim : exitAnim}`, style: {
+            animationDuration: initial ? "0ms" : undefined,
+            animationDelay: initial ? "0ms" : undefined,
+        }, children: children }));
+};
+const OrDivider = ({ children }) => {
+    const locales = useLocales();
+    return (jsx(TextWithHr, { children: jsx("span", { children: children ?? locales.or }) }));
+};
+
+export { OrDivider, contentVariants, Modal as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Common/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}