[SDK] Update walletconnect provider to universal (#7532)

Co-authored-by: Cursor Agent <[email protected]>

Author: joaquim-verges

.changeset/chatty-candles-jog.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Upgrade to wallet connect universal provider

apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx

@@ -3,10 +3,15 @@ import { XIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import {
+  abstract,
+  arbitrum,
   arbitrumSepolia,
+  base,
   baseSepolia,
-  defineChain,
+  ethereum,
+  optimism,
   optimismSepolia,
+  polygon,
   sepolia,
 } from "thirdweb/chains";
 import {
@@ -115,7 +120,12 @@ export function RightSection(props: {
       auth={connectOptions.enableAuth ? playgroundAuth : undefined}
       autoConnect={false}
       chains={[
-        defineChain(578),
+        base,
+        ethereum,
+        polygon,
+        optimism,
+        arbitrum,
+        abstract,
         sepolia,
         baseSepolia,
         optimismSepolia,

apps/playground-web/src/components/styled-connect-button.tsx

@@ -3,9 +3,14 @@
 import { useTheme } from "next-themes";
 import {
   abstract,
+  arbitrum,
   arbitrumSepolia,
+  base,
   baseSepolia,
+  ethereum,
+  optimism,
   optimismSepolia,
+  polygon,
   polygonAmoy,
   sepolia,
 } from "thirdweb/chains";
@@ -28,6 +33,11 @@ export function StyledConnectButton(
         polygonAmoy,
         arbitrumSepolia,
         abstract,
+        base,
+        ethereum,
+        polygon,
+        optimism,
+        arbitrum,
       ]}
       client={THIRDWEB_CLIENT}
       theme={theme === "light" ? "light" : "dark"}

apps/playground-web/src/components/styled-connect-embed.tsx

@@ -2,9 +2,15 @@
 
 import { useTheme } from "next-themes";
 import {
+  abstract,
+  arbitrum,
   arbitrumSepolia,
+  base,
   baseSepolia,
+  ethereum,
+  optimism,
   optimismSepolia,
+  polygon,
   polygonAmoy,
   sepolia,
 } from "thirdweb/chains";
@@ -30,11 +36,17 @@ export function StyledConnectEmbed(
   ) : (
     <ConnectEmbed
       chains={[
+        base,
+        ethereum,
+        polygon,
+        optimism,
+        arbitrum,
         sepolia,
         baseSepolia,
         optimismSepolia,
         polygonAmoy,
         arbitrumSepolia,
+        abstract,
       ]}
       client={THIRDWEB_CLIENT}
       theme={theme === "light" ? "light" : "dark"}

packages/thirdweb/package.json

@@ -25,8 +25,8 @@
     "@tanstack/react-query": "5.81.5",
     "@thirdweb-dev/engine": "workspace:*",
     "@thirdweb-dev/insight": "workspace:*",
-    "@walletconnect/ethereum-provider": "2.20.1",
     "@walletconnect/sign-client": "2.20.1",
+    "@walletconnect/universal-provider": "2.21.4",
     "abitype": "1.0.8",
     "cross-spawn": "7.0.6",
     "fuse.js": "7.1.0",

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -282,6 +282,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         toChainId: props.chain.id,
         toToken: props.tokenAddress,
       });
+      return true;
     },
     queryKey: ["buy_widget:render"],
   });

packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -265,6 +265,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
         toChainId: props.chain.id,
         toToken: props.tokenAddress,
       });
+      return true;
     },
     queryKey: ["checkout_widget:render"],
   });

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -292,6 +292,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
         event: "ub:ui:transaction_widget:render",
         toToken: props.tokenAddress,
       });
+      return true;
     },
     queryKey: ["transaction_widget:render"],
   });

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

@@ -399,7 +399,14 @@ export function createWallet<const ID extends WalletId>(
         getConfig: () => args[1],
         id,
         subscribe: emitter.subscribe,
-        switchChain: (c) => handleSwitchChain(c),
+        switchChain: async (c) => {
+          try {
+            await handleSwitchChain(c);
+            chain = c;
+          } catch (e) {
+            console.error("Error switching chain", e);
+          }
+        },
       };
       return wallet;
     }

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

@@ -230,7 +230,14 @@ export function createWallet<const ID extends WalletId>(
         getConfig: () => args[1],
         id,
         subscribe: emitter.subscribe,
-        switchChain: (c) => handleSwitchChain(c),
+        switchChain: async (c) => {
+          try {
+            await handleSwitchChain(c);
+            chain = c;
+          } catch (e) {
+            console.error("Error switching chain", e);
+          }
+        },
       };
       return wallet;
     }