feat: default account factory for smart accounts + switch chain support (#2917)

Author: joaquim-verges

.changeset/brown-bikes-lick.md

@@ -0,0 +1,8 @@
+---
+"thirdweb": minor
+---
+
+Factory address is now optional in `accountAbstraction` and `smartWallet` options.
+
+- Defaults to a global permissionless factory deployed on all chains.
+- Also enables switching chains for smart wallets, as long as the factory is deployed

packages/thirdweb/src/contract/verification/index.ts

@@ -33,7 +33,7 @@ type VerifyContractOptions = {
  * @example
  * ```ts
  * import { getContract } from "thirdweb/contract";
- * import { verifyContract } from "thirdweb/contract/verification";
+ * import { verifyContract } from "thirdweb/contract";
  *
  * const contract = getContract({ ... });
  * const verificationResult = await verifyContract({
@@ -162,7 +162,7 @@ type CheckVerificationStatusOptions = {
  * @throws An error if the verification status check fails.
  * @example
  * ```ts
- * import { checkVerificationStatus } from "thirdweb/contract/verification";
+ * import { checkVerificationStatus } from "thirdweb/contract";
  * const verificationStatus = await checkVerificationStatus({
  *  explorerApiUrl: "https://api.polygonscan.com/api",
  *  explorerApiKey: "YOUR_API_KEY",

packages/thirdweb/src/exports/wallets/smart.ts

@@ -7,4 +7,7 @@ export type {
   PaymasterResult,
 } from "../../wallets/smart/types.js";
 
-export { ENTRYPOINT_ADDRESS_v0_6 } from "../../wallets/smart/lib/constants.js";
+export {
+  ENTRYPOINT_ADDRESS_v0_6,
+  DEFAULT_ACCOUNT_FACTORY,
+} from "../../wallets/smart/lib/constants.js";

packages/thirdweb/src/react/web/ui/TransactionButton/index.tsx

@@ -11,6 +11,7 @@ import { useSendTransactionCore } from "../../../core/hooks/contract/useSendTran
 import {
   useActiveAccount,
   useActiveWallet,
+  useSwitchActiveWalletChain,
 } from "../../../core/hooks/wallets/wallet-hooks.js";
 import { Spinner } from "../components/Spinner.js";
 import { Button } from "../components/buttons.js";
@@ -105,6 +106,7 @@ export function TransactionButton(props: TransactionButtonProps) {
   const account = useActiveAccount();
   const wallet = useActiveWallet();
   const [isPending, setIsPending] = useState(false);
+  const switchChain = useSwitchActiveWalletChain();
 
   const sendTransaction = useSendTransactionCore(undefined, gasless);
 
@@ -123,7 +125,7 @@ export function TransactionButton(props: TransactionButtonProps) {
           const resolvedTx = await transaction();
 
           if (wallet && wallet.getChain()?.id !== resolvedTx.chain.id) {
-            await wallet?.switchChain(resolvedTx.chain);
+            await switchChain(resolvedTx.chain);
           }
 
           const result = await sendTransaction.mutateAsync(resolvedTx);

packages/thirdweb/src/wallets/create-wallet.ts

@@ -9,11 +9,15 @@ import type {
   CreateWalletArgs,
   InjectedConnectOptions,
   WalletAutoConnectionOption,
+  WalletConnectionOption,
   WalletId,
 } from "./wallet-types.js";
 
 import { trackConnect } from "../analytics/track.js";
+import { getContract } from "../contract/contract.js";
+import { isContractDeployed } from "../exports/utils.js";
 import { COINBASE } from "./constants.js";
+import { DEFAULT_ACCOUNT_FACTORY } from "./smart/lib/constants.js";
 import type { WCConnectOptions } from "./wallet-connect/types.js";
 import { createWalletEmitter } from "./wallet-emitter.js";
 
@@ -300,9 +304,10 @@ export function walletConnect() {
 export function smartWallet(
   createOptions: CreateWalletArgs<"smart">[1],
 ): Wallet<"smart"> {
-  const emitter = createWalletEmitter<"inApp">();
+  const emitter = createWalletEmitter<"smart">();
   let account: Account | undefined = undefined;
   let chain: Chain | undefined = undefined;
+  let lastConnectOptions: WalletConnectionOption<"smart"> | undefined;
 
   const _smartWallet: Wallet<"smart"> = {
     id: "smart",
@@ -318,6 +323,7 @@ export function smartWallet(
         createOptions,
       );
       // set the states
+      lastConnectOptions = options;
       account = connectedAccount;
       chain = connectedChain;
       trackConnect({
@@ -336,6 +342,7 @@ export function smartWallet(
         createOptions,
       );
       // set the states
+      lastConnectOptions = options;
       account = connectedAccount;
       chain = connectedChain;
       trackConnect({
@@ -344,17 +351,42 @@ export function smartWallet(
         walletAddress: account.address,
       });
       // return account
+      emitter.emit("accountChanged", account);
       return account;
     },
     disconnect: async () => {
       account = undefined;
       chain = undefined;
-      emitter.emit("disconnect", undefined);
       const { disconnectSmartWallet } = await import("./smart/index.js");
       await disconnectSmartWallet(_smartWallet);
+      emitter.emit("disconnect", undefined);
     },
-    switchChain: async () => {
-      throw new Error("Not implemented yet");
+    switchChain: async (newChain: Chain) => {
+      if (!lastConnectOptions) {
+        throw new Error("Cannot switch chain without a previous connection");
+      }
+      // check if factory is deployed
+      const factory = getContract({
+        address: createOptions.factoryAddress || DEFAULT_ACCOUNT_FACTORY,
+        chain: newChain,
+        client: lastConnectOptions.client,
+      });
+      const isDeployed = await isContractDeployed(factory);
+      if (!isDeployed) {
+        throw new Error(
+          `Factory contract not deployed on chain: ${newChain.id}`,
+        );
+      }
+      const { connectSmartWallet } = await import("./smart/index.js");
+      const [connectedAccount, connectedChain] = await connectSmartWallet(
+        _smartWallet,
+        { ...lastConnectOptions, chain: newChain },
+        createOptions,
+      );
+      // set the states
+      account = connectedAccount;
+      chain = connectedChain;
+      emitter.emit("chainChanged", newChain);
     },
   };
 

packages/thirdweb/src/wallets/manager/index.ts

@@ -218,7 +218,24 @@ export function createConnectionManager(storage: AsyncStorage) {
       throw new Error("wallet does not support switching chains");
     }
 
-    await wallet.switchChain(chain);
+    if (wallet.id === "smart") {
+      // also switch personal wallet
+      const personalWalletId = await getStoredActiveWalletId(storage);
+      if (personalWalletId) {
+        const personalWallet = connectedWallets
+          .getValue()
+          .find((w) => w.id === personalWalletId);
+        if (personalWallet) {
+          await personalWallet.switchChain(chain);
+        }
+      }
+      await wallet.switchChain(chain);
+      // reset the active wallet as switch chain recreates a new smart account
+      handleSetActiveWallet(wallet);
+    } else {
+      await wallet.switchChain(chain);
+    }
+
     // for wallets that dont implement events, just set it manually
     activeWalletChainStore.setValue(wallet.getChain());
   };

packages/thirdweb/src/wallets/smart/index.ts

@@ -5,7 +5,6 @@ import type {
   TypedDataDomain,
 } from "viem";
 import type { Chain } from "../../chains/types.js";
-import type { ThirdwebClient } from "../../client/client.js";
 import { type ThirdwebContract, getContract } from "../../contract/contract.js";
 import type { WaitForReceiptOptions } from "../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../transaction/prepare-transaction.js";
@@ -26,8 +25,9 @@ import {
   prepareBatchExecute,
   prepareExecute,
 } from "./lib/calls.js";
+import { DEFAULT_ACCOUNT_FACTORY } from "./lib/constants.js";
 import { createUnsignedUserOp, signUserOp } from "./lib/userop.js";
-import type { SmartWalletOptions } from "./types.js";
+import type { SmartAccountOptions } from "./types.js";
 
 /**
  * We can get the personal account for given smart account but not the other way around - this map gives us the reverse lookup
@@ -55,8 +55,8 @@ export async function connectSmartWallet(
   }
 
   const options = creationOptions;
+  const factoryAddress = options.factoryAddress ?? DEFAULT_ACCOUNT_FACTORY;
   const chain = connectChain ?? options.chain;
-  const factoryAddress = options.factoryAddress;
 
   const factoryContract = getContract({
     client: client,
@@ -82,8 +82,13 @@ export async function connectSmartWallet(
     chain,
   });
 
+  const sponsorGas =
+    "gasless" in options ? options.gasless : options.sponsorGas;
+
   const account = await createSmartAccount({
     ...options,
+    chain,
+    sponsorGas,
     personalAccount,
     accountContract,
     factoryContract,
@@ -112,14 +117,9 @@ export async function disconnectSmartWallet(
 }
 
 async function createSmartAccount(
-  options: SmartWalletOptions & {
-    personalAccount: Account;
-    factoryContract: ThirdwebContract;
-    accountContract: ThirdwebContract;
-    client: ThirdwebClient;
-  },
+  options: SmartAccountOptions,
 ): Promise<Account> {
-  const { accountContract, factoryContract } = options;
+  const { accountContract } = options;
   const account = {
     address: accountContract.address,
     async sendTransaction(transaction: SendTransactionOption) {
@@ -129,8 +129,6 @@ async function createSmartAccount(
         transaction,
       });
       return _sendUserOp({
-        factoryContract,
-        accountContract,
         executeTx,
         options,
       });
@@ -142,8 +140,6 @@ async function createSmartAccount(
         transactions,
       });
       return _sendUserOp({
-        factoryContract,
-        accountContract,
         executeTx,
         options,
       });
@@ -321,7 +317,7 @@ async function createSmartAccount(
 }
 
 async function _deployAccount(args: {
-  options: SmartWalletOptions & { client: ThirdwebClient };
+  options: SmartAccountOptions;
   account: Account;
   accountContract: ThirdwebContract;
 }) {
@@ -344,18 +340,11 @@ async function _deployAccount(args: {
 }
 
 async function _sendUserOp(args: {
-  factoryContract: ThirdwebContract;
-  accountContract: ThirdwebContract;
   executeTx: PreparedTransaction;
-  options: SmartWalletOptions & {
-    personalAccount: Account;
-    client: ThirdwebClient;
-  };
+  options: SmartAccountOptions;
 }): Promise<WaitForReceiptOptions> {
-  const { factoryContract, accountContract, executeTx, options } = args;
+  const { executeTx, options } = args;
   const unsignedUserOp = await createUnsignedUserOp({
-    factoryContract,
-    accountContract,
     executeTx,
     options,
   });
@@ -381,10 +370,7 @@ async function _sendUserOp(args: {
 }
 
 async function waitForUserOpReceipt(args: {
-  options: SmartWalletOptions & {
-    personalAccount: Account;
-    client: ThirdwebClient;
-  };
+  options: SmartAccountOptions;
   userOpHash: Hex;
 }): Promise<TransactionReceipt> {
   const { options, userOpHash } = args;

packages/thirdweb/src/wallets/smart/lib/bundler.ts

@@ -1,5 +1,4 @@
 import { decodeErrorResult } from "viem";
-import type { ThirdwebClient } from "../../../client/client.js";
 import { parseEventLogs } from "../../../event/actions/parse-logs.js";
 import { userOperationRevertReasonEvent } from "../../../extensions/erc4337/__generated__/IEntryPoint/events/UserOperationRevertReason.js";
 import type { TransactionReceipt } from "../../../transaction/types.js";
@@ -8,7 +7,7 @@ import { getClientFetch } from "../../../utils/fetch.js";
 import type {
   EstimationResult,
   GasPriceResult,
-  SmartWalletOptions,
+  SmartAccountOptions,
   UserOperation,
 } from "../types.js";
 import {
@@ -24,7 +23,7 @@ import { hexlifyUserOp } from "./utils.js";
  */
 export async function bundleUserOp(args: {
   userOp: UserOperation;
-  options: SmartWalletOptions & { client: ThirdwebClient };
+  options: SmartAccountOptions;
 }): Promise<Hex> {
   return sendBundlerRequest({
     ...args,
@@ -41,7 +40,7 @@ export async function bundleUserOp(args: {
  */
 export async function estimateUserOpGas(args: {
   userOp: UserOperation;
-  options: SmartWalletOptions & { client: ThirdwebClient };
+  options: SmartAccountOptions;
 }): Promise<EstimationResult> {
   const res = await sendBundlerRequest({
     ...args,
@@ -65,7 +64,7 @@ export async function estimateUserOpGas(args: {
  * @internal
  */
 export async function getUserOpGasPrice(args: {
-  options: SmartWalletOptions & { client: ThirdwebClient };
+  options: SmartAccountOptions;
 }): Promise<GasPriceResult> {
   const res = await sendBundlerRequest({
     ...args,
@@ -84,7 +83,7 @@ export async function getUserOpGasPrice(args: {
  */
 export async function getUserOpReceipt(args: {
   userOpHash: Hex;
-  options: SmartWalletOptions & { client: ThirdwebClient };
+  options: SmartAccountOptions;
 }): Promise<TransactionReceipt | undefined> {
   const res = await sendBundlerRequest({
     ...args,
@@ -117,7 +116,7 @@ export async function getUserOpReceipt(args: {
 }
 
 async function sendBundlerRequest(args: {
-  options: SmartWalletOptions & { client: ThirdwebClient };
+  options: SmartAccountOptions;
   operation:
     | "eth_estimateUserOperationGas"
     | "eth_sendUserOperation"

packages/thirdweb/src/wallets/smart/lib/calls.ts

@@ -3,11 +3,8 @@ import { prepareContractCall } from "../../../transaction/prepare-contract-call.
 import type { PreparedTransaction } from "../../../transaction/prepare-transaction.js";
 import { readContract } from "../../../transaction/read-contract.js";
 import { stringToHex } from "../../../utils/encoding/hex.js";
-import type {
-  Account,
-  SendTransactionOption,
-} from "../../interfaces/wallet.js";
-import type { SmartWalletOptions } from "../types.ts";
+import type { SendTransactionOption } from "../../interfaces/wallet.js";
+import type { SmartAccountOptions, SmartWalletOptions } from "../types.ts";
 
 /**
  * @internal
@@ -39,7 +36,7 @@ export async function predictAddress(
  */
 export function prepareCreateAccount(args: {
   factoryContract: ThirdwebContract;
-  options: SmartWalletOptions & { personalAccount: Account };
+  options: SmartAccountOptions;
 }): PreparedTransaction {
   const { factoryContract, options } = args;
   if (options.overrides?.createAccount) {
@@ -60,7 +57,7 @@ export function prepareCreateAccount(args: {
  */
 export function prepareExecute(args: {
   accountContract: ThirdwebContract;
-  options: SmartWalletOptions;
+  options: SmartAccountOptions;
   transaction: SendTransactionOption;
 }): PreparedTransaction {
   const { accountContract, options, transaction } = args;
@@ -83,7 +80,7 @@ export function prepareExecute(args: {
  */
 export function prepareBatchExecute(args: {
   accountContract: ThirdwebContract;
-  options: SmartWalletOptions;
+  options: SmartAccountOptions;
   transactions: SendTransactionOption[];
 }): PreparedTransaction {
   const { accountContract, options, transactions } = args;