@crossmint/client-sdk-react-ui 0.1.5-alpha.0 → 0.1.5
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 +47 -3
- package/lib/index.cjs +1 -1
- package/lib/index.js +1 -1
- package/package.json +3 -3
- package/src/CrossmintStatusButton.tsx +6 -14
- package/src/version.ts +1 -1
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
|
|
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
|
|
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.2";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
|
|
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.2";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.5
|
|
3
|
+
"version": "0.1.5",
|
|
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
|
|
35
|
+
"@crossmint/client-sdk-base": "^0.1.1",
|
|
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": "ee0b45f013bd9da791f6ad964c2816d42cc324c6"
|
|
54
54
|
}
|
|
@@ -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
|
|
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
|
|
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={
|
|
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
|
|
1
|
+
export const LIB_VERSION = "0.1.5";
|