fix: add WalletConnect deeplink choice to local storage (#479)

.changeset/gold-bags-play.md

@@ -0,0 +1,7 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Improve deep linking support for WalletConnect-based wallets on iOS
+
+We now store the wallet’s universal link URL in local storage so that WalletConnect can use it for deep linking. This is typically handled by the official WalletConnect modal, but we need to handle it ourselves when rendering custom QR codes within RainbowKit.

packages/example/pages/index.tsx

@@ -243,9 +243,17 @@ const Example = () => {
                 <div>Transaction: {JSON.stringify(transactionData)}</div>
               )}
               {transactionError && <div>Error sending transaction</div>}
-              {signingData && <div>Data Signature: {signingData}</div>}
+              {signingData && (
+                <div style={{ wordBreak: 'break-all' }}>
+                  Data Signature: {signingData}
+                </div>
+              )}
               {signingError && <div>Error signing message</div>}
-              {typedData && <div>Typed Data Signature: {typedData}</div>}
+              {typedData && (
+                <div style={{ wordBreak: 'break-all' }}>
+                  Typed Data Signature: {typedData}
+                </div>
+              )}
               {typedError && <div>Error signing typed message</div>}
             </div>
           </div>

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

@@ -14,6 +14,7 @@ import { DisclaimerText } from '../Disclaimer/DisclaimerText';
 import { BackIcon } from '../Icons/Back';
 import { AppContext } from '../RainbowKitProvider/AppContext';
 import { useCoolMode } from '../RainbowKitProvider/useCoolMode';
+import { setWalletConnectDeepLink } from '../RainbowKitProvider/walletConnectDeepLink';
 import { Text } from '../Text/Text';
 import * as styles from './MobileOptions.css';
 
@@ -44,10 +45,17 @@ function WalletButton({ wallet }: { wallet: WalletConnector }) {
 
         onConnecting?.(async () => {
           if (getMobileUri) {
-            window.location.href = await getMobileUri();
+            const mobileUri = await getMobileUri();
+            setWalletConnectDeepLink({ mobileUri, name });
+
+            if (mobileUri.startsWith('http')) {
+              window.open(mobileUri, '_blank', 'noreferrer,noopener');
+            } else {
+              window.location.href = mobileUri;
+            }
           }
         });
-      }, [connect, getMobileUri, onConnecting])}
+      }, [connect, getMobileUri, onConnecting, name])}
       ref={coolModeRef}
       style={{ overflow: 'visible', textAlign: 'center' }}
       type="button"

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

@@ -12,6 +12,8 @@ import {
 } from './RainbowKitChainContext';
 import { ShowRecentTransactionsContext } from './ShowRecentTransactionsContext';
 import { provideRainbowKitChains } from './provideRainbowKitChains';
+import { useOnDisconnected } from './useOnDisconnected';
+import { clearWalletConnectDeepLink } from './walletConnectDeepLink';
 const ThemeIdContext = createContext<string | undefined>(undefined);
 
 const attr = 'data-rk';
@@ -70,6 +72,8 @@ export function RainbowKitProvider({
     [chains]
   );
 
+  useOnDisconnected(clearWalletConnectDeepLink);
+
   if (typeof theme === 'function') {
     throw new Error(
       'A theme function was provided to the "theme" prop instead of a theme object. You must execute this function to get the resulting theme object.'

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

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+import { useConnect } from 'wagmi';
+
+export function useOnDisconnected(callback: () => void) {
+  const { isDisconnected } = useConnect();
+
+  // Ensure callback is executed once on disconnect
+  const callbackAlreadyExecutedRef = useRef(false);
+
+  useEffect(() => {
+    if (isDisconnected) {
+      if (callbackAlreadyExecutedRef.current) {
+        return;
+      }
+
+      callbackAlreadyExecutedRef.current = true;
+      callback();
+    } else {
+      callbackAlreadyExecutedRef.current = false;
+    }
+  }, [isDisconnected, callback]);
+}

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

@@ -0,0 +1,23 @@
+const storageKey = 'WALLETCONNECT_DEEPLINK_CHOICE';
+
+export function setWalletConnectDeepLink({
+  mobileUri,
+  name,
+}: {
+  mobileUri: string;
+  name: string;
+}) {
+  if (mobileUri.startsWith('http') && mobileUri.includes('?uri=')) {
+    localStorage.setItem(
+      storageKey,
+      JSON.stringify({
+        href: mobileUri.split('?')[0],
+        name,
+      })
+    );
+  }
+}
+
+export function clearWalletConnectDeepLink() {
+  localStorage.removeItem(storageKey);
+}