Skip to main content

Connect wallets

Wallets & accounts connection can by managed via useWallets, useConnectedWallets & useAccounts hooks.

tip

If you prefer not having to build a wallet connection UI from scratch, checkout DOTConnect for a quick and easy way to add a great wallet experience to your DApps.

Install optional dependencies​

Additional dependencies are required if you use any of be bellow wallet type.

Plug-and-play wallets​

WalletConnect​

npm install @reactive-dot/wallet-walletconnect

Mimir​

npm install @reactive-dot/wallet-mimir

Wallets requiring additional UI setup​

The wallets listed below require extra UI integration and platform-specific setup. To avoid implementing these flows yourself, we recommend using DOTConnect for a quick and reliable wallet integration.

Polkadot Vault​

npm install @reactive-dot/wallet-polkadot-vault

Ledger​

npm install @reactive-dot/wallet-ledger

Readonly​

npm install @reactive-dot/wallet-readonly

Add wallets to the config​

config.ts
import { defineConfig } from "@reactive-dot/core";
import { InjectedWalletProvider } from "@reactive-dot/core/wallets.js";
import { LedgerWallet } from "@reactive-dot/wallet-ledger";
import { MimirWalletProvider } from "@reactive-dot/wallet-mimir";
import { PolkadotVaultWallet } from "@reactive-dot/wallet-polkadot-vault";
import { WalletConnect } from "@reactive-dot/wallet-walletconnect";

export const config = defineConfig({
  // ...
  wallets: [
    new InjectedWalletProvider(),
    new LedgerWallet(),
    new MimirWalletProvider(),
    new PolkadotVaultWallet(),
    new WalletConnect({
      projectId: "WALLET_CONNECT_PROJECT_ID",
      providerOptions: {
        metadata: {
          name: "APP_NAME",
          description: "APP_DESCRIPTION",
          url: "APP_URL",
          icons: ["APP_ICON"],
        },
      },
      chainIds: [
        // https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-13.md
        "polkadot:91b171bb158e2d3848fa23a9f1c25182", // Polkadot
        // ...
      ],
    }),
  ],
});

Connect to wallets​

wallets.tsx
import {
  useConnectedWallets,
  useWallets,
  useWalletConnector,
  useWalletDisconnector,
} from "@reactive-dot/react";

export function Wallets() {
  const wallets = useWallets();
  const connectedWallets = useConnectedWallets();

  const [_, connectWallet] = useWalletConnector();
  const [__, disconnectWallet] = useWalletDisconnector();

  return (
    <section>
      <header>
        <h3>Wallet connection</h3>
      </header>
      <article>
        <h4>Wallets</h4>
        <ul>
          {wallets.map((wallet) => (
            <li key={wallet.id}>
              <div>{wallet.name}</div>
              <div>
                {connectedWallets.includes(wallet) ? (
                  <button onClick={() => disconnectWallet(wallet)}>
                    Disconnect
                  </button>
                ) : (
                  <button onClick={() => connectWallet(wallet)}>Connect</button>
                )}
              </div>
            </li>
          ))}
        </ul>
      </article>
    </section>
  );
}

Display available accounts​

accounts.tsx
import { useAccounts } from "@reactive-dot/react";

export function Accounts() {
  const accounts = useAccounts();

  return (
    <section>
      <header>
        <h3>Accounts</h3>
      </header>
      <ul>
        {accounts.map((account, index) => (
          <li key={index}>
            <div>{account.address}</div>
            <div>{account.name}</div>
          </li>
        ))}
      </ul>
    </section>
  );
}
info

By default the useAccounts hook will only return accounts that are compatible with the current chain (i.e. as set by ChainProvider). If you want to get all accounts regardless of the current chain, you can pass null as the chainId option to the useAccounts hook:

useAccounts({ chainId: null });