@crossmint/client-sdk-react-ui 0.0.8-alpha.2 → 0.1.0

package/lib/esm/useCrossMintModal.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface CrossMintModalContextState {
-    visible: boolean;
-    setVisible: (open: boolean) => void;
-}
-export declare const CrossMintModalContext: import("react").Context<CrossMintModalContextState>;
-export declare function useCrossMintModal(): CrossMintModalContextState;

package/lib/esm/useCrossMintModal.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from "react";
-export const CrossMintModalContext = createContext({});
-export function useCrossMintModal() {
-    return useContext(CrossMintModalContext);
-}
-//# sourceMappingURL=useCrossMintModal.js.map

package/lib/esm/useCrossMintModal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCrossMintModal.js","sourceRoot":"","sources":["../../src/useCrossMintModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOlD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAA6B,EAAgC,CAAC,CAAC;AAEjH,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC7C,CAAC"}

package/lib/esm/useCrossMintPopup.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface PopupContextState {
-    connecting: boolean;
-    connect: (collectionTitle?: string, collectionDescription?: string, collectionPhoto?: string, mintTo?: string, emailTo?: string, listingId?: string) => void;
-    popup: Window | null;
-}
-export declare const PopupContext: import("react").Context<PopupContextState>;
-export declare function useCrossMintPopup(): PopupContextState;

package/lib/esm/useCrossMintPopup.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from "react";
-export const PopupContext = createContext({});
-export function useCrossMintPopup() {
-    return useContext(PopupContext);
-}
-//# sourceMappingURL=useCrossMintPopup.js.map

package/lib/esm/useCrossMintPopup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCrossMintPopup.js","sourceRoot":"","sources":["../../src/useCrossMintPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAgBlD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAuB,CAAC,CAAC;AAEtF,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AACpC,CAAC"}

package/lib/esm/useCrossMintStatus.js

@@ -1,14 +0,0 @@
-import { createContext, useContext } from "react";
-export var OnboardingRequestStatusResponse;
-(function (OnboardingRequestStatusResponse) {
-    OnboardingRequestStatusResponse["WAITING_SUBMISSION"] = "waiting-submission";
-    OnboardingRequestStatusResponse["PENDING"] = "pending";
-    OnboardingRequestStatusResponse["REJECTED"] = "rejected";
-    OnboardingRequestStatusResponse["ACCEPTED"] = "accepted";
-    OnboardingRequestStatusResponse["INVALID"] = "invalid";
-})(OnboardingRequestStatusResponse || (OnboardingRequestStatusResponse = {}));
-export const CrossMintStatusContext = createContext({});
-export function useCrossMintStatus() {
-    return useContext(CrossMintStatusContext);
-}
-//# sourceMappingURL=useCrossMintStatus.js.map

package/lib/esm/useCrossMintStatus.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCrossMintStatus.js","sourceRoot":"","sources":["../../src/useCrossMintStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,CAAN,IAAY,+BAMX;AAND,WAAY,+BAA+B;IACvC,4EAAyC,CAAA;IACzC,sDAAmB,CAAA;IACnB,wDAAqB,CAAA;IACrB,wDAAqB,CAAA;IACrB,sDAAmB,CAAA;AACvB,CAAC,EANW,+BAA+B,KAA/B,+BAA+B,QAM1C;AASD,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAA8B,EAAiC,CAAC,CAAC;AAEpH,MAAM,UAAU,kBAAkB;IAC9B,OAAO,UAAU,CAAC,sBAAsB,CAAC,CAAC;AAC9C,CAAC"}

package/src/CrossMintButton.tsx

