[SDK] Fix showQrModal option not respected on desktop web (#7711)

joaquim-verges · web-flow · commit adec6be844f8 · 2025-07-25T04:34:04.000-07:00
diff --git a/.changeset/social-dogs-bet.md b/.changeset/social-dogs-bet.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix showQrModal option not respected on desktop web
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -57,7 +57,7 @@
     "posthog-js": "1.256.1",
     "posthog-node": "^5.4.0",
     "prettier": "3.6.2",
-    "qrcode": "^1.5.3",
+    "qrcode": "1.5.3",
     "react": "19.1.0",
     "react-children-utilities": "^2.10.0",
     "react-day-picker": "^8.10.1",
@@ -99,7 +99,7 @@
     "@types/node": "22.14.1",
     "@types/papaparse": "^5.3.16",
     "@types/pluralize": "^0.0.33",
-    "@types/qrcode": "^1.5.5",
+    "@types/qrcode": "1.5.5",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@types/react-table": "^7.7.20",
diff --git a/apps/playground-web/src/app/wallets/sign-in/headless/page.tsx b/apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
@@ -71,13 +71,13 @@ function BuildCustomUISection() {
     <CodeExample
       code={`\
 import { useConnect } from "thirdweb/react";
-import { createWallet } from "thirdweb/wallets";
+import { createWallet, injectedProvider } from "thirdweb/wallets";
 import { shortenAddress } from "thirdweb/utils";
 
 function App() {
   const account = useActiveAccount();
   const wallet = useActiveWallet();
-  const { connect, isConnecting, error } = useConnect();
+  const { connect, isConnecting, error, cancelConnection } = useConnect();
   const { disconnect } = useDisconnect();
 
   if (account) {
@@ -99,7 +99,17 @@ function App() {
         connect(async () => {
           // 500+ wallets supported with id autocomplete
           const wallet = createWallet("io.metamask");
-          await wallet.connect({ client });
+          const isInstalled = !!injectedProvider("io.metamask");
+          await wallet.connect({ client, ...(isInstalled ? {} : {
+            walletConnect: {
+              // if not installed, show qr modal
+              showQrModal: true,
+              onCancel: () => {
+                cancelConnection();
+              }
+              }
+            })
+          });
           return wallet;
         })
       }
diff --git a/apps/playground-web/src/components/sign-in/hooks.tsx b/apps/playground-web/src/components/sign-in/hooks.tsx
@@ -6,7 +6,7 @@ import {
   useDisconnect,
 } from "thirdweb/react";
 import { shortenAddress } from "thirdweb/utils";
-import { createWallet } from "thirdweb/wallets";
+import { createWallet, injectedProvider } from "thirdweb/wallets";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { Button } from "../ui/button";
 
@@ -21,6 +21,17 @@ export function HooksPreview() {
       const adminWallet = createWallet("io.metamask");
       await adminWallet.connect({
         client: THIRDWEB_CLIENT,
+        ...(injectedProvider("io.metamask")
+          ? {}
+          : {
+              walletConnect: {
+                showQrModal: true,
+                onCancel: () => {
+                  console.log("onCancel");
+                  connectMutation.cancelConnection();
+                },
+              },
+            }),
       });
       return adminWallet;
     });
diff --git a/apps/playground-web/src/components/sign-in/modal.tsx b/apps/playground-web/src/components/sign-in/modal.tsx
@@ -54,7 +54,6 @@ export function ModalPreview({ enableAuth }: { enableAuth?: boolean }) {
       auth: enableAuth ? playgroundAuth : undefined,
       client: THIRDWEB_CLIENT,
     });
-    console.log("connected", wallet);
     return wallet;
   };
 
diff --git a/apps/portal/src/components/Document/AuthMethodsTabs.tsx b/apps/portal/src/components/Document/AuthMethodsTabs.tsx
@@ -3,7 +3,7 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type React from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { getSocialIcon } from "thirdweb/wallets/in-app";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -819,7 +819,26 @@ const getUnrealSnippet = (authMethod: AuthMethod): string => {
 
 function AuthMethodsTabsContent() {
   const [selectedAuth, setSelectedAuth] = useState<AuthMethod>("email");
-  const platforms = getPlatformsForAuth(selectedAuth);
+  const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(
+    null,
+  );
+  const platforms = useMemo(
+    () => getPlatformsForAuth(selectedAuth),
+    [selectedAuth],
+  );
+
+  // Reset platform selection when platforms change
+  const currentPlatform = useMemo(() => {
+    const defaultPlatform = platforms[0]?.id || "typescript";
+    // If currently selected platform is not available in new platforms, reset to first available
+    if (
+      !selectedPlatform ||
+      !platforms.find((p) => p.id === selectedPlatform)
+    ) {
+      return defaultPlatform;
+    }
+    return selectedPlatform;
+  }, [platforms, selectedPlatform]);
 
   return (
     <div className="space-y-6">
@@ -858,7 +877,10 @@ function AuthMethodsTabsContent() {
         <h3 className="text-lg font-semibold mb-4 text-foreground">
           2. Select Platform
         </h3>
-        <Tabs defaultValue={platforms[0]?.id || "typescript"}>
+        <Tabs
+          value={currentPlatform}
+          onValueChange={(value) => setSelectedPlatform(value as Platform)}
+        >
           <TabsList>
             {platforms.map((platform) => {
               const IconComponent = platform.icon;
diff --git a/packages/thirdweb/package.json b/packages/thirdweb/package.json
@@ -36,6 +36,7 @@
     "ora": "8.2.0",
     "ox": "0.7.0",
     "prompts": "2.4.2",
+    "qrcode": "1.5.3",
     "toml": "3.0.0",
     "uqr": "0.1.2",
     "viem": "2.28.1",
@@ -61,6 +62,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/cross-spawn": "^6.0.6",
     "@types/prompts": "2.4.9",
+    "@types/qrcode": "1.5.5",
     "@types/react": "19.1.8",
     "@viem/anvil": "0.0.10",
     "@vitejs/plugin-react": "^4.6.0",
diff --git a/packages/thirdweb/src/react/core/hooks/wallets/useConnect.ts b/packages/thirdweb/src/react/core/hooks/wallets/useConnect.ts
@@ -79,5 +79,15 @@ export function useConnect(options?: ConnectManagerOptions) {
     [connect, options, setConnectionStatus],
   );
 
-  return { connect: handleConnection, error, isConnecting } as const;
+  const cancelConnection = useCallback(() => {
+    setIsConnecting(false);
+    setConnectionStatus("disconnected");
+  }, [setConnectionStatus]);
+
+  return {
+    connect: handleConnection,
+    error,
+    isConnecting,
+    cancelConnection,
+  } as const;
 }
diff --git a/packages/thirdweb/src/wallets/create-wallet.ts b/packages/thirdweb/src/wallets/create-wallet.ts
@@ -17,6 +17,7 @@ import { inAppWallet } from "./in-app/web/in-app.js";
 import { getInjectedProvider } from "./injected/index.js";
 import type { Account, Wallet } from "./interfaces/wallet.js";
 import { smartWallet } from "./smart/smart-wallet.js";
+import type { QROverlay } from "./wallet-connect/qr-overlay.js";
 import type { WCConnectOptions } from "./wallet-connect/types.js";
 import { createWalletEmitter } from "./wallet-emitter.js";
 import type {
@@ -299,30 +300,90 @@ export function createWallet<const ID extends WalletId>(
               "./wallet-connect/controller.js"
             );
 
-            const [
-              connectedAccount,
-              connectedChain,
-              doDisconnect,
-              doSwitchChain,
-            ] = await connectWC(
-              wcOptions,
-              emitter,
-              wallet.id as WCSupportedWalletIds | "walletConnect",
-              webLocalStorage,
-              sessionHandler,
-            );
-            // set the states
-            account = connectedAccount;
-            chain = connectedChain;
-            handleDisconnect = doDisconnect;
-            handleSwitchChain = doSwitchChain;
-            trackConnect({
-              chainId: chain.id,
-              client: wcOptions.client,
-              walletAddress: account.address,
-              walletType: id,
-            });
-            return account;
+            let qrOverlay: QROverlay | undefined;
+
+            try {
+              const [
+                connectedAccount,
+                connectedChain,
+                doDisconnect,
+                doSwitchChain,
+              ] = await connectWC(
+                {
+                  ...wcOptions,
+                  walletConnect: {
+                    ...wcOptions.walletConnect,
+                    onDisplayUri: wcOptions.walletConnect?.showQrModal
+                      ? async (uri) => {
+                          // Check if we're in a browser environment
+                          if (
+                            typeof window !== "undefined" &&
+                            typeof document !== "undefined"
+                          ) {
+                            try {
+                              const { createQROverlay } = await import(
+                                "./wallet-connect/qr-overlay.js"
+                              );
+
+                              // Clean up any existing overlay
+                              if (qrOverlay) {
+                                qrOverlay.destroy();
+                              }
+
+                              // Create new QR overlay
+                              qrOverlay = createQROverlay(uri, {
+                                theme:
+                                  wcOptions.walletConnect?.qrModalOptions
+                                    ?.themeMode ?? "dark",
+                                qrSize: 280,
+                                showCloseButton: true,
+                                onCancel: () => {
+                                  wcOptions.walletConnect?.onCancel?.();
+                                },
+                              });
+                            } catch (error) {
+                              console.error(
+                                "Failed to create QR overlay:",
+                                error,
+                              );
+                            }
+                          }
+                        }
+                      : undefined,
+                  },
+                },
+                emitter,
+                wallet.id as WCSupportedWalletIds | "walletConnect",
+                webLocalStorage,
+                sessionHandler,
+              );
+
+              // Clean up QR overlay on successful connection
+              if (qrOverlay) {
+                qrOverlay.destroy();
+                qrOverlay = undefined;
+              }
+
+              // set the states
+              account = connectedAccount;
+              chain = connectedChain;
+              handleDisconnect = doDisconnect;
+              handleSwitchChain = doSwitchChain;
+              trackConnect({
+                chainId: chain.id,
+                client: wcOptions.client,
+                walletAddress: account.address,
+                walletType: id,
+              });
+              return account;
+            } catch (error) {
+              // Clean up QR overlay on connection error
+              if (qrOverlay) {
+                qrOverlay.destroy();
+                qrOverlay = undefined;
+              }
+              throw error;
+            }
           }
 
           if (id === "walletConnect") {
diff --git a/packages/thirdweb/src/wallets/wallet-connect/qr-overlay.ts b/packages/thirdweb/src/wallets/wallet-connect/qr-overlay.ts
diff --git a/packages/thirdweb/src/wallets/wallet-connect/types.ts b/packages/thirdweb/src/wallets/wallet-connect/types.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"thirdweb": patch
 +---
++
 +Fix showQrModal option not respected on desktop web