@crossmint/client-sdk-react-ui 0.2.7-alpha.7 → 0.2.7-alpha.9

package/lib/index.cjs

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

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 import { MouseEvent, CSSProperties } from 'react';
-import { CrossmintPayButtonProps, BaseButtonProps, NFTCollectionViewProps, NFTDetailProps } from '@crossmint/client-sdk-base';
+import { CrossmintPayButtonProps, BaseButtonProps, NFTCollectionViewProps, NFTDetailProps, PaymentElement } from '@crossmint/client-sdk-base';
+export { CheckoutEventMap, CheckoutEvents, CrossmintCheckoutEvent, useCrossmintEvents } from '@crossmint/client-sdk-base';
 
 interface CrossmintPayButtonReactProps extends CrossmintPayButtonProps {
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -18,4 +19,6 @@ declare function CrossmintNFTCollectionView(props: NFTCollectionViewProps): JSX.
 
 declare function CrossmintNFTDetail(props: NFTDetailProps): JSX.Element;
 
-export { CrossmintNFTCollectionView, CrossmintNFTDetail, CrossmintPayButton, CrossmintStatusButton };
+declare function CrossmintPaymentElement(props: PaymentElement): JSX.Element;
+
+export { CrossmintNFTCollectionView, CrossmintNFTDetail, CrossmintPayButton, CrossmintPaymentElement, CrossmintStatusButton };

package/lib/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@crossmint/client-sdk-react-ui",
-    "version": "0.2.7-alpha.7",
+    "version": "0.2.7-alpha.9",
     "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.7-alpha.7",
+        "@crossmint/client-sdk-base": "^0.2.7-alpha.9",
         "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": "8b9ab81a87db754e736aecf00d57ad1f69950e52"
+    "gitHead": "e02e263996d8542a460d6834cc674b41d3659932"
 }

package/src/CrossmintPaymentElement.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react";
+
+import { crossmintPaymentService } from "@crossmint/client-sdk-base";
+import type { CrossmintCheckoutEvent, PaymentElement } from "@crossmint/client-sdk-base";
+
+export function CrossmintPaymentElement(props: PaymentElement) {
+    const { getIframeUrl, listenToEvents, emitQueryParams } = crossmintPaymentService(props);
+
+    useEffect(() => {
+        listenToEvents((event: MessageEvent<CrossmintCheckoutEvent>) => props.onEvent?.(event.data));
+    }, [listenToEvents, props.onEvent]);
+
+    useEffect(() => {
+        emitQueryParams({
+            recipient: props.recipient,
+            mintConfig: props.mintConfig,
+            locale: props.locale,
+        });
+    }, [emitQueryParams, props.recipient, props.mintConfig, props.locale]);
+
+    const iframeUrl = getIframeUrl();
+
+    return (
+        <iframe
+            src={iframeUrl}
+            id="iframe-crossmint-payment-element"
+            style={{
+                width: "100%",
+                border: "none",
+                margin: "0",
+                padding: "0",
+                height: "96px",
+            }}
+        ></iframe>
+    );
+}

package/src/index.ts

@@ -2,3 +2,6 @@ export * from "./CrossmintPayButton";
 export * from "./CrossmintStatusButton";
 export * from "./CrossmintNFTCollectionView";
 export * from "./CrossmintNFTDetail";
+export * from "./CrossmintPaymentElement";
+export { CheckoutEvents, useCrossmintEvents } from "@crossmint/client-sdk-base";
+export type { CrossmintCheckoutEvent, CheckoutEventMap } from "@crossmint/client-sdk-base";

package/src/version.ts

@@ -1 +1 @@
-export const LIB_VERSION = "0.2.7-alpha.7";
+export const LIB_VERSION = "0.2.7-alpha.9";