@crossmint/client-sdk-react-ui 0.0.8-alpha.4 → 0.1.1

package/src/CrossmintPayButton.tsx

@@ -0,0 +1,108 @@
+import React, { FC, MouseEventHandler, useMemo, useCallback, useState } from "react";
+import useCrossmintStatus, { OnboardingRequestStatusResponse } from "./hooks/useCrossmintStatus";
+import useCrossmintModal from "./hooks/useCrossmintModal";
+import { useStyles, formatProps } from "./styles";
+import { isClientSide } from "./utils";
+import { CrossmintPayButtonProps, mintingContractTypes } from "./types";
+
+const defaultMintConfig: any = {
+    type: mintingContractTypes.CANDY_MACHINE,
+};
+
+export const CrossmintPayButton: FC<CrossmintPayButtonProps> = ({
+    className,
+    disabled,
+    onClick,
+    style,
+    tabIndex,
+    theme = "dark",
+    collectionTitle,
+    collectionDescription,
+    collectionPhoto,
+    mintTo,
+    emailTo,
+    listingId,
+    clientId,
+    development = false,
+    auctionId,
+    hideMintOnInactiveClient = false,
+    showOverlay = true,
+    mintConfig = defaultMintConfig,
+    ...props
+}) => {
+    const status = useCrossmintStatus({ clientId, development });
+    const { connecting, connect } = useCrossmintModal({
+        clientId,
+        development,
+        showOverlay,
+    });
+
+    if (collectionTitle === "<TITLE_FOR_YOUR_COLLECTION>") {
+        console.warn("No collection title specified. Please add a collection title to your <CrossmintPayButton />");
+        collectionTitle = "";
+    }
+
+    if (collectionDescription === "<DESCRIPTION_OF_YOUR_COLLECTION>") {
+        console.warn(
+            "No collection description specified. Please add a collection description to your <CrossmintPayButton />"
+        );
+        collectionDescription = "";
+    }
+
+    if (collectionPhoto === "<OPT_URL_TO_PHOTO_COVER>") {
+        console.warn("No collection photo specified. Please add a collection photo to your <CrossmintPayButton />");
+        collectionPhoto = "";
+    }
+
+    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+        (event) => {
+            if (onClick) onClick(event);
+
+            if (!event.defaultPrevented) {
+                connect(
+                    mintConfig,
+                    collectionTitle,
+                    collectionDescription,
+                    collectionPhoto,
+                    mintTo,
+                    emailTo,
+                    listingId
+                );
+            }
+        },
+        [onClick]
+    );
+
+    const classes = useStyles(formatProps(theme));
+
+    const content = useMemo(() => {
+        if (connecting) return <p className={classes.crossmintParagraph}>Connecting ...</p>;
+        return <p className={classes.crossmintParagraph}>Buy with credit card</p>;
+    }, [connecting]);
+
+    if (hideMintOnInactiveClient && status !== OnboardingRequestStatusResponse.ACCEPTED) {
+        return null;
+    }
+
+    return (
+        <>
+            {isClientSide && (
+                <button
+                    className={`${classes.crossmintButton} ${className}`}
+                    disabled={disabled}
+                    onClick={handleClick}
+                    style={{ ...style }}
+                    tabIndex={tabIndex}
+                    {...props}
+                >
+                    <img
+                        className={classes.crossmintImg}
+                        src="https://www.crossmint.io/assets/crossmint/logo.png"
+                        alt="Crossmint logo"
+                    />
+                    {content}
+                </button>
+            )}
+        </>
+    );
+};

package/src/CrossmintStatusButton.tsx

