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

package/src/providers/auth/AuthFormProvider.test.tsx

@@ -1,142 +0,0 @@
-import { render, fireEvent, waitFor } from "@testing-library/react";
-import { beforeEach } from "vitest";
-import { AuthFormProvider, useAuthForm } from "./AuthFormProvider";
-import { describe, expect, it, vi } from "vitest";
-import type { CrossmintAuthWalletConfig, LoginMethod } from "..";
-import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
-
-vi.mock("@/hooks/useCrossmintAuth");
-
-// Mock component to test the AuthFormProvider
-function TestComponent() {
-    const { step, baseUrl, loginMethods, setStep, setDialogOpen, oauthUrlMap, isLoadingOauthUrlMap, appearance } =
-        useAuthForm();
-
-    return (
-        <div>
-            <div data-testid="step">{step}</div>
-            <div data-testid="base-url">{baseUrl}</div>
-            <div data-testid="login-methods">{JSON.stringify(loginMethods)}</div>
-            <div data-testid="appearance">{JSON.stringify(appearance)}</div>
-            <button onClick={() => setStep("otp")} data-testid="set-step">
-                Set Step to OTP
-            </button>
-            <button onClick={() => setDialogOpen(true)} data-testid="set-dialog-open">
-                Open Dialog
-            </button>
-            <div data-testid="oauth-url">{JSON.stringify(oauthUrlMap)}</div>
-            <div data-testid="is-loading-oauth-url">{isLoadingOauthUrlMap.toString()}</div>
-        </div>
-    );
-}
-
-describe("AuthFormProvider", () => {
-    const mockInitialState = {
-        baseUrl: "https://api.example.com",
-        loginMethods: ["email", "google", "farcaster", "web3"] as LoginMethod[],
-        setDialogOpen: vi.fn(),
-        embeddedWallets: {
-            createOnLogin: "off",
-            defaultChain: "base-sepolia",
-            type: "evm-smart-wallet",
-        } as CrossmintAuthWalletConfig,
-        appearance: {
-            colors: {
-                textPrimary: "#000000",
-                textSecondary: "#A4AFB2",
-            },
-        },
-    };
-    const mockedGetOAuthUrl = vi.fn();
-
-    beforeEach(() => {
-        vi.resetAllMocks();
-
-        vi.mocked(useCrossmintAuth).mockReturnValue({
-            crossmintAuth: {
-                getOAuthUrl: mockedGetOAuthUrl.mockResolvedValue("https://oauth.example.com"),
-            },
-        } as any);
-    });
-
-    it("provides initial context values and fetches OAuth URLs", async () => {
-        const { getByTestId } = render(
-            <AuthFormProvider initialState={mockInitialState}>
-                <TestComponent />
-            </AuthFormProvider>
-        );
-
-        expect(getByTestId("step").textContent).toBe("initial");
-        expect(getByTestId("base-url").textContent).toBe("https://api.example.com");
-        expect(getByTestId("login-methods").textContent).toBe('["email","google","farcaster","web3"]');
-        expect(getByTestId("appearance").textContent).toBe(
-            '{"colors":{"textPrimary":"#000000","textSecondary":"#A4AFB2"}}'
-        );
-
-        await waitFor(() => {
-            expect(getByTestId("oauth-url").textContent).toBe('{"google":"https://oauth.example.com"}');
-            expect(getByTestId("is-loading-oauth-url").textContent).toBe("false");
-        });
-    });
-
-    it("updates step", () => {
-        const { getByTestId } = render(
-            <AuthFormProvider initialState={mockInitialState}>
-                <TestComponent />
-            </AuthFormProvider>
-        );
-
-        fireEvent.click(getByTestId("set-step"));
-        expect(getByTestId("step").textContent).toBe("otp");
-    });
-
-    it("calls setDialogOpen", () => {
-        const { getByTestId } = render(
-            <AuthFormProvider initialState={mockInitialState}>
-                <TestComponent />
-            </AuthFormProvider>
-        );
-
-        fireEvent.click(getByTestId("set-dialog-open"));
-        expect(mockInitialState.setDialogOpen).toHaveBeenCalledWith(true);
-    });
-
-    it("handles OAuth URL fetch error", async () => {
-        vi.mocked(mockedGetOAuthUrl).mockRejectedValue(new Error("Fetch failed"));
-        const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
-
-        const { getByTestId } = render(
-            <AuthFormProvider initialState={mockInitialState}>
-                <TestComponent />
-            </AuthFormProvider>
-        );
-
-        await waitFor(() => {
-            expect(getByTestId("oauth-url").textContent).toBe('{"google":""}');
-            expect(getByTestId("is-loading-oauth-url").textContent).toBe("false");
-        });
-
-        expect(consoleSpy).toHaveBeenCalled();
-        consoleSpy.mockRestore();
-    });
-
-    test("throws error when web3 login method is used with createOnLogin=all-users", () => {
-        const invalidState = {
-            ...mockInitialState,
-            loginMethods: ["web3"] as LoginMethod[],
-            embeddedWallets: {
-                createOnLogin: "all-users",
-                defaultChain: "base-sepolia",
-                type: "evm-smart-wallet",
-            } as CrossmintAuthWalletConfig,
-        };
-
-        expect(() =>
-            render(
-                <AuthFormProvider initialState={invalidState}>
-                    <TestComponent />
-                </AuthFormProvider>
-            )
-        ).toThrowError("Creating wallets on login is not yet supported for web3 login method");
-    });
-});

