@frak-labs/react-sdk 0.1.1 → 0.2.0-beta.7898df5b

package/src/hook/useSiweAuthenticate.test.ts

@@ -0,0 +1,258 @@
+/**
+ * Tests for useSiweAuthenticate hook
+ * Tests TanStack Mutation wrapper for SIWE authentication
+ */
+
+import { vi } from "vitest";
+
+vi.mock("@frak-labs/core-sdk/actions");
+
+import type { SiweAuthenticateReturnType } from "@frak-labs/core-sdk";
+import { siweAuthenticate } from "@frak-labs/core-sdk/actions";
+import { ClientNotFound } from "@frak-labs/frame-connector";
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, test } from "../../tests/vitest-fixtures";
+import { useSiweAuthenticate } from "./useSiweAuthenticate";
+
+describe("useSiweAuthenticate", () => {
+    test("should throw ClientNotFound when client is not available", async ({
+        queryWrapper,
+    }) => {
+        const { result } = renderHook(() => useSiweAuthenticate(), {
+            wrapper: queryWrapper.wrapper,
+        });
+
+        await waitFor(() => {
+            expect(result.current.mutate).toBeDefined();
+        });
+
+        result.current.mutate({
+            siwe: {
+                domain: "example.com",
+                uri: "https://example.com",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isError).toBe(true);
+        });
+
+        expect(result.current.error).toBeInstanceOf(ClientNotFound);
+    });
+
+    test("should authenticate with SIWE successfully", async ({
+        mockFrakProviders,
+    }) => {
+        const mockResult: SiweAuthenticateReturnType = {
+            signature: "0xsignature123",
+            message: "Example message to sign",
+        };
+
+        vi.mocked(siweAuthenticate).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSiweAuthenticate(), {
+            wrapper: mockFrakProviders,
+        });
+
+        result.current.mutate({
+            siwe: {
+                domain: "example.com",
+                uri: "https://example.com",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(result.current.data).toEqual(mockResult);
+        expect(siweAuthenticate).toHaveBeenCalledTimes(1);
+    });
+
+    test("should authenticate with custom SIWE params", async ({
+        mockFrakProviders,
+    }) => {
+        const mockResult: SiweAuthenticateReturnType = {
+            signature: "0xsignature456",
+            message: "Custom message",
+        };
+
+        vi.mocked(siweAuthenticate).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSiweAuthenticate(), {
+            wrapper: mockFrakProviders,
+        });
+
+        const siweParams = {
+            domain: "custom.com",
+            uri: "https://custom.com/auth",
+            statement: "Sign in to Custom App",
+            nonce: "random-nonce-123",
+        };
+
+        result.current.mutate({
+            siwe: siweParams,
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(result.current.data).toEqual(mockResult);
+        expect(siweAuthenticate).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+                siwe: siweParams,
+            })
+        );
+    });
+
+    test("should authenticate with metadata", async ({ mockFrakProviders }) => {
+        const mockResult: SiweAuthenticateReturnType = {
+            signature: "0xsignature789",
+            message: "Message with metadata",
+        };
+
+        vi.mocked(siweAuthenticate).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSiweAuthenticate(), {
+            wrapper: mockFrakProviders,
+        });
+
+        result.current.mutate({
+            siwe: {
+                domain: "example.com",
+                uri: "https://example.com",
+            },
+            metadata: {
+                header: {
+                    title: "Sign In with Ethereum",
+                },
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(result.current.data).toEqual(mockResult);
+    });
+
+    test("should handle mutateAsync", async ({ mockFrakProviders }) => {
+        const mockResult: SiweAuthenticateReturnType = {
+            signature: "0xasync123",
+            message: "Async message",
+        };
+
+        vi.mocked(siweAuthenticate).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSiweAuthenticate(), {
+            wrapper: mockFrakProviders,
+        });
+
+        const response = await result.current.mutateAsync({
+            siwe: {
+                domain: "example.com",
+                uri: "https://example.com",
+            },
+        });
+
+        expect(response).toEqual(mockResult);
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+    });
+
+    test("should handle RPC errors", async ({ mockFrakProviders }) => {
+        const error = new Error("SIWE authentication failed");
+        vi.mocked(siweAuthenticate).mockRejectedValue(error);
+
+        const { result } = renderHook(() => useSiweAuthenticate(), {
+            wrapper: mockFrakProviders,
+        });
+
+        result.current.mutate({
+            siwe: {
+                domain: "example.com",
+                uri: "https://example.com",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isError).toBe(true);
+        });
+
+        expect(result.current.error).toEqual(error);
+    });
+
+    test("should handle mutation options", async ({ mockFrakProviders }) => {
+        const mockResult: SiweAuthenticateReturnType = {
+            signature: "0xoptions123",
+            message: "Options message",
+        };
+
+        vi.mocked(siweAuthenticate).mockResolvedValue(mockResult);
+
+        const onSuccess = vi.fn();
+        const onError = vi.fn();
+
+        const { result } = renderHook(
+            () =>
+                useSiweAuthenticate({
+                    mutations: {
+                        onSuccess,
+                        onError,
+                    },
+                }),
+            {
+                wrapper: mockFrakProviders,
+            }
+        );
+
+        result.current.mutate({
+            siwe: {
+                domain: "example.com",
+                uri: "https://example.com",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(onSuccess).toHaveBeenCalled();
+        expect(onError).not.toHaveBeenCalled();
+    });
+
+    test("should reset mutation state", async ({ mockFrakProviders }) => {
+        const mockResult: SiweAuthenticateReturnType = {
+            signature: "0xreset123",
+            message: "Reset message",
+        };
+
+        vi.mocked(siweAuthenticate).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSiweAuthenticate(), {
+            wrapper: mockFrakProviders,
+        });
+
+        result.current.mutate({
+            siwe: {
+                domain: "example.com",
+                uri: "https://example.com",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        result.current.reset();
+
+        await waitFor(() => {
+            expect(result.current.data).toBeUndefined();
+            expect(result.current.isIdle).toBe(true);
+        });
+    });
+});

package/src/hook/useSiweAuthenticate.ts

@@ -0,0 +1,66 @@
+import type { SiweAuthenticateReturnType } from "@frak-labs/core-sdk";
+import {
+    type SiweAuthenticateModalParams,
+    siweAuthenticate,
+} from "@frak-labs/core-sdk/actions";
+import { ClientNotFound, type FrakRpcError } from "@frak-labs/frame-connector";
+import { type UseMutationOptions, useMutation } from "@tanstack/react-query";
+import { useFrakClient } from "./useFrakClient";
+
+/** @inline */
+type MutationOptions = Omit<
+    UseMutationOptions<
+        SiweAuthenticateReturnType,
+        FrakRpcError,
+        SiweAuthenticateModalParams
+    >,
+    "mutationFn" | "mutationKey"
+>;
+
+/** @ignore */
+interface UseSiweAuthenticateParams {
+    /**
+     * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
+     */
+    mutations?: MutationOptions;
+}
+
+/**
+ * Hook that return a mutation helping to send perform a SIWE authentication
+ *
+ * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.siweAuthenticate | `siweAuthenticate()`} action
+ *
+ * @param args - Optional config object with `mutations` for customizing the underlying {@link @tanstack/react-query!useMutation | `useMutation()`}
+ *
+ * @group hooks
+ *
+ * @returns
+ * The mutation hook wrapping the `siweAuthenticate()` action
+ * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!actions.SiweAuthenticateModalParams | `SiweAuthenticateModalParams`}
+ * The `data` result is a {@link @frak-labs/core-sdk!index.SiweAuthenticateReturnType | `SiweAuthenticateReturnType`}
+ *
+ * @see {@link @frak-labs/core-sdk!actions.siweAuthenticate | `siweAuthenticate()`} for more info about the underlying action
+ * @see {@link @tanstack/react-query!useMutation | `useMutation()`} for more info about the mutation options and response
+ */
+export function useSiweAuthenticate({
+    mutations,
+}: UseSiweAuthenticateParams = {}) {
+    const client = useFrakClient();
+
+    return useMutation({
+        ...mutations,
+        mutationKey: [
+            "frak-sdk",
+            "siwe-authenticate",
+            client?.config.domain ?? "no-domain",
+        ],
+        mutationFn: async (params: SiweAuthenticateModalParams) => {
+            if (!client) {
+                throw new ClientNotFound();
+            }
+
+            // Launch the authentication
+            return siweAuthenticate(client, params);
+        },
+    });
+}

package/src/hook/useWalletStatus.test.ts

@@ -0,0 +1,112 @@
+/**
+ * Tests for useWalletStatus hook
+ * Tests TanStack Query wrapper for watching wallet status
+ */
+
+import { vi } from "vitest";
+
+vi.mock("@frak-labs/core-sdk/actions");
+
+import type { WalletStatusReturnType } from "@frak-labs/core-sdk";
+import { watchWalletStatus } from "@frak-labs/core-sdk/actions";
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, test } from "../../tests/vitest-fixtures";
+import { useWalletStatus } from "./useWalletStatus";
+
+describe("useWalletStatus", () => {
+    test("should be disabled when client is not available", ({
+        queryWrapper,
+    }) => {
+        const { result } = renderHook(() => useWalletStatus(), {
+            wrapper: queryWrapper.wrapper,
+        });
+
+        // Query should not run when client is not available
+        expect(result.current.isPending).toBe(true);
+        expect(result.current.isFetching).toBe(false);
+        expect(result.current.data).toBeUndefined();
+    });
+
+    test("should watch wallet status successfully", async ({
+        mockFrakProviders,
+    }) => {
+        const mockStatus: WalletStatusReturnType = {
+            key: "connected",
+            wallet: "0x1234567890123456789012345678901234567890",
+        };
+
+        vi.mocked(watchWalletStatus).mockResolvedValue(mockStatus);
+
+        const { result } = renderHook(() => useWalletStatus(), {
+            wrapper: mockFrakProviders,
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(result.current.data).toEqual(mockStatus);
+        expect(watchWalletStatus).toHaveBeenCalledTimes(1);
+    });
+
+    test("should return not connected status", async ({
+        mockFrakProviders,
+    }) => {
+        const mockStatus: WalletStatusReturnType = {
+            key: "not-connected",
+        };
+
+        vi.mocked(watchWalletStatus).mockResolvedValue(mockStatus);
+
+        const { result } = renderHook(() => useWalletStatus(), {
+            wrapper: mockFrakProviders,
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(result.current.data).toEqual(mockStatus);
+        expect(result.current.data?.key).toBe("not-connected");
+    });
+
+    test("should handle RPC errors", async ({ mockFrakProviders }) => {
+        const error = new Error("Wallet status watch failed");
+        vi.mocked(watchWalletStatus).mockRejectedValue(error);
+
+        const { result } = renderHook(() => useWalletStatus(), {
+            wrapper: mockFrakProviders,
+        });
+
+        await waitFor(() => {
+            expect(result.current.isError).toBe(true);
+        });
+
+        expect(result.current.error).toEqual(error);
+    });
+
+    test("should pass callback to watchWalletStatus", async ({
+        mockFrakProviders,
+        mockFrakClient,
+    }) => {
+        const mockStatus: WalletStatusReturnType = {
+            key: "connected",
+            wallet: "0x1234567890123456789012345678901234567890",
+        };
+
+        vi.mocked(watchWalletStatus).mockResolvedValue(mockStatus);
+
+        const { result } = renderHook(() => useWalletStatus(), {
+            wrapper: mockFrakProviders,
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(watchWalletStatus).toHaveBeenCalledWith(
+            mockFrakClient,
+            expect.any(Function)
+        );
+    });
+});

package/src/hook/useWalletStatus.ts

@@ -0,0 +1,55 @@
+import type { WalletStatusReturnType } from "@frak-labs/core-sdk";
+import { watchWalletStatus } from "@frak-labs/core-sdk/actions";
+import { ClientNotFound } from "@frak-labs/frame-connector";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { useFrakClient } from "./useFrakClient";
+
+/**
+ * Hook that return a query helping to get the current wallet status.
+ *
+ * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.watchWalletStatus | `watchWalletStatus()`} action
+ *
+ * @group hooks
+ *
+ * @returns
+ * The query hook wrapping the `watchWalletStatus()` action
+ * The `data` result is a {@link @frak-labs/core-sdk!index.WalletStatusReturnType | `WalletStatusReturnType`}
+ *
+ * @see {@link @frak-labs/core-sdk!actions.watchWalletStatus | `watchWalletStatus()`} for more info about the underlying action
+ * @see {@link @tanstack/react-query!useQuery | `useQuery()`} for more info about the useQuery response
+ */
+export function useWalletStatus() {
+    const queryClient = useQueryClient();
+    const client = useFrakClient();
+
+    /**
+     * Callback hook when we receive an updated wallet status
+     */
+    const newStatusUpdated = useCallback(
+        (event: WalletStatusReturnType) => {
+            queryClient.setQueryData(
+                ["frak-sdk", "wallet-status-listener"],
+                event
+            );
+        },
+        [queryClient]
+    );
+
+    /**
+     * Setup the query listener
+     */
+    return useQuery<WalletStatusReturnType>({
+        gcTime: 0,
+        staleTime: 0,
+        queryKey: ["frak-sdk", "wallet-status-listener"],
+        queryFn: async () => {
+            if (!client) {
+                throw new ClientNotFound();
+            }
+
+            return watchWalletStatus(client, newStatusUpdated);
+        },
+        enabled: !!client,
+    });
+}

package/src/hook/utils/useFrakContext.test.ts

@@ -0,0 +1,157 @@
+/**
+ * Tests for useFrakContext hook
+ * Tests hook that extracts and manages Frak context from URL
+ */
+
+import { vi } from "vitest";
+
+vi.mock("@frak-labs/core-sdk", async () => {
+    const actual = await vi.importActual<typeof import("@frak-labs/core-sdk")>(
+        "@frak-labs/core-sdk"
+    );
+    return {
+        ...actual,
+        FrakContextManager: {
+            parse: vi.fn(),
+            replaceUrl: vi.fn(),
+        },
+    };
+});
+
+vi.mock("./useWindowLocation");
+
+import type { FrakContext } from "@frak-labs/core-sdk";
+import { FrakContextManager } from "@frak-labs/core-sdk";
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { useFrakContext } from "./useFrakContext";
+import { useWindowLocation } from "./useWindowLocation";
+
+describe("useFrakContext", () => {
+    const consoleLogSpy = vi.spyOn(console, "log").mockImplementation(() => {});
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+        consoleLogSpy.mockClear();
+    });
+
+    test("should return null when no location href", () => {
+        vi.mocked(useWindowLocation).mockReturnValue({
+            location: undefined,
+            href: undefined,
+        });
+
+        const { result } = renderHook(() => useFrakContext());
+
+        expect(result.current.frakContext).toBeNull();
+    });
+
+    test("should parse frak context from URL", () => {
+        const mockContext: FrakContext = {
+            r: "0x1234567890123456789012345678901234567890",
+        };
+
+        vi.mocked(useWindowLocation).mockReturnValue({
+            location: { href: "https://example.com?frak=test" } as Location,
+            href: "https://example.com?frak=test",
+        });
+
+        vi.mocked(FrakContextManager.parse).mockReturnValue(mockContext);
+
+        const { result } = renderHook(() => useFrakContext());
+
+        expect(FrakContextManager.parse).toHaveBeenCalledWith({
+            url: "https://example.com?frak=test",
+        });
+        expect(result.current.frakContext).toEqual(mockContext);
+    });
+
+    test("should update context with new values", () => {
+        vi.mocked(useWindowLocation).mockReturnValue({
+            location: { href: "https://example.com" } as Location,
+            href: "https://example.com",
+        });
+
+        vi.mocked(FrakContextManager.parse).mockReturnValue(null);
+
+        const { result } = renderHook(() => useFrakContext());
+
+        const newContext: Partial<FrakContext> = {
+            r: "0x4567890123456789012345678901234567890123",
+        };
+
+        result.current.updateContext(newContext);
+
+        expect(console.log).toHaveBeenCalledWith("Updating context", {
+            newContext,
+        });
+        expect(FrakContextManager.replaceUrl).toHaveBeenCalledWith({
+            url: "https://example.com",
+            context: newContext,
+        });
+    });
+
+    test("should memoize frak context based on href", () => {
+        const mockContext: FrakContext = {
+            r: "0x7890123456789012345678901234567890123456",
+        };
+
+        vi.mocked(useWindowLocation).mockReturnValue({
+            location: { href: "https://example.com?test=1" } as Location,
+            href: "https://example.com?test=1",
+        });
+
+        vi.mocked(FrakContextManager.parse).mockReturnValue(mockContext);
+
+        const { result, rerender } = renderHook(() => useFrakContext());
+
+        const firstContext = result.current.frakContext;
+
+        // Rerender without changing href
+        rerender();
+
+        expect(result.current.frakContext).toBe(firstContext);
+        expect(FrakContextManager.parse).toHaveBeenCalledTimes(1);
+    });
+
+    test("should reparse context when href changes", () => {
+        const mockContext1: FrakContext = {
+            r: "0x1111111111111111111111111111111111111111",
+        };
+        const mockContext2: FrakContext = {
+            r: "0x2222222222222222222222222222222222222222",
+        };
+
+        const { rerender } = renderHook(() => useFrakContext());
+
+        vi.mocked(useWindowLocation).mockReturnValue({
+            location: { href: "https://example.com?v=1" } as Location,
+            href: "https://example.com?v=1",
+        });
+
+        vi.mocked(FrakContextManager.parse).mockReturnValue(mockContext1);
+
+        rerender();
+
+        expect(FrakContextManager.parse).toHaveBeenCalledWith({
+            url: "https://example.com?v=1",
+        });
+
+        // Change href
+        vi.mocked(useWindowLocation).mockReturnValue({
+            location: { href: "https://example.com?v=2" } as Location,
+            href: "https://example.com?v=2",
+        });
+
+        vi.mocked(FrakContextManager.parse).mockReturnValue(mockContext2);
+
+        rerender();
+
+        expect(FrakContextManager.parse).toHaveBeenCalledWith({
+            url: "https://example.com?v=2",
+        });
+    });
+});

package/src/hook/utils/useFrakContext.ts

@@ -0,0 +1,42 @@
+import { type FrakContext, FrakContextManager } from "@frak-labs/core-sdk";
+import { useCallback, useMemo } from "react";
+import { useWindowLocation } from "./useWindowLocation";
+
+/**
+ * Extract the current frak context from the url
+ * @ignore
+ */
+export function useFrakContext() {
+    // Get the current window location
+    const { location } = useWindowLocation();
+
+    /**
+     * Fetching and parsing the current frak context
+     */
+    const frakContext = useMemo(() => {
+        // If no url extracted yet, early exit
+        if (!location?.href) return null;
+
+        // Parse the current context
+        return FrakContextManager.parse({ url: location.href });
+    }, [location?.href]);
+
+    /**
+     * Update the current context
+     */
+    const updateContext = useCallback(
+        (newContext: Partial<FrakContext>) => {
+            console.log("Updating context", { newContext });
+            FrakContextManager.replaceUrl({
+                url: location?.href,
+                context: newContext,
+            });
+        },
+        [location?.href]
+    );
+
+    return {
+        frakContext,
+        updateContext,
+    };
+}