@frak-labs/core-sdk 0.1.0-beta.afa252b0 → 0.1.0-beta.c7e026e5

package/src/actions/wrapper/siweAuthenticate.test.ts

@@ -0,0 +1,290 @@
+import { beforeEach, vi } from "vitest";
+
+vi.mock("../displayModal", () => ({
+    displayModal: vi.fn(),
+}));
+
+vi.mock("viem/siwe", () => ({
+    generateSiweNonce: vi.fn(() => "mock-nonce-123456"),
+}));
+
+import type { Address, Hex } from "viem";
+import { describe, expect, it } from "../../../tests/vitest-fixtures";
+import type { FrakClient } from "../../types";
+import { siweAuthenticate } from "./siweAuthenticate";
+
+describe("siweAuthenticate", () => {
+    const mockClient = {
+        config: {
+            domain: "example.com",
+            metadata: {
+                name: "Test App",
+            },
+        },
+        request: vi.fn(),
+    } as unknown as FrakClient;
+
+    const mockClientWithoutDomain = {
+        config: {
+            metadata: {
+                name: "Test App",
+            },
+        },
+        request: vi.fn(),
+    } as unknown as FrakClient;
+
+    beforeEach(() => {
+        vi.stubGlobal("window", {
+            location: {
+                host: "window.example.com",
+            },
+        });
+    });
+
+    describe("basic usage", () => {
+        it("should call displayModal with SIWE params", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            const mockResponse = {
+                login: {
+                    wallet: "0x1234567890123456789012345678901234567890" as Address,
+                },
+                siweAuthenticate: {
+                    message: "Sign in to Test App",
+                    signature: "0xsignature" as Hex,
+                },
+            };
+            vi.mocked(displayModal).mockResolvedValue(mockResponse as any);
+
+            await siweAuthenticate(mockClient, {});
+
+            expect(displayModal).toHaveBeenCalledWith(mockClient, {
+                metadata: undefined,
+                steps: {
+                    login: {},
+                    siweAuthenticate: {
+                        siwe: expect.objectContaining({
+                            domain: "example.com",
+                            nonce: "mock-nonce-123456",
+                            uri: "https://example.com",
+                            version: "1",
+                        }),
+                    },
+                },
+            });
+        });
+
+        it("should return SIWE authentication result", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            const mockSiweResult = {
+                message: "I confirm that I want to use my Frak wallet",
+                signature:
+                    "0xsig1234567890123456789012345678901234567890123456789012345678901234" as Hex,
+            };
+            vi.mocked(displayModal).mockResolvedValue({
+                login: {},
+                siweAuthenticate: mockSiweResult,
+            } as any);
+
+            const result = await siweAuthenticate(mockClient, {});
+
+            expect(result).toEqual(mockSiweResult);
+        });
+    });
+
+    describe("SIWE parameter handling", () => {
+        it("should use default statement when not provided", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            vi.mocked(displayModal).mockResolvedValue({
+                login: {},
+                siweAuthenticate: { message: "", signature: "0x" as Hex },
+            } as any);
+
+            await siweAuthenticate(mockClient, {});
+
+            expect(displayModal).toHaveBeenCalledWith(
+                mockClient,
+                expect.objectContaining({
+                    steps: expect.objectContaining({
+                        siweAuthenticate: expect.objectContaining({
+                            siwe: expect.objectContaining({
+                                statement:
+                                    "I confirm that I want to use my Frak wallet on: Test App",
+                            }),
+                        }),
+                    }),
+                })
+            );
+        });
+
+        it("should use custom statement when provided", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            vi.mocked(displayModal).mockResolvedValue({
+                login: {},
+                siweAuthenticate: { message: "", signature: "0x" as Hex },
+            } as any);
+
+            await siweAuthenticate(mockClient, {
+                siwe: { statement: "Custom sign in message" },
+            });
+
+            expect(displayModal).toHaveBeenCalledWith(
+                mockClient,
+                expect.objectContaining({
+                    steps: expect.objectContaining({
+                        siweAuthenticate: expect.objectContaining({
+                            siwe: expect.objectContaining({
+                                statement: "Custom sign in message",
+                            }),
+                        }),
+                    }),
+                })
+            );
+        });
+
+        it("should use custom nonce when provided", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            vi.mocked(displayModal).mockResolvedValue({
+                login: {},
+                siweAuthenticate: { message: "", signature: "0x" as Hex },
+            } as any);
+
+            await siweAuthenticate(mockClient, {
+                siwe: { nonce: "custom-nonce" },
+            });
+
+            expect(displayModal).toHaveBeenCalledWith(
+                mockClient,
+                expect.objectContaining({
+                    steps: expect.objectContaining({
+                        siweAuthenticate: expect.objectContaining({
+                            siwe: expect.objectContaining({
+                                nonce: "custom-nonce",
+                            }),
+                        }),
+                    }),
+                })
+            );
+        });
+
+        it("should use window.location.host when domain not in config", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            vi.mocked(displayModal).mockResolvedValue({
+                login: {},
+                siweAuthenticate: { message: "", signature: "0x" as Hex },
+            } as any);
+
+            await siweAuthenticate(mockClientWithoutDomain, {});
+
+            expect(displayModal).toHaveBeenCalledWith(
+                mockClientWithoutDomain,
+                expect.objectContaining({
+                    steps: expect.objectContaining({
+                        siweAuthenticate: expect.objectContaining({
+                            siwe: expect.objectContaining({
+                                domain: "window.example.com",
+                                uri: "https://window.example.com",
+                            }),
+                        }),
+                    }),
+                })
+            );
+        });
+
+        it("should use custom uri when provided", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            vi.mocked(displayModal).mockResolvedValue({
+                login: {},
+                siweAuthenticate: { message: "", signature: "0x" as Hex },
+            } as any);
+
+            await siweAuthenticate(mockClient, {
+                siwe: { uri: "https://custom-uri.com" },
+            });
+
+            expect(displayModal).toHaveBeenCalledWith(
+                mockClient,
+                expect.objectContaining({
+                    steps: expect.objectContaining({
+                        siweAuthenticate: expect.objectContaining({
+                            siwe: expect.objectContaining({
+                                uri: "https://custom-uri.com",
+                            }),
+                        }),
+                    }),
+                })
+            );
+        });
+
+        it("should use custom version when provided", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            vi.mocked(displayModal).mockResolvedValue({
+                login: {},
+                siweAuthenticate: { message: "", signature: "0x" as Hex },
+            } as any);
+
+            await siweAuthenticate(mockClient, {
+                siwe: { version: "2" as any },
+            });
+
+            expect(displayModal).toHaveBeenCalledWith(
+                mockClient,
+                expect.objectContaining({
+                    steps: expect.objectContaining({
+                        siweAuthenticate: expect.objectContaining({
+                            siwe: expect.objectContaining({
+                                version: "2",
+                            }),
+                        }),
+                    }),
+                })
+            );
+        });
+    });
+
+    describe("with metadata", () => {
+        it("should pass metadata to displayModal", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            vi.mocked(displayModal).mockResolvedValue({
+                login: {},
+                siweAuthenticate: { message: "", signature: "0x" as Hex },
+            } as any);
+
+            const metadata = {
+                header: {
+                    title: "Sign In",
+                },
+                context: "Sign in to access your account",
+            };
+
+            await siweAuthenticate(mockClient, { metadata });
+
+            expect(displayModal).toHaveBeenCalledWith(mockClient, {
+                metadata,
+                steps: expect.any(Object),
+            });
+        });
+    });
+
+    describe("error handling", () => {
+        it("should propagate errors from displayModal", async () => {
+            const { displayModal } = await import("../displayModal");
+
+            vi.mocked(displayModal).mockRejectedValue(
+                new Error("SIWE authentication rejected")
+            );
+
+            await expect(siweAuthenticate(mockClient, {})).rejects.toThrow(
+                "SIWE authentication rejected"
+            );
+        });
+    });
+});

