@crossmint/client-sdk-react-ui 0.0.4

package/lib/cjs/useCrossMintModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCrossMintModal.js","sourceRoot":"","sources":["../../src/useCrossMintModal.tsx"],"names":[],"mappings":";;;AAAA,iCAAkD;AAOrC,QAAA,qBAAqB,GAAG,IAAA,qBAAa,EAA6B,EAAgC,CAAC,CAAC;AAEjH,SAAgB,iBAAiB;IAC7B,OAAO,IAAA,kBAAU,EAAC,6BAAqB,CAAC,CAAC;AAC7C,CAAC;AAFD,8CAEC"}

package/lib/cjs/useCrossMintPopup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface PopupContextState {
+    connecting: boolean;
+    connect: (candyMachineId: string, collectionTitle?: string, collectionDescription?: string, collectionPhoto?: string) => void;
+    popup: Window | null;
+}
+export declare const PopupContext: import("react").Context<PopupContextState>;
+export declare function useCrossMintPopup(): PopupContextState;

package/lib/cjs/useCrossMintPopup.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCrossMintPopup = exports.PopupContext = void 0;
+const react_1 = require("react");
+exports.PopupContext = (0, react_1.createContext)({});
+function useCrossMintPopup() {
+    return (0, react_1.useContext)(exports.PopupContext);
+}
+exports.useCrossMintPopup = useCrossMintPopup;
+//# sourceMappingURL=useCrossMintPopup.js.map

package/lib/cjs/useCrossMintPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCrossMintPopup.js","sourceRoot":"","sources":["../../src/useCrossMintPopup.tsx"],"names":[],"mappings":";;;AAAA,iCAAkD;AAcrC,QAAA,YAAY,GAAG,IAAA,qBAAa,EAAoB,EAAuB,CAAC,CAAC;AAEtF,SAAgB,iBAAiB;IAC7B,OAAO,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;AACpC,CAAC;AAFD,8CAEC"}

package/lib/esm/CrossMintButton.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, FC, MouseEvent } from "react";
+export interface ButtonProps {
+    candyMachineId: string;
+    className?: string;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+    tabIndex?: number;
+    theme?: "light" | "dark";
+    collectionTitle?: string;
+    collectionDescription?: string;
+    collectionPhoto?: string;
+}
+export declare const CrossMintButton: FC<ButtonProps>;

package/lib/esm/CrossMintButton.js

@@ -0,0 +1,20 @@
+import React, { useMemo, useCallback } from "react";
+import { useCrossMintPopup } from "./useCrossMintPopup";
+export const CrossMintButton = ({ candyMachineId, className, disabled, onClick, style, tabIndex, theme = "dark", collectionTitle, collectionDescription, collectionPhoto, ...props }) => {
+    const { connecting, connect } = useCrossMintPopup();
+    const handleClick = useCallback((event) => {
+        if (onClick)
+            onClick(event);
+        if (!event.defaultPrevented)
+            connect(candyMachineId, collectionTitle, collectionDescription, collectionPhoto);
+    }, [onClick]);
+    const content = useMemo(() => {
+        if (connecting)
+            return React.createElement("p", null, "Connecting ...");
+        return React.createElement("p", null, "Buy with credit card");
+    }, [connecting]);
+    return (React.createElement("button", { className: `client-sdk-button-trigger client-sdk-button-trigger-${theme}`, disabled: disabled, onClick: handleClick, style: { ...style }, tabIndex: tabIndex, ...props },
+        React.createElement("img", { className: "client-sdk-button-icon", src: "https://www.crossmint.io/assets/crossmint/logo.png", alt: "Crossmint logo" }),
+        content));
+};
+//# sourceMappingURL=CrossMintButton.js.map