@@ -0,0 +1,77 @@
+import React, { FC, MouseEventHandler, useMemo, useCallback } from "react";
+import useCrossmintStatus, { OnboardingRequestStatusResponse } from "./hooks/useCrossmintStatus";
+import { useStyles, formatProps } from "./styles";
+import { baseUrls, BaseButtonProps } from "./types";
+import { isClientSide } from "./utils";
+
+export const CrossmintStatusButton: FC<BaseButtonProps> = ({
+    className,
+    disabled,
+    onClick,
+    style,
+    tabIndex,
+    theme = "dark",
+    clientId,
+    auctionId,
+    development = false,
+    ...props
+}) => {
+    const status = useCrossmintStatus({ clientId, development });
+
+    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+        (event) => {
+            if (onClick) onClick(event);
+
+            if (status === OnboardingRequestStatusResponse.WAITING_SUBMISSION) {
+                const baseUrl = development ? baseUrls.dev : baseUrls.prod;
+                window.open(
+                    `${baseUrl}/developers/onboarding${clientId ? `?clientId=${clientId}` : ""}${
+                        auctionId ? `&auctionId=${auctionId}` : ""
+                    }`,
+                    "_blank"
+                );
+                return;
+            }
+        },
+        [status]
+    );
+
+    const classes = useStyles(formatProps(theme));
+
+    const content = useMemo(() => {
+        switch (status) {
+            case OnboardingRequestStatusResponse.INVALID:
+                return <p className={classes.crossmintParagraph}>Invalid clientId</p>;
+            case OnboardingRequestStatusResponse.WAITING_SUBMISSION:
+                return <p className={classes.crossmintParagraph}>Click here to setup CrossMint</p>;
+            case OnboardingRequestStatusResponse.PENDING:
+                return <p className={classes.crossmintParagraph}>Your application is under review</p>;
+            case OnboardingRequestStatusResponse.ACCEPTED:
+                return <p className={classes.crossmintParagraph}>You're good to go!</p>;
+            case OnboardingRequestStatusResponse.REJECTED:
+                return <p className={classes.crossmintParagraph}>Your application was rejected</p>;
+        }
+    }, [status]);
+
+    return (
+        <>
+            {isClientSide && (
+                <button
+                    className={`${classes.crossmintButton} ${className}`}
+                    disabled={status !== OnboardingRequestStatusResponse.WAITING_SUBMISSION}
+                    onClick={handleClick}
+                    style={{ ...style }}
+                    tabIndex={tabIndex}
+                    {...props}
+                >
+                    <img
+                        className={classes.crossmintImg}
+                        src={`${baseUrls.prod}/assets/crossmint/logo.png`}
+                        alt="Crossmint logo"
+                    />
+                    {content}
+                </button>
+            )}
+        </>
+    );
+};

