feat: always use new session when calling connect method for WC (#2637)

Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>

Author: MananTank

.changeset/wise-tigers-drive.md

@@ -0,0 +1,8 @@
+---
+"thirdweb": patch
+---
+
+- Always start a new session when calling `wallet.connect` for WalletConnect
+- Fix JSDoc for `useConnectedWallets`
+- Add `accountsChanged` event back to `Wallet`
+- `wallet.disconnect` method cleanups

packages/thirdweb/src/react/core/hooks/wallets/wallet-hooks.tsx

@@ -70,13 +70,13 @@ export function useActiveWalletChain() {
 }
 
 /**
- * A hook that returns all connected accounts
- * @returns An array of all connected accounts
+ * A hook that returns all connected wallets
+ * @returns An array of all connected wallets
  * @example
  * ```jsx
- * import { useConnectedAccounts } from "thirdweb/react";
+ * import { useConnectedWallets } from "thirdweb/react";
  *
- * const accounts = useConnectedAccounts();
+ * const wallets = useConnectedWallets();
  * ```
  * @walletConnection
  */

packages/thirdweb/src/wallets/coinbase/coinbaseSDKWallet.ts

@@ -212,15 +212,12 @@ function onConnect(
     },
   };
 
-  function disconnect() {
-    if (!provider) {
-      return;
-    }
-    provider.disconnect();
-    provider.close();
+  async function disconnect() {
     provider.removeListener("accountsChanged", onAccountsChanged);
     provider.removeListener("chainChanged", onChainChanged);
     provider.removeListener("disconnect", onDisconnect);
+    provider.disconnect();
+    await provider.close();
   }
 
   function onDisconnect() {
@@ -235,6 +232,7 @@ function onConnect(
         address: getAddress(accounts[0]),
       };
       emitter.emit("accountChanged", newAccount);
+      emitter.emit("accountsChanged", accounts);
     } else {
       onDisconnect();
     }

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

@@ -76,10 +76,15 @@ export function createWallet<const ID extends WalletId>(
         chain = newChain;
       });
 
