@crossmint/client-sdk-react-ui 1.0.1-alpha.6 → 1.1.0-alpha.1

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CrossmintNFTCollectionView.tsx","../src/consts/version.ts","../src/components/CrossmintNFTDetail.tsx","../src/components/embed/index.tsx","../src/components/embed/crypto/CryptoEmbeddedCheckout.tsx","../src/components/embed/crypto/CryptoEmbeddedCheckoutIFrame.tsx","../src/components/embed/EmbeddedCheckoutIFrame.tsx","../src/components/embed/fiat/FiatPaymentElement_OLD.tsx","../src/components/hosted/CrossmintPayButton.tsx","../src/hooks/useEnvironment.ts","../src/components/hosted/styles.ts","../src/index.ts"],"sourcesContent":["import {\n    NFTCollectionViewProps,\n    assertValidNFTCollectionViewProps,\n    getNFTCollectionViewSrc,\n} from \"@crossmint/client-sdk-base\";\n\nimport { LIB_VERSION } from \"../consts/version\";\n\nexport function CrossmintNFTCollectionView(props: NFTCollectionViewProps) {\n    assertValidNFTCollectionViewProps(props);\n\n    const src = getNFTCollectionViewSrc(props, LIB_VERSION);\n\n    return (\n        <iframe\n            src={src}\n            width=\"100%\"\n            height=\"100%\"\n            style={{\n                flexGrow: \"1\",\n                border: \"none\",\n                margin: \"0\",\n                padding: \"0\",\n            }}\n            role=\"nft-collection-view\"\n        />\n    );\n}\n","export const LIB_VERSION = \"1.1.0-alpha.1\";\n","import { NFTDetailProps, assertValidValidateNFTDetailProps, getNFTDetailSrc } from \"@crossmint/client-sdk-base\";\n\nimport { LIB_VERSION } from \"../consts/version\";\n\nexport function CrossmintNFTDetail(props: NFTDetailProps) {\n    assertValidValidateNFTDetailProps(props);\n\n    const src = getNFTDetailSrc(props, LIB_VERSION);\n\n    return (\n        <iframe\n            src={src}\n            width=\"100%\"\n            height=\"100%\"\n            style={{\n                flexGrow: \"1\",\n                border: \"none\",\n                margin: \"0\",\n                padding: \"0\",\n            }}\n            role=\"nft-details\"\n        />\n    );\n}\n","import {\n    CrossmintEmbeddedCheckoutProps,\n    isCryptoEmbeddedCheckoutProps,\n    isFiatEmbeddedCheckoutProps,\n} from \"@crossmint/client-sdk-base\";\n\nimport { CrossmintCryptoEmbeddedCheckout } from \"./crypto/CryptoEmbeddedCheckout\";\nimport { CrossmintFiatPaymentElement_OLD } from \"./fiat/FiatPaymentElement_OLD\";\n\n// TODO: Rename to CrossmintEmbeddedCheckout\nexport function CrossmintPaymentElement(props: CrossmintEmbeddedCheckoutProps) {\n    if (isFiatEmbeddedCheckoutProps(props)) {\n        return <CrossmintFiatPaymentElement_OLD {...props} />;\n    }\n    if (isCryptoEmbeddedCheckoutProps(props)) {\n        return <CrossmintCryptoEmbeddedCheckout {...props} />;\n    }\n    throw new Error(\"Unsupported: Fiat is the only supported payment method.\");\n}\n","import { CryptoEmbeddedCheckoutProps, isCryptoEmbeddedCheckoutPropsWithSigner } from \"@crossmint/client-sdk-base\";\n\nimport CryptoEmbeddedCheckoutIFrame from \"./CryptoEmbeddedCheckoutIFrame\";\n\nexport function CrossmintCryptoEmbeddedCheckout(props: CryptoEmbeddedCheckoutProps) {\n    if (!isCryptoEmbeddedCheckoutPropsWithSigner(props)) {\n        throw new Error(\"Invalid parameters: signer is required in versions < 2.0.0\");\n    }\n\n    return <CryptoEmbeddedCheckoutIFrame {...props} />;\n}\n","import bs58 from \"bs58\";\nimport { useEffect } from \"react\";\n\nimport {\n    CryptoEmbeddedCheckoutPropsWithSigner,\n    ETHEmbeddedCheckoutSigner,\n    IncomingInternalEvent,\n    IncomingInternalEvents,\n    OutgoingInternalEvents,\n    SOLEmbeddedCheckoutSigner,\n    crossmintIFrameService,\n    embeddedCheckoutPropsToUpdatableParamsPayload,\n} from \"@crossmint/client-sdk-base\";\n\nimport CrossmintEmbeddedCheckoutIFrame from \"../EmbeddedCheckoutIFrame\";\n\nexport default function CryptoEmbeddedCheckoutIFrame(props: CryptoEmbeddedCheckoutPropsWithSigner) {\n    const { emitInternalEvent } = crossmintIFrameService(props);\n\n    const { signer, paymentMethod } = props;\n\n    function onInternalEvent(event: IncomingInternalEvent) {\n        const { type, payload } = event;\n\n        if (type === IncomingInternalEvents.CRYPTO_PAYMENT_INCOMING_TRANSACTION) {\n            const { serializedTransaction } = payload;\n            console.log(\"[Crossmint] Received incoming transaction\", serializedTransaction);\n            handleIncomingTransaction(serializedTransaction);\n        }\n    }\n\n    async function handleIncomingTransaction(serializedTransaction: string) {\n        try {\n            let txId: string;\n            switch (paymentMethod) {\n                case \"SOL\":\n                    txId = await handleSOLTransaction(signer, serializedTransaction);\n                    break;\n                case \"ETH\":\n                    txId = await handleETHTransaction(signer, serializedTransaction);\n                    break;\n                default:\n                    throw new Error(`Unsupported payment method ${paymentMethod}`);\n            }\n\n            console.log(\"[Crossmint] Signed and sent transaction\", txId);\n            emitInternalEvent({\n                type: OutgoingInternalEvents.CRYPTO_PAYMENT_USER_ACCEPTED,\n                payload: {\n                    txId,\n                },\n            });\n        } catch (e) {\n            console.error(\"[Crossmint] Failed to sign and send transaction\", e);\n            emitInternalEvent({\n                type: OutgoingInternalEvents.CRYPTO_PAYMENT_USER_REJECTED,\n                payload: {},\n            });\n        }\n    }\n\n    async function handleSOLTransaction(signer: SOLEmbeddedCheckoutSigner, serializedTransaction: string) {\n        // @ts-ignore - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n        const { Transaction } = await import(\"@solana/web3.js\");\n        const transaction = Transaction.from(bs58.decode(serializedTransaction));\n        console.log(\"[Crossmint] Deserialized SOL transaction\", transaction);\n\n        return await signer.signAndSendTransaction(transaction);\n    }\n\n    async function handleETHTransaction(signer: ETHEmbeddedCheckoutSigner, serializedTransaction: string) {\n        // @ts-ignore - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n        const { parse: parseTransaction } = await import(\"@ethersproject/transactions\");\n        const transaction = parseTransaction(serializedTransaction);\n        console.log(\"[Crossmint] Deserialized ETH transaction\", transaction);\n\n        return await signer.signAndSendTransaction(transaction);\n    }\n\n    useEffect(() => {\n        emitInternalEvent({\n            type: \"params-update\",\n            payload: embeddedCheckoutPropsToUpdatableParamsPayload(props),\n        });\n    }, [props.signer, props.recipient, props.mintConfig, props.locale, props.whPassThroughArgs]);\n\n    return <CrossmintEmbeddedCheckoutIFrame onInternalEvent={onInternalEvent} {...props} />;\n}\n","import { useEffect, useState } from \"react\";\n\nimport { IncomingInternalEvent, IncomingInternalEvents, crossmintIFrameService } from \"@crossmint/client-sdk-base\";\nimport { CrossmintEmbeddedCheckoutProps } from \"@crossmint/client-sdk-base\";\n\ntype CrossmintEmbeddedCheckoutIFrameProps = CrossmintEmbeddedCheckoutProps & {\n    onInternalEvent?: (event: IncomingInternalEvent) => void;\n};\n\nexport default function CrossmintEmbeddedCheckoutIFrame({\n    onInternalEvent,\n    ...props\n}: CrossmintEmbeddedCheckoutIFrameProps) {\n    const { getUrl, listenToEvents, listenToInternalEvents, emitInternalEvent } = crossmintIFrameService(props);\n\n    const [height, setHeight] = useState(0);\n    const [url] = useState(getUrl(props));\n\n    // Public events\n    useEffect(() => {\n        const clearListener = listenToEvents((event) => {\n            props.onEvent?.(event.data);\n        });\n\n        return () => {\n            clearListener();\n        };\n    }, []);\n\n    // Internal events\n    useEffect(() => {\n        const clearListener = listenToInternalEvents((event) => {\n            const { type, payload } = event.data;\n\n            if (type === IncomingInternalEvents.UI_HEIGHT_CHANGED) {\n                setHeight(payload.height);\n            }\n\n            onInternalEvent?.(event.data);\n        });\n\n        return () => {\n            clearListener();\n        };\n    }, []);\n\n    // TODO: Emit updatable parameters\n\n    return (\n        <iframe\n            src={url}\n            id=\"crossmint-embedded-checkout.iframe\"\n            role=\"crossmint-embedded-checkout.iframe\"\n            allow=\"payment *\"\n            style={{\n                border: \"none !important\",\n                padding: \"0px !important\",\n                width: \"100% !important\",\n                minWidth: \"100% !important\",\n                overflow: \"hidden !important\",\n                display: \"block !important\",\n                userSelect: \"none\",\n                transform: \"translate(0px) !important\",\n                opacity: \"1\",\n                transition: \"ease 0s, opacity 0.4s ease 0.1s\",\n                height: `${height}px`,\n            }}\n        />\n    );\n}\n","import { useEffect, useState } from \"react\";\n\nimport type { FiatEmbeddedCheckoutProps } from \"@crossmint/client-sdk-base\";\nimport { crossmintPaymentService_OLD, crossmintUiService_OLD } from \"@crossmint/client-sdk-base\";\n\nexport function CrossmintFiatPaymentElement_OLD(props: FiatEmbeddedCheckoutProps) {\n    const [height, setHeight] = useState(0);\n    const { getIframeUrl, listenToEvents, emitQueryParams } = crossmintPaymentService_OLD(props);\n    const { listenToEvents: listenToUiEvents } = crossmintUiService_OLD({ environment: props.environment });\n    const [url] = useState(getIframeUrl());\n\n    useEffect(() => {\n        const clearListener = listenToEvents((event) => props.onEvent?.(event.data));\n\n        return () => {\n            if (clearListener) {\n                clearListener();\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        const clearListener = listenToUiEvents((event: MessageEvent<any>) => {\n            const { type, payload } = event.data;\n\n            switch (type) {\n                case \"ui:height.changed\":\n                    setHeight(payload.height);\n                    break;\n                default:\n                    return;\n            }\n        });\n\n        return () => {\n            if (clearListener) {\n                clearListener();\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        emitQueryParams({\n            recipient: props.recipient,\n            mintConfig: props.mintConfig,\n            locale: props.locale,\n            whPassThroughArgs: props.whPassThroughArgs,\n        });\n    }, [props.recipient, props.mintConfig, props.locale, props.whPassThroughArgs]);\n\n    return (\n        <iframe\n            src={url}\n            id=\"crossmint-embedded-checkout.iframe\"\n            role=\"crossmint-embedded-checkout.iframe\"\n            allow=\"payment *\"\n            style={{\n                border: \"none !important\",\n                padding: \"0px !important\",\n                width: \"100% !important\",\n                minWidth: \"100% !important\",\n                overflow: \"hidden !important\",\n                display: \"block !important\",\n                userSelect: \"none\",\n                transform: \"translate(0px) !important\",\n                opacity: \"1\",\n                transition: \"ease 0s, opacity 0.4s ease 0.1s\",\n                height: `${height}px`,\n            }}\n        ></iframe>\n    );\n}\n","import { CSSProperties, MouseEvent, useMemo } from \"react\";\nimport { useState } from \"react\";\n\nimport {\n    CrossmintPayButtonProps,\n    clientNames,\n    crossmintModalService,\n    crossmintPayButtonService,\n} from \"@crossmint/client-sdk-base\";\n\nimport { LIB_VERSION } from \"../../consts/version\";\nimport useEnvironment from \"../../hooks/useEnvironment\";\nimport { formatProps, useStyles } from \"./styles\";\n\nexport type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {\n    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n    style?: CSSProperties;\n};\n\nexport function CrossmintPayButton(buttonProps: CrossmintPayButtonReactProps) {\n    const {\n        className,\n        disabled,\n        onClick,\n        style,\n        tabIndex,\n        theme = \"dark\",\n        mintTo,\n        emailTo,\n        listingId,\n        auctionId,\n        showOverlay = true,\n        mintConfig,\n        whPassThroughArgs,\n        environment,\n        paymentMethod,\n        preferredSigninMethod,\n        dismissOverlayOnClick,\n        prepay,\n        locale = \"en-US\",\n        currency = \"usd\",\n        successCallbackURL = \"\",\n        failureCallbackURL = \"\",\n        loginEmail = \"\",\n        projectId,\n        getButtonText,\n        ...props\n    } = buttonProps;\n\n    const collectionId = \"clientId\" in props ? props.clientId : props.collectionId;\n\n    const [connecting, setConnecting] = useState(false);\n    const { isServerSideRendering } = useEnvironment();\n\n    const { connect } = crossmintModalService({\n        clientId: collectionId,\n        projectId,\n        showOverlay,\n        dismissOverlayOnClick,\n        setConnecting,\n        libVersion: LIB_VERSION,\n        environment,\n        clientName: clientNames.reactUi,\n        locale,\n        currency,\n        successCallbackURL,\n        failureCallbackURL,\n        loginEmail,\n    });\n\n    const { getButtonText: getButtonTextInternal, handleClick } = crossmintPayButtonService({\n        onClick,\n        connecting,\n        paymentMethod,\n        locale,\n    });\n\n    const _handleClick = (event: MouseEvent<HTMLButtonElement>) =>\n        handleClick(event, () => {\n            connect(\n                mintConfig,\n                mintTo,\n                emailTo,\n                listingId,\n                whPassThroughArgs,\n                paymentMethod,\n                preferredSigninMethod,\n                prepay\n            );\n        });\n\n    const classes = useStyles(formatProps(theme));\n\n    const content = useMemo(() => {\n        return (\n            <span className={classes.crossmintParagraph} role=\"button-paragraph\">\n                {getButtonText != null\n                    ? getButtonText(connecting, paymentMethod || \"fiat\")\n                    : getButtonTextInternal(connecting)}\n            </span>\n        );\n    }, [connecting, getButtonText, paymentMethod]);\n\n    return (\n        <>\n            {!isServerSideRendering && (\n                <button\n                    className={`${classes.crossmintButton} ${className || \"\"}`}\n                    disabled={disabled}\n                    onClick={_handleClick}\n                    style={{ ...style }}\n                    tabIndex={tabIndex}\n                >\n                    <img\n                        className={classes.crossmintImg}\n                        src=\"https://www.crossmint.io/assets/crossmint/logo.svg\"\n                        alt=\"Crossmint logo\"\n                    />\n                    {content}\n                </button>\n            )}\n        </>\n    );\n}\n","import { useEffect, useState } from \"react\";\r\n\r\nexport default function useEnvironment() {\r\n    const [isServerSideRendering, setIsServerSideRendering] = useState(true);\r\n    useEffect(() => {\r\n        setIsServerSideRendering(false);\r\n    }, []);\r\n\r\n    return { isServerSideRendering };\r\n}\r\n","import { createUseStyles } from \"react-jss\";\n\nconst DARK_BG = \"#1e1e1e\";\n\ninterface CustomStylingProps {\n    buttonBgColor?: string;\n    paragraphColor?: string;\n}\n\nconst themeIsLight = (theme: string) => theme === \"light\";\n\nexport const formatProps = (theme: string): CustomStylingProps => ({\n    buttonBgColor: themeIsLight(theme) ? \"white\" : DARK_BG,\n    paragraphColor: themeIsLight(theme) ? \"black\" : \"white\",\n});\n\nexport const useStyles = createUseStyles({\n    \"@global\": {\n        \"@import\":\n            \"url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap')\",\n    },\n    crossmintButton: {\n        display: \"flex\",\n        \"flex-direction\": \"row\",\n        \"align-items\": \"center\",\n        padding: \"0.875rem 0.875rem\",\n        \"font-weight\": \"900\",\n        transition: \"opacity ease-in-out 0.25s\",\n        \"border-radius\": \"0.5rem\",\n        \"font-family\": `\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif`,\n        outline: \"none\",\n        border: \"none\",\n        \"box-shadow\": \"0px 8px 15px rgba(0, 0, 0, 0.1)\",\n        \"justify-content\": \"center\",\n        background: ({ buttonBgColor }: CustomStylingProps) => buttonBgColor,\n\n        \"&:hover:enabled\": {\n            opacity: \"0.6\",\n            cursor: \"pointer\",\n        },\n    },\n    crossmintImg: {\n        width: \"21px\",\n        height: \"21px\",\n        \"margin-right\": \"0.875rem\",\n    },\n    crossmintParagraph: {\n        color: ({ paragraphColor }: CustomStylingProps) => paragraphColor,\n        margin: \"0\",\n    },\n});\n","export * from \"./components\";\n\nexport { CrossmintEvents, useCrossmintEvents } from \"@crossmint/client-sdk-base\";\nexport type { CrossmintEvent, CrossmintEventMap } from \"@crossmint/client-sdk-base\";\n"],"mappings":"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","names":["assertValidNFTCollectionViewProps","getNFTCollectionViewSrc","LIB_VERSION","jsx","CrossmintNFTCollectionView","props","assertValidNFTCollectionViewProps","src","getNFTCollectionViewSrc","LIB_VERSION","assertValidValidateNFTDetailProps","getNFTDetailSrc","jsx","CrossmintNFTDetail","props","assertValidValidateNFTDetailProps","src","getNFTDetailSrc","LIB_VERSION","isCryptoEmbeddedCheckoutProps","isFiatEmbeddedCheckoutProps","isCryptoEmbeddedCheckoutPropsWithSigner","bs58","useEffect","IncomingInternalEvents","OutgoingInternalEvents","crossmintIFrameService","embeddedCheckoutPropsToUpdatableParamsPayload","useEffect","useState","IncomingInternalEvents","crossmintIFrameService","jsx","CrossmintEmbeddedCheckoutIFrame","_a","_b","onInternalEvent","props","__objRest","getUrl","listenToEvents","listenToInternalEvents","emitInternalEvent","crossmintIFrameService","height","setHeight","useState","url","useEffect","clearListener","event","type","payload","IncomingInternalEvents","jsx","CryptoEmbeddedCheckoutIFrame","props","emitInternalEvent","crossmintIFrameService","signer","paymentMethod","onInternalEvent","event","type","payload","IncomingInternalEvents","serializedTransaction","handleIncomingTransaction","__async","txId","handleSOLTransaction","handleETHTransaction","OutgoingInternalEvents","e","Transaction","transaction","bs58","parseTransaction","useEffect","embeddedCheckoutPropsToUpdatableParamsPayload","CrossmintEmbeddedCheckoutIFrame","__spreadValues","jsx","CrossmintCryptoEmbeddedCheckout","props","isCryptoEmbeddedCheckoutPropsWithSigner","CryptoEmbeddedCheckoutIFrame","__spreadValues","useEffect","useState","crossmintPaymentService_OLD","crossmintUiService_OLD","jsx","CrossmintFiatPaymentElement_OLD","props","height","setHeight","getIframeUrl","listenToEvents","emitQueryParams","listenToUiEvents","url","clearListener","event","_a","type","payload","jsx","CrossmintPaymentElement","props","isFiatEmbeddedCheckoutProps","CrossmintFiatPaymentElement_OLD","__spreadValues","isCryptoEmbeddedCheckoutProps","CrossmintCryptoEmbeddedCheckout","useMemo","useState","clientNames","crossmintModalService","crossmintPayButtonService","useEffect","useState","useEnvironment","isServerSideRendering","setIsServerSideRendering","createUseStyles","DARK_BG","themeIsLight","theme","formatProps","useStyles","buttonBgColor","paragraphColor","Fragment","jsx","jsxs","CrossmintPayButton","buttonProps","_a","className","disabled","onClick","style","tabIndex","theme","mintTo","emailTo","listingId","auctionId","showOverlay","mintConfig","whPassThroughArgs","environment","paymentMethod","preferredSigninMethod","dismissOverlayOnClick","prepay","locale","currency","successCallbackURL","failureCallbackURL","loginEmail","projectId","getButtonText","props","__objRest","collectionId","connecting","setConnecting","useState","isServerSideRendering","useEnvironment","connect","crossmintModalService","LIB_VERSION","clientNames","getButtonTextInternal","handleClick","crossmintPayButtonService","_handleClick","event","classes","useStyles","formatProps","content","useMemo","__spreadValues","CrossmintEvents","useCrossmintEvents"]}

