Add onConnect prop on AutoConnect (#2879)

Author: MananTank

.changeset/gorgeous-maps-mate.md

@@ -0,0 +1,6 @@
+---
+"thirdweb": patch
+---
+
+- Add onConnect prop on `AutoConnect` component
+- Call the `onConnect` callback passed to `ConnectButton` and `ConnectEmbed` when wallet is auto-connected

packages/thirdweb/src/react/core/hooks/connection/useAutoConnect.tsx

@@ -109,6 +109,19 @@ export type AutoConnectProps = {
    * />
    */
   accountAbstraction?: SmartWalletOptions;
+
+  /**
+   * Callback to be called on successful auto-connection of last active wallet. The callback is called with the connected wallet
+   *
+   * ```tsx
+   * <AutoConnect
+   *  onConnect={(wallet) => {
+   *    console.log("auto connected to", wallet)
+   *  }}
+   * />
+   * ```
+   */
+  onConnect?: (wallet: Wallet) => void;
 };
 
 /**
@@ -149,7 +162,7 @@ export function AutoConnect(props: AutoConnectProps) {
     accountAbstraction: props.accountAbstraction,
   });
   const { isAutoConnecting } = connectionManager;
-  const { wallets } = props;
+  const { wallets, onConnect } = props;
   const timeout = props.timeout ?? 15000;
   // get the supported wallets from thirdweb provider
   // check the storage for last connected wallets and connect them all
@@ -192,7 +205,20 @@ export function AutoConnect(props: AutoConnectProps) {
             message: `AutoConnect timeout : ${timeout}ms limit exceeded.`,
           });
 
-          connect(activeWallet);
+          // connected wallet could be activeWallet or smart wallet
+          const connectedWallet = await connect(activeWallet);
+
+          if (connectedWallet) {
+            if (onConnect) {
+              try {
+                onConnect(connectedWallet);
+              } catch {
+                // ignore
+              }
+            }
+          } else {
+            setConnectionStatus("disconnected");
+          }
         } catch (e) {
           console.error("Failed to auto connect last active wallet");
           console.error(e);

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectWallet.tsx

@@ -63,6 +63,7 @@ export function ConnectButton(props: ConnectButtonProps) {
           : props.autoConnect?.timeout
       }
       accountAbstraction={props.accountAbstraction}
+      onConnect={props.onConnect}
     />
   );
 

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectWalletProps.ts

@@ -576,28 +576,16 @@ export type ConnectButtonProps = {
   supportedTokens?: SupportedTokens;
 
   /**
-   * Callback to be called on successful connection of wallet. The callback is called with the connected account
+   * Callback to be called on successful connection of wallet - including auto connect.
+   * The callback is called with the connected wallet
    *
    * ```tsx
    * <ConnectButton
-   *  onConnect={(account) => {
-   *    console.log("connected to", account)
+   *  onConnect={(wallet) => {
+   *    console.log("connected to", wallet)
    *  }}
    * />
    * ```
-   *
-   * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` prop instead
-   *
-   * ```tsx
-   * <ConnectButton
-   *  auth={{
-   *   onLogin: () => {
-   *     console.log("wallet connected and signed in")
-   *   }
-   *  }}
-   * />
-   * ```
-   *
    */
   onConnect?: (wallet: Wallet) => void;
 

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -225,26 +225,16 @@ export type ConnectEmbedProps = {
   privacyPolicyUrl?: string;
 
   /**
-   * Callback to be called on successful connection of wallet. The callback is called with the connected account
+   * Callback to be called on successful connection of wallet - including auto-connect.
+   * The callback is called with the connected wallet
    *
    * ```tsx
    * <ConnectEmbed
-   *  onConnect={(account) => {
-   *    console.log("connected to", account)
+   *  onConnect={(wallet) => {
+   *    console.log("connected to", wallet)
    *  }}
    * />
    * ```
-   *
-   * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` prop instead
-   *
-   * ```tsx
-   * <ConnectEmbed
-   *  auth={{
-   *   onLogin: () => {
-   *     console.log("wallet connected and signed in")
-   *   }
-   *  }}
-   * />
    * ```
    */
   onConnect?: (wallet: Wallet) => void;
@@ -366,6 +356,7 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
           ? undefined
           : props.autoConnect?.timeout
       }
+      onConnect={props.onConnect}
     />
   );