rainbow-me / rainbowkit

The best way to connect a wallet 🌈 🧰
https://rainbowkit.com
MIT License
2.36k stars 617 forks source link

[bug] Metamask window is not opening after disconnect #2033

Open josadcha opened 4 weeks ago

josadcha commented 4 weeks ago

Is there an existing issue for this?

RainbowKit Version

2.1.1

wagmi Version

2.9.9

Current Behavior

After disconnecting from Metamask and doing an attempt to connect again, the Metamask window is not opened. Issue resolves after refreshing the page:

https://github.com/rainbow-me/rainbowkit/assets/39953699/6e6eda1f-44d6-4e6b-970f-308523fc02a2

Expected Behavior

After disconnecting from Metamask and trying to initiate the connection again, the Metamask is triggered to be connected.

Steps To Reproduce

  1. Connect to Metamask
  2. DIsconnect
  3. Try to connect to Metamask again

(Sometimes the issue appears on the 2nd attempt, sometimes on the 3rd.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

magiziz commented 4 weeks ago

@josadcha Looking into this now

REPTILEHAUS commented 4 weeks ago

+1 Im also getting this and with the same Wagmi / Rainbowkit versions

magiziz commented 3 weeks ago

I'm able to reproduce this as well. Reporting this to the wagmi team to see what's going on.

ducls-2223 commented 3 weeks ago

+1 I'm also getting this with Wagmi/Rainbowkit version "latest"

magiziz commented 3 weeks ago

Seems like this is a EIP-1193 and EIP-6963 issue. We should be deprecating EIP-1193 pretty soon and fix this. I'll keep this issue open meanwhile 👍

babkenmes commented 2 weeks ago

The problem is in disconnecting the wallet.

it becomes obvious after debugging packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx

  const connectToWallet = (wallet: WalletConnector) => {
    setConnectionError(false);
    if (wallet.ready) {
      wallet?.connect?.()?.catch(() => {
        setConnectionError(true);
      });
    }
  };

wallet.connect() throws ConnectorAlreadyConnectedError

The solution is to disconnect via direct connector. To achieve this you can utilize useAccount from wagmi.

const { connector } = useAccount()
const handleDisconnect = ()=>{
        connector && await connector.disconnect()
}
babkenmes commented 2 weeks ago

In case you need more context on the issue, please don't hesitate to let me know. You can debug packages/core/src/actions/connect.ts and in case of disconnecting directly from connecter config.state.current becomes undefined but if useDisconnect hook is used it remains and wagmi throws the error.

  // Check if connector is already connected
  if (connector.uid === config.state.current)
    throw new ConnectorAlreadyConnectedError()

So it is not EIP-1193 or EIP-6963 issue but wagmi useDisconnect hook issue

magiziz commented 2 weeks ago

@babkenmes We have metaMaskWallet EIP-1193 and EIP-6963 connector which shares the same window.ethereum instance, that's why it throws that error since it's marked as already "connected" from Wagmi.

Feel free to check out the wagmi issue here https://github.com/wevm/wagmi/issues/4027. The issue should be resolved once we deprecate the EIP-1193 connectors 👍

magiziz commented 2 weeks ago

Here is another EIP-1193 bug we've encountered https://github.com/wevm/wagmi/issues/3606. As i said all these EIP-1193 breaking behaviours should be resolved once we migrate fully over to EIP-6963.