@crossmint/client-sdk-react-ui 0.1.5-alpha.1 → 0.1.6-alpha.0

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 it=Object.create;var C=Object.defineProperty;var at=Object.getOwnPropertyDescriptor;var mt=Object.getOwnPropertyNames,x=Object.getOwnPropertySymbols,lt=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var $=(t,s,o)=>s in t?C(t,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[s]=o,u=(t,s)=>{for(var o in s||(s={}))L.call(s,o)&&$(t,o,s[o]);if(x)for(var o of x(s))G.call(s,o)&&$(t,o,s[o]);return t};var P=(t,s)=>{var o={};for(var e in t)L.call(t,e)&&s.indexOf(e)<0&&(o[e]=t[e]);if(t!=null&&x)for(var e of x(t))s.indexOf(e)<0&&G.call(t,e)&&(o[e]=t[e]);return o};var ct=(t,s)=>{for(var o in s)C(t,o,{get:s[o],enumerable:!0})},W=(t,s,o,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let a of mt(s))!L.call(t,a)&&a!==o&&C(t,a,{get:()=>s[a],enumerable:!(e=at(s,a))||e.enumerable});return t};var q=(t,s,o)=>(o=t!=null?it(lt(t)):{},W(s||!t||!t.__esModule?C(o,"default",{value:t,enumerable:!0}):o,t)),ut=t=>W(C({},"__esModule",{value:!0}),t);var dt={};ct(dt,{CrossmintPayButton:()=>ft,CrossmintStatusButton:()=>St});module.exports=ut(dt);var i=q(require("react"),1),V=require("react"),r=require("@crossmint/client-sdk-base");var j=require("react-jss"),pt="#1e1e1e",D=t=>t==="light",w=t=>({buttonBgColor:D(t)?"white":pt,paragraphColor:D(t)?"black":"white"}),M=(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 E=typeof window<"u";var I="0.1.5-alpha.0";var gt={type:r.mintingContractTypes.CANDY_MACHINE},ft=F=>{var c=F,{className:t,disabled:s,onClick:o,style:e,tabIndex:a,theme:k="dark",collectionTitle:p,collectionDescription:g,collectionPhoto:f,mintTo:v,emailTo:U,listingId:_,clientId:O,auctionId:y,hideMintOnInactiveClient:l=!1,showOverlay:T=!0,mintConfig:B=gt,whPassThroughArgs:h,environment:N}=c,H=P(c,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment"]);let[S,d]=(0,V.useState)(!1),[R,K]=(0,V.useState)(r.onboardingRequestStatusResponse.WAITING_SUBMISSION),{fetchClientIntegration:Y}=(0,r.crossmintStatusService)({libVersion:I,clientId:O,environment:N,auctionId:y,mintConfig:B,setStatus:K,clientName:r.clientNames.reactUi}),{connect:z}=(0,r.crossmintModalService)({clientId:O,showOverlay:T,setConnecting:d,libVersion:I,environment:N,clientName:r.clientNames.reactUi}),{checkProps:J,getButtonText:Q,shouldHideButton:X,handleClick:Z}=(0,r.crossmintPayButtonService)({onClick:o,connecting:S}),[tt,st,ot]=J({collectionTitle:p,collectionPhoto:f,collectionDescription:g});p=tt,g=st,f=ot,(0,i.useEffect)(()=>{l&&Y()},[R]);let et=rt=>Z(rt,()=>{z(B,p,g,f,v,U,_,h)}),A=M(w(k)),nt=(0,i.useMemo)(()=>i.default.createElement("p",{className:A.crossmintParagraph},Q(S)),[S]);return X({hideMintOnInactiveClient:l,status:R})?null:i.default.createElement(i.default.Fragment,null,E&&i.default.createElement("button",u({className:`${A.crossmintButton} ${t||""}`,disabled:s,onClick:et,style:u({},e),tabIndex:a},H),i.default.createElement("img",{className:A.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),nt))};var n=q(require("react"),1),m=require("@crossmint/client-sdk-base");var St=O=>{var y=O,{className:t,disabled:s,onClick:o,style:e,tabIndex:a,theme:k="dark",clientId:p,auctionId:g,platformId:f,mintConfig:v,environment:U}=y,_=P(y,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[l,T]=(0,n.useState)(m.onboardingRequestStatusResponse.WAITING_SUBMISSION),{goToOnboarding:B,fetchClientIntegration:h,getButtonText:N,isButtonDisabled:H}=(0,m.crossmintStatusService)({libVersion:I,clientId:p,environment:U,platformId:f,auctionId:g,mintConfig:v,setStatus:T,clientName:m.clientNames.reactUi}),F=(0,n.useCallback)(d=>{if(o&&o(d),l===m.onboardingRequestStatusResponse.WAITING_SUBMISSION){B();return}},[l]);(0,n.useEffect)(()=>{h();let d=setInterval(()=>{h()},60*1e3);return()=>clearInterval(d)},[]);let c=M(w(k)),S=(0,n.useMemo)(()=>n.default.createElement("p",{className:c.crossmintParagraph},N(l)),[l]);return n.default.createElement(n.default.Fragment,null,E&&n.default.createElement("button",u({className:`${c.crossmintButton} ${t||""}`,disabled:H(l),onClick:F,style:u({},e),tabIndex:a},_),n.default.createElement("img",{className:c.crossmintImg,src:`${m.baseUrls.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),S))};0&&(module.exports={CrossmintPayButton,CrossmintStatusButton});
1
+ var at=Object.create;var C=Object.defineProperty;var mt=Object.getOwnPropertyDescriptor;var ct=Object.getOwnPropertyNames,P=Object.getOwnPropertySymbols,lt=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var G=(t,s,o)=>s in t?C(t,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[s]=o,u=(t,s)=>{for(var o in s||(s={}))A.call(s,o)&&G(t,o,s[o]);if(P)for(var o of P(s))q.call(s,o)&&G(t,o,s[o]);return t};var w=(t,s)=>{var o={};for(var e in t)A.call(t,e)&&s.indexOf(e)<0&&(o[e]=t[e]);if(t!=null&&P)for(var e of P(t))s.indexOf(e)<0&&q.call(t,e)&&(o[e]=t[e]);return o};var ut=(t,s)=>{for(var o in s)C(t,o,{get:s[o],enumerable:!0})},D=(t,s,o,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let m of ct(s))!A.call(t,m)&&m!==o&&C(t,m,{get:()=>s[m],enumerable:!(e=mt(s,m))||e.enumerable});return t};var W=(t,s,o)=>(o=t!=null?at(lt(t)):{},D(s||!t||!t.__esModule?C(o,"default",{value:t,enumerable:!0}):o,t)),pt=t=>D(C({},"__esModule",{value:!0}),t);var Ct={};ut(Ct,{CrossmintPayButton:()=>dt,CrossmintStatusButton:()=>St});module.exports=pt(Ct);var i=W(require("react"),1),F=require("react"),n=require("@crossmint/client-sdk-base");var K=require("react-jss"),gt="#1e1e1e",j=t=>t==="light",k=t=>({buttonBgColor:j(t)?"white":gt,paragraphColor:j(t)?"black":"white"}),v=(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 y="0.1.5";var ft={type:n.mintingContractTypes.CANDY_MACHINE},dt=R=>{var l=R,{className:t,disabled:s,onClick:o,style:e,tabIndex:m,theme:M="dark",collectionTitle:p,collectionDescription:g,collectionPhoto:f,mintTo:U,emailTo:_,listingId:H,clientId:O,auctionId:B,hideMintOnInactiveClient:c=!1,showOverlay:T=!0,mintConfig:I=ft,whPassThroughArgs:h,environment:x,paymentMethod:N}=l,L=w(l,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment","paymentMethod"]);let[d,S]=(0,F.useState)(!1),[$,Y]=(0,F.useState)(n.onboardingRequestStatusResponse.WAITING_SUBMISSION),{fetchClientIntegration:z}=(0,n.crossmintStatusService)({libVersion:y,clientId:O,environment:x,auctionId:B,mintConfig:I,setStatus:Y,clientName:n.clientNames.reactUi}),{connect:J}=(0,n.crossmintModalService)({clientId:O,showOverlay:T,setConnecting:S,libVersion:y,environment:x,clientName:n.clientNames.reactUi}),{checkProps:Q,getButtonText:X,shouldHideButton:Z,handleClick:tt}=(0,n.crossmintPayButtonService)({onClick:o,connecting:d,paymentMethod:N}),[st,ot,et]=Q({collectionTitle:p,collectionPhoto:f,collectionDescription:g});p=st,g=ot,f=et,(0,i.useEffect)(()=>{c&&z()},[$]);let nt=it=>tt(it,()=>{J(I,p,g,f,U,_,H,h,N)}),V=v(k(M)),rt=(0,i.useMemo)(()=>i.default.createElement("p",{className:V.crossmintParagraph,role:"button-paragraph"},X(d)),[d]);return Z({hideMintOnInactiveClient:c,status:$})?null:i.default.createElement(i.default.Fragment,null,E&&i.default.createElement("button",u({className:`${V.crossmintButton} ${t||""}`,disabled:s,onClick:nt,style:u({},e),tabIndex:m},L),i.default.createElement("img",{className:V.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),rt))};var r=W(require("react"),1),a=require("@crossmint/client-sdk-base");var St=O=>{var B=O,{className:t,disabled:s,onClick:o,style:e,tabIndex:m,theme:M="dark",clientId:p,auctionId:g,platformId:f,mintConfig:U,environment:_}=B,H=w(B,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[c,T]=(0,r.useState)(a.onboardingRequestStatusResponse.WAITING_SUBMISSION),{goToOnboarding:I,fetchClientIntegration:h}=(0,a.crossmintStatusService)({libVersion:y,clientId:p,environment:_,platformId:f,auctionId:g,mintConfig:U,setStatus:T,clientName:a.clientNames.reactUi}),{getButtonText:x,isButtonDisabled:N,handleClick:L}=(0,a.crossmintStatusButtonService)({onClick:o}),R=S=>L(S,c,I);(0,r.useEffect)(()=>{h();let S=setInterval(()=>{h()},60*1e3);return()=>clearInterval(S)},[]);let l=v(k(M)),d=(0,r.useMemo)(()=>r.default.createElement("p",{className:l.crossmintParagraph},x(c)),[c]);return r.default.createElement(r.default.Fragment,null,E&&r.default.createElement("button",u({className:`${l.crossmintButton} ${t||""}`,disabled:N(c),onClick:R,style:u({},e),tabIndex:m},H),r.default.createElement("img",{className:l.crossmintImg,src:`${a.baseUrls.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),d))};0&&(module.exports={CrossmintPayButton,CrossmintStatusButton});
package/lib/index.js CHANGED
@@ -1 +1 @@
1
- var et=Object.defineProperty;var B=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var L=(t,o,s)=>o in t?et(t,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[o]=s,i=(t,o)=>{for(var s in o||(o={}))V.call(o,s)&&L(t,s,o[s]);if(B)for(var s of B(o))F.call(o,s)&&L(t,s,o[s]);return t};var h=(t,o)=>{var s={};for(var e in t)V.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 S,{useEffect as it,useMemo as at}from"react";import{useState as $}from"react";import{crossmintModalService as mt,crossmintPayButtonService as lt,crossmintStatusService as ct,clientNames as G,mintingContractTypes as ut,onboardingRequestStatusResponse as pt}from"@crossmint/client-sdk-base";import{createUseStyles as nt}from"react-jss";var rt="#1e1e1e",R=t=>t==="light",N=t=>({buttonBgColor:R(t)?"white":rt,paragraphColor:R(t)?"black":"white"}),x=nt({"@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 f="0.1.5-alpha.0";var gt={type:ut.CANDY_MACHINE},Tt=H=>{var r=H,{className:t,disabled:o,onClick:s,style:e,tabIndex:w,theme:M="dark",collectionTitle:a,collectionDescription:m,collectionPhoto:l,mintTo:E,emailTo:k,listingId:v,clientId:U,auctionId:C,hideMintOnInactiveClient:n=!1,showOverlay:_=!0,mintConfig:b=gt,whPassThroughArgs:I,environment:y}=r,O=h(r,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment"]);let[c,u]=$(!1),[A,q]=$(pt.WAITING_SUBMISSION),{fetchClientIntegration:D}=ct({libVersion:f,clientId:U,environment:y,auctionId:C,mintConfig:b,setStatus:q,clientName:G.reactUi}),{connect:j}=mt({clientId:U,showOverlay:_,setConnecting:u,libVersion:f,environment:y,clientName:G.reactUi}),{checkProps:K,getButtonText:Y,shouldHideButton:z,handleClick:J}=lt({onClick:s,connecting:c}),[Q,X,Z]=K({collectionTitle:a,collectionPhoto:l,collectionDescription:m});a=Q,m=X,l=Z,it(()=>{n&&D()},[A]);let tt=ot=>J(ot,()=>{j(b,a,m,l,E,k,v,I)}),T=x(N(M)),st=at(()=>S.createElement("p",{className:T.crossmintParagraph},Y(c)),[c]);return z({hideMintOnInactiveClient:n,status:A})?null:S.createElement(S.Fragment,null,P&&S.createElement("button",i({className:`${T.crossmintButton} ${t||""}`,disabled:o,onClick:tt,style:i({},e),tabIndex:w},O),S.createElement("img",{className:T.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),st))};import d,{useCallback as ft,useEffect as St,useMemo as dt,useState as Ct}from"react";import{baseUrls as bt,crossmintStatusService as It,onboardingRequestStatusResponse as W,clientNames as yt}from"@crossmint/client-sdk-base";var Wt=U=>{var C=U,{className:t,disabled:o,onClick:s,style:e,tabIndex:w,theme:M="dark",clientId:a,auctionId:m,platformId:l,mintConfig:E,environment:k}=C,v=h(C,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[n,_]=Ct(W.WAITING_SUBMISSION),{goToOnboarding:b,fetchClientIntegration:I,getButtonText:y,isButtonDisabled:O}=It({libVersion:f,clientId:a,environment:k,platformId:l,auctionId:m,mintConfig:E,setStatus:_,clientName:yt.reactUi}),H=ft(u=>{if(s&&s(u),n===W.WAITING_SUBMISSION){b();return}},[n]);St(()=>{I();let u=setInterval(()=>{I()},60*1e3);return()=>clearInterval(u)},[]);let r=x(N(M)),c=dt(()=>d.createElement("p",{className:r.crossmintParagraph},y(n)),[n]);return d.createElement(d.Fragment,null,P&&d.createElement("button",i({className:`${r.crossmintButton} ${t||""}`,disabled:O(n),onClick:H,style:i({},e),tabIndex:w},v),d.createElement("img",{className:r.crossmintImg,src:`${bt.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),c))};export{Tt as CrossmintPayButton,Wt as CrossmintStatusButton};
1
+ var et=Object.defineProperty;var h=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var A=(t,o,s)=>o in t?et(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)&&A(t,s,o[s]);if(h)for(var s of h(o))R.call(o,s)&&A(t,s,o[s]);return t};var x=(t,o)=>{var s={};for(var e in t)F.call(t,e)&&o.indexOf(e)<0&&(s[e]=t[e]);if(t!=null&&h)for(var e of h(t))o.indexOf(e)<0&&R.call(t,e)&&(s[e]=t[e]);return s};import d,{useEffect as it,useMemo as at}from"react";import{useState as G}from"react";import{clientNames as q,crossmintModalService as mt,crossmintPayButtonService as ct,crossmintStatusService as lt,mintingContractTypes as ut,onboardingRequestStatusResponse as pt}from"@crossmint/client-sdk-base";import{createUseStyles as nt}from"react-jss";var rt="#1e1e1e",$=t=>t==="light",N=t=>({buttonBgColor:$(t)?"white":rt,paragraphColor:$(t)?"black":"white"}),P=nt({"@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 w=typeof window<"u";var f="0.1.5";var gt={type:ut.CANDY_MACHINE},Tt=L=>{var r=L,{className:t,disabled:o,onClick:s,style:e,tabIndex:k,theme:v="dark",collectionTitle:a,collectionDescription:m,collectionPhoto:c,mintTo:E,emailTo:M,listingId:U,clientId:_,auctionId:C,hideMintOnInactiveClient:n=!1,showOverlay:H=!0,mintConfig:b=gt,whPassThroughArgs:y,environment:B,paymentMethod:I}=r,O=x(r,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment","paymentMethod"]);let[l,u]=G(!1),[V,D]=G(pt.WAITING_SUBMISSION),{fetchClientIntegration:W}=lt({libVersion:f,clientId:_,environment:B,auctionId:C,mintConfig:b,setStatus:D,clientName:q.reactUi}),{connect:j}=mt({clientId:_,showOverlay:H,setConnecting:u,libVersion:f,environment:B,clientName:q.reactUi}),{checkProps:K,getButtonText:Y,shouldHideButton:z,handleClick:J}=ct({onClick:s,connecting:l,paymentMethod:I}),[Q,X,Z]=K({collectionTitle:a,collectionPhoto:c,collectionDescription:m});a=Q,m=X,c=Z,it(()=>{n&&W()},[V]);let tt=ot=>J(ot,()=>{j(b,a,m,c,E,M,U,y,I)}),T=P(N(v)),st=at(()=>d.createElement("p",{className:T.crossmintParagraph,role:"button-paragraph"},Y(l)),[l]);return z({hideMintOnInactiveClient:n,status:V})?null:d.createElement(d.Fragment,null,w&&d.createElement("button",i({className:`${T.crossmintButton} ${t||""}`,disabled:o,onClick:tt,style:i({},e),tabIndex:k},O),d.createElement("img",{className:T.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),st))};import S,{useEffect as ft,useMemo as dt,useState as St}from"react";import{baseUrls as Ct,clientNames as bt,crossmintStatusButtonService as yt,crossmintStatusService as Bt,onboardingRequestStatusResponse as It}from"@crossmint/client-sdk-base";var Wt=_=>{var C=_,{className:t,disabled:o,onClick:s,style:e,tabIndex:k,theme:v="dark",clientId:a,auctionId:m,platformId:c,mintConfig:E,environment:M}=C,U=x(C,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[n,H]=St(It.WAITING_SUBMISSION),{goToOnboarding:b,fetchClientIntegration:y}=Bt({libVersion:f,clientId:a,environment:M,platformId:c,auctionId:m,mintConfig:E,setStatus:H,clientName:bt.reactUi}),{getButtonText:B,isButtonDisabled:I,handleClick:O}=yt({onClick:s}),L=u=>O(u,n,b);ft(()=>{y();let u=setInterval(()=>{y()},60*1e3);return()=>clearInterval(u)},[]);let r=P(N(v)),l=dt(()=>S.createElement("p",{className:r.crossmintParagraph},B(n)),[n]);return S.createElement(S.Fragment,null,w&&S.createElement("button",i({className:`${r.crossmintButton} ${t||""}`,disabled:I(n),onClick:L,style:i({},e),tabIndex:k},U),S.createElement("img",{className:r.crossmintImg,src:`${Ct.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),l))};export{Tt as CrossmintPayButton,Wt as CrossmintStatusButton};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crossmint/client-sdk-react-ui",
3
- "version": "0.1.5-alpha.1",
3
+ "version": "0.1.6-alpha.0",
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.1-alpha.1",
35
+ "@crossmint/client-sdk-base": "^0.1.2-alpha.0",
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": "e325c7f7dfa9cc75e8262e6818aed6a1d6c60960"
53
+ "gitHead": "69d064ee450517bad64b068bf5883fadc83c8bf6"
54
54
  }
@@ -2,10 +2,10 @@ import React, { FC, MouseEvent, useEffect, useMemo } from "react";
2
2
  import { useState } from "react";
3
3
 
4
4
  import {
5
+ clientNames,
5
6
  crossmintModalService,
6
7
  crossmintPayButtonService,
7
8
  crossmintStatusService,
8
- clientNames,
9
9
  mintingContractTypes,
10
10
  onboardingRequestStatusResponse,
11
11
  } from "@crossmint/client-sdk-base";
@@ -39,6 +39,7 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
39
39
  mintConfig = defaultMintConfig,
40
40
  whPassThroughArgs,
41
41
  environment,
42
+ paymentMethod,
42
43
  ...props
43
44
  }) => {
44
45
  const [connecting, setConnecting] = useState(false);
@@ -66,6 +67,7 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
66
67
  const { checkProps, getButtonText, shouldHideButton, handleClick } = crossmintPayButtonService({
67
68
  onClick,
68
69
  connecting,
70
+ paymentMethod,
69
71
  });
70
72
 
71
73
  const [newCollectionTitle, newCollectionDescription, newCollectionPhoto] = checkProps({
@@ -93,14 +95,19 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
93
95
  mintTo,
94
96
  emailTo,
95
97
  listingId,
96
- whPassThroughArgs
98
+ whPassThroughArgs,
99
+ paymentMethod
97
100
  );
98
101
  });
99
102
 
100
103
  const classes = useStyles(formatProps(theme));
101
104
 
102
105
  const content = useMemo(() => {
103
- return <p className={classes.crossmintParagraph}>{getButtonText(connecting)}</p>;
106
+ return (
107
+ <p className={classes.crossmintParagraph} role="button-paragraph">
108
+ {getButtonText(connecting)}
109
+ </p>
110
+ );
104
111
  }, [connecting]);
105
112
 
106
113
  if (shouldHideButton({ hideMintOnInactiveClient, status })) {
@@ -2,9 +2,10 @@ import React, { FC, MouseEventHandler, useCallback, useEffect, useMemo, useState
2
2
 
3
3
  import {
4
4
  baseUrls,
5
+ clientNames,
6
+ crossmintStatusButtonService,
5
7
  crossmintStatusService,
6
8
  onboardingRequestStatusResponse,
7
- clientNames,
8
9
  } from "@crossmint/client-sdk-base";
9
10
 
10
11
  import { formatProps, useStyles } from "./styles";
@@ -28,7 +29,7 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps> = ({
28
29
  }) => {
29
30
  const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
30
31
 
31
- const { goToOnboarding, fetchClientIntegration, getButtonText, isButtonDisabled } = crossmintStatusService({
32
+ const { goToOnboarding, fetchClientIntegration } = crossmintStatusService({
32
33
  libVersion: LIB_VERSION,
33
34
  clientId,
34
35
  environment,
@@ -38,18 +39,9 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps> = ({
38
39
  setStatus,
39
40
  clientName: clientNames.reactUi,
40
41
  });
42
+ const { getButtonText, isButtonDisabled, handleClick } = crossmintStatusButtonService({ onClick });
41
43
 
42
- const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
43
- (event) => {
44
- if (onClick) onClick(event);
45
-
46
- if (status === onboardingRequestStatusResponse.WAITING_SUBMISSION) {
47
- goToOnboarding();
48
- return;
49
- }
50
- },
51
- [status]
52
- );
44
+ const _handleClick: MouseEventHandler<HTMLButtonElement> = (e) => handleClick(e, status, goToOnboarding);
53
45
 
54
46
  useEffect(() => {
55
47
  fetchClientIntegration();
@@ -73,7 +65,7 @@ export const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps> = ({
73
65
  <button
74
66
  className={`${classes.crossmintButton} ${className || ""}`}
75
67
  disabled={isButtonDisabled(status)}
76
- onClick={handleClick}
68
+ onClick={_handleClick}
77
69
  style={{ ...style }}
78
70
  tabIndex={tabIndex}
79
71
  {...props}
package/src/version.ts CHANGED
@@ -1 +1 @@
1
- export const LIB_VERSION = "0.1.5-alpha.1";
1
+ export const LIB_VERSION = "0.1.6-alpha.0";