@crossmint/client-sdk-react-ui 0.2.7-alpha.6 → 0.2.7-alpha.8

package/package.json

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

package/src/CrossmintNFTCollectionView.tsx

@@ -1,30 +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"
-        />
-    );
-}
+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

@@ -1,26 +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"
-        />
-    );
-}
+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/CrossmintPayButton.tsx

@@ -1,139 +1,139 @@
-import React, { FC, MouseEvent, useEffect, useMemo } from "react";
-import { useState } from "react";
-
-import {
-    clientNames,
-    crossmintModalService,
-    crossmintPayButtonService,
-    crossmintStatusService,
-    mintingContractTypes,
-    onboardingRequestStatusResponse,
-} from "@crossmint/client-sdk-base";
-
-import { formatProps, useStyles } from "./styles";
-import { CrossmintPayButtonReactProps } from "./types";
-import useEnvironment from "./useEnvironment";
-import { LIB_VERSION } from "./version";
-
-const defaultMintConfig: any = {
-    type: mintingContractTypes.CANDY_MACHINE,
-};
-
-export function CrossmintPayButton({
-    className,
-    disabled,
-    onClick,
-    style,
-    tabIndex,
-    theme = "dark",
-    mintTo,
-    emailTo,
-    listingId,
-    clientId,
-    auctionId,
-    hideMintOnInactiveClient = false,
-    showOverlay = true,
-    mintConfig = defaultMintConfig,
-    whPassThroughArgs,
-    environment,
-    paymentMethod,
-    preferredSigninMethod,
-    dismissOverlayOnClick,
-    prepay,
-    locale = "en-US",
-    currency = "USD",
-    successCallbackURL = "",
-    failureCallbackURL = "",
-    ...props
-}: CrossmintPayButtonReactProps) {
-    const [connecting, setConnecting] = useState(false);
-    const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
-    const { isServerSideRendering } = useEnvironment();
-
-    const { fetchClientIntegration } = crossmintStatusService({
-        libVersion: LIB_VERSION,
-        clientId,
-        environment,
-        auctionId,
-        mintConfig,
-        setStatus,
-        clientName: clientNames.reactUi,
-    });
-
-    const { connect } = crossmintModalService({
-        clientId,
-        showOverlay,
-        dismissOverlayOnClick,
-        setConnecting,
-        libVersion: LIB_VERSION,
-        environment,
-        clientName: clientNames.reactUi,
-        locale,
-        currency,
-        successCallbackURL,
-        failureCallbackURL,
-    });
-
-    const { getButtonText, shouldHideButton, handleClick } = crossmintPayButtonService({
-        onClick,
-        connecting,
-        paymentMethod,
-        locale,
-    });
-
-    useEffect(() => {
-        if (hideMintOnInactiveClient) {
-            fetchClientIntegration();
-        }
-    }, [status]);
-
-    const _handleClick = (event: MouseEvent<HTMLButtonElement>) =>
-        handleClick(event, () => {
-            connect(
-                mintConfig,
-                mintTo,
-                emailTo,
-                listingId,
-                whPassThroughArgs,
-                paymentMethod,
-                preferredSigninMethod,
-                prepay
-            );
-        });
-
-    const classes = useStyles(formatProps(theme));
-
-    const content = useMemo(() => {
-        return (
-            <span className={classes.crossmintParagraph} role="button-paragraph">
-                {getButtonText(connecting)}
-            </span>
-        );
-    }, [connecting]);
-
-    if (shouldHideButton({ hideMintOnInactiveClient, status })) {
-        return null;
-    }
-
-    return (
-        <>
-            {!isServerSideRendering && (
-                <button
-                    className={`${classes.crossmintButton} ${className || ""}`}
-                    disabled={disabled}
-                    onClick={_handleClick}
-                    style={{ ...style }}
-                    tabIndex={tabIndex}
-                    {...props}
-                >
-                    <img
-                        className={classes.crossmintImg}
-                        src="https://www.crossmint.io/assets/crossmint/logo.svg"
-                        alt="Crossmint logo"
-                    />
-                    {content}
-                </button>
-            )}
-        </>
-    );
-}
+import React, { FC, MouseEvent, useEffect, useMemo } from "react";
+import { useState } from "react";
+
+import {
+    clientNames,
+    crossmintModalService,
+    crossmintPayButtonService,
+    crossmintStatusService,
+    mintingContractTypes,
+    onboardingRequestStatusResponse,
+} from "@crossmint/client-sdk-base";
+
+import { formatProps, useStyles } from "./styles";
+import { CrossmintPayButtonReactProps } from "./types";
+import useEnvironment from "./useEnvironment";
+import { LIB_VERSION } from "./version";
+
+const defaultMintConfig: any = {
+    type: mintingContractTypes.CANDY_MACHINE,
+};
+
+export function CrossmintPayButton({
+    className,
+    disabled,
+    onClick,
+    style,
+    tabIndex,
+    theme = "dark",
+    mintTo,
+    emailTo,
+    listingId,
+    clientId,
+    auctionId,
+    hideMintOnInactiveClient = false,
+    showOverlay = true,
+    mintConfig = defaultMintConfig,
+    whPassThroughArgs,
+    environment,
+    paymentMethod,
+    preferredSigninMethod,
+    dismissOverlayOnClick,
+    prepay,
+    locale = "en-US",
+    currency = "USD",
+    successCallbackURL = "",
+    failureCallbackURL = "",
+    ...props
+}: CrossmintPayButtonReactProps) {
+    const [connecting, setConnecting] = useState(false);
+    const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
+    const { isServerSideRendering } = useEnvironment();
+
+    const { fetchClientIntegration } = crossmintStatusService({
+        libVersion: LIB_VERSION,
+        clientId,
+        environment,
+        auctionId,
+        mintConfig,
+        setStatus,
+        clientName: clientNames.reactUi,
+    });
+
+    const { connect } = crossmintModalService({
+        clientId,
+        showOverlay,
+        dismissOverlayOnClick,
+        setConnecting,
+        libVersion: LIB_VERSION,
+        environment,
+        clientName: clientNames.reactUi,
+        locale,
+        currency,
+        successCallbackURL,
+        failureCallbackURL,
+    });
+
+    const { getButtonText, shouldHideButton, handleClick } = crossmintPayButtonService({
+        onClick,
+        connecting,
+        paymentMethod,
+        locale,
+    });
+
+    useEffect(() => {
+        if (hideMintOnInactiveClient) {
+            fetchClientIntegration();
+        }
+    }, [status]);
+
+    const _handleClick = (event: MouseEvent<HTMLButtonElement>) =>
+        handleClick(event, () => {
+            connect(
+                mintConfig,
+                mintTo,
+                emailTo,
+                listingId,
+                whPassThroughArgs,
+                paymentMethod,
+                preferredSigninMethod,
+                prepay
+            );
+        });
+
+    const classes = useStyles(formatProps(theme));
+
+    const content = useMemo(() => {
+        return (
+            <span className={classes.crossmintParagraph} role="button-paragraph">
+                {getButtonText(connecting)}
+            </span>
+        );
+    }, [connecting]);
+
+    if (shouldHideButton({ hideMintOnInactiveClient, status })) {
+        return null;
+    }
+
+    return (
+        <>
+            {!isServerSideRendering && (
+                <button
+                    className={`${classes.crossmintButton} ${className || ""}`}
+                    disabled={disabled}
+                    onClick={_handleClick}
+                    style={{ ...style }}
+                    tabIndex={tabIndex}
+                    {...props}
+                >
+                    <img
+                        className={classes.crossmintImg}
+                        src="https://www.crossmint.io/assets/crossmint/logo.svg"
+                        alt="Crossmint logo"
+                    />
+                    {content}
+                </button>
+            )}
+        </>
+    );
+}

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/CrossmintStatusButton.tsx

