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

package/lib/esm/useCrossMintStatus.d.ts

@@ -1,15 +1,16 @@
-/// <reference types="react" />
-export declare enum OnboardingRequestStatusResponse {
-    WAITING_SUBMISSION = "waiting-submission",
-    PENDING = "pending",
-    REJECTED = "rejected",
-    ACCEPTED = "accepted",
-    INVALID = "invalid"
-}
-export interface CrossMintStatusContextState {
-    status: OnboardingRequestStatusResponse;
-    clientId: string;
-    hideMintOnInactiveClient: boolean;
-}
-export declare const CrossMintStatusContext: import("react").Context<CrossMintStatusContextState>;
-export declare function useCrossMintStatus(): CrossMintStatusContextState;
+/// <reference types="react" />
+export declare 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;
+}
+export declare const CrossMintStatusContext: import("react").Context<CrossMintStatusContextState>;
+export declare function useCrossMintStatus(): CrossMintStatusContextState;

package/lib/esm/useCrossMintStatus.js

@@ -1,14 +1,14 @@
-import { createContext, useContext } from "react";
-export var OnboardingRequestStatusResponse;
-(function (OnboardingRequestStatusResponse) {
-    OnboardingRequestStatusResponse["WAITING_SUBMISSION"] = "waiting-submission";
-    OnboardingRequestStatusResponse["PENDING"] = "pending";
-    OnboardingRequestStatusResponse["REJECTED"] = "rejected";
-    OnboardingRequestStatusResponse["ACCEPTED"] = "accepted";
-    OnboardingRequestStatusResponse["INVALID"] = "invalid";
-})(OnboardingRequestStatusResponse || (OnboardingRequestStatusResponse = {}));
-export const CrossMintStatusContext = createContext({});
-export function useCrossMintStatus() {
-    return useContext(CrossMintStatusContext);
-}
+import { createContext, useContext } from "react";
+export var OnboardingRequestStatusResponse;
+(function (OnboardingRequestStatusResponse) {
+    OnboardingRequestStatusResponse["WAITING_SUBMISSION"] = "waiting-submission";
+    OnboardingRequestStatusResponse["PENDING"] = "pending";
+    OnboardingRequestStatusResponse["REJECTED"] = "rejected";
+    OnboardingRequestStatusResponse["ACCEPTED"] = "accepted";
+    OnboardingRequestStatusResponse["INVALID"] = "invalid";
+})(OnboardingRequestStatusResponse || (OnboardingRequestStatusResponse = {}));
+export const CrossMintStatusContext = createContext({});
+export function useCrossMintStatus() {
+    return useContext(CrossMintStatusContext);
+}
 //# sourceMappingURL=useCrossMintStatus.js.map

package/lib/esm/useCrossMintStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCrossMintStatus.js","sourceRoot":"","sources":["../../src/useCrossMintStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,CAAN,IAAY,+BAMX;AAND,WAAY,+BAA+B;IACvC,4EAAyC,CAAA;IACzC,sDAAmB,CAAA;IACnB,wDAAqB,CAAA;IACrB,wDAAqB,CAAA;IACrB,sDAAmB,CAAA;AACvB,CAAC,EANW,+BAA+B,KAA/B,+BAA+B,QAM1C;AAQD,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAA8B,EAAiC,CAAC,CAAC;AAEpH,MAAM,UAAU,kBAAkB;IAC9B,OAAO,UAAU,CAAC,sBAAsB,CAAC,CAAC;AAC9C,CAAC"}
+{"version":3,"file":"useCrossMintStatus.js","sourceRoot":"","sources":["../../src/useCrossMintStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,CAAN,IAAY,+BAMX;AAND,WAAY,+BAA+B;IACvC,4EAAyC,CAAA;IACzC,sDAAmB,CAAA;IACnB,wDAAqB,CAAA;IACrB,wDAAqB,CAAA;IACrB,sDAAmB,CAAA;AACvB,CAAC,EANW,+BAA+B,KAA/B,+BAA+B,QAM1C;AASD,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAA8B,EAAiC,CAAC,CAAC;AAEpH,MAAM,UAAU,kBAAkB;IAC9B,OAAO,UAAU,CAAC,sBAAsB,CAAC,CAAC;AAC9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/client-sdk-react-ui",
-    "version": "0.0.8-alpha.0",
+    "version": "0.0.8-alpha.4",
     "author": "Paella Labs Inc",
     "license": "Apache-2.0",
     "repository": "https://github.com/CrossMint/crossmint-client-sdk",
@@ -39,6 +39,5 @@
         "@types/react-dom": "^17.0.11",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
-    },
-    "gitHead": "de01d9a883021d03c2cf37f9442144abb8fae9b9"
+    }
 }

