@crossmint/client-sdk-react-ui 1.9.2 → 1.10.0

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -1,19 +1,22 @@
-import { deleteCookie } from "@/utils/authCookies";
 import { SESSION_PREFIX, REFRESH_TOKEN_PREFIX } from "@crossmint/common-sdk-auth";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
 import { type ReactNode, act } from "react";
-import { beforeEach, describe, expect, vi } from "vitest";
+import { beforeEach, describe, expect, vi, it, type MockInstance } from "vitest";
 import { mock } from "vitest-mock-extended";
 
-import { CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth";
+import { CrossmintAuth as CrossmintAuthClient, getJWTExpiration, deleteCookie } from "@crossmint/client-sdk-auth";
 import { type EVMSmartWallet, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
 import { createCrossmint } from "@crossmint/common-sdk-base";
 
 import { useAuth, useWallet } from "../hooks";
 import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
-import { MOCK_API_KEY, waitForSettledState } from "../testUtils";
+import { MOCK_API_KEY } from "../testUtils";
 import { CrossmintAuthProvider, type CrossmintAuthWalletConfig } from "./CrossmintAuthProvider";
 
+vi.mock("./auth/web3/WagmiAuthProvider", () => ({
+    WagmiAuthProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
 vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
     const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
     return {
@@ -26,10 +29,14 @@ vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
 
 vi.mock("@crossmint/common-sdk-base", async () => {
     const actual = await vi.importActual("@crossmint/common-sdk-base");
+
+    class MockCrossmintApiClient {}
+
     return {
         ...actual,
         createCrossmint: vi.fn(),
         validateApiKeyAndGetCrossmintBaseUrl: vi.fn(),
+        CrossmintApiClient: MockCrossmintApiClient,
     };
 });
 
@@ -38,19 +45,6 @@ vi.mock("@crossmint/client-sdk-auth", async () => {
     return {
         ...actual,
         getJWTExpiration: vi.fn(),
-        CrossmintAuthService: vi.fn().mockImplementation(() => ({
-            refreshAuthMaterial: vi.fn().mockResolvedValue({
-                jwt: "new-mock-jwt",
-                refreshToken: {
-                    secret: "new-mock-refresh-token",
-                    expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),
-                },
-                user: {
-                    id: "123",
-                    email: "test@test.com",
-                },
-            }),
-        })),
     };
 });
 
@@ -69,9 +63,9 @@ function renderAuthProvider({
 }
 
 function TestComponent() {
-    const { setJwt, setRefreshToken } = useCrossmint();
+    const { setJwt } = useCrossmint();
     const { wallet, status: walletStatus, error } = useWallet();
-    const { status: authStatus, refreshToken } = useAuth();
+    const { status: authStatus } = useAuth();
     return (
         <div>
             <div data-testid="error">{error?.message ?? "No Error"}</div>
@@ -85,14 +79,6 @@ function TestComponent() {
             <button data-testid="clear-jwt-button" onClick={() => setJwt(undefined)}>
                 Clear JWT
             </button>
-
-            <div data-testid="refresh-token">{refreshToken ?? "No Refresh Token"}</div>
-            <button data-testid="set-refresh-token" onClick={() => setRefreshToken("mock-refresh-token")}>
-                Set Refresh Token
-            </button>
-            <button data-testid="clear-refresh-token-button" onClick={() => setRefreshToken(undefined)}>
-                Clear Refresh Token
-            </button>
         </div>
     );
 }
@@ -101,11 +87,33 @@ describe("CrossmintAuthProvider", () => {
     let mockSDK: SmartWalletSDK;
     let mockWallet: EVMSmartWallet;
     let embeddedWallets: CrossmintAuthWalletConfig;
-    let mockCrossmintAuthService: { refreshAuthMaterial: ReturnType<typeof vi.fn> };
+    let handleRefreshAuthMaterialSpy: MockInstance;
+    let getOAuthUrlSpy: MockInstance;
 
     beforeEach(() => {
         vi.resetAllMocks();
-        vi.mocked(createCrossmint).mockImplementation(() => ({}) as any);
+        vi.mocked(createCrossmint).mockImplementation(
+            () =>
+                ({
+                    apiKey: MOCK_API_KEY,
+                }) as any
+        );
+
+        global.fetch = vi.fn().mockImplementation((url: string) => {
+            if (url.includes("/auth/social/")) {
+                return Promise.resolve({
+                    ok: true,
+                    json: () =>
+                        Promise.resolve({
+                            oauthUrl: "https://oauth.example.com",
+                        }),
+                });
+            }
+            return Promise.resolve({
+                ok: true,
+                json: () => Promise.resolve({}),
+            });
+        });
 
         mockSDK = mock<SmartWalletSDK>();
         mockWallet = mock<EVMSmartWallet>();
@@ -122,19 +130,21 @@ describe("CrossmintAuthProvider", () => {
         deleteCookie(REFRESH_TOKEN_PREFIX);
         deleteCookie(SESSION_PREFIX);
 
-        mockCrossmintAuthService = {
-            refreshAuthMaterial: vi.fn().mockResolvedValue({
-                jwt: "new-mock-jwt",
-                refreshToken: {
-                    secret: "new-mock-refresh-token",
-                    expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),
-                },
-            }),
-        };
-        vi.mocked(CrossmintAuthService).mockImplementation(() => mockCrossmintAuthService as any);
+        handleRefreshAuthMaterialSpy = vi.spyOn(CrossmintAuthClient.prototype, "handleRefreshAuthMaterial");
+        getOAuthUrlSpy = vi.spyOn(CrossmintAuthClient.prototype, "getOAuthUrl").mockResolvedValue("mock-oauth-url");
+        // Casts as any because refreshAuthMaterial is protected
+        vi.spyOn(CrossmintAuthClient.prototype as any, "refreshAuthMaterial").mockResolvedValue(
+            Promise.resolve({
+                jwt: "mock-jwt",
+                refreshToken: { secret: "mock-refresh-token", expiresAt: 123456 },
+                user: {},
+            })
+        );
+        const mockCrossmintAuth = CrossmintAuthClient.from(createCrossmint({ apiKey: MOCK_API_KEY }));
+        vi.spyOn(CrossmintAuthClient, "from").mockReturnValue(mockCrossmintAuth);
     });
 
-    test("Happy path", async () => {
+    it("Happy path", async () => {
         await act(() => {
             document.cookie = `${REFRESH_TOKEN_PREFIX}=mock-refresh-token; path=/; SameSite=Lax;`;
             document.cookie = `${SESSION_PREFIX}=mock-jwt; path=/; SameSite=Lax;`;
@@ -147,25 +157,24 @@ describe("CrossmintAuthProvider", () => {
 
         expect(getByTestId("wallet-status").textContent).toBe("in-progress");
         expect(getByTestId("auth-status").textContent).toBe("logged-in");
-        expect(getByTestId("refresh-token").textContent).toBe("No Refresh Token");
         expect(getByTestId("wallet").textContent).toBe("No Wallet");
         expect(getByTestId("error").textContent).toBe("No Error");
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("wallet-status").textContent).toBe("loaded");
             expect(getByTestId("auth-status").textContent).toBe("logged-in");
-            expect(getByTestId("refresh-token").textContent).toBe("new-mock-refresh-token");
             expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
             expect(getByTestId("error").textContent).toBe("No Error");
         });
 
-        expect(mockCrossmintAuthService.refreshAuthMaterial).toHaveBeenCalledOnce();
+        expect(handleRefreshAuthMaterialSpy).toHaveBeenCalledOnce();
+        expect(getOAuthUrlSpy).toHaveBeenCalled();
         expect(vi.mocked(mockSDK.getOrCreateWallet)).toHaveBeenCalledOnce();
     });
 
-    test(`When "createOnLogin" is "false", wallet is not loaded`, async () => {
+    it(`When "createOnLogin" is "false", wallet is not loaded`, async () => {
         document.cookie = `${SESSION_PREFIX}=mock-jwt; path=/;SameSite=Lax;`;
-        const { getByTestId } = renderAuthProvider({
+        const { getByTestId } = await renderAuthProvider({
             children: <TestComponent />,
             embeddedWallets: {
                 defaultChain: "polygon",
@@ -174,7 +183,7 @@ describe("CrossmintAuthProvider", () => {
             },
         });
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("wallet").textContent).toBe("No Wallet");
             expect(getByTestId("wallet-status").textContent).toBe("not-loaded");
         });
@@ -182,13 +191,13 @@ describe("CrossmintAuthProvider", () => {
         expect(vi.mocked(mockSDK.getOrCreateWallet)).not.toHaveBeenCalled();
     });
 
-    test(`When the jwt from crossmint provider is not defined, wallet is not loaded`, async () => {
-        const { getByTestId } = renderAuthProvider({
+    it(`When the jwt from crossmint provider is not defined, wallet is not loaded`, async () => {
+        const { getByTestId } = await renderAuthProvider({
             children: <TestComponent />,
             embeddedWallets,
         });
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("wallet-status").textContent).toBe("not-loaded");
             expect(getByTestId("auth-status").textContent).toBe("logged-out");
             expect(getByTestId("wallet").textContent).toBe("No Wallet");
@@ -197,14 +206,14 @@ describe("CrossmintAuthProvider", () => {
         expect(vi.mocked(mockSDK.getOrCreateWallet)).not.toHaveBeenCalled();
     });
 
-    test("When the jwt is cleared, so is the wallet", async () => {
+    it("When the jwt is cleared, so is the wallet", async () => {
         document.cookie = `${SESSION_PREFIX}=mock-jwt; path=/;SameSite=Lax;`;
-        const { getByTestId } = renderAuthProvider({
+        const { getByTestId } = await renderAuthProvider({
             children: <TestComponent />,
             embeddedWallets,
         });
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("wallet-status").textContent).toBe("loaded");
             expect(getByTestId("auth-status").textContent).toBe("logged-in");
             expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
@@ -212,7 +221,7 @@ describe("CrossmintAuthProvider", () => {
 
         fireEvent.click(getByTestId("clear-jwt-button"));
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("wallet-status").textContent).toBe("not-loaded");
             expect(getByTestId("auth-status").textContent).toBe("logged-out");
             expect(getByTestId("wallet").textContent).toBe("No Wallet");
@@ -221,68 +230,44 @@ describe("CrossmintAuthProvider", () => {
         expect(vi.mocked(mockSDK.getOrCreateWallet)).toHaveBeenCalledOnce();
     });
 
-    test(`Logging in and asserting the auth status`, async () => {
-        const { getByTestId } = renderAuthProvider({
+    it(`Logging in and asserting the auth status`, async () => {
+        const { getByTestId } = await renderAuthProvider({
             children: <TestComponent />,
             embeddedWallets,
         });
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("auth-status").textContent).toBe("logged-out");
         });
 
         fireEvent.click(getByTestId("jwt-input"));
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("auth-status").textContent).toBe("logged-in");
         });
     });
 
-    test("Setting and clearing refresh token", async () => {
-        const { getByTestId } = renderAuthProvider({
-            children: <TestComponent />,
-            embeddedWallets,
-        });
-
-        expect(getByTestId("refresh-token").textContent).toBe("No Refresh Token");
-
-        fireEvent.click(getByTestId("set-refresh-token"));
-
-        await waitForSettledState(() => {
-            expect(getByTestId("refresh-token").textContent).toBe("mock-refresh-token");
-        });
-
-        fireEvent.click(getByTestId("clear-refresh-token-button"));
-
-        await waitForSettledState(() => {
-            expect(getByTestId("refresh-token").textContent).toBe("No Refresh Token");
-        });
-    });
-
-    test("Logout clears both JWT and refresh token", async () => {
+    it("Logout clears JWT", async () => {
         await act(() => {
             document.cookie = `${REFRESH_TOKEN_PREFIX}=mock-refresh-token; path=/; SameSite=Lax;`;
             document.cookie = `${SESSION_PREFIX}=mock-jwt; path=/; SameSite=Lax;`;
         });
 
-        const { getByTestId } = renderAuthProvider({
+        const { getByTestId } = await renderAuthProvider({
             children: <TestComponent />,
             embeddedWallets,
         });
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("auth-status").textContent).toBe("logged-in");
-            expect(getByTestId("refresh-token").textContent).toBe("new-mock-refresh-token");
         });
 
         await act(() => {
             fireEvent.click(getByTestId("clear-jwt-button"));
-            fireEvent.click(getByTestId("clear-refresh-token-button"));
         });
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("auth-status").textContent).toBe("logged-out");
-            expect(getByTestId("refresh-token").textContent).toBe("No Refresh Token");
         });
     });
 });

package/src/providers/CrossmintAuthProvider.tsx

@@ -1,20 +1,15 @@
-import { type ReactNode, createContext, useEffect, useState } from "react";
+import { type ReactNode, createContext, useEffect, useMemo, useRef, useState } from "react";
 
-import { CrossmintAuthService } from "@crossmint/client-sdk-auth";
+import { CrossmintAuth, getCookie } from "@crossmint/client-sdk-auth";
 import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
 import { type UIConfig, validateApiKeyAndGetCrossmintBaseUrl } from "@crossmint/common-sdk-base";
-import {
-    SESSION_PREFIX,
-    REFRESH_TOKEN_PREFIX,
-    type AuthMaterialWithUser,
-    type SDKExternalUser,
-} from "@crossmint/common-sdk-auth";
+import { type AuthMaterialWithUser, SESSION_PREFIX, type SDKExternalUser } from "@crossmint/common-sdk-auth";
 
 import AuthFormDialog from "../components/auth/AuthFormDialog";
-import { useCrossmint, useRefreshToken, useWallet } from "../hooks";
+import { useCrossmint, useWallet } from "../hooks";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
-import { deleteCookie, getCookie, setCookie } from "@/utils/authCookies";
 import { AuthFormProvider } from "./auth/AuthFormProvider";
+import { TwindProvider } from "./TwindProvider";
 
 export type CrossmintAuthWalletConfig = {
     defaultChain: EVMSmartWalletChain;
@@ -23,33 +18,40 @@ export type CrossmintAuthWalletConfig = {
     showPasskeyHelpers?: boolean;
 };
 
-export type LoginMethod = "email" | "google" | "farcaster";
+export type LoginMethod = "email" | "google" | "farcaster" | "web3";
 
 export type CrossmintAuthProviderProps = {
     embeddedWallets?: CrossmintAuthWalletConfig;
     appearance?: UIConfig;
     children: ReactNode;
     loginMethods?: LoginMethod[];
+    refreshRoute?: string;
+    logoutRoute?: string;
 };
 
 type AuthStatus = "logged-in" | "logged-out" | "in-progress";
 
-type AuthContextType = {
+export interface AuthContextType {
+    crossmintAuth?: CrossmintAuth;
     login: () => void;
     logout: () => void;
     jwt?: string;
-    refreshToken?: string;
     user?: SDKExternalUser;
     status: AuthStatus;
     getUser: () => void;
-};
+}
 
-export const AuthContext = createContext<AuthContextType>({
+const defaultContextValue: AuthContextType = {
+    crossmintAuth: undefined,
     login: () => {},
     logout: () => {},
+    jwt: undefined,
+    user: undefined,
     status: "logged-out",
     getUser: () => {},
-});
+};
+
+export const AuthContext = createContext<AuthContextType>(defaultContextValue);
 
 const defaultEmbeddedWallets: CrossmintAuthWalletConfig = {
     defaultChain: "base-sepolia",
@@ -62,33 +64,38 @@ export function CrossmintAuthProvider({
     children,
     appearance,
     loginMethods = ["email", "google"],
+    refreshRoute,
+    logoutRoute,
 }: CrossmintAuthProviderProps) {
     const [user, setUser] = useState<SDKExternalUser | undefined>(undefined);
-    const { crossmint, setJwt, setRefreshToken } = useCrossmint(
-        "CrossmintAuthProvider must be used within CrossmintProvider"
-    );
-    const crossmintAuthService = new CrossmintAuthService(crossmint.apiKey);
+    const { crossmint, setJwt } = useCrossmint("CrossmintAuthProvider must be used within CrossmintProvider");
+    // Only create the CrossmintAuth instance once, even in StrictMode, as the constructor calls /refresh
+    // It can only be called once to avoid race conditions
+    const crossmintAuthRef = useRef<CrossmintAuth | null>(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: crossmint can't be a dependency because it updates with each jwt change
+    const crossmintAuth = useMemo(() => {
+        if (!crossmintAuthRef.current) {
+            crossmintAuthRef.current = CrossmintAuth.from(crossmint, {
+                callbacks: {
+                    onLogout: () => {
+                        setJwt(undefined);
+                        setUser(undefined);
+                    },
+                    onTokenRefresh: (authMaterial: AuthMaterialWithUser) => {
+                        setJwt(authMaterial.jwt);
+                        setUser(authMaterial.user);
+                    },
+                },
+                refreshRoute,
+                logoutRoute,
+            });
+        }
+        return crossmintAuthRef.current;
+    }, []);
+
     const crossmintBaseUrl = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
     const [dialogOpen, setDialogOpen] = useState(false);
 
-    const setAuthMaterial = (authMaterial: AuthMaterialWithUser) => {
-        setCookie(SESSION_PREFIX, authMaterial.jwt);
-        setCookie(REFRESH_TOKEN_PREFIX, authMaterial.refreshToken.secret, authMaterial.refreshToken.expiresAt);
-        setJwt(authMaterial.jwt);
-        setRefreshToken(authMaterial.refreshToken.secret);
-        setUser(authMaterial.user);
-    };
-
-    const logout = () => {
-        deleteCookie(SESSION_PREFIX);
-        deleteCookie(REFRESH_TOKEN_PREFIX);
-        setJwt(undefined);
-        setRefreshToken(undefined);
-        setUser(undefined);
-    };
-
-    useRefreshToken({ crossmintAuthService, setAuthMaterial, logout });
-
     useEffect(() => {
         if (crossmint.jwt == null) {
             const jwt = getCookie(SESSION_PREFIX);
@@ -113,6 +120,10 @@ export function CrossmintAuthProvider({
         setDialogOpen(true);
     };
 
+    const logout = () => {
+        crossmintAuth.logout();
+    };
+
     const getAuthStatus = (): AuthStatus => {
         if (crossmint.jwt != null) {
             return "logged-in";
@@ -123,57 +134,52 @@ export function CrossmintAuthProvider({
         return "logged-out";
     };
 
-    const fetchAuthMaterial = async (refreshToken: string): Promise<AuthMaterialWithUser> => {
-        const authMaterial = await crossmintAuthService.refreshAuthMaterial(refreshToken);
-        setAuthMaterial(authMaterial);
-        return authMaterial;
-    };
-
     const getUser = async () => {
         if (crossmint.jwt == null) {
             console.log("User not logged in");
             return;
         }
 
-        const user = await crossmintAuthService.getUserFromClient(crossmint.jwt);
+        const user = await crossmintAuth.getUser();
         setUser(user);
     };
 
     return (
-        <AuthContext.Provider
-            value={{
-                login,
-                logout,
-                jwt: crossmint.jwt,
-                refreshToken: crossmint.refreshToken,
-                user,
-                status: getAuthStatus(),
-                getUser,
-            }}
-        >
-            <CrossmintWalletProvider
-                defaultChain={embeddedWallets.defaultChain}
-                showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
-                appearance={appearance}
+        <TwindProvider>
+            <AuthContext.Provider
+                value={{
+                    crossmintAuth,
+                    login,
+                    logout,
+                    jwt: crossmint.jwt,
+                    user,
+                    status: getAuthStatus(),
+                    getUser,
+                }}
             >
-                <AuthFormProvider
-                    initialState={{
-                        apiKey: crossmint.apiKey,
-                        baseUrl: crossmintBaseUrl,
-                        fetchAuthMaterial,
-                        appearance,
-                        setDialogOpen,
-                        loginMethods,
-                    }}
+                <CrossmintWalletProvider
+                    defaultChain={embeddedWallets.defaultChain}
+                    showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
+                    appearance={appearance}
                 >
-                    <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
-                        {children}
-                    </WalletManager>
-
-                    <AuthFormDialog open={dialogOpen} />
-                </AuthFormProvider>
-            </CrossmintWalletProvider>
-        </AuthContext.Provider>
+                    <AuthFormProvider
+                        initialState={{
+                            appearance,
+                            setDialogOpen,
+                            loginMethods,
+                            embeddedWallets,
+                            baseUrl: crossmintBaseUrl,
+                        }}
+                    >
+                        <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
+                            {children}
+                        </WalletManager>
+
+                        <AuthFormDialog open={dialogOpen} />
+                    </AuthFormProvider>
+                </CrossmintWalletProvider>
+            </AuthContext.Provider>
+        </TwindProvider>
     );
 }
 

package/src/providers/CrossmintWalletProvider.test.tsx

@@ -8,9 +8,13 @@ import { createCrossmint } from "@crossmint/common-sdk-base";
 
 import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
 import { useWallet } from "../hooks/useWallet";
-import { MOCK_API_KEY, waitForSettledState } from "../testUtils";
+import { MOCK_API_KEY } from "../testUtils";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
 
+vi.mock("./auth/web3/WagmiAuthProvider", () => ({
+    WagmiAuthProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+
 vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
     const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
     return {
@@ -76,6 +80,7 @@ describe("CrossmintWalletProvider", () => {
                 jwt: "mock-jwt",
             },
             setJwt: () => {},
+            setRefreshToken: () => {},
         });
 
         mockSDK = mock<SmartWalletSDK>();
@@ -85,7 +90,7 @@ describe("CrossmintWalletProvider", () => {
     });
 
     describe("getOrCreateWallet", () => {
-        test("happy path ", async () => {
+        it("happy path ", async () => {
             const { getByTestId } = renderWalletProvider({
                 children: <TestComponent />,
             });
@@ -100,7 +105,7 @@ describe("CrossmintWalletProvider", () => {
                 expect(getByTestId("error").textContent).toBe("No Error");
             });
 
-            await waitForSettledState(() => {
+            await waitFor(() => {
                 expect(getByTestId("status").textContent).toBe("loaded");
                 expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
                 expect(getByTestId("error").textContent).toBe("No Error");
@@ -117,6 +122,7 @@ describe("CrossmintWalletProvider", () => {
                         jwt: undefined,
                     },
                     setJwt: () => {},
+                    setRefreshToken: () => {},
                 });
             });
 
@@ -127,7 +133,7 @@ describe("CrossmintWalletProvider", () => {
 
                 fireEvent.click(getByTestId("create-wallet-button"));
 
-                await waitForSettledState(() => {
+                await waitFor(() => {
                     expect(getByTestId("status").textContent).toBe("not-loaded");
                     expect(getByTestId("wallet").textContent).toBe("No Wallet");
                     expect(getByTestId("error").textContent).toBe("No Error");
@@ -155,7 +161,7 @@ describe("CrossmintWalletProvider", () => {
                     expect(getByTestId("error").textContent).toBe("No Error");
                 });
 
-                await waitForSettledState(() => {
+                await waitFor(() => {
                     expect(getByTestId("status").textContent).toBe("loading-error");
                     expect(getByTestId("wallet").textContent).toBe("No Wallet");
                     expect(getByTestId("error").textContent).toBe("Wallet creation failed");
@@ -183,7 +189,7 @@ describe("CrossmintWalletProvider", () => {
                     expect(getByTestId("error").textContent).toBe("No Error");
                 });
 
-                await waitForSettledState(() => {
+                await waitFor(() => {
                     expect(getByTestId("status").textContent).toBe("loading-error");
                     expect(getByTestId("wallet").textContent).toBe("No Wallet");
                     expect(getByTestId("error").textContent).toBe("Unknown Wallet Error: Wallet creation failed");
@@ -194,14 +200,14 @@ describe("CrossmintWalletProvider", () => {
         });
     });
 
-    test("clearWallet happy path", async () => {
+    it("clearWallet happy path", async () => {
         const { getByTestId } = renderWalletProvider({
             children: <TestComponent />,
         });
 
         fireEvent.click(getByTestId("create-wallet-button"));
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("status").textContent).toBe("loaded");
             expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
             expect(getByTestId("error").textContent).toBe("No Error");
@@ -209,7 +215,7 @@ describe("CrossmintWalletProvider", () => {
 
         fireEvent.click(getByTestId("clear-wallet-button"));
 
-        await waitForSettledState(() => {
+        await waitFor(() => {
             expect(getByTestId("status").textContent).toBe("not-loaded");
             expect(getByTestId("wallet").textContent).toBe("No Wallet");
             expect(getByTestId("error").textContent).toBe("No Error");

package/src/providers/TwindProvider.tsx

@@ -0,0 +1,14 @@
+import type React from "react";
+import twindConfig from "@/twind.config";
+import { install } from "@twind/core";
+import { useEffect } from "react";
+
+export function TwindProvider({ children }: { children: React.ReactNode }) {
+    useEffect(() => {
+        // Initialize twind with custom configuration
+        // This sets up the CSS-in-JS styling solution for the entire application
+        install(twindConfig);
+    }, []);
+
+    return <>{children}</>;
+}