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

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

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