@crossmint/client-sdk-react-ui 1.11.0 → 1.11.1

package/src/components/auth/methods/email/EmailSignIn.tsx

@@ -1,110 +0,0 @@
-import { type FormEvent, useState } from "react";
-import Color from "color";
-
-import { Spinner } from "@/components/common/Spinner";
-import { classNames } from "@/utils/classNames";
-import { AlertIcon } from "../../../../icons/alert";
-import { isEmailValid } from "@crossmint/common-sdk-auth";
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import type { OtpEmailPayload } from "@/types/auth";
-import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
-
-export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEmailPayload) => void }) {
-    const { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setStep, setError } = useAuthForm();
-
-    const [emailInput, setEmailInput] = useState("");
-    const [emailError, setEmailError] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
-
-    async function handleOnSubmit(e: FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-
-        if (!isEmailValid(emailInput)) {
-            setEmailError("Please enter a valid email address");
-            return;
-        }
-
-        setIsLoading(true);
-
-        try {
-            const trimmedEmailInput = emailInput.trim().toLowerCase();
-            const emailSignInRes = (await crossmintAuth?.sendEmailOtp(trimmedEmailInput)) as { emailId: string };
-
-            setOtpEmailData({ email: trimmedEmailInput, emailId: emailSignInRes.emailId });
-            setStep("otp");
-        } catch (_e: unknown) {
-            setIsLoading(false);
-            setError("Failed to send email. Please try again or contact support.");
-        }
-    }
-
-    return (
-        <>
-            <div className="flex flex-col items-start justify-start w-full rounded-lg">
-                <div className="w-full">
-                    <form
-                        role="form"
-                        className="relative"
-                        onSubmit={handleOnSubmit}
-                        noValidate // we want to handle validation ourselves
-                    >
-                        <label htmlFor="emailInput" className="sr-only">
-                            Email
-                        </label>
-                        <input
-                            className={classNames(
-                                "flex-grow text-cm-text-secondary text-left pl-[16px] pr-[80px] h-[58px] w-full border border-cm-border rounded-xl bg-cm-background-primary placeholder:text-sm placeholder:text-opacity-60",
-                                "transition-none duration-200 ease-in-out",
-                                "focus:outline-none focus-ring-custom", // Add focus ring
-                                emailError ? "border-red-500" : ""
-                            )}
-                            style={{
-                                color: appearance?.colors?.textPrimary,
-                                borderRadius: appearance?.borderRadius,
-                                borderColor: emailError ? appearance?.colors?.danger : appearance?.colors?.border,
-                                backgroundColor: appearance?.colors?.inputBackground,
-                                // @ts-expect-error Add custom ring color to tailwind
-                                "--focus-ring-color": new Color(appearance?.colors?.accent ?? "#04AA6D")
-                                    .alpha(0.18)
-                                    .toString(),
-                            }}
-                            type="email"
-                            placeholder="Enter email"
-                            value={emailInput}
-                            onChange={(e) => {
-                                setEmailInput(e.target.value);
-                                setEmailError("");
-                                setError(null);
-                            }}
-                            readOnly={isLoading}
-                            aria-describedby="emailError"
-                        />
-                        <div className="absolute inset-y-0 right-0 flex items-center pr-4">
-                            {emailError && <AlertIcon customColor={appearance?.colors?.danger} />}
-                            {isLoading && (
-                                <Spinner
-                                    style={{
-                                        color: appearance?.colors?.textSecondary,
-                                        fill: appearance?.colors?.textPrimary,
-                                    }}
-                                />
-                            )}
-                            {!emailError && !isLoading && (
-                                <button
-                                    type="submit"
-                                    className={classNames("cursor-pointer font-medium text-cm-accent text-nowrap")}
-                                    style={{ color: appearance?.colors?.accent }}
-                                    disabled={!emailInput}
-                                >
-                                    Sign in
-                                </button>
-                            )}
-                        </div>
-                    </form>
-                    {emailError && <p className="text-xs text-red-500 mb-2 pt-2">{emailError}</p>}
-                </div>
-            </div>
-        </>
-    );
-}

