useSmartWallet

Hook that allows users to connect their Smart wallet to your dApp.

Before connecting to Smart wallet, a personal wallet must be connected and should be on the same network which Smart wallet is deployed to

You can connect to a personal wallet using either useConnect hook or wallet specific hook - for example: useMetamask

From this state, you are ready to use the useSmartWallet hook in your app:

import { Goerli } from "@thirdweb-dev/chains";
import { useSmartWallet, useWallet } from "@thirdweb-dev/react";
import { SmartWallet } from "@thirdweb-dev/wallets";

const Home = () => {
  const connectToSmartWallet = useSmartWallet();
  const wallet = useWallet();
  const connectToMetamask = useMetamask(); // using metamask as personal wallet

  if (!wallet) {
    return (
      <button
        onClick={() => {
          connectToMetamask({
            chainId: Goerli.chainId,
          });
        }}
      >
        Connect personal wallet
      </button>
    );
  }

  if (wallet instanceof SmartWallet) {
    return <div>Smart wallet is connected</div>;
  }

  return (
    <button
      onClick={async () =>
        await connectToSmartWallet({
          factoryAddress: "FACTORY_ADDRESS", // your own deployed account factory address
          clientId: "{{client_id}}", // api key obtained from the thirdweb dashboard
          chain: Goerli, // chain that the Smart Wallet contract is deployed to.
          personalWallet: wallet,
          gasless: true, // enable or disable gasless transactions
          // ...
        })
      }
    >
      Connect Smart Wallet
    </button>
  );
};

The smartWallet (with all personalWallets configured) need to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

Configuration

Mandatory properties

chain

The chain that the Smart Wallet contract is deployed to.

Either a Chain object, from the @thirdweb-dev/chains package, a chain name, or an RPC URL.

factoryAddress

The address of the Smart Wallet Factory contract.

Must be a string.

gasless

Whether to turn on or off gasless transactions.

• If set to true, all gas fees will be paid by a paymaster.
• If set to false, all gas fees will be paid by the Smart Wallet itself (needs to be funded).

Must be a boolean.

personalWallet

a connected wallet instance of type WalletInstance from @thirdweb-dev/react package

Optional properties

factoryInfo

Customize how the Smart Wallet Factory contract is interacted with. If not provided, the default functions will be used.

Must be a object. The object can contain the following properties:

• createAccount - a function that returns the transaction object to create a new Smart Wallet.
• getAccountAddress - a function that returns the address of the Smart Wallet contract given the owner address.
• abi - optional ABI. If not provided, the ABI will be auto-resolved.

Example:

 {
  createAccount: (factory, owner) => {
    return factory.prepare("customCreateAccount", [
      owner,
      getExtraData(),
    ]);
  },
  getAccountAddress(factory, owner) {
    return factory.call("getAccountAddress", [owner]);
  },
  abi: [...]
}

accountInfo

Customize how the Smart Wallet Account contract is interacted with. If not provided, the default functions will be used.

Must be a object. The object can contain the following properties:

• execute - a function that returns the transaction object to execute an arbitrary transaction.
• getNonce - a function that returns the current nonce of the account.
• abi - optional ABI. If not provided, the ABI will be auto-resolved.

Example:

{
  execute(account, target, value, data) {
    return account.prepare("customExecute", [
      target, value, data
    ]);
  },
  getNonce(account) {
    return account.call("getNonce");
  },
  abi: [...]
}

bundlerUrl

Your own bundler URL to send user operations to. Uses thirdweb's bundler by default.

Must be a string.

paymasterUrl

Your own paymaster URL to send user operations to for gasless transactions. Uses thirdweb's paymaster by default.

Must be a string.

entryPointAddress

The entrypoint contract address. Uses v0.6 by default.

Must be a string.