@crossmint/client-sdk-react-ui 0.1.6-alpha.0 → 0.1.6-alpha.3
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 +7 -64
- package/lib/index.cjs +1 -1
- package/lib/index.js +1 -1
- package/package.json +3 -3
- package/src/CrossmintPayButton.tsx +3 -1
- package/src/version.ts +1 -1
package/README.md
CHANGED
|
@@ -4,77 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
+
If you're using React.js, or Next.js, Crossmint provides a client integration specific for you.
|
|
8
|
+
|
|
7
9
|
## Quick Setup
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
First, add the Crossmint Client SDK to your project with the following command:
|
|
10
12
|
|
|
11
13
|
```shell
|
|
12
14
|
yarn add @crossmint/client-sdk-react-ui
|
|
13
15
|
```
|
|
14
16
|
|
|
15
|
-
|
|
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
|
-
|
|
49
|
-
## Components
|
|
50
|
-
|
|
51
|
-
### `CrossmintPayButton` _required_
|
|
52
|
-
|
|
53
|
-
CrossmintPayButton is a button component that is used to trigger the opening of the Crossmint popup and modal overlay.
|
|
17
|
+
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.io/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.io/accept-credit-cards/integration-guides/polygon), or [Ethereum](https://docs.crossmint.io/accept-credit-cards/integration-guides/ethereum/add-crossmint-for-ethereum-react.js-next.js).
|
|
54
18
|
|
|
55
|
-
|
|
56
|
-
| --------------------- | ----------- | -------- | -------------------------------------------------------------------------------------------- |
|
|
57
|
-
| clientId | `undefined` | `true` | Your client integration identifier |
|
|
58
|
-
| collectionTitle | `undefined` | `false` | This will be shown to the user during the checkout process. Max length: 120 |
|
|
59
|
-
| collectionDescription | `undefined` | `false` | This will be shown to the user during the checkout process. Max length: 24 |
|
|
60
|
-
| collectionPhoto | `undefined` | `false` | This will be shown to the user during the checkout process. Preferred resolution: 200x200 px |
|
|
61
|
-
| className | `undefined` | `false` | Use this to add custom classNames to the button |
|
|
62
|
-
| disabled | `undefined` | `false` | Use this to specify when the button should be disabled |
|
|
63
|
-
| onClick | `undefined` | `false` | Use this to add a custom onClick handler to the button |
|
|
64
|
-
| style | `undefined` | `false` | Use this to add custom CSS styles to the button |
|
|
65
|
-
| tabIndex | `undefined` | `false` | Use this to add a custom tabIndex to the button |
|
|
66
|
-
| theme | `dark` | `false` | Use this to specify one of our default themes. Can be `light`, `dark` |
|
|
67
|
-
| ...props | `undefined` | `false` | All valid html button props can be added to the button |
|
|
19
|
+
## Migration guide to 0.1.X versions
|
|
68
20
|
|
|
69
|
-
|
|
21
|
+
Version 0.1.0 introduces breaking changes. To learn how to migrate from a version lower than 0.1.0, [check out the migration guide](https://docs.google.com/document/d/14IKpjrij7kU7Dr0I7rZkf0PyDNbXiklx2v4GuzUrFbw/edit?usp=sharing).
|
|
70
22
|
|
|
71
|
-
|
|
72
|
-
| --------- | ----------- | -------- | --------------------------------------------------------------------- |
|
|
73
|
-
| clientId | `undefined` | `true` | Your client integration identifier |
|
|
74
|
-
| className | `undefined` | `false` | Use this to add custom classNames to the button |
|
|
75
|
-
| disabled | `undefined` | `false` | Use this to specify when the button should be disabled |
|
|
76
|
-
| onClick | `undefined` | `false` | Use this to add a custom onClick handler to the button |
|
|
77
|
-
| style | `undefined` | `false` | Use this to add custom CSS styles to the button |
|
|
78
|
-
| tabIndex | `undefined` | `false` | Use this to add a custom tabIndex to the button |
|
|
79
|
-
| theme | `dark` | `false` | Use this to specify one of our default themes. Can be `light`, `dark` |
|
|
80
|
-
| ...props | `undefined` | `false` | All valid html button props can be added to the button |
|
|
23
|
+
## [Changelog](https://docs.google.com/document/d/e/2PACX-1vR5NzVS2msrCMZxlcfBgAT-Y8kAypeKqH_WBeNiwVTmyEzLZvJBWrKrz_966-d3jumwIBi94IXGT6Wp/pub)
|
package/lib/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var mt=Object.create;var d=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames,P=Object.getOwnPropertySymbols,ut=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var G=(t,s,o)=>s in t?d(t,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[s]=o,u=(t,s)=>{for(var o in s||(s={}))F.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)F.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 pt=(t,s)=>{for(var o in s)d(t,o,{get:s[o],enumerable:!0})},D=(t,s,o,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let m of lt(s))!F.call(t,m)&&m!==o&&d(t,m,{get:()=>s[m],enumerable:!(e=ct(s,m))||e.enumerable});return t};var W=(t,s,o)=>(o=t!=null?mt(ut(t)):{},D(s||!t||!t.__esModule?d(o,"default",{value:t,enumerable:!0}):o,t)),gt=t=>D(d({},"__esModule",{value:!0}),t);var bt={};pt(bt,{CrossmintPayButton:()=>St,CrossmintStatusButton:()=>Ct});module.exports=gt(bt);var i=W(require("react"),1),R=require("react"),n=require("@crossmint/client-sdk-base");var K=require("react-jss"),ft="#1e1e1e",j=t=>t==="light",k=t=>({buttonBgColor:j(t)?"white":ft,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 C="0.1.6-alpha.2";var dt={type:n.mintingContractTypes.CANDY_MACHINE},St=x=>{var N=x,{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:y=dt,whPassThroughArgs:h,environment:B,paymentMethod:I,preferredSigninMethod:L}=N,V=w(N,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment","paymentMethod","preferredSigninMethod"]);let[l,Y]=(0,R.useState)(!1),[$,z]=(0,R.useState)(n.onboardingRequestStatusResponse.WAITING_SUBMISSION),{fetchClientIntegration:J}=(0,n.crossmintStatusService)({libVersion:C,clientId:O,environment:B,auctionId:b,mintConfig:y,setStatus:z,clientName:n.clientNames.reactUi}),{connect:Q}=(0,n.crossmintModalService)({clientId:O,showOverlay:T,setConnecting:Y,libVersion:C,environment:B,clientName:n.clientNames.reactUi}),{checkProps:X,getButtonText:Z,shouldHideButton:tt,handleClick:st}=(0,n.crossmintPayButtonService)({onClick:o,connecting:l,paymentMethod:I}),[ot,et,nt]=X({collectionTitle:p,collectionPhoto:f,collectionDescription:g});p=ot,g=et,f=nt,(0,i.useEffect)(()=>{c&&J()},[$]);let rt=at=>st(at,()=>{Q(y,p,g,f,U,_,H,h,I,L)}),A=v(k(M)),it=(0,i.useMemo)(()=>i.default.createElement("p",{className:A.crossmintParagraph,role:"button-paragraph"},Z(l)),[l]);return tt({hideMintOnInactiveClient:c,status:$})?null:i.default.createElement(i.default.Fragment,null,E&&i.default.createElement("button",u({className:`${A.crossmintButton} ${t||""}`,disabled:s,onClick:rt,style:u({},e),tabIndex:m},V),i.default.createElement("img",{className:A.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),it))};var r=W(require("react"),1),a=require("@crossmint/client-sdk-base");var Ct=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:y,fetchClientIntegration:h}=(0,a.crossmintStatusService)({libVersion:C,clientId:p,environment:_,platformId:f,auctionId:g,mintConfig:U,setStatus:T,clientName:a.clientNames.reactUi}),{getButtonText:B,isButtonDisabled:I,handleClick:L}=(0,a.crossmintStatusButtonService)({onClick:o}),V=l=>L(l,c,y);(0,r.useEffect)(()=>{h();let l=setInterval(()=>{h()},60*1e3);return()=>clearInterval(l)},[]);let x=v(k(M)),N=(0,r.useMemo)(()=>r.default.createElement("p",{className:x.crossmintParagraph},B(c)),[c]);return r.default.createElement(r.default.Fragment,null,E&&r.default.createElement("button",u({className:`${x.crossmintButton} ${t||""}`,disabled:I(c),onClick:V,style:u({},e),tabIndex:m},H),r.default.createElement("img",{className:x.crossmintImg,src:`${a.baseUrls.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),N))};0&&(module.exports={CrossmintPayButton,CrossmintStatusButton});
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var nt=Object.defineProperty;var I=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var A=(t,o,s)=>o in t?nt(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(I)for(var s of I(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&&I)for(var e of I(t))o.indexOf(e)<0&&R.call(t,e)&&(s[e]=t[e]);return s};import g,{useEffect as at,useMemo as mt}from"react";import{useState as G}from"react";import{clientNames as q,crossmintModalService as ct,crossmintPayButtonService as lt,crossmintStatusService as ut,mintingContractTypes as pt,onboardingRequestStatusResponse as gt}from"@crossmint/client-sdk-base";import{createUseStyles as rt}from"react-jss";var it="#1e1e1e",$=t=>t==="light",N=t=>({buttonBgColor:$(t)?"white":it,paragraphColor:$(t)?"black":"white"}),P=rt({"@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 p="0.1.6-alpha.2";var ft={type:pt.CANDY_MACHINE},Lt=h=>{var B=h,{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:d,hideMintOnInactiveClient:n=!1,showOverlay:H=!0,mintConfig:S=ft,whPassThroughArgs:C,environment:b,paymentMethod:y,preferredSigninMethod:O}=B,T=x(B,["className","disabled","onClick","style","tabIndex","theme","collectionTitle","collectionDescription","collectionPhoto","mintTo","emailTo","listingId","clientId","auctionId","hideMintOnInactiveClient","showOverlay","mintConfig","whPassThroughArgs","environment","paymentMethod","preferredSigninMethod"]);let[r,D]=G(!1),[V,W]=G(gt.WAITING_SUBMISSION),{fetchClientIntegration:j}=ut({libVersion:p,clientId:_,environment:b,auctionId:d,mintConfig:S,setStatus:W,clientName:q.reactUi}),{connect:K}=ct({clientId:_,showOverlay:H,setConnecting:D,libVersion:p,environment:b,clientName:q.reactUi}),{checkProps:Y,getButtonText:z,shouldHideButton:J,handleClick:Q}=lt({onClick:s,connecting:r,paymentMethod:y}),[X,Z,tt]=Y({collectionTitle:a,collectionPhoto:c,collectionDescription:m});a=X,m=Z,c=tt,at(()=>{n&&j()},[V]);let st=et=>Q(et,()=>{K(S,a,m,c,E,M,U,C,y,O)}),L=P(N(v)),ot=mt(()=>g.createElement("p",{className:L.crossmintParagraph,role:"button-paragraph"},z(r)),[r]);return J({hideMintOnInactiveClient:n,status:V})?null:g.createElement(g.Fragment,null,w&&g.createElement("button",i({className:`${L.crossmintButton} ${t||""}`,disabled:o,onClick:st,style:i({},e),tabIndex:k},T),g.createElement("img",{className:L.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.png",alt:"Crossmint logo"}),ot))};import f,{useEffect as dt,useMemo as St,useState as Ct}from"react";import{baseUrls as bt,clientNames as yt,crossmintStatusButtonService as ht,crossmintStatusService as Bt,onboardingRequestStatusResponse as It}from"@crossmint/client-sdk-base";var jt=_=>{var d=_,{className:t,disabled:o,onClick:s,style:e,tabIndex:k,theme:v="dark",clientId:a,auctionId:m,platformId:c,mintConfig:E,environment:M}=d,U=x(d,["className","disabled","onClick","style","tabIndex","theme","clientId","auctionId","platformId","mintConfig","environment"]);let[n,H]=Ct(It.WAITING_SUBMISSION),{goToOnboarding:S,fetchClientIntegration:C}=Bt({libVersion:p,clientId:a,environment:M,platformId:c,auctionId:m,mintConfig:E,setStatus:H,clientName:yt.reactUi}),{getButtonText:b,isButtonDisabled:y,handleClick:O}=ht({onClick:s}),T=r=>O(r,n,S);dt(()=>{C();let r=setInterval(()=>{C()},60*1e3);return()=>clearInterval(r)},[]);let h=P(N(v)),B=St(()=>f.createElement("p",{className:h.crossmintParagraph},b(n)),[n]);return f.createElement(f.Fragment,null,w&&f.createElement("button",i({className:`${h.crossmintButton} ${t||""}`,disabled:y(n),onClick:T,style:i({},e),tabIndex:k},U),f.createElement("img",{className:h.crossmintImg,src:`${bt.prod}/assets/crossmint/logo.png`,alt:"Crossmint logo"}),B))};export{Lt as CrossmintPayButton,jt as CrossmintStatusButton};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crossmint/client-sdk-react-ui",
|
|
3
|
-
"version": "0.1.6-alpha.
|
|
3
|
+
"version": "0.1.6-alpha.3",
|
|
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.2-alpha.
|
|
35
|
+
"@crossmint/client-sdk-base": "^0.1.2-alpha.3",
|
|
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": "
|
|
53
|
+
"gitHead": "2e950aed1f1f68541178cb63dca3a64c3d97f807"
|
|
54
54
|
}
|
|
@@ -40,6 +40,7 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
|
|
|
40
40
|
whPassThroughArgs,
|
|
41
41
|
environment,
|
|
42
42
|
paymentMethod,
|
|
43
|
+
preferredSigninMethod,
|
|
43
44
|
...props
|
|
44
45
|
}) => {
|
|
45
46
|
const [connecting, setConnecting] = useState(false);
|
|
@@ -96,7 +97,8 @@ export const CrossmintPayButton: FC<CrossmintPayButtonReactProps> = ({
|
|
|
96
97
|
emailTo,
|
|
97
98
|
listingId,
|
|
98
99
|
whPassThroughArgs,
|
|
99
|
-
paymentMethod
|
|
100
|
+
paymentMethod,
|
|
101
|
+
preferredSigninMethod
|
|
100
102
|
);
|
|
101
103
|
});
|
|
102
104
|
|
package/src/version.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const LIB_VERSION = "0.1.6-alpha.
|
|
1
|
+
export const LIB_VERSION = "0.1.6-alpha.3";
|