package/src/providers/auth/AuthFormProvider.tsx

@@ -1,109 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
-import type { OAuthProvider } from "@crossmint/common-sdk-auth";
-import type { UIConfig } from "@crossmint/common-sdk-base";
-import type { CrossmintAuthWalletConfig, LoginMethod } from "../CrossmintAuthProvider";
-import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
-
-type AuthStep = "initial" | "otp" | "qrCode" | "web3" | "web3/metamask" | "web3/walletconnect";
-
-type OAuthUrlMap = Record<OAuthProvider, string>;
-const initialOAuthUrlMap: OAuthUrlMap = {
-    google: "",
-    // Farcaster is not included here as it uses a different authentication method
-};
-interface AuthFormContextType {
-    step: AuthStep;
-    error: string | null;
-    appearance?: UIConfig;
-    loginMethods: LoginMethod[];
-    oauthUrlMap: OAuthUrlMap;
-    isLoadingOauthUrlMap: boolean;
-    baseUrl: string;
-    setStep: (step: AuthStep) => void;
-    setError: (error: string | null) => void;
-    setDialogOpen: (open: boolean) => void;
-}
-
-type ContextInitialStateProps = {
-    appearance?: UIConfig;
-    loginMethods: LoginMethod[];
-    baseUrl: string;
-    setDialogOpen?: (open: boolean) => void;
-    embeddedWallets: CrossmintAuthWalletConfig;
-};
-
-const AuthFormContext = createContext<AuthFormContextType | undefined>(undefined);
-
-export const useAuthForm = () => {
-    const context = useContext(AuthFormContext);
-    if (!context) {
-        throw new Error("useAuthForm must be used within an AuthFormProvider");
-    }
-    return context;
-};
-
-export const AuthFormProvider = ({
-    children,
-    initialState,
-}: { children: ReactNode; initialState: ContextInitialStateProps }) => {
-    const { crossmintAuth } = useCrossmintAuth();
-    const [step, setStep] = useState<AuthStep>("initial");
-    const [error, setError] = useState<string | null>(null);
-    const [oauthUrlMap, setOauthUrlMap] = useState<OAuthUrlMap>(initialOAuthUrlMap);
-    const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = useState(true);
-
-    const { loginMethods, baseUrl, setDialogOpen, appearance, embeddedWallets } = initialState;
-
-    if (loginMethods.includes("web3") && embeddedWallets?.createOnLogin === "all-users") {
-        throw new Error("Creating wallets on login is not yet supported for web3 login method");
-    }
-
-    const preFetchAndSetOauthUrl = useCallback(async () => {
-        setIsLoadingOauthUrlMap(true);
-        try {
-            const oauthProviders = loginMethods.filter(
-                (method): method is OAuthProvider => method in initialOAuthUrlMap
-            );
-
-            const oauthPromiseList = oauthProviders.map(async (provider) => {
-                const url = await crossmintAuth?.getOAuthUrl(provider);
-                return { [provider]: url };
-            });
-
-            const oauthUrlMap = Object.assign({}, ...(await Promise.all(oauthPromiseList)));
-            setOauthUrlMap(oauthUrlMap);
-        } catch (error) {
-            console.error("Error fetching OAuth URLs:", error);
-            setError("Unable to load oauth providers. Please try again later.");
-        } finally {
-            setIsLoadingOauthUrlMap(false);
-        }
-    }, [loginMethods, crossmintAuth]);
-
-    useEffect(() => {
-        preFetchAndSetOauthUrl();
-    }, [preFetchAndSetOauthUrl]);
-
-    const handleToggleDialog = (open: boolean) => {
-        setDialogOpen?.(open);
-        if (!open) {
-            // Delay to allow the close transition to complete before resetting the step
-            setTimeout(() => setStep("initial"), 250);
-        }
-    };
-
-    const value: AuthFormContextType = {
-        step,
-        error,
-        baseUrl,
-        appearance,
-        loginMethods,
-        oauthUrlMap,
-        isLoadingOauthUrlMap,
-        setDialogOpen: handleToggleDialog,
-        setError,
-        setStep,
-    };
-
-    return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;
-};