package/package.json

@@ -1,22 +1,20 @@
 {
     "name": "@crossmint/client-sdk-react-ui",
-    "version": "1.0.1-alpha.6",
+    "version": "1.1.0-alpha.1",
     "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,29 @@
         "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.6",
-        "react-jss": "10.9.2",
-        "uuid": "^8.3.2"
+        "@crossmint/client-sdk-base": "1.1.0-alpha.1",
+        "@ethersproject/transactions": "5.7.0",
+        "@solana/web3.js": "1.78.5",
+        "bs58": "5.0.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": "170939ca6cc7ba4e04e38a6a94e2113f77aa30e5"
+    "gitHead": "78dd9eb5b5b762c164be3103965741f533c75f12"
 }

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

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+
+import { IncomingInternalEvent, IncomingInternalEvents, crossmintIFrameService } from "@crossmint/client-sdk-base";
+import { CrossmintEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
+
+type CrossmintEmbeddedCheckoutIFrameProps = CrossmintEmbeddedCheckoutProps & {
+    onInternalEvent?: (event: IncomingInternalEvent) => void;
+};
+
+export default function CrossmintEmbeddedCheckoutIFrame({
+    onInternalEvent,
+    ...props
+}: CrossmintEmbeddedCheckoutIFrameProps) {
+    const { getUrl, listenToEvents, listenToInternalEvents, emitInternalEvent } = 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;
+
+            if (type === IncomingInternalEvents.UI_HEIGHT_CHANGED) {
+                setHeight(payload.height);
+            }
+
+            onInternalEvent?.(event.data);
+        });
+
+        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/components/embed/crypto/CryptoEmbeddedCheckout.tsx

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

