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

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

@@ -0,0 +1,70 @@
+/**
+ * Tests for useMounted hook
+ * Tests that the hook correctly tracks component mount state
+ */
+
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "../../../tests/vitest-fixtures";
+import { useMounted } from "./useMounted";
+
+describe("useMounted", () => {
+    it("should return true after mount", async () => {
+        const { result } = renderHook(() => useMounted());
+
+        // In React Testing Library, effects run synchronously after render
+        // So by the time we check result.current, the effect has already run
+        await waitFor(() => {
+            expect(result.current).toBe(true);
+        });
+    });
+
+    it("should remain true after multiple re-renders", async () => {
+        const { result, rerender } = renderHook(() => useMounted());
+
+        // Wait for initial mount
+        await waitFor(() => {
+            expect(result.current).toBe(true);
+        });
+
+        // Re-render multiple times
+        rerender();
+        expect(result.current).toBe(true);
+
+        rerender();
+        expect(result.current).toBe(true);
+
+        rerender();
+        expect(result.current).toBe(true);
+    });
+
+    it("should be stable across re-renders", async () => {
+        const { result, rerender } = renderHook(() => useMounted());
+
+        // Wait for mount
+        await waitFor(() => {
+            expect(result.current).toBe(true);
+        });
+
+        const firstValue = result.current;
+
+        // Re-render
+        rerender();
+        const secondValue = result.current;
+
+        // Values should be the same
+        expect(firstValue).toBe(secondValue);
+        expect(firstValue).toBe(true);
+    });
+
+    it("should handle unmounting gracefully", async () => {
+        const { result, unmount } = renderHook(() => useMounted());
+
+        // Wait for mount
+        await waitFor(() => {
+            expect(result.current).toBe(true);
+        });
+
+        // Unmount should not throw
+        expect(() => unmount()).not.toThrow();
+    });
+});

package/src/hook/utils/useMounted.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+/** @ignore */
+export function useMounted() {
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    return mounted;
+}

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

@@ -0,0 +1,54 @@
+/**
+ * Tests for useWindowLocation hook
+ * Tests hook that tracks window.location changes
+ */
+
+import { renderHook } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { useWindowLocation } from "./useWindowLocation";
+
+describe("useWindowLocation", () => {
+    test("should return current window location", () => {
+        const { result } = renderHook(() => useWindowLocation());
+
+        expect(result.current.location).toBeDefined();
+        expect(result.current.href).toBeDefined();
+        expect(typeof result.current.href).toBe("string");
+    });
+
+    test("should derive href from location", () => {
+        const { result } = renderHook(() => useWindowLocation());
+
+        if (result.current.location) {
+            expect(result.current.href).toBe(result.current.location.href);
+        }
+    });
+
+    test("should register popstate listener", () => {
+        const addEventListenerSpy = vi.spyOn(window, "addEventListener");
+
+        renderHook(() => useWindowLocation());
+
+        expect(addEventListenerSpy).toHaveBeenCalledWith(
+            "popstate",
+            expect.any(Function)
+        );
+
+        addEventListenerSpy.mockRestore();
+    });
+
+    test("should cleanup popstate listener on unmount", () => {
+        const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+
+        const { unmount } = renderHook(() => useWindowLocation());
+
+        unmount();
+
+        expect(removeEventListenerSpy).toHaveBeenCalledWith(
+            "popstate",
+            expect.any(Function)
+        );
+
+        removeEventListenerSpy.mockRestore();
+    });
+});

package/src/hook/utils/useWindowLocation.ts

