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

package/lib/index.cjs

@@ -0,0 +1 @@
+var it=Object.create;var C=Object.defineProperty;var at=Object.getOwnPropertyDescriptor;var mt=Object.getOwnPropertyNames,x=Object.getOwnPropertySymbols,ut=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var W=(t,o,s)=>o in t?C(t,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[o]=s,l=(t,o)=>{for(var s in o||(o={}))V.call(o,s)&&W(t,s,o[s]);if(x)for(var s of x(o))q.call(o,s)&&W(t,s,o[s]);return t};var P=(t,o)=>{var s={};for(var e in t)V.call(t,e)&&o.indexOf(e)<0&&(s[e]=t[e]);if(t!=null&&x)for(var e of x(t))o.indexOf(e)<0&&q.call(t,e)&&(s[e]=t[e]);return s};var lt=(t,o)=>{for(var s in o)C(t,s,{get:o[s],enumerable:!0})},D=(t,o,s,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of mt(o))!V.call(t,i)&&i!==s&&C(t,i,{get:()=>o[i],enumerable:!(e=at(o,i))||e.enumerable});return t};var j=(t,o,s)=>(s=t!=null?it(ut(t)):{},D(o||!t||!t.__esModule?C(s,"default",{value:t,enumerable:!0}):s,t)),ct=t=>D(C({},"__esModule",{value:!0}),t);var St={};lt(St,{CrossmintPayButton:()=>ft,CrossmintStatusButton:()=>dt});module.exports=ct(St);var E=require("@crossmint/client-sdk-base"),n=j(require("react"),1);var Y=require("react-jss"),pt="#1e1e1e",K=t=>t==="light",N=t=>({buttonBgColor:K(t)?"white":pt,paragraphColor:K(t)?"black":"white"}),w=(0,Y.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:t})=>t,"&:hover:enabled":{opacity:"0.6",cursor:"pointer"}},crossmintImg:{width:"21px",height:"21px","margin-right":"0.875rem"},crossmintParagraph:{color:({paragraphColor:t})=>t,margin:"0"}});var M=typeof window<"u";var c=require("@crossmint/client-sdk-base"),F=require("react");var I="0.1.3";var gt={type:E.mintingContractTypes.CANDY_MACHINE},ft=R=>{var u=R,{className:t,disabled:o,onClick:s,style:e,tabIndex:i,theme:v="dark",collectionTitle:p,collectionDescription:g,collectionPhoto:f,mintTo:k,emailTo:H,listingId:T,clientId:O,auctionId:y,hideMintOnInactiveClient:a=!1,showOverlay:_=!0,mintConfig:h=gt,whPassThroughArgs:A,environment:B}=u,U=P(u,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment"]);let[d,S]=(0,F.useState)(!1),[$,z]=(0,F.useState)(c.onboardingRequestStatusResponse.WAITING_SUBMISSION),{fetchClientIntegration:J}=(0,c.crossmintStatusService)({libVersion:I,clientId:O,environment:B,auctionId:y,mintConfig:h,setStatus:z}),{connect:Q}=(0,c.crossmintModalService)({clientId:O,showOverlay:_,setConnecting:S,libVersion:I,environment:B}),{checkProps:X,getButtonText:Z,shouldHideButton:tt}=(0,E.crossmintPayButtonService)(),[st,ot,et]=X({collectionTitle:p,collectionPhoto:f,collectionDescription:g});p=st,g=ot,f=et,(0,n.useEffect)(()=>{a&&J()},[$]);let rt=(0,n.useCallback)(G=>{s&&s(G),!d&&(G.defaultPrevented||Q(h,p,g,f,k,H,T))},[s]),L=w(N(v)),nt=(0,n.useMemo)(()=>n.default.createElement("p",{className:L.crossmintParagraph},Z(d)),[d]);return tt({hideMintOnInactiveClient:a,status:$})?null:n.default.createElement(n.default.Fragment,null,M&&n.default.createElement("button",l({className:`${L.crossmintButton} ${t||""}`,disabled:o,onClick:rt,style:l({},e),tabIndex:i},U),n.default.createElement("img",{className:L.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),nt))};var r=j(require("react"),1);var m=require("@crossmint/client-sdk-base");var dt=O=>{var y=O,{className:t,disabled:o,onClick:s,style:e,tabIndex:i,theme:v="dark",clientId:p,auctionId:g,platformId:f,mintConfig:k,environment:H}=y,T=P(y,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[a,_]=(0,r.useState)(m.onboardingRequestStatusResponse.WAITING_SUBMISSION),{goToOnboarding:h,fetchClientIntegration:A,getButtonText:B,isButtonDisabled:U}=(0,m.crossmintStatusService)({libVersion:I,clientId:p,environment:H,platformId:f,auctionId:g,mintConfig:k,setStatus:_}),R=(0,r.useCallback)(S=>{if(s&&s(S),a===m.onboardingRequestStatusResponse.WAITING_SUBMISSION){h();return}},[a]);(0,r.useEffect)(()=>{A();let S=setInterval(()=>{A()},60*1e3);return()=>clearInterval(S)},[]);let u=w(N(v)),d=(0,r.useMemo)(()=>r.default.createElement("p",{className:u.crossmintParagraph},B(a)),[a]);return r.default.createElement(r.default.Fragment,null,M&&r.default.createElement("button",l({className:`${u.crossmintButton} ${t||""}`,disabled:U(a),onClick:R,style:l({},e),tabIndex:i},T),r.default.createElement("img",{className:u.crossmintImg,src:`${m.baseUrls.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),d))};0&&(module.exports={CrossmintPayButton,CrossmintStatusButton});

package/lib/index.d.ts

@@ -0,0 +1,17 @@
+import { MouseEvent, CSSProperties, FC } from 'react';
+import { CrossmintPayButtonProps, BaseButtonProps } from '@crossmint/client-sdk-base';
+
+interface CrossmintPayButtonReactProps extends CrossmintPayButtonProps {
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+}
+interface CrossmintStatusButtonReactProps extends BaseButtonProps {
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+}
+
+declare const CrossmintPayButton: FC<CrossmintPayButtonReactProps>;
+
+declare const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps>;
+
+export { CrossmintPayButton, CrossmintStatusButton };

package/lib/index.js

@@ -0,0 +1 @@
+var st=Object.defineProperty;var y=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var V=(t,o,s)=>o in t?st(t,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[o]=s,i=(t,o)=>{for(var s in o||(o={}))F.call(o,s)&&V(t,s,o[s]);if(y)for(var s of y(o))R.call(o,s)&&V(t,s,o[s]);return t};var h=(t,o)=>{var s={};for(var e in t)F.call(t,e)&&o.indexOf(e)<0&&(s[e]=t[e]);if(t!=null&&y)for(var e of y(t))o.indexOf(e)<0&&R.call(t,e)&&(s[e]=t[e]);return s};import{mintingContractTypes as rt,crossmintPayButtonService as nt}from"@crossmint/client-sdk-base";import d,{useMemo as it,useCallback as at,useEffect as mt}from"react";import{createUseStyles as ot}from"react-jss";var et="#1e1e1e",$=t=>t==="light",B=t=>({buttonBgColor:$(t)?"white":et,paragraphColor:$(t)?"black":"white"}),x=ot({"@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:t})=>t,"&:hover:enabled":{opacity:"0.6",cursor:"pointer"}},crossmintImg:{width:"21px",height:"21px","margin-right":"0.875rem"},crossmintParagraph:{color:({paragraphColor:t})=>t,margin:"0"}});var P=typeof window<"u";import{crossmintModalService as ut,onboardingRequestStatusResponse as lt,crossmintStatusService as ct}from"@crossmint/client-sdk-base";import{useState as G}from"react";var f="0.1.3";var pt={type:rt.CANDY_MACHINE},Ot=A=>{var n=A,{className:t,disabled:o,onClick:s,style:e,tabIndex:N,theme:w="dark",collectionTitle:a,collectionDescription:m,collectionPhoto:u,mintTo:M,emailTo:E,listingId:v,clientId:k,auctionId:C,hideMintOnInactiveClient:r=!1,showOverlay:H=!0,mintConfig:b=pt,whPassThroughArgs:T,environment:I}=n,O=h(n,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment"]);let[l,c]=G(!1),[U,q]=G(lt.WAITING_SUBMISSION),{fetchClientIntegration:D}=ct({libVersion:f,clientId:k,environment:I,auctionId:C,mintConfig:b,setStatus:q}),{connect:j}=ut({clientId:k,showOverlay:H,setConnecting:c,libVersion:f,environment:I}),{checkProps:K,getButtonText:Y,shouldHideButton:z}=nt(),[J,Q,X]=K({collectionTitle:a,collectionPhoto:u,collectionDescription:m});a=J,m=Q,u=X,mt(()=>{r&&D()},[U]);let Z=at(L=>{s&&s(L),!l&&(L.defaultPrevented||j(b,a,m,u,M,E,v))},[s]),_=x(B(w)),tt=it(()=>d.createElement("p",{className:_.crossmintParagraph},Y(l)),[l]);return z({hideMintOnInactiveClient:r,status:U})?null:d.createElement(d.Fragment,null,P&&d.createElement("button",i({className:`${_.crossmintButton} ${t||""}`,disabled:o,onClick:Z,style:i({},e),tabIndex:N},O),d.createElement("img",{className:_.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),tt))};import S,{useMemo as gt,useCallback as ft,useState as dt,useEffect as St}from"react";import{baseUrls as Ct,onboardingRequestStatusResponse as W,crossmintStatusService as bt}from"@crossmint/client-sdk-base";var Gt=k=>{var C=k,{className:t,disabled:o,onClick:s,style:e,tabIndex:N,theme:w="dark",clientId:a,auctionId:m,platformId:u,mintConfig:M,environment:E}=C,v=h(C,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[r,H]=dt(W.WAITING_SUBMISSION),{goToOnboarding:b,fetchClientIntegration:T,getButtonText:I,isButtonDisabled:O}=bt({libVersion:f,clientId:a,environment:E,platformId:u,auctionId:m,mintConfig:M,setStatus:H}),A=ft(c=>{if(s&&s(c),r===W.WAITING_SUBMISSION){b();return}},[r]);St(()=>{T();let c=setInterval(()=>{T()},60*1e3);return()=>clearInterval(c)},[]);let n=x(B(w)),l=gt(()=>S.createElement("p",{className:n.crossmintParagraph},I(r)),[r]);return S.createElement(S.Fragment,null,P&&S.createElement("button",i({className:`${n.crossmintButton} ${t||""}`,disabled:O(r),onClick:A,style:i({},e),tabIndex:N},v),S.createElement("img",{className:n.crossmintImg,src:`${Ct.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),l))};export{Ot as CrossmintPayButton,Gt as CrossmintStatusButton};

package/package.json

@@ -1,18 +1,18 @@
 {
     "name": "@crossmint/client-sdk-react-ui",
-    "version": "0.1.3",
+    "version": "0.1.4-alpha.0",
     "author": "Paella Labs Inc",
     "license": "Apache-2.0",
     "repository": "https://github.com/CrossMint/crossmint-client-sdk",
     "type": "module",
     "sideEffects": false,
-    "main": "lib/cjs/index.js",
-    "module": "lib/esm/index.js",
-    "types": "lib/esm/index.d.ts",
+    "main": "lib/index.cjs",
+    "module": "lib/index.js",
+    "types": "lib/index.d.ts",
     "exports": {
         ".": {
-            "import": "./lib/esm/index.js",
-            "require": "./lib/cjs/index.js"
+            "import": "./lib/index.js",
+            "require": "./lib/index.cjs"
         }
     },
     "files": [
@@ -28,11 +28,11 @@
         "version": "yarn run create-version-file && git add .",
         "prebuild": "yarn run create-version-file",
         "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",
+        "build": "yarn clean && tsup src/index.ts --format esm,cjs --outDir ./lib --minify --dts",
         "test": "jest"
     },
     "dependencies": {
+        "@crossmint/client-sdk-base": "^0.1.0-alpha.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-jss": "^10.9.0",
@@ -49,5 +49,5 @@
         "ts-jest": "^27.1.3",
         "ts-node-dev": "^1.1.8"
     },
-    "gitHead": "4e1b3bbb11285de7c4bab0bade81c6ce180febe2"
+    "gitHead": "c66ffad77112a7f588d7f28371f773146351cabc"
 }

package/src/CrossmintPayButton.tsx

@@ -1,15 +1,21 @@
-import React, { FC, MouseEventHandler, useMemo, useCallback, useState } from "react";
-import useCrossmintStatus, { OnboardingRequestStatusResponse } from "./hooks/useCrossmintStatus";
-import useCrossmintModal from "./hooks/useCrossmintModal";
+import { mintingContractTypes, crossmintPayButtonService } from "@crossmint/client-sdk-base";
+import React, { FC, MouseEventHandler, useMemo, useCallback, useEffect } from "react";
 import { useStyles, formatProps } from "./styles";
 import { isClientSide } from "./utils";
-import { CrossmintPayButtonProps, mintingContractTypes } from "./types";
+import { CrossmintPayButtonReactProps } from "./types";
+import {
+    crossmintModalService,
+    onboardingRequestStatusResponse,
+    crossmintStatusService,
+} from "@crossmint/client-sdk-base";
+import { useState } from "react";
+import { LIB_VERSION } from "./version";
 
 const defaultMintConfig: any = {
     type: mintingContractTypes.CANDY_MACHINE,
 };
 
-export const CrossmintPayButton: FC<CrossmintPayButtonProps> = ({
+export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
     className,
     disabled,
     onClick,
@@ -23,41 +29,57 @@ export const CrossmintPayButton: FC<CrossmintPayButtonProps> = ({
     emailTo,
     listingId,
     clientId,
-    development = false,
     auctionId,
     hideMintOnInactiveClient = false,
     showOverlay = true,
     mintConfig = defaultMintConfig,
+    whPassThroughArgs,
+    environment,
     ...props
 }) => {
-    const status = useCrossmintStatus({ clientId, development });
-    const { connecting, connect } = useCrossmintModal({
+    const [connecting, setConnecting] = useState(false);
+    const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
+
+    const { fetchClientIntegration } = crossmintStatusService({
+        libVersion: LIB_VERSION,
+        clientId,
+        environment,
+        auctionId,
+        mintConfig,
+        setStatus,
+    });
+
+    const { connect } = crossmintModalService({
         clientId,
-        development,
         showOverlay,
+        setConnecting,
+        libVersion: LIB_VERSION,
+        environment,
     });
 
-    if (collectionTitle === "<TITLE_FOR_YOUR_COLLECTION>") {
-        console.warn("No collection title specified. Please add a collection title to your <CrossmintPayButton />");
-        collectionTitle = "";
-    }
+    const { checkProps, getButtonText, shouldHideButton } = crossmintPayButtonService();
 
-    if (collectionDescription === "<DESCRIPTION_OF_YOUR_COLLECTION>") {
-        console.warn(
-            "No collection description specified. Please add a collection description to your <CrossmintPayButton />"
-        );
-        collectionDescription = "";
-    }
+    const [newCollectionTitle, newCollectionDescription, newCollectionPhoto] = checkProps({
+        collectionTitle,
+        collectionPhoto,
+        collectionDescription,
+    });
+    collectionTitle = newCollectionTitle;
+    collectionDescription = newCollectionDescription;
+    collectionPhoto = newCollectionPhoto;
 
-    if (collectionPhoto === "<OPT_URL_TO_PHOTO_COVER>") {
-        console.warn("No collection photo specified. Please add a collection photo to your <CrossmintPayButton />");
-        collectionPhoto = "";
-    }
+    useEffect(() => {
+        if (hideMintOnInactiveClient) {
+            fetchClientIntegration();
+        }
+    }, [status]);
 
     const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
         (event) => {
             if (onClick) onClick(event);
 
+            if (connecting) return;
+
             if (!event.defaultPrevented) {
                 connect(
                     mintConfig,
@@ -76,11 +98,10 @@ export const CrossmintPayButton: FC<CrossmintPayButtonProps> = ({
     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>;
+        return <p className={classes.crossmintParagraph}>{getButtonText(connecting)}</p>;
     }, [connecting]);
 
-    if (hideMintOnInactiveClient && status !== OnboardingRequestStatusResponse.ACCEPTED) {
+    if (shouldHideButton({ hideMintOnInactiveClient, status })) {
         return null;
     }
 

package/src/CrossmintStatusButton.tsx

@@ -1,17 +1,11 @@
-import React, { FC, MouseEventHandler, useMemo, useCallback } from "react";
-import useCrossmintStatus, { OnboardingRequestStatusResponse } from "./hooks/useCrossmintStatus";
+import React, { FC, MouseEventHandler, useMemo, useCallback, useState, useEffect } from "react";
 import { useStyles, formatProps } from "./styles";
-import { baseUrls, CrossmintStatusButtonProps } from "./types";
+import { CrossmintStatusButtonReactProps } from "./types";
 import { isClientSide } from "./utils";
+import { baseUrls, onboardingRequestStatusResponse, crossmintStatusService } from "@crossmint/client-sdk-base";
+import { LIB_VERSION } from "./version";
 
-type OnboardingQueryParams = {
-    clientId: string;
-    platformId?: string;
-    auctionId?: string;
-    mintConfig?: string;
-};
-
-export const CrossmintStatusButton: FC<CrossmintStatusButtonProps> = ({
+export const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps> = ({
     className,
     disabled,
     onClick,
@@ -20,35 +14,28 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonProps> = ({
     theme = "dark",
     clientId,
     auctionId,
-    development = false,
     platformId,
     mintConfig,
+    environment,
     ...props
 }) => {
-    const status = useCrossmintStatus({ clientId, development });
-
-    const formatOnboardingQueryParams = () => {
-        const onboardingQueryParams: OnboardingQueryParams = {
-            clientId: clientId,
-        };
-
-        if (platformId) onboardingQueryParams.platformId = platformId;
-        if (auctionId) onboardingQueryParams.auctionId = auctionId;
-        if (mintConfig) onboardingQueryParams.mintConfig = JSON.stringify(mintConfig);
+    const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
 
-        return new URLSearchParams(onboardingQueryParams).toString();
-    };
-
-    const goToOnboarding = () => {
-        const baseUrl = development ? baseUrls.dev : baseUrls.prod;
-        window.open(`${baseUrl}/developers/onboarding?${formatOnboardingQueryParams()}`, "_blank");
-    };
+    const { goToOnboarding, fetchClientIntegration, getButtonText, isButtonDisabled } = crossmintStatusService({
+        libVersion: LIB_VERSION,
+        clientId,
+        environment,
+        platformId,
+        auctionId,
+        mintConfig,
+        setStatus,
+    });
 
     const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
         (event) => {
             if (onClick) onClick(event);
 
-            if (status === OnboardingRequestStatusResponse.WAITING_SUBMISSION) {
+            if (status === onboardingRequestStatusResponse.WAITING_SUBMISSION) {
                 goToOnboarding();
                 return;
             }
@@ -56,21 +43,20 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonProps> = ({
         [status]
     );
 
+    useEffect(() => {
+        fetchClientIntegration();
+
+        const interval = setInterval(() => {
+            fetchClientIntegration();
+        }, 60 * 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
     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>;
-        }
+        return <p className={classes.crossmintParagraph}>{getButtonText(status)}</p>;
     }, [status]);
 
     return (
@@ -78,7 +64,7 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonProps> = ({
             {isClientSide && (
                 <button
                     className={`${classes.crossmintButton} ${className || ""}`}
-                    disabled={status !== OnboardingRequestStatusResponse.WAITING_SUBMISSION}
+                    disabled={isButtonDisabled(status)}
                     onClick={handleClick}
                     style={{ ...style }}
                     tabIndex={tabIndex}

package/src/types.ts

@@ -1,62 +1,12 @@
 import { CSSProperties, MouseEvent } from "react";
+import { CrossmintPayButtonProps, BaseButtonProps } from "@crossmint/client-sdk-base";
 
-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",
-}
-
-type theme = "light" | "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 StatusButtonConfig {
-    [propName: string]: any;
-}
-
-export interface BaseButtonProps {
-    className?: string;
-    disabled?: boolean;
+export interface CrossmintPayButtonReactProps extends CrossmintPayButtonProps {
     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 interface CrossmintStatusButtonReactProps extends BaseButtonProps {
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
 }

package/src/version.ts

@@ -1 +1 @@
-export const LIB_VERSION = "0.1.3";
+export const LIB_VERSION = "0.1.4-alpha.0";

package/lib/cjs/CrossmintPayButton.d.ts

@@ -1,3 +0,0 @@
-import { FC } from "react";
-import { CrossmintPayButtonProps } from "./types";
-export declare const CrossmintPayButton: FC<CrossmintPayButtonProps>;

package/lib/cjs/CrossmintPayButton.js

@@ -1,91 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CrossmintPayButton = void 0;
-const react_1 = __importStar(require("react"));
-const useCrossmintStatus_1 = __importStar(require("./hooks/useCrossmintStatus"));
-const useCrossmintModal_1 = __importDefault(require("./hooks/useCrossmintModal"));
-const styles_1 = require("./styles");
-const utils_1 = require("./utils");
-const types_1 = require("./types");
-const defaultMintConfig = {
-    type: types_1.mintingContractTypes.CANDY_MACHINE,
-};
-const CrossmintPayButton = (_a) => {
-    var { className, disabled, onClick, style, tabIndex, theme = "dark", collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId, clientId, development = false, auctionId, hideMintOnInactiveClient = false, showOverlay = true, mintConfig = defaultMintConfig } = _a, props = __rest(_a, ["className", "disabled", "onClick", "style", "tabIndex", "theme", "collectionTitle", "collectionDescription", "collectionPhoto", "mintTo", "emailTo", "listingId", "clientId", "development", "auctionId", "hideMintOnInactiveClient", "showOverlay", "mintConfig"]);
-    const status = (0, useCrossmintStatus_1.default)({ clientId, development });
-    const { connecting, connect } = (0, useCrossmintModal_1.default)({
-        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 = (0, react_1.useCallback)((event) => {
-        if (onClick)
-            onClick(event);
-        if (!event.defaultPrevented) {
-            connect(mintConfig, collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId);
-        }
-    }, [onClick]);
-    const classes = (0, styles_1.useStyles)((0, styles_1.formatProps)(theme));
-    const content = (0, react_1.useMemo)(() => {
-        if (connecting)
-            return react_1.default.createElement("p", { className: classes.crossmintParagraph }, "Connecting ...");
-        return react_1.default.createElement("p", { className: classes.crossmintParagraph }, "Buy with credit card");
-    }, [connecting]);
-    if (hideMintOnInactiveClient && status !== useCrossmintStatus_1.OnboardingRequestStatusResponse.ACCEPTED) {
-        return null;
-    }
-    return (react_1.default.createElement(react_1.default.Fragment, null, utils_1.isClientSide && (react_1.default.createElement("button", Object.assign({ className: `${classes.crossmintButton} ${className || ""}`, disabled: disabled, onClick: handleClick, style: Object.assign({}, style), tabIndex: tabIndex }, props),
-        react_1.default.createElement("img", { className: classes.crossmintImg, src: "https://www.crossmint.io/assets/crossmint/logo.png", alt: "Crossmint logo" }),
-        content))));
-};
-exports.CrossmintPayButton = CrossmintPayButton;
-//# sourceMappingURL=CrossmintPayButton.js.map

package/lib/cjs/CrossmintPayButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CrossmintPayButton.js","sourceRoot":"","sources":["../../src/CrossmintPayButton.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/CrossmintStatusButton.d.ts

@@ -1,3 +0,0 @@
-import { FC } from "react";
-import { CrossmintStatusButtonProps } from "./types";
-export declare const CrossmintStatusButton: FC<CrossmintStatusButtonProps>;

package/lib/cjs/CrossmintStatusButton.js

@@ -1,90 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.CrossmintStatusButton = void 0;
-const react_1 = __importStar(require("react"));
-const useCrossmintStatus_1 = __importStar(require("./hooks/useCrossmintStatus"));
-const styles_1 = require("./styles");
-const types_1 = require("./types");
-const utils_1 = require("./utils");
-const CrossmintStatusButton = (_a) => {
-    var { className, disabled, onClick, style, tabIndex, theme = "dark", clientId, auctionId, development = false, platformId, mintConfig } = _a, props = __rest(_a, ["className", "disabled", "onClick", "style", "tabIndex", "theme", "clientId", "auctionId", "development", "platformId", "mintConfig"]);
-    const status = (0, useCrossmintStatus_1.default)({ clientId, development });
-    const formatOnboardingQueryParams = () => {
-        const onboardingQueryParams = {
-            clientId: clientId,
-        };
-        if (platformId)
-            onboardingQueryParams.platformId = platformId;
-        if (auctionId)
-            onboardingQueryParams.auctionId = auctionId;
-        if (mintConfig)
-            onboardingQueryParams.mintConfig = JSON.stringify(mintConfig);
-        return new URLSearchParams(onboardingQueryParams).toString();
-    };
-    const goToOnboarding = () => {
-        const baseUrl = development ? types_1.baseUrls.dev : types_1.baseUrls.prod;
-        window.open(`${baseUrl}/developers/onboarding?${formatOnboardingQueryParams()}`, "_blank");
-    };
-    const handleClick = (0, react_1.useCallback)((event) => {
-        if (onClick)
-            onClick(event);
-        if (status === useCrossmintStatus_1.OnboardingRequestStatusResponse.WAITING_SUBMISSION) {
-            goToOnboarding();
-            return;
-        }
-    }, [status]);
-    const classes = (0, styles_1.useStyles)((0, styles_1.formatProps)(theme));
-    const content = (0, react_1.useMemo)(() => {
-        switch (status) {
-            case useCrossmintStatus_1.OnboardingRequestStatusResponse.INVALID:
-                return react_1.default.createElement("p", { className: classes.crossmintParagraph }, "Invalid clientId");
-            case useCrossmintStatus_1.OnboardingRequestStatusResponse.WAITING_SUBMISSION:
-                return react_1.default.createElement("p", { className: classes.crossmintParagraph }, "Click here to setup CrossMint");
-            case useCrossmintStatus_1.OnboardingRequestStatusResponse.PENDING:
-                return react_1.default.createElement("p", { className: classes.crossmintParagraph }, "Your application is under review");
-            case useCrossmintStatus_1.OnboardingRequestStatusResponse.ACCEPTED:
-                return react_1.default.createElement("p", { className: classes.crossmintParagraph }, "You're good to go!");
-            case useCrossmintStatus_1.OnboardingRequestStatusResponse.REJECTED:
-                return react_1.default.createElement("p", { className: classes.crossmintParagraph }, "Your application was rejected");
-        }
-    }, [status]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, utils_1.isClientSide && (react_1.default.createElement("button", Object.assign({ className: `${classes.crossmintButton} ${className || ""}`, disabled: status !== useCrossmintStatus_1.OnboardingRequestStatusResponse.WAITING_SUBMISSION, onClick: handleClick, style: Object.assign({}, style), tabIndex: tabIndex }, props),
-        react_1.default.createElement("img", { className: classes.crossmintImg, src: `${types_1.baseUrls.prod}/assets/crossmint/logo.png`, alt: "Crossmint logo" }),
-        content))));
-};
-exports.CrossmintStatusButton = CrossmintStatusButton;
-//# sourceMappingURL=CrossmintStatusButton.js.map

package/lib/cjs/CrossmintStatusButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CrossmintStatusButton.js","sourceRoot":"","sources":["../../src/CrossmintStatusButton.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/hooks/useCrossmintModal.d.ts

@@ -1,12 +0,0 @@
-import { PayButtonConfig } from "../types";
-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;
-}
-export default function useCrossMintModal({ development, clientId, showOverlay }: IProps): IReturn;
-export {};