Skip to main content

Connect wallets

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

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 { 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
<script setup lang="ts">
import {
  useConnectedWallets,
  useWallets,
  useWalletConnector,
  useWalletDisconnector,
} from "@reactive-dot/vue";

const { data: wallets } = await useWallets();
const { data: connectedWallets } = await useConnectedWallets();

const { execute: connectWallet } = useWalletConnector();
const { execute: disconnectWallet } = useWalletDisconnector();
</script>

<template>
  <section>
    <header>
      <h3>Wallet connection</h3>
    </header>
    <article>
      <h4>Wallets</h4>
      <ul>
        <li v-for="wallet in wallets" :key="wallet.id">
          <div>{{ wallet.name }}</div>
          <div>
            <button
              v-if="connectedWallets.includes(wallet)"
              @click="disconnectWallet(wallet)"
            >
              Disconnect
            </button>
            <button v-else @click="connectWallet(wallet)">Connect</button>
          </div>
        </li>
      </ul>
    </article>
  </section>
</template>

Display available accounts​

accounts.tsx
<script setup lang="ts">
import { useAccounts } from "@reactive-dot/vue";

const accounts = await useAccounts();
</script>

<template>
  <section>
    <header>
      <h3>Accounts</h3>
    </header>
    <ul>
      <li v-for="(account, index) in accounts" :key="index">
        <div>{{ account.address }}</div>
        <div>{{ account.name }}</div>
      </li>
    </ul>
  </section>
</template>
info

By default the useAccounts composable will only return accounts that are compatible with the current chain (i.e. as set by provideChain). 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 });