Fix popup blocked on Safari

packages/wallet-sdk/src/core/communicator/Communicator.test.ts

@@ -60,7 +60,6 @@ describe('Communicator', () => {
   it('should open a popup window', async () => {
     queueMessageEvent(popupLoadedMessage);
 
-    // @ts-expect-error accessing private method
     await communicator.waitForPopupLoaded();
 
     expect(openPopup).toHaveBeenCalledWith(new URL(CB_KEYS_URL));

packages/wallet-sdk/src/core/communicator/Communicator.ts

@@ -79,7 +79,7 @@ export class Communicator {
   /**
    * Waits for the popup window to fully load and then sends a version message.
    */
-  private waitForPopupLoaded = async (): Promise<Window> => {
+  waitForPopupLoaded = async (): Promise<Window> => {
     if (this.popup) return this.popup;
 
     this.popup = openPopup(this.url);

packages/wallet-sdk/src/sign/scw/SCWSigner.ts

@@ -1,6 +1,7 @@
 import { StateUpdateListener } from '../interface';
 import { SCWKeyManager } from './SCWKeyManager';
 import { SCWStateManager } from './SCWStateManager';
+import { Communicator } from ':core/communicator/Communicator';
 import { standardErrors } from ':core/error';
 import { RPCRequestMessage, RPCResponse, RPCResponseMessage } from ':core/message';
 import { AppMetadata, RequestArguments, Signer } from ':core/provider/interface';
@@ -22,17 +23,17 @@ type SwitchEthereumChainParam = [
 
 export class SCWSigner implements Signer {
   private readonly metadata: AppMetadata;
-  private readonly postMessageToPopup: (_: RPCRequestMessage) => Promise<RPCResponseMessage>;
+  private readonly communicator: Communicator;
   private readonly keyManager: SCWKeyManager;
   private readonly stateManager: SCWStateManager;
 
   constructor(params: {
     metadata: AppMetadata;
-    postMessageToPopup: (_: RPCRequestMessage) => Promise<RPCResponseMessage>;
+    communicator: Communicator;
     updateListener: StateUpdateListener;
   }) {
     this.metadata = params.metadata;
-    this.postMessageToPopup = params.postMessageToPopup;
+    this.communicator = params.communicator;
     this.keyManager = new SCWKeyManager();
     this.stateManager = new SCWStateManager({
       appChainIds: this.metadata.appChainIds,
@@ -52,7 +53,9 @@ export class SCWSigner implements Signer {
         params: this.metadata,
       },
     });
-    const response: RPCResponseMessage = await this.postMessageToPopup(handshakeMessage);
+    const response: RPCResponseMessage = await this.communicator.postRequestAndWaitForResponse(
+      handshakeMessage
+    );
 
     // store peer's public key
     if ('failure' in response.content) throw response.content.failure;
@@ -75,6 +78,10 @@ export class SCWSigner implements Signer {
       return localResult;
     }
 
+    // Open the popup before constructing the request message.
+    // This is to ensure that the popup is not blocked by some browsers (i.e. Safari)
+    await this.communicator.waitForPopupLoaded();
+
     const response = await this.sendEncryptedRequest(request);
     const decrypted = await this.decryptResponseMessage<T>(response);
     this.updateInternalState(request, decrypted);
@@ -135,7 +142,7 @@ export class SCWSigner implements Signer {
     );
     const message = await this.createRequestMessage({ encrypted });
 
-    return this.postMessageToPopup(message);
+    return this.communicator.postRequestAndWaitForResponse(message);
   }
 
   private async createRequestMessage(

packages/wallet-sdk/src/sign/util.ts

@@ -48,7 +48,7 @@ export function createSigner(params: {
       return new SCWSigner({
         metadata,
         updateListener,
-        postMessageToPopup: communicator.postRequestAndWaitForResponse,
+        communicator,
       });
     case 'walletlink':
       return new WalletLinkSigner({