@frak-labs/react-sdk 0.1.1 → 0.2.0

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

package/src/provider/FrakIFrameClientProvider.test.tsx

@@ -0,0 +1,209 @@
+/**
+ * Tests for FrakIFrameClientProvider
+ * Tests iframe creation and FrakClient provider
+ */
+
+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,
+        createIFrameFrakClient: vi.fn(),
+    };
+});
+
+import type { FrakClient } from "@frak-labs/core-sdk";
+import { createIFrameFrakClient } from "@frak-labs/core-sdk";
+import { render, waitFor } from "@testing-library/react";
+import { createElement, type ReactNode } from "react";
+import { describe, expect, test } from "../../tests/vitest-fixtures";
+import { FrakConfigProvider } from "./FrakConfigProvider";
+import { FrakIFrameClientProvider } from "./FrakIFrameClientProvider";
+
+describe("FrakIFrameClientProvider", () => {
+    test("should render iframe with correct src", ({ mockFrakConfig }) => {
+        const Wrapper = ({ children }: { children: ReactNode }) =>
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                children
+            );
+
+        render(createElement(FrakIFrameClientProvider), {
+            wrapper: Wrapper,
+        });
+
+        const iframe = document.querySelector("iframe");
+        expect(iframe).toBeDefined();
+        expect(iframe?.src).toContain(`${mockFrakConfig.walletUrl}/listener`);
+    });
+
+    test("should apply custom styles to iframe", ({ mockFrakConfig }) => {
+        const Wrapper = ({ children }: { children: ReactNode }) =>
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                children
+            );
+
+        const customStyle = {
+            width: "500px",
+            height: "600px",
+        };
+
+        render(
+            createElement(FrakIFrameClientProvider, { style: customStyle }),
+            {
+                wrapper: Wrapper,
+            }
+        );
+
+        const iframe = document.querySelector("iframe");
+        expect(iframe?.style.width).toBe("500px");
+        expect(iframe?.style.height).toBe("600px");
+    });
+
+    test("should create FrakClient when iframe ref is set", async ({
+        mockFrakConfig,
+    }) => {
+        const Wrapper = ({ children }: { children: ReactNode }) =>
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                children
+            );
+
+        const mockClient = { config: mockFrakConfig } as FrakClient;
+        vi.mocked(createIFrameFrakClient).mockReturnValue(mockClient);
+
+        render(createElement(FrakIFrameClientProvider), {
+            wrapper: Wrapper,
+        });
+
+        await waitFor(() => {
+            expect(createIFrameFrakClient).toHaveBeenCalled();
+        });
+    });
+
+    test("should not recreate client if already exists", async ({
+        mockFrakConfig,
+    }) => {
+        const Wrapper = ({ children }: { children: ReactNode }) =>
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                children
+            );
+
+        const mockClient = { config: mockFrakConfig } as FrakClient;
+        vi.mocked(createIFrameFrakClient).mockReturnValue(mockClient);
+
+        const { rerender } = render(createElement(FrakIFrameClientProvider), {
+            wrapper: Wrapper,
+        });
+
+        await waitFor(() => {
+            expect(createIFrameFrakClient).toHaveBeenCalledTimes(1);
+        });
+
+        // Rerender the component
+        rerender(createElement(FrakIFrameClientProvider));
+
+        // Should still only be called once
+        expect(createIFrameFrakClient).toHaveBeenCalledTimes(1);
+    });
+
+    test("should render without children", ({ mockFrakConfig }) => {
+        const Wrapper = ({ children }: { children: ReactNode }) =>
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                children
+            );
+
+        const { container } = render(createElement(FrakIFrameClientProvider), {
+            wrapper: Wrapper,
+        });
+
+        const iframe = container.querySelector("iframe");
+        expect(iframe).toBeDefined();
+    });
+
+    test("should use baseIframeProps for iframe attributes", ({
+        mockFrakConfig,
+    }) => {
+        const Wrapper = ({ children }: { children: ReactNode }) =>
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                children
+            );
+
+        render(createElement(FrakIFrameClientProvider), {
+            wrapper: Wrapper,
+        });
+
+        const iframe = document.querySelector("iframe");
+        expect(iframe).toBeDefined();
+        // baseIframeProps should set these attributes
+        expect(iframe?.getAttribute("sandbox")).toBeDefined();
+    });
+
+    test("should handle iframe ref callback correctly", ({
+        mockFrakConfig,
+    }) => {
+        const Wrapper = ({ children }: { children: ReactNode }) =>
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                children
+            );
+
+        const mockClient = { config: mockFrakConfig } as FrakClient;
+        let callCount = 0;
+
+        vi.mocked(createIFrameFrakClient).mockImplementation(() => {
+            callCount++;
+            return mockClient;
+        });
+
+        render(createElement(FrakIFrameClientProvider), {
+            wrapper: Wrapper,
+        });
+
+        // Client creation should be called at most once
+        expect(callCount).toBeLessThanOrEqual(1);
+    });
+
+    test("should pass config to createIFrameFrakClient", async ({
+        mockFrakConfig,
+    }) => {
+        const Wrapper = ({ children }: { children: ReactNode }) =>
+            createElement(
+                FrakConfigProvider,
+                { config: mockFrakConfig },
+                children
+            );
+
+        const mockClient = { config: mockFrakConfig } as FrakClient;
+        vi.mocked(createIFrameFrakClient).mockReturnValue(mockClient);
+
+        render(createElement(FrakIFrameClientProvider), {
+            wrapper: Wrapper,
+        });
+
+        await waitFor(() => {
+            expect(createIFrameFrakClient).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    config: expect.objectContaining({
+                        domain: "example.com",
+                        walletUrl: "https://wallet-test.frak.id",
+                    }),
+                })
+            );
+        });
+    });
+});