package/src/providers/auth/FarcasterProvider.tsx

@@ -1,12 +0,0 @@
-import type { ReactNode } from "react";
-import { AuthKitProvider } from "@farcaster/auth-kit";
-
-export function FarcasterProvider({ baseUrl, children }: { baseUrl: string; children: ReactNode }) {
-    const config = {
-        rpcUrl: "https://mainnet.optimism.io",
-        domain: new URL(baseUrl).hostname.replace(/^www\./, ""),
-        siweUri: `${baseUrl}api/2024-09-26/session/sdk/auth/authenticate`,
-    };
-
-    return <AuthKitProvider config={config}>{children}</AuthKitProvider>;
-}

package/src/providers/auth/web3/DynamicWeb3WalletConnect.tsx

@@ -1,73 +0,0 @@
-import type React from "react";
-import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
-import { SolanaWalletConnectors } from "@dynamic-labs/solana";
-import type { APIKeyEnvironmentPrefix } from "@crossmint/common-sdk-base";
-import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
-import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
-import { useAuthForm } from "../AuthFormProvider";
-import { dynamicChainToCrossmintChain } from "@/utils/dynamic/dynamicChainToCrossmintChain";
-
-export function DynamicWeb3WalletConnect({
-    children,
-    apiKeyEnvironment,
-}: { children: React.ReactNode; apiKeyEnvironment: APIKeyEnvironmentPrefix }) {
-    const { crossmintAuth } = useCrossmintAuth();
-    const { appearance } = useAuthForm();
-
-    const cssOverrides = `.powered-by-dynamic { display: none !important; } .wallet-list__scroll-container { padding: 0px !important; } .wallet-list__search-container { padding-left: 0px !important; padding-right: 0px !important; } .dynamic-footer { display: none !important; } h1 { color: ${appearance?.colors?.textPrimary} !important; } * { color: ${appearance?.colors?.textSecondary} !important; }`;
-
-    return (
-        <DynamicContextProviderWrapper
-            apiKeyEnvironment={apiKeyEnvironment}
-            settings={{
-                cssOverrides,
-                walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
-                events: {
-                    onAuthFlowCancel() {
-                        console.log("[CryptoWalletConnectionHandler] onAuthFlowCancel");
-                    },
-                    onAuthFlowClose() {
-                        console.log("[CryptoWalletConnectionHandler] onAuthFlowClose");
-                    },
-                    onAuthFailure(data, reason) {
-                        console.error("[CryptoWalletConnectionHandler] onAuthFailure", data, reason);
-                    },
-                    onAuthSuccess(data) {
-                        console.log("[CryptoWalletConnectionHandler] onAuthSuccess", data);
-                    },
-                },
-                handlers: {
-                    handleConnectedWallet: async (wallet) => {
-                        console.log("[CryptoWalletConnectionHandler] handleConnectedWallet", wallet);
-
-                        const address = wallet.address;
-                        if (!address) {
-                            console.error("[CryptoWalletConnectionHandler] handleConnectedWallet: address is missing");
-                            return false;
-                        }
-
-                        const chain = await dynamicChainToCrossmintChain(wallet);
-                        console.log({ chain });
-
-                        try {
-                            const res = await crossmintAuth?.signInWithSmartWallet(address);
-                            const signature = (await wallet.connector?.signMessage(res.challenge)) as `0x${string}`;
-                            const authResponse = (await crossmintAuth?.authenticateSmartWallet(address, signature)) as {
-                                oneTimeSecret: string;
-                            };
-                            const oneTimeSecret = authResponse.oneTimeSecret;
-                            await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret);
-                        } catch (error) {
-                            console.error("[CryptoWalletConnectionHandler] Error authenticating wallet:", error);
-                            return false;
-                        }
-
-                        return true;
-                    },
-                },
-            }}
-        >
-            {children}
-        </DynamicContextProviderWrapper>
-    );
-}