package/lib/esm/CrossMintButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossMintButton.js","sourceRoot":"","sources":["../../src/CrossMintButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAexD,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,EAC7C,cAAc,EACd,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,EAAE;IACD,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEpD,MAAM,WAAW,GAAyC,WAAW,CACjE,CAAC,KAAK,EAAE,EAAE;QACN,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAE5B,IAAI,CAAC,KAAK,CAAC,gBAAgB;YACvB,OAAO,CAAC,cAAc,EAAE,eAAe,EAAE,qBAAqB,EAAE,eAAe,CAAC,CAAC;IACzF,CAAC,EACD,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,IAAI,UAAU;YAAE,OAAO,gDAAqB,CAAC;QAC7C,OAAO,sDAA2B,CAAC;IACvC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACH,gCACI,SAAS,EAAE,uDAAuD,KAAK,EAAE,EACzE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,EACnB,QAAQ,EAAE,QAAQ,KACd,KAAK;QAET,6BACI,SAAS,EAAC,wBAAwB,EAClC,GAAG,EAAC,oDAAoD,EACxD,GAAG,EAAC,gBAAgB,GACtB;QACD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC"}

package/lib/esm/CrossMintModal.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+export interface CrossMintModalProps {
+    className?: string;
+    container?: string;
+}
+export declare const CrossMintModal: FC<CrossMintModalProps>;

package/lib/esm/CrossMintModal.js

@@ -0,0 +1,32 @@
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useCrossMintModal } from "./useCrossMintModal";
+export const CrossMintModal = ({ className = "", container = "body" }) => {
+    const ref = useRef(null);
+    const { setVisible } = useCrossMintModal();
+    const [fadeIn, setFadeIn] = useState(false);
+    const [portal, setPortal] = useState(null);
+    const hideModal = useCallback(() => {
+        setFadeIn(false);
+        setTimeout(() => setVisible(false), 150);
+    }, [setFadeIn, setVisible]);
+    useLayoutEffect(() => {
+        // Get original overflow
+        const { overflow } = window.getComputedStyle(document.body);
+        // Hack to enable fade in animation after mount
+        setTimeout(() => setFadeIn(true), 0);
+        // Prevent scrolling on mount
+        document.body.style.overflow = "hidden";
+        return () => {
+            // Re-enable scrolling when component unmounts
+            document.body.style.overflow = overflow;
+        };
+    }, [hideModal]);
+    useLayoutEffect(() => setPortal(document.querySelector(container)), [setPortal, container]);
+    return (portal &&
+        createPortal(React.createElement("div", { "aria-modal": "true", className: `client-sdk-modal ${fadeIn && "client-sdk-modal-fade-in"} ${className}`, ref: ref },
+            React.createElement("div", { className: "client-sdk-modal-container" },
+                React.createElement("span", { className: "client-sdk-modal-loader" })),
+            React.createElement("div", { className: "client-sdk-modal-overlay" })), portal));
+};
+//# sourceMappingURL=CrossMintModal.js.map

package/lib/esm/CrossMintModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossMintModal.js","sourceRoot":"","sources":["../../src/CrossMintModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAOxD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE;IAC9F,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,eAAe,CAAC,GAAG,EAAE;QACjB,wBAAwB;QACxB,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC5D,+CAA+C;QAC/C,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACrC,6BAA6B;QAC7B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAExC,OAAO,GAAG,EAAE;YACR,8CAA8C;YAC9C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC5C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5F,OAAO,CACH,MAAM;QACN,YAAY,CACR,2CACe,MAAM,EACjB,SAAS,EAAE,oBAAoB,MAAM,IAAI,0BAA0B,IAAI,SAAS,EAAE,EAClF,GAAG,EAAE,GAAG;YAER,6BAAK,SAAS,EAAC,4BAA4B;gBACvC,8BAAM,SAAS,EAAC,yBAAyB,GAAG,CAC1C;YACN,6BAAK,SAAS,EAAC,0BAA0B,GAAG,CAC1C,EACN,MAAM,CACT,CACJ,CAAC;AACN,CAAC,CAAC"}

package/lib/esm/CrossMintModalProvider.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+import { CrossMintModalProps } from "./CrossMintModal";
+export interface CrossMintModalProviderProps extends CrossMintModalProps {
+    children: ReactNode;
+}
+export declare const CrossMintModalProvider: FC<CrossMintModalProviderProps>;

package/lib/esm/CrossMintModalProvider.js

