@frak-labs/react-sdk 0.1.1 → 0.2.0

package/src/hook/useSendTransaction.test.ts

@@ -0,0 +1,218 @@
+/**
+ * Tests for useSendTransactionAction hook
+ * Tests TanStack Mutation wrapper for sending transactions
+ */
+
+import { vi } from "vitest";
+
+vi.mock("@frak-labs/core-sdk/actions");
+
+import type { SendTransactionReturnType } from "@frak-labs/core-sdk";
+import { sendTransaction } from "@frak-labs/core-sdk/actions";
+import { ClientNotFound } from "@frak-labs/frame-connector";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { Hex } from "viem";
+import { describe, expect, test } from "../../tests/vitest-fixtures";
+import { useSendTransactionAction } from "./useSendTransaction";
+
+describe("useSendTransactionAction", () => {
+    test("should throw ClientNotFound when client is not available", async ({
+        queryWrapper,
+    }) => {
+        const { result } = renderHook(() => useSendTransactionAction(), {
+            wrapper: queryWrapper.wrapper,
+        });
+
+        await waitFor(() => {
+            expect(result.current.mutate).toBeDefined();
+        });
+
+        result.current.mutate({
+            tx: {
+                to: "0x1234567890123456789012345678901234567890",
+                data: "0x",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isError).toBe(true);
+        });
+
+        expect(result.current.error).toBeInstanceOf(ClientNotFound);
+    });
+
+    test("should send transaction successfully", async ({
+        mockFrakProviders,
+    }) => {
+        const mockResult: SendTransactionReturnType = {
+            hash: "0xabcdef1234567890" as Hex,
+        };
+
+        vi.mocked(sendTransaction).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSendTransactionAction(), {
+            wrapper: mockFrakProviders,
+        });
+
+        result.current.mutate({
+            tx: {
+                to: "0x1234567890123456789012345678901234567890",
+                data: "0x",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(result.current.data).toEqual(mockResult);
+        expect(sendTransaction).toHaveBeenCalledTimes(1);
+    });
+
+    test("should send transaction with metadata", async ({
+        mockFrakProviders,
+    }) => {
+        const mockResult: SendTransactionReturnType = {
+            hash: "0xhash123" as Hex,
+        };
+
+        vi.mocked(sendTransaction).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSendTransactionAction(), {
+            wrapper: mockFrakProviders,
+        });
+
+        result.current.mutate({
+            tx: {
+                to: "0x1234567890123456789012345678901234567890",
+                data: "0x",
+            },
+            metadata: {
+                header: {
+                    title: "Send Transaction",
+                },
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(result.current.data).toEqual(mockResult);
+    });
+
+    test("should handle mutateAsync", async ({ mockFrakProviders }) => {
+        const mockResult: SendTransactionReturnType = {
+            hash: "0xasync123" as Hex,
+        };
+
+        vi.mocked(sendTransaction).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSendTransactionAction(), {
+            wrapper: mockFrakProviders,
+        });
+
+        const response = await result.current.mutateAsync({
+            tx: {
+                to: "0x1234567890123456789012345678901234567890",
+                data: "0x",
+            },
+        });
+
+        expect(response).toEqual(mockResult);
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+    });
+
+    test("should handle RPC errors", async ({ mockFrakProviders }) => {
+        const error = new Error("Transaction send failed");
+        vi.mocked(sendTransaction).mockRejectedValue(error);
+
+        const { result } = renderHook(() => useSendTransactionAction(), {
+            wrapper: mockFrakProviders,
+        });
+
+        result.current.mutate({
+            tx: {
+                to: "0x1234567890123456789012345678901234567890",
+                data: "0x",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isError).toBe(true);
+        });
+
+        expect(result.current.error).toEqual(error);
+    });
+
+    test("should handle mutation options", async ({ mockFrakProviders }) => {
+        const mockResult: SendTransactionReturnType = {
+            hash: "0xoptions123" as Hex,
+        };
+
+        vi.mocked(sendTransaction).mockResolvedValue(mockResult);
+
+        const onSuccess = vi.fn();
+        const onError = vi.fn();
+
+        const { result } = renderHook(
+            () =>
+                useSendTransactionAction({
+                    mutations: {
+                        onSuccess,
+                        onError,
+                    },
+                }),
+            {
+                wrapper: mockFrakProviders,
+            }
+        );
+
+        result.current.mutate({
+            tx: {
+                to: "0x1234567890123456789012345678901234567890",
+                data: "0x",
+            },
+        });
+
+        await waitFor(() => {
+            expect(result.current.isSuccess).toBe(true);
+        });
+
+        expect(onSuccess).toHaveBeenCalled();
+        expect(onError).not.toHaveBeenCalled();
+    });
+
+    test("should reset mutation state", async ({ mockFrakProviders }) => {
+        const mockResult: SendTransactionReturnType = {
+            hash: "0xreset123" as Hex,
+        };
+
+        vi.mocked(sendTransaction).mockResolvedValue(mockResult);
+
+        const { result } = renderHook(() => useSendTransactionAction(), {
+            wrapper: mockFrakProviders,
+        });
+
+        result.current.mutate({
+            tx: {
+                to: "0x1234567890123456789012345678901234567890",
+                data: "0x",
+            },
+        });
+
+        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/useSendTransaction.ts

@@ -0,0 +1,62 @@
+import type { SendTransactionReturnType } from "@frak-labs/core-sdk";
+import {
+    type SendTransactionParams,
+    sendTransaction,
+} 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";
+
+/** @ignore */
+type MutationOptions = Omit<
+    UseMutationOptions<
+        SendTransactionReturnType,
+        FrakRpcError,
+        SendTransactionParams
+    >,
+    "mutationFn" | "mutationKey"
+>;
+
+/** @inline */
+interface UseSendTransactionParams {
+    /**
+     * Optional mutation options, see {@link @tanstack/react-query!useMutation | `useMutation()`} for more infos
+     */
+    mutations?: MutationOptions;
+}
+
+/**
+ * Hook that return a mutation helping to send a transaction
+ *
+ * It's a {@link @tanstack/react-query!home | `tanstack`} wrapper around the {@link @frak-labs/core-sdk!actions.sendTransaction | `sendTransaction()`} 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 `sendTransaction()` action
+ * The `mutate` and `mutateAsync` argument is of type {@link @frak-labs/core-sdk!actions.SendTransactionParams | `SendTransactionParams`}
+ * The `data` result is a {@link @frak-labs/core-sdk!index.SendTransactionReturnType | `SendTransactionReturnType`}
+ *
+ * @see {@link @frak-labs/core-sdk!actions.sendTransaction | `sendTransaction()`} 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 useSendTransactionAction({
+    mutations,
+}: UseSendTransactionParams = {}) {
+    const client = useFrakClient();
+
+    return useMutation({
+        ...mutations,
+        mutationKey: ["frak-sdk", "send-transaction"],
+        mutationFn: async (params: SendTransactionParams) => {
+            if (!client) {
+                throw new ClientNotFound();
+            }
+
+            // Send the transaction
+            return sendTransaction(client, params);
+        },
+    });
+}

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);
+        },
+    });
+}