useSmartWallet

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

The useSmartWallet() hook will handle connecting both the personal wallet and the Smart Wallet.

import { useSmartWallet } from "@thirdweb-dev/react";

const Home = () => {
  // Here we use metamask as the personal wallet
  const { connect } = useSmartWallet(metamaskWallet(), {
    factoryAddress: "0x...",
    gasless: true,
  });

  return (
    <button
      onClick={async () =>
        await connect();
      }
    >
      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.

Using EmbeddedWallet as the personal signer

You can have your users sign in with email or social and then connect their associated Smart Wallet.

const { connect } = useSmartWallet(embeddedWallet(), {
  factoryAddress: factoryAddress,
  gasless: true,
});

const onClick = async () => {
  await connect({
    connectPersonalWallet: async (embeddedWallet) => {
      // login with google and connect the embedded wallet
      const authResult = await embeddedWallet.authenticate({
        strategy: "google",
      });
      await embeddedWallet.connect({ authResult });
    },
  });
};

Using LocalWallet as the personal signer

You can generate wallets on device for your users and connect to the associated Smart Wallet.

const { connect } = useSmartWallet(localWallet(), {
  factoryAddress: "0x...",
  gasless: true,
});

const onClick = async () => {
  await connect({
    connectPersonalWallet: async (localWallet) => {
      // Generate and connect s local wallet before using it as the personal signer
      await localWallet.generate();
      await localWallet.connect();
    },
  });
};

Predicting the Smart Wallet address

THe useSmartWallet() also returns a function to predict a smart wallet address given a personal wallet address before connecting to it.

const { predictAddress } = useSmartWallet(localWallet(), {
  factoryAddress: "0x...",
  gasless: true,
});

const onClick = async () => {
  const address = await predictAddress({
    personalWalletAddress: "0x...",
  });
  console.log("Predicted Smart Wallet address", address);
};

Connect options

connectPersonalWallet (optional)

A function to determine how to connect to the given personal wallet. Gives a created instance of the wallet as an argument.

accountAddress (optional)

The specific smart wallet address to connect to.

Configuration

Mandatory properties

personalWallet

A wallet configuration object from @thirdweb-dev/react package.

Ex: metamaksWallet(), coinbaseWallet(), walletConnectWallet(), embeddedWallet(), localWallet(), etc.

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.

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.