package/src/components/auth/methods/farcaster/FarcasterSignIn.tsx

@@ -1,169 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { useSignIn, QRCode, type UseSignInData } from "@farcaster/auth-kit";
-import { FarcasterIcon } from "@/icons/farcaster";
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { Spinner } from "@/components/common/Spinner";
-import { classNames } from "@/utils/classNames";
-import { AuthFormBackButton } from "../../AuthFormBackButton";
-import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
-export function FarcasterSignIn() {
-    const { step, appearance, setStep, setError } = useAuthForm();
-
-    if (step === "initial") {
-        return (
-            <div>
-                <button
-                    className={classNames(
-                        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                        "transition-colors duration-200 ease-in-out",
-                        "hover:bg-cm-hover focus:bg-cm-hover outline-none"
-                    )}
-                    style={{
-                        borderRadius: appearance?.borderRadius,
-                        backgroundColor: appearance?.colors?.buttonBackground,
-                    }}
-                    onClick={() => {
-                        setStep("qrCode");
-                        setError(null);
-                    }}
-                >
-                    <FarcasterIcon className="h-[25px] w-[25px] absolute left-[18px]" />
-                    <span
-                        className="font-medium"
-                        style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
-                    >
-                        Sign in with Farcaster
-                    </span>
-                    <span className="sr-only">Sign in with Farcaster</span>
-                </button>
-            </div>
-        );
-    }
-
-    if (step === "qrCode") {
-        return <FarcasterQRCode />;
-    }
-
-    return null;
-}
-
-// We want this to be a separate component so it can completely un-render when the user goes back to the initial screen
-function FarcasterQRCode() {
-    const { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setStep, setDialogOpen, setError } = useAuthForm();
-    const [farcasterData, setFarcasterData] = useState<UseSignInData | null>(null);
-
-    const farcasterProps = useMemo(
-        () => ({
-            onSuccess: (data: UseSignInData) => {
-                // Step 3. set the farcaster data once the sign in is successful
-                setFarcasterData(data);
-            },
-        }),
-        []
-    );
-
-    const { signIn, url: qrCodeUrl, connect, signOut, isConnected } = useSignIn(farcasterProps);
-
-    const handleFarcasterSignIn = async (data: UseSignInData) => {
-        setError(null);
-        try {
-            const oneTimeSecret = await crossmintAuth?.signInWithFarcaster(data);
-            // Step 5. fetch the auth material, close the dialog, and unrender any farcaster client stuff
-            await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret as string);
-            setDialogOpen(false);
-            setStep("initial");
-        } catch (error) {
-            console.error("Error during Farcaster sign-in:", error);
-            setError("Failed to sign in with Farcaster");
-        }
-    };
-
-    useEffect(() => {
-        if (farcasterData != null) {
-            // Step 4. call the handleFarcasterSignInfunction to handle the sign in
-            handleFarcasterSignIn(farcasterData);
-        }
-    }, [farcasterData]);
-
-    useEffect(() => {
-        if (isConnected) {
-            // Step 2. once connected, call the signIn function to start the sign in process
-            signIn();
-        }
-    }, [isConnected]);
-
-    useEffect(() => {
-        // Step 1. call the connect function to initialize the connection
-        connect();
-    }, []);
-
-    return (
-        <div>
-            <AuthFormBackButton
-                onClick={() => {
-                    signOut();
-                    setStep("initial");
-                }}
-                iconColor={appearance?.colors?.textPrimary}
-                ringColor={appearance?.colors?.accent}
-            />
-
-            <div className="flex flex-col items-center gap-4">
-                <div className="text-center">
-                    <h3
-                        className="text-lg font-semibold text-cm-text-primary mb-2"
-                        style={{ color: appearance?.colors?.textPrimary }}
-                    >
-                        Sign in with Farcaster
-                    </h3>
-                    <p
-                        className="text-base font-normal text-cm-text-secondary"
-                        style={{ color: appearance?.colors?.textSecondary }}
-                    >
-                        Scan with your phone's camera to continue.
-                    </p>
-                </div>
-                <div
-                    className="bg-white aspect-square rounded-lg p-4"
-                    style={{
-                        backgroundColor: appearance?.colors?.inputBackground,
-                        borderRadius: appearance?.borderRadius,
-                    }}
-                >
-                    {qrCodeUrl != null ? (
-                        <QRCode uri={qrCodeUrl} size={280} />
-                    ) : (
-                        <div className="min-h-[246px] flex items-center justify-center">
-                            <Spinner
-                                style={{
-                                    color: appearance?.colors?.textSecondary,
-                                    fill: appearance?.colors?.textPrimary,
-                                }}
-                            />
-                        </div>
-                    )}
-                </div>
-                {qrCodeUrl ? (
-                    <>
-                        <p
-                            className="text-base text-center font-normal text-cm-text-secondary"
-                            style={{ color: appearance?.colors?.textSecondary }}
-                        >
-                            Alternatively, click on this link to open Warpcast.
-                        </p>
-                        <a
-                            href={qrCodeUrl}
-                            rel="noopener noreferrer"
-                            target="_blank"
-                            className="text-base font-normal text-cm-link"
-                            style={{ color: appearance?.colors?.textLink }}
-                        >
-                            Open Warpcast
-                        </a>
-                    </>
-                ) : null}
-            </div>
-        </div>
-    );
-}

