[SDK] Add all connected wallets in onConnect callbacks

Author: joaquim-verges

.changeset/fair-mails-divide.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Add all connected wallets in all onConnect callbacks

apps/playground-web/src/components/in-app-wallet/ecosystem.tsx

@@ -19,5 +19,5 @@ const getEcosystemWallet = () => {
 export function EcosystemConnectEmbed(
   props?: Omit<ConnectButtonProps, "client" | "theme">,
 ) {
-  return <StyledConnectEmbed {...props} wallets={[getEcosystemWallet()]} />;
+  return <StyledConnectEmbed {...props} wallets={[getEcosystemWallet()]} onConnect={} />;
 }

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -937,13 +937,14 @@ export type ConnectButtonProps = {
    *
    * ```tsx
    * <ConnectButton
-   *  onConnect={(wallet) => {
-   *    console.log("connected to", wallet)
+   *  onConnect={(activeWallet, otherWallets) => {
+   *    console.log("connected to", activeWallet)
+   *    console.log("other wallets that were also connected", otherWallets)
    *  }}
    * />
    * ```
    */
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: (activeWallet: Wallet, otherWallets: Wallet[]) => void;
 
   /**
    * Called when the user disconnects the wallet by clicking on the "Disconnect Wallet" button in the `ConnectButton`'s Details Modal.

packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts

@@ -213,14 +213,15 @@ export type ConnectEmbedProps = {
    *
    * ```tsx
    * <ConnectEmbed
-   *  onConnect={(wallet) => {
-   *    console.log("connected to", wallet)
+   *  onConnect={(activeWallet, otherWallets) => {
+   *    console.log("connected to", activeWallet)
+   *    console.log("other wallets that were also connected", otherWallets)
    *  }}
    * />
    * ```
    * ```
    */
-  onConnect?: (wallet: Wallet) => void;
+  onConnect?: (activeWallet: Wallet, otherWallets: Wallet[]) => void;
 
   /**
    * By default, A "Powered by Thirdweb" branding is shown at the bottom of the embed.

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;

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;

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: {

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(() => {

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;
   },

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);
  *  },
  * });
  * ```