@crossmint/client-sdk-react-ui 1.0.1-alpha.5 → 1.1.0-alpha.0

package/package.json

@@ -1,22 +1,20 @@
 {
     "name": "@crossmint/client-sdk-react-ui",
-    "version": "1.0.1-alpha.5",
+    "version": "1.1.0-alpha.0",
     "author": "Paella Labs Inc",
     "license": "Apache-2.0",
-    "repository": "https://github.com/CrossMint/crossmint-client-sdk",
+    "repository": "https://github.com/Crossmint/crossmint-client-sdk",
     "type": "module",
     "sideEffects": false,
-    "main": "lib/index.cjs",
-    "module": "lib/index.js",
-    "types": "lib/index.d.ts",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
     "exports": {
-        ".": {
-            "import": "./lib/index.js",
-            "require": "./lib/index.cjs"
-        }
+        "import": "./dist/index.js",
+        "require": "./dist/index.cjs"
     },
     "files": [
-        "lib",
+        "dist",
         "src",
         "LICENSE"
     ],
@@ -24,31 +22,26 @@
         "access": "public"
     },
     "scripts": {
-        "create-version-file": "node -p \"'export const LIB_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/version.ts",
+        "create-version-file": "node -p \"'export const LIB_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/consts/version.ts",
         "version": "yarn run create-version-file && git add .",
         "prebuild": "yarn run create-version-file",
-        "clean": "shx rm -rf lib/*",
-        "build": "yarn clean && tsup src/index.ts --external react,react-dom --format esm,cjs --outDir ./lib --minify --dts",
+        "clean": "shx rm -rf dist/*",
+        "build": "yarn clean && tsup src/index.ts --external react,react-dom --format esm,cjs --outDir ./dist --minify --dts --sourcemap",
         "test": "jest"
     },
     "dependencies": {
-        "@crossmint/client-sdk-base": "^1.0.1-alpha.5",
-        "react-jss": "10.9.2",
-        "uuid": "^8.3.2"
+        "@crossmint/client-sdk-base": "1.1.0-alpha.0",
+        "react-jss": "10.10.0"
     },
     "peerDependencies": {
         "react": ">=17.0.2",
         "react-dom": ">=17.0.2"
     },
     "devDependencies": {
-        "@testing-library/jest-dom": "^5.16.5",
-        "@types/jest": "^27.4.1",
-        "@types/react": "17.0.34",
-        "@types/react-dom": "^17.0.11",
-        "jest": "^27.5.1",
-        "node-fetch": "^3.2.0",
-        "ts-jest": "^27.1.3",
-        "ts-node-dev": "^1.1.8"
+        "@types/react": "18.2.21",
+        "@types/react-dom": "18.2.7",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
     },
-    "gitHead": "8122e1da5afd5e8897ccfcd81d69ea2af42f27e4"
+    "gitHead": "7f6af83afdbea094939a79b9eb942eb758a178eb"
 }

package/src/components/CrossmintCollectionView.test.tsx

@@ -0,0 +1,34 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import { CrossmintNFTCollectionView } from "./CrossmintNFTCollectionView";
+
+const wallets = [{ chain: "solana", publicKey: "12345" }];
+
+describe("when only passing mandatory fields", () => {
+    test("should add them to the iframe query params", () => {
+        render(<CrossmintNFTCollectionView wallets={wallets} />);
+        const iframe = screen.getByRole("nft-collection-view");
+        const src = iframe.getAttribute("src");
+        expect(src).toContain("wallets=%5B%7B%22chain%22%3A%22solana%22%2C%22publicKey%22%3A%2212345%22%7D%5D");
+        expect(src).toContain("clientVersion=");
+    });
+});
+
+describe("when not setting any environment", () => {
+    test("should default to production", () => {
+        render(<CrossmintNFTCollectionView wallets={wallets} />);
+        const iframe = screen.getByRole("nft-collection-view");
+        const src = iframe.getAttribute("src");
+        expect(src).toContain("https://www.crossmint.com/");
+    });
+});
+
+describe("when setting the environment to staging", () => {
+    test("should use the staging url", () => {
+        render(<CrossmintNFTCollectionView wallets={wallets} environment="staging" />);
+        const iframe = screen.getByRole("nft-collection-view");
+        const src = iframe.getAttribute("src");
+        expect(src).toContain("https://staging.crossmint.com/");
+    });
+});

package/src/{CrossmintNFTCollectionView.tsx → components/CrossmintNFTCollectionView.tsx}

@@ -1,12 +1,10 @@
-import * as React from "react";
-
 import {
     NFTCollectionViewProps,
     assertValidNFTCollectionViewProps,
     getNFTCollectionViewSrc,
 } from "@crossmint/client-sdk-base";
 