package/src/actions/wrapper/siweAuthenticate.ts

@@ -0,0 +1,94 @@
+import { generateSiweNonce } from "viem/siwe";
+import type {
+    FrakClient,
+    ModalRpcMetadata,
+    SiweAuthenticateReturnType,
+    SiweAuthenticationParams,
+} from "../../types";
+import { displayModal } from "../displayModal";
+
+/**
+ * Parameter used to directly show a modal used to authenticate with SIWE
+ * @inline
+ */
+export type SiweAuthenticateModalParams = {
+    /**
+     * Partial SIWE params, since we can rebuild them from the SDK if they are empty
+     *
+     * If no parameters provider, some fields will be recomputed from the current configuration and environment.
+     *  - `statement` will be set to a default value
+     *  - `nonce` will be generated
+     *  - `uri` will be set to the current domain
+     *  - `version` will be set to "1"
+     *  - `domain` will be set to the current window domain
+     *
+     * @default {}
+     */
+    siwe?: Partial<SiweAuthenticationParams>;
+    /**
+     * Custom metadata to be passed to the modal
+     */
+    metadata?: ModalRpcMetadata;
+};
+
+/**
+ * Function used to launch a siwe authentication
+ * @param client - The current Frak Client
+ * @param args - The parameters
+ * @returns The SIWE authentication result (message + signature) in a promise
+ *
+ * @description This function will display a modal to the user with the provided SIWE parameters and metadata.
+ *
+ * @example
+ * import { siweAuthenticate } from "@frak-labs/core-sdk/actions";
+ * import { parseSiweMessage } from "viem/siwe";
+ *
+ * const { signature, message } = await siweAuthenticate(frakConfig, {
+ *     siwe: {
+ *         statement: "Sign in to My App",
+ *         domain: "my-app.com",
+ *         expirationTimeTimestamp: Date.now() + 1000 * 60 * 5,
+ *     },
+ *     metadata: {
+ *         header: {
+ *             title: "Sign in",
+ *         },
+ *         context: "Sign in to My App",
+ *     },
+ * });
+ * console.log("Parsed final message:", parseSiweMessage(message));
+ * console.log("Siwe signature:", signature);
+ */
+export async function siweAuthenticate(
+    client: FrakClient,
+    { siwe, metadata }: SiweAuthenticateModalParams
+): Promise<SiweAuthenticateReturnType> {
+    const effectiveDomain = client.config?.domain ?? window.location.host;
+    const realStatement =
+        siwe?.statement ??
+        `I confirm that I want to use my Frak wallet on: ${client.config.metadata.name}`;
+
+    // Fill up the siwe request params
+    const builtSiwe: SiweAuthenticationParams = {
+        ...siwe,
+        statement: realStatement,
+        nonce: siwe?.nonce ?? generateSiweNonce(),
+        uri: siwe?.uri ?? `https://${effectiveDomain}`,
+        version: siwe?.version ?? "1",
+        domain: effectiveDomain,
+    };
+
+    // Trigger a modal with login options
+    const result = await displayModal(client, {
+        metadata,
+        steps: {
+            login: {},
+            siweAuthenticate: {
+                siwe: builtSiwe,
+            },
+        },
+    });
+
+    // Return the SIWE result only
+    return result.siweAuthenticate;
+}

