---
title: "Quick Start"
description: "Go from zero to a working connection in under 10 minutes."
url: "https://sigilry.org/getting-started/quick-start"
---

This guide shows two paths:

* **Vanilla**: Use `window.canton` directly with `@sigilry/dapp`.
* **React**: Use hooks from `@sigilry/react`.

## Before you start

* Node.js 18+ and Yarn installed.
* A Sigilry-compatible wallet extension available in your browser.
* For React apps: `@tanstack/react-query`.

For a hosted wallet, follow [Connect to Send Connect testnet](/guides/send-connect-testnet/). For a local wallet simulator, run the demo:

```bash
nix develop
yarn install
yarn --cwd examples/demo-app dev
```

## 1. Install packages

Vanilla:

```bash
yarn add @sigilry/dapp@^3
```

React:

```bash
yarn add @sigilry/react@^3 @sigilry/dapp@^3 @tanstack/react-query
```

The stable dapp/react line is 3.x on `latest`; the old `next` prerelease tag is frozen. See [Migrations](/migrations/) when upgrading from 1.x or 2.x.

## 2. Verify the provider is available

```ts
import "@sigilry/dapp/browser-globals";

if (!window.canton) {
  throw new Error("Canton provider not available");
}
```

## 3. Make your first request

```ts
import "@sigilry/dapp/browser-globals";

export async function connectAndListAccounts() {
  if (!window.canton) {
    throw new Error("Canton provider not available");
  }

  const status = await window.canton.request({ method: "status" });
  if (!status.connection.isConnected) {
    await window.canton.request({ method: "connect" });
  }

  const accounts = await window.canton.request({ method: "listAccounts" });
  console.log("Accounts:", accounts);
  return accounts;
}
```

## 4. React setup (recommended for React apps)

```tsx
import { CantonReactProvider } from "@sigilry/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export function AppRoot() {
  return (
    <QueryClientProvider client={queryClient}>
      <CantonReactProvider>
        <App />
      </CantonReactProvider>
    </QueryClientProvider>
  );
}
```

## 5. Connect and show accounts

```tsx
import { useAccounts, useConnect, useDisconnect } from "@sigilry/react";

export function WalletPanel() {
  const { connect, isPending: isConnecting } = useConnect();
  const { disconnect, isPending: isDisconnecting } = useDisconnect();
  const { data: accounts, isConnected } = useAccounts();

  if (!isConnected) {
    return (
      <button onClick={connect} disabled={isConnecting}>
        {isConnecting ? "Connecting..." : "Connect"}
      </button>
    );
  }

  return (
    <div>
      <button onClick={disconnect} disabled={isDisconnecting}>
        Disconnect
      </button>
      <ul>
        {accounts.map((account) => (
          <li key={account.partyId}>{account.hint}</li>
        ))}
      </ul>
    </div>
  );
}
```

## 6. What success looks like

* Calling `status` returns a typed payload (no provider/runtime schema errors).
* Connect action completes and `listAccounts` returns at least one account.
* In React, the connect button transitions to a connected account view.

## 7. Common first-run issues

* `Canton provider not available`: wallet extension not installed/active on this page.
* Connect appears to do nothing: check extension permission prompts and site access settings.
* Empty accounts after connect: wallet may not have an active account on the current network.

## 8. Next steps

* Learn the protocol in [RPC Protocol](../../concepts/rpc-protocol/).
* Explore package docs: [@sigilry/dapp](../../packages/dapp/), [@sigilry/react](../../packages/react/), [@sigilry/cli](../../packages/cli/), [@sigilry/splice-dars](../../packages/splice-dars/).
* Generate TypeScript types from Splice DARs: install `@sigilry/splice-dars` and `@sigilry/cli`, then run `sigilry codegen`.