@@ -0,0 +1,40 @@
+import { useEffect, useMemo, useState } from "react";
+import { useMounted } from "./useMounted";
+
+/**
+ * Returns the current window location and href
+ * @ignore
+ */
+export function useWindowLocation(): {
+    location: Location | undefined;
+    href: string | undefined;
+} {
+    const isMounted = useMounted();
+    const [location, setLocation] = useState<Location | undefined>(
+        isMounted ? window.location : undefined
+    );
+
+    useEffect(() => {
+        if (!isMounted) return;
+
+        // Method to the current window location
+        function setWindowLocation() {
+            setLocation(window.location);
+        }
+
+        if (!location) {
+            setWindowLocation();
+        }
+
+        window.addEventListener("popstate", setWindowLocation);
+
+        return () => {
+            window.removeEventListener("popstate", setWindowLocation);
+        };
+    }, [isMounted, location]);
+
+    // Derive the href from the location
+    const href = useMemo(() => location?.href, [location?.href]);
+
+    return { location, href };
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+// Providers export
+
+// Hooks export
+export {
+    useDisplayModal,
+    useFrakClient,
+    useFrakConfig,
+    useGetMerchantInformation,
+    useOpenSso,
+    usePrepareSso,
+    useReferralInteraction,
+    useSendTransactionAction,
+    useSiweAuthenticate,
+    useWalletStatus,
+} from "./hook";
+export type {
+    FrakConfigProviderProps,
+    FrakIFrameClientProps,
+} from "./provider";
+export {
+    FrakConfigContext,
+    FrakConfigProvider,
+    FrakIFrameClientContext,
+    FrakIFrameClientProvider,
+} from "./provider";

package/src/provider/FrakConfigProvider.test.ts

@@ -0,0 +1,246 @@
+/**
+ * Tests for FrakConfigProvider
+ * Tests that the provider correctly provides config to child components
+ */
+
+import { render } from "@testing-library/react";
+import React, { createElement } from "react";
+import { describe, expect, test } from "../../tests/vitest-fixtures";
+import { FrakConfigContext, FrakConfigProvider } from "./FrakConfigProvider";
+
+describe("FrakConfigProvider", () => {
+    test("should render children", ({ mockFrakConfig }) => {
+        const { container } = render(
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                createElement("div", { "data-testid": "child" }, "Test Child")
+            )
+        );
+
+        expect(
+            container.querySelector('[data-testid="child"]')
+        ).toBeInTheDocument();
+        expect(container.textContent).toContain("Test Child");
+    });
+
+    test("should provide config to context consumers", ({ mockFrakConfig }) => {
+        let receivedConfig: any;
+
+        const Consumer = () => {
+            const config = React.useContext(FrakConfigContext);
+            receivedConfig = config;
+            return null;
+        };
+
+        render(
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                createElement(Consumer)
+            )
+        );
+
+        expect(receivedConfig).toBeDefined();
+        expect(receivedConfig.domain).toBe(mockFrakConfig.domain);
+    });
+
+    test("should apply default walletUrl", () => {
+        const configWithoutWalletUrl = {
+            domain: "example.com",
+            metadata: {
+                name: "Test App",
+            },
+        };
+
+        let receivedConfig: any;
+
+        const Consumer = () => {
+            const config = React.useContext(FrakConfigContext);
+            receivedConfig = config;
+            return null;
+        };
+
+        render(
+            createElement(
+                FrakConfigProvider,
+                { config: configWithoutWalletUrl },
+                createElement(Consumer)
+            )
+        );
+
+        expect(receivedConfig.walletUrl).toBe("https://wallet.frak.id");
+    });
+
+    test("should preserve custom walletUrl", ({ mockFrakConfig }) => {
+        let receivedConfig: any;
+
+        const Consumer = () => {
+            const config = React.useContext(FrakConfigContext);
+            receivedConfig = config;
+            return null;
+        };
+
+        render(
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                createElement(Consumer)
+            )
+        );
+
+        expect(receivedConfig.walletUrl).toBe(mockFrakConfig.walletUrl);
+    });
+
+    test("should fallback domain to window.location.host", () => {
+        const configWithoutDomain = {
+            metadata: {
+                name: "Test App",
+            },
+        };
+
+        let receivedConfig: any;
+
+        const Consumer = () => {
+            const config = React.useContext(FrakConfigContext);
+            receivedConfig = config;
+            return null;
+        };
+
+        render(
+            createElement(
+                FrakConfigProvider,
+                { config: configWithoutDomain as any },
+                createElement(Consumer)
+            )
+        );
+
+        // In test environment, window.location.host is "localhost:3000" (JSDOM default)
+        expect(receivedConfig.domain).toBe(window.location.host);
+    });
+
+    test("should pass through all config properties", ({ mockFrakConfig }) => {
+        let receivedConfig: any;
+
+        const Consumer = () => {
+            const config = React.useContext(FrakConfigContext);
+            receivedConfig = config;
+            return null;
+        };
+
+        render(
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                createElement(Consumer)
+            )
+        );
+
+        expect(receivedConfig.domain).toBe(mockFrakConfig.domain);
+        expect(receivedConfig.walletUrl).toBe(mockFrakConfig.walletUrl);
+        expect(receivedConfig.metadata).toEqual(mockFrakConfig.metadata);
+        expect(receivedConfig.customizations).toEqual(
+            mockFrakConfig.customizations
+        );
+    });
+
+    test("should handle minimal config", () => {
+        const minimalConfig = {
+            domain: "minimal.com",
+            metadata: {
+                name: "Minimal Test App",
+            },
+        };
+
+        let receivedConfig: any;
+
+        const Consumer = () => {
+            const config = React.useContext(FrakConfigContext);
+            receivedConfig = config;
+            return null;
+        };
+
+        render(
+            createElement(
+                FrakConfigProvider,
+                { config: minimalConfig },
+                createElement(Consumer)
+            )
+        );
+
+        expect(receivedConfig.domain).toBe("minimal.com");
+        expect(receivedConfig.walletUrl).toBe("https://wallet.frak.id");
+        expect(receivedConfig.metadata.name).toBe("Minimal Test App");
+    });
+
+    test("should support nested providers with different configs", () => {
+        const outerConfig = {
+            domain: "outer.com",
+            walletUrl: "https://wallet-outer.frak.id",
+            metadata: {
+                name: "Outer App",
+            },
+        };
+
+        const innerConfig = {
+            domain: "inner.com",
+            walletUrl: "https://wallet-inner.frak.id",
+            metadata: {
+                name: "Inner App",
+            },
+        };
+
+        let outerReceivedConfig: any;
+        let innerReceivedConfig: any;
+
+        const OuterConsumer = () => {
+            const config = React.useContext(FrakConfigContext);
+            outerReceivedConfig = config;
+            return null;
+        };
+
+        const InnerConsumer = () => {
+            const config = React.useContext(FrakConfigContext);
+            innerReceivedConfig = config;
+            return null;
+        };
+
+        render(
+            createElement(
+                FrakConfigProvider,
+                { config: outerConfig },
+                createElement(OuterConsumer),
+                createElement(
+                    FrakConfigProvider,
+                    { config: innerConfig },
+                    createElement(InnerConsumer)
+                )
+            )
+        );
+
+        expect(outerReceivedConfig.domain).toBe("outer.com");
+        expect(innerReceivedConfig.domain).toBe("inner.com");
+    });
+
+    test("should render multiple children", ({ mockFrakConfig }) => {
+        const { container } = render(
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                createElement("div", { "data-testid": "child1" }, "Child 1"),
+                createElement("div", { "data-testid": "child2" }, "Child 2"),
+                createElement("div", { "data-testid": "child3" }, "Child 3")
+            )
+        );
+
+        expect(
+            container.querySelector('[data-testid="child1"]')
+        ).toBeInTheDocument();
+        expect(
+            container.querySelector('[data-testid="child2"]')
+        ).toBeInTheDocument();
+        expect(
+            container.querySelector('[data-testid="child3"]')
+        ).toBeInTheDocument();
+    });
+});