package/src/providers/index.ts

@@ -1,2 +0,0 @@
-export * from "./CrossmintAuthProvider";
-export * from "./CrossmintWalletProvider";

package/src/testUtils.ts

@@ -1 +0,0 @@
-export const MOCK_API_KEY = "sk_development_12341234";

package/src/twind.config.ts

@@ -1,114 +0,0 @@
-import { defineConfig } from "@twind/core";
-import presetTailwind from "@twind/preset-tailwind";
-
-export default defineConfig({
-    presets: [presetTailwind()],
-    theme: {
-        extend: {
-            colors: {
-                // Crossmint colors (cm- prefix)
-                "cm-text-primary": "#00150D",
-                "cm-text-secondary": "#67797F",
-                "cm-background-primary": "#FFFFFF",
-                "cm-muted-primary": "#F0F2F4",
-                "cm-hover": "#E9ECF0",
-                "cm-border": "#D9D9D9",
-                "cm-link": "#1A73E8",
-                "cm-accent": "#04AA6D",
-            },
-            keyframes: {
-                "caret-blink": {
-                    "0%,70%,100%": { opacity: "1" },
-                    "20%,50%": { opacity: "0" },
-                },
-                "fade-in": {
-                    from: { opacity: "0" },
-                    to: { opacity: "1" },
-                },
-                "fade-out": {
-                    from: { opacity: "1" },
-                    to: { opacity: "0" },
-                },
-                "slide-in-from-top": {
-                    "0%": { transform: "translateY(-100%)" },
-                    "100%": { transform: "translateY(0)" },
-                },
-                "slide-out-to-top": {
-                    "0%": { transform: "translateY(0)" },
-                    "100%": { transform: "translateY(-100%)" },
-                },
-                "slide-in-from-bottom": {
-                    "0%": { transform: "translateY(100%)" },
-                    "100%": { transform: "translateY(0)" },
-                },
-                "slide-out-to-bottom": {
-                    "0%": { transform: "translateY(0)" },
-                    "100%": { transform: "translateY(100%)" },
-                },
-                "slide-in-from-left": {
-                    "0%": { transform: "translateX(-100%)" },
-                    "100%": { transform: "translateX(0)" },
-                },
-                "slide-out-to-left": {
-                    "0%": { transform: "translateX(0)" },
-                    "100%": { transform: "translateX(-100%)" },
-                },
-                "slide-in-from-right": {
-                    "0%": { transform: "translateX(100%)" },
-                    "100%": { transform: "translateX(0)" },
-                },
-                "slide-out-to-right": {
-                    "0%": { transform: "translateX(0)" },
-                    "100%": { transform: "translateX(100%)" },
-                },
-                "zoom-in-95": {
-                    "0%": { opacity: "0", transform: "scale(0.95) translate(-50%, -50%)" },
-                    "100%": { opacity: "1", transform: "scale(1) translate(-50%, -50%)" },
-                },
-                "zoom-out-95": {
-                    "0%": { opacity: "1", transform: "scale(1) translate(-50%, -50%)" },
-                    "100%": { opacity: "0", transform: "scale(0.95) translate(-50%, -50%)" },
-                },
-            },
-            animation: {
-                "caret-blink": "caret-blink 1.25s ease-out infinite",
-                "fade-in": "fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "fade-out": "fade-out 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "slide-in-from-top": "slide-in-from-top 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "slide-out-to-top": "slide-out-to-top 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "slide-in-from-bottom": "slide-in-from-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "slide-out-to-bottom": "slide-out-to-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "slide-in-from-left": "slide-in-from-left 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "slide-out-to-left": "slide-out-to-left 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "slide-in-from-right": "slide-in-from-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "slide-out-to-right": "slide-out-to-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "zoom-in-95": "zoom-in-95 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-                "zoom-out-95": "zoom-out-95 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-            },
-            durations: {
-                "300": "300ms",
-                "500": "500ms",
-            },
-        },
-    },
-    rules: [
-        [
-            "cm-responsive-border-radius-auth-dialog",
-            {
-                "@media (max-width: 479px)": {
-                    "border-bottom-left-radius": "0 !important",
-                    "border-bottom-right-radius": "0 !important",
-                },
-            },
-        ],
-        [
-            "focus-ring-custom",
-            {
-                "&:focus": {
-                    "box-shadow": "0 0 0 3px var(--focus-ring-color)",
-                },
-            },
-        ],
-    ],
-    /* config */
-});

