@crossmint/client-sdk-react-ui 0.2.5-alpha.0 → 0.2.6-alpha.1

package/README.md

@@ -1,6 +1,6 @@
 # `@crossmint/client-sdk-react-ui`
 
-## You can check the full documentation at [docs.crossmint.io](https://docs.crossmint.io/)
+## You can check the full documentation at [docs.crossmint.com](https://docs.crossmint.com/)
 
 ---
 
@@ -14,7 +14,23 @@ First, add the Crossmint Client SDK to your project with the following command:
 yarn add @crossmint/client-sdk-react-ui
 ```
 
-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).
+### 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).
+
+---
+
+### Wallet UI Components
+
+We offer two components to help you quickly get up and running with your project using Crossmint wallets:
+
+-   `CrossmintNFTCollectionView` - Display a grid of NFTs.
+    ![Wallet Collection Component](https://user-images.githubusercontent.com/20989060/223705873-79197f38-4fb6-4773-98b9-82ef80f24aef.png)
+
+-   `CrossmintNFTDetail` - Display a card showing all NFT related details.
+    ![NFT Detail Component](https://user-images.githubusercontent.com/20989060/223704647-8b99ae40-6ebf-4cd6-bc20-c41c5fd13db0.png)
+
+Visit [our documentation](https://docs.crossmint.com/docs/wallet-ui-components) for integration instructions.
 
 ## Migration guide to 0.1.X versions
 

package/lib/index.cjs

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

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, CSSProperties, FC } from 'react';
-import { CrossmintPayButtonProps, BaseButtonProps } from '@crossmint/client-sdk-base';
+import { CrossmintPayButtonProps, BaseButtonProps, NFTCollectionViewProps, NFTDetailProps } from '@crossmint/client-sdk-base';
 
 interface CrossmintPayButtonReactProps extends CrossmintPayButtonProps {
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -14,4 +14,8 @@ declare const CrossmintPayButton: FC<CrossmintPayButtonReactProps>;
 
 declare const CrossmintStatusButton: FC<CrossmintStatusButtonReactProps>;
 
-export { CrossmintPayButton, CrossmintStatusButton };
+declare function CrossmintNFTCollectionView(props: NFTCollectionViewProps): JSX.Element;
+
+declare function CrossmintNFTDetail(props: NFTDetailProps): JSX.Element;
+
+export { CrossmintNFTCollectionView, CrossmintNFTDetail, CrossmintPayButton, CrossmintStatusButton };

package/lib/index.js

@@ -1 +1 @@
-import m,{useEffect as tt,useMemo as st}from"react";import{useState as L}from"react";import{clientNames as V,crossmintModalService as ot,crossmintPayButtonService as et,crossmintStatusService as nt,mintingContractTypes as rt,onboardingRequestStatusResponse as it}from"@crossmint/client-sdk-base";import{createUseStyles as J}from"react-jss";var Q="#1e1e1e",O=t=>t==="light",C=t=>({buttonBgColor:O(t)?"white":Q,paragraphColor:O(t)?"black":"white"}),b=J({"@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 X,useState as Z}from"react";function i(){let[t,l]=Z(!0);return X(()=>{l(!1)},[]),{isServerSideRendering:t}}var a="0.2.5-alpha.0";var at={type:rt.CANDY_MACHINE},Ut=({className:t,disabled:l,onClick:I,style:h,tabIndex:y,theme:B="dark",mintTo:v,emailTo:x,listingId:N,clientId:u,auctionId:P,hideMintOnInactiveClient:p=!1,showOverlay:E=!0,mintConfig:s=at,whPassThroughArgs:M,environment:g,paymentMethod:S,preferredSigninMethod:f,dismissOverlayOnClick:U,prepay:k,locale:d="en-US",currency:w="USD",successCallbackURL:o="",failureCallbackURL:R="",...e})=>{let[_,A]=L(!1),[H,F]=L(it.WAITING_SUBMISSION),{isServerSideRendering:$}=i(),{fetchClientIntegration:D}=nt({libVersion:a,clientId:u,environment:g,auctionId:P,mintConfig:s,setStatus:F,clientName:V.reactUi}),{connect:G}=ot({clientId:u,showOverlay:E,dismissOverlayOnClick:U,setConnecting:A,libVersion:a,environment:g,clientName:V.reactUi,locale:d,currency:w,successCallbackURL:o,failureCallbackURL:R}),{getButtonText:q,shouldHideButton:W,handleClick:j}=et({onClick:I,connecting:_,paymentMethod:S,locale:d});tt(()=>{p&&D()},[H]);let K=z=>j(z,()=>{G(s,v,x,N,M,S,f,k)}),T=b(C(B)),Y=st(()=>m.createElement("span",{className:T.crossmintParagraph,role:"button-paragraph"},q(_)),[_]);return W({hideMintOnInactiveClient:p,status:H})?null:m.createElement(m.Fragment,null,!$&&m.createElement("button",{className:`${T.crossmintButton} ${t||""}`,disabled:l,onClick:K,style:{...h},tabIndex:y,...e},m.createElement("img",{className:T.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.svg",alt:"Crossmint logo"}),Y))};import c,{useEffect as mt,useMemo as ct,useState as lt}from"react";import{baseUrls as ut,clientNames as pt,crossmintStatusButtonService as gt,crossmintStatusService as St,onboardingRequestStatusResponse as ft}from"@crossmint/client-sdk-base";var Vt=({className:t,disabled:l,onClick:I,style:h,tabIndex:y,theme:B="dark",clientId:v,auctionId:x,platformId:N,mintConfig:u,environment:P,locale:p="en-US",...E})=>{let[s,M]=lt(ft.WAITING_SUBMISSION),{isServerSideRendering:g}=i(),{goToOnboarding:S,fetchClientIntegration:f}=St({libVersion:a,clientId:v,environment:P,platformId:N,auctionId:x,mintConfig:u,setStatus:M,clientName:pt.reactUi}),{getButtonText:U,isButtonDisabled:k,handleClick:d}=gt({onClick:I,locale:p}),w=e=>d(e,s,S);mt(()=>{f();let e=setInterval(()=>{f()},60*1e3);return()=>clearInterval(e)},[]);let o=b(C(B)),R=ct(()=>c.createElement("span",{className:o.crossmintParagraph},U(s)),[s]);return c.createElement(c.Fragment,null,!g&&c.createElement("button",{className:`${o.crossmintButton} ${t||""}`,disabled:k(s),onClick:w,style:{...h},tabIndex:y,...E},c.createElement("img",{className:o.crossmintImg,src:`${ut.prod}/assets/crossmint/logo.svg`,alt:"Crossmint logo"}),R))};export{Ut as CrossmintPayButton,Vt as CrossmintStatusButton};
+import l,{useEffect as et,useMemo as st}from"react";import{useState as D}from"react";import{clientNames as O,crossmintModalService as rt,crossmintPayButtonService as nt,crossmintStatusService as it,mintingContractTypes as at,onboardingRequestStatusResponse as mt}from"@crossmint/client-sdk-base";import{createUseStyles as X}from"react-jss";var Z="#1e1e1e",_=t=>t==="light",C=t=>({buttonBgColor:_(t)?"white":Z,paragraphColor:_(t)?"black":"white"}),N=X({"@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 tt,useState as ot}from"react";function m(){let[t,e]=ot(!0);return tt(()=>{e(!1)},[]),{isServerSideRendering:t}}var o="0.2.6-alpha.1";var lt={type:at.CANDY_MACHINE},kt=({className:t,disabled:e,onClick:b,style:h,tabIndex:I,theme:y="dark",mintTo:B,emailTo:x,listingId:P,clientId:u,auctionId:v,hideMintOnInactiveClient:p=!1,showOverlay:w=!0,mintConfig:s=lt,whPassThroughArgs:E,environment:g,paymentMethod:f,preferredSigninMethod:d,dismissOverlayOnClick:T,prepay:V,locale:S="en-US",currency:F="USD",successCallbackURL:i="",failureCallbackURL:R="",...a})=>{let[M,A]=D(!1),[k,G]=D(mt.WAITING_SUBMISSION),{isServerSideRendering:$}=m(),{fetchClientIntegration:q}=it({libVersion:o,clientId:u,environment:g,auctionId:v,mintConfig:s,setStatus:G,clientName:O.reactUi}),{connect:W}=rt({clientId:u,showOverlay:w,dismissOverlayOnClick:T,setConnecting:A,libVersion:o,environment:g,clientName:O.reactUi,locale:S,currency:F,successCallbackURL:i,failureCallbackURL:R}),{getButtonText:j,shouldHideButton:K,handleClick:Y}=nt({onClick:b,connecting:M,paymentMethod:f,locale:S});et(()=>{p&&q()},[k]);let z=Q=>Y(Q,()=>{W(s,B,x,P,E,f,d,V)}),U=N(C(y)),J=st(()=>l.createElement("span",{className:U.crossmintParagraph,role:"button-paragraph"},j(M)),[M]);return K({hideMintOnInactiveClient:p,status:k})?null:l.createElement(l.Fragment,null,!$&&l.createElement("button",{className:`${U.crossmintButton} ${t||""}`,disabled:e,onClick:z,style:{...h},tabIndex:I,...a},l.createElement("img",{className:U.crossmintImg,src:"https://www.crossmint.io/assets/crossmint/logo.svg",alt:"Crossmint logo"}),J))};import c,{useEffect as ct,useMemo as ut,useState as pt}from"react";import{baseUrls as gt,clientNames as ft,crossmintStatusButtonService as dt,crossmintStatusService as St,onboardingRequestStatusResponse as Ct}from"@crossmint/client-sdk-base";var qt=({className:t,disabled:e,onClick:b,style:h,tabIndex:I,theme:y="dark",clientId:B,auctionId:x,platformId:P,mintConfig:u,environment:v,locale:p="en-US",...w})=>{let[s,E]=pt(Ct.WAITING_SUBMISSION),{isServerSideRendering:g}=m(),{goToOnboarding:f,fetchClientIntegration:d}=St({libVersion:o,clientId:B,environment:v,platformId:P,auctionId:x,mintConfig:u,setStatus:E,clientName:ft.reactUi}),{getButtonText:T,isButtonDisabled:V,handleClick:S}=dt({onClick:b,locale:p}),F=a=>S(a,s,f);ct(()=>{d();let a=setInterval(()=>{d()},60*1e3);return()=>clearInterval(a)},[]);let i=N(C(y)),R=ut(()=>c.createElement("span",{className:i.crossmintParagraph},T(s)),[s]);return c.createElement(c.Fragment,null,!g&&c.createElement("button",{className:`${i.crossmintButton} ${t||""}`,disabled:V(s),onClick:F,style:{...h},tabIndex:I,...w},c.createElement("img",{className:i.crossmintImg,src:`${gt.prod}/assets/crossmint/logo.svg`,alt:"Crossmint logo"}),R))};import*as L from"react";import{assertValidNFTCollectionViewProps as Nt,getNFTCollectionViewSrc as bt}from"@crossmint/client-sdk-base";function zt(t){Nt(t);let e=bt(t,o);return L.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 ht,getNFTDetailSrc as It}from"@crossmint/client-sdk-base";function to(t){ht(t);let e=It(t,o);return H.createElement("iframe",{src:e,width:"100%",height:"100%",style:{flexGrow:"1",border:"none",margin:"0",padding:"0"},role:"nft-details"})}export{zt as CrossmintNFTCollectionView,to as CrossmintNFTDetail,kt as CrossmintPayButton,qt as CrossmintStatusButton};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/client-sdk-react-ui",
-    "version": "0.2.5-alpha.0",
+    "version": "0.2.6-alpha.1",
     "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.5-alpha.0",
+        "@crossmint/client-sdk-base": "^0.2.6-alpha.1",
         "react-jss": "10.9.2",
         "uuid": "^8.3.2"
     },
@@ -49,5 +49,5 @@
         "ts-jest": "^27.1.3",
         "ts-node-dev": "^1.1.8"
     },
-    "gitHead": "15fb24687e4c49b5b5e062de5b791ced2e25714e"
+    "gitHead": "553b3f9876a13a008c837dc35fd5e8b315c568d8"
 }

package/src/CrossmintNFTCollectionView.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import {
+    NFTCollectionViewProps,
+    assertValidNFTCollectionViewProps,
+    getNFTCollectionViewSrc,
+} from "@crossmint/client-sdk-base";
+
+import { LIB_VERSION } from "./version";
+
+export function CrossmintNFTCollectionView(props: NFTCollectionViewProps) {
+    assertValidNFTCollectionViewProps(props);
+
+    const src = getNFTCollectionViewSrc(props, LIB_VERSION);
+
+    return (
+        <iframe
+            src={src}
+            width="100%"
+            height="100%"
+            style={{
+                flexGrow: "1",
+                border: "none",
+                margin: "0",
+                padding: "0",
+            }}
+            role="nft-collection-view"
+        />
+    );
+}

package/src/CrossmintNFTDetail.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { NFTDetailProps, assertValidValidateNFTDetailProps, getNFTDetailSrc } from "@crossmint/client-sdk-base";
+
+import { LIB_VERSION } from "./version";
+
+export function CrossmintNFTDetail(props: NFTDetailProps) {
+    assertValidValidateNFTDetailProps(props);
+
+    const src = getNFTDetailSrc(props, LIB_VERSION);
+
+    return (
+        <iframe
+            src={src}
+            width="100%"
+            height="100%"
+            style={{
+                flexGrow: "1",
+                border: "none",
+                margin: "0",
+                padding: "0",
+            }}
+            role="nft-details"
+        />
+    );
+}

package/src/index.ts

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

package/src/version.ts

@@ -1 +1 @@
-export const LIB_VERSION = "0.2.5-alpha.0";
+export const LIB_VERSION = "0.2.6-alpha.1";