@crossmint/client-sdk-react-ui 0.0.5-alpha.1 → 0.0.5

package/README.md

@@ -8,6 +8,7 @@ CrossMintProvider is a react context that is used to provide your app with our p
 
 | propName  | default     | required | description                                                                     |
 | --------- | ----------- | -------- | ------------------------------------------------------------------------------- |
+| clientId  | `undefined` | `true`   | Your client integration identifier                                              |
 | className | `undefined` | `false`  | Use this to add a custom classname/s to the modal overlay                       |
 | container | `body`      | `false`  | Use this to specify the container in which the modal overlay should be rendered |
 
@@ -17,7 +18,6 @@ CrossMintButton is a button component that is used to trigger the opening of the
 
 | propName              | default     | required | description                                                                                  |
 | --------------------- | ----------- | -------- | -------------------------------------------------------------------------------------------- |
-| candyMachineId        | `undefined` | `true`   | This is the ID of the Candy Machine in which you would like to mint from                     |
 | collectionTitle       | `undefined` | `false`  | This will be shown to the user during the checkout process. Max length: 120                  |
 | collectionDescription | `undefined` | `false`  | This will be shown to the user during the checkout process. Max length: 24                   |
 | collectionPhoto       | `undefined` | `false`  | This will be shown to the user during the checkout process. Preferred resolution: 200x200 px |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/client-sdk-react-ui",
-    "version": "0.0.5-alpha.1",
+    "version": "0.0.5",
     "author": "Paella Labs Inc",
     "license": "Apache-2.0",
     "repository": "https://github.com/CrossMint/crossmint-client-sdk",
@@ -28,7 +28,7 @@
     "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"
+        "postbuild": "echo {\"type\":\"commonjs\"} | npx json > lib/cjs/package.json && echo {\"type\":\"module\"} | npx json > lib/esm/package.json"
     },
     "peerDependencies": {
         "react": "^17.0.2",
@@ -40,5 +40,5 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
     },
-    "gitHead": "358bee40dee1bfa54abf61050860d152947e32c5"
+    "gitHead": "44f9b3ec082a62a7001d9c9195c8848b62e2b9a1"
 }

package/src/CrossMintButton.tsx

@@ -1,8 +1,8 @@
 import React, { CSSProperties, FC, MouseEvent, MouseEventHandler, useMemo, useCallback } from "react";
