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 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
<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 });