fix: avoid creating a new WC connector on page reload (when already connected)

.changeset/warm-cooks-cover.md

@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+fix: avoid creating a new WC connector on page reload (when already connected to WC)

packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx

@@ -31,6 +31,7 @@ import { WalletButtonProvider } from './WalletButtonContext';
 import { useFingerprint } from './useFingerprint';
 import { usePreloadImages } from './usePreloadImages';
 import { clearWalletConnectDeepLink } from './walletConnectDeepLink';
+import { clearWalletConnectConnected } from './walletConnectConnectionStatus';
 
 const ThemeIdContext = createContext<string | undefined>(undefined);
 
@@ -92,7 +93,12 @@ export function RainbowKitProvider({
   usePreloadImages();
   useFingerprint();
 
-  useAccountEffect({ onDisconnect: clearWalletConnectDeepLink });
+  const onDisconnect = () => {
+    clearWalletConnectDeepLink();
+    clearWalletConnectConnected();
+  };
+
+  useAccountEffect({ onDisconnect });
 
   if (typeof theme === 'function') {
     throw new Error(

packages/rainbowkit/src/components/RainbowKitProvider/walletConnectConnectionStatus.ts

@@ -0,0 +1,19 @@
+const storageKey = 'rk-WalletConnect-connected';
+
+function isLocalStorageAvailable() {
+  return typeof localStorage !== 'undefined';
+}
+
+export function setWalletConnectConnected() {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.setItem(storageKey, 'true');
+}
+
+export function isWalletConnectConnected(): boolean {
+  if (!isLocalStorageAvailable()) return false;
+  return localStorage.getItem(storageKey) === 'true';
+}
+
+export function clearWalletConnectConnected() {
+  localStorage.removeItem(storageKey);
+}

packages/rainbowkit/src/components/WalletButton/WalletButtonRenderer.tsx

@@ -23,6 +23,7 @@ import {
   useModalState,
 } from '../RainbowKitProvider/ModalContext';
 import { WalletButtonContext } from '../RainbowKitProvider/WalletButtonContext';
+import { setWalletConnectConnected } from '../RainbowKitProvider/walletConnectConnectionStatus';
 
 export interface WalletButtonRendererProps {
   wallet?: string;
@@ -75,6 +76,7 @@ export function WalletButtonRenderer({
 
   useAccountEffect({
     onConnect: () => {
+      setWalletConnectConnected();
       // If you get error on desktop and then switch to mobile view
       // and connect your wallet the error will remain there. We will
       // reset the error in case that happens.

packages/rainbowkit/src/wallets/getWalletConnectConnector.ts

@@ -7,6 +7,7 @@ import type {
   RainbowKitWalletConnectParameters,
   WalletDetailsParams,
 } from './Wallet';
+import { isWalletConnectConnected } from '../components/RainbowKitProvider/walletConnectConnectionStatus';
 
 interface GetWalletConnectConnectorParams {
   projectId: string;
@@ -45,7 +46,7 @@ const getOrCreateWalletConnectInstance = ({
   };
 
   // `rkDetailsShowQrModal` should always be `true`
-  if (rkDetailsShowQrModal) {
+  if (rkDetailsShowQrModal || isWalletConnectConnected()) {
     config = { ...config, showQrModal: true };
   }
 
@@ -72,7 +73,7 @@ function createWalletConnectConnector({
   walletConnectParameters,
 }: CreateWalletConnectConnectorParams): CreateConnectorFn {
   // Create and configure the WalletConnect connector with project ID and options.
-  return createConnector((config) => ({
+  return createConnector(config => ({
     ...getOrCreateWalletConnectInstance({
       projectId,
       walletConnectParameters,
@@ -96,7 +97,7 @@ export function getWalletConnectConnector({
 
   if (!projectId || projectId === '') {
     throw new Error(
-      'No projectId found. Every dApp must now provide a WalletConnect Cloud projectId to enable WalletConnect v2 https://www.rainbowkit.com/docs/installation#configure',
+      'No projectId found. Every dApp must now provide a WalletConnect Cloud projectId to enable WalletConnect v2 https://www.rainbowkit.com/docs/installation#configure'
     );
   }