connector.signPersonalMessage redirects to the AppStore instead of MetaMask app

[joharzmn]

Problem: After successful connection with metamask wallet. When calling this function connector.signPersonalMessage it's redirecting to AppStore instead of to MetaMask app.

Demo of Issue: Go to this link on your iphone device and click on connect and see the behaviour for signPersonalMessage https://angular-13-template-grgl21.stackblitz.io/ To Edit files: https://stackblitz.com/edit/angular-13-template-grgl21

Versions (Tried Both Versions with same results):

"@walletconnect/client": "^1.7.1",
"@walletconnect/qrcode-modal": "^1.7.1"
or 
"@walletconnect/client": "^1.7.7",
"@walletconnect/qrcode-modal": "^1.7.7"

Code:

const connector = new WalletConnect({
      bridge: "https://bridge.walletconnect.org",
      qrcodeModal: QRCodeModal,
    });


    // Check if connection is already established
    if (!connector.connected) {
      // create new session
      connector.createSession();
    }

    // Subscribe to connection events
    connector.on("connect", (error, payload) => {
      if (error) {
        throw error;
      }

      // Get provided accounts and chainId
      const { accounts, chainId } = payload.params[0];

      console.log(accounts);

      debugger;

      return this.http.post<NonceResponse>(
        '.....cloudfunctions.net/getNonceToSign',
        {
          address: accounts[0],
        }
      ).toPromise().then(response => {
        const msgParams = [
          accounts[0],
          `0x${this.toHex(response.nonce)}` // Required
        ];


        // Sign message
        connector
          .signPersonalMessage(msgParams)
          .then((sig) => {
            // Returns signature.
            console.log(sig);

            this.http.post<VerifyResponse>(
              '....cloudfunctions.net/verifySignedMessage',
              { address: accounts[0], signature: sig }
            ).toPromise().then(async (response) => {
              await this.auth.signInWithCustomToken(response.token).then((data) => {
                Promise.resolve(data);
              });
            });
          })
          .catch(error => {
            // Error returned when rejected
            console.error(error);
          });
      });


    });

[joharzmn]

**Note: ** Also tried using js files from release. Same Issue

[joharzmn]

@pedrouid Hey, can you look into this issue? Really appreciate it.

[whosnorman]

hitting roughly the same issue where I'm getting an unwanted new tab redirect (to Rainbow) after calling connector.signPersonalMessage. Is there a way to disable connector.signPersonalMessage trying to redirect?

[finessevanes]

@joharzmn @whosnorman is this still an issue?