@crossmint/client-sdk-react-ui 0.2.8-alpha.2 → 1.0.0-alpha.0

package/README.md

@@ -16,7 +16,7 @@ yarn add @crossmint/client-sdk-react-ui
 
 ### Add payment button to your site
 
-The next steps depend on which chain you're using for your project. For detailed integration instructions, visit our documentation for [Solana](https://docs.crossmint.com/accept-credit-cards/integration-guides/solana-candy-machine/b-i-have-an-existing-candy-machine-website/add-crossmint-for-solana-react.js-next.js), [Polygon](https://docs.crossmint.com/accept-credit-cards/integration-guides/polygon), or [Ethereum](https://docs.crossmint.com/accept-credit-cards/integration-guides/ethereum/add-crossmint-for-ethereum-react.js-next.js).
+Check our dedicated section for payments [in the docs](https://docs.crossmint.com/docs/integration-guide).
 
 ---
 

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";var ct=Object.create;var B=Object.defineProperty;var lt=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var pt=Object.getPrototypeOf,ft=Object.prototype.hasOwnProperty;var gt=(t,e)=>{for(var o in e)B(t,o,{get:e[o],enumerable:!0})},j=(t,e,o,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of ut(e))!ft.call(t,r)&&r!==o&&B(t,r,{get:()=>e[r],enumerable:!(u=lt(e,r))||u.enumerable});return t};var x=(t,e,o)=>(o=t!=null?ct(pt(t)):{},j(e||!t||!t.__esModule?B(o,"default",{value:t,enumerable:!0}):o,t)),dt=t=>j(B({},"__esModule",{value:!0}),t);var Et={};gt(Et,{CheckoutEvents:()=>R.CheckoutEvents,CrossmintNFTCollectionView:()=>vt,CrossmintNFTDetail:()=>bt,CrossmintPayButton:()=>Ct,CrossmintPaymentElement:()=>xt,CrossmintStatusButton:()=>yt,useCrossmintEvents:()=>R.useCrossmintEvents});module.exports=dt(Et);var i=x(require("react"),1),W=require("react"),n=require("@crossmint/client-sdk-base");var Q=require("react-jss"),ht="#1e1e1e",K=t=>t==="light",T=t=>({buttonBgColor:K(t)?"white":ht,paragraphColor:K(t)?"black":"white"}),k=(0,Q.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 V=require("react");function E(){let[t,e]=(0,V.useState)(!0);return(0,V.useEffect)(()=>{e(!1)},[]),{isServerSideRendering:t}}var c="0.2.8-alpha.2";var St={type:n.mintingContractTypes.CANDY_MACHINE};function Ct({className:t,disabled:e,onClick:o,style:u,tabIndex:r,theme:S="dark",mintTo:C,emailTo:y,listingId:m,clientId:p,auctionId:f,hideMintOnInactiveClient:h=!1,showOverlay:_=!0,mintConfig:d=St,whPassThroughArgs:L,environment:N,paymentMethod:I,preferredSigninMethod:P,dismissOverlayOnClick:O,prepay:A,locale:w="en-US",currency:D="usd",successCallbackURL:v="",failureCallbackURL:H="",loginEmail:b="",...J}){let[$,X]=(0,W.useState)(!1),[q,Z]=(0,W.useState)(n.onboardingRequestStatusResponse.WAITING_SUBMISSION),{isServerSideRendering:tt}=E(),{fetchClientIntegration:et}=(0,n.crossmintStatusService)({libVersion:c,clientId:p,environment:N,auctionId:f,mintConfig:d,setStatus:Z,clientName:n.clientNames.reactUi}),{connect:ot}=(0,n.crossmintModalService)({clientId:p,showOverlay:_,dismissOverlayOnClick:O,setConnecting:X,libVersion:c,environment:N,clientName:n.clientNames.reactUi,locale:w,currency:D,successCallbackURL:v,failureCallbackURL:H,loginEmail:b}),{getButtonText:nt,shouldHideButton:st,handleClick:rt}=(0,n.crossmintPayButtonService)({onClick:o,connecting:$,paymentMethod:I,locale:w});(0,i.useEffect)(()=>{h&&et()},[q]);let it=mt=>rt(mt,()=>{ot(d,C,y,m,L,I,P,A)}),G=k(T(S)),at=(0,i.useMemo)(()=>i.default.createElement("span",{className:G.crossmintParagraph,role:"button-paragraph"},nt($)),[$]);return st({hideMintOnInactiveClient:h,status:q})?null:i.default.createElement(i.default.Fragment,null,!tt&&i.default.createElement("button",{className:`${G.crossmintButton} ${t||""}`,disabled:e,onClick:it,style:{...u},tabIndex:r,...J},i.default.createElement("img",{className:G.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.svg",alt:"Crossmint logo"}),at))}var s=x(require("react"),1),a=require("@crossmint/client-sdk-base");function yt({className:t,disabled:e,onClick:o,style:u,tabIndex:r,theme:S="dark",clientId:C,auctionId:y,platformId:m,mintConfig:p,environment:f,locale:h="en-US",..._}){let[d,L]=(0,s.useState)(a.onboardingRequestStatusResponse.WAITING_SUBMISSION),{isServerSideRendering:N}=E(),{goToOnboarding:I,fetchClientIntegration:P}=(0,a.crossmintStatusService)({libVersion:c,clientId:C,environment:f,platformId:m,auctionId:y,mintConfig:p,setStatus:L,clientName:a.clientNames.reactUi}),{getButtonText:O,isButtonDisabled:A,handleClick:w}=(0,a.crossmintStatusButtonService)({onClick:o,locale:h}),D=b=>w(b,d,I);(0,s.useEffect)(()=>{P();let b=setInterval(()=>{P()},60*1e3);return()=>clearInterval(b)},[]);let v=k(T(S)),H=(0,s.useMemo)(()=>s.default.createElement("span",{className:v.crossmintParagraph},O(d)),[d]);return s.default.createElement(s.default.Fragment,null,!N&&s.default.createElement("button",{className:`${v.crossmintButton} ${t||""}`,disabled:A(d),onClick:D,style:{...u},tabIndex:r,..._},s.default.createElement("img",{className:v.crossmintImg,src:`${a.baseUrls.prod}/assets/crossmint/logo.svg`,alt:"Crossmint logo"}),H))}var Y=x(require("react"),1),M=require("@crossmint/client-sdk-base");function vt(t){(0,M.assertValidNFTCollectionViewProps)(t);let e=(0,M.getNFTCollectionViewSrc)(t,c);return Y.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-collection-view"})}var z=x(require("react"),1),U=require("@crossmint/client-sdk-base");function bt(t){(0,U.assertValidValidateNFTDetailProps)(t);let e=(0,U.getNFTDetailSrc)(t,c);return z.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-details"})}var l=x(require("react"),1),F=require("@crossmint/client-sdk-base");function xt(t){let[e,o]=(0,l.useState)(0),{getIframeUrl:u,listenToEvents:r,emitQueryParams:S}=(0,F.crossmintPaymentService)(t),{listenToEvents:C}=(0,F.crossmintUiService)({environment:t.environment}),[y]=(0,l.useState)(u());return(0,l.useEffect)(()=>{let m=r(p=>{var f;return(f=t.onEvent)==null?void 0:f.call(t,p.data)});return()=>{m&&m()}},[]),(0,l.useEffect)(()=>{let m=C(p=>{let{type:f,payload:h}=p.data;switch(f){case"ui:height.changed":o(h.height);break;default:return}});return()=>{m&&m()}},[]),(0,l.useEffect)(()=>{S({recipient:t.recipient,mintConfig:t.mintConfig,locale:t.locale,whPassThroughArgs:t.whPassThroughArgs})},[t.recipient,t.mintConfig,t.locale,t.whPassThroughArgs]),l.default.createElement("iframe",{src:y,id:"iframe-crossmint-payment-element",role:"iframe-crossmint-payment-element",allow:"payment *",style:{border:"none !important",padding:"0px !important",width:"100% !important",minWidth:"100% !important",overflow:"hidden !important",display:"block !important",userSelect:"none",transform:"translate(0px) !important",opacity:"1",transition:"ease 0s, opacity 0.4s ease 0.1s",height:`${e}px`}})}var R=require("@crossmint/client-sdk-base");0&&(module.exports={CheckoutEvents,CrossmintNFTCollectionView,CrossmintNFTDetail,CrossmintPayButton,CrossmintPaymentElement,CrossmintStatusButton,useCrossmintEvents});
+"use strict";var rt=Object.create;var f=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var at=Object.getPrototypeOf,mt=Object.prototype.hasOwnProperty;var ct=(t,e)=>{for(var n in e)f(t,n,{get:e[n],enumerable:!0})},B=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of st(e))!mt.call(t,o)&&o!==n&&f(t,o,{get:()=>e[o],enumerable:!(c=it(e,o))||c.enumerable});return t};var d=(t,e,n)=>(n=t!=null?rt(at(t)):{},B(e||!t||!t.__esModule?f(n,"default",{value:t,enumerable:!0}):n,t)),lt=t=>B(f({},"__esModule",{value:!0}),t);var yt={};ct(yt,{CheckoutEvents:()=>S.CheckoutEvents,CrossmintNFTCollectionView:()=>ft,CrossmintNFTDetail:()=>dt,CrossmintPayButton:()=>ut,CrossmintPaymentElement:()=>ht,useCrossmintEvents:()=>S.useCrossmintEvents});module.exports=lt(yt);var i=d(require("react"),1),L=require("react"),s=require("@crossmint/client-sdk-base");var V=require("react-jss"),pt="#1e1e1e",M=t=>t==="light",F=t=>({buttonBgColor:M(t)?"white":pt,paragraphColor:M(t)?"black":"white"}),R=(0,V.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 h=require("react");function N(){let[t,e]=(0,h.useState)(!0);return(0,h.useEffect)(()=>{e(!1)},[]),{isServerSideRendering:t}}var l="1.0.0-alpha.0";var gt={type:s.mintingContractTypes.CANDY_MACHINE};function ut(t){let{className:e,disabled:n,onClick:c,style:o,tabIndex:x,theme:w="dark",mintTo:b,emailTo:a,listingId:p,auctionId:g,showOverlay:E=!0,mintConfig:A=gt,whPassThroughArgs:D,environment:_,paymentMethod:T,preferredSigninMethod:H,dismissOverlayOnClick:G,prepay:$,locale:k="en-US",currency:j="usd",successCallbackURL:K="",failureCallbackURL:Q="",loginEmail:W="",projectId:Y,...u}=t,q="clientId"in u?u.clientId:u.collectionId,[P,z]=(0,L.useState)(!1),{isServerSideRendering:J}=N(),{connect:X}=(0,s.crossmintModalService)({clientId:q,projectId:Y,showOverlay:E,dismissOverlayOnClick:G,setConnecting:z,libVersion:l,environment:_,clientName:s.clientNames.reactUi,locale:k,currency:j,successCallbackURL:K,failureCallbackURL:Q,loginEmail:W}),{getButtonText:Z,handleClick:tt}=(0,s.crossmintPayButtonService)({onClick:c,connecting:P,paymentMethod:T,locale:k}),et=ot=>tt(ot,()=>{X(A,b,a,p,D,T,H,$)}),I=R(F(w)),nt=(0,i.useMemo)(()=>i.default.createElement("span",{className:I.crossmintParagraph,role:"button-paragraph"},Z(P)),[P]);return i.default.createElement(i.default.Fragment,null,!J&&i.default.createElement("button",{className:`${I.crossmintButton} ${e||""}`,disabled:n,onClick:et,style:{...o},tabIndex:x,...u},i.default.createElement("img",{className:I.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.svg",alt:"Crossmint logo"}),nt))}var U=d(require("react"),1),y=require("@crossmint/client-sdk-base");function ft(t){(0,y.assertValidNFTCollectionViewProps)(t);let e=(0,y.getNFTCollectionViewSrc)(t,l);return U.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-collection-view"})}var O=d(require("react"),1),C=require("@crossmint/client-sdk-base");function dt(t){(0,C.assertValidValidateNFTDetailProps)(t);let e=(0,C.getNFTDetailSrc)(t,l);return O.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-details"})}var r=d(require("react"),1),v=require("@crossmint/client-sdk-base");function ht(t){let[e,n]=(0,r.useState)(0),{getIframeUrl:c,listenToEvents:o,emitQueryParams:x}=(0,v.crossmintPaymentService)(t),{listenToEvents:w}=(0,v.crossmintUiService)({environment:t.environment}),[b]=(0,r.useState)(c());return(0,r.useEffect)(()=>{let a=o(p=>{var g;return(g=t.onEvent)==null?void 0:g.call(t,p.data)});return()=>{a&&a()}},[]),(0,r.useEffect)(()=>{let a=w(p=>{let{type:g,payload:E}=p.data;switch(g){case"ui:height.changed":n(E.height);break;default:return}});return()=>{a&&a()}},[]),(0,r.useEffect)(()=>{x({recipient:t.recipient,mintConfig:t.mintConfig,locale:t.locale,whPassThroughArgs:t.whPassThroughArgs})},[t.recipient,t.mintConfig,t.locale,t.whPassThroughArgs]),r.default.createElement("iframe",{src:b,id:"iframe-crossmint-payment-element",role:"iframe-crossmint-payment-element",allow:"payment *",style:{border:"none !important",padding:"0px !important",width:"100% !important",minWidth:"100% !important",overflow:"hidden !important",display:"block !important",userSelect:"none",transform:"translate(0px) !important",opacity:"1",transition:"ease 0s, opacity 0.4s ease 0.1s",height:`${e}px`}})}var S=require("@crossmint/client-sdk-base");0&&(module.exports={CheckoutEvents,CrossmintNFTCollectionView,CrossmintNFTDetail,CrossmintPayButton,CrossmintPaymentElement,useCrossmintEvents});

package/lib/index.d.ts

@@ -1,19 +1,13 @@
 import { MouseEvent, CSSProperties } from 'react';
-import { CrossmintPayButtonProps, BaseButtonProps, NFTCollectionViewProps, NFTDetailProps, PaymentElement } from '@crossmint/client-sdk-base';
+import { CrossmintPayButtonProps, NFTCollectionViewProps, NFTDetailProps, PaymentElement } from '@crossmint/client-sdk-base';
 export { CheckoutEventMap, CheckoutEvents, CrossmintCheckoutEvent, useCrossmintEvents } from '@crossmint/client-sdk-base';
 
-interface CrossmintPayButtonReactProps extends CrossmintPayButtonProps {
+type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     style?: CSSProperties;
-}
-interface CrossmintStatusButtonReactProps extends BaseButtonProps {
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    style?: CSSProperties;
-}
-
-declare function CrossmintPayButton({ className, disabled, onClick, style, tabIndex, theme, mintTo, emailTo, listingId, clientId, auctionId, hideMintOnInactiveClient, showOverlay, mintConfig, whPassThroughArgs, environment, paymentMethod, preferredSigninMethod, dismissOverlayOnClick, prepay, locale, currency, successCallbackURL, failureCallbackURL, loginEmail, ...props }: CrossmintPayButtonReactProps): JSX.Element | null;
+};
 
-declare function CrossmintStatusButton({ className, disabled, onClick, style, tabIndex, theme, clientId, auctionId, platformId, mintConfig, environment, locale, ...props }: CrossmintStatusButtonReactProps): JSX.Element;
+declare function CrossmintPayButton(buttonProps: CrossmintPayButtonReactProps): JSX.Element;
 
 declare function CrossmintNFTCollectionView(props: NFTCollectionViewProps): JSX.Element;
 
@@ -21,4 +15,4 @@ declare function CrossmintNFTDetail(props: NFTDetailProps): JSX.Element;
 
 declare function CrossmintPaymentElement(props: PaymentElement): JSX.Element;
 
-export { CrossmintNFTCollectionView, CrossmintNFTDetail, CrossmintPayButton, CrossmintPaymentElement, CrossmintStatusButton };
+export { CrossmintNFTCollectionView, CrossmintNFTDetail, CrossmintPayButton, CrossmintPaymentElement };

package/lib/index.js

@@ -1 +1 @@
-import y,{useEffect as rt,useMemo as it}from"react";import{useState as O}from"react";import{clientNames as A,crossmintModalService as at,crossmintPayButtonService as mt,crossmintStatusService as ct,mintingContractTypes as lt,onboardingRequestStatusResponse as ut}from"@crossmint/client-sdk-base";import{createUseStyles as et}from"react-jss";var ot="#1e1e1e",L=t=>t==="light",I=t=>({buttonBgColor:L(t)?"white":ot,paragraphColor:L(t)?"black":"white"}),P=et({"@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"}});import{useEffect as nt,useState as st}from"react";function C(){let[t,e]=st(!0);return nt(()=>{e(!1)},[]),{isServerSideRendering:t}}var n="0.2.8-alpha.2";var pt={type:lt.CANDY_MACHINE};function Ht({className:t,disabled:e,onClick:l,style:u,tabIndex:p,theme:f="dark",mintTo:g,emailTo:d,listingId:o,clientId:s,auctionId:r,hideMintOnInactiveClient:c=!1,showOverlay:w=!0,mintConfig:m=pt,whPassThroughArgs:B,environment:b,paymentMethod:x,preferredSigninMethod:E,dismissOverlayOnClick:T,prepay:k,locale:N="en-US",currency:V="usd",successCallbackURL:h="",failureCallbackURL:M="",loginEmail:S="",...G}){let[U,W]=O(!1),[_,q]=O(ut.WAITING_SUBMISSION),{isServerSideRendering:j}=C(),{fetchClientIntegration:K}=ct({libVersion:n,clientId:s,environment:b,auctionId:r,mintConfig:m,setStatus:q,clientName:A.reactUi}),{connect:Q}=at({clientId:s,showOverlay:w,dismissOverlayOnClick:T,setConnecting:W,libVersion:n,environment:b,clientName:A.reactUi,locale:N,currency:V,successCallbackURL:h,failureCallbackURL:M,loginEmail:S}),{getButtonText:Y,shouldHideButton:z,handleClick:J}=mt({onClick:l,connecting:U,paymentMethod:x,locale:N});rt(()=>{c&&K()},[_]);let X=tt=>J(tt,()=>{Q(m,g,d,o,B,x,E,k)}),F=P(I(f)),Z=it(()=>y.createElement("span",{className:F.crossmintParagraph,role:"button-paragraph"},Y(U)),[U]);return z({hideMintOnInactiveClient:c,status:_})?null:y.createElement(y.Fragment,null,!j&&y.createElement("button",{className:`${F.crossmintButton} ${t||""}`,disabled:e,onClick:X,style:{...u},tabIndex:p,...G},y.createElement("img",{className:F.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.svg",alt:"Crossmint logo"}),Z))}import v,{useEffect as ft,useMemo as gt,useState as dt}from"react";import{baseUrls as ht,clientNames as St,crossmintStatusButtonService as Ct,crossmintStatusService as yt,onboardingRequestStatusResponse as vt}from"@crossmint/client-sdk-base";function zt({className:t,disabled:e,onClick:l,style:u,tabIndex:p,theme:f="dark",clientId:g,auctionId:d,platformId:o,mintConfig:s,environment:r,locale:c="en-US",...w}){let[m,B]=dt(vt.WAITING_SUBMISSION),{isServerSideRendering:b}=C(),{goToOnboarding:x,fetchClientIntegration:E}=yt({libVersion:n,clientId:g,environment:r,platformId:o,auctionId:d,mintConfig:s,setStatus:B,clientName:St.reactUi}),{getButtonText:T,isButtonDisabled:k,handleClick:N}=Ct({onClick:l,locale:c}),V=S=>N(S,m,x);ft(()=>{E();let S=setInterval(()=>{E()},60*1e3);return()=>clearInterval(S)},[]);let h=P(I(f)),M=gt(()=>v.createElement("span",{className:h.crossmintParagraph},T(m)),[m]);return v.createElement(v.Fragment,null,!b&&v.createElement("button",{className:`${h.crossmintButton} ${t||""}`,disabled:k(m),onClick:V,style:{...u},tabIndex:p,...w},v.createElement("img",{className:h.crossmintImg,src:`${ht.prod}/assets/crossmint/logo.svg`,alt:"Crossmint logo"}),M))}import*as D from"react";import{assertValidNFTCollectionViewProps as bt,getNFTCollectionViewSrc as xt}from"@crossmint/client-sdk-base";function ee(t){bt(t);let e=xt(t,n);return D.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-collection-view"})}import*as H from"react";import{assertValidValidateNFTDetailProps as Et,getNFTDetailSrc as Nt}from"@crossmint/client-sdk-base";function ie(t){Et(t);let e=Nt(t,n);return H.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-details"})}import It,{useEffect as R,useState as $}from"react";import{crossmintPaymentService as Pt,crossmintUiService as wt}from"@crossmint/client-sdk-base";function le(t){let[e,l]=$(0),{getIframeUrl:u,listenToEvents:p,emitQueryParams:f}=Pt(t),{listenToEvents:g}=wt({environment:t.environment}),[d]=$(u());return R(()=>{let o=p(s=>{var r;return(r=t.onEvent)==null?void 0:r.call(t,s.data)});return()=>{o&&o()}},[]),R(()=>{let o=g(s=>{let{type:r,payload:c}=s.data;switch(r){case"ui:height.changed":l(c.height);break;default:return}});return()=>{o&&o()}},[]),R(()=>{f({recipient:t.recipient,mintConfig:t.mintConfig,locale:t.locale,whPassThroughArgs:t.whPassThroughArgs})},[t.recipient,t.mintConfig,t.locale,t.whPassThroughArgs]),It.createElement("iframe",{src:d,id:"iframe-crossmint-payment-element",role:"iframe-crossmint-payment-element",allow:"payment *",style:{border:"none !important",padding:"0px !important",width:"100% !important",minWidth:"100% !important",overflow:"hidden !important",display:"block !important",userSelect:"none",transform:"translate(0px) !important",opacity:"1",transition:"ease 0s, opacity 0.4s ease 0.1s",height:`${e}px`}})}import{CheckoutEvents as ye,useCrossmintEvents as ve}from"@crossmint/client-sdk-base";export{ye as CheckoutEvents,ee as CrossmintNFTCollectionView,ie as CrossmintNFTDetail,Ht as CrossmintPayButton,le as CrossmintPaymentElement,zt as CrossmintStatusButton,ve as useCrossmintEvents};
+import m,{useMemo as Z}from"react";import{useState as tt}from"react";import{clientNames as et,crossmintModalService as nt,crossmintPayButtonService as ot,mintingContractTypes as rt}from"@crossmint/client-sdk-base";import{createUseStyles as q}from"react-jss";var z="#1e1e1e",b=t=>t==="light",E=t=>({buttonBgColor:b(t)?"white":z,paragraphColor:b(t)?"black":"white"}),P=q({"@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"}});import{useEffect as J,useState as X}from"react";function v(){let[t,e]=X(!0);return J(()=>{e(!1)},[]),{isServerSideRendering:t}}var i="1.0.0-alpha.0";var it={type:rt.CANDY_MACHINE};function It(t){let{className:e,disabled:l,onClick:p,style:g,tabIndex:u,theme:f="dark",mintTo:d,emailTo:n,listingId:s,auctionId:a,showOverlay:h=!0,mintConfig:k=it,whPassThroughArgs:B,environment:M,paymentMethod:x,preferredSigninMethod:V,dismissOverlayOnClick:F,prepay:R,locale:w="en-US",currency:L="usd",successCallbackURL:U="",failureCallbackURL:O="",loginEmail:A="",projectId:D,...c}=t,_="clientId"in c?c.clientId:c.collectionId,[y,H]=tt(!1),{isServerSideRendering:G}=v(),{connect:$}=nt({clientId:_,projectId:D,showOverlay:h,dismissOverlayOnClick:F,setConnecting:H,libVersion:i,environment:M,clientName:et.reactUi,locale:w,currency:L,successCallbackURL:U,failureCallbackURL:O,loginEmail:A}),{getButtonText:j,handleClick:K}=ot({onClick:p,connecting:y,paymentMethod:x,locale:w}),Q=Y=>K(Y,()=>{$(k,d,n,s,B,x,V,R)}),C=P(E(f)),W=Z(()=>m.createElement("span",{className:C.crossmintParagraph,role:"button-paragraph"},j(y)),[y]);return m.createElement(m.Fragment,null,!G&&m.createElement("button",{className:`${C.crossmintButton} ${e||""}`,disabled:l,onClick:Q,style:{...g},tabIndex:u,...c},m.createElement("img",{className:C.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.svg",alt:"Crossmint logo"}),W))}import*as I from"react";import{assertValidNFTCollectionViewProps as st,getNFTCollectionViewSrc as at}from"@crossmint/client-sdk-base";function Mt(t){st(t);let e=at(t,i);return I.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-collection-view"})}import*as N from"react";import{assertValidValidateNFTDetailProps as mt,getNFTDetailSrc as ct}from"@crossmint/client-sdk-base";function Ut(t){mt(t);let e=ct(t,i);return N.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-details"})}import lt,{useEffect as S,useState as T}from"react";import{crossmintPaymentService as pt,crossmintUiService as gt}from"@crossmint/client-sdk-base";function _t(t){let[e,l]=T(0),{getIframeUrl:p,listenToEvents:g,emitQueryParams:u}=pt(t),{listenToEvents:f}=gt({environment:t.environment}),[d]=T(p());return S(()=>{let n=g(s=>{var a;return(a=t.onEvent)==null?void 0:a.call(t,s.data)});return()=>{n&&n()}},[]),S(()=>{let n=f(s=>{let{type:a,payload:h}=s.data;switch(a){case"ui:height.changed":l(h.height);break;default:return}});return()=>{n&&n()}},[]),S(()=>{u({recipient:t.recipient,mintConfig:t.mintConfig,locale:t.locale,whPassThroughArgs:t.whPassThroughArgs})},[t.recipient,t.mintConfig,t.locale,t.whPassThroughArgs]),lt.createElement("iframe",{src:d,id:"iframe-crossmint-payment-element",role:"iframe-crossmint-payment-element",allow:"payment *",style:{border:"none !important",padding:"0px !important",width:"100% !important",minWidth:"100% !important",overflow:"hidden !important",display:"block !important",userSelect:"none",transform:"translate(0px) !important",opacity:"1",transition:"ease 0s, opacity 0.4s ease 0.1s",height:`${e}px`}})}import{CheckoutEvents as Yt,useCrossmintEvents as qt}from"@crossmint/client-sdk-base";export{Yt as CheckoutEvents,Mt as CrossmintNFTCollectionView,Ut as CrossmintNFTDetail,It as CrossmintPayButton,_t as CrossmintPaymentElement,qt as useCrossmintEvents};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/client-sdk-react-ui",
-    "version": "0.2.8-alpha.2",
+    "version": "1.0.0-alpha.0",
     "author": "Paella Labs Inc",
     "license": "Apache-2.0",
     "repository": "https://github.com/CrossMint/crossmint-client-sdk",
@@ -32,7 +32,7 @@
         "test": "jest"
     },
     "dependencies": {
-        "@crossmint/client-sdk-base": "^0.2.8-alpha.2",
+        "@crossmint/client-sdk-base": "^1.0.0-alpha.0",
         "react-jss": "10.9.2",
         "uuid": "^8.3.2"
     },
@@ -50,5 +50,5 @@
         "ts-jest": "^27.1.3",
         "ts-node-dev": "^1.1.8"
     },
-    "gitHead": "92bff3f34f737306ee3800a5d0786d83fb095de2"
+    "gitHead": "1c57e1315f8881b0878ee48bee8b7d6e61b81fd4"
 }

package/src/CrossmintPayButton.tsx

@@ -1,13 +1,11 @@
-import React, { FC, MouseEvent, useEffect, useMemo } from "react";
+import React, { MouseEvent, useEffect, useMemo } from "react";
 import { useState } from "react";
 
 import {
     clientNames,
     crossmintModalService,
     crossmintPayButtonService,
-    crossmintStatusService,
     mintingContractTypes,
-    onboardingRequestStatusResponse,
 } from "@crossmint/client-sdk-base";
 
 import { formatProps, useStyles } from "./styles";
@@ -19,50 +17,43 @@ const defaultMintConfig: any = {
     type: mintingContractTypes.CANDY_MACHINE,
 };
 
-export function CrossmintPayButton({
-    className,
-    disabled,
-    onClick,
-    style,
-    tabIndex,
-    theme = "dark",
-    mintTo,
-    emailTo,
-    listingId,
-    clientId,
-    auctionId,
-    hideMintOnInactiveClient = false,
-    showOverlay = true,
-    mintConfig = defaultMintConfig,
-    whPassThroughArgs,
-    environment,
-    paymentMethod,
-    preferredSigninMethod,
-    dismissOverlayOnClick,
-    prepay,
-    locale = "en-US",
-    currency = "usd",
-    successCallbackURL = "",
-    failureCallbackURL = "",
-    loginEmail = "",
-    ...props
-}: CrossmintPayButtonReactProps) {
+export function CrossmintPayButton(buttonProps: CrossmintPayButtonReactProps) {
+    const {
+        className,
+        disabled,
+        onClick,
+        style,
+        tabIndex,
+        theme = "dark",
+        mintTo,
+        emailTo,
+        listingId,
+        auctionId,
+        showOverlay = true,
+        mintConfig = defaultMintConfig,
+        whPassThroughArgs,
+        environment,
+        paymentMethod,
+        preferredSigninMethod,
+        dismissOverlayOnClick,
+        prepay,
+        locale = "en-US",
+        currency = "usd",
+        successCallbackURL = "",
+        failureCallbackURL = "",
+        loginEmail = "",
+        projectId,
+        ...props
+    } = buttonProps;
+
+    const collectionId = "clientId" in props ? props.clientId : props.collectionId;
+
     const [connecting, setConnecting] = useState(false);
-    const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
     const { isServerSideRendering } = useEnvironment();
 
-    const { fetchClientIntegration } = crossmintStatusService({
-        libVersion: LIB_VERSION,
-        clientId,
-        environment,
-        auctionId,
-        mintConfig,
-        setStatus,
-        clientName: clientNames.reactUi,
-    });
-
     const { connect } = crossmintModalService({
-        clientId,
+        clientId: collectionId,
+        projectId,
         showOverlay,
         dismissOverlayOnClick,
         setConnecting,
@@ -73,22 +64,16 @@ export function CrossmintPayButton({
         currency,
         successCallbackURL,
         failureCallbackURL,
-        loginEmail
+        loginEmail,
     });
 
-    const { getButtonText, shouldHideButton, handleClick } = crossmintPayButtonService({
+    const { getButtonText, handleClick } = crossmintPayButtonService({
         onClick,
         connecting,
         paymentMethod,
         locale,
     });
 
-    useEffect(() => {
-        if (hideMintOnInactiveClient) {
-            fetchClientIntegration();
-        }
-    }, [status]);
-
     const _handleClick = (event: MouseEvent<HTMLButtonElement>) =>
         handleClick(event, () => {
             connect(
@@ -113,10 +98,6 @@ export function CrossmintPayButton({
         );
     }, [connecting]);
 
-    if (shouldHideButton({ hideMintOnInactiveClient, status })) {
-        return null;
-    }
-
     return (
         <>
             {!isServerSideRendering && (

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./CrossmintPayButton";
-export * from "./CrossmintStatusButton";
 export * from "./CrossmintNFTCollectionView";
 export * from "./CrossmintNFTDetail";
 export * from "./CrossmintPaymentElement";

package/src/types.ts

@@ -1,12 +1,8 @@
 import { CSSProperties, MouseEvent } from "react";
-import { CrossmintPayButtonProps, BaseButtonProps } from "@crossmint/client-sdk-base";
 
-export interface CrossmintPayButtonReactProps extends CrossmintPayButtonProps {
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    style?: CSSProperties;
-}
+import { CrossmintPayButtonProps } from "@crossmint/client-sdk-base";
 
-export interface CrossmintStatusButtonReactProps extends BaseButtonProps {
+export type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     style?: CSSProperties;
-}
+};

package/src/version.ts

@@ -1 +1 @@
-export const LIB_VERSION = "0.2.8-alpha.2";
+export const LIB_VERSION = "1.0.0-alpha.0";

package/src/CrossmintStatusButton.tsx

@@ -1,85 +0,0 @@
-import React, { FC, MouseEventHandler, useEffect, useMemo, useState } from "react";
-
-import {
-    baseUrls,
-    clientNames,
-    crossmintStatusButtonService,
-    crossmintStatusService,
-    onboardingRequestStatusResponse,
-} from "@crossmint/client-sdk-base";
-
-import { formatProps, useStyles } from "./styles";
-import { CrossmintStatusButtonReactProps } from "./types";
-import useEnvironment from "./useEnvironment";
-import { LIB_VERSION } from "./version";
-
-export function CrossmintStatusButton({
-    className,
-    disabled,
-    onClick,
-    style,
-    tabIndex,
-    theme = "dark",
-    clientId,
-    auctionId,
-    platformId,
-    mintConfig,
-    environment,
-    locale = "en-US",
-    ...props
-}: CrossmintStatusButtonReactProps) {
-    const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
-    const { isServerSideRendering } = useEnvironment();
-
-    const { goToOnboarding, fetchClientIntegration } = crossmintStatusService({
-        libVersion: LIB_VERSION,
-        clientId,
-        environment,
-        platformId,
-        auctionId,
-        mintConfig,
-        setStatus,
-        clientName: clientNames.reactUi,
-    });
-    const { getButtonText, isButtonDisabled, handleClick } = crossmintStatusButtonService({ onClick, locale });
-
-    const _handleClick: MouseEventHandler<HTMLButtonElement> = (e) => handleClick(e, status, goToOnboarding);
-
-    useEffect(() => {
-        fetchClientIntegration();
-
-        const interval = setInterval(() => {
-            fetchClientIntegration();
-        }, 60 * 1000);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    const classes = useStyles(formatProps(theme));
-
-    const content = useMemo(() => {
-        return <span className={classes.crossmintParagraph}>{getButtonText(status)}</span>;
-    }, [status]);
-
-    return (
-        <>
-            {!isServerSideRendering && (
-                <button
-                    className={`${classes.crossmintButton} ${className || ""}`}
-                    disabled={isButtonDisabled(status)}
-                    onClick={_handleClick}
-                    style={{ ...style }}
-                    tabIndex={tabIndex}
-                    {...props}
-                >
-                    <img
-                        className={classes.crossmintImg}
-                        src={`${baseUrls.prod}/assets/crossmint/logo.svg`}
-                        alt="Crossmint logo"
-                    />
-                    {content}
-                </button>
-            )}
-        </>
-    );
-}