fix: empty state in connect modal with <WalletButton> (#1844)

* chore: wallet button eip-1193 mix fix and doc update

* fix: remove console.log

* chore: add docs

* chore: tweak docs

* chore: tweak changeset

* chore: lint fix

---------

Co-authored-by: Magomed Khamidov <53529533+KosmosKey@users.noreply.github.com>
Co-authored-by: Daniel Sinclair <d@niel.nyc>

.changeset/shaggy-flowers-sort.md

@@ -0,0 +1,6 @@
+---
+"@rainbow-me/rainbowkit": patch
+"site": patch
+---
+
+Resolved an issue where the Connect Modal wallet list would appear empty for EIP-6963 connectors when using the `WalletButton` component

packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx

@@ -76,7 +76,12 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
 
   const { connector } = useContext(WalletButtonContext);
 
-  const mergeEIP6963WithRkConnectors = true;
+  // The `WalletButton` component made the connect modal appear empty when trying to connect.
+  // This happened because of a mix up between EIP-6963 and RainbowKit connectors.
+  // The problem was finding the correct `wallet.id`. `WalletButton` uses RainbowKit's id,
+  // but EIP-6963 uses `rdns` for its id. We now don't merge EIP-6963 and RainbowKit
+  // connectors if user interacts with `WalletButton` component.
+  const mergeEIP6963WithRkConnectors = !connector;
 
   const wallets = useWalletConnectors(mergeEIP6963WithRkConnectors)
     .filter((wallet) => wallet.ready || !!wallet.extensionDownloadUrl)

site/data/en-US/docs/wallet-button.mdx

@@ -5,6 +5,8 @@ description: Using and customizing the WalletButton
 
 # WalletButton
 
+> Note: The `WalletButton` currently relies on the EIP-1193 wallet standard, but will support EIP-6963 in the near future.
+
 The new `WalletButton` component helps dApps with custom wallet list implementations adopt RainbowKit and all of it's maintenance-free benefits.
 
 ```tsx