Handling multiple wallets
Privy allows users to connect and link multiple wallets to their account. This can be useful for a number of reasons, such as:
- Getting a more comprehensive understanding of the user's web3 experience and activities.
- Providing a simple connect-only interface to interface with wallets before linking them.
Connecting multiple wallets
To connect multiple wallets, you can use the connectWallet
method. This method will prompt the user to select the wallet they want to connect. For example:
import { usePrivy, useWallets } from '@privy-io/react-auth';
export default function ConnectWalletButton() {
const { connectWallet } = usePrivy();
const { wallets } = useWallets();
// Prompt user to connect a wallet with Privy modal
return <>
<button onClick={connectWallet}>Connect Wallet</button>
<p>Total connected wallets: {wallets.length}</p>
</>;
}
You can easily attach callbacks to connectWallet
using the new useConnectWallet
interface! Read more here.
Linking multiple wallets
You can prompt a user to link additional external wallets to their account using the linkWallet
method OR by calling link
on a wallet
. Once linkWallet
is invoked, the user's chosen wallet application (e.g. MetaMask) will prompt the user to select the address they want to link. If link
on a connected wallet is called, the user’s chosen wallet application will skip to prompting them for a signature.
All of a user's linked wallets will be returned in the linkedAccounts
field of the corresponding user object. Newly linked wallets will also show up in the wallets
array.
import { usePrivy, useWallets } from '@privy-io/react-auth';
export default function ConnectAndLink() {
const { connectWallet, authenticated } = usePrivy();
const { wallets } = useWallets();
// We assume this is in an authenticated view
if (!authenticated) return <></>;
// Prompt user to connect or link a wallet
return <div>
<button onClick={connectWallet}>Connect a Wallet</button>
<button onClick={() => wallets[0]?.loginOrLink()} disabled={!wallets[0] || wallets[0].linked}>Link</button>
</div>;
}
Filtering wallets
As a developer, you may only want to interact with wallets that have certain attributes. Below are several examples of filtering the wallets
array by meaningful attributes such as link status and wallet type. You can always cross-reference the set of wallets associated with the user by checking the user's linkedAccounts
.
const { user } = usePrivy();
const { wallets } = useWallets();
const linkedWallets = wallets.filter((wallet) => wallet.linked);
const embeddedWallets = wallets.filter(
(wallet) => wallet.connectorType === 'embedded' && wallet.walletClientType === 'privy'
);
const disconnectedWallets = user.linkedAccounts.filter(
(wallet) => wallet.type === 'wallet' && !wallets.some((w) => w.address === wallet.address),
);
FAQ
What happens when a user changes their wallet in MetaMask?
The newly selected wallet will appear first in the wallets array because it is now the most recently connected wallet.
What happens when a user changes their chain?
The corresponding wallet objects will be updated to display the latest Chain ID. If you are using wallets within a dependency array, this will trigger a re-render.