@@ -1,75 +0,0 @@
-import React, { CSSProperties, FC, MouseEvent, MouseEventHandler, useMemo, useCallback } from "react";
-import { OnboardingRequestStatusResponse, useCrossMintStatus } from ".";
-import { useCrossMintPopup } from "./useCrossMintPopup";
-
-export interface ButtonProps {
-    className?: string;
-    disabled?: boolean;
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    style?: CSSProperties;
-    tabIndex?: number;
-    theme?: "light" | "dark";
-    collectionTitle?: string;
-    collectionDescription?: string;
-    collectionPhoto?: string;
-    mintTo?: string;
-    emailTo?: string;
-    listingId?: string;
-}
-
-export const CrossMintButton: FC<ButtonProps> = ({
-    className,
-    disabled,
-    onClick,
-    style,
-    tabIndex,
-    theme = "dark",
-    collectionTitle,
-    collectionDescription,
-    collectionPhoto,
-    mintTo,
-    emailTo,
-    listingId,
-    ...props
-}) => {
-    const { hideMintOnInactiveClient, status } = useCrossMintStatus();
-
-    const { connecting, connect } = useCrossMintPopup();
-
-    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-        (event) => {
-            if (onClick) onClick(event);
-
-            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>;
-    }, [connecting]);
-
-    if (hideMintOnInactiveClient && status !== OnboardingRequestStatusResponse.ACCEPTED) {
-        return null;
-    }
-
-    return (
-        <button
-            className={`client-sdk-button-trigger client-sdk-button-trigger-${theme}`}
-            disabled={disabled}
-            onClick={handleClick}
-            style={{ ...style }}
-            tabIndex={tabIndex}
-            {...props}
-        >
-            <img
-                className="client-sdk-button-icon"
-                src="https://www.crossmint.io/assets/crossmint/logo.png"
-                alt="Crossmint logo"
-            />
-            {content}
-        </button>
-    );
-};

package/src/CrossMintModal.tsx

