✨ Add heartbeat from sdk to iframe to ensure iframe connection

frak-id · Dec 16, 2024 · 2d47539 · 2d47539
1 parent b74b8bb
commit 2d47539
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 2 deletions.
diff --git a/packages/wallet/app/context/sdk/utils/iFrameRequestResolver.ts b/packages/wallet/app/context/sdk/utils/iFrameRequestResolver.ts
@@ -100,6 +100,12 @@ export function createIFrameRequestResolver(
             return;
         }
         if ("iframeLifecycle" in message.data) {
+            const { iframeLifecycle } = message.data;
+            if (iframeLifecycle === "heartbeat") {
+                setReadyToHandleRequest();
+                return;
+            }
+
             console.error(
                 "Received an iframe lifecycle event on the iframe side, dismissing it"
             );

diff --git a/sdk/core/src/clients/createIFrameFrakClient.ts b/sdk/core/src/clients/createIFrameFrakClient.ts
@@ -154,8 +154,13 @@ export function createIFrameFrakClient({
         });
     };
 
+    // Setup heartbeat
+    const stopHeartbeat = setupHeartbeat(messageHandler, lifecycleManager);
+
     // Build our destroy function
     const destroy = async () => {
+        // Stop heartbeat
+        stopHeartbeat();
         // Destroy the channel manager
         channelManager.destroy();
         // Cleanup the message handler
@@ -181,11 +186,64 @@ export function createIFrameFrakClient({
     };
 }
 
+/**
+ * Setup the heartbeat
+ * @param messageHandler
+ * @param lifecycleManager
+ */
+function setupHeartbeat(
+    messageHandler: IFrameMessageHandler,
+    lifecycleManager: IframeLifecycleManager
+) {
+    const HEARTBEAT_INTERVAL = 1_000; // Send heartbeat every second
+    const HEARTBEAT_TIMEOUT = 30_000; // 30 seconds timeout
+    let heartbeatInterval: NodeJS.Timeout;
+    let timeoutId: NodeJS.Timeout;
+
+    function sendHeartbeat() {
+        messageHandler.sendEvent({
+            iframeLifecycle: "heartbeat",
+        });
+    }
+
+    // Start sending heartbeats
+    async function startHeartbeat() {
+        sendHeartbeat(); // Send initial heartbeat
+        heartbeatInterval = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL);
+
+        // Set up timeout
+        timeoutId = setTimeout(() => {
+            stopHeartbeat();
+            console.log("Heartbeat timeout: connection failed");
+        }, HEARTBEAT_TIMEOUT);
+
+        await lifecycleManager.isConnected;
+
+        // We are now connected, stop the heartbeat
+        stopHeartbeat();
+    }
+
+    // Stop sending heartbeats
+    function stopHeartbeat() {
+        if (heartbeatInterval) {
+            clearInterval(heartbeatInterval);
+        }
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+    }
+
+    startHeartbeat();
+
+    // Return cleanup function
+    return stopHeartbeat;
+}
+
 /**
  * Perform the post connection setup
  * @param config
- * @param lifecycleManager
  * @param messageHandler
+ * @param lifecycleManager
  */
 export async function postConnectionSetup({
     config,

diff --git a/sdk/core/src/types/lifecycle/iframe.ts b/sdk/core/src/types/lifecycle/iframe.ts
@@ -4,7 +4,7 @@
  */
 export type IFrameLifecycleEvent =
     | {
-          iframeLifecycle: "connected" | "show" | "hide";
+          iframeLifecycle: "connected" | "heartbeat" | "show" | "hide";
           data?: never;
       }
     | DoBackupEvent