@@ -0,0 +1,13 @@
+import React, { useState } from "react";
+import { CrossMintModal } from "./CrossMintModal";
+import { CrossMintModalContext } from "./useCrossMintModal";
+export const CrossMintModalProvider = ({ children, ...props }) => {
+    const [visible, setVisible] = useState(false);
+    return (React.createElement(CrossMintModalContext.Provider, { value: {
+            visible,
+            setVisible,
+        } },
+        children,
+        visible && React.createElement(CrossMintModal, { ...props })));
+};
+//# sourceMappingURL=CrossMintModalProvider.js.map

package/lib/esm/CrossMintModalProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossMintModalProvider.js","sourceRoot":"","sources":["../../src/CrossMintModalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAO5D,MAAM,CAAC,MAAM,sBAAsB,GAAoC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACH,oBAAC,qBAAqB,CAAC,QAAQ,IAC3B,KAAK,EAAE;YACH,OAAO;YACP,UAAU;SACb;QAEA,QAAQ;QACR,OAAO,IAAI,oBAAC,cAAc,OAAK,KAAK,GAAI,CACZ,CACpC,CAAC;AACN,CAAC,CAAC"}

package/lib/esm/CrossMintPopupProvider.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+export interface PopupProviderProps {
+    development: boolean;
+    children: ReactNode;
+}
+export declare const CrossMintPopupProvider: FC<PopupProviderProps>;

package/lib/esm/CrossMintPopupProvider.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { useCrossMintModal } from ".";
+import { PopupContext } from "./useCrossMintPopup";
+const PROD_URL = "https://crossmint.io";
+const DEV_URL = "http://localhost:3001";
+export const CrossMintPopupProvider = ({ development, children }) => {
+    const [connecting, setConnecting] = useState(false);
+    const [popup, setPopup] = useState(null);
+    const { setVisible } = useCrossMintModal();
+    const createPopup = (candyMachineId, collectionTitle, collectionDescription, collectionPhoto) => {
+        const pop = window.open(`${development ? DEV_URL : PROD_URL}/signin?callbackUrl=${encodeURIComponent(`${development ? DEV_URL : PROD_URL}/checkout/mint?candyMachineId=${candyMachineId}&closeOnSuccess=false${collectionTitle ? `&collectionTitle=${collectionTitle}` : ""}${collectionDescription ? `&collectionDescription=${collectionDescription}` : ""}${collectionPhoto ? `&collectionPhoto=${collectionPhoto}` : ""}`)}`, "popUpWindow", createPopupString());
+        if (pop) {
+            setVisible(true);
+            setPopup(pop);
+            registerListeners(pop);
+        }
+        else {
+            setConnecting(false);
+            console.log("Failed to open popup window");
+        }
+    };
+    const connect = (candyMachineId, collectionTitle, collectionDescription, collectionPhoto) => {
+        if (connecting)
+            return;
+        setConnecting(true);
+        createPopup(candyMachineId, collectionTitle, collectionDescription, collectionPhoto);
+    };
+    function registerListeners(pop) {
+        const timer = setInterval(function () {
+            if (pop.closed) {
+                clearInterval(timer);
+                setConnecting(false);
+                setVisible(false);
+            }
+        }, 500);
+    }
+    function createPopupString() {
+        return `height=750,width=400,left=${window.innerWidth / 2 - 200},top=${window.innerHeight / 2 - 375},resizable=yes,scrollbars=yes,toolbar=yes,menubar=true,location=no,directories=no, status=yes`;
+    }
+    return (React.createElement(PopupContext.Provider, { value: {
+            connecting,
+            popup,
+            connect,
+        } }, children));
+};
+//# sourceMappingURL=CrossMintPopupProvider.js.map

