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

package/src/actions/trackPurchaseStatus.ts

@@ -1,3 +1,7 @@
+import { getBackendUrl } from "../utils/backendUrl";
+import { getClientId } from "../utils/clientId";
+import { fetchMerchantId } from "../utils/merchantId";
+
 /**
  * Function used to track the status of a purchase
  * when a purchase is tracked, the `purchaseCompleted` interactions will be automatically send for the user when we receive the purchase confirmation via webhook.
@@ -5,6 +9,7 @@
  * @param args.customerId - The customer id that made the purchase (on your side)
  * @param args.orderId - The order id of the purchase (on your side)
  * @param args.token - The token of the purchase
+ * @param args.merchantId - Optional explicit merchant id to use for the tracking request
  *
  * @description This function will send a request to the backend to listen for the purchase status.
  *
@@ -14,40 +19,72 @@
  *     customerId: checkout.order.customer.id,
  *     orderId: checkout.order.id,
  *     token: checkout.token,
+ *     merchantId: "your-merchant-id",
  *   };
  *
  *   await trackPurchaseStatus(payload);
  * }
  *
  * @remarks
- * - The `trackPurchaseStatus` function requires the `frak-wallet-interaction-token` stored in the session storage to authenticate the request.
- * - This function will print a warning if used in a non-browser environment or if the wallet interaction token is not available.
+ * - Merchant id is resolved in this order: explicit `args.merchantId`, `frak-merchant-id` from session storage, then `fetchMerchantId()`.
+ * - This function supports anonymous users and will use the `x-frak-client-id` header when available.
+ * - At least one identity source must exist (`frak-wallet-interaction-token` or `x-frak-client-id`), otherwise the tracking request is skipped.
+ * - This function will print a warning if used in a non-browser environment or if no identity / merchant id can be resolved.
  */
 export async function trackPurchaseStatus(args: {
     customerId: string | number;
     orderId: string | number;
     token: string;
+    merchantId?: string;
 }) {
     if (typeof window === "undefined") {
         console.warn("[Frak] No window found, can't track purchase");
         return;
     }
+
     const interactionToken = window.sessionStorage.getItem(
         "frak-wallet-interaction-token"
     );
-    if (!interactionToken) {
-        console.warn("[Frak] No frak session found, skipping purchase check");
+
+    const clientId = getClientId();
+    if (!interactionToken && !clientId) {
+        console.warn("[Frak] No identity found, skipping purchase check");
+        return;
+    }
+
+    const merchantIdFromStorage =
+        window.sessionStorage.getItem("frak-merchant-id");
+    const merchantId =
+        args.merchantId ?? merchantIdFromStorage ?? (await fetchMerchantId());
+
+    if (!merchantId) {
+        console.warn("[Frak] No merchant id found, skipping purchase check");
         return;
     }
 
+    const headers: Record<string, string> = {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+    };
+
+    if (interactionToken) {
+        headers["x-wallet-sdk-auth"] = interactionToken;
+    }
+
+    if (clientId) {
+        headers["x-frak-client-id"] = clientId;
+    }
+
     // Submit the listening request
-    await fetch("https://backend.frak.id/interactions/listenForPurchase", {
+    const backendUrl = getBackendUrl();
+    await fetch(`${backendUrl}/user/track/purchase`, {
         method: "POST",
-        headers: {
-            Accept: "application/json",
-            "Content-Type": "application/json",
-            "x-wallet-sdk-auth": interactionToken,
-        },
-        body: JSON.stringify(args),
+        headers,
+        body: JSON.stringify({
+            customerId: args.customerId,
+            orderId: args.orderId,
+            token: args.token,
+            merchantId,
+        }),
     });
 }

package/src/actions/watchWalletStatus.ts

@@ -1,6 +1,7 @@
 import { Deferred } from "@frak-labs/frame-connector";
 import type { FrakClient } from "../types/client";
 import type { WalletStatusReturnType } from "../types/rpc/walletStatus";
+import { ensureIdentity } from "./ensureIdentity";
 
 /**
  * Function used to watch the current frak wallet status
@@ -14,7 +15,6 @@ import type { WalletStatusReturnType } from "../types/rpc/walletStatus";
  * await watchWalletStatus(frakConfig, (status: WalletStatusReturnType) => {
  *     if (status.key === "connected") {
  *         console.log("Wallet connected:", status.wallet);
- *         console.log("Current interaction session:", status.interactionSession);
  *     } else {
  *         console.log("Wallet not connected");
  *     }
@@ -82,13 +82,12 @@ function walletStatusSideEffect(
     });
 
     if (status.interactionToken) {
-        // If we got an interaction token, save it
         window.sessionStorage.setItem(
             "frak-wallet-interaction-token",
             status.interactionToken
         );
+        ensureIdentity(status.interactionToken);
     } else {
-        // Otherwise, remove it
         window.sessionStorage.removeItem("frak-wallet-interaction-token");
     }
 }

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

@@ -25,7 +25,6 @@ describe("modalBuilder", () => {
 
             expect(builder.params).toBeDefined();
             expect(builder.params.steps.login).toEqual({});
-            expect(builder.params.steps.openSession).toEqual({});
         });
 
         it("should create builder with custom login params", () => {
@@ -36,14 +35,6 @@ describe("modalBuilder", () => {
             expect(builder.params.steps.login).toEqual({ allowSso: true });
         });
 
-        it("should create builder with custom openSession params", () => {
-            const builder = modalBuilder(mockClient, {
-                openSession: {},
-            });
-
-            expect(builder.params.steps.openSession).toEqual({});
-        });
-
         it("should create builder with metadata", () => {
             const builder = modalBuilder(mockClient, {
                 metadata: {
@@ -197,10 +188,6 @@ describe("modalBuilder", () => {
                 login: {
                     wallet: "0x1234567890123456789012345678901234567890" as Address,
                 },
-                openSession: {
-                    startTimestamp: 1234567890,
-                    endTimestamp: 1234567900,
-                },
             };
             vi.mocked(displayModal).mockResolvedValue(mockResponse as any);
 
@@ -240,7 +227,6 @@ describe("modalBuilder", () => {
                 login: {
                     wallet: "0x1234567890123456789012345678901234567890" as Address,
                 },
-                openSession: {},
             };
             vi.mocked(displayModal).mockResolvedValue(mockResponse as any);
 

package/src/actions/wrapper/modalBuilder.ts

@@ -7,7 +7,6 @@ import type {
     ModalRpcMetadata,
     ModalRpcStepsResultType,
     ModalStepTypes,
-    OpenInteractionSessionModalStepType,
     SendTransactionModalStepType,
 } from "../../types";
 import { displayModal } from "../displayModal";
@@ -58,9 +57,7 @@ export type ModalStepBuilder<
 /**
  * Represent the output type of the modal builder
  */
-export type ModalBuilder = ModalStepBuilder<
-    [LoginModalStepType, OpenInteractionSessionModalStepType]
->;
+export type ModalBuilder = ModalStepBuilder<[LoginModalStepType]>;
 
 /**
  * Helper to craft Frak modal, and share a base initial config
@@ -68,9 +65,8 @@ export type ModalBuilder = ModalStepBuilder<
  * @param args
  * @param args.metadata - Common modal metadata (customisation, language etc)
  * @param args.login - Login step parameters
- * @param args.openSession - Open session step parameters
  *
- * @description This function will create a modal builder with the provided metadata, login and open session parameters.
+ * @description This function will create a modal builder with the provided metadata and login parameters.
  *
  * @example
  * Here is an example of how to use the `modalBuilder` to create and display a sharing modal:
@@ -102,20 +98,15 @@ export function modalBuilder(
     {
         metadata,
         login,
-        openSession,
     }: {
         metadata?: ModalRpcMetadata;
         login?: LoginModalStepType["params"];
-        openSession?: OpenInteractionSessionModalStepType["params"];
     }
 ): ModalBuilder {
     // Build the initial modal params
-    const baseParams: DisplayModalParamsType<
-        [LoginModalStepType, OpenInteractionSessionModalStepType]
-    > = {
+    const baseParams: DisplayModalParamsType<[LoginModalStepType]> = {
         steps: {
             login: login ?? {},
-            openSession: openSession ?? {},
         },
         metadata,
     };

package/src/bundle.ts

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

package/src/clients/createIFrameFrakClient.ts

@@ -4,12 +4,12 @@ import {
     type RpcClient,
     RpcErrorCodes,
 } from "@frak-labs/frame-connector";
-import { createClientCompressionMiddleware } from "@frak-labs/frame-connector/middleware";
 import { OpenPanel } from "@openpanel/web";
 import type { FrakLifecycleEvent } from "../types";
 import type { FrakClient } from "../types/client";
 import type { FrakWalletSdkConfig } from "../types/config";
 import type { IFrameRpcSchema } from "../types/rpc";
+import { getClientId } from "../utils";
 import { BACKUP_KEY } from "../utils/constants";
 import { setupSsoUrlListener } from "../utils/ssoUrlListener";
 import { DebugInfoGatherer } from "./DebugInfo";
@@ -23,7 +23,8 @@ type SdkRpcClient = RpcClient<IFrameRpcSchema, FrakLifecycleEvent>;
 /**
  * Create a new iframe Frak client
  * @param args
- * @param args.config - The configuration to use for the Frak Wallet SDK
+ * @param args.config - The configuration to use for the Frak Wallet SDK.
+ *   When `config.domain` is set, it is forwarded to the iframe handshake so the listener resolves the correct merchant in tunneled/proxied environments (e.g. Shopify dev with Cloudflare tunnel).
  * @param args.iframe - The iframe to use for the communication
  * @returns The created Frak Client
  *
@@ -46,7 +47,11 @@ export function createIFrameFrakClient({
     const frakWalletUrl = config?.walletUrl ?? "https://wallet.frak.id";
 
     // Create lifecycle manager
-    const lifecycleManager = createIFrameLifecycleManager({ iframe });
+    const lifecycleManager = createIFrameLifecycleManager({
+        iframe,
+        targetOrigin: frakWalletUrl,
+        configDomain: config.domain,
+    });
 
     // Create our debug info gatherer
     const debugInfo = new DebugInfoGatherer(config, iframe);
@@ -64,7 +69,6 @@ export function createIFrameFrakClient({
         emittingTransport: iframe.contentWindow,
         listeningTransport: window,
         targetOrigin: frakWalletUrl,
-        // Add compression middleware to handle request/response compression
         middleware: [
             // Ensure we are connected before sending request
             {
@@ -80,7 +84,6 @@ export function createIFrameFrakClient({
                     return ctx;
                 },
             },
-            createClientCompressionMiddleware(),
             // Save debug info
             {
                 onRequest(message, ctx) {
@@ -139,6 +142,7 @@ export function createIFrameFrakClient({
                     payload.properties = {
                         ...payload.properties,
                         sdkVersion: process.env.SDK_VERSION,
+                        userAnonymousClientId: getClientId(),
                     };
                 }
 
@@ -147,6 +151,7 @@ export function createIFrameFrakClient({
         });
         openPanel.setGlobalProperties({
             sdkVersion: process.env.SDK_VERSION,
+            userAnonymousClientId: getClientId(),
         });
         openPanel.init();
     }

package/src/clients/transports/iframeLifecycleManager.test.ts

@@ -24,6 +24,17 @@ vi.mock("../../utils/iframeHelper", () => ({
     changeIframeVisibility: vi.fn(),
 }));
 
+vi.mock("../../utils/clientId", () => ({
+    getClientId: vi.fn(() => "mock-client-id"),
+}));
+
+vi.mock("../../utils/deepLinkWithFallback", () => ({
+    isFrakDeepLink: vi.fn((url: string) => url.startsWith("frakwallet://")),
+    triggerDeepLinkWithFallback: vi.fn(),
+}));
+
+const WALLET_ORIGIN = "https://wallet.frak.id";
+
 describe("createIFrameLifecycleManager", () => {
     beforeEach(() => {
         vi.clearAllMocks();
@@ -45,6 +56,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             expect(manager).toBeDefined();
@@ -60,6 +72,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             let resolved = false;
@@ -82,6 +95,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const event = {
@@ -103,6 +117,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const backup = "encrypted-backup-data";
@@ -124,6 +139,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             // First set a backup
@@ -147,6 +163,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             // First set a backup
@@ -174,6 +191,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const event = {
@@ -199,6 +217,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const event = {
@@ -215,13 +234,14 @@ describe("createIFrameLifecycleManager", () => {
     });
 
     describe("handshake event", () => {
-        test("should post handshake-response with token", async () => {
+        test("should post handshake-response with token to iframe origin", async () => {
             const { createIFrameLifecycleManager } = await import(
                 "./iframeLifecycleManager"
             );
 
             const mockPostMessage = vi.fn();
             const mockIframe = {
+                src: "https://wallet.frak.id/listener",
                 contentWindow: {
                     postMessage: mockPostMessage,
                 },
@@ -229,6 +249,7 @@ describe("createIFrameLifecycleManager", () => {
 
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const event = {
@@ -244,9 +265,10 @@ describe("createIFrameLifecycleManager", () => {
                     data: {
                         token: "handshake-token-123",
                         currentUrl: "https://test.com",
+                        clientId: "mock-client-id",
                     },
                 },
-                "*"
+                "https://wallet.frak.id"
             );
         });
 
@@ -262,6 +284,7 @@ describe("createIFrameLifecycleManager", () => {
 
             const mockPostMessage = vi.fn();
             const mockIframe = {
+                src: "https://wallet.frak.id/listener",
                 contentWindow: {
                     postMessage: mockPostMessage,
                 },
@@ -269,6 +292,7 @@ describe("createIFrameLifecycleManager", () => {
 
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const event = {
@@ -284,13 +308,13 @@ describe("createIFrameLifecycleManager", () => {
                         currentUrl: "https://example.com/page?param=value",
                     }),
                 }),
-                "*"
+                "https://wallet.frak.id"
             );
         });
     });
 
     describe("redirect event", () => {
-        test("should redirect with appended current URL", async () => {
+        test("should redirect with appended current URL for HTTP URLs", async () => {
             const { createIFrameLifecycleManager } = await import(
                 "./iframeLifecycleManager"
             );
@@ -305,6 +329,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const event = {
@@ -336,6 +361,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const event = {
@@ -349,6 +375,137 @@ describe("createIFrameLifecycleManager", () => {
 
             expect(window.location.href).toBe("https://redirect.com/path");
         });
+
+        test("should use fallback detection for frakwallet:// deep links", async () => {
+            const { createIFrameLifecycleManager } = await import(
+                "./iframeLifecycleManager"
+            );
+            const { triggerDeepLinkWithFallback } = await import(
+                "../../utils/deepLinkWithFallback"
+            );
+
+            Object.defineProperty(window, "location", {
+                value: {
+                    href: "https://original.com",
+                },
+                writable: true,
+            });
+
+            const mockIframe = document.createElement("iframe");
+            mockIframe.src = "https://wallet.frak.id";
+            const manager = createIFrameLifecycleManager({
+                iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
+            });
+
+            const event = {
+                iframeLifecycle: "redirect" as const,
+                data: {
+                    baseRedirectUrl: "frakwallet://wallet",
+                },
+            };
+
+            await manager.handleEvent(event);
+
+            expect(triggerDeepLinkWithFallback).toHaveBeenCalledWith(
+                "frakwallet://wallet",
+                expect.objectContaining({
+                    onFallback: expect.any(Function),
+                })
+            );
+        });
+
+        test("should post deep-link-failed message when fallback is triggered", async () => {
+            const { createIFrameLifecycleManager } = await import(
+                "./iframeLifecycleManager"
+            );
+            const { triggerDeepLinkWithFallback } = await import(
+                "../../utils/deepLinkWithFallback"
+            );
+
+            Object.defineProperty(window, "location", {
+                value: {
+                    href: "https://original.com",
+                },
+                writable: true,
+            });
+
+            const mockPostMessage = vi.fn();
+            const mockIframe = {
+                src: "https://wallet.frak.id",
+                contentWindow: {
+                    postMessage: mockPostMessage,
+                },
+            } as any;
+
+            const manager = createIFrameLifecycleManager({
+                iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
+            });
+
+            const event = {
+                iframeLifecycle: "redirect" as const,
+                data: {
+                    baseRedirectUrl: "frakwallet://wallet",
+                },
+            };
+
+            await manager.handleEvent(event);
+
+            // Extract the onFallback callback from the mock call
+            const callArgs = (triggerDeepLinkWithFallback as any).mock.calls[0];
+            const options = callArgs[1];
+            expect(options).toBeDefined();
+            expect(options.onFallback).toBeInstanceOf(Function);
+
+            // Trigger the fallback callback
+            options.onFallback();
+
+            // Verify postMessage was called with deep-link-failed event
+            expect(mockPostMessage).toHaveBeenCalledWith(
+                {
+                    clientLifecycle: "deep-link-failed",
+                    data: { originalUrl: "frakwallet://wallet" },
+                },
+                "https://wallet.frak.id"
+            );
+        });
+
+        test("should NOT use fallback detection for HTTP URLs", async () => {
+            const { createIFrameLifecycleManager } = await import(
+                "./iframeLifecycleManager"
+            );
+            const { triggerDeepLinkWithFallback } = await import(
+                "../../utils/deepLinkWithFallback"
+            );
+
+            Object.defineProperty(window, "location", {
+                value: {
+                    href: "https://original.com",
+                },
+                writable: true,
+            });
+
+            const mockIframe = document.createElement("iframe");
+            const manager = createIFrameLifecycleManager({
+                iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
+            });
+
+            const event = {
+                iframeLifecycle: "redirect" as const,
+                data: {
+                    baseRedirectUrl: "https://wallet.frak.id/login",
+                },
+            };
+
+            await manager.handleEvent(event);
+
+            // Should NOT call fallback detection
+            expect(triggerDeepLinkWithFallback).not.toHaveBeenCalled();
+            // Should directly redirect
+            expect(window.location.href).toBe("https://wallet.frak.id/login");
+        });
     });
 
     describe("event filtering", () => {
@@ -360,6 +517,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             const event = {
@@ -381,6 +539,7 @@ describe("createIFrameLifecycleManager", () => {
             const mockIframe = document.createElement("iframe");
             const manager = createIFrameLifecycleManager({
                 iframe: mockIframe,
+                targetOrigin: WALLET_ORIGIN,
             });
 
             // Event without iframeLifecycle