-      const unsubscribeDisconnect = emitter.subscribe("disconnect", () => {
+      function reset() {
         account = undefined;
         chain = undefined;
-        // unsubscribe
+      }
+
+      let handleDisconnect = async () => {};
+
+      const unsubscribeDisconnect = emitter.subscribe("disconnect", () => {
+        reset();
         unsubscribeChain();
         unsubscribeDisconnect();
       });
@@ -91,10 +96,6 @@ export function createWallet<const ID extends WalletId>(
       let handleSwitchChain: (chain: Chain) => Promise<void> = async () => {
         throw new Error("Not implemented yet");
       };
-      let handleDisconnect: () => void = () => {
-        account = undefined;
-        chain = undefined;
-      };
 
       const wallet: Wallet<ID> = {
         id,
@@ -177,11 +178,7 @@ export function createWallet<const ID extends WalletId>(
             // set the states
             account = connectedAccount;
             chain = connectedChain;
-            handleDisconnect = () => {
-              doDisconnect();
-              account = undefined;
-              chain = undefined;
-            };
+            handleDisconnect = doDisconnect;
             handleSwitchChain = doSwitchChain;
             trackConnect({
               client: wcOptions.client,
@@ -226,11 +223,7 @@ export function createWallet<const ID extends WalletId>(
             // set the states
             account = connectedAccount;
             chain = connectedChain;
-            handleDisconnect = () => {
-              doDisconnect();
-              account = undefined;
-              chain = undefined;
-            };
+            handleDisconnect = doDisconnect;
             handleSwitchChain = doSwitchChain;
             trackConnect({
               client: options.client,
@@ -243,7 +236,10 @@ export function createWallet<const ID extends WalletId>(
           throw new Error("Failed to connect");
         },
         // these get overridden in connect and autoConnect
-        disconnect: async () => handleDisconnect(),
+        disconnect: async () => {
+          reset();
+          await handleDisconnect();
+        },
         switchChain: (c) => handleSwitchChain(c),
       };
       return wallet;
@@ -341,11 +337,11 @@ export function smartWallet(
       return account;
     },
     disconnect: async () => {
-      const { disconnectSmartWallet } = await import("./smart/index.js");
-      await disconnectSmartWallet(_smartWallet);
       account = undefined;
       chain = undefined;
       emitter.emit("disconnect", undefined);
+      const { disconnectSmartWallet } = await import("./smart/index.js");
+      await disconnectSmartWallet(_smartWallet);
     },
     switchChain: async () => {
       throw new Error("Not implemented yet");
@@ -444,10 +440,12 @@ function coinbaseWalletSDK(): Wallet<"com.coinbase.wallet"> {
   let account: Account | undefined = undefined;
   let chain: Chain | undefined = undefined;
 
-  let handleDisconnect: () => void = () => {
+  function reset() {
     account = undefined;
     chain = undefined;
-  };
+  }
+
+  let handleDisconnect = async () => {};
 
   let handleSwitchChain = async (newChain: Chain) => {
     chain = newChain;
@@ -461,8 +459,7 @@ function coinbaseWalletSDK(): Wallet<"com.coinbase.wallet"> {
   );
 
   const unsubscribeDisconnect = emitter.subscribe("disconnect", () => {
-    handleDisconnect();
-    // unsubscribe
+    reset();
     unsubscribeChainChanged();
     unsubscribeDisconnect();
   });
@@ -517,7 +514,8 @@ function coinbaseWalletSDK(): Wallet<"com.coinbase.wallet"> {
       return account;
     },
     disconnect: async () => {
-      handleDisconnect();
+      reset();
+      await handleDisconnect();
     },
     switchChain: async (newChain) => {
       await handleSwitchChain(newChain);

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

@@ -185,10 +185,7 @@ async function onConnect(
     },
   };
 
-  function disconnect() {
-    if (!provider || !provider.removeListener) {
-      return;
-    }
+  async function disconnect() {
     provider.removeListener("accountsChanged", onAccountsChanged);
     provider.removeListener("chainChanged", onChainChanged);
     provider.removeListener("disconnect", onDisconnect);
@@ -207,6 +204,7 @@ async function onConnect(
       };
 
       emitter.emit("accountChanged", newAccount);
+      emitter.emit("accountsChanged", accounts);
     } else {
       onDisconnect();
     }

packages/thirdweb/src/wallets/types.ts

@@ -19,5 +19,5 @@ export type AppMetadata = {
   logoUrl?: string;
 };
 
-export type DisconnectFn = () => void;
+export type DisconnectFn = () => Promise<void>;
 export type SwitchChainFn = (chain: Chain) => Promise<void>;

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

@@ -52,7 +52,6 @@ const defaultWCProjectId = "08c4b07e3ad25f1a27c14a4e8cecb6f0";
 const NAMESPACE = "eip155";
 const ADD_ETH_CHAIN_METHOD = "wallet_addEthereumChain";
 
-const isNewChainsStale = true;
 const defaultShowQrModal = true;
 
 const storageKeys = {
@@ -69,12 +68,6 @@ export async function connectWC(
   walletId: WCSupportedWalletIds | "walletConnect",
 ): Promise<ReturnType<typeof onConnect>> {
   const provider = await initProvider(options, walletId);
-
-  const _isChainsState = await isChainsStale(provider, [
-    provider.chainId,
-    ...(options?.walletConnect?.optionalChains || []).map((c) => c.id),
-  ]);
-
   const wcOptions = options.walletConnect;
 
   const { onDisplayUri } = wcOptions || {};
@@ -91,19 +84,17 @@ export async function connectWC(
     optionalChains: options.walletConnect?.optionalChains,
   });
 
-  // If there no active session, or the chain is stale, force connect.
-  if (!provider.session || _isChainsState) {
+  if (provider.session) {
     await provider.connect({
       ...(wcOptions?.pairingTopic
         ? { pairingTopic: wcOptions?.pairingTopic }
         : {}),
       optionalChains: chainsToRequest,
       rpcMap: rpcMap,
     });
-
-    setRequestedChainsIds(chainsToRequest);
   }
 
+  setRequestedChainsIds(chainsToRequest);
   // If session exists and chains are authorized, enable provider for required chain
   const addresses = await provider.enable();
   const address = addresses[0];
@@ -174,23 +165,6 @@ export async function autoConnectWC(
   return onConnect(address, chain, provider, emitter);
 }
 
-// /**
-//  * @internal
-//  */
-// export async function disconnectWC(wallet: Wallet<WCSupportedWalletIds>) {
-//   const provider = walletToProviderMap.get(wallet);
-//   // const storage = getWalletData(wallet)?.storage;
-
-//   onDisconnect(wallet);
-//   // if (storage) {
-//   //   deleteConnectParamsFromStorage(storage, wallet.id);
-//   // }
-
-//   if (provider) {
-//     provider.disconnect();
-//   }
-// }
-
 // Connection utils -----------------------------------------------------------------------------------------------
 
 async function initProvider(
@@ -238,9 +212,9 @@ async function initProvider(
 
   // disconnect the provider if chains are stale when (if not auto connecting)
   if (!isAutoConnect) {
-    const isStale = await isChainsStale(provider, chainsToRequest);
+    // const isStale = await isChainsStale(provider, chainsToRequest);
 
-    if (isStale && provider.session) {
+    if (provider.session) {
       await provider.disconnect();
     }
   }
@@ -341,14 +315,11 @@ function onConnect(
     },
   };
 
-  function disconnect() {
-    if (!provider) {
-      return;
-    }
-    provider.disconnect();
+  async function disconnect() {
     provider.removeListener("accountsChanged", onAccountsChanged);
     provider.removeListener("chainChanged", onChainChanged);
     provider.removeListener("disconnect", onDisconnect);
+    await provider.disconnect();
   }
 
   function onDisconnect() {
@@ -365,6 +336,7 @@ function onConnect(
         address: getAddress(accounts[0]),
       };
       emitter.emit("accountChanged", newAccount);
+      emitter.emit("accountsChanged", accounts);
     } else {
       onDisconnect();
     }
@@ -396,9 +368,6 @@ function getNamespaceMethods(provider: WCProvider) {
 }
 
 function getNamespaceChainsIds(provider: WCProvider): number[] {
-  if (!provider) {
-    return [];
-  }
   const chainIds = provider.session?.namespaces[NAMESPACE]?.chains?.map(
     (chain) => parseInt(chain.split(":")[1] || ""),
   );
@@ -450,39 +419,6 @@ async function switchChainWC(provider: WCProvider, chain: Chain) {
   }
 }
 
-/**
- * if every chain requested were already requested earlier - then they are not stale
- * @param connectToChainId
- * @internal
- */
-async function isChainsStale(provider: WCProvider, chains: number[]) {
-  const namespaceMethods = getNamespaceMethods(provider);
-
-  // if chain adding method is available, then chains are not stale
-  if (namespaceMethods.includes(ADD_ETH_CHAIN_METHOD)) {
-    return false;
-  }
-
-  // if new chains are considered stale, then return true
-  if (!isNewChainsStale) {
-    return false;
-  }
-
-  const requestedChains = await getRequestedChainsIds();
-  const namespaceChains = getNamespaceChainsIds(provider);
-
-  // if any of the requested chains are not in the namespace chains, then they are stale
-  if (
-    namespaceChains.length &&
-    !namespaceChains.some((id) => chains.includes(id))
-  ) {
-    return false;
-  }
-
-  // if chain was requested earlier, then they are not stale
-  return !chains.every((id) => requestedChains.includes(id));
-}
-
 /**
  * Set the requested chains to the storage.
  * @internal

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

@@ -5,6 +5,7 @@ import type { WalletAutoConnectionOption, WalletId } from "./wallet-types.js";
 
 export type WalletEmitterEvents<TWalletId extends WalletId> = {
   accountChanged: Account;
+  accountsChanged: string[];
   disconnect?: never;
   chainChanged: Chain;
   onConnect: WalletAutoConnectionOption<TWalletId>;