-import { LIB_VERSION } from "./version";
+import { LIB_VERSION } from "../consts/version";
 
 export function CrossmintNFTCollectionView(props: NFTCollectionViewProps) {
     assertValidNFTCollectionViewProps(props);

package/src/components/CrossmintNFTDetail.test.tsx

@@ -0,0 +1,36 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import { NFT } from "@crossmint/client-sdk-base";
+
+import { CrossmintNFTDetail } from "./CrossmintNFTDetail";
+
+const nft: NFT = { chain: "ethereum", contractAddress: "0x12345", tokenId: "12" };
+
+describe("when only passing mandatory fields", () => {
+    test("should add them to the iframe query params", () => {
+        render(<CrossmintNFTDetail nft={nft} />);
+        const iframe = screen.getByRole("nft-details");
+        const src = iframe.getAttribute("src");
+        expect(src).toContain("/sdk/wallets/tokens/ethereum:0x12345:12");
+        expect(src).toContain("clientVersion=");
+    });
+});
+
+describe("when not setting any environment", () => {
+    test("should default to production", () => {
+        render(<CrossmintNFTDetail nft={nft} />);
+        const iframe = screen.getByRole("nft-details");
+        const src = iframe.getAttribute("src");
+        expect(src).toContain("https://www.crossmint.com/");
+    });
+});
+
+describe("when setting the environment to staging", () => {
+    test("should use the staging url", () => {
+        render(<CrossmintNFTDetail nft={nft} environment="staging" />);
+        const iframe = screen.getByRole("nft-details");
+        const src = iframe.getAttribute("src");
+        expect(src).toContain("https://staging.crossmint.com/");
+    });
+});

package/src/{CrossmintNFTDetail.tsx → components/CrossmintNFTDetail.tsx}

@@ -1,8 +1,6 @@
-import * as React from "react";
-
 import { NFTDetailProps, assertValidValidateNFTDetailProps, getNFTDetailSrc } from "@crossmint/client-sdk-base";
 
-import { LIB_VERSION } from "./version";
+import { LIB_VERSION } from "../consts/version";
 
 export function CrossmintNFTDetail(props: NFTDetailProps) {
     assertValidValidateNFTDetailProps(props);

package/src/components/embed/CrossmintPaymentElement.test.tsx

@@ -0,0 +1,78 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import { CrossmintEvents } from "@crossmint/client-sdk-base";
+
+import { CrossmintPaymentElement } from ".";
+
+const embeddedCheckoutProps = {
+    clientId: "db218e78-d042-4761-83af-3c4e5e6659dd",
+};
+
+describe("CrossmintPaymentElement", () => {
+    it("renders an iframe with the correct props", () => {
+        render(<CrossmintPaymentElement {...embeddedCheckoutProps} />);
+        const iframe = screen.getByRole("crossmint-embedded-checkout.iframe");
+
+        expect(iframe).toHaveAttribute("src");
+        expect(iframe).toHaveAttribute("id", "crossmint-embedded-checkout.iframe");
+        expect(iframe).toHaveStyle({
+            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",
+        });
+    });
+
+    it("calls the onEvent prop when a CrossmintEvents is received", () => {
+        const onEvent = jest.fn();
+        render(<CrossmintPaymentElement {...embeddedCheckoutProps} onEvent={onEvent} environment="" />);
+        screen.getByRole("crossmint-embedded-checkout.iframe");
+
+        // Simulate receiving a CrossmintEvents message
+        const eventData = { type: CrossmintEvents.QUOTE_STATUS_CHANGED, payload: {} };
+        const event = new MessageEvent("message", { data: eventData, origin: "https://www.crossmint.com" });
+        window.dispatchEvent(event);
+
+        expect(onEvent).toHaveBeenCalledWith(eventData);
+    });
+
+    it("does not call the onEvent prop when a different origin than the environment is received in the event", () => {
+        const onEvent = jest.fn();
+        render(<CrossmintPaymentElement {...embeddedCheckoutProps} onEvent={onEvent} environment="" />);
+        screen.getByRole("crossmint-embedded-checkout.iframe");
+
+        // Simulate receiving a CrossmintEvents message
+        const eventData = { type: CrossmintEvents.QUOTE_STATUS_CHANGED, payload: {} };
+        const event = new MessageEvent("message", { data: eventData, origin: "http://hacker.com" });
+        window.dispatchEvent(event);
+
+        expect(onEvent).not.toHaveBeenCalled();
+    });
+
+    it("should add the `whPassThroughArgs` prop when passed", async () => {
+        render(<CrossmintPaymentElement {...embeddedCheckoutProps} whPassThroughArgs={{ hello: "hi" }} />);
+        const iframe = screen.getByRole("crossmint-embedded-checkout.iframe");
+
+        expect(iframe.getAttribute("src")).toContain("whPassThroughArgs=%7B%22hello%22%3A%22hi%22%7D");
+    });
+
+    it("should add the clientId when passing the collectionId prop", () => {
+        render(<CrossmintPaymentElement collectionId={embeddedCheckoutProps.clientId} />);
+        const iframe = screen.getByRole("crossmint-embedded-checkout.iframe");
+
+        expect(iframe.getAttribute("src")).toContain(`clientId=${embeddedCheckoutProps.clientId}`);
+    });
+
+    it("should add projectId when added", () => {
+        render(<CrossmintPaymentElement collectionId={embeddedCheckoutProps.clientId} projectId="123" />);
+        const iframe = screen.getByRole("crossmint-embedded-checkout.iframe");
+
+        expect(iframe.getAttribute("src")).toContain("projectId=123");
+    });
+});

package/src/components/embed/CryptoEmbeddedCheckout.tsx

@@ -0,0 +1,13 @@
+import { CryptoEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
+
+import CrossmintEmbeddedCheckoutIFrame from "./EmbeddedCheckoutIFrame";
+
+export function CrossmintCryptoEmbeddedCheckout(props: CryptoEmbeddedCheckoutProps) {
+    const { signer } = props;
+
+    if (signer == null) {
+        throw new Error("Invalid parameters: signer is required in versions < 2.0.0");
+    }
+
+    return <CrossmintEmbeddedCheckoutIFrame {...props} />;
+}

package/src/components/embed/EmbeddedCheckoutIFrame.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+
+import { crossmintIFrameService } from "@crossmint/client-sdk-base";
+import { CrossmintEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
+
+export default function CrossmintEmbeddedCheckoutIFrame(props: CrossmintEmbeddedCheckoutProps) {
+    const { getUrl, listenToEvents, listenToInternalEvents } = crossmintIFrameService(props);
+
+    const [height, setHeight] = useState(0);
+    const [url] = useState(getUrl(props));
+
+    // Public events
+    useEffect(() => {
+        const clearListener = listenToEvents((event) => {
+            props.onEvent?.(event.data);
+        });
+
+        return () => {
+            clearListener();
+        };
+    }, []);
+
+    // Internal events
+    useEffect(() => {
+        const clearListener = listenToInternalEvents((event) => {
+            const { type, payload } = event.data;
+
+            switch (type) {
+                case "ui:height.changed":
+                    setHeight(payload.height);
+                    break;
+                default:
+                    return;
+            }
+        });
+
+        return () => {
+            clearListener();
+        };
+    }, []);
+
+    // TODO: Emit updatable parameters
+
+    return (
+        <iframe
+            src={url}
+            id="crossmint-embedded-checkout.iframe"
+            role="crossmint-embedded-checkout.iframe"
+            allow="payment *"
+            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`,
+            }}
+        />
+    );
+}

package/src/{CrossmintPaymentElement.tsx → components/embed/FiatPaymentElement_OLD.tsx}

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-import type { PaymentElement } from "@crossmint/client-sdk-base";
-import { crossmintPaymentService, crossmintUiService } from "@crossmint/client-sdk-base";
+import type { FiatEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
+import { crossmintPaymentService_OLD, crossmintUiService_OLD } from "@crossmint/client-sdk-base";
 
-export function CrossmintPaymentElement(props: PaymentElement) {
+export function CrossmintFiatPaymentElement_OLD(props: FiatEmbeddedCheckoutProps) {
     const [height, setHeight] = useState(0);
-    const { getIframeUrl, listenToEvents, emitQueryParams } = crossmintPaymentService(props);
-    const { listenToEvents: listenToUiEvents } = crossmintUiService({ environment: props.environment });
+    const { getIframeUrl, listenToEvents, emitQueryParams } = crossmintPaymentService_OLD(props);
+    const { listenToEvents: listenToUiEvents } = crossmintUiService_OLD({ environment: props.environment });
     const [url] = useState(getIframeUrl());
 
     useEffect(() => {
@@ -51,8 +51,8 @@ export function CrossmintPaymentElement(props: PaymentElement) {
     return (
         <iframe
             src={url}
-            id="iframe-crossmint-payment-element"
-            role="iframe-crossmint-payment-element"
+            id="crossmint-embedded-checkout.iframe"
+            role="crossmint-embedded-checkout.iframe"
             allow="payment *"
             style={{
                 border: "none !important",

package/src/components/embed/index.tsx

@@ -0,0 +1,20 @@
+import {
+    CrossmintEmbeddedCheckoutProps,
+    isCryptoEmbeddedCheckoutProps,
+    isFiatEmbeddedCheckoutProps,
+} from "@crossmint/client-sdk-base";
+
+import { CrossmintCryptoEmbeddedCheckout } from "./CryptoEmbeddedCheckout";
+import { CrossmintFiatPaymentElement_OLD } from "./FiatPaymentElement_OLD";
+
+// TODO: Rename to CrossmintEmbeddedCheckout
+export function CrossmintPaymentElement(props: CrossmintEmbeddedCheckoutProps) {
+    if (isFiatEmbeddedCheckoutProps(props)) {
+        return <CrossmintFiatPaymentElement_OLD {...props} />;
+    }
+    if (isCryptoEmbeddedCheckoutProps(props)) {
+        throw new Error("Unsupported: Fiat is the only supported payment method.");
+        // return <CrossmintCryptoEmbeddedCheckout {...props} />;
+    }
+    throw new Error("Unsupported: Fiat is the only supported payment method.");
+}

package/src/components/hosted/CrossmintPayButton.test.tsx

@@ -0,0 +1,187 @@
+import "@testing-library/jest-dom";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+import { CrossmintPayButton } from ".";
+import { LIB_VERSION } from "../../consts/version";
+
+// TODO(#60): create a global service for this to work everywhere and to be able to customize resolved/rejected responses
+const fetchReturns = Promise.resolve({
+    json: () => Promise.resolve({}),
+}) as any;
+global.fetch = jest.fn(() => fetchReturns);
+
+// TODO(#61): make this automatically mocked in every test suite
+const openReturns = {} as Window;
+global.open = jest.fn(() => openReturns);
+global.console = {
+    log: jest.fn(),
+    error: jest.fn(),
+    warn: jest.fn(),
+} as any;
+
+const defaultProps = {
+    clientId: "a4e1bfcc-9884-11ec-b909-0242ac120002",
+};
+
+afterEach(() => {
+    jest.clearAllMocks();
+});
+
+describe("CrossmintPayButton", () => {
+    test("should open window with correct url", async () => {
+        render(<CrossmintPayButton {...defaultProps} />);
+
+        await act(async () => {
+            fireEvent.click(screen.getByText("Buy with credit card"));
+        });
+
+        const urlOrigin = "https://www.crossmint.com";
+
+        const mintQueryParams = new URLSearchParams({
+            clientId: defaultProps.clientId,
+            clientName: "client-sdk-react-ui",
+            clientVersion: LIB_VERSION,
+            locale: "en-US",
+            currency: "usd",
+        }).toString();
+
+        const callbackUrl = encodeURIComponent(`${urlOrigin}/checkout/mint?${mintQueryParams}`);
+
+        const signinURLParams = new URLSearchParams({
+            locale: "en-US",
+            currency: "usd",
+            email: "",
+        }).toString();
+
+        const expectedURL = `${urlOrigin}/signin?${signinURLParams}&callbackUrl=${callbackUrl}`;
+        expect(global.open).toHaveBeenCalledWith(
+            expectedURL,
+            "popUpWindow",
+            "height=750,width=400,left=312,top=9,resizable=yes,scrollbars=yes,toolbar=yes,menubar=true,location=no,directories=no, status=yes"
+        );
+    });
+
+    test("should add the `whPassThroughArgs` prop on the window url", async () => {
+        const whPassThroughArgs = { hello: "hi" };
+        render(<CrossmintPayButton {...defaultProps} whPassThroughArgs={whPassThroughArgs} />);
+
+        await act(async () => {
+            fireEvent.click(screen.getByText("Buy with credit card"));
+        });
+        expect(global.open).toHaveBeenCalledWith(
+            expect.stringContaining("whPassThroughArgs%3D%257B%2522hello%2522%253A%2522hi%2522%257D"),
+            expect.anything(),
+            expect.anything()
+        );
+    });
+
+    describe("when passing the prepay prop", () => {
+        test("should pass the prepay query param", async () => {
+            render(<CrossmintPayButton {...defaultProps} prepay />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining("prepay%3Dtrue"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing the prepay prop as false", () => {
+        test("should not pass the prepay query param", async () => {
+            render(<CrossmintPayButton {...defaultProps} prepay={false} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.not.stringContaining("prepay"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing the loginEmail prop", () => {
+        test("should pass an email in the email query param", async () => {
+            render(<CrossmintPayButton {...defaultProps} loginEmail="user@gmail.com" />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining("email=user%40gmail.com"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+
+        test("should pass the email query param empty if loginEmail is empty", async () => {
+            render(<CrossmintPayButton {...defaultProps} loginEmail="" />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining("email=&"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+
+        test("should pass the email query param empty if loginEmail is not present as a param", async () => {
+            render(<CrossmintPayButton {...defaultProps} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining("email=&"),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing collectionId instead of clientId", () => {
+        test("should open window with correct url", async () => {
+            render(<CrossmintPayButton collectionId={defaultProps.clientId} />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining(`clientId%3D${defaultProps.clientId}`),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing projectId", () => {
+        test("should open window with projectId included in query params", async () => {
+            render(<CrossmintPayButton {...defaultProps} projectId="123" />);
+
+            await act(async () => {
+                fireEvent.click(screen.getByText("Buy with credit card"));
+            });
+
+            expect(global.open).toHaveBeenCalledWith(
+                expect.stringContaining(`projectId%3D123`),
+                expect.anything(),
+                expect.anything()
+            );
+        });
+    });
+
+    describe("when passing getButtonText prop", () => {
+        test("should show custom text", async () => {
+            render(<CrossmintPayButton {...defaultProps} getButtonText={() => "Custom text"} />);
+            expect(screen.getByText("Custom text")).toBeInTheDocument();
+        });
+    });
+});

package/src/{CrossmintPayButton.tsx → components/hosted/CrossmintPayButton.tsx}

@@ -1,12 +1,21 @@
-import React, { MouseEvent, useMemo } from "react";
+import { CSSProperties, MouseEvent, useMemo } from "react";
 import { useState } from "react";
 
-import { clientNames, crossmintModalService, crossmintPayButtonService } from "@crossmint/client-sdk-base";
+import {
+    CrossmintPayButtonProps,
+    clientNames,
+    crossmintModalService,
+    crossmintPayButtonService,
+} from "@crossmint/client-sdk-base";
 
+import { LIB_VERSION } from "../../consts/version";
+import useEnvironment from "../../hooks/useEnvironment";
 import { formatProps, useStyles } from "./styles";
-import { CrossmintPayButtonReactProps } from "./types";
-import useEnvironment from "./useEnvironment";
-import { LIB_VERSION } from "./version";
+
+export type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    style?: CSSProperties;
+};
 
 export function CrossmintPayButton(buttonProps: CrossmintPayButtonReactProps) {
     const {

package/src/components/hosted/index.ts

@@ -0,0 +1 @@
+export * from "./CrossmintPayButton";

package/src/{styles/index.ts → components/hosted/styles.ts}

@@ -8,6 +8,7 @@ interface CustomStylingProps {
 }
 
 const themeIsLight = (theme: string) => theme === "light";
+
 export const formatProps = (theme: string): CustomStylingProps => ({
     buttonBgColor: themeIsLight(theme) ? "white" : DARK_BG,
     paragraphColor: themeIsLight(theme) ? "black" : "white",

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./CrossmintNFTCollectionView";
+export * from "./CrossmintNFTDetail";
+
+export * from "./embed";
+export * from "./hosted";

package/src/consts/version.ts

@@ -0,0 +1 @@
+export const LIB_VERSION = "1.1.0-alpha.0";

package/src/{useEnvironment.ts → hooks/useEnvironment.ts}

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
-
-export default function useEnvironment() {
-    const [isServerSideRendering, setIsServerSideRendering] = useState(true);
-    useEffect(() => {
-        setIsServerSideRendering(false);
-    }, []);
-
-    return { isServerSideRendering };
-}
+import { useEffect, useState } from "react";
+
+export default function useEnvironment() {
+    const [isServerSideRendering, setIsServerSideRendering] = useState(true);
+    useEffect(() => {
+        setIsServerSideRendering(false);
+    }, []);
+
+    return { isServerSideRendering };
+}

package/src/index.ts

@@ -1,6 +1,4 @@
-export * from "./CrossmintPayButton";
-export * from "./CrossmintNFTCollectionView";
-export * from "./CrossmintNFTDetail";
-export * from "./CrossmintPaymentElement";
-export { CheckoutEvents, useCrossmintEvents } from "@crossmint/client-sdk-base";
-export type { CrossmintCheckoutEvent, CheckoutEventMap, CrossmintCheckoutEventUnion } from "@crossmint/client-sdk-base";
+export * from "./components";
+
+export { CrossmintEvents, useCrossmintEvents } from "@crossmint/client-sdk-base";
+export type { CrossmintEvent, CrossmintEventMap } from "@crossmint/client-sdk-base";