diff --git a/.changeset/warm-cooks-cover.md b/.changeset/warm-cooks-cover.md new file mode 100644 index 0000000000..bcaf008cd4 --- /dev/null +++ b/.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) diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx b/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx index 4d12cb74bc..63f4ab6a8f 100644 --- a/packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx +++ b/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(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( diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/walletConnectConnectionStatus.ts b/packages/rainbowkit/src/components/RainbowKitProvider/walletConnectConnectionStatus.ts new file mode 100644 index 0000000000..9de612497a --- /dev/null +++ b/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); +} diff --git a/packages/rainbowkit/src/components/WalletButton/WalletButtonRenderer.tsx b/packages/rainbowkit/src/components/WalletButton/WalletButtonRenderer.tsx index a127af839a..85ed627566 100644 --- a/packages/rainbowkit/src/components/WalletButton/WalletButtonRenderer.tsx +++ b/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. diff --git a/packages/rainbowkit/src/wallets/getWalletConnectConnector.ts b/packages/rainbowkit/src/wallets/getWalletConnectConnector.ts index ccf29ab367..b139fb7e51 100644 --- a/packages/rainbowkit/src/wallets/getWalletConnectConnector.ts +++ b/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' ); }