package/src/hooks/useCrossmintModal.ts

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { LIB_VERSION } from "../version";
+import { baseUrls, clientNames, PayButtonConfig } from "../types";
+
+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`;
+}
+
+interface IProps {
+    development: boolean;
+    clientId: string;
+    showOverlay: boolean;
+}
+
+interface IReturn {
+    connecting: boolean;
+    connect: (
+        mintConfig: PayButtonConfig,
+        collectionTitle?: string,
+        collectionDescription?: string,
+        collectionPhoto?: string,
+        mintTo?: string,
+        emailTo?: string,
+        listingId?: string
+    ) => void;
+}
+
+type MintQueryParams = {
+    clientId: string;
+    closeOnSuccess: string;
+    collectionTitle?: string;
+    collectionDescription?: string;
+    collectionPhoto?: string;
+    mintTo?: string;
+    emailTo?: string;
+    listingId?: string;
+    clientName: string;
+    clientVersion: string;
+    mintConfig: string;
+};
+
+const overlayId = "__crossmint-overlay__";
+
+const addLoadingOverlay = (): void => {
+    const overlayEl = document.createElement("div");
+    overlayEl.setAttribute("id", overlayId);
+    const overlayStyles = {
+        width: "100vw",
+        height: "100vh",
+        "background-color": "rgba(0, 0, 0, 0.5)",
+        position: "fixed",
+        "z-index": "99999999",
+        top: "0",
+        left: "0",
+    };
+    Object.assign(overlayEl.style, overlayStyles);
+    document.body.appendChild(overlayEl);
+};
+
+const removeLoadingOverlay = (): void => {
+    const overlayEl = document.getElementById(overlayId);
+    if (overlayEl) overlayEl.remove();
+};
+
+export default function useCrossMintModal({ development, clientId, showOverlay }: IProps): IReturn {
+    const [connecting, setConnecting] = useState(false);
+
+    const createPopup = (
+        mintConfig: PayButtonConfig,
+        collectionTitle?: string,
+        collectionDescription?: string,
+        collectionPhoto?: string,
+        mintTo?: string,
+        emailTo?: string,
+        listingId?: string
+    ) => {
+        const urlOrigin = development ? baseUrls.dev : baseUrls.prod;
+        const getMintQueryParams = (): string => {
+            const mintQueryParams: MintQueryParams = {
+                clientId: clientId,
+                closeOnSuccess: "false",
+                clientName: clientNames.reactUi,
+                clientVersion: LIB_VERSION,
+                mintConfig: JSON.stringify(mintConfig),
+            };
+
+            if (collectionTitle) mintQueryParams.collectionTitle = collectionTitle;
+            if (collectionDescription) mintQueryParams.collectionDescription = collectionDescription;
+            if (collectionPhoto) mintQueryParams.collectionPhoto = collectionPhoto;
+            if (mintTo) mintQueryParams.mintTo = mintTo;
+            if (emailTo) mintQueryParams.emailTo = emailTo;
+            if (listingId) mintQueryParams.listingId = listingId;
+
+            return new URLSearchParams(mintQueryParams).toString();
+        };
+        const callbackUrl = encodeURIComponent(`${urlOrigin}/checkout/mint?${getMintQueryParams()}`);
+        const url = `${urlOrigin}/signin?callbackUrl=${callbackUrl}`;
+
+        const pop = window.open(url, "popUpWindow", createPopupString());
+        if (pop) {
+            registerListeners(pop);
+            if (showOverlay) {
+                addLoadingOverlay();
+            }
+        } else {
+            setConnecting(false);
+            console.error("Failed to open popup window");
+        }
+    };
+
+    const connect = (
+        mintConfig: PayButtonConfig,
+        collectionTitle?: string,
+        collectionDescription?: string,
+        collectionPhoto?: string,
+        mintTo?: string,
+        emailTo?: string,
+        listingId?: string
+    ) => {
+        if (connecting) return;
+
+        setConnecting(true);
+
+        createPopup(mintConfig, collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId);
+    };
+
+    function registerListeners(pop: Window) {
+        const timer = setInterval(function () {
+            if (pop.closed) {
+                clearInterval(timer);
+                setConnecting(false);
+                if (showOverlay) {
+                    removeLoadingOverlay();
+                }
+            }
+        }, 500);
+    }
+
+    return { connecting, connect };
+}

package/src/hooks/useCrossmintStatus.ts

@@ -0,0 +1,85 @@
+import { useState, useEffect } from "react";
+import { validate } from "uuid";
+import { LIB_VERSION } from "../version";
+import { clientNames, baseUrls, customHeaders } from "../types";
+
+export enum OnboardingRequestStatusResponse {
+    WAITING_SUBMISSION = "waiting-submission",
+    PENDING = "pending",
+    REJECTED = "rejected",
+    ACCEPTED = "accepted",
+    INVALID = "invalid",
+}
+
+export interface CrossMintStatusContextState {
+    status: OnboardingRequestStatusResponse;
+    clientId: string;
+    auctionId?: string;
+    hideMintOnInactiveClient: boolean;
+}
+
+interface IProps {
+    clientId: string;
+    development: boolean;
+}
+
+const validateClientId = (clientId: string): boolean => {
+    try {
+        const isValid = validate(clientId);
+        return !!isValid;
+    } catch (e) {
+        console.error(e);
+        return false;
+    }
+};
+
+export default function useCrossMintStatus({ clientId, development }: IProps) {
+    const [status, setStatus] = useState<OnboardingRequestStatusResponse>(
+        OnboardingRequestStatusResponse.WAITING_SUBMISSION
+    );
+
+    async function fetchClientIntegration() {
+        if (!clientId || clientId === "" || clientId === "<YOUR_CLIENT_ID>") {
+            console.error("You must enter your own Crossmint client ID in <CrossmintPayButton clientId=XXX>");
+            return;
+        }
+
+        if (!validateClientId(clientId)) {
+            console.error(
+                "The clientId passed to is invalid. Make sure to pass the clientId obtained from the crossmint team, with format XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX"
+            );
+            return;
+        }
+
+        const baseUrl = development ? baseUrls.dev : baseUrls.prod;
+
+        const res = await fetch(`${baseUrl}/api/crossmint/onboardingRequests/${clientId}/status`, {
+            headers: {
+                [customHeaders.clientVersion]: LIB_VERSION,
+                [customHeaders.clientName]: clientNames.reactUi,
+            },
+        });
+
+        if (res.status === 200) {
+            const resData: { clientId: string; status: OnboardingRequestStatusResponse } = await res.json();
+
+            setStatus(resData.status);
+        } else {
+            if (status !== OnboardingRequestStatusResponse.INVALID) {
+                setStatus(OnboardingRequestStatusResponse.INVALID);
+            }
+        }
+    }
+
+    useEffect(() => {
+        fetchClientIntegration();
+
+        const interval = setInterval(() => {
+            fetchClientIntegration();
+        }, 60 * 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return status;
+}

package/src/index.ts

@@ -1,7 +1,2 @@
-export * from "./CrossMintButton";
-export * from "./CrossMintModal";
-export * from "./useCrossMintModal";
-export * from "./useCrossMintPopup";
-export * from "./CrossMintProvider";
-export * from "./useCrossMintStatus";
-export * from "./CrossMintStatusButton";
+export * from "./CrossmintPayButton";
+export * from "./CrossmintStatusButton";

package/src/styles/index.ts

@@ -0,0 +1,50 @@
+import { createUseStyles } from "react-jss";
+
+const DARK_BG = "#1e1e1e";
+
+interface CustomStylingProps {
+    buttonBgColor?: string;
+    paragraphColor?: string;
+}
+
+const themeIsLight = (theme: string) => theme === "light";
+export const formatProps = (theme: string): CustomStylingProps => ({
+    buttonBgColor: themeIsLight(theme) ? "white" : DARK_BG,
+    paragraphColor: themeIsLight(theme) ? "black" : "white",
+});
+
+export const useStyles = createUseStyles({
+    "@global": {
+        "@import":
+            "url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap')",
+    },
+    crossmintButton: {
+        display: "flex",
+        "flex-direction": "row",
+        "align-items": "center",
+        padding: "0.875rem 0.875rem",
+        "font-weight": "900",
+        transition: "opacity ease-in-out 0.25s",
+        "border-radius": "0.5rem",
+        "font-family": `"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`,
+        outline: "none",
+        border: "none",
+        "box-shadow": "0px 8px 15px rgba(0, 0, 0, 0.1)",
+        "justify-content": "center",
+        background: ({ buttonBgColor }: CustomStylingProps) => buttonBgColor,
+
+        "&:hover:enabled": {
+            opacity: "0.6",
+            cursor: "pointer",
+        },
+    },
+    crossmintImg: {
+        width: "21px",
+        height: "21px",
+        "margin-right": "0.875rem",
+    },
+    crossmintParagraph: {
+        color: ({ paragraphColor }: CustomStylingProps) => paragraphColor,
+        margin: "0",
+    },
+});

