[SDK] Add all connected wallets in onConnect callbacks

joaquim-verges · joaquim-verges · commit 182237021620 · 2025-11-13T08:57:13.000+13:00
diff --git a/.changeset/fair-mails-divide.md b/.changeset/fair-mails-divide.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Add all connected wallets in all onConnect callbacks
diff --git a/packages/thirdweb/src/exports/react.native.ts b/packages/thirdweb/src/exports/react.native.ts
@@ -17,7 +17,14 @@ export type {
   ConnectButton_detailsButtonOptions,
   ConnectButton_detailsModalOptions,
   ConnectButtonProps,
+  DirectPaymentOptions,
+  FundWalletOptions,
+  PaymentInfo,
+  PayUIOptions,
+  TransactionOptions,
 } from "../react/core/hooks/connection/ConnectButtonProps.js";
+export type { ConnectEmbedProps } from "../react/core/hooks/connection/ConnectEmbedProps.js";
+export type { OnConnectCallback } from "../react/core/hooks/connection/types.js";
 export { useContractEvents } from "../react/core/hooks/contract/useContractEvents.js";
 // contract
 export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";
diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts
@@ -23,6 +23,7 @@ export type {
   TransactionOptions,
 } from "../react/core/hooks/connection/ConnectButtonProps.js";
 export type { ConnectEmbedProps } from "../react/core/hooks/connection/ConnectEmbedProps.js";
+export type { OnConnectCallback } from "../react/core/hooks/connection/types.js";
 export { useContractEvents } from "../react/core/hooks/contract/useContractEvents.js";
 // contract
 export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";
diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts
@@ -25,6 +25,7 @@ import type {
   TokenInfo,
 } from "../../utils/defaultTokens.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