package/src/provider/FrakIFrameClientProvider.ts

@@ -0,0 +1,86 @@
+import {
+    baseIframeProps,
+    createIFrameFrakClient,
+    type FrakClient,
+    type FrakWalletSdkConfig,
+} from "@frak-labs/core-sdk";
+import {
+    type CSSProperties,
+    createContext,
+    createElement,
+    Fragment,
+    type ReactNode,
+    useState,
+} from "react";
+import { useFrakConfig } from "../hook";
+
+/**
+ * The context that will keep the Frak Wallet SDK client
+ * @ignore
+ */
+export const FrakIFrameClientContext = createContext<FrakClient | undefined>(
+    undefined
+);
+
+/**
+ * Props to instantiate the Frak Wallet SDK configuration provider
+ *
+ * @group provider
+ */
+export type FrakIFrameClientProps = {
+    config: FrakWalletSdkConfig;
+};
+
+/**
+ * IFrame client provider for the Frak Wallet SDK
+ * It will automatically create the frak wallet iFrame (required for the wallet to communicate with the SDK securely), and provide it in the context
+ *
+ * @group provider
+ *
+ * @remarks
+ * This provider must be wrapped within a {@link FrakConfigProvider} to work properly
+ *
+ * @param args
+ * @param args.style - Some custom styles to apply to the iFrame
+ * @param args.children - Descedant components that will have access to the Frak Client
+ */
+export function FrakIFrameClientProvider({
+    style,
+    children,
+}: {
+    style?: CSSProperties;
+    children?: ReactNode;
+}) {
+    const config = useFrakConfig();
+
+    // Using a state for the client since using directly a client built inside the ref cause re-render loop
+    const [client, setClient] = useState<FrakClient | undefined>(undefined);
+
+    // Create the iframe that will be used to communicate with the wallet
+    const iFrame = createElement("iframe", {
+        ...baseIframeProps,
+        src: `${config.walletUrl}/listener`,
+        style: style ?? baseIframeProps.style,
+        ref: (iframe: HTMLIFrameElement) => {
+            if (!iframe || client) {
+                return;
+            }
+            setClient(
+                createIFrameFrakClient({
+                    iframe,
+                    config,
+                })
+            );
+        },
+    });
+
+    // Create the component that will provide the client
+    const providerComponent = createElement(
+        FrakIFrameClientContext.Provider,
+        { value: client },
+        children
+    );
+
+    // Return both components
+    return createElement(Fragment, null, iFrame, providerComponent);
+}

package/src/provider/index.ts

@@ -0,0 +1,7 @@
+export type { FrakConfigProviderProps } from "./FrakConfigProvider";
+export { FrakConfigContext, FrakConfigProvider } from "./FrakConfigProvider";
+export type { FrakIFrameClientProps } from "./FrakIFrameClientProvider";
+export {
+    FrakIFrameClientContext,
+    FrakIFrameClientProvider,
+} from "./FrakIFrameClientProvider";