rainbow-me/rainbowkit

[bug] Wallet connects to multiple connectors on local storage cleanup

Opened this issue · 3 comments

Is there an existing issue for this?

  • I have searched the existing issues

RainbowKit Version

2.1.3

wagmi Version

2.12.2

Current Behavior

We're trying to build a custom wallet connection UI using rainbowkit and we would like to display the icon of the currently connected wallet (we obtain the connector using the useAccount hook from wagmi, let me know if there's a better way), so if a user connects to our web app using Metamask, we would expect to always display the Metamask logo until they disconnect.

For users with multiple wallets installed in their browser, when they clean local storage (which would be the equivalent of entering the page for the first time) wallet connections are made without explicitly being requested by the user, said connections use different wallets as connectors on the wagmi.store local storage entry.

i.e.: the wallet address seen in the example pertains to Okx wallet, yet there are established connections for both Okx and Metamask, then the user needs to click on the disconnect button as many times as the amount of wallets stored in the wagmi.store local storage entry (in this particular case they need to disconnect 2 times). This would result in displaying the Metamask logo even though the wallet address belongs to the Okx wallet.

rainbowkit-report-1.mp4

Afterwards I started by following the same steps, disconnect from all connected connectors, successfully connected with Metamask and the wagmi.store local storage entry reflected the right state, only Metamask as a connector.
Yet I disconnected and refreshed the browser and found that the same Okx wallet address was now connected, but the listed connector was xdefi, which was a not an installed browser extension at the time of the recording.

rainbowkit-report-2-1.mp4

Expected Behavior

  • There are no unexpected or implicit wallet connections without user intervention.
  • Wallet connections should only be explicitly made by the user.
  • Connectors of uninstalled browser extensions are not available.

Steps To Reproduce

  • Have both MetaMask and Okx installed in your Chrome browser as browser extensions.
  • Open the provided preview.
  • Clean local storage.
  • 2 connections should've been created and should be present in wagmi.store.
  • Disconnect 2 times (one per connector).
  • Refresh browser.
  • A new connection to XDEFI should've been created.

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

https://stackblitz.com/edit/vitejs-vite-dr8buv

Anything else?

Is what I'm trying to do not viable/unreasonable? (Displaying the icon of the wallet that the user explicitly wanted to connect).
In the provided reproduction examples the wallet address is always the same, but attempting the same with other wallet combinations (Gate, Frontier, etc) results in multiple implicit connections but with valid wallet address - wallet connector mappings (i.e.: Frontier had its corresponding wallet address, the same for Gate, etc) so in that particular case, displaying the icon of the current connector does make sense, so that's why I'm wondering if there is a way to completely disable these automagic implicit connections, I attempted using multiInjectedProviderDiscovery: false in the wagmi createConfig configuration but the same keeps happening.
I would appreciate your insights and comments, thanks in advance!

@hernan-clich Thanks for raising this issue. This is a Wagmi bug and we're going to work on deprecating EIP-1193 connectors.

For now i would suggest to not include a lot of wallets simply just because it's best that you use the EIP-6963 wallets, which are the wallets that shows in your "Installed" section.

Something like this would be ideal:

import '@rainbow-me/rainbowkit/styles.css';

import { getDefaultWallets } from '@rainbow-me/rainbowkit';
import { createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';

const appName = 'My RainbowKit App';
const projectId = 'YOUR_PROJECT_ID';

const { connectors } = getDefaultWallets({ appName, projectId });

const config = createConfig({
  connectors,
  ccipRead: false,
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
});

Got it, thanks for your prompt response. As far as I'm concerned you can close the issue, however you might as well leave it open to keep track of its progress, your call!

@hernan-clich Yeah i'll keep this issue open.