Skip to main content

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>
  </>;
}
tip

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.

Example linking a wallet
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.