QR modal doesn't open after being closed

[MrPeanutz]

trafficstars

How to reproduce:

Lib: @walletconnect/web3-provider Version: 1.4.1

1. call await wcProvider.enable()
2. modal opens
3. click the x button on top right corner
4. modal closes
5. call await wcProvider.enable() again
6. nothing happens

[JOU-amjs]

I have the same problem...

[lanchana]

+1

[JohnathanWhite]

+1

[Noisyfox]

Same as #243

[pauloreis7]

+1

[0x62]

I'm working around this in the @walletconnect/client and @walletconnect/qrcode-modal libraries. This is a pretty horrible hack, but works for now.

It promisifies the connect call, and after the first call it invokes the open method on the underlying modal forcing it to be opened every time. To track closing it uses a MutationObserver and resolves with the users address.

import WalletConnect from '@walletconnect/client'
import QRCodeModal from '@walletconnect/qrcode-modal'

export default class WalletConnectProvider {
  constructor() {
    this.name = 'WalletConnect'
    this.provider = new WalletConnect({
      bridge: 'https://bridge.walletconnect.org',
      qrcodeModal: QRCodeModal,
    })

    this._forceOpen = false
  }

  getAddress() {
    const [account] = this.provider.accounts
    return account
  }

  async connect() {
    return new Promise(async (r, j) => {
      let setForceOpen = false
      if (!this.provider.connected) {
        await this.provider.createSession()
        setForceOpen = true
      }

      // https://github.com/NoahZinsmeister/web3-react/issues/376
      if (this._forceOpen) {
        // Modal has already been opened once, force it to open
        this.provider._qrcodeModal.open(this.provider.uri, this.provider._qrcodeModalOptions)
      } else if (setForceOpen) {
        // Modal opened for the first time, force on future attempts
        this._forceOpen = true
      }

      const ob = new MutationObserver(([event]) => {
        // Check if the wallet connect wrapper was removed
        const removed = [...event.removedNodes].find(el => el.id === 'walletconnect-wrapper')
        if (!removed) return
        ob.disconnect() // kill observer
        return this.provider.connected ? r(this.getAddress()) : j()
      })
      ob.observe(document.querySelector('body'), { childList: true })
    })
  }

  async sign(message) {
    const encodedMessage = new TextEncoder().encode(message)
    return this.provider.signPersonalMessage([encodedMessage, this.getAddress()])
  }
}

[avivash]

I came up with a workaround using @walletconnect/web3-provider, hope it helps for now https://github.com/WalletConnect/walletconnect-monorepo/issues/747#issuecomment-1137952645

[finessevanes]

@MrPeanutz @JOU-amjs @lanchana @JohnathanWhite @Noisyfox is this still an issue?

[TetianaMolchanova]

const isRequestActive: Ref<UnwrapRef> = ref(false); if (isRequestActive.value) { console.warn("NEW A request is already active. Please wait."); return; }

console.log('if AFTER', );

try {
    // Example: Requesting account access
    const accounts = await (window.ethereum as any)?.request({ method: 'eth_requestAccounts' }).then((account) => console.log('account', account)).catch((error: unknown) => console.error('error', error)).finally(() => console.log('finally', ));
    // Proceed with additional actions like showing balance, switching chains, etc.
    console.log('NEW accounts', accounts);
    isRequestActive.value = true;
} catch (error) {
    console.error("NEW Error interacting with MetaMask:", error);
    // Handle error appropriately
    isRequestActive.value = false;
} finally {
    console.log('NEW finally isRequestActive.value', isRequestActive.value);
    isRequestActive.value = false;
}
console.log('metaMaskCall end', );

For catching error here the magic is done in this line of code above: 

const accounts = await (window.ethereum as any)?.request({ method: 'eth_requestAccounts' }).then((account) => console.log('account', account)).catch((error: unknown) => console.error('error', error)).finally(() => console.log('finally', ));

We caught this error in .catch method of request.

this code is for Vue 3 with typescript