@crossmint/client-sdk-react-ui 0.1.3 → 0.1.4-alpha.0

package/lib/esm/hooks/useCrossmintStatus.d.ts

@@ -1,19 +0,0 @@
-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;
-}
-interface IProps {
-    clientId: string;
-    development: boolean;
-}
-export default function useCrossMintStatus({ clientId, development }: IProps): OnboardingRequestStatusResponse;
-export {};

package/lib/esm/hooks/useCrossmintStatus.js

@@ -1,60 +0,0 @@
-import { useState, useEffect } from "react";
-import { validate } from "uuid";
-import { LIB_VERSION } from "../version";
-import { clientNames, baseUrls, customHeaders } from "../types";
-export var OnboardingRequestStatusResponse;
-(function (OnboardingRequestStatusResponse) {
-    OnboardingRequestStatusResponse["WAITING_SUBMISSION"] = "waiting-submission";
-    OnboardingRequestStatusResponse["PENDING"] = "pending";
-    OnboardingRequestStatusResponse["REJECTED"] = "rejected";
-    OnboardingRequestStatusResponse["ACCEPTED"] = "accepted";
-    OnboardingRequestStatusResponse["INVALID"] = "invalid";
-})(OnboardingRequestStatusResponse || (OnboardingRequestStatusResponse = {}));
-const validateClientId = (clientId) => {
-    try {
-        const isValid = validate(clientId);
-        return !!isValid;
-    }
-    catch (e) {
-        console.error(e);
-        return false;
-    }
-};
-export default function useCrossMintStatus({ clientId, development }) {
-    const [status, setStatus] = useState(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 = 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;
-}
-//# sourceMappingURL=useCrossmintStatus.js.map

package/lib/esm/hooks/useCrossmintStatus.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCrossmintStatus.js","sourceRoot":"","sources":["../../../src/hooks/useCrossmintStatus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEhE,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;AAcD,MAAM,gBAAgB,GAAG,CAAC,QAAgB,EAAW,EAAE;IACnD,IAAI;QACA,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnC,OAAO,CAAC,CAAC,OAAO,CAAC;KACpB;IAAC,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjB,OAAO,KAAK,CAAC;KAChB;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAU;IACxE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAChC,+BAA+B,CAAC,kBAAkB,CACrD,CAAC;IAEF,KAAK,UAAU,sBAAsB;QACjC,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,EAAE,IAAI,QAAQ,KAAK,kBAAkB,EAAE;YACjE,OAAO,CAAC,KAAK,CAAC,kFAAkF,CAAC,CAAC;YAClG,OAAO;SACV;QAED,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE;YAC7B,OAAO,CAAC,KAAK,CACT,kJAAkJ,CACrJ,CAAC;YACF,OAAO;SACV;QAED,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;QAE3D,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,OAAO,qCAAqC,QAAQ,SAAS,EAAE;YACtF,OAAO,EAAE;gBACL,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,WAAW;gBAC1C,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,OAAO;aAClD;SACJ,CAAC,CAAC;QAEH,IAAI,GAAG,CAAC,MAAM,KAAK,GAAG,EAAE;YACpB,MAAM,OAAO,GAAkE,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC;YAEhG,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;SAC7B;aAAM;YACH,IAAI,MAAM,KAAK,+BAA+B,CAAC,OAAO,EAAE;gBACpD,SAAS,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;aACtD;SACJ;IACL,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACX,sBAAsB,EAAE,CAAC;QAEzB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAC9B,sBAAsB,EAAE,CAAC;QAC7B,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,CAAC;QAEd,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAClB,CAAC"}

package/lib/esm/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./CrossmintPayButton";
-export * from "./CrossmintStatusButton";

package/lib/esm/index.js

@@ -1,3 +0,0 @@
-export * from "./CrossmintPayButton";
-export * from "./CrossmintStatusButton";
-//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC"}

package/lib/esm/package.json

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

package/lib/esm/styles/index.d.ts

@@ -1,9 +0,0 @@
-interface CustomStylingProps {
-    buttonBgColor?: string;
-    paragraphColor?: string;
-}
-export declare const formatProps: (theme: string) => CustomStylingProps;
-export declare const useStyles: (data?: (CustomStylingProps & {
-    theme?: Jss.Theme | undefined;
-}) | undefined) => import("jss").Classes<"@global" | "crossmintButton" | "crossmintImg" | "crossmintParagraph">;
-export {};

package/lib/esm/styles/index.js

@@ -1,41 +0,0 @@
-import { createUseStyles } from "react-jss";
-const DARK_BG = "#1e1e1e";
-const themeIsLight = (theme) => theme === "light";
-export const formatProps = (theme) => ({
-    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 }) => buttonBgColor,
-        "&:hover:enabled": {
-            opacity: "0.6",
-            cursor: "pointer",
-        },
-    },
-    crossmintImg: {
-        width: "21px",
-        height: "21px",
-        "margin-right": "0.875rem",
-    },
-    crossmintParagraph: {
-        color: ({ paragraphColor }) => paragraphColor,
-        margin: "0",
-    },
-});
-//# sourceMappingURL=index.js.map