package/src/components/embed/crypto/CryptoEmbeddedCheckoutIFrame.tsx

@@ -0,0 +1,88 @@
+import bs58 from "bs58";
+import { useEffect } from "react";
+
+import {
+    CryptoEmbeddedCheckoutPropsWithSigner,
+    ETHEmbeddedCheckoutSigner,
+    IncomingInternalEvent,
+    IncomingInternalEvents,
+    OutgoingInternalEvents,
+    SOLEmbeddedCheckoutSigner,
+    crossmintIFrameService,
+    embeddedCheckoutPropsToUpdatableParamsPayload,
+} from "@crossmint/client-sdk-base";
+
+import CrossmintEmbeddedCheckoutIFrame from "../EmbeddedCheckoutIFrame";
+
+export default function CryptoEmbeddedCheckoutIFrame(props: CryptoEmbeddedCheckoutPropsWithSigner) {
+    const { emitInternalEvent } = crossmintIFrameService(props);
+
+    const { signer, paymentMethod } = props;
+
+    function onInternalEvent(event: IncomingInternalEvent) {
+        const { type, payload } = event;
+
+        if (type === IncomingInternalEvents.CRYPTO_PAYMENT_INCOMING_TRANSACTION) {
+            const { serializedTransaction } = payload;
+            console.log("[Crossmint] Received incoming transaction", serializedTransaction);
+            handleIncomingTransaction(serializedTransaction);
+        }
+    }
+
+    async function handleIncomingTransaction(serializedTransaction: string) {
+        try {
+            let txId: string;
+            switch (paymentMethod) {
+                case "SOL":
+                    txId = await handleSOLTransaction(signer, serializedTransaction);
+                    break;
+                case "ETH":
+                    txId = await handleETHTransaction(signer, serializedTransaction);
+                    break;
+                default:
+                    throw new Error(`Unsupported payment method ${paymentMethod}`);
+            }
+
+            console.log("[Crossmint] Signed and sent transaction", txId);
+            emitInternalEvent({
+                type: OutgoingInternalEvents.CRYPTO_PAYMENT_USER_ACCEPTED,
+                payload: {
+                    txId,
+                },
+            });
+        } catch (e) {
+            console.error("[Crossmint] Failed to sign and send transaction", e);
+            emitInternalEvent({
+                type: OutgoingInternalEvents.CRYPTO_PAYMENT_USER_REJECTED,
+                payload: {},
+            });
+        }
+    }
+
+    async function handleSOLTransaction(signer: SOLEmbeddedCheckoutSigner, serializedTransaction: string) {
+        // @ts-ignore - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+        const { Transaction } = await import("@solana/web3.js");
+        const transaction = Transaction.from(bs58.decode(serializedTransaction));
+        console.log("[Crossmint] Deserialized SOL transaction", transaction);
+
+        return await signer.signAndSendTransaction(transaction);
+    }
+
+    async function handleETHTransaction(signer: ETHEmbeddedCheckoutSigner, serializedTransaction: string) {
+        // @ts-ignore - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+        const { parse: parseTransaction } = await import("@ethersproject/transactions");
+        const transaction = parseTransaction(serializedTransaction);
+        console.log("[Crossmint] Deserialized ETH transaction", transaction);
+
+        return await signer.signAndSendTransaction(transaction);
+    }
+
+    useEffect(() => {
+        emitInternalEvent({
+            type: "params-update",
+            payload: embeddedCheckoutPropsToUpdatableParamsPayload(props),
+        });
+    }, [props.signer, props.recipient, props.mintConfig, props.locale, props.whPassThroughArgs]);
+
+    return <CrossmintEmbeddedCheckoutIFrame onInternalEvent={onInternalEvent} {...props} />;
+}

