@crossmint/client-sdk-react-ui 1.4.1 → 1.5.0

package/src/providers/CrossmintWalletProvider.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode, createContext, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
 
 import {
     type EVMSmartWallet,
@@ -6,11 +7,30 @@ import {
     SmartWalletError,
     SmartWalletSDK,
     type WalletParams,
+    type PasskeySigner,
 } from "@crossmint/client-sdk-smart-wallet";
 
 import { useCrossmint } from "../hooks";
+import type { UIConfig } from "@crossmint/common-sdk-base";
+import { PasskeyPrompt } from "@/components/auth/PasskeyPrompt";
 
 type WalletStatus = "not-loaded" | "in-progress" | "loaded" | "loading-error";
+
+type ValidPasskeyPromptType =
+    | "create-wallet"
+    | "transaction"
+    | "not-supported"
+    | "create-wallet-error"
+    | "transaction-error";
+type PasskeyPromptState =
+    | {
+          type: ValidPasskeyPromptType;
+          open: true;
+          primaryActionOnClick: () => void;
+          secondaryActionOnClick?: () => void;
+      }
+    | { open: false };
+
 type ValidWalletState =
     | { status: "not-loaded" | "in-progress" }
     | { status: "loaded"; wallet: EVMSmartWallet }
@@ -20,13 +40,15 @@ type WalletContext = {
     status: WalletStatus;
     wallet?: EVMSmartWallet;
     error?: SmartWalletError;
-    getOrCreateWallet: (config?: WalletConfig) => { startedCreation: boolean; reason?: string };
+    getOrCreateWallet: (
+        config?: Pick<WalletConfig, "signer" | "type">
+    ) => Promise<{ startedCreation: boolean; reason?: string }>;
     clearWallet: () => void;
 };
 
 export const WalletContext = createContext<WalletContext>({
     status: "not-loaded",
-    getOrCreateWallet: () => ({ startedCreation: false }),
+    getOrCreateWallet: () => Promise.resolve({ startedCreation: false }),
     clearWallet: () => {},
 });
 
@@ -35,17 +57,24 @@ export type WalletConfig = WalletParams & { type: "evm-smart-wallet" };
 export function CrossmintWalletProvider({
     children,
     defaultChain,
+    showWalletModals = true, // enabled by default
+    appearance,
 }: {
     children: ReactNode;
     defaultChain: EVMSmartWalletChain;
+    showWalletModals?: boolean;
+    appearance?: UIConfig;
 }) {
     const { crossmint } = useCrossmint("CrossmintWalletProvider must be used within CrossmintProvider");
     const smartWalletSDK = useMemo(() => SmartWalletSDK.init({ clientApiKey: crossmint.apiKey }), [crossmint.apiKey]);
 
-    const [state, setState] = useState<ValidWalletState>({ status: "not-loaded" });
+    const [walletState, setWalletState] = useState<ValidWalletState>({ status: "not-loaded" });
+    const [passkeyPromptState, setPasskeyPromptState] = useState<PasskeyPromptState>({ open: false });
 
-    const getOrCreateWallet = (config: WalletConfig = { type: "evm-smart-wallet", signer: { type: "PASSKEY" } }) => {
-        if (state.status == "in-progress") {
+    const getOrCreateWallet = async (
+        config: WalletConfig = { type: "evm-smart-wallet", signer: { type: "PASSKEY" } }
+    ) => {
+        if (walletState.status == "in-progress") {
             console.log("Wallet already loading");
             return { startedCreation: false, reason: "Wallet is already loading." };
         }
@@ -54,31 +83,64 @@ export function CrossmintWalletProvider({
             return { startedCreation: false, reason: `Jwt not set in "CrossmintProvider".` };
         }
 
-        const internalCall = async () => {
-            try {
-                setState({ status: "in-progress" });
-                const wallet = await smartWalletSDK.getOrCreateWallet(
-                    { jwt: crossmint.jwt as string },
-                    defaultChain,
-                    config
-                );
-                setState({ status: "loaded", wallet });
-            } catch (error: unknown) {
-                console.error("There was an error creating a wallet ", error);
-                setState(deriveErrorState(error));
-            }
-        };
-
-        internalCall();
+        try {
+            setWalletState({ status: "in-progress" });
+            const wallet = await smartWalletSDK.getOrCreateWallet(
+                { jwt: crossmint.jwt as string },
+                defaultChain,
+                enhanceConfigWithPasskeyPrompts(config)
+            );
+            setWalletState({ status: "loaded", wallet });
+        } catch (error: unknown) {
+            console.error("There was an error creating a wallet ", error);
+            setWalletState(deriveErrorState(error));
+        }
         return { startedCreation: true };
     };
 
+    const enhanceConfigWithPasskeyPrompts = (config: WalletConfig) => {
+        if (showWalletModals && (config.signer as PasskeySigner).type === "PASSKEY") {
+            return {
+                ...config,
+                signer: {
+                    ...config.signer,
+                    onPrePasskeyRegistration: createPasskeyPrompt("create-wallet"),
+                    onPasskeyRegistrationError: createPasskeyPrompt("create-wallet-error"),
+                    onFirstTimePasskeySigning: createPasskeyPrompt("transaction"),
+                    onFirstTimePasskeySigningError: createPasskeyPrompt("transaction-error"),
+                },
+            };
+        }
+        return config;
+    };
+
+    const createPasskeyPrompt = (type: ValidPasskeyPromptType) => () =>
+        new Promise<void>((resolve) => {
+            setPasskeyPromptState({
+                type,
+                open: true,
+                primaryActionOnClick: () => {
+                    setPasskeyPromptState({ open: false });
+                    resolve();
+                },
+                secondaryActionOnClick: () => {
+                    setPasskeyPromptState({ open: false });
+                    resolve();
+                },
+            });
+        });
+
     const clearWallet = () => {
-        setState({ status: "not-loaded" });
+        setWalletState({ status: "not-loaded" });
     };
 
     return (
-        <WalletContext.Provider value={{ ...state, getOrCreateWallet, clearWallet }}>{children}</WalletContext.Provider>
+        <WalletContext.Provider value={{ ...walletState, getOrCreateWallet, clearWallet }}>
+            {children}
+            {passkeyPromptState.open
+                ? createPortal(<PasskeyPrompt state={passkeyPromptState} appearance={appearance} />, document.body)
+                : null}
+        </WalletContext.Provider>
     );
 }