package/src/bundle.ts

@@ -0,0 +1,3 @@
+export * from "./actions";
+export * from "./index";
+export * from "./interactions";

package/src/clients/DebugInfo.ts

@@ -0,0 +1,182 @@
+import {
+    FrakRpcError,
+    type RpcMessage,
+    type RpcResponse,
+} from "@frak-labs/frame-connector";
+import type { FrakWalletSdkConfig } from "../types";
+
+type IframeStatus = {
+    loading: boolean;
+    url: string | null;
+    readyState: number;
+    contentWindow: boolean;
+    isConnected: boolean;
+};
+
+type DebugInfo = {
+    timestamp: string;
+    encodedUrl: string;
+    navigatorInfo: string;
+    encodedConfig: string;
+    iframeStatus: string;
+    lastRequest: string;
+    lastResponse: string;
+    clientStatus: string;
+    error: string;
+};
+
+type NavigatorInfo = {
+    userAgent: string;
+    language: string;
+    onLine: boolean;
+    screenWidth: number;
+    screenHeight: number;
+    pixelRatio: number;
+};
+
+/** @ignore */
+export class DebugInfoGatherer {
+    private config?: FrakWalletSdkConfig;
+    private iframe?: HTMLIFrameElement;
+    private isSetupDone = false;
+    private lastResponse: null | {
+        message: RpcMessage;
+        response: RpcResponse;
+        timestamp: number;
+    } = null;
+    private lastRequest: null | {
+        event: RpcMessage;
+        timestamp: number;
+    } = null;
+
+    constructor(config?: FrakWalletSdkConfig, iframe?: HTMLIFrameElement) {
+        this.config = config;
+        this.iframe = iframe;
+        this.lastRequest = null;
+        this.lastResponse = null;
+    }
+
+    // Update communication logs
+    public setLastResponse(message: RpcMessage, response: RpcResponse) {
+        this.lastResponse = {
+            message,
+            response,
+            timestamp: Date.now(),
+        };
+    }
+    public setLastRequest(event: RpcMessage) {
+        this.lastRequest = { event, timestamp: Date.now() };
+    }
+
+    // Update connection status
+    public updateSetupStatus(status: boolean) {
+        this.isSetupDone = status;
+    }
+
+    private base64Encode(data: object): string {
+        try {
+            return btoa(JSON.stringify(data));
+        } catch (err) {
+            console.warn("Failed to encode debug data", err);
+            return btoa("Failed to encode data");
+        }
+    }
+
+    /**
+     * Extract information from the iframe status
+     */
+    private getIframeStatus(): IframeStatus | null {
+        if (!this.iframe) {
+            return null;
+        }
+        return {
+            loading: this.iframe.hasAttribute("loading"),
+            url: this.iframe.src,
+            readyState: this.iframe.contentDocument?.readyState
+                ? this.iframe.contentDocument.readyState === "complete"
+                    ? 1
+                    : 0
+                : -1,
+            contentWindow: !!this.iframe.contentWindow,
+            isConnected: this.iframe.isConnected,
+        };
+    }
+
+    private getNavigatorInfo(): NavigatorInfo | null {
+        if (!navigator) {
+            return null;
+        }
+        return {
+            userAgent: navigator.userAgent,
+            language: navigator.language,
+            onLine: navigator.onLine,
+            screenWidth: window.screen.width,
+            screenHeight: window.screen.height,
+            pixelRatio: window.devicePixelRatio,
+        };
+    }
+
+    private gatherDebugInfo(error: Error | unknown): DebugInfo {
+        const iframeStatus = this.getIframeStatus();
+        const navigatorInfo = this.getNavigatorInfo();
+
+        // Format the error in a readable format
+        let formattedError = "Unknown";
+        if (error instanceof FrakRpcError) {
+            formattedError = `FrakRpcError: ${error.code} '${error.message}'`;
+        } else if (error instanceof Error) {
+            formattedError = error.message;
+        } else if (typeof error === "string") {
+            formattedError = error;
+        }
+
+        // Craft the debug info
+        const debugInfo: DebugInfo = {
+            timestamp: new Date().toISOString(),
+            encodedUrl: btoa(window.location.href),
+            encodedConfig: this.config
+                ? this.base64Encode(this.config)
+                : "no-config",
+            navigatorInfo: navigatorInfo
+                ? this.base64Encode(navigatorInfo)
+                : "no-navigator",
+            iframeStatus: iframeStatus
+                ? this.base64Encode(iframeStatus)
+                : "not-iframe",
+            lastRequest: this.lastRequest
+                ? this.base64Encode(this.lastRequest)
+                : "No Frak request logged",
+            lastResponse: this.lastResponse
+                ? this.base64Encode(this.lastResponse)
+                : "No Frak response logged",
+            clientStatus: this.isSetupDone ? "setup" : "not-setup",
+            error: formattedError,
+        };
+
+        return debugInfo;
+    }
+
+    public static empty(): DebugInfoGatherer {
+        return new DebugInfoGatherer();
+    }
+
+    /**
+     * Format Frak debug information
+     */
+    public formatDebugInfo(error: Error | unknown | string): string {
+        const debugInfo = this.gatherDebugInfo(error);
+        return `
+  Debug Information:
+  -----------------
+  Timestamp: ${debugInfo.timestamp}
+  URL: ${debugInfo.encodedUrl}
+  Config: ${debugInfo.encodedConfig}
+  Navigator Info: ${debugInfo.navigatorInfo}
+  IFrame Status: ${debugInfo.iframeStatus}
+  Last Request: ${debugInfo.lastRequest}
+  Last Response: ${debugInfo.lastResponse}
+  Client Status: ${debugInfo.clientStatus}
+  Error: ${debugInfo.error}
+  `.trim();
+    }
+}