package/src/CrossMintModal.tsx

@@ -1,54 +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
-        )
-    );
-};
+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/CrossMintPopupProvider.tsx

@@ -27,15 +27,15 @@ export const CrossMintPopupProvider: FC<PopupProviderProps> = ({ development, ch
         listingId?: string
     ) => {
         const pop = window.open(
-            `${development ? DEV_URL : PROD_URL}/signin?callbackUrl=${encodeURIComponent(
-                `${development ? DEV_URL : PROD_URL}/checkout/mint?clientId=${clientId}&closeOnSuccess=false${
-                    collectionTitle && `collectionTitle=${collectionTitle}`
-                }${collectionDescription && `&collectionDescription=${collectionDescription}`}${
-                    collectionPhoto && `&collectionPhoto=${collectionPhoto}`
-                }${mintTo && `&mintTo=${mintTo}`}${emailTo && `&emailTo=${emailTo}`}${
-                    listingId && `&listingId=${listingId}`
-                }`
-            )}`,
+                `${development ? DEV_URL : PROD_URL}/signin?callbackUrl=${encodeURIComponent(
+                        `${development ? DEV_URL : PROD_URL}/checkout/mint?clientId=${encodeURIComponent(clientId)}&closeOnSuccess=false&${
+                                collectionTitle ? `collectionTitle=${encodeURIComponent(collectionTitle)}` : ""
+                                }${collectionDescription ? `&collectionDescription=${encodeURIComponent(collectionDescription)}` : ""}${
+                                collectionPhoto ? `&collectionPhoto=${encodeURIComponent(collectionPhoto)}` : ""
+                                }${mintTo ? `&mintTo=${encodeURIComponent(mintTo)}` : ""}${emailTo ? `&emailTo=${encodeURIComponent(emailTo)}` : ""}${
+                                listingId ? `&listingId=${encodeURIComponent(listingId)}` : ""
+                                }`
+                )}`,
             "popUpWindow",
             createPopupString()
         );

package/src/CrossMintStatusButton.tsx

@@ -27,8 +27,8 @@ export const CrossMintStatusButton: FC<StatusButtonProps> = ({
 
             if (status === OnboardingRequestStatusResponse.WAITING_SUBMISSION) {
                 window.open(
-                    `https://crossmint.io/developers/onboarding${
-                        clientId && `?clientId=${clientId}${auctionId && `&auctionId=${auctionId}`}`
+                    `https://crossmint.io/developers/onboarding${clientId ? `?clientId=${clientId}` : ""}${
+                        auctionId ? `&auctionId=${auctionId}` : ""
                     }`,
                     "_blank"
                 );

package/src/CrossMintStatusProvider.tsx

@@ -19,6 +19,11 @@ export const CrossMintStatusProvider: FC<CrossMintStatusProviderProps> = ({
     );
 
     async function fetchClientIntegration() {
+        if (!clientId || clientId === "" || clientId === "<YOUR_CLIENT_ID>") {
+            console.warn("You must enter your own CrossMint client ID in <CrossMintProvider clientId=XXX>");
+            return;
+        }
+        
         const res = await fetch(`https://www.crossmint.io/api/crossmint/onboardingRequests/${clientId}/status`);
 
         if (res.status === 200) {

package/src/useCrossMintModal.tsx

@@ -1,12 +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);
-}
+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);
+}

package/lib/esm/package.json

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