Getting Started

Add DOTConnect to a ReactiveDOT app in a few small steps.

Install packages

1. Create your ReactiveDOT project by following the official setup guide.

2. Add DOTConnect:

   npm

   npm add dot-connect

   yarn

   yarn add dot-connect

   pnpm

   pnpm add dot-connect

3. Install any wallet-specific dependencies you need (Ledger, WalletConnect, etc.) using the ReactiveDOT guide.

Register DOTConnect

Use the same ReactiveDOT config you already maintain; DOTConnect only needs the highlighted line:

// ...

import { registerDotConnect } from "dot-connect";

// ReactiveDOT config - follow the official guide for your project.
export const config = defineConfig({
  // ...
  wallets: [
    new InjectedWalletProvider(),
    new LedgerWallet(),
    new WalletConnect({
      // ...
    }),
    // ...
  ],
});

// ...

registerDotConnect(config); 

registerDotConnect creates the custom elements and passes through the wallet config.

Load fonts once

Import DOTConnect fonts in your global CSS or entry module:

import "dot-connect/font.css";

@import "dot-connect/font.css";

Render the UI

Web component

<dc-connection-button></dc-connection-button>

React wrapper

import { ConnectionButton } from "dot-connect/react.js";

export function App() {
  return <ConnectionButton />;
}

Manually control the dialog

Vanilla JS

<dc-connection-dialog id="wallet-dialog"></dc-connection-dialog>
<button type="button" onclick="document.getElementById('wallet-dialog').show()">
  Open dialog
</button>
<script>
  const walletDialog = document.getElementById("wallet-dialog");
  // Call walletDialog.close() when you want to hide it again, e.g. on backdrop clicks.
</script>

React

import { ConnectionDialog } from "dot-connect/react.js";
import { useState } from "react";

export function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <ConnectionDialog open={open} onClose={() => setOpen(false)} />
      <button type="button" onClick={() => setOpen(true)}>
        Open dialog
      </button>
    </>
  );
}

Accounts API

Check the ReactiveDOT docs for the latest guidance on listing accounts and reacting to wallet state.