+import type { OnConnectCallback } from "./types.js";
 
 export type PaymentInfo = Prettify<
   {
@@ -937,13 +938,14 @@ export type ConnectButtonProps = {
    *
    * ```tsx
    * <ConnectButton
-   *  onConnect={(wallet) => {
-   *    console.log("connected to", wallet)
+   *  onConnect={(activeWallet, allConnectedWallets) => {
+   *    console.log("connected to", activeWallet)
+   *    console.log("all connected wallets", allConnectedWallets)
    *  }}
    * />
    * ```
    */
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: OnConnectCallback;
 
   /**
    * Called when the user disconnects the wallet by clicking on the "Disconnect Wallet" button in the `ConnectButton`'s Details Modal.
diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts
@@ -8,6 +8,7 @@ import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
+import type { OnConnectCallback } from "./types.js";
 
 export type ConnectEmbedProps = {
   /**
@@ -213,14 +214,15 @@ export type ConnectEmbedProps = {
    *
    * ```tsx
    * <ConnectEmbed
-   *  onConnect={(wallet) => {
-   *    console.log("connected to", wallet)
+   *  onConnect={(activeWallet, allConnectedWallets) => {
+   *    console.log("connected to", activeWallet)
+   *    console.log("all connected wallets", allConnectedWallets)
    *  }}
    * />
    * ```
    * ```
    */
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: OnConnectCallback;
 
   /**
    * By default, A "Powered by Thirdweb" branding is shown at the bottom of the embed.
diff --git a/packages/thirdweb/src/react/core/hooks/connection/types.ts b/packages/thirdweb/src/react/core/hooks/connection/types.ts
@@ -0,0 +1,3 @@
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+
+export type OnConnectCallback = (activeWallet: Wallet, otherWallets: Wallet[]) => void;
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
@@ -40,6 +40,7 @@ import type { ConnectLocale } from "../locale/types.js";
 import type { WelcomeScreen } from "../screens/types.js";
 import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
+import type { OnConnectCallback } from "../../../../core/hooks/connection/types.js";
 
 /**
  * An inline wallet connection component that allows to:
@@ -354,7 +355,7 @@ const ConnectEmbedContent = (props: {
     | true
     | undefined;
   localeId: LocaleId;
-  onConnect: ((wallet: Wallet) => void) | undefined;
+  onConnect: OnConnectCallback | undefined;
   recommendedWallets: Wallet[] | undefined;
   showAllWallets: boolean | undefined;
   hiddenWallets: WalletId[] | undefined;
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx
@@ -19,14 +19,15 @@ import type { ConnectLocale } from "../locale/types.js";
 import type { WelcomeScreen } from "../screens/types.js";
 import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
+import type { OnConnectCallback } from "../../../../core/hooks/connection/types.js";
 
 type ConnectModalOptions = {
   onClose?: () => void;
   shouldSetActive: boolean;
   wallets: Wallet[];
   accountAbstraction: SmartWalletOptions | undefined;
   auth: SiweAuthOptions | undefined;
-  onConnect: ((wallet: Wallet) => void) | undefined;
+  onConnect: OnConnectCallback | undefined;
   size: "compact" | "wide";
   welcomeScreen: WelcomeScreen | undefined;
   meta: {
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx
@@ -28,6 +28,7 @@ import {
 } from "./ConnectModalSkeleton.js";
 import { SmartConnectUI } from "./SmartWalletConnectUI.js";
 import { type ScreenSetup, ScreenSetupContext } from "./screen.js";
+import type { OnConnectCallback } from "../../../../core/hooks/connection/types.js";
 
 const AllWalletsUI = /* @__PURE__ */ lazy(() => import("./AllWalletsUI.js"));
 
@@ -43,7 +44,7 @@ export const ConnectModalContent = (props: {
   wallets: Wallet[];
   accountAbstraction: SmartWalletOptions | undefined;
   auth: SiweAuthOptions | undefined;
-  onConnect: ((wallet: Wallet) => void) | undefined;
+  onConnect: OnConnectCallback | undefined;
   size: "compact" | "wide";
   meta: {
     title?: string;
@@ -93,7 +94,7 @@ export const ConnectModalContent = (props: {
       }
 
       if (props.onConnect) {
-        props.onConnect(wallet);
+        props.onConnect(wallet, connectionManager.connectedWallets.getValue());
       }
 
       onModalUnmount(() => {
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/useConnectModal.tsx
@@ -16,6 +16,7 @@ import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
 import ConnectModal from "./Modal/ConnectModal.js";
 import type { WelcomeScreen } from "./screens/types.js";
+import type { OnConnectCallback } from "../../../core/hooks/connection/types.js";
 
 /**
  * hook that allows you to open the Connect UI in a Modal to prompt the user to connect wallet.
@@ -90,7 +91,7 @@ export function useConnectModal() {
 
 function Modal(
   props: UseConnectModalOptions & {
-    onConnect: (wallet: Wallet) => void;
+    onConnect: OnConnectCallback;
     onClose: () => void;
     connectLocale: ConnectLocale;
   },
diff --git a/packages/thirdweb/src/wallets/connection/autoConnect.ts b/packages/thirdweb/src/wallets/connection/autoConnect.ts
@@ -17,8 +17,9 @@ import type { AutoConnectProps } from "./types.js";
  *
  * const autoConnected = await autoConnect({
  *  client,
- *  onConnect: (wallet) => {
- *    console.log("wallet", wallet);
+ *  onConnect: (activeWallet, allConnectedWallets) => {
+ *    console.log("active wallet", activeWallet);
+ *    console.log("all connected wallets", allConnectedWallets);
  *  },
  * });
  * ```
diff --git a/packages/thirdweb/src/wallets/connection/autoConnectCore.ts b/packages/thirdweb/src/wallets/connection/autoConnectCore.ts
@@ -152,22 +152,12 @@ const _autoConnectCore = async ({
 
     try {
       // connected wallet could be activeWallet or smart wallet
-      const connectedWallet = await (connectOverride
+      await (connectOverride
         ? connectOverride(activeWallet)
         : manager.connect(activeWallet, {
             accountAbstraction: props.accountAbstraction,
             client: props.client,
           }));
-      if (connectedWallet) {
-        autoConnected = true;
-        try {
-          onConnect?.(connectedWallet);
-        } catch {
-          // ignore
-        }
-      } else {
-        manager.activeWalletConnectionStatusStore.setValue("disconnected");
-      }
     } catch (e) {
       if (e instanceof Error) {
         console.warn("Error auto connecting wallet:", e.message);
@@ -216,6 +206,20 @@ const _autoConnectCore = async ({
     });
   }
   manager.isAutoConnecting.setValue(false);
+
+  const connectedActiveWallet = manager.activeWalletStore.getValue();
+  const allConnectedWallets = manager.connectedWallets.getValue();
+  if (connectedActiveWallet) {
+    autoConnected = true;
+    try {
+      onConnect?.(connectedActiveWallet, allConnectedWallets);
+    } catch (e){
+      console.error("Error calling onConnect callback:", e);
+    }
+  } else {
+    manager.activeWalletConnectionStatusStore.setValue("disconnected");
+  }
+
   return autoConnected; // useQuery needs a return value
 };
 
diff --git a/packages/thirdweb/src/wallets/connection/types.ts b/packages/thirdweb/src/wallets/connection/types.ts
@@ -101,13 +101,14 @@ export type AutoConnectProps = {
    *
    * ```tsx
    * <AutoConnect
-   *  onConnect={(wallet) => {
-   *    console.log("auto connected to", wallet)
+   *  onConnect={(activeWallet, otherWallets) => {
+   *    console.log("auto connected to", activeWallet)
+   *    console.log("other wallets that were also connected", otherWallets)
    *  }}
    * />
    * ```
    */
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: (activeWallet: Wallet, otherWallets: Wallet[]) => void;
 
   /**
    * Optional chain to autoconnect to
diff --git a/packages/thirdweb/src/wallets/manager/index.ts b/packages/thirdweb/src/wallets/manager/index.ts
@@ -1,6 +1,7 @@
 import type { Chain } from "../../chains/types.js";
 import { cacheChains } from "../../chains/utils.js";
 import type { ThirdwebClient } from "../../client/client.js";
+import type { OnConnectCallback } from "../../react/core/hooks/connection/types.js";
 import { computedStore } from "../../reactive/computedStore.js";
 import { effect } from "../../reactive/effect.js";
 import { createStore } from "../../reactive/store.js";
@@ -29,7 +30,7 @@ export type ConnectManagerOptions = {
   client: ThirdwebClient;
   accountAbstraction?: SmartWalletOptions;
   setWalletAsActive?: boolean;
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: OnConnectCallback;
 };
 
 /**
@@ -158,7 +159,7 @@ export function createConnectionManager(storage: AsyncStorage) {
     wallet.subscribe("accountChanged", async () => {
       // We reimplement connect here to prevent memory leaks
       const newWallet = await handleConnection(wallet, options);
-      options?.onConnect?.(newWallet);
+      options?.onConnect?.(newWallet, connectedWallets.getValue());
     });
 
     return activeWallet;
@@ -167,7 +168,7 @@ export function createConnectionManager(storage: AsyncStorage) {
   const connect = async (wallet: Wallet, options?: ConnectManagerOptions) => {
     // connectedWallet can be either wallet or smartWallet
     const connectedWallet = await handleConnection(wallet, options);
-    options?.onConnect?.(connectedWallet);
+    options?.onConnect?.(connectedWallet, connectedWallets.getValue());
     return connectedWallet;
   };
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"thirdweb": minor
 +---
++
 +Add all connected wallets in all onConnect callbacks
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";`
	`2`	`+`
	`3`	`+export type OnConnectCallback = (activeWallet: Wallet, otherWallets: Wallet[]) => void;`