package/lib/esm/CrossMintPopupProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossMintPopupProvider.js","sourceRoot":"","sources":["../../src/CrossMintPopupProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,GAAG,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAOnD,MAAM,QAAQ,GAAG,sBAAsB,CAAC;AACxC,MAAM,OAAO,GAAG,uBAAuB,CAAC;AAExC,MAAM,CAAC,MAAM,sBAAsB,GAA2B,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAExD,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,WAAW,GAAG,CAChB,cAAsB,EACtB,eAAwB,EACxB,qBAA8B,EAC9B,eAAwB,EAC1B,EAAE;QACA,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CACnB,GAAG,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,uBAAuB,kBAAkB,CACxE,GACI,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAC5B,iCAAiC,cAAc,wBAC3C,eAAe,CAAC,CAAC,CAAC,oBAAoB,eAAe,EAAE,CAAC,CAAC,CAAC,EAC9D,GAAG,qBAAqB,CAAC,CAAC,CAAC,0BAA0B,qBAAqB,EAAE,CAAC,CAAC,CAAC,EAAE,GAC7E,eAAe,CAAC,CAAC,CAAC,oBAAoB,eAAe,EAAE,CAAC,CAAC,CAAC,EAC9D,EAAE,CACL,EAAE,EACH,aAAa,EACb,iBAAiB,EAAE,CACtB,CAAC;QACF,IAAI,GAAG,EAAE;YACL,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,QAAQ,CAAC,GAAG,CAAC,CAAC;YACd,iBAAiB,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACH,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;SAC9C;IACL,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CACZ,cAAsB,EACtB,eAAwB,EACxB,qBAA8B,EAC9B,eAAwB,EAC1B,EAAE;QACA,IAAI,UAAU;YAAE,OAAO;QAEvB,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpB,WAAW,CAAC,cAAc,EAAE,eAAe,EAAE,qBAAqB,EAAE,eAAe,CAAC,CAAC;IACzF,CAAC,CAAC;IAEF,SAAS,iBAAiB,CAAC,GAAW;QAClC,MAAM,KAAK,GAAG,WAAW,CAAC;YACtB,IAAI,GAAG,CAAC,MAAM,EAAE;gBACZ,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,UAAU,CAAC,KAAK,CAAC,CAAC;aACrB;QACL,CAAC,EAAE,GAAG,CAAC,CAAC;IACZ,CAAC;IAED,SAAS,iBAAiB;QACtB,OAAO,6BAA6B,MAAM,CAAC,UAAU,GAAG,CAAC,GAAG,GAAG,QAC3D,MAAM,CAAC,WAAW,GAAG,CAAC,GAAG,GAC7B,+FAA+F,CAAC;IACpG,CAAC;IAED,OAAO,CACH,oBAAC,YAAY,CAAC,QAAQ,IAClB,KAAK,EAAE;YACH,UAAU;YACV,KAAK;YACL,OAAO;SACV,IAEA,QAAQ,CACW,CAC3B,CAAC;AACN,CAAC,CAAC"}

package/lib/esm/CrossMintProvider.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from "react";
+import { CrossMintModalProps } from "./CrossMintModal";
+export interface CrossMintProviderProps extends CrossMintModalProps {
+    development?: boolean;
+    children: ReactNode;
+}
+export declare const CrossMintProvider: FC<CrossMintProviderProps>;

package/lib/esm/CrossMintProvider.js

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import { CrossMintModal } from "./CrossMintModal";
+import { CrossMintPopupProvider } from "./CrossMintPopupProvider";
+import { CrossMintModalContext } from "./useCrossMintModal";
+export const CrossMintProvider = ({ development = false, children, ...props }) => {
+    const [visible, setVisible] = useState(false);
+    return (React.createElement(CrossMintModalContext.Provider, { value: {
+            visible,
+            setVisible,
+        } },
+        React.createElement(CrossMintPopupProvider, { development: development },
+            children,
+            visible && React.createElement(CrossMintModal, { ...props }))));
+};
+//# sourceMappingURL=CrossMintProvider.js.map