package/src/components/auth/methods/google/GoogleSignIn.tsx

@@ -1,53 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import { GoogleIcon } from "@/icons/google";
-import { useOAuthWindowListener } from "@/hooks/useOAuthWindowListener";
-import { Spinner } from "@/components/common/Spinner";
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { classNames } from "@/utils/classNames";
-
-export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
-    const { step, appearance, isLoadingOauthUrlMap } = useAuthForm();
-    const { createPopupAndSetupListeners, isLoading: isLoadingOAuthWindow } = useOAuthWindowListener("google");
-    const isLoading = isLoadingOauthUrlMap || isLoadingOAuthWindow;
-
-    if (step !== "initial") {
-        return null;
-    }
-
-    return (
-        <button
-            className={classNames(
-                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                "transition-colors duration-200 ease-in-out",
-                "hover:bg-cm-hover focus:bg-cm-hover outline-none",
-                isLoading ? "cursor-not-allowed hover:bg-cm-muted-primary" : ""
-            )}
-            style={{
-                borderRadius: appearance?.borderRadius,
-                backgroundColor: appearance?.colors?.buttonBackground,
-            }}
-            onClick={isLoading ? undefined : createPopupAndSetupListeners}
-            {...props}
-        >
-            <>
-                <GoogleIcon className="h-[25px] w-[25px] absolute left-[18px]" />
-                {isLoading ? (
-                    <Spinner
-                        style={{
-                            color: appearance?.colors?.textSecondary,
-                            fill: appearance?.colors?.textPrimary,
-                        }}
-                    />
-                ) : (
-                    <span
-                        className="font-medium"
-                        style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
-                    >
-                        Sign in with Google
-                    </span>
-                )}
-            </>
-            <span className="sr-only">Sign in with Google</span>
-        </button>
-    );
-}

package/src/components/auth/methods/web3/Web3AuthFlow.tsx

@@ -1,35 +0,0 @@
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { Web3AuthFlowButton } from "./Web3AuthFlowButton";
-import { Web3Connectors } from "./Web3Connectors";
-import { useCrossmint } from "@/hooks";
-import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
-import { DynamicWeb3WalletConnect } from "@/providers/auth/web3/DynamicWeb3WalletConnect";
-
-export function Web3AuthFlow() {
-    const { crossmint } = useCrossmint();
-    const apiClient = createCrossmintApiClient(crossmint, {
-        usageOrigin: "client",
-    });
-
-    return (
-        <DynamicWeb3WalletConnect apiKeyEnvironment={apiClient["parsedAPIKey"].environment}>
-            <Web3AuthFlowContent />
-        </DynamicWeb3WalletConnect>
-    );
-}
-
-function Web3AuthFlowContent() {
-    const { step } = useAuthForm();
-
-    // Show wallet connectors when in any web3 step
-    if (step.startsWith("web3")) {
-        return <Web3Connectors />;
-    }
-
-    // Show initial connect button on first step
-    if (step === "initial") {
-        return <Web3AuthFlowButton />;
-    }
-
-    return null;
-}

