paritytech · AndreiEres · Mar 27, 2026 · Apr 2, 2026 · Apr 2, 2026 · Apr 2, 2026
diff --git a/examples/statement-chat/.gitignore b/examples/statement-chat/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+package-lock.json
+public/
diff --git a/examples/statement-chat/README.md b/examples/statement-chat/README.md
@@ -0,0 +1,44 @@
+# Statement Chat
+
+A simple chat application demonstrating the statement distribution protocol via smoldot light client.
+
+## Prerequisites
+
+1. A running local relay chain with at least one parachain
+2. Chain specs for both the relay chain and parachain
+
+## Quick Start
+
+If you have a running local network with polkadot-omni-node or polkadot-parachain:
+
+```bash
+./dev.sh
+```
+
+The script automatically extracts chain specs, builds smoldot, and starts the dev server at http://localhost:5173.
+
+## Manual Setup
+
+1. Start a local network
+2. Extract chain specs from running nodes
+   - `public/chain-specs/relay.json`
+   - `public/chain-specs/parachain.json`
+3. Run the dev server `npm run dev`
+
+
+## Usage
+
+1. Open http://localhost:5173 in your browser
+2. Wait for smoldot to connect to both chains
+3. Enter a topic (32-byte hex) or use the default
+4. Click "Subscribe"
+5. Send messages - they'll be distributed to all peers on the same topic
+
+## How It Works
+
+The app uses smoldot's statement store protocol:
+- `statement_subscribeStatement` - Subscribe to topics on a chain
+- `statement_submit` - Broadcast signed statements to the network
+- `statement_statement` (notification) - Receive statements from other peers
+
+Messages are signed with Ed25519 keys (stored in localStorage) and distributed peer-to-peer without central servers.
diff --git a/examples/statement-chat/dev.sh b/examples/statement-chat/dev.sh
@@ -0,0 +1,47 @@
+#!/usr/bin/env bash
+set -e
+
+cd "$(dirname "$0")"
+
+echo "Extracting chain specs from running node..."
+OMNI_CMD=$(ps aux | awk '/polkadot-(parachain|omni-node)/ && /--bootnodes/ && !/awk/ {print; exit}')
+
+if [ -z "$OMNI_CMD" ]; then
+    echo "Error: No running polkadot-parachain with --bootnodes found"
+    exit 1
+fi
+
+PARACHAIN_SPEC=$(echo "$OMNI_CMD" | sed 's/ -- .*//' | sed -n 's/.*--chain \([^ ]*\).*/\1/p; q')
+RELAY_SPEC=$(echo "$OMNI_CMD" | sed 's/.* -- //' | sed -n 's/.*--chain \([^ ]*\).*/\1/p; q')
+BOOTNODE=$(echo "$OMNI_CMD" | sed 's/ -- .*//' | sed -n 's/.*--bootnodes \([^ ]*\).*/\1/p; q')
+RPC_PORT=$(echo "$OMNI_CMD" | sed -n 's/.*--rpc-port \([^ ]*\).*/\1/p; q')
+RPC_PORT=${RPC_PORT:-9944}
+
+echo "Parachain spec: $PARACHAIN_SPEC"
+echo "Relay chain spec: $RELAY_SPEC"
+echo "Bootnode: $BOOTNODE"
+echo "RPC port: $RPC_PORT"
+
+mkdir -p public/chain-specs
+
+cp "$RELAY_SPEC" public/chain-specs/relay.json
+echo "Copied relay chain spec to public/chain-specs/relay.json"
+
+jq ".id = \"parachain\" | .bootNodes = [\"$BOOTNODE\"]" "$PARACHAIN_SPEC" > public/chain-specs/parachain.json
+echo "Copied parachain spec to public/chain-specs/parachain.json (id changed to 'parachain', bootnode added)"
+
+echo ""
+echo "Building smoldot..."
+cd ../../wasm-node/javascript
+npm install
+npm run build
+
+echo ""
+echo "Starting dev server with npm..."
+cd ../../examples/statement-chat
+echo "Installing statement-chat dependencies with npm..."
+npm install
+
+pkill -f "server.js" 2>/dev/null || true
+sleep 1
+npm run dev
diff --git a/examples/statement-chat/index.html b/examples/statement-chat/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Statement Chat</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .section {
+      margin-bottom: 1em;
+    }
+
+    .scroll-box {
+      padding: 0.5em;
+      height: 300px;
+      overflow-y: auto;
+      background: #f5f5f5;
+    }
+
+    .chat-container {
+      display: flex;
+      flex-direction: column;
+      border-bottom: 1px solid #ccc;
+    }
+
+    .message-input-area {
+      padding: 0.5em;
+      background: #f5f5f5;
+    }
+
+    .input-row {
+      display: flex;
+      gap: 0.5em;
+      max-width: 700px;
+    }
+
+    .input-row input {
+      flex: 1;
+      min-width: 200px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Statement Chat</h1>
+
+  <div class="section">
+    <div class="input-row">
+      <input type="text" id="topicInput" pattern="0x[0-9a-fA-F]{64}" title="Must be 0x followed by 64 hex characters"
+        placeholder="0x0000000000000000000000000000000000000000000000000000000000000001" />
+      <button id="subscribeBtn" disabled>Subscribe</button>
+    </div>
+    <div><small id="status">Initializing...</small></div>
+  </div>
+
+  <div class="chat-container">
+    <div class="scroll-box" id="messages">
+      <div id="no-messages"><small>No messages yet. Subscribe to a topic and start chatting!</small></div>
+    </div>
+    <div class="message-input-area">
+      <div class="input-row">
+        <input type="text" id="messageInput" placeholder="Type your message..." disabled />
+        <button id="sendBtn" disabled>Send</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="scroll-box section" id="log"></div>
+
+  <script type="module" src="/dist/main.js"></script>
+</body>
+
+</html>