@@ -1,54 +0,0 @@
-import React, { FC, useCallback, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { useCrossMintModal } from "./useCrossMintModal";
-
-export interface CrossMintModalProps {
-    className?: string;
-    container?: string;
-}
-
-export const CrossMintModal: FC<CrossMintModalProps> = ({ className = "", container = "body" }) => {
-    const ref = useRef<HTMLDivElement>(null);
-    const { setVisible } = useCrossMintModal();
-
-    const [fadeIn, setFadeIn] = useState(false);
-    const [portal, setPortal] = useState<Element | null>(null);
-
-    const hideModal = useCallback(() => {
-        setFadeIn(false);
-        setTimeout(() => setVisible(false), 150);
-    }, [setFadeIn, setVisible]);
-
-    useLayoutEffect(() => {
-        // Get original overflow
-        const { overflow } = window.getComputedStyle(document.body);
-        // Hack to enable fade in animation after mount
-        setTimeout(() => setFadeIn(true), 0);
-        // Prevent scrolling on mount
-        document.body.style.overflow = "hidden";
-
-        return () => {
-            // Re-enable scrolling when component unmounts
-            document.body.style.overflow = overflow;
-        };
-    }, [hideModal]);
-
-    useLayoutEffect(() => setPortal(document.querySelector(container)), [setPortal, container]);
-
-    return (
-        portal &&
-        createPortal(
-            <div
-                aria-modal="true"
-                className={`client-sdk-modal ${fadeIn ? "client-sdk-modal-fade-in" : ""} ${className}`}
-                ref={ref}
-            >
-                <div className="client-sdk-modal-container">
-                    <span className="client-sdk-modal-loader" />
-                </div>
-                <div className="client-sdk-modal-overlay" />
-            </div>,
-            portal
-        )
-    );
-};

package/src/CrossMintModalProvider.tsx

@@ -1,23 +0,0 @@
-import React, { FC, ReactNode, useState } from "react";
-import { CrossMintModal, CrossMintModalProps } from "./CrossMintModal";
-import { CrossMintModalContext } from "./useCrossMintModal";
-
-export interface CrossMintModalProviderProps extends CrossMintModalProps {
-    children: ReactNode;
-}
-
-export const CrossMintModalProvider: FC<CrossMintModalProviderProps> = ({ children, ...props }) => {
-    const [visible, setVisible] = useState(false);
-
-    return (
-        <CrossMintModalContext.Provider
-            value={{
-                visible,
-                setVisible,
-            }}
-        >
-            {children}
-            {visible && <CrossMintModal {...props} />}
-        </CrossMintModalContext.Provider>
-    );
-};

package/src/CrossMintPopupProvider.tsx

@@ -1,94 +0,0 @@
-import React, { FC, ReactNode, useState } from "react";
-import { useCrossMintModal, useCrossMintStatus } from ".";
-import { PopupContext } from "./useCrossMintPopup";
-
-export interface PopupProviderProps {
-    development: boolean;
-    children: ReactNode;
-}
-
-const PROD_URL = "https://www.crossmint.io";
-const DEV_URL = "http://localhost:3001";
-
-export const CrossMintPopupProvider: FC<PopupProviderProps> = ({ development, children }) => {
-    const [connecting, setConnecting] = useState(false);
-    const [popup, setPopup] = useState<Window | null>(null);
-
-    const { clientId } = useCrossMintStatus();
-
-    const { setVisible } = useCrossMintModal();
-
-    const createPopup = (
-        collectionTitle?: string,
-        collectionDescription?: string,
-        collectionPhoto?: string,
-        mintTo?: string,
-        emailTo?: string,
-        listingId?: string
-    ) => {
-        const pop = window.open(
-            `${development ? DEV_URL : PROD_URL}/signin?callbackUrl=${encodeURIComponent(
-                `${development ? DEV_URL : PROD_URL}/checkout/mint?clientId=${clientId}&closeOnSuccess=false${
-                    collectionTitle ? `collectionTitle=${collectionTitle}` : ""
-                }${collectionDescription ? `&collectionDescription=${collectionDescription}` : ""}${
-                    collectionPhoto ? `&collectionPhoto=${collectionPhoto}` : ""
-                }${mintTo ? `&mintTo=${mintTo}` : ""}${emailTo ? `&emailTo=${emailTo}` : ""}${
-                    listingId ? `&listingId=${listingId}` : ""
-                }`
-            )}`,
-            "popUpWindow",
-            createPopupString()
-        );
-        if (pop) {
-            setVisible(true);
-            setPopup(pop);
-            registerListeners(pop);
-        } else {
-            setConnecting(false);
-            console.log("Failed to open popup window");
-        }
-    };
-
-    const connect = (
-        collectionTitle?: string,
-        collectionDescription?: string,
-        collectionPhoto?: string,
-        mintTo?: string,
-        emailTo?: string,
-        listingId?: string
-    ) => {
-        if (connecting) return;
-
-        setConnecting(true);
-
-        createPopup(collectionTitle, collectionDescription, collectionPhoto, mintTo, emailTo, listingId);
-    };
-
-    function registerListeners(pop: Window) {
-        const timer = setInterval(function () {
-            if (pop.closed) {
-                clearInterval(timer);
-                setConnecting(false);
-                setVisible(false);
-            }
-        }, 500);
-    }
-
-    function createPopupString() {
-        return `height=750,width=400,left=${window.innerWidth / 2 - 200},top=${
-            window.innerHeight / 2 - 375
-        },resizable=yes,scrollbars=yes,toolbar=yes,menubar=true,location=no,directories=no, status=yes`;
-    }
-
-    return (
-        <PopupContext.Provider
-            value={{
-                connecting,
-                popup,
-                connect,
-            }}
-        >
-            {children}
-        </PopupContext.Provider>
-    );
-};

package/src/CrossMintProvider.tsx

@@ -1,44 +0,0 @@
-import React, { FC, ReactNode, useState } from "react";
-import { CrossMintModal, CrossMintModalProps } from "./CrossMintModal";
-import { CrossMintPopupProvider } from "./CrossMintPopupProvider";
-import { CrossMintStatusProvider } from "./CrossMintStatusProvider";
-import { CrossMintModalContext } from "./useCrossMintModal";
-
-export interface CrossMintProviderProps extends CrossMintModalProps {
-    clientId: string;
-    auctionId?: string;
-    hideMintOnInactiveClient?: boolean;
-    development?: boolean;
-    children: ReactNode;
-}
-
-export const CrossMintProvider: FC<CrossMintProviderProps> = ({
-    clientId,
-    auctionId,
-    hideMintOnInactiveClient = false,
-    development = false,
-    children,
-    ...props
-}) => {
-    const [visible, setVisible] = useState(false);
-
-    return (
-        <CrossMintStatusProvider
-            clientId={clientId}
-            hideMintOnInactiveClient={hideMintOnInactiveClient}
-            auctionId={auctionId}
-        >
-            <CrossMintModalContext.Provider
-                value={{
-                    visible,
-                    setVisible,
-                }}
-            >
-                <CrossMintPopupProvider development={development}>
-                    {children}
-                    {visible && <CrossMintModal {...props} />}
-                </CrossMintPopupProvider>
-            </CrossMintModalContext.Provider>
-        </CrossMintStatusProvider>
-    );
-};

package/src/CrossMintStatusButton.tsx

@@ -1,73 +0,0 @@
-import React, { CSSProperties, FC, MouseEvent, MouseEventHandler, useMemo, useCallback } from "react";
-import { OnboardingRequestStatusResponse, useCrossMintStatus } from "./useCrossMintStatus";
-
-export interface StatusButtonProps {
-    className?: string;
-    disabled?: boolean;
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    style?: CSSProperties;
-    tabIndex?: number;
-    theme?: "light" | "dark";
-}
-
-export const CrossMintStatusButton: FC<StatusButtonProps> = ({
-    className,
-    disabled,
-    onClick,
-    style,
-    tabIndex,
-    theme = "dark",
-    ...props
-}) => {
-    const { status, clientId, auctionId } = useCrossMintStatus();
-
-    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-        (event) => {
-            if (onClick) onClick(event);
-
-            if (status === OnboardingRequestStatusResponse.WAITING_SUBMISSION) {
-                window.open(
-                    `https://crossmint.io/developers/onboarding${clientId ? `?clientId=${clientId}` : ""}${
-                        auctionId ? `&auctionId=${auctionId}` : ""
-                    }`,
-                    "_blank"
-                );
-                return;
-            }
-        },
-        [status]
-    );
-
-    const content = useMemo(() => {
-        switch (status) {
-            case OnboardingRequestStatusResponse.INVALID:
-                return <p>Invalid clientId</p>;
-            case OnboardingRequestStatusResponse.WAITING_SUBMISSION:
-                return <p>Click here to setup CrossMint</p>;
-            case OnboardingRequestStatusResponse.PENDING:
-                return <p>Your application is under review</p>;
-            case OnboardingRequestStatusResponse.ACCEPTED:
-                return <p>You're good to go!</p>;
-            case OnboardingRequestStatusResponse.REJECTED:
-                return <p>You're application was rejected</p>;
-        }
-    }, [status]);
-
-    return (
-        <button
-            className={`client-sdk-button-trigger client-sdk-button-trigger-${theme}`}
-            disabled={status !== OnboardingRequestStatusResponse.WAITING_SUBMISSION}
-            onClick={handleClick}
-            style={{ ...style }}
-            tabIndex={tabIndex}
-            {...props}
-        >
-            <img
-                className="client-sdk-button-icon"
-                src="https://www.crossmint.io/assets/crossmint/logo.png"
-                alt="Crossmint logo"
-            />
-            {content}
-        </button>
-    );
-};