package/lib/esm/styles/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,OAAO,GAAG,SAAS,CAAC;AAO1B,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,KAAK,OAAO,CAAC;AAC1D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAa,EAAsB,EAAE,CAAC,CAAC;IAC/D,aAAa,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;IACtD,cAAc,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;CAC1D,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACrC,SAAS,EAAE;QACP,SAAS,EACL,6GAA6G;KACpH;IACD,eAAe,EAAE;QACb,OAAO,EAAE,MAAM;QACf,gBAAgB,EAAE,KAAK;QACvB,aAAa,EAAE,QAAQ;QACvB,OAAO,EAAE,mBAAmB;QAC5B,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,2BAA2B;QACvC,eAAe,EAAE,QAAQ;QACzB,aAAa,EAAE,sIAAsI;QACrJ,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,iCAAiC;QAC/C,iBAAiB,EAAE,QAAQ;QAC3B,UAAU,EAAE,CAAC,EAAE,aAAa,EAAsB,EAAE,EAAE,CAAC,aAAa;QAEpE,iBAAiB,EAAE;YACf,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,SAAS;SACpB;KACJ;IACD,YAAY,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,cAAc,EAAE,UAAU;KAC7B;IACD,kBAAkB,EAAE;QAChB,KAAK,EAAE,CAAC,EAAE,cAAc,EAAsB,EAAE,EAAE,CAAC,cAAc;QACjE,MAAM,EAAE,GAAG;KACd;CACJ,CAAC,CAAC"}

package/lib/esm/types.d.ts

@@ -1,52 +0,0 @@
-import { CSSProperties, MouseEvent } from "react";
-export declare enum clientNames {
-    reactUi = "client-sdk-react-ui"
-}
-export declare enum baseUrls {
-    prod = "https://www.crossmint.io",
-    dev = "http://localhost:3001"
-}
-export declare enum customHeaders {
-    clientVersion = "X-Client-Version",
-    clientName = "X-Client-Name"
-}
-declare type theme = "light" | "dark";
-export declare enum mintingContractTypes {
-    CANDY_MACHINE = "candy-machine",
-    SOLANA_AUCTION = "solana-auction",
-    ERC_721 = "erc-721"
-}
-export interface PayButtonConfig {
-    type: string;
-    [propName: string]: any;
-}
-export interface StatusButtonConfig {
-    [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;
-}
-export interface CrossmintStatusButtonProps extends BaseButtonProps {
-    platformId?: string;
-    mintConfig?: StatusButtonConfig;
-}
-export {};

package/lib/esm/types.js

@@ -1,21 +0,0 @@
-export var clientNames;
-(function (clientNames) {
-    clientNames["reactUi"] = "client-sdk-react-ui";
-})(clientNames || (clientNames = {}));
-export var baseUrls;
-(function (baseUrls) {
-    baseUrls["prod"] = "https://www.crossmint.io";
-    baseUrls["dev"] = "http://localhost:3001";
-})(baseUrls || (baseUrls = {}));
-export var customHeaders;
-(function (customHeaders) {
-    customHeaders["clientVersion"] = "X-Client-Version";
-    customHeaders["clientName"] = "X-Client-Name";
-})(customHeaders || (customHeaders = {}));
-export var mintingContractTypes;
-(function (mintingContractTypes) {
-    mintingContractTypes["CANDY_MACHINE"] = "candy-machine";
-    mintingContractTypes["SOLANA_AUCTION"] = "solana-auction";
-    mintingContractTypes["ERC_721"] = "erc-721";
-})(mintingContractTypes || (mintingContractTypes = {}));
-//# sourceMappingURL=types.js.map

package/lib/esm/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,WAEX;AAFD,WAAY,WAAW;IACnB,8CAA+B,CAAA;AACnC,CAAC,EAFW,WAAW,KAAX,WAAW,QAEtB;AAED,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;IAChB,6CAAiC,CAAA;IACjC,yCAA6B,CAAA;AACjC,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAED,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,mDAAkC,CAAA;IAClC,6CAA4B,CAAA;AAChC,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;AAID,MAAM,CAAN,IAAY,oBAIX;AAJD,WAAY,oBAAoB;IAC5B,uDAA+B,CAAA;IAC/B,yDAAiC,CAAA;IACjC,2CAAmB,CAAA;AACvB,CAAC,EAJW,oBAAoB,KAApB,oBAAoB,QAI/B"}

package/lib/esm/utils.d.ts

@@ -1 +0,0 @@
-export declare const isClientSide: boolean;

package/lib/esm/utils.js

@@ -1,2 +0,0 @@
-export const isClientSide = typeof window !== "undefined";
-//# sourceMappingURL=utils.js.map

package/lib/esm/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC"}

package/lib/esm/version.d.ts

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

package/lib/esm/version.js

@@ -1,2 +0,0 @@
-export const LIB_VERSION = "0.1.2";
-//# sourceMappingURL=version.js.map

package/lib/esm/version.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC"}

package/src/hooks/useCrossmintModal.ts

@@ -1,142 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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;
-}