Research/improve dx integration

packages/starter/nextjs-starter/package.json

@@ -22,10 +22,11 @@
         "dev": "next dev",
         "build": "yarn clean && next build",
         "start": "next start",
-        "lint": "next lint"
+        "lint": "next lint",
+        "clean-install": "shx rm -rf node_modules && yarn"
     },
     "dependencies": {
-        "@crossmint/client-sdk-react-ui": "^0.0.5",
+        "@crossmint/client-sdk-react-ui": "file:/Users/pgarciaegido/Desktop/code/paella/crossmint-client-sdk/packages/ui/react-ui/package",
         "next": "^11.1.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"

packages/starter/nextjs-starter/pages/_app.tsx

@@ -1,15 +1,9 @@
 import { AppProps } from "next/app";
 
-import { CrossMintProvider } from "@crossmint/client-sdk-react-ui";
-
-// Use require instead of import, and order matters
 require("../styles/globals.css");
-require("@crossmint/client-sdk-react-ui/styles.css");
 
 export default function App({ Component, pageProps }: AppProps): JSX.IntrinsicAttributes {
     return (
-        <CrossMintProvider clientId="<YOUR_CLIENT_ID>">
-            <Component {...pageProps} />
-        </CrossMintProvider>
+        <Component {...pageProps} />
     );
 }

packages/starter/nextjs-starter/pages/index.tsx

@@ -15,6 +15,8 @@ export default function Index() {
                 collectionTitle="<TITLE_FOR_YOUR_COLLECTION>"
                 collectionDescription="<DESCRIPTION_OF_YOUR_COLLECTION>"
                 collectionPhoto="<OPT_URL_TO_PHOTO_COVER>"
+                clientId="12345"
+                className="my-crossmint-button"
             />
         </div>
     );

packages/starter/nextjs-starter/styles/globals.css

@@ -14,3 +14,27 @@ a {
 * {
   box-sizing: border-box;
 }
+
+button.my-crossmint-button {
+  background: rgb(128, 176, 240);
+}
+
+button.my-crossmint-button p {
+  color: lightcyan;
+}
+
+@keyframes spin {
+  from {
+      transform:rotate(0deg);
+  }
+  to {
+      transform:rotate(360deg);
+  }
+}
+
+button.my-crossmint-button img {
+  animation: spin;
+  animation-duration: 5000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear; 
+}

packages/ui/react-ui/.gitignore

@@ -1 +1,3 @@
 lib
+package
+package.tgz

packages/ui/react-ui/package.json

@@ -13,22 +13,21 @@
         ".": {
             "import": "./lib/esm/index.js",
             "require": "./lib/cjs/index.js"
-        },
-        "./styles.css": "./styles.css"
+        }
     },
     "files": [
         "lib",
         "src",
-        "LICENSE",
-        "styles.css"
+        "LICENSE"
     ],
     "publishConfig": {
         "access": "public"
     },
     "scripts": {
         "clean": "shx rm -rf lib/*",
         "build": "yarn clean && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
-        "postbuild": "shx echo '{ \"type\": \"commonjs\" }' > lib/cjs/package.json && shx echo '{ \"type\": \"module\" }' > lib/esm/package.json"
+        "postbuild": "shx echo '{ \"type\": \"commonjs\" }' > lib/cjs/package.json && shx echo '{ \"type\": \"module\" }' > lib/esm/package.json",
+        "pack": "yarn build && yarn pack --filename package.tgz && tar -xf package.tgz"
     },
     "peerDependencies": {
         "react": "^17.0.2",
@@ -37,7 +36,9 @@
     "devDependencies": {
         "@types/react": "^17.0.24",
         "@types/react-dom": "^17.0.11",
+        "@types/styled-components": "^5.1.23",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "styled-components": "^5.3.3"
     }
 }

packages/ui/react-ui/src/CrossMintButton.tsx

@@ -1,6 +1,7 @@
-import React, { CSSProperties, FC, MouseEvent, MouseEventHandler, useMemo, useCallback } from "react";
-import { OnboardingRequestStatusResponse, useCrossMintStatus } from ".";
-import { useCrossMintPopup } from "./useCrossMintPopup";
+import React, { CSSProperties, FC, MouseEvent, MouseEventHandler, useMemo, useCallback, useState } from "react";
+import useCrossMintStatus, { OnboardingRequestStatusResponse } from "./hooks/useCrossMintStatus";
+import useCrossMintModal from "./hooks/useCrossMintModal";
+import { Button, Paragraph, Img } from "./styles";
 
 export interface ButtonProps {
     className?: string;
@@ -15,6 +16,13 @@ export interface ButtonProps {
     mintTo?: string;
     emailTo?: string;
     listingId?: string;
+    auctionId?: string;
+    hideMintOnInactiveClient?: boolean;
+    clientId: string;
+    development?: boolean;
+    crossmintOpened?: () => any;
+    crossmintClosed?: () => any;
+    showOverlay?: boolean;
 }
 
 export const CrossMintButton: FC<ButtonProps> = ({
@@ -30,8 +38,18 @@ export const CrossMintButton: FC<ButtonProps> = ({
     mintTo,
     emailTo,
     listingId,
+    clientId,
+    development = false,
+    auctionId,
+    hideMintOnInactiveClient = false,
+    crossmintOpened,
+    crossmintClosed,
+    showOverlay = true,
     ...props
 }) => {
+    const status = useCrossMintStatus({ clientId });
+    const { connecting, connect } = useCrossMintModal({ clientId, development, crossmintOpened, crossmintClosed, showOverlay });
+
     if (collectionTitle === "<TITLE_FOR_YOUR_COLLECTION>") {
         console.warn("No collection title specified. Please add a collection title to your <CrossmintButton />");
         collectionTitle = "";
@@ -49,46 +67,42 @@ export const CrossMintButton: FC<ButtonProps> = ({
         collectionPhoto = "";
     }
 
-    const { hideMintOnInactiveClient, status } = useCrossMintStatus();
-
-    const { connecting, connect } = useCrossMintPopup();
-
     const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
         (event) => {
             if (onClick) onClick(event);
 
-            if (!event.defaultPrevented)
+            if (!event.defaultPrevented) {
                 connect(collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId);
+            }
         },
         [onClick]
     );
 
     const content = useMemo(() => {
-        if (connecting) return <p>Connecting ...</p>;
-        return <p>Buy with credit card</p>;
+        if (connecting) return <Paragraph>Connecting ...</Paragraph>;
+        return <Paragraph>Buy with credit card</Paragraph>;
     }, [connecting]);
 
     if (hideMintOnInactiveClient && status !== OnboardingRequestStatusResponse.ACCEPTED) {
         return null;
     }
 
-    const formattedClassName = `client-sdk-button-trigger client-sdk-button-trigger-${theme} ${className || ''}`;
-
     return (
-        <button
-            className={formattedClassName}
+        <Button
+            className={className}
+            theme={theme}
             disabled={disabled}
             onClick={handleClick}
             style={{ ...style }}
             tabIndex={tabIndex}
             {...props}
         >
-            <img
+            <Img
                 className="client-sdk-button-icon"
                 src="https://www.crossmint.io/assets/crossmint/logo.png"
                 alt="Crossmint logo"
             />
             {content}
-        </button>
+        </Button>
     );
 };