package/src/CrossMintStatusProvider.tsx

@@ -1,58 +0,0 @@
-import React, { FC, ReactNode, useEffect, useState } from "react";
-import { OnboardingRequestStatusResponse, CrossMintStatusContext } from "./useCrossMintStatus";
-
-export interface CrossMintStatusProviderProps {
-    clientId: string;
-    auctionId?: string;
-    hideMintOnInactiveClient: boolean;
-    children: ReactNode;
-}
-
-export const CrossMintStatusProvider: FC<CrossMintStatusProviderProps> = ({
-    clientId,
-    auctionId,
-    hideMintOnInactiveClient,
-    children,
-}) => {
-    const [status, setStatus] = useState<OnboardingRequestStatusResponse>(
-        OnboardingRequestStatusResponse.WAITING_SUBMISSION
-    );
-
-    async function fetchClientIntegration() {
-        const res = await fetch(`https://www.crossmint.io/api/crossmint/onboardingRequests/${clientId}/status`);
-
-        if (res.status === 200) {
-            const resData: { clientId: string; status: OnboardingRequestStatusResponse } = await res.json();
-
-            console.log("resData", resData);
-            setStatus(resData.status);
-        } else {
-            if (status !== OnboardingRequestStatusResponse.INVALID) {
-                setStatus(OnboardingRequestStatusResponse.INVALID);
-            }
-        }
-    }
-
-    useEffect(() => {
-        fetchClientIntegration();
-
-        const interval = setInterval(() => {
-            fetchClientIntegration();
-        }, 60 * 1000);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <CrossMintStatusContext.Provider
-            value={{
-                status,
-                clientId,
-                auctionId,
-                hideMintOnInactiveClient,
-            }}
-        >
-            {children}
-        </CrossMintStatusContext.Provider>
-    );
-};

package/src/useCrossMintModal.tsx

@@ -1,12 +0,0 @@
-import { createContext, useContext } from "react";
-
-export interface CrossMintModalContextState {
-    visible: boolean;
-    setVisible: (open: boolean) => void;
-}
-
-export const CrossMintModalContext = createContext<CrossMintModalContextState>({} as CrossMintModalContextState);
-
-export function useCrossMintModal(): CrossMintModalContextState {
-    return useContext(CrossMintModalContext);
-}

package/src/useCrossMintPopup.tsx

@@ -1,21 +0,0 @@
-import { createContext, useContext } from "react";
-
-export interface PopupContextState {
-    connecting: boolean;
-    connect: (
-        collectionTitle?: string,
-        collectionDescription?: string,
-        collectionPhoto?: string,
-        mintTo?: string,
-        emailTo?: string,
-        listingId?: string
-    ) => void;
-
-    popup: Window | null;
-}
-
-export const PopupContext = createContext<PopupContextState>({} as PopupContextState);
-
-export function useCrossMintPopup(): PopupContextState {
-    return useContext(PopupContext);
-}

package/src/useCrossMintStatus.tsx

@@ -1,22 +0,0 @@
-import { createContext, useContext } from "react";
-
-export enum OnboardingRequestStatusResponse {
-    WAITING_SUBMISSION = "waiting-submission",
-    PENDING = "pending",
-    REJECTED = "rejected",
-    ACCEPTED = "accepted",
-    INVALID = "invalid",
-}
-
-export interface CrossMintStatusContextState {
-    status: OnboardingRequestStatusResponse;
-    clientId: string;
-    auctionId?: string;
-    hideMintOnInactiveClient: boolean;
-}
-
-export const CrossMintStatusContext = createContext<CrossMintStatusContextState>({} as CrossMintStatusContextState);
-
-export function useCrossMintStatus(): CrossMintStatusContextState {
-    return useContext(CrossMintStatusContext);
-}

package/styles.css

@@ -1,119 +0,0 @@
-@import url("https://cdn.rawgit.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css");
-
-:root {
-    --crossmint-main-green: #00ff85;
-    --crossmint-main-blue: #00e0ff;
-    --crossmint-main-dark-bg: #1e1e1e;
-}
-
-/* Mint Button */
-
-.client-sdk-button-trigger {
-    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: "Gilroy", -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;
-}
-
-.client-sdk-button-trigger p {
-    margin: 0;
-}
-
-.client-sdk-button-trigger:hover:enabled {
-    opacity: 0.6;
-    cursor: pointer;
-}
-
-.client-sdk-button-trigger-dark {
-    background: var(--crossmint-main-dark-bg);
-}
-
-.client-sdk-button-trigger-light {
-    background: white;
-}
-
-.client-sdk-button-trigger-light p {
-    color: black;
-}
-
-.client-sdk-button-trigger-dark p {
-    color: white;
-}
-
-.client-sdk-button-trigger-colored {
-    background-image: linear-gradient(to bottom right, var(--crossmint-main-green), var(--crossmint-main-blue));
-    color: white;
-}
-
-.client-sdk-button-icon {
-    width: 21px;
-    height: 21px;
-    margin-right: 0.875rem;
-}
-
-/* Modal */
-.client-sdk-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
-    transition: opacity linear 150ms;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 1040;
-}
-
-.client-sdk-modal.client-sdk-modal-fade-in {
-    opacity: 1;
-}
-
-.client-sdk-modal-overlay {
-    background: rgba(0, 0, 0, 0.5);
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-}
-
-.client-sdk-modal-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1041;
-}
-
-.client-sdk-modal-loader {
-    border: 3px solid transparent; /* Light grey */
-    border-top: 3px solid white; /* Blue */
-    border-radius: 50%;
-    width: 35px;
-    height: 35px;
-    animation: crossmintSpin 1s linear infinite;
-}
-
-@keyframes crossmintSpin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}