Get started with 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 Test on mainnet and select the mainnet network.

Prerequisites

A modern browser with WebAssembly and IndexedDB support
A secure context: served over HTTPS or localhost (crypto.subtle is unavailable otherwise)
For the bundler setup: Node.js 18+ and any bundler that can emit a .wasm asset (Vite, webpack, Next, etc.).

Getting started

Install the SDK

Vite
Next
Vanilla HTML/JS

npm install @secondts/bark

Import from the @secondts/bark/web subpath, and load the .wasm with your bundler’s URL import (Vite’s ?url) to pass to init(). Your bundler emits it as a hashed asset; the example below shows the full setup.The only bundler-specific line is how you get the .wasm URL to pass to init():

Vite: import wasmUrl from "@secondts/bark/web/bark_ffi_wasm_bg.wasm?url"
webpack / Next: new URL("@secondts/bark/web/bark_ffi_wasm_bg.wasm", import.meta.url)
Fallback (any): copy bark_ffi_wasm_bg.wasm into your served/public dir and pass its path string.

npm install @secondts/bark

Same install as Vite. See the Create a wallet tab for the Next setup.

No install step. Import the ./web subpath directly from a CDN inside a <script type="module">:

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

Create a wallet

Generate a BIP39 mnemonic, configure the wallet for signet, and initialize it. The wasm module must be instantiated with init() before any binding is called.

Vite
Next
Vanilla HTML/JS

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

// Instantiate the wasm module before any binding is called.
await init({ module_or_path: wasmUrl });

// Generate a new mnemonic
const mnemonic = generateMnemonic();
console.log("Mnemonic:", mnemonic);

// Configure for signet.
// `Network` is a string-literal union in the bindings (no runtime enum).
const network: Network = "Signet";
const config: Config = {
  serverAddress: "https://ark.signet.2nd.dev",
  esploraAddress: "https://esplora.signet.2nd.dev",
  network,
};

// Create the wallet. State is persisted to IndexedDB, keyed by `dbName`.
const wallet = await Wallet.create({
  mnemonic,
  config,
  dbName: "bark-signet",
  forceRescan: false,
});

// app/BarkClient.tsx
"use client";
import { useEffect } from "react";

export default function BarkClient() {
  useEffect(() => {
    (async () => {
      // Dynamic import keeps wasm out of the server render graph.
      const { default: init, Wallet, generateMnemonic } = await import("@secondts/bark/web");

      // `?url` is Vite-only; in Next resolve the wasm via import.meta.url.
      const wasmUrl = new URL("@secondts/bark/web/bark_ffi_wasm_bg.wasm", import.meta.url);
      await init({ module_or_path: wasmUrl });

      const mnemonic = generateMnemonic();
      const config = {
        serverAddress: "https://ark.signet.2nd.dev",
        esploraAddress: "https://esplora.signet.2nd.dev",
        network: "Signet" as const,
      };
      const wallet = await Wallet.create({ mnemonic, config, dbName: "bark-signet", forceRescan: false });
      const address = await wallet.newAddress();
      await wallet.sync();
      const balance = await wallet.balance();
      console.log(address, balance.spendableSats, "sats");
    })();
  }, []);

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

bark is browser-only (IndexedDB, crypto.subtle). Load it in a "use client" component inside useEffect so it never runs during SSR. dynamic(import, { ssr: false }) is not allowed from a Server Component in Next 15 — use the useEffect pattern above.

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

      // Instantiate the wasm module (auto-resolves the .wasm via import.meta.url).
      await init();

      // Generate a new mnemonic
      const mnemonic = generateMnemonic();
      console.log("Mnemonic:", mnemonic);

      // Configure for signet.
      // `network` is a string literal, not an enum.
      const config = {
        serverAddress: "https://ark.signet.2nd.dev",
        esploraAddress: "https://esplora.signet.2nd.dev",
        network: "Signet",
      };

      // Create the wallet. State is persisted to IndexedDB, keyed by `dbName`.
      const wallet = await Wallet.create({
        mnemonic,
        config,
        dbName: "bark-signet",
        forceRescan: false,
      });
    </script>
  </body>
</html>

Back up the mnemonic securely. It is the only way to recover your wallet. To reopen an existing wallet on later loads, store the mnemonic and call Wallet.open({ mnemonic, config, dbName }) instead of Wallet.create.

Get a receiving address

Generate an Ark address to receive funds.

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

Send some signet sats to this address using the faucet.

Check your balance

Sync the wallet with the Ark server and read your balance.

await wallet.sync();

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

Next steps

Source and examples

Full Wasm source and example projects on GitLab.

How Ark works

Learn about the protocol powering your wallet.

​Prerequisites

​Getting started

​Next steps

Source and examples

How Ark works

Prerequisites

Getting started

Next steps