package/lib/esm/CrossMintProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossMintProvider.js","sourceRoot":"","sources":["../../src/CrossMintProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAQ5D,MAAM,CAAC,MAAM,iBAAiB,GAA+B,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzG,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACH,oBAAC,qBAAqB,CAAC,QAAQ,IAC3B,KAAK,EAAE;YACH,OAAO;YACP,UAAU;SACb;QAED,oBAAC,sBAAsB,IAAC,WAAW,EAAE,WAAW;YAC3C,QAAQ;YACR,OAAO,IAAI,oBAAC,cAAc,OAAK,KAAK,GAAI,CACpB,CACI,CACpC,CAAC;AACN,CAAC,CAAC"}

package/lib/esm/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./CrossMintButton";
+export * from "./CrossMintModal";
+export * from "./useCrossMintModal";
+export * from "./useCrossMintPopup";
+export * from "./CrossMintProvider";

package/lib/esm/index.js

@@ -0,0 +1,6 @@
+export * from "./CrossMintButton";
+export * from "./CrossMintModal";
+export * from "./useCrossMintModal";
+export * from "./useCrossMintPopup";
+export * from "./CrossMintProvider";
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/lib/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/lib/esm/useCrossMintModal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface CrossMintModalContextState {
+    visible: boolean;
+    setVisible: (open: boolean) => void;
+}
+export declare const CrossMintModalContext: import("react").Context<CrossMintModalContextState>;
+export declare function useCrossMintModal(): CrossMintModalContextState;

package/lib/esm/useCrossMintModal.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const CrossMintModalContext = createContext({});
+export function useCrossMintModal() {
+    return useContext(CrossMintModalContext);
+}
+//# sourceMappingURL=useCrossMintModal.js.map

package/lib/esm/useCrossMintModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCrossMintModal.js","sourceRoot":"","sources":["../../src/useCrossMintModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOlD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAA6B,EAAgC,CAAC,CAAC;AAEjH,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC7C,CAAC"}

package/lib/esm/useCrossMintPopup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface PopupContextState {
+    connecting: boolean;
+    connect: (candyMachineId: string, collectionTitle?: string, collectionDescription?: string, collectionPhoto?: string) => void;
+    popup: Window | null;
+}
+export declare const PopupContext: import("react").Context<PopupContextState>;
+export declare function useCrossMintPopup(): PopupContextState;

package/lib/esm/useCrossMintPopup.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const PopupContext = createContext({});
+export function useCrossMintPopup() {
+    return useContext(PopupContext);
+}
+//# sourceMappingURL=useCrossMintPopup.js.map

package/lib/esm/useCrossMintPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCrossMintPopup.js","sourceRoot":"","sources":["../../src/useCrossMintPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAclD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAuB,CAAC,CAAC;AAEtF,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AACpC,CAAC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@crossmint/client-sdk-react-ui",
+    "version": "0.0.4",
+    "author": "Paella Labs Inc",
+    "license": "Apache-2.0",
+    "repository": "https://github.com/CrossMint/crossmint-client-sdk",
+    "type": "module",
+    "sideEffects": false,
+    "main": "lib/cjs/index.js",
+    "module": "lib/esm/index.js",
+    "types": "lib/esm/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./lib/esm/index.js",
+            "require": "./lib/cjs/index.js"
+        },
+        "./styles.css": "./styles.css"
+    },
+    "files": [
+        "lib",
+        "src",
+        "LICENSE",
+        "styles.css"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "shx rm -rf lib/*",
+        "build": "yarn clean && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
+        "postbuild": "echo '{\"type\":\"commonjs\"}' | npx json > lib/cjs/package.json && echo '{\"type\":\"module\"} ' | npx json > lib/esm/package.json"
+    },
+    "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.24",
+        "@types/react-dom": "^17.0.11",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    },
+    "gitHead": "3fc180174454711b26970e42964360f81138f927"
+}

package/src/CrossMintButton.tsx

