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

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

package/src/styles/index.ts

@@ -1,50 +1,50 @@
-import { createUseStyles } from "react-jss";
-
-const DARK_BG = "#1e1e1e";
-
-interface CustomStylingProps {
-    buttonBgColor?: string;
-    paragraphColor?: string;
-}
-
-const themeIsLight = (theme: string) => theme === "light";
-export const formatProps = (theme: string): CustomStylingProps => ({
-    buttonBgColor: themeIsLight(theme) ? "white" : DARK_BG,
-    paragraphColor: themeIsLight(theme) ? "black" : "white",
-});
-
-export const useStyles = 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 }: CustomStylingProps) => buttonBgColor,
-
-        "&:hover:enabled": {
-            opacity: "0.6",
-            cursor: "pointer",
-        },
-    },
-    crossmintImg: {
-        width: "21px",
-        height: "21px",
-        "margin-right": "0.875rem",
-    },
-    crossmintParagraph: {
-        color: ({ paragraphColor }: CustomStylingProps) => paragraphColor,
-        margin: "0",
-    },
-});
+import { createUseStyles } from "react-jss";
+
+const DARK_BG = "#1e1e1e";
+
+interface CustomStylingProps {
+    buttonBgColor?: string;
+    paragraphColor?: string;
+}
+
+const themeIsLight = (theme: string) => theme === "light";
+export const formatProps = (theme: string): CustomStylingProps => ({
+    buttonBgColor: themeIsLight(theme) ? "white" : DARK_BG,
+    paragraphColor: themeIsLight(theme) ? "black" : "white",
+});
+
+export const useStyles = 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 }: CustomStylingProps) => buttonBgColor,
+
+        "&:hover:enabled": {
+            opacity: "0.6",
+            cursor: "pointer",
+        },
+    },
+    crossmintImg: {
+        width: "21px",
+        height: "21px",
+        "margin-right": "0.875rem",
+    },
+    crossmintParagraph: {
+        color: ({ paragraphColor }: CustomStylingProps) => paragraphColor,
+        margin: "0",
+    },
+});