handle disconnect when multiple connected wallets + wallet utility exports (#3151)

Author: joaquim-verges

.changeset/rich-ties-whisper.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Better handling for multiple accounts connected

packages/thirdweb/src/exports/react-native.ts

@@ -87,3 +87,9 @@ export {
   type AutoConnectProps,
 } from "../react/core/hooks/connection/AutoConnect.js";
 export { useAutoConnect } from "../react/core/hooks/connection/useAutoConnect.js";
+
+// wallet info
+export {
+  useWalletInfo,
+  useWalletImage,
+} from "../react/web/ui/hooks/useWalletInfo.js";

packages/thirdweb/src/exports/react.ts

@@ -129,3 +129,9 @@ export {
   useConnectModal,
   type UseConnectModalOptions,
 } from "../react/web/ui/ConnectWallet/useConnectModal.js";
+
+// wallet info
+export {
+  useWalletInfo,
+  useWalletImage,
+} from "../react/web/ui/hooks/useWalletInfo.js";

packages/thirdweb/src/exports/wallets.ts

@@ -96,5 +96,6 @@ export type {
 
 export { getAllWalletsList } from "../wallets/getAllWalletsList.js";
 export { getWalletInfo } from "../wallets/__generated__/getWalletInfo.js";
+export { type WalletInfo } from "../wallets/wallet-info.js";
 
 export { createWalletAdapter } from "../adapters/wallet-adapter.js";

packages/thirdweb/src/exports/wallets/in-app.ts

@@ -9,3 +9,5 @@ export {
 } from "../../wallets/in-app/core/authentication/index.js";
 
 export { hasStoredPasskey } from "../../wallets/in-app/web/lib/auth/passkeys.js";
+
+export { socialIcons } from "../../react/web/wallets/in-app/socialIcons.js";

packages/thirdweb/src/react/web/ui/hooks/useWalletInfo.ts

@@ -4,7 +4,7 @@ import type { WalletInfo } from "../../../../wallets/wallet-info.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 
 /**
- * @internal
+ * Returns the wallet info for the provided wallet id.
  */
 export function useWalletInfo(id: WalletId) {
   return useQuery<WalletInfo>({
@@ -17,7 +17,7 @@ export function useWalletInfo(id: WalletId) {
 }
 
 /**
- * @internal
+ * Returns the wallet image for the provided wallet id.
  */
 export function useWalletImage(id: WalletId) {
   return useQuery({

packages/thirdweb/src/wallets/manager/index.ts

@@ -73,15 +73,17 @@ export function createConnectionManager(storage: AsyncStorage) {
   };
 
   const onWalletDisconnect = (wallet: Wallet) => {
-    const currentMap = walletIdToConnectedWalletMap.getValue();
     deleteConnectParamsFromStorage(storage, wallet.id);
+    removeConnectedWallet(wallet);
 
-    const newMap = new Map(currentMap);
-    newMap.delete(wallet.id);
-
-    walletIdToConnectedWalletMap.setValue(newMap);
+    // there are still connected wallets, switch to the next one
+    if (connectedWallets.getValue().length > 0) {
+      const nextWallet = connectedWallets.getValue()[0] as Wallet;
+      setActiveWallet(nextWallet);
+      return;
+    }
 
-    // if disconnecting the active wallet
+    // if disconnecting the last wallet
     if (activeWalletStore.getValue() === wallet) {
       storage.removeItem(LAST_ACTIVE_EOA_ID);
       activeAccountStore.setValue(undefined);

packages/thirdweb/src/wallets/wallet-connect/index.ts

@@ -280,17 +280,18 @@ async function initProvider(
   if (walletId !== "walletConnect") {
     function handleSessionRequest() {
       const preferNative =
-        walletInfo.mobile.native || walletInfo.mobile.universal;
+        provider.session?.peer?.metadata?.redirect?.native ||
+        walletInfo.mobile.native ||
+        walletInfo.mobile.universal;
 
       if (isReactNative()) {
         const { Linking } = require("react-native");
-        const appUrl = preferNative;
-        if (!appUrl) {
+        if (!preferNative) {
           throw new Error(
             "No app url found for wallet connect to redirect to.",
           );
         }
-        Linking.openURL(appUrl);
+        Linking.openURL(preferNative);
         return;
       }