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 DOT Connect 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.

WalletConnect​

npm install @reactive-dot/wallet-walletconnect

Ledger​

npm install @reactive-dot/wallet-ledger

Mimir​

npm install @reactive-dot/wallet-mimir

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 { WalletConnect } from "@reactive-dot/wallet-walletconnect";

export const config = defineConfig({
  // ...
  wallets: [
    new InjectedWalletProvider(),
    new LedgerWallet(),
    new MimirWalletProvider(),
    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 });