[bug] Connecting with WalletConnect QR code does not work.

[mvaljento]

Link to minimal reproducible example

https://stackblitz.com/~/github.com/mvaljento/appkit-test

Summary

I'm attempting to create a very simple Angular-based dapp using Appkit to display the wallet selection modal and then doing a transfer transaction from the connected account to another account with a selected token.

My code works as expected with the MetaMask extension. However, when I try to use for example the Binance wallet app and connect it with the WalletConnect QR code, the wallet initially seems to connect and I can get for example the account details and the wallet info, but the wagmi status remains "disconnected" indefinitely with zero connections and any sendTransaction or writeContract call fails with the "ConnectorNotConnectedError: Connector not connected" error.

It maybe an issue with the wagmi configuration, or maybe I'm not doing something else correctly, but in that case I would expect the MetaMask extension not to work either. I also attempted to use a custom connector as described in the docs, but it did not make any difference, probably because "WC connectors are provided out of the box" and the connection does provide

https://docs.reown.com/appkit/javascript/core/custom-connectors

Wallet data received:

{
  "name": "Binance Wallet",
  "url": "https://www.binance.com/en/web3wallet",
  "icons": [
    "https://public.bnbstatic.com/20190405/eb2349c3-b2f8-4a93-a286-8f86a62ea9d8.png"
  ],
  "redirect": {
    "universal": "https://app.binance.com/cedefi",
    "linkMode": true,
    "native": "bnc://app.binance.com/cedefi"
  },
  "description": "Binance Wallet is a keyless, multi-chain and self-custody wallet.",
  "icon": "https://public.bnbstatic.com/20190405/eb2349c3-b2f8-4a93-a286-8f86a62ea9d8.png"
}

Account data received:

{
  "caipAddress": "eip155:56:0x81b998cc3Ee81De0dAFdC78215583b7D78Aca009",
  "address": "0x81b998cc3Ee81De0dAFdC78215583b7D78Aca009",
  "isConnected": true,
  "status": "connected"
}

Provider:

{
  "batch": {
    "multicall": true
  },
  "cacheTime": 4000,
  "chain": {
    "id": 56,
    "name": "BNB Smart Chain",
    "nativeCurrency": {
      "decimals": 18,
      "name": "BNB",
      "symbol": "BNB"
    },
    "rpcUrls": {
      "default": {
        "http": [
          "https://rpc.ankr.com/bsc"
        ]
      }
    },
    "blockExplorers": {
      "default": {
        "name": "BscScan",
        "url": "https://bscscan.com",
        "apiUrl": "https://api.bscscan.com/api"
      }
    },
    "contracts": {
      "multicall3": {
        "address": "0xca11bde05977b3631167028862be2a173976ca11",
        "blockCreated": 15921452
      }
    }
  },
  "key": "base",
  "name": "Base Client",
  "pollingInterval": 4000,
  "transport": {
    "key": "http",
    "name": "HTTP JSON-RPC",
    "retryCount": 3,
    "retryDelay": 150,
    "timeout": 10000,
    "type": "http",
    "url": "https://rpc.ankr.com/bsc"
  },
  "type": "base",
  "uid": "c80f5410e32"
}

Config:

{
  "chainId": 56,
  "connections": {},
  "current": "51975781985",
  "status": "disconnected"
}

I've attached screen captures of both MetaMask and mobile wallet (Binance) uses.

appkit-metamask.mov

appkit-qr-code.mov

List of related npm package versions

"@reown/appkit": "^1.6.2",
"@reown/appkit-adapter-ethers": "^1.6.2",
"@reown/appkit-adapter-wagmi": "^1.6.2",
"@reown/walletkit": "^1.1.2",
"viem": "^2.21.54",
"wagmi": "^2.13.3",
"web3": "^4.16.0",

Node.js Version

v22.8.0

Package Manager

yarn 1.22.19

[linear]

APKT-1842 [bug] Connecting with WalletConnect QR code does not work.

[mvaljento]

It seems to work if I call wagmi's "connect" method again after the first attempt. Maybe there's an issue with the connection handling when not using React hooks?