From 19bf4b45820390ef241943caee44dcfe487bac53 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Wed, 8 Jan 2025 23:38:41 +0530
Subject: [PATCH] fix: close popup when tab navigates during connect (#807)

---
 src/background/services/background.ts   | 4 ++++
 src/background/services/events.ts       | 1 +
 src/background/services/openPayments.ts | 5 +++++
 src/background/services/sendToPopup.ts  | 6 ------
 src/pages/popup/lib/context.tsx         | 2 ++
 src/shared/messages.ts                  | 1 +
 tests/e2e/pages/popup.ts                | 4 ++++
 7 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/background/services/background.ts b/src/background/services/background.ts
index 9b716a06..722d2869 100644
--- a/src/background/services/background.ts
+++ b/src/background/services/background.ts
@@ -332,6 +332,10 @@ export class Background {
       this.sendToPopup.send('SET_TRANSIENT_STATE', state);
     });
 
+    this.events.on('connect_wallet.close_popup', () => {
+      this.sendToPopup.send('CLOSE_POPUP', undefined);
+    });
+
     this.events.on('storage.balance_update', (balance) =>
       this.sendToPopup.send('SET_BALANCE', balance),
     );
diff --git a/src/background/services/events.ts b/src/background/services/events.ts
index 9221c737..c4592bc2 100644
--- a/src/background/services/events.ts
+++ b/src/background/services/events.ts
@@ -10,6 +10,7 @@ interface BackgroundEvents {
   'open_payments.key_revoked': void;
   'open_payments.out_of_funds': void;
   'open_payments.invalid_receiver': { tabId: number };
+  'connect_wallet.close_popup': void;
   'storage.rate_of_pay_update': { rate: string };
   'storage.state_update': {
     state: Storage['state'];
diff --git a/src/background/services/openPayments.ts b/src/background/services/openPayments.ts
index e9af76c9..f783987a 100644
--- a/src/background/services/openPayments.ts
+++ b/src/background/services/openPayments.ts
@@ -139,6 +139,7 @@ const enum InteractionIntent {
 export class OpenPaymentsService {
   private browser: Cradle['browser'];
   private storage: Cradle['storage'];
+  private events: Cradle['events'];
   private deduplicator: Cradle['deduplicator'];
   private logger: Cradle['logger'];
   private appName: Cradle['appName'];
@@ -157,6 +158,7 @@ export class OpenPaymentsService {
   constructor({
     browser,
     storage,
+    events,
     deduplicator,
     logger,
     t,
@@ -166,6 +168,7 @@ export class OpenPaymentsService {
     Object.assign(this, {
       browser,
       storage,
+      events,
       deduplicator,
       logger,
       t,
@@ -553,6 +556,7 @@ export class OpenPaymentsService {
       throw err;
     });
 
+    this.events.emit('connect_wallet.close_popup');
     const { interactRef, hash, tabId } = await this.getInteractionInfo(
       grant.interact.redirect,
       existingTabId,
@@ -651,6 +655,7 @@ export class OpenPaymentsService {
       browserName: this.browserName,
       t: this.t,
     });
+    this.events.emit('connect_wallet.close_popup');
     try {
       await keyAutoAdd.addPublicKeyToWallet(walletAddress, existingTabId);
       return keyAutoAdd.tabId;
diff --git a/src/background/services/sendToPopup.ts b/src/background/services/sendToPopup.ts
index 22a702d9..863182ea 100644
--- a/src/background/services/sendToPopup.ts
+++ b/src/background/services/sendToPopup.ts
@@ -11,7 +11,6 @@ export class SendToPopup {
 
   private isConnected = false;
   private port: Runtime.Port;
-  private queue = new Map<keyof BackgroundToPopupMessagesMap, any>();
 
   constructor({ browser }: Cradle) {
     Object.assign(this, { browser });
@@ -25,10 +24,6 @@ export class SendToPopup {
       }
       this.port = port;
       this.isConnected = true;
-      for (const [type, data] of this.queue) {
-        this.send(type, data);
-        this.queue.delete(type);
-      }
       port.onDisconnect.addListener(() => {
         this.isConnected = false;
       });
@@ -44,7 +39,6 @@ export class SendToPopup {
     data: BackgroundToPopupMessagesMap[T],
   ) {
     if (!this.isConnected) {
-      this.queue.set(type, data);
       return;
     }
     const message = { type, data } as BackgroundToPopupMessage;
diff --git a/src/pages/popup/lib/context.tsx b/src/pages/popup/lib/context.tsx
index 784437ec..be4ae10d 100644
--- a/src/pages/popup/lib/context.tsx
+++ b/src/pages/popup/lib/context.tsx
@@ -55,6 +55,8 @@ export const MessageContextProvider = ({
         case 'SET_TAB_DATA':
         case 'SET_TRANSIENT_STATE':
           return dispatch(message);
+        case 'CLOSE_POPUP':
+          return window.close();
       }
     });
     port.onDisconnect.addListener(() => {
diff --git a/src/shared/messages.ts b/src/shared/messages.ts
index 242703f5..b9d64ffc 100644
--- a/src/shared/messages.ts
+++ b/src/shared/messages.ts
@@ -272,6 +272,7 @@ export interface BackgroundToPopupMessagesMap {
   SET_TAB_DATA: PopupState['tab'];
   SET_STATE: { state: Storage['state']; prevState: Storage['state'] };
   SET_TRANSIENT_STATE: PopupTransientState;
+  CLOSE_POPUP: void;
 }
 
 export type BackgroundToPopupMessage = {
diff --git a/tests/e2e/pages/popup.ts b/tests/e2e/pages/popup.ts
index aceae56d..b9fd521e 100644
--- a/tests/e2e/pages/popup.ts
+++ b/tests/e2e/pages/popup.ts
@@ -24,6 +24,10 @@ export async function openPopup(
     await popup.reload({ waitUntil: 'networkidle' });
     await popup.waitForSelector('#main', { timeout: 500 });
   }
+
+  // prevent popup from closing via `window.close()`
+  popup.exposeFunction('close', () => {});
+
   return popup;
 }