@@ -1,85 +1,85 @@
-import React, { FC, MouseEventHandler, useEffect, useMemo, useState } from "react";
-
-import {
-    baseUrls,
-    clientNames,
-    crossmintStatusButtonService,
-    crossmintStatusService,
-    onboardingRequestStatusResponse,
-} from "@crossmint/client-sdk-base";
-
-import { formatProps, useStyles } from "./styles";
-import { CrossmintStatusButtonReactProps } from "./types";
-import useEnvironment from "./useEnvironment";
-import { LIB_VERSION } from "./version";
-
-export function CrossmintStatusButton({
-    className,
-    disabled,
-    onClick,
-    style,
-    tabIndex,
-    theme = "dark",
-    clientId,
-    auctionId,
-    platformId,
-    mintConfig,
-    environment,
-    locale = "en-US",
-    ...props
-}: CrossmintStatusButtonReactProps) {
-    const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
-    const { isServerSideRendering } = useEnvironment();
-
-    const { goToOnboarding, fetchClientIntegration } = crossmintStatusService({
-        libVersion: LIB_VERSION,
-        clientId,
-        environment,
-        platformId,
-        auctionId,
-        mintConfig,
-        setStatus,
-        clientName: clientNames.reactUi,
-    });
-    const { getButtonText, isButtonDisabled, handleClick } = crossmintStatusButtonService({ onClick, locale });
-
-    const _handleClick: MouseEventHandler<HTMLButtonElement> = (e) => handleClick(e, status, goToOnboarding);
-
-    useEffect(() => {
-        fetchClientIntegration();
-
-        const interval = setInterval(() => {
-            fetchClientIntegration();
-        }, 60 * 1000);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    const classes = useStyles(formatProps(theme));
-
-    const content = useMemo(() => {
-        return <span className={classes.crossmintParagraph}>{getButtonText(status)}</span>;
-    }, [status]);
-
-    return (
-        <>
-            {!isServerSideRendering && (
-                <button
-                    className={`${classes.crossmintButton} ${className || ""}`}
-                    disabled={isButtonDisabled(status)}
-                    onClick={_handleClick}
-                    style={{ ...style }}
-                    tabIndex={tabIndex}
-                    {...props}
-                >
-                    <img
-                        className={classes.crossmintImg}
-                        src={`${baseUrls.prod}/assets/crossmint/logo.svg`}
-                        alt="Crossmint logo"
-                    />
-                    {content}
-                </button>
-            )}
-        </>
-    );
-}
+import React, { FC, MouseEventHandler, useEffect, useMemo, useState } from "react";
+
+import {
+    baseUrls,
+    clientNames,
+    crossmintStatusButtonService,
+    crossmintStatusService,
+    onboardingRequestStatusResponse,
+} from "@crossmint/client-sdk-base";
+
+import { formatProps, useStyles } from "./styles";
+import { CrossmintStatusButtonReactProps } from "./types";
+import useEnvironment from "./useEnvironment";
+import { LIB_VERSION } from "./version";
+
+export function CrossmintStatusButton({
+    className,
+    disabled,
+    onClick,
+    style,
+    tabIndex,
+    theme = "dark",
+    clientId,
+    auctionId,
+    platformId,
+    mintConfig,
+    environment,
+    locale = "en-US",
+    ...props
+}: CrossmintStatusButtonReactProps) {
+    const [status, setStatus] = useState(onboardingRequestStatusResponse.WAITING_SUBMISSION);
+    const { isServerSideRendering } = useEnvironment();
+
+    const { goToOnboarding, fetchClientIntegration } = crossmintStatusService({
+        libVersion: LIB_VERSION,
+        clientId,
+        environment,
+        platformId,
+        auctionId,
+        mintConfig,
+        setStatus,
+        clientName: clientNames.reactUi,
+    });
+    const { getButtonText, isButtonDisabled, handleClick } = crossmintStatusButtonService({ onClick, locale });
+
+    const _handleClick: MouseEventHandler<HTMLButtonElement> = (e) => handleClick(e, status, goToOnboarding);
+
+    useEffect(() => {
+        fetchClientIntegration();
+
+        const interval = setInterval(() => {
+            fetchClientIntegration();
+        }, 60 * 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const classes = useStyles(formatProps(theme));
+
+    const content = useMemo(() => {
+        return <span className={classes.crossmintParagraph}>{getButtonText(status)}</span>;
+    }, [status]);
+
+    return (
+        <>
+            {!isServerSideRendering && (
+                <button
+                    className={`${classes.crossmintButton} ${className || ""}`}
+                    disabled={isButtonDisabled(status)}
+                    onClick={_handleClick}
+                    style={{ ...style }}
+                    tabIndex={tabIndex}
+                    {...props}
+                >
+                    <img
+                        className={classes.crossmintImg}
+                        src={`${baseUrls.prod}/assets/crossmint/logo.svg`}
+                        alt="Crossmint logo"
+                    />
+                    {content}
+                </button>
+            )}
+        </>
+    );
+}

package/src/index.ts

@@ -1,4 +1,7 @@
-export * from "./CrossmintPayButton";
-export * from "./CrossmintStatusButton";
-export * from "./CrossmintNFTCollectionView";
-export * from "./CrossmintNFTDetail";
+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";