thirdwebDocs

useSmartWallet

Defined in

Hook to connect Smart wallet

useSmartWallet() handles connecting both the personal wallet and the Smart Wallet.

The smartWallet() also need to be added in ThirdwebProvider 's supportedWallets prop to enable auto-connection on page load

Example

Set up ThirdwebProvider with supportedWallets

<ThirdwebProvider
  supportedWallets={[
    smartWallet(metamaskWallet()),
    smartWallet(coinbaseWallet()),
    // ...etc
  ]}
/>;

And then use the hook in your app to connect smart wallet

import { useSmartWallet } from "@thirdweb-dev/react";
 
function Example() {
  // 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>
  );
}

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);
};
function useSmartWallet(
  personalWallet: WalletConfig<W>,
): {
  connect: (args?: {
    connectionArgs?: Omit<
      "personalWallet"
    >;
    connectPersonalWallet?: (wallet: W) => Promise<void>;
  }) => Promise<SmartWallet>;
  predictAddress: (args: {
    data?: BytesLike;
    personalWalletAddress: string;
  }) => Promise<string>;
};

Parameters

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

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

Type

let personalWallet: WalletConfig<W>;

Smart Wallet configuration options

factoryAddress (required)

The address of the Smart Wallet Factory contract. Must be of type string .

gasless (required)

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 .

factoryInfo (optional)

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.

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

accountInfo (optional)

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.

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

bundlerUrl (optional)

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

Must be a string .

paymasterUrl (optional)

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 .

deployOnSign

Whether to deploy the smart wallet when the user signs a message. Defaults to true.

Must be a boolean .

Type

Returns

let returnType: {
  connect: (args?: {
    connectionArgs?: Omit<
      "personalWallet"
    >;
    connectPersonalWallet?: (wallet: W) => Promise<void>;
  }) => Promise<SmartWallet>;
  predictAddress: (args: {
    data?: BytesLike;
    personalWalletAddress: string;
  }) => Promise<string>;
};