;">/>;
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> );}
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 }); }, });};
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(); }, });};
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(): { connect: (args?: { connectionArgs?: Omit< "personalWallet" >; connectPersonalWallet?: (wallet: W) => Promise<void>; predictAddress: (args: { data?: BytesLike; personalWalletAddress: string; }) => Promise<string>;};
A wallet configuration object from @thirdweb-dev/react package.
Ex: metamaksWallet()
, coinbaseWallet()
, walletConnectWallet()
, embeddedWallet()
, localWallet()
, etc.
Smart Wallet configuration options
The address of the Smart Wallet Factory contract. Must be of type string
.
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
.
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: [...]}
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: [...]}
Your own bundler URL to send user operations to. Uses thirdweb's bundler by default.
Must be a string
.
Your own paymaster URL to send user operations to for gasless transactions. Uses thirdweb's paymaster by default.
Must be a string
.
The entrypoint contract address. Uses v0.6 by default.
Must be a string
.
Whether to deploy the smart wallet when the user signs a message. Defaults to true.
Must be a boolean
.
let returnType: { connect: (args?: { connectionArgs?: Omit< "personalWallet" >; connectPersonalWallet?: (wallet: W) => Promise<void>; predictAddress: (args: { data?: BytesLike; personalWalletAddress: string; }) => Promise<string>;};