@crossmint/client-sdk-react-ui 0.2.7-alpha.14 → 0.2.7-alpha.15

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

@@ -1,58 +1,58 @@
-import React, { useEffect, useState } from "react";
-
-import { crossmintPaymentService, crossmintUiService } from "@crossmint/client-sdk-base";
-import type { CrossmintCheckoutEvent, PaymentElement } from "@crossmint/client-sdk-base";
-
-export function CrossmintPaymentElement(props: PaymentElement) {
-    const [height, setHeight] = useState(0);
-    const { getIframeUrl, listenToEvents, emitQueryParams } = crossmintPaymentService(props);
-    const { listenToEvents: listenToUiEvents } = crossmintUiService({ environment: props.environment });
-
-    useEffect(() => {
-        listenToEvents((event: MessageEvent<CrossmintCheckoutEvent>) => props.onEvent?.(event.data));
-    }, [listenToEvents, props.onEvent]);
-
-    useEffect(() => {
-        listenToUiEvents((event: MessageEvent<any>) => {
-            const { type, payload } = event.data;
-
-            switch (type) {
-                case "ui:height.changed":
-                    setHeight(payload.height);
-                    break;
-                default:
-                    return;
-            }
-        });
-    }, []);
-
-    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={{
-                border: "none !important",
-                padding: "0px !important",
-                width: "100% !important",
-                minWidth: "100% !important",
-                overflow: "hidden !important",
-                display: "block !important",
-                userSelect: "none",
-                transform: "translate(0px) !important",
-                opacity: "1",
-                transition: "ease 0s, opacity 0.4s ease 0.1s",
-                height: `${height}px`,
-            }}
-        ></iframe>
-    );
-}
+import React, { useEffect, useState } from "react";
+
+import { crossmintPaymentService, crossmintUiService } from "@crossmint/client-sdk-base";
+import type { CrossmintCheckoutEvent, PaymentElement } from "@crossmint/client-sdk-base";
+
+export function CrossmintPaymentElement(props: PaymentElement) {
+    const [height, setHeight] = useState(0);
+    const { getIframeUrl, listenToEvents, emitQueryParams } = crossmintPaymentService(props);
+    const { listenToEvents: listenToUiEvents } = crossmintUiService({ environment: props.environment });
+
+    useEffect(() => {
+        listenToEvents((event: MessageEvent<CrossmintCheckoutEvent>) => props.onEvent?.(event.data));
+    }, [listenToEvents, props.onEvent]);
+
+    useEffect(() => {
+        listenToUiEvents((event: MessageEvent<any>) => {
+            const { type, payload } = event.data;
+
+            switch (type) {
+                case "ui:height.changed":
+                    setHeight(payload.height);
+                    break;
+                default:
+                    return;
+            }
+        });
+    }, []);
+
+    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={{
+                border: "none !important",
+                padding: "0px !important",
+                width: "100% !important",
+                minWidth: "100% !important",
+                overflow: "hidden !important",
+                display: "block !important",
+                userSelect: "none",
+                transform: "translate(0px) !important",
+                opacity: "1",
+                transition: "ease 0s, opacity 0.4s ease 0.1s",
+                height: `${height}px`,
+            }}
+        ></iframe>
+    );
+}