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