QR modal doesn't open after being closed

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

[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()])
  }
}

[finessevanes]

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