package/src/types.ts

@@ -0,0 +1,56 @@
+import { CSSProperties, MouseEvent } from "react";
+
+export enum clientNames {
+    reactUi = "client-sdk-react-ui",
+}
+
+export enum baseUrls {
+    prod = "https://www.crossmint.io",
+    dev = "http://localhost:3001",
+}
+
+export enum customHeaders {
+    clientVersion = "X-Client-Version",
+    clientName = "X-Client-Name",
+}
+
+enum theme {
+    light = "light",
+    dark = "dark",
+}
+
+export enum mintingContractTypes {
+    CANDY_MACHINE = "candy-machine",
+    SOLANA_AUCTION = "solana-auction",
+    ERC_721 = "erc-721",
+}
+
+export interface PayButtonConfig {
+    type: string;
+
+    [propName: string]: any;
+}
+
+export interface BaseButtonProps {
+    className?: string;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+    tabIndex?: number;
+    clientId: string;
+    auctionId?: string;
+    theme?: theme;
+    development?: boolean;
+}
+
+export interface CrossmintPayButtonProps extends BaseButtonProps {
+    collectionTitle?: string;
+    collectionDescription?: string;
+    collectionPhoto?: string;
+    mintTo?: string;
+    emailTo?: string;
+    listingId?: string;
+    showOverlay?: boolean;
+    hideMintOnInactiveClient?: boolean;
+    mintConfig?: PayButtonConfig;
+}

package/src/utils.ts

@@ -0,0 +1 @@
+export const isClientSide = typeof window !== "undefined";

package/src/version.ts

@@ -0,0 +1 @@
+export const LIB_VERSION = "0.1.1";

package/lib/cjs/CrossMintButton.d.ts

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

package/lib/cjs/CrossMintButton.js

