WalletConnect Providerで、接続をキャンセルした事をキャッチする

問題

WalletConnectでMetamaskを立ち上げ、Metamaskから接続をキャンセルした場合に、それ以降の処理が実行されなかった。

.ts

const provider = new WalletConnectProvider({.....省略});

// Modalを立ち上げて、Metamaskを開く
await provider.enable();
// Metamaskでキャンセルした場合、これ以降の処理が実行されない

エラーをキャッチできれば問題ないが、try catchやenable().catch()などを試しても、このエラーをキャッチ出来なかった。

解決方法

provider.wc.on('disconnect',()=>{})を使うことで接続のキャンセルを検知することが出来た。

.ts

provider.wc.on('disconnect', (error, payload) => {
  if (error) {
    throw error
  }
  console.log("Cancel")
})

具体的使い方

.ts

const provider = new WalletConnectProvider({.....省略});

provider.wc.on('disconnect', (error, payload) => {
  if (error) {
    throw error
  }
  console.log("Cancel")
  setLoading(false)
})

setLoading(true)
await provider.enable();
setLoading(false)

ボタンをクリックした時にボタンがローディング状態になるような場合に、provider.wc.on('disconnect',()=>{})を使わないと、永遠にローディング状態になってしまうが、使うことでローディングを終了することが出来る。

参考