Expose hook to indicate if WalletConnect modal is open

[vpontis]

Hi, we are building RainbowKit into lu.ma and want to hide our onboarding modal when the WalletConnect Modal is open. Is there a way that RainbowKit can expose if the WalletConnect modal is currently open?

[vpontis]

Maybe you could do something like this to keep track of if the modal is open. I'm not sure where is the best place to keep track if the modal has closed and to update the state if so.

diff --git a/packages/rainbowkit/src/wallets/useWalletConnectors.ts b/packages/rainbowkit/src/wallets/useWalletConnectors.ts
index fa12af79..ab5c819b 100644
--- a/packages/rainbowkit/src/wallets/useWalletConnectors.ts
+++ b/packages/rainbowkit/src/wallets/useWalletConnectors.ts
@@ -1,11 +1,11 @@
-import { Config, Connector, useConnect } from 'wagmi';
-import { ConnectMutateAsync } from 'wagmi/query';
-import { indexBy } from '../utils/indexBy';
+import {Config, Connector, useConnect} from 'wagmi';
+import {ConnectMutateAsync} from 'wagmi/query';
+import {indexBy} from '../utils/indexBy';
 import {
   useInitialChainId,
   useRainbowKitChains,
 } from './../components/RainbowKitProvider/RainbowKitChainContext';
-import { WagmiConnectorInstance, WalletInstance } from './Wallet';
+import {WagmiConnectorInstance, WalletInstance} from './Wallet';
 import {
   getDesktopDownloadUrl,
   getExtensionDownloadUrl,
@@ -18,12 +18,14 @@ import {
   isRecentWallet,
   rainbowKitConnectorWithWalletConnect,
 } from './groupedWallets';
-import { addRecentWalletId, getRecentWalletIds } from './recentWalletIds';
+import {addRecentWalletId, getRecentWalletIds} from './recentWalletIds';
+import {useState} from "react";
 
 export interface WalletConnector extends WalletInstance {
   ready?: boolean;
   connect: () => ReturnType<ConnectMutateAsync<Config, unknown>>;
   showWalletConnectModal?: () => void;
+  isWalletConnectModalOpen: boolean;
   recent: boolean;
   mobileDownloadUrl?: string;
   extensionDownloadUrl?: string;
@@ -38,9 +40,10 @@ export function useWalletConnectors(
 ): WalletConnector[] {
   const rainbowKitChains = useRainbowKitChains();
   const intialChainId = useInitialChainId();
-  const { connectAsync, connectors: defaultConnectors_untyped } = useConnect();
+  const {connectAsync, connectors: defaultConnectors_untyped} = useConnect();
   const defaultCreatedConnectors =
     defaultConnectors_untyped as WagmiConnectorInstance[];
+  const [isWalletConnectModalOpen, setWalletConnectModalOpen] = useState(false);
 
   const defaultConnectors = defaultCreatedConnectors.map((connector) => ({
     ...connector,
@@ -54,11 +57,11 @@ export function useWalletConnectors(
     const walletChainId = await connector.getChainId();
     const result = await connectAsync({
       chainId:
-        // The goal here is to ensure users are always on a supported chain when connecting.
-        // If an `initialChain` prop was provided to RainbowKitProvider, use that.
+      // The goal here is to ensure users are always on a supported chain when connecting.
+      // If an `initialChain` prop was provided to RainbowKitProvider, use that.
         intialChainId ??
         // Otherwise, if the wallet is already on a supported chain, use that to avoid a chain switch prompt.
-        rainbowKitChains.find(({ id }) => id === walletChainId)?.id ??
+        rainbowKitChains.find(({id}) => id === walletChainId)?.id ??
         // Finally, fall back to the first chain provided to RainbowKitProvider.
         rainbowKitChains[0]?.id,
       connector,
@@ -174,6 +177,7 @@ export function useWalletConnectors(
     if (eip6963) {
       walletConnectors.push({
         ...wallet,
+        isWalletConnectModalOpen,
         iconUrl: wallet.icon!,
         ready: true,
         connect: () => connectWallet(wallet),
@@ -186,6 +190,7 @@ export function useWalletConnectors(
 
     walletConnectors.push({
       ...wallet,
+      isWalletConnectModalOpen,
       ready: wallet.installed ?? true,
       connect: () => connectWallet(wallet),
       desktopDownloadUrl: getDesktopDownloadUrl(wallet),
@@ -203,7 +208,10 @@ export function useWalletConnectors(
         : undefined,
       recent,
       showWalletConnectModal: wallet.walletConnectModalConnector
-        ? () => connectToWalletConnectModal(wallet.walletConnectModalConnector!)
+        ? () => {
+          setWalletConnectModalOpen(true)
+          connectToWalletConnectModal(wallet.walletConnectModalConnector!)
+        }
         : undefined,
     });
   }

[magiziz]

@vpontis Just opened a PR for this: #1828