package/src/components/embed/fiat/FiatEmbeddedCheckoutIFrame.tsx

@@ -0,0 +1,10 @@
+import { FiatEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
+
+import CrossmintEmbeddedCheckoutIFrame from "../EmbeddedCheckoutIFrame";
+
+export default function FiatEmbeddedCheckoutIFrame(props: FiatEmbeddedCheckoutProps) {
+    throw new Error(
+        "Unsupported: This component should not be called yet, as its a placeholder for the v2 fiat checkout."
+    );
+    return <CrossmintEmbeddedCheckoutIFrame {...props} />;
+}

package/src/{CrossmintPaymentElement.tsx → components/embed/fiat/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,19 @@
+import {
+    CrossmintEmbeddedCheckoutProps,
+    isCryptoEmbeddedCheckoutProps,
+    isFiatEmbeddedCheckoutProps,
+} from "@crossmint/client-sdk-base";
+
+import { CrossmintCryptoEmbeddedCheckout } from "./crypto/CryptoEmbeddedCheckout";
+import { CrossmintFiatPaymentElement_OLD } from "./fiat/FiatPaymentElement_OLD";
+
+// TODO: Rename to CrossmintEmbeddedCheckout
+export function CrossmintPaymentElement(props: CrossmintEmbeddedCheckoutProps) {
+    if (isFiatEmbeddedCheckoutProps(props)) {
+        return <CrossmintFiatPaymentElement_OLD {...props} />;
+    }
+    if (isCryptoEmbeddedCheckoutProps(props)) {
+        return <CrossmintCryptoEmbeddedCheckout {...props} />;
+    }
+    throw new Error("Unsupported: Fiat is the only supported payment method.");
+}