+import { OnboardingRequestStatusResponse, useCrossMintStatus } from ".";
 import { useCrossMintPopup } from "./useCrossMintPopup";
 
 export interface ButtonProps {
-    candyMachineId: string;
     className?: string;
     disabled?: boolean;
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -12,10 +12,12 @@ export interface ButtonProps {
     collectionTitle?: string;
     collectionDescription?: string;
     collectionPhoto?: string;
+    mintTo?: string;
+    emailTo?: string;
+    listingId?: string;
 }
 
 export const CrossMintButton: FC<ButtonProps> = ({
-    candyMachineId,
     className,
     disabled,
     onClick,
@@ -25,8 +27,13 @@ export const CrossMintButton: FC<ButtonProps> = ({
     collectionTitle,
     collectionDescription,
     collectionPhoto,
+    mintTo,
+    emailTo,
+    listingId,
     ...props
 }) => {
+    const { hideMintOnInactiveClient, status } = useCrossMintStatus();
+
     const { connecting, connect } = useCrossMintPopup();
 
     const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
@@ -34,7 +41,7 @@ export const CrossMintButton: FC<ButtonProps> = ({
             if (onClick) onClick(event);
 
             if (!event.defaultPrevented)
-                connect(candyMachineId, collectionTitle, collectionDescription, collectionPhoto);
+                connect(collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId);
         },
         [onClick]
     );
@@ -44,6 +51,10 @@ export const CrossMintButton: FC<ButtonProps> = ({
         return <p>Buy with credit card</p>;
     }, [connecting]);
 
+    if (hideMintOnInactiveClient && status !== OnboardingRequestStatusResponse.ACCEPTED) {
+        return null;
+    }
+
     return (
         <button
             className={`client-sdk-button-trigger client-sdk-button-trigger-${theme}`}

package/src/CrossMintModalProvider.tsx

@@ -1,7 +1,6 @@
 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;

package/src/CrossMintPopupProvider.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useState } from "react";
-import { useCrossMintModal } from ".";
+import { useCrossMintModal, useCrossMintStatus } from ".";
 import { PopupContext } from "./useCrossMintPopup";
 
 export interface PopupProviderProps {
@@ -14,22 +14,26 @@ export const CrossMintPopupProvider: FC<PopupProviderProps> = ({ development, ch
     const [connecting, setConnecting] = useState(false);
     const [popup, setPopup] = useState<Window | null>(null);
 
+    const { clientId } = useCrossMintStatus();
+
     const { setVisible } = useCrossMintModal();
 
     const createPopup = (
-        candyMachineId: string,
         collectionTitle?: string,
         collectionDescription?: string,
-        collectionPhoto?: string
+        collectionPhoto?: string,
+        mintTo?: string,
+        emailTo?: string,
+        listingId?: 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}` : ""
+                `${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}`
                 }`
             )}`,
             "popUpWindow",
@@ -46,16 +50,18 @@ export const CrossMintPopupProvider: FC<PopupProviderProps> = ({ development, ch
     };
 
     const connect = (
-        candyMachineId: string,
         collectionTitle?: string,
         collectionDescription?: string,
-        collectionPhoto?: string
+        collectionPhoto?: string,
+        mintTo?: string,
+        emailTo?: string,
+        listingId?: string
     ) => {
         if (connecting) return;
 
         setConnecting(true);
 
-        createPopup(candyMachineId, collectionTitle, collectionDescription, collectionPhoto);
+        createPopup(collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId);
     };
 
     function registerListeners(pop: Window) {

package/src/CrossMintProvider.tsx

@@ -1,28 +1,38 @@
 import React, { FC, ReactNode, useState } from "react";
 import { CrossMintModal, CrossMintModalProps } from "./CrossMintModal";
 import { CrossMintPopupProvider } from "./CrossMintPopupProvider";
+import { CrossMintStatusProvider } from "./CrossMintStatusProvider";
 import { CrossMintModalContext } from "./useCrossMintModal";
-// import { WalletModal, WalletModalProps } from './WalletModal';
 
 export interface CrossMintProviderProps extends CrossMintModalProps {
+    clientId: string;
+    hideMintOnInactiveClient?: boolean;
     development?: boolean;
     children: ReactNode;
 }
 
-export const CrossMintProvider: FC<CrossMintProviderProps> = ({ development = false, children, ...props }) => {
+export const CrossMintProvider: FC<CrossMintProviderProps> = ({
+    clientId,
+    hideMintOnInactiveClient = false,
+    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>
+        <CrossMintStatusProvider clientId={clientId} hideMintOnInactiveClient={hideMintOnInactiveClient}>
+            <CrossMintModalContext.Provider
+                value={{
+                    visible,
+                    setVisible,
+                }}
+            >
+                <CrossMintPopupProvider development={development}>
+                    {children}
+                    {visible && <CrossMintModal {...props} />}
+                </CrossMintPopupProvider>
+            </CrossMintModalContext.Provider>
+        </CrossMintStatusProvider>
     );
 };

package/src/CrossMintStatusButton.tsx

@@ -0,0 +1,71 @@
+import React, { CSSProperties, FC, MouseEvent, MouseEventHandler, useMemo, useCallback } from "react";
+import { OnboardingRequestStatusResponse, useCrossMintStatus } from "./useCrossMintStatus";
+
+export interface StatusButtonProps {
+    className?: string;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+    tabIndex?: number;
+    theme?: "light" | "dark";
+}
+
+export const CrossMintStatusButton: FC<StatusButtonProps> = ({
+    className,
+    disabled,
+    onClick,
+    style,
+    tabIndex,
+    theme = "dark",
+    ...props
+}) => {
+    const { status, clientId } = useCrossMintStatus();
+
+    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+        (event) => {
+            if (onClick) onClick(event);
+
+            if (status === OnboardingRequestStatusResponse.WAITING_SUBMISSION) {
+                window.open(
+                    `https://crossmint.io/developers/onboarding${clientId && `?clientId=${clientId}`}`,
+                    "_blank"
+                );
+                return;
+            }
+        },
+        [status]
+    );
+
+    const content = useMemo(() => {
+        switch (status) {
+            case OnboardingRequestStatusResponse.INVALID:
+                return <p>Invalid clientId</p>;
+            case OnboardingRequestStatusResponse.WAITING_SUBMISSION:
+                return <p>Click here to setup CrossMint</p>;
+            case OnboardingRequestStatusResponse.PENDING:
+                return <p>Your application is under review</p>;
+            case OnboardingRequestStatusResponse.ACCEPTED:
+                return <p>You're good to go!</p>;
+            case OnboardingRequestStatusResponse.REJECTED:
+                return <p>You're application was rejected</p>;
+        }
+    }, [status]);
+
+    return (
+        <button
+            className={`client-sdk-button-trigger client-sdk-button-trigger-${theme}`}
+            disabled={status !== OnboardingRequestStatusResponse.WAITING_SUBMISSION}
+            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/CrossMintStatusProvider.tsx

@@ -0,0 +1,55 @@
+import React, { FC, ReactNode, useEffect, useState } from "react";
+import { OnboardingRequestStatusResponse, CrossMintStatusContext } from "./useCrossMintStatus";
+
+export interface CrossMintStatusProviderProps {
+    clientId: string;
+    hideMintOnInactiveClient: boolean;
+    children: ReactNode;
+}
+
+export const CrossMintStatusProvider: FC<CrossMintStatusProviderProps> = ({
+    clientId,
+    hideMintOnInactiveClient,
+    children,
+}) => {
+    const [status, setStatus] = useState<OnboardingRequestStatusResponse>(
+        OnboardingRequestStatusResponse.WAITING_SUBMISSION
+    );
+
+    async function fetchClientIntegration() {
+        const res = await fetch(`https://crossmint.io/api/crossmint/onboardingRequests/${clientId}/status`);
+
+        if (res.status === 200) {
+            const resData: { clientId: string; status: OnboardingRequestStatusResponse } = await res.json();
+
+            console.log("resData", resData);
+            setStatus(resData.status);
+        } else {
+            if (status !== OnboardingRequestStatusResponse.INVALID) {
+                setStatus(OnboardingRequestStatusResponse.INVALID);
+            }
+        }
+    }
+
+    useEffect(() => {
+        fetchClientIntegration();
+
+        const interval = setInterval(() => {
+            fetchClientIntegration();
+        }, 60 * 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <CrossMintStatusContext.Provider
+            value={{
+                status,
+                clientId,
+                hideMintOnInactiveClient,
+            }}
+        >
+            {children}
+        </CrossMintStatusContext.Provider>
+    );
+};

package/src/index.ts

@@ -3,3 +3,5 @@ export * from "./CrossMintModal";
 export * from "./useCrossMintModal";
 export * from "./useCrossMintPopup";
 export * from "./CrossMintProvider";
+export * from "./useCrossMintStatus";
+export * from "./CrossMintStatusButton";

package/src/useCrossMintPopup.tsx

@@ -3,10 +3,12 @@ import { createContext, useContext } from "react";
 export interface PopupContextState {
     connecting: boolean;
     connect: (
-        candyMachineId: string,
         collectionTitle?: string,
         collectionDescription?: string,
-        collectionPhoto?: string
+        collectionPhoto?: string,
+        mintTo?: string,
+        emailTo?: string,
+        listingId?: string
     ) => void;
 
     popup: Window | null;

package/src/useCrossMintStatus.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+
+export enum OnboardingRequestStatusResponse {
+    WAITING_SUBMISSION = "waiting-submission",
+    PENDING = "pending",
+    REJECTED = "rejected",
+    ACCEPTED = "accepted",
+    INVALID = "invalid",
+}
+
+export interface CrossMintStatusContextState {
+    status: OnboardingRequestStatusResponse;
+    clientId: string;
+    hideMintOnInactiveClient: boolean;
+}
+
+export const CrossMintStatusContext = createContext<CrossMintStatusContextState>({} as CrossMintStatusContextState);
+
+export function useCrossMintStatus(): CrossMintStatusContextState {
+    return useContext(CrossMintStatusContext);
+}