Docs

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);
};

Parameters

Returns