What causes "URI missing" error in hashconnect, when invoking `hashconnect.openPairingModal()`?

Attempting to connect my DApp to Hashpack, using hashconnect, however, the pairing never seems to trigger. When I call the connectWallet function in wallet-hashpack.js, I expect this to happen, but instead I get some console output indicating something awry (copied below)

Specifically:

The log message Pairing string created: undefined testnet seems to be off - what should the undefined be here?
Then the error for URI Missing happens. What URI is this referring to?

hashconnect.js:1 hashconnect - Pairing string created: undefined testnet

hashconnect.js:1 hashconnect - URI Missing
(anonymous) @ hashconnect.js:1
_0x395637 @ hashconnect.js:1
(anonymous) @ hashconnect.js:1
(anonymous) @ hashconnect.js:1
hashconnect_awaiter @ hashconnect.js:1
_0x4214d1.<computed>.openPairingModal @ hashconnect.js:1
connectWallet @ wallet-hashpack.js:52
setUpUi @ dapp.js:54

wallet-hashpack.js:46 connectionStatusChangeEvent Connected

hashconnect.js:1 hashconnect - Initialized

hashconnect.js:1 hashconnect - connecting

hashconnect.js:1 hashconnect - Generating pairing string

Here's the full code for wallet-hashpack.js, which is based on following along the video from the official tutorial.

import {
  AccountId,
  LedgerId,
} from '@hashgraph/sdk';
import {
  HashConnect,
} from 'hashconnect';

const walletConnectProjectId = '74463bad237813f44dd5bc362c74bbf8';
const appMetadata = {
  name: 'HCS Skills',
  description: 'HCS Skills',
  url: 'http://localhost:3113',
  icons: ['https://blog.bguiz.com/images/favicon.png'],
}

let hashconnect;
let state;
let pairingData;

async function init() {
  hashconnect = new HashConnect(
    LedgerId.TESTNET,
    walletConnectProjectId,
    appMetadata,
    true, // debug mode on
  );

  registerEvents();

  await hashconnect.init();
}

async function registerEvents() {
  hashconnect.pairingEvent.on((newPairing) => {
    console.log('pairingEvent', newPairing);
    pairingData = newPairing;
  });
  hashconnect.disconnectionEvent.on(() => {
    console.log('disconnectionEvent');
    pairingData = null;
  });
  hashconnect.connectionStatusChangeEvent.on((newState) => {
    console.log('connectionStatusChangeEvent', newState);
    state = newState;
  });
}

async function connectWallet() {
  await hashconnect.openPairingModal();
}

async function disconnectWallet() {
  await hashconnect.disconnect();
  pairingData = null;
}

async function submitTransactionWallet(tx) {
  const currentAccount = pairingData.accountIds[0];
  const accountId = AccountId.fromString(currentAccount);
  let result;
  try {
    result = await hashconnect.sendTransaction(accountId, tx);
  } catch (error) {
    console.error(error);
  }
  return { result, error };
}

init();

export {
  connectWallet,
  disconnectWallet,
  submitTransactionWallet,
};

Solution

The underlying cause seem to be invoking hashconnect.openPairingModal() before the Hashpack wallet browser extension had finished its own initialisation.

Adding a delay appears to fix it:

setTimeout(hashConnect.openPairingModal, 500);

Details.

Now the console output looks like this instead:

wallet-hashpack.js:50 connectionStatusChangeEvent ConnectedconnectionStatusChangeEvent Connected

hashconnect.js:1 hashconnect - Initialized

hashconnect.js:1 hashconnect - connecting

hashconnect.js:1 hashconnect - Generating pairing string

... and subsequently, upon "approving" the connection request in the Hashpack browser extension, the following is output:

hashconnect.js:1 hashconnect - Pairing string created: wc:fakefake4ecefa271490d104213b9c607e1f8a519ce8967fdd776ab0ce5949b7@2?expiryTimestamp=1713162326&relay-protocol=irn&symKey=fakefakeda37cb5d79e1bfce30e1b04b3befe1c59e53c2dcf3879c67407fd31 testnet

hashconnect.js:1 hashconnect - Connecting to iframe parent wallet

hashconnect.js:1 hashconnect - Finding local wallets

wallet-hashpack.js:58 undefined

hashconnect.js:1 hashconnect - Local wallet metadata recieved {type: 'hashconnect-query-extension-response', metadata: {…}}

hashconnect.js:1 hashconnect - Connecting to local wallet

hashconnect.js:1 hashconnect - Approval received {topic: 'fakefakeabd8500f171a144d92a03279daa30c079d4a72506db6aa49f9d67c77', relay: {…}, expiry: 1713766844, namespaces: {…}, acknowledged: true, …}

wallet-hashpack.js:50 connectionStatusChangeEvent Paired

wallet-hashpack.js:42 pairingEvent {metadata: {…}, accountIds: Array(1), network: 'testnet'}