Appearance
Using smart wallets
Once you have configured smart wallets in the Privy Dashboard, you can use them in your application in just a few lines of code.
Setup
To set up your app with smart wallets, first import the SmartWalletsProvider
component from @privy-io/react-auth/smart-wallets
and wrap your app with it.
The SmartWalletsProvider
must wrap any component or page that will use smart wallets. We reccomend to render it as close to the root of your application as possible, nested within your PrivyProvider
.
tsx
import {PrivyProvider} from '@privy-io/react-auth';
import {SmartWalletsProvider} from '@privy-io/react-auth/smart-wallets';
export default function Providers({children}: {children: React.ReactNode}) {
return (
<PrivyProvider appId="your-privy-app-id">
<SmartWalletsProvider>
{children}
</SmartWalletsProvider>
</PrivyProvider>
);
}
In addition, some paymaster providers, like Biconomy or Alchemy, require an additional paymasterContext
prop specific to their implementations. See examples of how to set this below:
tsx
<SmartWalletsProvider
// Set up your Gas Manager policy ID from the Alchemy dashboard
config={{
paymasterContext: {
policyId: "your-alchemy-policy-id"
}
}}
>
{children}
</SmartWalletsProvider>
TIP
Make sure that the networks you've configured for smart wallets in the Dashboard are also configured for your app's defaultChain
and supportedChains
.
Creating smart wallets
Once the SmartWalletsProvider
component is rendered and a smart wallet configuration has been set up for your app in the Dashboard, Privy will automatically generate smart wallets for your users once they have an embedded wallet. The embedded wallet is used as the primary signer controlling the smart wallet.
You can configure your app to create embedded wallets automatically on login or manually; smart wallets will be created following the same configuration.
Getting the address
Once a smart wallet has been created for a user, you can get the address for the smart wallet by finding the account of type: 'smart_wallet'
from the user's linkedAccounts
array, and inspecting the entry's address
field like so:
tsx
const {user} = usePrivy();
const smartWallet = user.linkedAccounts.find((account) => account.type === 'smart_wallet');
console.log(smartWallet.address);
// Logs the smart wallet's address
console.log(smartWallet.type);
// Logs the smart wallet type (e.g. 'safe', 'kernel', 'light_account', 'biconomy')
Signatures and transactions
To use the smart wallet to sign messages and send transactions, import the useSmartWallets
hook and use the client
returned by the hook. This client
is a drop-in replacement for a viem WalletClient and supports many of the same methods, including signMessage
, signTypedData
, and sendTransaction
.
tsx
import {useSmartWallets} from '@privy-io/react-auth/smart-wallets';
...
const {client} = useSmartWallets();
Signing messages
To sign messages with the smart wallet, simply call the client
's signMessage
or signTypedData
method like so:
tsx
const {client} = useSmartWallets();
const signature = await client.signMessage({
account: client.account,
message: 'Hello world',
});
Sending transactions
To send transactions with the smart wallet, call the client's sendTransaction
method with your desired transaction request. If your app has a paymaster URL registered in the Dashboard, Privy will automatically use that paymaster to attempt to sponsor the gas fees for the user's transaction.
tsx
const {client} = useSmartWallets();
const txHash = await client.sendTransaction({
account: client.account,
chain: base,
to: 'insert-recipient-address',
value: 0.1,
});
Batching transactions
Smart wallets support sending a batch of transactions in a single, atomic submission to the network.
To send a batched transactions with a smart wallet, call the client's sendTransaction
method with a calls
array the transactions to batch together. Each call
may have the following fields:
Field | Type | Description |
---|---|---|
to | string | The recipient of the transaction or the address of the smart contract being called. |
value | bigint | The value in wei for the transaction. |
data | string | Encoded calldata for the transaction, if calling a smart contract. We suggest using viem's encodeFunctionData to prepare this value. |
As an example, you might batch together a transaction to approve a USDC spender and to transfer USDC like so:
tsx
const {client} = useSmartWallets();
const txHash = await client.sendTransaction({
account: client.account,
calls: [
// Approve transaction
{
to: USDC_ADDRESS,
data: encodeFunctionData({
abi: USDC_ABI,
functionName: 'approve',
args: ['insert-spender-address', BigInt(1e6)],
}),
},
// Transfer transaction
{
to: USDC_ADDRESS,
data: encodeFunctionData({
abi: USDC_ABI,
functionName: 'transfer',
args: ['insert-recipient-address', BigInt(1e6)],
}),
},
],
});