@@ -1,60 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CrossMintButton = void 0;
-const react_1 = __importStar(require("react"));
-const _1 = require(".");
-const useCrossMintPopup_1 = require("./useCrossMintPopup");
-const CrossMintButton = (_a) => {
-    var { className, disabled, onClick, style, tabIndex, theme = "dark", collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId } = _a, props = __rest(_a, ["className", "disabled", "onClick", "style", "tabIndex", "theme", "collectionTitle", "collectionDescription", "collectionPhoto", "mintTo", "emailTo", "listingId"]);
-    const { hideMintOnInactiveClient, status } = (0, _1.useCrossMintStatus)();
-    const { connecting, connect } = (0, useCrossMintPopup_1.useCrossMintPopup)();
-    const handleClick = (0, react_1.useCallback)((event) => {
-        if (onClick)
-            onClick(event);
-        if (!event.defaultPrevented)
-            connect(collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId);
-    }, [onClick]);
-    const content = (0, react_1.useMemo)(() => {
-        if (connecting)
-            return react_1.default.createElement("p", null, "Connecting ...");
-        return react_1.default.createElement("p", null, "Buy with credit card");
-    }, [connecting]);
-    if (hideMintOnInactiveClient && status !== _1.OnboardingRequestStatusResponse.ACCEPTED) {
-        return null;
-    }
-    return (react_1.default.createElement("button", Object.assign({ className: `client-sdk-button-trigger client-sdk-button-trigger-${theme}`, disabled: disabled, onClick: handleClick, style: Object.assign({}, style), tabIndex: tabIndex }, props),
-        react_1.default.createElement("img", { className: "client-sdk-button-icon", src: "https://www.crossmint.io/assets/crossmint/logo.png", alt: "Crossmint logo" }),
-        content));
-};
-exports.CrossMintButton = CrossMintButton;
-//# sourceMappingURL=CrossMintButton.js.map

package/lib/cjs/CrossMintButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CrossMintButton.js","sourceRoot":"","sources":["../../src/CrossMintButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsG;AACtG,wBAAwE;AACxE,2DAAwD;AAiBjD,MAAM,eAAe,GAAoB,CAAC,EAchD,EAAE,EAAE;QAd4C,EAC7C,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,MAAM,EACN,OAAO,EACP,SAAS,OAEZ,EADM,KAAK,cAbqC,mKAchD,CADW;IAER,MAAM,EAAE,wBAAwB,EAAE,MAAM,EAAE,GAAG,IAAA,qBAAkB,GAAE,CAAC;IAElE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAA,qCAAiB,GAAE,CAAC;IAEpD,MAAM,WAAW,GAAyC,IAAA,mBAAW,EACjE,CAAC,KAAK,EAAE,EAAE;QACN,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAE5B,IAAI,CAAC,KAAK,CAAC,gBAAgB;YACvB,OAAO,CAAC,eAAe,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;IACrG,CAAC,EACD,CAAC,OAAO,CAAC,CACZ,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzB,IAAI,UAAU;YAAE,OAAO,0DAAqB,CAAC;QAC7C,OAAO,gEAA2B,CAAC;IACvC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAI,wBAAwB,IAAI,MAAM,KAAK,kCAA+B,CAAC,QAAQ,EAAE;QACjF,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH,wDACI,SAAS,EAAE,uDAAuD,KAAK,EAAE,EACzE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,oBAAO,KAAK,GACjB,QAAQ,EAAE,QAAQ,IACd,KAAK;QAET,uCACI,SAAS,EAAC,wBAAwB,EAClC,GAAG,EAAC,oDAAoD,EACxD,GAAG,EAAC,gBAAgB,GACtB;QACD,OAAO,CACH,CACZ,CAAC;AACN,CAAC,CAAC;AAvDW,QAAA,eAAe,mBAuD1B"}

package/lib/cjs/CrossMintModal.d.ts

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

package/lib/cjs/CrossMintModal.js

@@ -1,55 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CrossMintModal = void 0;
-const react_1 = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
-const useCrossMintModal_1 = require("./useCrossMintModal");
-const CrossMintModal = ({ className = "", container = "body" }) => {
-    const ref = (0, react_1.useRef)(null);
-    const { setVisible } = (0, useCrossMintModal_1.useCrossMintModal)();
-    const [fadeIn, setFadeIn] = (0, react_1.useState)(false);
-    const [portal, setPortal] = (0, react_1.useState)(null);
-    const hideModal = (0, react_1.useCallback)(() => {
-        setFadeIn(false);
-        setTimeout(() => setVisible(false), 150);
-    }, [setFadeIn, setVisible]);
-    (0, react_1.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]);
-    (0, react_1.useLayoutEffect)(() => setPortal(document.querySelector(container)), [setPortal, container]);
-    return (portal &&
-        (0, react_dom_1.createPortal)(react_1.default.createElement("div", { "aria-modal": "true", className: `client-sdk-modal ${fadeIn ? "client-sdk-modal-fade-in" : ""} ${className}`, ref: ref },
-            react_1.default.createElement("div", { className: "client-sdk-modal-container" },
-                react_1.default.createElement("span", { className: "client-sdk-modal-loader" })),
-            react_1.default.createElement("div", { className: "client-sdk-modal-overlay" })), portal));
-};
-exports.CrossMintModal = CrossMintModal;
-//# sourceMappingURL=CrossMintModal.js.map