package/src/types/auth.ts

@@ -1,4 +0,0 @@
-export type OtpEmailPayload = {
-    email: string;
-    emailId: string;
-};

package/src/utils/classNames.ts

@@ -1,12 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-/**
- * Combines multiple class names into a single string.
- *
- * @param inputs - The class names to combine.
- * @returns The combined class names as a string.
- */
-export function classNames(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}

package/src/utils/createCrossmintApiClient.ts

@@ -1,17 +0,0 @@
-import { LIB_VERSION } from "@/consts/version";
-import { type Crossmint, CrossmintApiClient, type CrossmintApiClientInternalConfig } from "@crossmint/common-sdk-base";
-
-export function createCrossmintApiClient(
-    crossmint: Crossmint,
-    apiKeyExpectations?: CrossmintApiClientInternalConfig["apiKeyExpectations"]
-) {
-    return new CrossmintApiClient(crossmint, {
-        internalConfig: {
-            sdkMetadata: {
-                name: "@crossmint/client-sdk-react-ui",
-                version: LIB_VERSION,
-            },
-            apiKeyExpectations,
-        },
-    });
-}

package/src/utils/dynamic/dynamicChainToCrossmintChain.ts

@@ -1,20 +0,0 @@
-import { chainIdToBlockchain, type BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
-import type { HandleConnectedWallet } from "@dynamic-labs/sdk-react-core";
-
-export async function dynamicChainToCrossmintChain(
-    wallet: Parameters<HandleConnectedWallet>[0]
-): Promise<BlockchainIncludingTestnet> {
-    const chain = wallet.chain;
-    if (chain === "SOL") {
-        return "solana";
-    }
-    const chainId = await wallet.connector?.getNetwork();
-    if (typeof chainId !== "number") {
-        throw new Error("chainId is not a number");
-    }
-    const chainFromChainId = chainIdToBlockchain(chainId);
-    if (!chainFromChainId) {
-        throw new Error(`ChainId ${chainId} is not supported`);
-    }
-    return chainFromChainId as BlockchainIncludingTestnet;
-}