[v5] Fix WC session request (#2585)

Author: MananTank

.changeset/gorgeous-dolphins-raise.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix wallet not opened on WC sessions request event on page reload on mobile

packages/thirdweb/src/react/core/utils/handleWCSessionRequest.ts

@@ -8,7 +8,7 @@ import { StyledDiv } from "../design-system/elements.js";
 import { Container } from "./basic.js";
 import { Text } from "./text.js";
 import type { IconFC } from "../ConnectWallet/icons/types.js";
-import { isMobile } from "../../../core/utils/isMobile.js";
+import { isMobile } from "../../../../utils/web/isMobile.js";
 
 /**
  * @internal

packages/thirdweb/src/react/web/ui/components/DragNDrop.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { isMobile } from "../../../core/utils/isMobile.js";
 import { QRCode } from "../../ui/components/QRCode.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
@@ -10,12 +9,13 @@ import { AppleIcon } from "../../ui/ConnectWallet/icons/AppleIcon.js";
 import { ChromeIcon } from "../../ui/ConnectWallet/icons/ChromeIcon.js";
 import { PlayStoreIcon } from "../../ui/ConnectWallet/icons/PlayStoreIcon.js";
 import { Text } from "../../ui/components/text.js";
-import { openWindow } from "../../../core/utils/openWindow.js";
 import type { InjectedWalletLocale } from "../injected/locale/types.js";
 import type { WalletInfo } from "../../../../wallets/wallet-info.js";
 import { WalletImage } from "../../ui/components/WalletImage.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { isMobile } from "../../../../utils/web/isMobile.js";
+import { openWindow } from "../../../../utils/web/openWindow.js";
 
 /**
  * @internal

packages/thirdweb/src/react/web/wallets/shared/GetStartedScreen.tsx

@@ -1,14 +1,13 @@
 import { ScanScreen } from "./ScanScreen.js";
 import { useState, useRef, useEffect, useCallback } from "react";
-import { isAndroid, isIOS, isMobile } from "../../../core/utils/isMobile.js";
-import { handelWCSessionRequest } from "../../../core/utils/handleWCSessionRequest.js";
 import { ConnectingScreen } from "./ConnectingScreen.js";
-import { openWindow } from "../../../core/utils/openWindow.js";
 import { useWalletConnectionCtx } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import type { InjectedWalletLocale } from "../injected/locale/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../../wallets/wallet-info.js";
 import type { WCSupportedWalletIds } from "../../../../wallets/__generated__/wallet-ids.js";
+import { isMobile, isAndroid, isIOS } from "../../../../utils/web/isMobile.js";
+import { openWindow } from "../../../../utils/web/openWindow.js";
 
 /**
  * QR Scan UI for connecting a specific wallet on desktop.
@@ -31,16 +30,6 @@ export const WalletConnectConnection: React.FC<{
   const connect = useCallback(() => {
     setErrorConnecting(false);
 
-    const platformUris = {
-      ios: walletInfo.mobile.native || "",
-      android: walletInfo.mobile.universal || "",
-      other: walletInfo.mobile.universal || "",
-    };
-
-    const onSessionRequestSent = isMobile()
-      ? () => handelWCSessionRequest(platformUris)
-      : undefined;
-
     wallet
       .connect({
         chain,
@@ -49,6 +38,12 @@ export const WalletConnectConnection: React.FC<{
           projectId: walletConnect?.projectId,
           showQrModal: false,
           onDisplayUri(uri) {
+            const platformUris = {
+              ios: walletInfo.mobile.native || "",
+              android: walletInfo.mobile.universal || "",
+              other: walletInfo.mobile.universal || "",
+            };
+
             setQrCodeUri(uri);
             if (isMobile()) {
               if (isAndroid()) {
@@ -66,7 +61,6 @@ export const WalletConnectConnection: React.FC<{
               }
             }
           },
-          onSessionRequestSent,
           optionalChains: chains,
         },
       })

packages/thirdweb/src/react/web/wallets/shared/WalletConnectConnection.tsx

@@ -1,4 +1,4 @@
-import { detectOS } from "../../../utils/detect-platform.js";
+import { detectOS } from "../detect-platform.js";
 
 /**
  * @internal

packages/thirdweb/src/react/core/utils/isMobile.ts renamed to packages/thirdweb/src/utils/web/isMobile.ts

@@ -6,7 +6,10 @@ import type {
 import type { Account, Wallet } from "./interfaces/wallet.js";
 import type { Chain } from "../chains/types.js";
 import { injectedProvider } from "./injected/mipdStore.js";
-import type { InjectedSupportedWalletIds } from "./__generated__/wallet-ids.js";
+import type {
+  InjectedSupportedWalletIds,
+  WCSupportedWalletIds,
+} from "./__generated__/wallet-ids.js";
 
 import { createWalletEmitter } from "./wallet-emitter.js";
 import { trackConnect } from "../analytics/track.js";
@@ -131,7 +134,11 @@ export function createWallet<const ID extends WalletId>(
               connectedChain,
               doDisconnect,
               doSwitchChain,
-            ] = await autoConnectWC(options, emitter);
+            ] = await autoConnectWC(
+              options,
+              emitter,
+              wallet.id as WCSupportedWalletIds,
+            );
             // set the states
             account = connectedAccount;
             chain = connectedChain;
@@ -157,7 +164,11 @@ export function createWallet<const ID extends WalletId>(
               connectedChain,
               doDisconnect,
               doSwitchChain,
-            ] = await connectWC(options, emitter);
+            ] = await connectWC(
+              options,
+              emitter,
+              wallet.id as WCSupportedWalletIds,
+            );
             // set the states
             account = connectedAccount;
             chain = connectedChain;

packages/thirdweb/src/react/core/utils/openWindow.ts renamed to packages/thirdweb/src/utils/web/openWindow.ts

@@ -25,6 +25,9 @@ import { getDefaultAppMetadata } from "../utils/defaultDappMetadata.js";
 import type { WCSupportedWalletIds } from "../__generated__/wallet-ids.js";
 import type { DisconnectFn, SwitchChainFn } from "../types.js";
 import type { WalletEmitter } from "../wallet-emitter.js";
+import { isAndroid, isIOS, isMobile } from "../../utils/web/isMobile.js";
+import { openWindow } from "../../utils/web/openWindow.js";
+import { getWalletInfo } from "../__generated__/getWalletInfo.js";
 
 type WCProvider = InstanceType<typeof EthereumProvider>;
 
@@ -42,8 +45,9 @@ const defaultShowQrModal = true;
 export async function connectWC(
   options: WCConnectOptions,
   emitter: WalletEmitter<WCSupportedWalletIds>,
+  walletId: WCSupportedWalletIds,
 ): Promise<ReturnType<typeof onConnect>> {
-  const provider = await initProvider(options);
+  const provider = await initProvider(options, walletId);
   const wcOptions = options.walletConnect;
 
   const targetChain = options?.chain || ethereum;
@@ -54,22 +58,12 @@ export async function connectWC(
     client: options.client,
   });
 
-  const { onDisplayUri, onSessionRequestSent } = wcOptions || {};
+  const { onDisplayUri } = wcOptions || {};
 
-  if (onDisplayUri || onSessionRequestSent) {
+  if (onDisplayUri) {
     if (onDisplayUri) {
       provider.events.addListener("display_uri", onDisplayUri);
     }
-
-    if (onSessionRequestSent) {
-      provider.signer.client.on("session_request_sent", onSessionRequestSent);
-      provider.events.addListener("disconnect", () => {
-        provider.signer.client.off(
-          "session_request_sent",
-          onSessionRequestSent,
-        );
-      });
-    }
   }
 
   // If there no active session, or the chain is stale, force connect.
@@ -106,6 +100,7 @@ export async function connectWC(
 export async function autoConnectWC(
   options: WCAutoConnectOptions,
   emitter: WalletEmitter<WCSupportedWalletIds>,
+  walletId: WCSupportedWalletIds,
 ): Promise<ReturnType<typeof onConnect>> {
   const provider = await initProvider(
     options.savedConnectParams
@@ -121,6 +116,7 @@ export async function autoConnectWC(
           client: options.client,
           walletConnect: {},
         },
+    walletId,
   );
 
   const address = provider.accounts[0];
@@ -153,7 +149,11 @@ export async function autoConnectWC(
 
 // Connection utils -----------------------------------------------------------------------------------------------
 
-async function initProvider(options: WCConnectOptions) {
+async function initProvider(
+  options: WCConnectOptions,
+  walletId: WCSupportedWalletIds,
+) {
+  const walletInfo = await getWalletInfo(walletId);
   const wcOptions = options.walletConnect;
   const { EthereumProvider, OPTIONAL_EVENTS, OPTIONAL_METHODS } = await import(
     "@walletconnect/ethereum-provider"
@@ -192,6 +192,34 @@ async function initProvider(options: WCConnectOptions) {
     disableProviderPing: true,
   });
 
+  function handleSessionRequest() {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (!isMobile()) {
+      return;
+    }
+
+    const preferUniversal =
+      walletInfo.mobile.universal || walletInfo.mobile.native || "";
+    const preferNative =
+      walletInfo.mobile.native || walletInfo.mobile.universal || "";
+
+    if (isAndroid()) {
+      openWindow(preferUniversal);
+    } else if (isIOS()) {
+      openWindow(preferNative);
+    } else {
+      openWindow(preferUniversal);
+    }
+  }
+
+  provider.signer.client.on("session_request_sent", handleSessionRequest);
+  provider.events.addListener("disconnect", () => {
+    provider.signer.client.off("session_request_sent", handleSessionRequest);
+  });
+
   provider.events.setMaxListeners(Infinity);
 
   return provider;

packages/thirdweb/src/wallets/create-wallet.ts

@@ -131,11 +131,6 @@ export type WCConnectOptions = {
      * ```
      */
     onDisplayUri?: (uri: string) => void;
-    /**
-     * Callback to be called to listen to the `session_request_sent` event emitted by WalletConnect's `EthereumProvider`.
-     * This can be used to
-     */
-    onSessionRequestSent?: () => void;
 
     /**
      * Your project’s unique identifier that can be obtained at https://cloud.walletconnect.com/