@crossmint/client-sdk-react-ui 0.1.4 → 0.1.5-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,10 +1,56 @@
1
1
  # `@crossmint/client-sdk-react-ui`
2
2
 
3
+ ## You can check the full documentation at [docs.crossmint.io](https://docs.crossmint.io/)
4
+
5
+ ---
6
+
7
+ ## Quick Setup
8
+
9
+ ### 1. Install
10
+
11
+ ```shell
12
+ yarn add @crossmint/client-sdk-react-ui
13
+ ```
14
+
15
+ ### 2. Set up
16
+
17
+ Go to the main file where your Candy Machine button lives. For example, Home.tsx.
18
+
19
+ There, just import the Pay with `CrossmintPayButton`, and add it in the UI.
20
+
21
+ **Important**: be sure to test that the Crossmint button is visible even if a user didn't connect their wallet! Else, your users without wallets won't be able to use it.
22
+
23
+ ```javascript
24
+ import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
25
+
26
+ export default function Index() {
27
+ return (
28
+ ...
29
+ // Place the button somewhere where it's visible even
30
+ // if the user hasn't connected their wallet
31
+ <CrossmintPayButton
32
+ collectionTitle="<TITLE_FOR_YOUR_COLLECTION>"
33
+ collectionDescription="<DESCRIPTION_OF_YOUR_COLLECTION>"
34
+ collectionPhoto="<OPT_URL_TO_PHOTO_COVER>"
35
+ clientId="<YOUR_CLIENT_ID>"
36
+ />
37
+ ...
38
+ );
39
+ }
40
+ ```
41
+
42
+ Finally, make sure you replace the following values in the CrossmintPayButton component:
43
+
44
+ - `<TITLE_FOR_YOUR_COLLECTION>`: Example: "My NFT collection"
45
+ - `<DESCRIPTION_OF_YOUR_COLLECTION>`: Example: "The most fun community of 999 generative art monkeys in Solana"
46
+ - `<OPT_URL_TO_PHOTO_COVER>`: Full URL to an image for your collection. Example: "https://i.picsum.photos/id/542/200/300.jpg?hmac=qD8M4ejDPlEc69pGT21BzB7CDiWOcElb_Ke7V8POjm8"
47
+ - `<YOUR_CLIENT_ID>`: This is the clientId you received after filling in [the onboarding form](https://www.crossmint.io/developers/)
48
+
3
49
  ## Components
4
50
 
5
51
  ### `CrossmintPayButton` _required_
6
52
 
7
- CrossmintPayButton is a button component that is used to trigger the opening of the CrossMint popup and modal overlay.
53
+ CrossmintPayButton is a button component that is used to trigger the opening of the Crossmint popup and modal overlay.
8
54
 
9
55
  | propName | default | required | description |
10
56
  | --------------------- | ----------- | -------- | -------------------------------------------------------------------------------------------- |
@@ -22,8 +68,6 @@ CrossmintPayButton is a button component that is used to trigger the opening of
22
68
 
23
69
  ### `CrossmintStatusButton`
24
70
 
25
- DESCRIPTION TBD
26
-
27
71
  | propName | default | required | description |
28
72
  | --------- | ----------- | -------- | --------------------------------------------------------------------- |
29
73
  | clientId | `undefined` | `true` | Your client integration identifier |
package/lib/index.cjs CHANGED
@@ -1 +1 @@
1
- var rt=Object.create;var C=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var at=Object.getOwnPropertyNames,P=Object.getOwnPropertySymbols,mt=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var G=(t,o,s)=>o in t?C(t,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[o]=s,c=(t,o)=>{for(var s in o||(o={}))L.call(o,s)&&G(t,s,o[s]);if(P)for(var s of P(o))W.call(o,s)&&G(t,s,o[s]);return t};var N=(t,o)=>{var s={};for(var e in t)L.call(t,e)&&o.indexOf(e)<0&&(s[e]=t[e]);if(t!=null&&P)for(var e of P(t))o.indexOf(e)<0&&W.call(t,e)&&(s[e]=t[e]);return s};var ut=(t,o)=>{for(var s in o)C(t,s,{get:o[s],enumerable:!0})},q=(t,o,s,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of at(o))!L.call(t,a)&&a!==s&&C(t,a,{get:()=>o[a],enumerable:!(e=it(o,a))||e.enumerable});return t};var D=(t,o,s)=>(s=t!=null?rt(mt(t)):{},q(o||!t||!t.__esModule?C(s,"default",{value:t,enumerable:!0}):s,t)),lt=t=>q(C({},"__esModule",{value:!0}),t);var dt={};ut(dt,{CrossmintPayButton:()=>gt,CrossmintStatusButton:()=>ft});module.exports=lt(dt);var r=D(require("react"),1),V=require("react"),i=require("@crossmint/client-sdk-base");var K=require("react-jss"),ct="#1e1e1e",j=t=>t==="light",w=t=>({buttonBgColor:j(t)?"white":ct,paragraphColor:j(t)?"black":"white"}),M=(0,K.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 E=typeof window<"u";var I="0.1.4-alpha.2";var pt={type:i.mintingContractTypes.CANDY_MACHINE},gt=F=>{var l=F,{className:t,disabled:o,onClick:s,style:e,tabIndex:a,theme:v="dark",collectionTitle:p,collectionDescription:g,collectionPhoto:f,mintTo:k,emailTo:O,listingId:T,clientId:_,auctionId:y,hideMintOnInactiveClient:m=!1,showOverlay:H=!0,mintConfig:B=pt,whPassThroughArgs:h,environment:x}=l,U=N(l,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment"]);let[d,S]=(0,V.useState)(!1),[R,Y]=(0,V.useState)(i.onboardingRequestStatusResponse.WAITING_SUBMISSION),{fetchClientIntegration:z}=(0,i.crossmintStatusService)({libVersion:I,clientId:_,environment:x,auctionId:y,mintConfig:B,setStatus:Y}),{connect:J}=(0,i.crossmintModalService)({clientId:_,showOverlay:H,setConnecting:S,libVersion:I,environment:x}),{checkProps:Q,getButtonText:X,shouldHideButton:Z}=(0,i.crossmintPayButtonService)(),[tt,st,ot]=Q({collectionTitle:p,collectionPhoto:f,collectionDescription:g});p=tt,g=st,f=ot,(0,r.useEffect)(()=>{m&&z()},[R]);let et=$=>{s&&s($),!d&&($.defaultPrevented||J(B,p,g,f,k,O,T,h))},A=M(w(v)),nt=(0,r.useMemo)(()=>r.default.createElement("p",{className:A.crossmintParagraph},X(d)),[d]);return Z({hideMintOnInactiveClient:m,status:R})?null:r.default.createElement(r.default.Fragment,null,E&&r.default.createElement("button",c({className:`${A.crossmintButton} ${t||""}`,disabled:o,onClick:et,style:c({},e),tabIndex:a},U),r.default.createElement("img",{className:A.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),nt))};var n=D(require("react"),1),u=require("@crossmint/client-sdk-base");var ft=_=>{var y=_,{className:t,disabled:o,onClick:s,style:e,tabIndex:a,theme:v="dark",clientId:p,auctionId:g,platformId:f,mintConfig:k,environment:O}=y,T=N(y,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[m,H]=(0,n.useState)(u.onboardingRequestStatusResponse.WAITING_SUBMISSION),{goToOnboarding:B,fetchClientIntegration:h,getButtonText:x,isButtonDisabled:U}=(0,u.crossmintStatusService)({libVersion:I,clientId:p,environment:O,platformId:f,auctionId:g,mintConfig:k,setStatus:H}),F=(0,n.useCallback)(S=>{if(s&&s(S),m===u.onboardingRequestStatusResponse.WAITING_SUBMISSION){B();return}},[m]);(0,n.useEffect)(()=>{h();let S=setInterval(()=>{h()},60*1e3);return()=>clearInterval(S)},[]);let l=M(w(v)),d=(0,n.useMemo)(()=>n.default.createElement("p",{className:l.crossmintParagraph},x(m)),[m]);return n.default.createElement(n.default.Fragment,null,E&&n.default.createElement("button",c({className:`${l.crossmintButton} ${t||""}`,disabled:U(m),onClick:F,style:c({},e),tabIndex:a},T),n.default.createElement("img",{className:l.crossmintImg,src:`${u.baseUrls.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),d))};0&&(module.exports={CrossmintPayButton,CrossmintStatusButton});
1
+ var it=Object.create;var S=Object.defineProperty;var at=Object.getOwnPropertyDescriptor;var mt=Object.getOwnPropertyNames,N=Object.getOwnPropertySymbols,ct=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var $=(t,s,o)=>s in t?S(t,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[s]=o,p=(t,s)=>{for(var o in s||(s={}))A.call(s,o)&&$(t,o,s[o]);if(N)for(var o of N(s))G.call(s,o)&&$(t,o,s[o]);return t};var P=(t,s)=>{var o={};for(var e in t)A.call(t,e)&&s.indexOf(e)<0&&(o[e]=t[e]);if(t!=null&&N)for(var e of N(t))s.indexOf(e)<0&&G.call(t,e)&&(o[e]=t[e]);return o};var lt=(t,s)=>{for(var o in s)S(t,o,{get:s[o],enumerable:!0})},q=(t,s,o,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let m of mt(s))!A.call(t,m)&&m!==o&&S(t,m,{get:()=>s[m],enumerable:!(e=at(s,m))||e.enumerable});return t};var D=(t,s,o)=>(o=t!=null?it(ct(t)):{},q(s||!t||!t.__esModule?S(o,"default",{value:t,enumerable:!0}):o,t)),ut=t=>q(S({},"__esModule",{value:!0}),t);var St={};lt(St,{CrossmintPayButton:()=>ft,CrossmintStatusButton:()=>dt});module.exports=ut(St);var i=D(require("react"),1),F=require("react"),n=require("@crossmint/client-sdk-base");var j=require("react-jss"),pt="#1e1e1e",W=t=>t==="light",w=t=>({buttonBgColor:W(t)?"white":pt,paragraphColor:W(t)?"black":"white"}),k=(0,j.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 b="0.1.5-alpha.1";var gt={type:n.mintingContractTypes.CANDY_MACHINE},ft=R=>{var x=R,{className:t,disabled:s,onClick:o,style:e,tabIndex:m,theme:v="dark",collectionTitle:g,collectionDescription:f,collectionPhoto:d,mintTo:E,emailTo:U,listingId:_,clientId:H,auctionId:y,hideMintOnInactiveClient:c=!1,showOverlay:O=!0,mintConfig:h=gt,whPassThroughArgs:B,environment:I}=x,T=P(x,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment"]);let[l,L]=(0,F.useState)(!1),[u,K]=(0,F.useState)(n.onboardingRequestStatusResponse.WAITING_SUBMISSION),{fetchClientIntegration:Y}=(0,n.crossmintStatusService)({libVersion:b,clientId:H,environment:I,auctionId:y,mintConfig:h,setStatus:K,clientName:n.clientNames.reactUi}),{connect:z}=(0,n.crossmintModalService)({clientId:H,showOverlay:O,setConnecting:L,libVersion:b,environment:I,clientName:n.clientNames.reactUi}),{checkProps:J,getButtonText:Q,shouldHideButton:X,handleClick:Z}=(0,n.crossmintPayButtonService)({onClick:o,connecting:l}),[tt,st,ot]=J({collectionTitle:g,collectionPhoto:d,collectionDescription:f});g=tt,f=st,d=ot,(0,i.useEffect)(()=>{c&&Y()},[u]);let et=rt=>Z(rt,()=>{z(h,g,f,d,E,U,_,B)}),V=k(w(v)),nt=(0,i.useMemo)(()=>i.default.createElement("p",{className:V.crossmintParagraph},Q(l)),[l]);return X({hideMintOnInactiveClient:c,status:u})?null:i.default.createElement(i.default.Fragment,null,M&&i.default.createElement("button",p({className:`${V.crossmintButton} ${t||""}`,disabled:s,onClick:et,style:p({},e),tabIndex:m},T),i.default.createElement("img",{className:V.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),nt))};var r=D(require("react"),1),a=require("@crossmint/client-sdk-base");var dt=H=>{var y=H,{className:t,disabled:s,onClick:o,style:e,tabIndex:m,theme:v="dark",clientId:g,auctionId:f,platformId:d,mintConfig:E,environment:U}=y,_=P(y,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[c,O]=(0,r.useState)(a.onboardingRequestStatusResponse.WAITING_SUBMISSION),{goToOnboarding:h,fetchClientIntegration:B}=(0,a.crossmintStatusService)({libVersion:b,clientId:g,environment:U,platformId:d,auctionId:f,mintConfig:E,setStatus:O,clientName:a.clientNames.reactUi}),{getButtonText:I,isButtonDisabled:T,handleClick:R}=(0,a.crossmintStatusButtonService)({onClick:o}),x=u=>R(u,c,h);(0,r.useEffect)(()=>{B();let u=setInterval(()=>{B()},60*1e3);return()=>clearInterval(u)},[]);let l=k(w(v)),L=(0,r.useMemo)(()=>r.default.createElement("p",{className:l.crossmintParagraph},I(c)),[c]);return r.default.createElement(r.default.Fragment,null,M&&r.default.createElement("button",p({className:`${l.crossmintButton} ${t||""}`,disabled:T(c),onClick:x,style:p({},e),tabIndex:m},_),r.default.createElement("img",{className:l.crossmintImg,src:`${a.baseUrls.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),L))};0&&(module.exports={CrossmintPayButton,CrossmintStatusButton});
package/lib/index.js CHANGED
@@ -1 +1 @@
1
- var st=Object.defineProperty;var B=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(B)for(var s of B(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&&B)for(var e of B(t))o.indexOf(e)<0&&R.call(t,e)&&(s[e]=t[e]);return s};import d,{useEffect as nt,useMemo as rt}from"react";import{useState as G}from"react";import{crossmintModalService as it,crossmintPayButtonService as at,crossmintStatusService as mt,mintingContractTypes as ut,onboardingRequestStatusResponse as lt}from"@crossmint/client-sdk-base";import{createUseStyles as ot}from"react-jss";var et="#1e1e1e",$=t=>t==="light",x=t=>({buttonBgColor:$(t)?"white":et,paragraphColor:$(t)?"black":"white"}),P=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 N=typeof window<"u";var f="0.1.4-alpha.2";var ct={type:ut.CANDY_MACHINE},Ot=U=>{var r=U,{className:t,disabled:o,onClick:s,style:e,tabIndex:w,theme:M="dark",collectionTitle:a,collectionDescription:m,collectionPhoto:u,mintTo:E,emailTo:v,listingId:k,clientId:O,auctionId:C,hideMintOnInactiveClient:n=!1,showOverlay:T=!0,mintConfig:b=ct,whPassThroughArgs:I,environment:y}=r,_=h(r,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment"]);let[l,c]=G(!1),[A,q]=G(lt.WAITING_SUBMISSION),{fetchClientIntegration:D}=mt({libVersion:f,clientId:O,environment:y,auctionId:C,mintConfig:b,setStatus:q}),{connect:j}=it({clientId:O,showOverlay:T,setConnecting:c,libVersion:f,environment:y}),{checkProps:K,getButtonText:Y,shouldHideButton:z}=at(),[J,Q,X]=K({collectionTitle:a,collectionPhoto:u,collectionDescription:m});a=J,m=Q,u=X,nt(()=>{n&&D()},[A]);let Z=L=>{s&&s(L),!l&&(L.defaultPrevented||j(b,a,m,u,E,v,k,I))},H=P(x(M)),tt=rt(()=>d.createElement("p",{className:H.crossmintParagraph},Y(l)),[l]);return z({hideMintOnInactiveClient:n,status:A})?null:d.createElement(d.Fragment,null,N&&d.createElement("button",i({className:`${H.crossmintButton} ${t||""}`,disabled:o,onClick:Z,style:i({},e),tabIndex:w},_),d.createElement("img",{className:H.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),tt))};import S,{useCallback as pt,useEffect as gt,useMemo as ft,useState as dt}from"react";import{baseUrls as St,crossmintStatusService as Ct,onboardingRequestStatusResponse as W}from"@crossmint/client-sdk-base";var Rt=O=>{var C=O,{className:t,disabled:o,onClick:s,style:e,tabIndex:w,theme:M="dark",clientId:a,auctionId:m,platformId:u,mintConfig:E,environment:v}=C,k=h(C,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[n,T]=dt(W.WAITING_SUBMISSION),{goToOnboarding:b,fetchClientIntegration:I,getButtonText:y,isButtonDisabled:_}=Ct({libVersion:f,clientId:a,environment:v,platformId:u,auctionId:m,mintConfig:E,setStatus:T}),U=pt(c=>{if(s&&s(c),n===W.WAITING_SUBMISSION){b();return}},[n]);gt(()=>{I();let c=setInterval(()=>{I()},60*1e3);return()=>clearInterval(c)},[]);let r=P(x(M)),l=ft(()=>S.createElement("p",{className:r.crossmintParagraph},y(n)),[n]);return S.createElement(S.Fragment,null,N&&S.createElement("button",i({className:`${r.crossmintButton} ${t||""}`,disabled:_(n),onClick:U,style:i({},e),tabIndex:w},k),S.createElement("img",{className:r.crossmintImg,src:`${St.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),l))};export{Ot as CrossmintPayButton,Rt as CrossmintStatusButton};
1
+ var ot=Object.defineProperty;var B=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var V=(t,o,s)=>o in t?ot(t,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[o]=s,a=(t,o)=>{for(var s in o||(o={}))A.call(o,s)&&V(t,s,o[s]);if(B)for(var s of B(o))F.call(o,s)&&V(t,s,o[s]);return t};var I=(t,o)=>{var s={};for(var e in t)A.call(t,e)&&o.indexOf(e)<0&&(s[e]=t[e]);if(t!=null&&B)for(var e of B(t))o.indexOf(e)<0&&F.call(t,e)&&(s[e]=t[e]);return s};import f,{useEffect as rt,useMemo as it}from"react";import{useState as $}from"react";import{crossmintModalService as at,crossmintPayButtonService as mt,crossmintStatusService as ct,clientNames as G,mintingContractTypes as lt,onboardingRequestStatusResponse as ut}from"@crossmint/client-sdk-base";import{createUseStyles as et}from"react-jss";var nt="#1e1e1e",R=t=>t==="light",x=t=>({buttonBgColor:R(t)?"white":nt,paragraphColor:R(t)?"black":"white"}),N=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"}});var P=typeof window<"u";var g="0.1.5-alpha.1";var pt={type:lt.CANDY_MACHINE},Ot=L=>{var h=L,{className:t,disabled:o,onClick:s,style:e,tabIndex:w,theme:k="dark",collectionTitle:m,collectionDescription:c,collectionPhoto:l,mintTo:M,emailTo:v,listingId:E,clientId:U,auctionId:S,hideMintOnInactiveClient:n=!1,showOverlay:_=!0,mintConfig:C=pt,whPassThroughArgs:b,environment:y}=h,H=I(h,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment"]);let[r,O]=$(!1),[i,q]=$(ut.WAITING_SUBMISSION),{fetchClientIntegration:D}=ct({libVersion:g,clientId:U,environment:y,auctionId:S,mintConfig:C,setStatus:q,clientName:G.reactUi}),{connect:W}=at({clientId:U,showOverlay:_,setConnecting:O,libVersion:g,environment:y,clientName:G.reactUi}),{checkProps:j,getButtonText:K,shouldHideButton:Y,handleClick:z}=mt({onClick:s,connecting:r}),[J,Q,X]=j({collectionTitle:m,collectionPhoto:l,collectionDescription:c});m=J,c=Q,l=X,rt(()=>{n&&D()},[i]);let Z=st=>z(st,()=>{W(C,m,c,l,M,v,E,b)}),T=N(x(k)),tt=it(()=>f.createElement("p",{className:T.crossmintParagraph},K(r)),[r]);return Y({hideMintOnInactiveClient:n,status:i})?null:f.createElement(f.Fragment,null,P&&f.createElement("button",a({className:`${T.crossmintButton} ${t||""}`,disabled:o,onClick:Z,style:a({},e),tabIndex:w},H),f.createElement("img",{className:T.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),tt))};import d,{useEffect as gt,useMemo as ft,useState as dt}from"react";import{baseUrls as St,clientNames as Ct,crossmintStatusButtonService as bt,crossmintStatusService as yt,onboardingRequestStatusResponse as ht}from"@crossmint/client-sdk-base";var Dt=U=>{var S=U,{className:t,disabled:o,onClick:s,style:e,tabIndex:w,theme:k="dark",clientId:m,auctionId:c,platformId:l,mintConfig:M,environment:v}=S,E=I(S,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[n,_]=dt(ht.WAITING_SUBMISSION),{goToOnboarding:C,fetchClientIntegration:b}=yt({libVersion:g,clientId:m,environment:v,platformId:l,auctionId:c,mintConfig:M,setStatus:_,clientName:Ct.reactUi}),{getButtonText:y,isButtonDisabled:H,handleClick:L}=bt({onClick:s}),h=i=>L(i,n,C);gt(()=>{b();let i=setInterval(()=>{b()},60*1e3);return()=>clearInterval(i)},[]);let r=N(x(k)),O=ft(()=>d.createElement("p",{className:r.crossmintParagraph},y(n)),[n]);return d.createElement(d.Fragment,null,P&&d.createElement("button",a({className:`${r.crossmintButton} ${t||""}`,disabled:H(n),onClick:h,style:a({},e),tabIndex:w},E),d.createElement("img",{className:r.crossmintImg,src:`${St.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),O))};export{Ot as CrossmintPayButton,Dt as CrossmintStatusButton};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crossmint/client-sdk-react-ui",
3
- "version": "0.1.4",
3
+ "version": "0.1.5-alpha.2",
4
4
  "author": "Paella Labs Inc",
5
5
  "license": "Apache-2.0",
6
6
  "repository": "https://github.com/CrossMint/crossmint-client-sdk",
@@ -32,7 +32,7 @@
32
32
  "test": "jest"
33
33
  },
34
34
  "dependencies": {
35
- "@crossmint/client-sdk-base": "^0.1.0",
35
+ "@crossmint/client-sdk-base": "^0.1.1-alpha.2",
36
36
  "react": "^17.0.2",
37
37
  "react-dom": "^17.0.2",
38
38
  "react-jss": "^10.9.0",
@@ -50,5 +50,5 @@
50
50
  "ts-jest": "^27.1.3",
51
51
  "ts-node-dev": "^1.1.8"
52
52
  },
53
- "gitHead": "e66aa4bd223b2c4a5879a2db51488c9ac1dbaec1"
53
+ "gitHead": "ef4bf2bf0f19f84b56c3741788e1c42ac09a4f27"
54
54
  }
@@ -5,6 +5,7 @@ import {
5
5
  crossmintModalService,
6
6
  crossmintPayButtonService,
7
7
  crossmintStatusService,
8
+ clientNames,
8
9
  mintingContractTypes,
9
10
  onboardingRequestStatusResponse,
10
11
  } from "@crossmint/client-sdk-base";
@@ -50,6 +51,7 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
50
51
  auctionId,
51
52
  mintConfig,
52
53
  setStatus,
54
+ clientName: clientNames.reactUi,
53
55
  });
54
56
 
55
57
  const { connect } = crossmintModalService({
@@ -58,9 +60,13 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
58
60
  setConnecting,
59
61
  libVersion: LIB_VERSION,
60
62
  environment,
63
+ clientName: clientNames.reactUi,
61
64
  });
62
65
 
63
- const { checkProps, getButtonText, shouldHideButton } = crossmintPayButtonService();
66
+ const { checkProps, getButtonText, shouldHideButton, handleClick } = crossmintPayButtonService({
67
+ onClick,
68
+ connecting,
69
+ });
64
70
 
65
71
  const [newCollectionTitle, newCollectionDescription, newCollectionPhoto] = checkProps({
66
72
  collectionTitle,
@@ -77,12 +83,8 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
77
83
  }
78
84
  }, [status]);
79
85
 
80
- const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
81
- if (onClick) onClick(event);
82
-
83
- if (connecting) return;
84
-
85
- if (!event.defaultPrevented) {
86
+ const _handleClick = (event: MouseEvent<HTMLButtonElement>) =>
87
+ handleClick(event, () => {
86
88
  connect(
87
89
  mintConfig,
88
90
  collectionTitle,
@@ -93,8 +95,7 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
93
95
  listingId,
94
96
  whPassThroughArgs
95
97
  );
96
- }
97
- };
98
+ });
98
99
 
99
100
  const classes = useStyles(formatProps(theme));
100
101
 
@@ -112,7 +113,7 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
112
113
  <button
113
114
  className={`${classes.crossmintButton} ${className || ""}`}
114
115
  disabled={disabled}
115
- onClick={handleClick}
116
+ onClick={_handleClick}
116
117
  style={{ ...style }}
117
118
  tabIndex={tabIndex}
118
119
  {...props}
@@ -1,6 +1,12 @@
1
1
  import React, { FC, MouseEventHandler, useCallback, useEffect, useMemo, useState } from "react";
2
2
 
3
- import { baseUrls, crossmintStatusService, onboardingRequestStatusResponse } from "@crossmint/client-sdk-base";
3
+ import {
4
+ baseUrls,
5
+ clientNames,
6
+ crossmintStatusButtonService,
7
+ crossmintStatusService,
8
+ onboardingRequestStatusResponse,
9
+ } from "@crossmint/client-sdk-base";
4
10
 
5
11
  import { formatProps, useStyles } from "./styles";
6
12
  import { CrossmintStatusButtonReactProps } from "./types";
@@ -23,7 +29,7 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps> = ({
23
29
  }) => {
24
30
  const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
25
31
 
26
- const { goToOnboarding, fetchClientIntegration, getButtonText, isButtonDisabled } = crossmintStatusService({
32
+ const { goToOnboarding, fetchClientIntegration } = crossmintStatusService({
27
33
  libVersion: LIB_VERSION,
28
34
  clientId,
29
35
  environment,
@@ -31,19 +37,11 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps> = ({
31
37
  auctionId,
32
38
  mintConfig,
33
39
  setStatus,
40
+ clientName: clientNames.reactUi,
34
41
  });
42
+ const { getButtonText, isButtonDisabled, handleClick } = crossmintStatusButtonService({ onClick });
35
43
 
36
- const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
37
- (event) => {
38
- if (onClick) onClick(event);
39
-
40
- if (status === onboardingRequestStatusResponse.WAITING_SUBMISSION) {
41
- goToOnboarding();
42
- return;
43
- }
44
- },
45
- [status]
46
- );
44
+ const _handleClick: MouseEventHandler<HTMLButtonElement> = (e) => handleClick(e, status, goToOnboarding);
47
45
 
48
46
  useEffect(() => {
49
47
  fetchClientIntegration();
@@ -67,7 +65,7 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps> = ({
67
65
  <button
68
66
  className={`${classes.crossmintButton} ${className || ""}`}
69
67
  disabled={isButtonDisabled(status)}
70
- onClick={handleClick}
68
+ onClick={_handleClick}
71
69
  style={{ ...style }}
72
70
  tabIndex={tabIndex}
73
71
  {...props}
package/src/version.ts CHANGED
@@ -1 +1 @@
1
- export const LIB_VERSION = "0.1.4";
1
+ export const LIB_VERSION = "0.1.5-alpha.2";