Call onConnect with connected account in CW components

thirdweb-dev · Feb 13, 2024 · b1d540c · b1d540c
1 parent c9c1add
commit b1d540c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/packages/thirdweb/src/react/providers/wallet-ui-states-provider.tsx b/packages/thirdweb/src/react/providers/wallet-ui-states-provider.tsx
@@ -3,6 +3,7 @@ import type { WelcomeScreen } from "../ui/ConnectWallet/screens/types.js";
 import { useTWLocale } from "./locale-provider.js";
 import type { Theme } from "../ui/design-system/index.js";
 import { canFitWideModal } from "../utils/canFitWideModal.js";
+import type { Account } from "../../wallets/interfaces/wallet.js";
 
 type BoolSetter = (value: boolean) => void;
 
@@ -21,7 +22,7 @@ export type ModalConfig = {
     onLogout?: () => void;
   };
   isEmbed?: boolean;
-  onConnect?: () => void;
+  onConnect?: (account: Account) => void;
   chainId?: bigint;
   chains?: bigint[];
   showThirdwebBranding?: boolean;
@@ -61,7 +62,7 @@ export const WalletUIStatesProvider = (
       onLogin?: (token: string) => void;
       onLogout?: () => void;
     };
-    onConnect?: () => void;
+    onConnect?: (account: Account) => void;
     chainId?: bigint;
     chains?: bigint[];
     showThirdwebBranding?: boolean;

diff --git a/packages/thirdweb/src/react/ui/ConnectWallet/ConnectWalletProps.ts b/packages/thirdweb/src/react/ui/ConnectWallet/ConnectWalletProps.ts
@@ -1,3 +1,4 @@
+import type { Account } from "../../../wallets/interfaces/wallet.js";
 import { type Theme } from "../design-system/index.js";
 import type { NetworkSelectorProps } from "./NetworkSelector.js";
 import { type SupportedTokens } from "./defaultTokens.js";
@@ -374,12 +375,12 @@ export type ConnectWalletProps = {
   supportedTokens?: SupportedTokens;
 
   /**
-   * Callback to be called on successful connection of wallet
+   * Callback to be called on successful connection of wallet. The callback is called with the connected account
    *
    * ```tsx
    * <ConnectWallet
-   *  onConnect={() => {
-   *    console.log("wallet connected")
+   *  onConnect={(account) => {
+   *    console.log("connected to", account)
    *  }}
    * />
    * ```
@@ -397,5 +398,5 @@ export type ConnectWalletProps = {
    * ```
    *
    */
-  onConnect?: () => void;
+  onConnect?: (account: Account) => void;
 };
diff --git a/packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectEmbed.tsx
@@ -26,6 +26,7 @@ import {
 } from "../../../providers/wallet-provider.js";
 import { ConnectModalContent } from "./ConnectModalContent.js";
 import { canFitWideModal } from "../../../utils/canFitWideModal.js";
+import type { Account } from "../../../../wallets/interfaces/wallet.js";
 
 export type ConnectEmbedProps = {
   /**
@@ -101,12 +102,12 @@ export type ConnectEmbedProps = {
   };
 
   /**
-   * Callback to be called on successful connection of wallet
+   * Callback to be called on successful connection of wallet. The callback is called with the connected account
    *
    * ```tsx
    * <ConnectEmbed
-   *  onConnect={() => {
-   *    console.log("wallet connected")
+   *  onConnect={(account) => {
+   *    console.log("connected to", account)
    *  }}
    * />
    * ```
@@ -124,7 +125,7 @@ export type ConnectEmbedProps = {
    * ```
    *
    */
-  onConnect?: () => void;
+  onConnect?: (account: Account) => void;
 
   /**
    * By default, A "Powered by Thirdweb" branding is shown at the bottom of the embed.
@@ -334,8 +335,7 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
  * @internal
  */
 const ConnectEmbedContent = (
-  props: Omit<ConnectEmbedProps, "onConnect"> & {
-    onConnect?: () => void;
+  props: ConnectEmbedProps & {
     loginOptional?: boolean;
   },
 ) => {

diff --git a/packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModalContent.tsx b/packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModalContent.tsx
@@ -52,7 +52,7 @@ export const ConnectModalContent = (props: {
       connect(account);
 
       if (onConnect) {
-        onConnect();
+        onConnect(account);
       }
 
       const requiresSignIn = false;

diff --git a/packages/thirdweb/src/wallets/interfaces/wallet.ts b/packages/thirdweb/src/wallets/interfaces/wallet.ts
@@ -59,7 +59,6 @@ export type Account = {
   // TODO: figure out a path to remove this (or reduce it to the minimum possible interface)
   /**
    * The wallet that the account belongs to
-   * @internal
    */
   wallet: Wallet;
 };