package/src/components/auth/methods/web3/Web3AuthFlowButton.tsx

@@ -1,44 +0,0 @@
-import { ChevronRightIcon } from "@/icons/chevronRight";
-import { WalletIcon } from "@/icons/wallet";
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { classNames } from "@/utils/classNames";
-
-export function Web3AuthFlowButton() {
-    const { step, appearance, setStep, setError } = useAuthForm();
-
-    if (step !== "initial") {
-        return null;
-    }
-
-    return (
-        <button
-            className={classNames(
-                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                "transition-colors duration-200 ease-in-out",
-                "hover:bg-cm-hover focus:bg-cm-hover outline-none"
-            )}
-            style={{
-                borderRadius: appearance?.borderRadius,
-                borderColor: appearance?.colors?.border,
-                backgroundColor: appearance?.colors?.buttonBackground,
-            }}
-            onClick={() => {
-                setStep("web3");
-                setError(null);
-            }}
-        >
-            <WalletIcon
-                className="h-[21px] w-[21px] absolute left-[20px]"
-                style={{ color: appearance?.colors?.textPrimary }}
-            />
-            <span className="font-medium" style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}>
-                Continue with a wallet
-            </span>
-            <ChevronRightIcon
-                className="h-[21px] w-[21px] absolute right-[20px]"
-                style={{ color: appearance?.colors?.textSecondary }}
-            />
-            <span className="sr-only">Continue with a wallet</span>
-        </button>
-    );
-}

package/src/components/auth/methods/web3/Web3Connector.tsx

@@ -1,62 +0,0 @@
-import type { UIConfig } from "@crossmint/common-sdk-base";
-import { PoweredByCrossmint } from "@/components/common/PoweredByCrossmint";
-import { classNames } from "@/utils/classNames";
-
-export function Web3Connector({
-    icon,
-    appearance,
-    isLoading,
-    onConnectClick,
-    headingText,
-    buttonText,
-}: {
-    icon: string;
-    appearance?: UIConfig;
-    isLoading: boolean;
-    onConnectClick: () => void;
-    headingText: string;
-    buttonText: string;
-}) {
-    return (
-        <>
-            <div className="flex flex-col items-center text-center mt-8 mb-4 gap-2">
-                <img src={icon} alt={"metamask"} className="h-[74px] w-[74px]" />
-                <h3
-                    className="text-lg font-semibold text-cm-text-primary"
-                    style={{ color: appearance?.colors?.textPrimary }}
-                >
-                    {headingText}
-                </h3>
-                <p
-                    className="text-base font-normal text-cm-text-primary"
-                    style={{ color: appearance?.colors?.textPrimary }}
-                >
-                    Don’t see your wallet? Check your other browser windows.
-                </p>
-            </div>
-
-            <button
-                className={classNames(
-                    "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                    "transition-colors duration-200 ease-in-out",
-                    "hover:bg-cm-hover focus:bg-cm-hover outline-none",
-                    isLoading ? "cursor-not-allowed bg-cm-muted-primary" : ""
-                )}
-                style={{
-                    borderRadius: appearance?.borderRadius,
-                    borderColor: appearance?.colors?.border,
-                    backgroundColor: appearance?.colors?.buttonBackground,
-                }}
-                onClick={isLoading ? undefined : onConnectClick}
-            >
-                <span className="font-medium" style={{ color: appearance?.colors?.textPrimary }}>
-                    {buttonText}
-                </span>
-            </button>
-
-            <div className="flex justify-center pt-4">
-                <PoweredByCrossmint color={appearance?.colors?.textSecondary} />
-            </div>
-        </>
-    );
-}

package/src/components/auth/methods/web3/Web3ConnectorButton.tsx

