feat: Add account abstraction options to useConnect (#2853)

Signed-off-by: Jonas Daniels <jonas.daniels@outlook.com>
Co-authored-by: Manan Tank <manantankm@gmail.com>
Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>

Author: 3 people

.changeset/tricky-clocks-wonder.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Add account abstraction options to `useConnect` and handle smart wallet autoconnection outside of UI components

packages/service-utils/src/core/services.ts

@@ -39,7 +39,7 @@ export const SERVICE_DEFINITIONS = {
   },
   embeddedWallets: {
     name: "embeddedWallets",
-    title: "Embedded Wallets",
+    title: "In-App Wallets",
     description: "E-mail and social login wallets for easy web3 onboarding",
     // all actions allowed
     actions: [],

packages/thirdweb/package.json

@@ -109,54 +109,22 @@
   },
   "typesVersions": {
     "*": {
-      "adapters/*": [
-        "./dist/types/exports/adapters/*.d.ts"
-      ],
-      "auth": [
-        "./dist/types/exports/auth.d.ts"
-      ],
-      "chains": [
-        "./dist/types/exports/chains.d.ts"
-      ],
-      "contract": [
-        "./dist/types/exports/contract.d.ts"
-      ],
-      "deploys": [
-        "./dist/types/exports/deploys.d.ts"
-      ],
-      "event": [
-        "./dist/types/exports/event.d.ts"
-      ],
-      "extensions/*": [
-        "./dist/types/exports/extensions/*.d.ts"
-      ],
-      "pay": [
-        "./dist/types/exports/pay.d.ts"
-      ],
-      "react": [
-        "./dist/types/exports/react.d.ts"
-      ],
-      "react-native": [
-        "./dist/types/exports/react-native.d.ts"
-      ],
-      "rpc": [
-        "./dist/types/exports/rpc.d.ts"
-      ],
-      "storage": [
-        "./dist/types/exports/storage.d.ts"
-      ],
-      "transaction": [
-        "./dist/types/exports/transaction.d.ts"
-      ],
-      "utils": [
-        "./dist/types/exports/utils.d.ts"
-      ],
-      "wallets": [
-        "./dist/types/exports/wallets.d.ts"
-      ],
-      "wallets/*": [
-        "./dist/types/exports/wallets/*.d.ts"
-      ]
+      "adapters/*": ["./dist/types/exports/adapters/*.d.ts"],
+      "auth": ["./dist/types/exports/auth.d.ts"],
+      "chains": ["./dist/types/exports/chains.d.ts"],
+      "contract": ["./dist/types/exports/contract.d.ts"],
+      "deploys": ["./dist/types/exports/deploys.d.ts"],
+      "event": ["./dist/types/exports/event.d.ts"],
+      "extensions/*": ["./dist/types/exports/extensions/*.d.ts"],
+      "pay": ["./dist/types/exports/pay.d.ts"],
+      "react": ["./dist/types/exports/react.d.ts"],
+      "react-native": ["./dist/types/exports/react-native.d.ts"],
+      "rpc": ["./dist/types/exports/rpc.d.ts"],
+      "storage": ["./dist/types/exports/storage.d.ts"],
+      "transaction": ["./dist/types/exports/transaction.d.ts"],
+      "utils": ["./dist/types/exports/utils.d.ts"],
+      "wallets": ["./dist/types/exports/wallets.d.ts"],
+      "wallets/*": ["./dist/types/exports/wallets/*.d.ts"]
     }
   },
   "browser": {

packages/thirdweb/src/exports/react.ts

@@ -54,6 +54,8 @@ export {
   useIsAutoConnecting,
 } from "../react/core/hooks/wallets/wallet-hooks.js";
 
+export type { ConnectManagerOptions } from "../wallets/manager/index.js";
+
 // contract related
 export { useReadContract } from "../react/core/hooks/contract/useReadContract.js";
 export {

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

@@ -1,26 +1,16 @@
 import { useEffect } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
-import { createWallet } from "../../../../wallets/create-wallet.js";
-// import {
-//   getSavedConnectParamsFromStorage,
-//   type WithPersonalWalletConnectionOptions,
-// } from "../../../../wallets/storage/walletStorage.js";
-import type {
-  Wallet,
-  // WalletWithPersonalAccount,
-} from "../../../../wallets/interfaces/wallet.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   getLastConnectedChain,
   getStoredActiveWalletId,
   getStoredConnectedWalletIds,
 } from "../../../../wallets/manager/index.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import { asyncLocalStorage } from "../../../../wallets/storage/asyncLocalStorage.js";
-import { getSavedConnectParamsFromStorage } from "../../../../wallets/storage/walletStorage.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
 import { connectionManager } from "../../connectionManager.js";
 import { timeoutPromise } from "../../utils/timeoutPromise.js";
-// import type { WalletConfig } from "../../types/wallets.js";
 import {
   useConnect,
   useSetActiveWalletConnectionStatus,
@@ -154,9 +144,12 @@ export type AutoConnectProps = {
  */
 export function AutoConnect(props: AutoConnectProps) {
   const setConnectionStatus = useSetActiveWalletConnectionStatus();
-  const { connect } = useConnect();
+  const { connect } = useConnect({
+    client: props.client,
+    accountAbstraction: props.accountAbstraction,
+  });
   const { isAutoConnecting } = connectionManager;
-  const { wallets, accountAbstraction } = props;
+  const { wallets } = props;
   const timeout = props.timeout ?? 15000;
   // get the supported wallets from thirdweb provider
   // check the storage for last connected wallets and connect them all
@@ -182,74 +175,31 @@ export function AutoConnect(props: AutoConnectProps) {
       const lastConnectedChain = await getLastConnectedChain(asyncLocalStorage);
 
       async function handleWalletConnection(wallet: Wallet) {
-        setConnectionStatus("connecting");
         return wallet.autoConnect({
           client: props.client,
           chain: lastConnectedChain ?? undefined,
         });
       }
 
-      if (lastActiveWalletId === "smart") {
-        if (!accountAbstraction) {
-          return;
-        }
-
-        const savedParams = await getSavedConnectParamsFromStorage(
-          asyncLocalStorage,
-          "accountAbstraction",
-        );
-
-        const personalWalletId =
-          savedParams && "personalWalletId" in savedParams
-            ? savedParams.personalWalletId
-            : null;
+      const activeWallet =
+        lastActiveWalletId && wallets.find((w) => w.id === lastActiveWalletId);
 
-        if (personalWalletId) {
-          const personalWallet = wallets.find((w) => w.id === personalWalletId);
-
-          if (personalWallet) {
-            try {
-              const account = await timeoutPromise(
-                handleWalletConnection(personalWallet),
-                {
-                  ms: timeout,
-                  message: `AutoConnect timeout : ${timeout}ms limit exceeded.`,
-                },
-              );
-
-              const smartWallet = createWallet("smart", accountAbstraction);
-              await smartWallet.connect({
-                personalAccount: account,
-                client: props.client,
-              });
-
-              connect(smartWallet);
-            } catch (e) {
-              console.error("Failed to auto connect personal wallet");
-              console.error(e);
-              setConnectionStatus("disconnected");
-            }
-          }
-        }
-      } else {
-        const activeWallet = wallets.find((w) => w.id === lastActiveWalletId);
-
-        if (activeWallet) {
-          try {
-            await timeoutPromise(handleWalletConnection(activeWallet), {
-              ms: timeout,
-              message: `AutoConnect timeout : ${timeout}ms limit exceeded.`,
-            });
+      if (activeWallet) {
+        try {
+          setConnectionStatus("connecting"); // only set connecting status if we are connecting the last active EOA
+          await timeoutPromise(handleWalletConnection(activeWallet), {
+            ms: timeout,
+            message: `AutoConnect timeout : ${timeout}ms limit exceeded.`,
+          });
 
-            connect(activeWallet);
-          } catch (e) {
-            console.error("Failed to auto connect last active wallet");
-            console.error(e);
-            setConnectionStatus("disconnected");
-          }
-        } else {
+          connect(activeWallet);
+        } catch (e) {
+          console.error("Failed to auto connect last active wallet");
+          console.error(e);
           setConnectionStatus("disconnected");
         }
+      } else {
+        setConnectionStatus("disconnected");
       }
 
       // then connect wallets that were last connected but were not set as active
@@ -265,7 +215,6 @@ export function AutoConnect(props: AutoConnectProps) {
         } catch (e) {
           console.error("Failed to auto connect a non-active connected wallet");
           console.error(e);
-          setConnectionStatus("disconnected");
         }
       }
     };

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

@@ -1,5 +1,6 @@
 import { useCallback, useState, useSyncExternalStore } from "react";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { ConnectManagerOptions } from "../../../../wallets/manager/index.js";
 import { connectionManager } from "../../connectionManager.js";
 
 /**
@@ -95,7 +96,7 @@ export function useConnectedWallets() {
  * const setActiveAccount = useSetActiveWallet();
  *
  * // later in your code
- * setActiveAccount(account);
+ * await setActiveAccount(account);
  * ```
  * @walletConnection
  */
@@ -133,26 +134,23 @@ export function useSetActiveWallet() {
  * ```
  * @walletConnection
  */
-export function useConnect() {
-  const { setActiveWallet } = connectionManager;
+export function useConnect(options?: ConnectManagerOptions) {
+  const { connect } = connectionManager;
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  const connect = useCallback(
-    async (options: Wallet | (() => Promise<Wallet>)) => {
+  const handleConnection = useCallback(
+    async (walletOrFn: Wallet | (() => Promise<Wallet>)) => {
       // reset error state
       setError(null);
-      if (typeof options !== "function") {
-        setActiveWallet(options);
-        return options;
+      if (typeof walletOrFn !== "function") {
+        return connect(walletOrFn, options);
       }
 
       setIsConnecting(true);
       try {
-        const wallet = await options();
-        // add the uuid for this wallet
-        setActiveWallet(wallet);
-        return wallet;
+        const w = await walletOrFn();
+        return connect(w, options);
       } catch (e) {
         console.error(e);
         setError(e as Error);
@@ -161,10 +159,10 @@ export function useConnect() {
       }
       return null;
     },
-    [setActiveWallet],
+    [connect, options],
   );
 
-  return { connect, isConnecting, error } as const;
+  return { connect: handleConnection, isConnecting, error } as const;
 }
 
 /**

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

@@ -2,7 +2,7 @@ import { Suspense, lazy, useCallback } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
-import { useConnect } from "../../../../core/hooks/wallets/wallet-hooks.js";
+import { useSetActiveWallet } from "../../../../core/hooks/wallets/wallet-hooks.js";
 import { useSetSelectionData } from "../../../providers/wallet-ui-states-provider.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { WalletSelector } from "../WalletSelector.js";
@@ -39,15 +39,15 @@ export const ConnectModalContent = (props: {
     connectLocale,
     client,
   } = useConnectUI();
-  const { connect } = useConnect();
+  const setActiveWallet = useSetActiveWallet();
   const setSelectionData = useSetSelectionData();
 
   const siweAuth = useSiweAuth(auth);
   const showSignatureScreen = siweAuth.requiresAuth && !siweAuth.isLoggedIn;
 
   const handleConnected = useCallback(
     (wallet: Wallet) => {
-      connect(wallet);
+      setActiveWallet(wallet);
 
       if (onConnect) {
         onConnect(wallet);
@@ -69,7 +69,7 @@ export const ConnectModalContent = (props: {
       setModalVisibility,
       onClose,
       onConnect,
-      connect,
+      setActiveWallet,
       showSignatureScreen,
       setScreen,
       setSelectionData,

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

@@ -1,11 +1,9 @@
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { createWallet } from "../../../../../wallets/create-wallet.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
-import { asyncLocalStorage } from "../../../../../wallets/storage/asyncLocalStorage.js";
-import { saveConnectParamsToStorage } from "../../../../../wallets/storage/walletStorage.js";
 import type { WalletInfo } from "../../../../../wallets/wallet-info.js";
+import { connectionManager } from "../../../../core/connectionManager.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { getSmartWalletLocale } from "../../../wallets/smartWallet/locale/getSmartWalletLocale.js";
@@ -107,31 +105,24 @@ function SmartWalletConnecting(props: {
     if (!personalWallet) {
       throw new Error("No personal wallet");
     }
-    const personalAccount = personalWallet.getAccount();
-    if (!personalAccount) {
-      throw new Error("No personal account");
-    }
 
     setSmartWalletConnectionStatus("connecting");
 
     try {
-      const smartWallet = createWallet("smart", props.accountAbstraction);
-      await smartWallet.connect({
-        personalAccount,
-        client,
-      });
-
-      saveConnectParamsToStorage(asyncLocalStorage, "accountAbstraction", {
-        personalWalletId: personalWallet.id,
-      });
-
-      done(smartWallet);
+      const connected = await connectionManager.handleConnection(
+        personalWallet,
+        {
+          accountAbstraction: props.accountAbstraction,
+          client,
+        },
+      );
+      done(connected);
       setSmartWalletConnectionStatus("idle");
     } catch (e) {
       console.error(e);
       setSmartWalletConnectionStatus("connect-error");
     }
-  }, [client, done, personalWallet, props.accountAbstraction]);
+  }, [done, personalWallet, client, props.accountAbstraction]);
 
   const connectStarted = useRef(false);
   useEffect(() => {