refactor: walletconnect prefetch

.github/workflows/ci.yml

@@ -36,5 +36,7 @@ jobs:
         run: pnpm build
       - name: Lint and format
         run: pnpm lint
+      - name: Install playwright browser
+        run: pnpm exec playwright install
       - name: Run tests
         run: pnpm test && pnpm test:cli

package.json

@@ -55,6 +55,7 @@
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.5",
     "@vanilla-extract/vite-plugin": "^4.0.9",
+    "@vitest/browser": "2.0.4",
     "autoprefixer": "^10.4.16",
     "dotenv": "^16.4.5",
     "esbuild": "^0.20.2",
@@ -65,6 +66,7 @@
     "lokijs": "^1.5.12",
     "next": "^14.2.3",
     "next-auth": "4.24.5",
+    "playwright": "1.45.3",
     "postcss": "^8.4.32",
     "postcss-prefix-selector": "^1.16.0",
     "react": "^18.3.0",

packages/rainbowkit/package.json

@@ -62,7 +62,9 @@
     "postcss": "^8.4.32",
     "react": "^18.3.0",
     "vitest": "2.0.4",
-    "dotenv": "^16.4.5"
+    "dotenv": "^16.4.5",
+    "@vitest/browser": "2.0.4",
+    "playwright": "1.45.3"
   },
   "dependencies": {
     "@vanilla-extract/css": "1.14.0",

packages/rainbowkit/src/components/ConnectModal/ConnectModal.tsx

@@ -4,6 +4,7 @@ import { useConnectionStatus } from '../../hooks/useConnectionStatus';
 import ConnectOptions from '../ConnectOptions/ConnectOptions';
 import { Dialog } from '../Dialog/Dialog';
 import { DialogContent } from '../Dialog/DialogContent';
+import { useWalletConnectStore } from '../RainbowKitProvider/WalletConnectStoreProvider';
 import { SignIn } from '../SignIn/SignIn';
 
 export interface ConnectModalProps {
@@ -15,9 +16,10 @@ export function ConnectModal({ onClose, open }: ConnectModalProps) {
   const titleId = 'rk_connect_title';
   const connectionStatus = useConnectionStatus();
 
+  const { resetWalletConnectUri } = useWalletConnectStore();
+
   const { disconnect } = useDisconnect();
   const { isConnecting } = useAccount();
-
   // when a user cancels or dismisses the SignIn modal for SIWE, disconnect and call onClose
   const onAuthCancel = React.useCallback(() => {
     onClose();
@@ -29,9 +31,9 @@ export function ConnectModal({ onClose, open }: ConnectModalProps) {
     // the user closes it, we need to know the wallet isn't connecting anymore.
     // So if it's connecting, we disconnect it.
     if (isConnecting) disconnect();
-
+    resetWalletConnectUri();
     onClose();
-  }, [onClose, disconnect, isConnecting]);
+  }, [onClose, disconnect, resetWalletConnectUri, isConnecting]);
 
   if (connectionStatus === 'disconnected') {
     return (

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

@@ -5,6 +5,7 @@ import { BrowserType, getBrowser, isSafari } from '../../utils/browsers';
 import { getGradientRGBAs } from '../../utils/colors';
 import { PlatformType, getPlatform } from '../../utils/platforms';
 import { InstructionStepName } from '../../wallets/Wallet';
+import { useWalletConnectModal } from '../../wallets/useWalletConnectModal';
 import {
   WalletConnector,
   useWalletConnectors,
@@ -212,12 +213,15 @@ export function ConnectDetail({
     name,
     qrCode,
     ready,
-    showWalletConnectModal,
     getDesktopUri,
   } = wallet;
   const isDesktopDeepLinkAvailable = !!getDesktopUri;
   const safari = isSafari();
 
+  const isWalletConnectWallet = wallet.id === 'walletConnect';
+
+  const { openWalletConnectModal } = useWalletConnectModal();
+
   const { i18n } = useContext(I18nContext);
 
   const hasExtension = !!wallet.extensionDownloadUrl;
@@ -236,15 +240,15 @@ export function ConnectDetail({
     label: string;
     onClick?: () => void;
     href?: string;
-  } | null = showWalletConnectModal
+  } | null = isWalletConnectWallet
     ? {
         description: !compactModeEnabled
           ? i18n.t('connect.walletconnect.description.full')
           : i18n.t('connect.walletconnect.description.compact'),
         label: i18n.t('connect.walletconnect.open.label'),
         onClick: () => {
           onClose();
-          showWalletConnectModal();
+          openWalletConnectModal();
         },
       }
     : hasQrCode

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

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useRequestWalletConnectUri } from '../../hooks/useRequestWalletConnectUri';
 import { isMobile } from '../../utils/isMobile';
 import { WalletButtonContext } from '../RainbowKitProvider/WalletButtonContext';
 import { DesktopOptions } from './DesktopOptions';
@@ -7,6 +8,8 @@ import { MobileStatus } from './MobileStatus';
 
 export default function ConnectOptions({ onClose }: { onClose: () => void }) {
   const { connector } = useContext(WalletButtonContext);
+  // Prefetch WalletConnect URI
+  useRequestWalletConnectUri();
 
   return isMobile() ? (
     connector ? (

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

@@ -30,6 +30,7 @@ import { WalletButtonContext } from '../RainbowKitProvider/WalletButtonContext';
 import { Text } from '../Text/Text';
 
 import { addLatestWalletId } from '../../wallets/latestWalletId';
+import { useWalletConnectStore } from '../RainbowKitProvider/WalletConnectStoreProvider';
 import {
   ConnectDetail,
   DownloadDetail,
@@ -75,6 +76,7 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
   const initialized = useRef(false);
 
   const { connector } = useContext(WalletButtonContext);
+  const { onWalletConnectUri } = useWalletConnectStore();
 
   // 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.
@@ -87,6 +89,8 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
     .filter((wallet) => wallet.ready || !!wallet.extensionDownloadUrl)
     .sort((a, b) => a.groupIndex - b.groupIndex);
 
+  useEffect(() => onWalletConnectUri(setQrCodeUri), [onWalletConnectUri]);
+
   const groupedWallets = groupBy(wallets, (wallet) => wallet.groupName);
 
   const supportedI18nGroupNames = [
@@ -111,7 +115,7 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
   const connectToWallet = (wallet: WalletConnector) => {
     setConnectionError(false);
     if (wallet.ready) {
-      wallet?.connect?.()?.catch(() => {
+      wallet?.connectWallet?.()?.catch(() => {
         setConnectionError(true);
       });
     }

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

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { touchableStyles } from '../../css/touchableStyles';
 import { isIOS } from '../../utils/isMobile';
+import { useWalletConnectModal } from '../../wallets/useWalletConnectModal';
 import {
   WalletConnector,
   useWalletConnectors,
@@ -65,16 +66,19 @@ export function WalletButton({
   onClose: () => void;
   connecting?: boolean;
 }) {
+  const isWalletConnectWallet = wallet.id === 'walletConnect';
+
+  const { openWalletConnectModal } = useWalletConnectModal();
+
   const {
-    connect,
+    connectWallet,
     iconBackground,
     iconUrl,
     id,
     name,
     getMobileUri,
     ready,
     shortName,
-    showWalletConnectModal,
   } = wallet;
 
   const coolModeRef = useCoolMode(iconUrl);
@@ -112,17 +116,21 @@ export function WalletButton({
       }
     };
 
-    if (id !== 'walletConnect') onMobileUri();
-
-    // If the id is "walletConnect" then "showWalletConnectModal" will always be true
-    if (showWalletConnectModal) {
-      showWalletConnectModal();
-      onClose?.();
-      return;
+    if (isWalletConnectWallet) {
+      onClose();
+      openWalletConnectModal();
+    } else {
+      onMobileUri();
+      connectWallet();
     }
-
-    connect?.();
-  }, [connect, getMobileUri, showWalletConnectModal, onClose, name, id]);
+  }, [
+    connectWallet,
+    isWalletConnectWallet,
+    openWalletConnectModal,
+    getMobileUri,
+    onClose,
+    name,
+  ]);
 
   useEffect(() => {
     // When using `reactStrictMode: true` in development mode the useEffect hook

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

@@ -20,6 +20,7 @@ import { RainbowKitChainProvider } from './RainbowKitChainContext';
 import { ShowBalanceProvider } from './ShowBalanceContext';
 import { ShowRecentTransactionsContext } from './ShowRecentTransactionsContext';
 import { WalletButtonProvider } from './WalletButtonContext';
+import { WalletConnectStoreProvider } from './WalletConnectStoreProvider';
 import { useFingerprint } from './useFingerprint';
 import { usePreloadImages } from './usePreloadImages';
 import { clearWalletConnectDeepLink } from './walletConnectDeepLink';
@@ -103,60 +104,62 @@ export function RainbowKitProvider({
 
   return (
     <RainbowKitChainProvider initialChain={initialChain}>
-      <WalletButtonProvider>
-        <I18nProvider locale={locale}>
-          <CoolModeContext.Provider value={coolMode}>
-            <ModalSizeProvider modalSize={modalSize}>
-              <ShowRecentTransactionsContext.Provider
-                value={showRecentTransactions}
-              >
-                <TransactionStoreProvider>
-                  <AvatarContext.Provider value={avatarContext}>
-                    <AppContext.Provider value={appContext}>
-                      <ThemeIdContext.Provider value={id}>
-                        <ShowBalanceProvider>
-                          <ModalProvider>
-                            {theme ? (
-                              <div {...createThemeRootProps(id)}>
-                                <style
-                                  // biome-ignore lint/security/noDangerouslySetInnerHtml: TODO
-                                  dangerouslySetInnerHTML={{
-                                    // Selectors are sanitized to only contain alphanumeric
-                                    // and underscore characters. Theme values generated by
-                                    // cssStringFromTheme are sanitized, removing
-                                    // characters that terminate values / HTML tags.
-                                    __html: [
-                                      `${selector}{${cssStringFromTheme(
-                                        'lightMode' in theme
-                                          ? theme.lightMode
-                                          : theme,
-                                      )}}`,
-
-                                      'darkMode' in theme
-                                        ? `@media(prefers-color-scheme:dark){${selector}{${cssStringFromTheme(
-                                            theme.darkMode,
-                                            { extends: theme.lightMode },
-                                          )}}}`
-                                        : null,
-                                    ].join(''),
-                                  }}
-                                />
-                                {children}
-                              </div>
-                            ) : (
-                              children
-                            )}
-                          </ModalProvider>
-                        </ShowBalanceProvider>
-                      </ThemeIdContext.Provider>
-                    </AppContext.Provider>
-                  </AvatarContext.Provider>
-                </TransactionStoreProvider>
-              </ShowRecentTransactionsContext.Provider>
-            </ModalSizeProvider>
-          </CoolModeContext.Provider>
-        </I18nProvider>
-      </WalletButtonProvider>
+      <WalletConnectStoreProvider>
+        <WalletButtonProvider>
+          <I18nProvider locale={locale}>
+            <CoolModeContext.Provider value={coolMode}>
+              <ModalSizeProvider modalSize={modalSize}>
+                <ShowRecentTransactionsContext.Provider
+                  value={showRecentTransactions}
+                >
+                  <TransactionStoreProvider>
+                    <AvatarContext.Provider value={avatarContext}>
+                      <AppContext.Provider value={appContext}>
+                        <ThemeIdContext.Provider value={id}>
+                          <ShowBalanceProvider>
+                            <ModalProvider>
+                              {theme ? (
+                                <div {...createThemeRootProps(id)}>
+                                  <style
+                                    // biome-ignore lint/security/noDangerouslySetInnerHtml: TODO
+                                    dangerouslySetInnerHTML={{
+                                      // Selectors are sanitized to only contain alphanumeric
+                                      // and underscore characters. Theme values generated by
+                                      // cssStringFromTheme are sanitized, removing
+                                      // characters that terminate values / HTML tags.
+                                      __html: [
+                                        `${selector}{${cssStringFromTheme(
+                                          'lightMode' in theme
+                                            ? theme.lightMode
+                                            : theme,
+                                        )}}`,
+
+                                        'darkMode' in theme
+                                          ? `@media(prefers-color-scheme:dark){${selector}{${cssStringFromTheme(
+                                              theme.darkMode,
+                                              { extends: theme.lightMode },
+                                            )}}}`
+                                          : null,
+                                      ].join(''),
+                                    }}
+                                  />
+                                  {children}
+                                </div>
+                              ) : (
+                                children
+                              )}
+                            </ModalProvider>
+                          </ShowBalanceProvider>
+                        </ThemeIdContext.Provider>
+                      </AppContext.Provider>
+                    </AvatarContext.Provider>
+                  </TransactionStoreProvider>
+                </ShowRecentTransactionsContext.Provider>
+              </ModalSizeProvider>
+            </CoolModeContext.Provider>
+          </I18nProvider>
+        </WalletButtonProvider>
+      </WalletConnectStoreProvider>
     </RainbowKitChainProvider>
   );
 }