@@ -0,0 +1,64 @@
+import React, { CSSProperties, FC, MouseEvent, MouseEventHandler, useMemo, useCallback } from "react";
+import { useCrossMintPopup } from "./useCrossMintPopup";
+
+export interface ButtonProps {
+    candyMachineId: string;
+    className?: string;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+    tabIndex?: number;
+    theme?: "light" | "dark";
+    collectionTitle?: string;
+    collectionDescription?: string;
+    collectionPhoto?: string;
+}
+
+export const CrossMintButton: FC<ButtonProps> = ({
+    candyMachineId,
+    className,
+    disabled,
+    onClick,
+    style,
+    tabIndex,
+    theme = "dark",
+    collectionTitle,
+    collectionDescription,
+    collectionPhoto,
+    ...props
+}) => {
+    const { connecting, connect } = useCrossMintPopup();
+
+    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+        (event) => {
+            if (onClick) onClick(event);
+
+            if (!event.defaultPrevented)
+                connect(candyMachineId, collectionTitle, collectionDescription, collectionPhoto);
+        },
+        [onClick]
+    );
+
+    const content = useMemo(() => {
+        if (connecting) return <p>Connecting ...</p>;
+        return <p>Buy with credit card</p>;
+    }, [connecting]);
+
+    return (
+        <button
+            className={`client-sdk-button-trigger client-sdk-button-trigger-${theme}`}
+            disabled={disabled}
+            onClick={handleClick}
+            style={{ ...style }}
+            tabIndex={tabIndex}
+            {...props}
+        >
+            <img
+                className="client-sdk-button-icon"
+                src="https://www.crossmint.io/assets/crossmint/logo.png"
+                alt="Crossmint logo"
+            />
+            {content}
+        </button>
+    );
+};

package/src/CrossMintModal.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useCrossMintModal } from "./useCrossMintModal";
+
+export interface CrossMintModalProps {
+    className?: string;
+    container?: string;
+}
+
+export const CrossMintModal: FC<CrossMintModalProps> = ({ className = "", container = "body" }) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const { setVisible } = useCrossMintModal();
+
+    const [fadeIn, setFadeIn] = useState(false);
+    const [portal, setPortal] = useState<Element | null>(null);
+
+    const hideModal = useCallback(() => {
+        setFadeIn(false);
+        setTimeout(() => setVisible(false), 150);
+    }, [setFadeIn, setVisible]);
+
+    useLayoutEffect(() => {
+        // Get original overflow
+        const { overflow } = window.getComputedStyle(document.body);
+        // Hack to enable fade in animation after mount
+        setTimeout(() => setFadeIn(true), 0);
+        // Prevent scrolling on mount
+        document.body.style.overflow = "hidden";
+
+        return () => {
+            // Re-enable scrolling when component unmounts
+            document.body.style.overflow = overflow;
+        };
+    }, [hideModal]);
+
+    useLayoutEffect(() => setPortal(document.querySelector(container)), [setPortal, container]);
+
+    return (
+        portal &&
+        createPortal(
+            <div
+                aria-modal="true"
+                className={`client-sdk-modal ${fadeIn && "client-sdk-modal-fade-in"} ${className}`}
+                ref={ref}
+            >
+                <div className="client-sdk-modal-container">
+                    <span className="client-sdk-modal-loader" />
+                </div>
+                <div className="client-sdk-modal-overlay" />
+            </div>,
+            portal
+        )
+    );
+};

package/src/CrossMintModalProvider.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ReactNode, useState } from "react";
+import { CrossMintModal, CrossMintModalProps } from "./CrossMintModal";
+import { CrossMintModalContext } from "./useCrossMintModal";
+// import { WalletModal, WalletModalProps } from './WalletModal';
+
+export interface CrossMintModalProviderProps extends CrossMintModalProps {
+    children: ReactNode;
+}
+
+export const CrossMintModalProvider: FC<CrossMintModalProviderProps> = ({ children, ...props }) => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <CrossMintModalContext.Provider
+            value={{
+                visible,
+                setVisible,
+            }}
+        >
+            {children}
+            {visible && <CrossMintModal {...props} />}
+        </CrossMintModalContext.Provider>
+    );
+};

package/src/CrossMintPopupProvider.tsx

