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

package/src/CrossMintStatusButton.tsx

@@ -0,0 +1,73 @@
+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, auctionId } = 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}${auctionId && `&auctionId=${auctionId}`}`
+                    }`,
+                    "_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,58 @@
+import React, { FC, ReactNode, useEffect, useState } from "react";
+import { OnboardingRequestStatusResponse, CrossMintStatusContext } from "./useCrossMintStatus";
+
+export interface CrossMintStatusProviderProps {
+    clientId: string;
+    auctionId?: string;
+    hideMintOnInactiveClient: boolean;
+    children: ReactNode;
+}
+
+export const CrossMintStatusProvider: FC<CrossMintStatusProviderProps> = ({
+    clientId,
+    auctionId,
+    hideMintOnInactiveClient,
+    children,
+}) => {
+    const [status, setStatus] = useState<OnboardingRequestStatusResponse>(
+        OnboardingRequestStatusResponse.WAITING_SUBMISSION
+    );
+
+    async function fetchClientIntegration() {
+        const res = await fetch(`https://www.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,
+                auctionId,
+                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/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/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,22 @@
+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;
+    auctionId?: string;
+    hideMintOnInactiveClient: boolean;
+}
+
+export const CrossMintStatusContext = createContext<CrossMintStatusContextState>({} as CrossMintStatusContextState);
+
+export function useCrossMintStatus(): CrossMintStatusContextState {
+    return useContext(CrossMintStatusContext);
+}