Get started with TypeScript for web apps

Use this prompt to get started quickly.

These examples connect to signet so you can test for free. To go live, point the same configuration at Second’s mainnet endpoints from Connection details and pass "Bitcoin" as the network to Wallet.open().

Prerequisites

A modern browser with WebAssembly, IndexedDB, and the Web Locks API
A secure context: served over HTTPS or localhost
For the bundler setups: a bundler that can emit a .wasm asset, such as Vite, webpack, or Next.js

Getting started

Install the SDK

Vite
Next.js
Vanilla HTML/JS

npm install @secondts/bark

Import from the @secondts/bark/web subpath and pass the URL of the .wasm binary to init().The only bundler-specific line is how you get that URL:

Vite: import wasmUrl from "@secondts/bark/web/bark_ffi_wasm_bg.wasm?url"
webpack / Next.js: new URL("@secondts/bark/web/bark_ffi_wasm_bg.wasm", import.meta.url)
Fallback (any): Copy bark_ffi_wasm_bg.wasm into your static assets folder, such as public/, and pass its path as module_or_path, for example init({ module_or_path: "/bark_ffi_wasm_bg.wasm" }).

npm install @secondts/bark

Same install as Vite. The next step shows the Next.js setup.

No install step. Import the web build from a CDN inside a <script type="module">, with the version pinned. For production, serve bark_ffi_wasm.js and bark_ffi_wasm_bg.wasm from your own origin instead of a third-party CDN.

<script type="module">
  import init, { Wallet, generateMnemonic } from "https://unpkg.com/@secondts/bark@0.25.0/web/bark_ffi_wasm.js";
</script>

Create a wallet

Instantiate the WebAssembly module, generate a BIP39 mnemonic, and open the wallet on signet. Wallet.open() creates the wallet in IndexedDB on the first visit and reopens it on later ones.

Vite
Next.js
Vanilla HTML/JS

import init, { Wallet, generateMnemonic } from "@secondts/bark/web";
import type { Config, Network } from "@secondts/bark/web";
// Vite resolves `?url` to the URL of the wasm binary
import wasmUrl from "@secondts/bark/web/bark_ffi_wasm_bg.wasm?url";

// Instantiate the wasm module before calling any other binding
await init({ module_or_path: wasmUrl });

// Configure the signet endpoints
const network: Network = "Signet";
const config: Config = {
  serverAddress: "https://ark.signet.2nd.dev",
  esploraAddress: "https://esplora.signet.2nd.dev",
};

// Signet tests only: don't store a real mnemonic in unencrypted localStorage
let mnemonic = localStorage.getItem("bark-mnemonic");
if (!mnemonic) {
  mnemonic = generateMnemonic();
  localStorage.setItem("bark-mnemonic", mnemonic);
}

// Create the wallet on the first visit, or reopen it on later ones.
// The fourth argument is an optional on-chain wallet, not needed here.
const wallet = await Wallet.open(network, mnemonic, config, undefined, {
  indexedDbName: "bark-signet",
});

// app/BarkClient.tsx
"use client";
import { useEffect } from "react";
import type { Wallet } from "@secondts/bark/web";

// Load the wasm and open the wallet once per page load
let walletPromise: Promise<Wallet> | undefined;

function getWallet(): Promise<Wallet> {
  walletPromise ??= (async () => {
    // The dynamic import excludes the wasm module from the server render
    const { default: init, Wallet, generateMnemonic } = await import("@secondts/bark/web");
    await init({ module_or_path: new URL("@secondts/bark/web/bark_ffi_wasm_bg.wasm", import.meta.url) });

    // Signet tests only: don't store a real mnemonic in unencrypted localStorage
    let mnemonic = localStorage.getItem("bark-mnemonic");
    if (!mnemonic) {
      mnemonic = generateMnemonic();
      localStorage.setItem("bark-mnemonic", mnemonic);
    }

    // Create the wallet on the first visit, or reopen it on later ones.
    // The fourth argument is an optional on-chain wallet, not needed here.
    return Wallet.open(
      "Signet",
      mnemonic,
      { serverAddress: "https://ark.signet.2nd.dev", esploraAddress: "https://esplora.signet.2nd.dev" },
      undefined,
      { indexedDbName: "bark-signet" },
    );
  })();
  return walletPromise;
}

export default function BarkClient() {
  useEffect(() => {
    let cancelled = false;
    (async () => {
      const wallet = await getWallet();
      if (cancelled) return;

      const address = await wallet.newAddress();
      console.log("Ark address:", address);

      await wallet.sync();
      const balance = await wallet.balance();
      console.log("Spendable:", balance.spendableSats, "sats");
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  return <div>see console</div>;
}

The SDK is browser-only. Load it from useEffect in a "use client" component so it never runs during server rendering. Store the wallet promise at module level. React Strict Mode runs effects twice in development, which would otherwise call init() twice. next/dynamic with ssr: false isn’t allowed in Server Components.

<!doctype html>
<html>
  <body>
    <script type="module">
      import init, {
        Wallet,
        generateMnemonic,
      } from "https://unpkg.com/@secondts/bark@0.25.0/web/bark_ffi_wasm.js";

      // Instantiate the wasm module (resolves the .wasm next to the script)
      await init();

      // Configure the signet endpoints
      const config = {
        serverAddress: "https://ark.signet.2nd.dev",
        esploraAddress: "https://esplora.signet.2nd.dev",
      };

      // Signet tests only: don't store a real mnemonic in unencrypted localStorage
      let mnemonic = localStorage.getItem("bark-mnemonic");
      if (!mnemonic) {
        mnemonic = generateMnemonic();
        localStorage.setItem("bark-mnemonic", mnemonic);
      }

      // Create the wallet on the first visit, or reopen it on later ones.
      // The fourth argument is an optional on-chain wallet, not needed here.
      const wallet = await Wallet.open("Signet", mnemonic, config, undefined, {
        indexedDbName: "bark-signet",
      });
    </script>
  </body>
</html>

The sample code stores the mnemonic in localStorage, unencrypted, so that the next visit reopens the same wallet. That is acceptable for signet tests only. In a production app, encrypt the mnemonic before you store it, for example with a key derived from a user password. Also set up continuous wallet data backups, so users can restore their wallet without the Ark server’s cooperation.

Get a receiving address

Generate an Ark address to receive bitcoin.

const address = await wallet.newAddress();
console.log("Ark address:", address);

Load your page to log the address in the browser’s developer console. Send some signet sats to this address using the faucet.

Check your balance

Bark syncs the wallet in the background for as long as your page holds a reference to the Wallet object. Call sync() when you need an up-to-date balance right away.

await wallet.sync();

const balance = await wallet.balance();
console.log("Spendable:", balance.spendableSats, "sats");

Balance amounts are number values.Reload the page. It reopens the same wallet and logs your spendable balance in sats.

Documentation

Bark SDK

Barkd

Run an Ark server

Get started with TypeScript for web apps

Prerequisites

Getting started

Next steps

Source code

How Ark works

​Prerequisites

​Getting started

​Next steps

Source code

How Ark works

Prerequisites

Getting started

Next steps