@@ -0,0 +1,88 @@
+import React, { FC, ReactNode, useState } from "react";
+import { useCrossMintModal } from ".";
+import { PopupContext } from "./useCrossMintPopup";
+
+export interface PopupProviderProps {
+    development: boolean;
+    children: ReactNode;
+}
+
+const PROD_URL = "https://crossmint.io";
+const DEV_URL = "http://localhost:3001";
+
+export const CrossMintPopupProvider: FC<PopupProviderProps> = ({ development, children }) => {
+    const [connecting, setConnecting] = useState(false);
+    const [popup, setPopup] = useState<Window | null>(null);
+
+    const { setVisible } = useCrossMintModal();
+
+    const createPopup = (
+        candyMachineId: string,
+        collectionTitle?: string,
+        collectionDescription?: string,
+        collectionPhoto?: string
+    ) => {
+        const pop = window.open(
+            `${development ? DEV_URL : PROD_URL}/signin?callbackUrl=${encodeURIComponent(
+                `${
+                    development ? DEV_URL : PROD_URL
+                }/checkout/mint?candyMachineId=${candyMachineId}&closeOnSuccess=false${
+                    collectionTitle ? `&collectionTitle=${collectionTitle}` : ""
+                }${collectionDescription ? `&collectionDescription=${collectionDescription}` : ""}${
+                    collectionPhoto ? `&collectionPhoto=${collectionPhoto}` : ""
+                }`
+            )}`,
+            "popUpWindow",
+            createPopupString()
+        );
+        if (pop) {
+            setVisible(true);
+            setPopup(pop);
+            registerListeners(pop);
+        } else {
+            setConnecting(false);
+            console.log("Failed to open popup window");
+        }
+    };
+
+    const connect = (
+        candyMachineId: string,
+        collectionTitle?: string,
+        collectionDescription?: string,
+        collectionPhoto?: string
+    ) => {
+        if (connecting) return;
+
+        setConnecting(true);
+
+        createPopup(candyMachineId, collectionTitle, collectionDescription, collectionPhoto);
+    };
+
+    function registerListeners(pop: Window) {
+        const timer = setInterval(function () {
+            if (pop.closed) {
+                clearInterval(timer);
+                setConnecting(false);
+                setVisible(false);
+            }
+        }, 500);
+    }
+
+    function createPopupString() {
+        return `height=750,width=400,left=${window.innerWidth / 2 - 200},top=${
+            window.innerHeight / 2 - 375
+        },resizable=yes,scrollbars=yes,toolbar=yes,menubar=true,location=no,directories=no, status=yes`;
+    }
+
+    return (
+        <PopupContext.Provider
+            value={{
+                connecting,
+                popup,
+                connect,
+            }}
+        >
+            {children}
+        </PopupContext.Provider>
+    );
+};

package/src/CrossMintProvider.tsx

@@ -0,0 +1,28 @@
+import React, { FC, ReactNode, useState } from "react";
+import { CrossMintModal, CrossMintModalProps } from "./CrossMintModal";
+import { CrossMintPopupProvider } from "./CrossMintPopupProvider";
+import { CrossMintModalContext } from "./useCrossMintModal";
+// import { WalletModal, WalletModalProps } from './WalletModal';
+
+export interface CrossMintProviderProps extends CrossMintModalProps {
+    development?: boolean;
+    children: ReactNode;
+}
+
+export const CrossMintProvider: FC<CrossMintProviderProps> = ({ development = false, children, ...props }) => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <CrossMintModalContext.Provider
+            value={{
+                visible,
+                setVisible,
+            }}
+        >
+            <CrossMintPopupProvider development={development}>
+                {children}
+                {visible && <CrossMintModal {...props} />}
+            </CrossMintPopupProvider>
+        </CrossMintModalContext.Provider>
+    );
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./CrossMintButton";
+export * from "./CrossMintModal";
+export * from "./useCrossMintModal";
+export * from "./useCrossMintPopup";
+export * from "./CrossMintProvider";

package/src/useCrossMintModal.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+
+export interface CrossMintModalContextState {
+    visible: boolean;
+    setVisible: (open: boolean) => void;
+}
+
+export const CrossMintModalContext = createContext<CrossMintModalContextState>({} as CrossMintModalContextState);
+
+export function useCrossMintModal(): CrossMintModalContextState {
+    return useContext(CrossMintModalContext);
+}