package/src/provider/FrakConfigProvider.ts

@@ -0,0 +1,54 @@
+import type { FrakWalletSdkConfig } from "@frak-labs/core-sdk";
+import { createContext, createElement, type PropsWithChildren } from "react";
+
+/**
+ * The context that will keep the Frak Wallet SDK configuration
+ * @ignore
+ */
+export const FrakConfigContext = createContext<FrakWalletSdkConfig | undefined>(
+    undefined
+);
+
+/**
+ * Props to instantiate the Frak Wallet SDK configuration provider
+ *
+ * @group provider
+ */
+export type FrakConfigProviderProps = {
+    /**
+     * The wanted Frak configuration
+     * @see {@link @frak-labs/core-sdk!index.FrakWalletSdkConfig | FrakWalletSdkConfig}
+     */
+    config: FrakWalletSdkConfig;
+};
+
+/**
+ * Simple config provider for the Frak Wallet SDK
+ *
+ * Should be wrapped within a {@link @tanstack/react-query!QueryClientProvider | `QueryClientProvider`}
+ *
+ * @group provider
+ *
+ * @param parameters
+ */
+export function FrakConfigProvider(
+    parameters: PropsWithChildren<FrakConfigProviderProps>
+) {
+    const { children, config } = parameters;
+    return createElement(
+        FrakConfigContext.Provider,
+        {
+            value: {
+                ...config,
+                walletUrl: config.walletUrl ?? "https://wallet.frak.id",
+                domain:
+                    config.domain ??
+                    (typeof window !== "undefined"
+                        ? window?.location?.host
+                        : undefined) ??
+                    "not-found",
+            },
+        },
+        children
+    );
+}