@@ -1,38 +0,0 @@
-import type { UIConfig } from "@crossmint/common-sdk-base";
-import type React from "react";
-import { classNames } from "../../../../utils/classNames";
-
-export function Web3ConnectorButton({
-    title,
-    appearance,
-    img,
-    ...props
-}: {
-    title: string;
-    appearance?: UIConfig;
-    img: string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
-    return (
-        <button
-            className={classNames(
-                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                "transition-colors duration-200 ease-in-out",
-                "hover:bg-cm-hover focus:bg-cm-hover outline-none"
-            )}
-            style={{
-                borderRadius: appearance?.borderRadius,
-                borderColor: appearance?.colors?.border,
-                backgroundColor: appearance?.colors?.buttonBackground,
-            }}
-            {...props}
-        >
-            <>
-                <img src={img} alt={title} className="h-[25px] w-[25px] absolute left-[18px]" />
-                <span className="font-medium" style={{ color: appearance?.colors?.textPrimary }}>
-                    {title}
-                </span>
-            </>
-            <span className="sr-only">Sign in with {title}</span>
-        </button>
-    );
-}

package/src/components/auth/methods/web3/Web3Connectors.tsx

@@ -1,28 +0,0 @@
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { AuthFormBackButton } from "../../AuthFormBackButton";
-import { DynamicEmbeddedWidget } from "@dynamic-labs/sdk-react-core";
-
-export function Web3Connectors() {
-    const { appearance, step, setStep } = useAuthForm();
-
-    if (step === "web3") {
-        return (
-            <>
-                <AuthFormBackButton
-                    onClick={() => setStep("initial")}
-                    iconColor={appearance?.colors?.textPrimary}
-                    ringColor={appearance?.colors?.accent}
-                />
-                <div className="flex flex-col items-center">
-                    <div className="flex flex-col gap-[10px] w-full">
-                        <div className="widget-container">
-                            <DynamicEmbeddedWidget background="none" />
-                        </div>
-                    </div>
-                </div>
-            </>
-        );
-    }
-
-    return null;
-}

package/src/components/common/CrossmintLogoV2/CrossmintLogoV2.tsx

@@ -1,98 +0,0 @@
-import type { z } from "zod";
-import type { CrossmintLogoColorsAndDisplayType, crossmintLogoColorsAndDisplayTypeSchema } from "./schemas";
-import { CROSSMINT_LOGO_DEFAULTS, CROSSMINT_LOGO_DEFAULT_COLORS, CROSSMINT_LOGO_VIEWBOXES } from "./consts";
-import { useId, type JSX } from "react";
-
-export type CrossmintLogoV2Props = Omit<JSX.IntrinsicElements["svg"], "viewBox"> &
-    z.input<typeof crossmintLogoColorsAndDisplayTypeSchema>;
-
-export function CrossmintLogoV2({ colors, displayType = "icon-and-text", ...props }: CrossmintLogoV2Props) {
-    const { icon: iconColor, text: textColor } = {
-        icon: colors?.icon || CROSSMINT_LOGO_DEFAULTS.colors.icon,
-        text: colors?.text || CROSSMINT_LOGO_DEFAULT_COLORS.light.text,
-    };
-
-    const colorsAndDisplayType: CrossmintLogoColorsAndDisplayType = {
-        colors: { icon: iconColor, text: textColor },
-        displayType,
-    };
-
-    // We must only set a default width if both width and height are not provided
-    if (props.width == null && props.height == null) {
-        props.width = 144;
-    }
-
-    const gradientId = useId();
-
-    const Logo = (
-        <svg viewBox={CROSSMINT_LOGO_VIEWBOXES[displayType]} {...props}>
-            {getSvgGradientDefinition(colorsAndDisplayType, gradientId)}
-            <g>
-                <g>
-                    {getSvgText(colorsAndDisplayType)}
-                    {getSvgIcon(colorsAndDisplayType, gradientId)}
-                </g>
-            </g>
-        </svg>
-    );
-
-    return Logo;
-}
-
-function getSvgGradientDefinition(props: CrossmintLogoColorsAndDisplayType, gradientId: string) {
-    const { icon: iconColor } = props.colors;
-    if (iconColor.type !== "gradient") {
-        return null;
-    }
-    return (
-        <defs>
-            <linearGradient
-                id={`logoGradient-${gradientId}`}
-                className={`logoGradient`}
-                x1=".1"
-                y1=".1"
-                x2="85.8"
-                y2="85.8"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop className="stop-0" offset="0" stopColor={iconColor.from} />
-                <stop className="stop-1" offset="1" stopColor={iconColor.to} />
-            </linearGradient>
-        </defs>
-    );
-}
-
-function getSvgText({ colors, displayType }: CrossmintLogoColorsAndDisplayType) {
-    if (displayType === "icon-only") {
-        return null;
-    }
-    const { text: textColor } = colors;
-    return (
-        <>
-            <path
-                fill={textColor}
-                d="M372.7 9.5c0-3.4 2.7-6.1 6-6.1S385 6 385 9.5s-2.8 6-6.2 6-6-2.6-6-6m77.7 1.9V24h8.6v8.8h-8.6V52q-.1 5.4 5.3 5.2c1.3 0 3-.2 3.4-.3v8.2c-.6.2-2.5 1-6 1-7.7 0-12.5-4.7-12.5-12.5V33H433v-9h8.5V11.4zm-338 44.4q3 5 7.8 7.9 5 2.8 11.3 2.8 4.5 0 8.4-1.5 3.7-1.7 6.6-4.4 2.8-2.9 4-6.4l-8.9-4a10.5 10.5 0 0 1-10.1 7 11 11 0 0 1-6-1.5q-2.4-1.7-4-4.5-1.5-2.9-1.4-6.6a12 12 0 0 1 1.4-6.5q1.5-3 4-4.5a11 11 0 0 1 6-1.6q3.5 0 6.2 2 2.8 1.9 4 5l8.8-3.8q-1.2-3.9-4-6.5-2.9-2.8-6.7-4.3-3.9-1.6-8.3-1.6-6.3 0-11.3 2.8a21 21 0 0 0-7.8 7.8q-2.8 5-2.8 11.2c0 6.2 1 7.9 2.8 11.2m53-32.1h-9.4v41.9h10V42.3q0-4.8 2.7-7.4 2.5-2.7 6.9-2.7h3.6v-9H177q-4.5 0-7.6 1.9a10 10 0 0 0-3.8 4.5z"
-            />
-            <path
-                d="M202.9 22.8c12.4 0 21.6 9.3 21.6 22s-9.1 22-21.6 22-21.5-9.2-21.5-22 9.1-22 21.5-22m0 35.2c6.1 0 11.6-4.5 11.6-13.2s-5.5-13-11.6-13-11.6 4.4-11.6 13S196.8 58 203 58"
-                fillRule="evenodd"
-                fill={textColor}
-            />
-            <path
-                fill={textColor}
-                d="m236.4 52-8.6 2.4c.5 4.6 5 12.5 17.1 12.5 10.6 0 15.7-7 15.7-13.3s-4.1-11-12-12.6l-6.3-1.3q-4-1-4.1-4.4c0-2.5 2.4-4.7 6-4.7 5.5 0 7.3 3.8 7.6 6.2l8.4-2.4c-.7-4.1-4.5-11.6-16-11.6-8.7 0-15.3 6.1-15.3 13.4 0 5.7 3.8 10.5 11.1 12l6.2 1.4q4.9 1.2 4.8 4.6c0 2.6-2 4.8-6.2 4.8-5.3 0-8-3.3-8.4-7m27.6 2.4 8.5-2.4c.4 3.7 3.2 7 8.5 7 4 0 6.2-2.2 6.2-4.7q.1-3.6-4.9-4.6l-6.1-1.4c-7.3-1.6-11.2-6.4-11.2-12.1 0-7.2 6.7-13.4 15.3-13.4 11.6 0 15.3 7.5 16 11.6l-8.4 2.4c-.3-2.4-2-6.2-7.6-6.2-3.5 0-6 2.2-6 4.7q.2 3.5 4.2 4.4l6.3 1.3c7.8 1.7 12 6.5 12 12.6s-5.2 13.3-15.8 13.3c-12 0-16.6-7.8-17-12.5m48.6-30.7h-9.5v41.9h10.1V41q0-2.7 1-4.8a8 8 0 0 1 7-4.2 8 8 0 0 1 7.2 4.2q1 2.1 1 4.8v24.6h10.1V41q0-2.7 1-4.8a8 8 0 0 1 7-4.2q2.6 0 4.4 1.2 1.8 1 2.8 3 1 2.1 1 4.8v24.6h10v-27q0-4.5-2-8.2a14 14 0 0 0-5.5-5.6q-3.5-2-8-2-5 0-8.8 2.5-2.4 1.6-4.1 4.2-1.4-2.3-3.9-4a16 16 0 0 0-9-2.7q-4.8 0-8.3 2.2-2.2 1.5-3.5 4zm71.1 41.9h-9.8V24.1h9.8zm8.8-41.6v41.6h10V41.3q0-2.8 1.1-4.8a8 8 0 0 1 7.3-4.2 8 8 0 0 1 7.4 4.2q1 2 1 4.7v24.4h10V38.9q0-4.6-2-8.2a14 14 0 0 0-5.5-5.6q-3.4-2-8.1-2c-4.7 0-5.5.7-7.8 2q-2.5 1.6-4 4v-5z"
-            />
-        </>
-    );
-}
-
-function getSvgIcon(props: CrossmintLogoColorsAndDisplayType, gradientId: string) {
-    const { icon: iconColor } = props.colors;
-    return (
-        <path
-            d="M70 48.3A62 62 0 0 0 47.5 43c7.7-.6 22.8-2.7 29-10.4C86.6 25.2 86 .3 86 .3S62.3-2.4 52 9.4c-6.5 6.4-8.4 17.5-9 25.2-.6-7.7-2.6-18.8-9-25.2C23.7-2.4 0 .3 0 .3S-.3 15.8 4.4 26C6.8 31 11 35.1 16 37.6c7.2 3.7 16.8 5 22.4 5.4-5.6.4-15.2 1.7-22.4 5.3C11 51 6.8 55 4.4 60-.3 70.2 0 85.7 0 85.7s23.7 2.6 34-9.2c6.4-6.3 8.4-17.5 9-25.2.6 7.8 2.6 18.9 9 25.3 10.3 11.7 34 9.1 34 9.1s.3-15.6-4.5-25.7A25 25 0 0 0 70 48.3m.8 21.9c-.1 0-12.5-3.6-28.3-24.7A195 195 0 0 0 15 71.8l-.5.6.2-.8c0-.1 3.7-12.8 25.7-29C38.3 39.4 33.3 32.2 14 15l-.4-.4.6.1c.4 0 10.3 1.6 28.5 25l.6 1c2.6-1.8 10-7.1 26.7-26l.4-.4-.1.6c0 .4-1.6 10.3-24.9 28.4A193 193 0 0 0 71 69.9l.6.5z"
-            fill={iconColor.type === "gradient" ? `url(#logoGradient-${gradientId})` : iconColor.color}
-            fillRule="evenodd"
-        />
-    );
-}

package/src/components/common/CrossmintLogoV2/consts.ts

@@ -1,28 +0,0 @@
-export const CROSSMINT_LOGO_DEFAULT_COLORS = {
-    light: {
-        icon: {
-            type: "gradient",
-            from: "#5edd4d",
-            to: "#05ce6c",
-        },
-        text: "#222",
-    },
-    dark: {
-        icon: {
-            type: "gradient",
-            from: "#5edd4d",
-            to: "#05ce6c",
-        },
-        text: "#fff",
-    },
-} as const;
-
-export const CROSSMINT_LOGO_DEFAULTS = {
-    colors: CROSSMINT_LOGO_DEFAULT_COLORS.light,
-    displayType: "icon-and-text",
-} as const;
-
-export const CROSSMINT_LOGO_VIEWBOXES = {
-    "icon-only": "0 0 86 86",
-    "icon-and-text": "0 0 459.2 86",
-} as const;