Console UI (#223)

* Console UI

* feat: download works locally with helia

* fix: remove more references of ProvideCidConfig

* Add Paseo, dotspark networks and mark Polkadot as not released yet

Add Bulletin Paseo and Bulletin (Prototypes dotspark) network options
to the console UI. Move Polkadot to the end with no endpoint and mark
it as not released yet. Disable selecting networks with no endpoints
in the network switcher dropdown.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add GitHub Pages deployment for console UI

Add GitHub Actions workflow that builds and deploys the console UI
to GitHub Pages on pushes to the console-ui branch. Set the Vite
base path conditionally for GitHub Pages subpath hosting.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add package-lock.json for console UI

Remove package-lock.json from .gitignore and commit the lock file
to ensure reproducible builds and enable npm caching in CI.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add per-network papi descriptors and fix CI build

- Commit .papi metadata and config for westend, paseo, and dotspark
- Use per-network descriptors (bulletin_westend, bulletin_paseo,
  bulletin_dotspark) instead of a single bulletin descriptor
- Add papi generate step to CI workflow
- Fix TypeScript strict mode errors (implicit any types, unused import)
- Remove .papi/ from .gitignore

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix TypeScript type errors for multi-network descriptors

Cast the typed API to bulletin_westend type since all bulletin chains
share the same core pallets. This allows using different papi
descriptors per network while keeping a consistent type interface.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Gitignore tsconfig.tsbuildinfo

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Default to Paseo network and handle connection errors gracefully

Change default network from Local Dev to Bulletin Paseo. Don't throw
on connection failure so the network selector stays enabled and users
can switch to another network.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Remove duplicate network name label and widen network selector

The network name was shown both as a text label next to the status
dot and in the network select dropdown. Remove the redundant label
and widen the selector to fit full network names.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add StorageType selector with per-type network configs

Rename "Bulletin Console" to "Storage Console" and add a StorageType
dropdown (Bulletin / Web3 Storage). Each storage type defines its own
set of networks. Switching storage type updates the network selector
and connects to the type's default network.

- Bulletin: Local Dev, Westend, Paseo, dotspark, Polkadot
- Web3 Storage: Local Dev (ws://localhost:2222)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add Web3 Storage dashboard and network customizations

- Add Web3 Westend (not released yet) to Web3 Storage network selector
- Customize Dashboard to show only Welcome and Chain Info for Web3 Storage
- Add dedicated Welcome card content for Web3 Storage type
- Remove disabled state from network selector to allow switching on error

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Remove unused status variable from NetworkSwitcher

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix GitHub Pages routing by setting BrowserRouter basename

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add vite-env.d.ts for ImportMeta type support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add Storage Totals panel and reorganize Bulletin dashboard

Add UsageCard component showing aggregated on-chain storage statistics
(transaction count/size and authorization totals by type). Rename
AuthorizationCard title to "Account's Storage" and rearrange the
dashboard grid layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add specVersion to chain state for ChainInfoCard display

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Refine dashboard panels layout and fix formatBytes overflow

- Restructure Account's Storage card with usage/authorization sections
- Add hr separator and consistent formatting across both panels
- Rename labels: Users/Preimages, "Authorization for"
- Fix formatBytes to handle values larger than TB (add PB/EB, cap index)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Use consistent formatting for authorization sections in Storage Totals

Split into "Authorizations for Users" and "Authorizations for Preimages"
with the same 2-column Transactions/Bytes grid layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* adding storage faucet for user (#250)

* adding storage faucet for user

* Remove Alice Balance display from Storage Faucet tab

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Promote Storage Faucet tab and add deep-linking support

Move Storage Faucet to the first subtab, rename nav label from "Auth"
to "Faucet", update page title to "Faucet & Authorizations", and add
URL-driven tab selection with a Dashboard quick action link.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Rename Account subtab to Accounts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Improve Faucet page UI and fix Alice balance crash

- Add nav separator after Faucet, remove Accounts from top menu
- Use formatNumber for consistent number display across all tabs
- Add expiration column to Lookup Account search results
- Fix crash when chain has no balances pallet (defensive optional chaining)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add design references and links to Web3 Storage welcome card

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Adapt Explorer page title and description for Web3 Storage mode

Also resets explorer state when switching networks so stale block
data from the previous network is cleared.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* added panel for 'Authorize Preimage'
added auth for Bob's acnt
removed sudo

* Wire web3_storage descriptor and add Storage Totals card for Web3 Storage mode

- Import and wire web3_storage PAPI descriptor into chain.state.ts with
  nested storageType/networkId lookup
- Add Web3StorageTotalsCard showing provider, bucket, and challenge counts
- Grey out unavailable nav tabs (Upload, Download, Auth, Accounts) in
  Web3 Storage mode instead of hiding them
- Move Explorer tab to second position after Dashboard

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix WS provider reconnection, reorder nav, and clean up faucet UI

Use @polkadot-api/ws-provider with killable WebSocket proxy to prevent
stale reconnection loops when switching networks. Move Faucet tab after
Dashboard, remove Authorize Bob panel, and clean up description text.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Highlight active nav tab, redirect on storage type switch, add divider

Use primary variant for the active navigation tab for stronger visual
emphasis. Redirect to Dashboard when switching to a storage type that
disables the current route. Add vertical divider after storage type
selector.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Nit

---------

Co-authored-by: Branislav Kontur <bkontur@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Remove unused imports and dead code from Authorizations page

Fixes CI build failure caused by unused TypeScript declarations:
- Remove unused Dialog components, form components, and related state/handlers
- Add build-ui Claude skill for running the console UI build locally

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Set proper URLs per network (#253)

* Fix block explorer and improve UX (#255)

* Fix Recent Blocks always showing 0 txs

Query TransactionStorage.Transactions for each block to get the actual
transaction count instead of using a hardcoded 0.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Prefill connect user to the Faucet

* Revamp block explorer with real block data and extrinsic decoding

- Use client.getBestBlocks() and getBlockBody() for real block hashes
  and extrinsic counts instead of hardcoded placeholders
- Decode extrinsic call data to show pallet and call names
  (e.g. Timestamp.set, TransactionStorage.store)
- Support v4 (signed/unsigned) and v5 (bare/general) extrinsic formats
- Auto-refresh recent blocks on every new block
- Auto-select first block when blocks load
- Reset and reload explorer on network change
- Prefill connected account address in Storage Faucet
- Remove unused Parent hash field from block details

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add CI workflow to check console UI build on PRs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Allow custom hashing algo and codec for Upload page (#256)

* Allow custom hashing algo and codec for Upload page

* Build errors

---------

Co-authored-by: Branislav Kontur <bkontur@gmail.com>

* [Console UI] Wallet auto-reconnect after refresh (#258)

* Allow custom hashing algo and codec for Upload page

* Build errors

* Bulletin UI improvements

* get Token info from chain

* Accept hex-encoded CID bytes in Fetch by CID input

- CidInput now accepts 0x-prefixed hex (raw CID bytes) in addition to
  multibase strings (bafk...)
- Show resolved CID string in CID Info sidebar with copy button
- Pass parsed CID object directly to Helia fetchData
- Mention Helia in connection card description

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add sub-tabs and IPFS gateway support to Download page

Reorganize the Download page into P2P Connection and IPFS Gateway
tabs while keeping Fetch by CID and CID Info always visible. Add
dotspark IPFS gateway, support fetching via gateway when P2P is not
connected, reset page state on network change, and show gateway link
in bafk format when gateway tab is active.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Make fetch behavior tab-aware on Download page

Fetch by CID now uses the active tab to determine the data source:
P2P tab requires a peer connection, Gateway tab requires a gateway URL.
Descriptions and spinner text update accordingly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Branislav Kontur <bkontur@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Preserve CID for Download page

* Copy index to 404.html

* Fix "VIew in Download" link

---------

Co-authored-by: Branislav Kontur <bkontur@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Rohit Sarpotdar <rohit.sarpotdar@parity.io>
Co-authored-by: Karol Kokoszka <karol@parity.io>

Author: 5 people

.claude/skills/build-ui/SKILL.md

@@ -0,0 +1,12 @@
+---
+name: build-ui
+description: Build the console UI (same as CI)
+---
+
+Run the console UI build exactly as CI does. From the `console-ui/` directory:
+
+1. `npm ci`
+2. `npx papi generate` — skip this step if `$ARGUMENTS` contains `--skip-papi`
+3. `GITHUB_PAGES=true npm run build`
+
+Report any TypeScript or build errors found.

.github/workflows/check-console-ui.yml

@@ -0,0 +1,34 @@
+name: Check Console UI
+
+on:
+  pull_request:
+    branches: [console-ui, main]
+    paths:
+      - "console-ui/**"
+      - ".github/workflows/check-console-ui.yml"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: console-ui/package-lock.json
+
+      - name: Install dependencies
+        working-directory: console-ui
+        run: npm ci
+
+      - name: Generate papi descriptors
+        working-directory: console-ui
+        run: npx papi generate
+
+      - name: Build
+        working-directory: console-ui
+        env:
+          GITHUB_PAGES: true
+        run: npm run build

.github/workflows/deploy-console-ui.yml

@@ -0,0 +1,63 @@
+name: Deploy Console UI to GitHub Pages
+
+on:
+  push:
+    branches: [console-ui]
+    paths:
+      - "console-ui/**"
+      - ".github/workflows/deploy-console-ui.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: console-ui/package-lock.json
+
+      - name: Install dependencies
+        working-directory: console-ui
+        run: npm ci
+
+      - name: Generate papi descriptors
+        working-directory: console-ui
+        run: npx papi generate
+
+      - name: Build
+        working-directory: console-ui
+        env:
+          GITHUB_PAGES: true
+        run: npm run build
+
+      - name: Copy index.html to 404.html for SPA routing
+        run: cp console-ui/dist/index.html console-ui/dist/404.html
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: console-ui/dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -13,10 +13,9 @@
 
 # Node.js
 **/node_modules/
-package-lock.json
+tsconfig.tsbuildinfo
 
-# Polkadot API generated files
-.papi/
+# Polkadot API generated files (descriptors dir is gitignored inside .papi)
 
 # Local test files
 kubo/

console-ui/.papi/descriptors/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!package.json

console-ui/.papi/descriptors/package.json

@@ -0,0 +1,24 @@
+{
+  "version": "0.1.0-autogenerated.11803746693258403074",
+  "name": "@polkadot-api/descriptors",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "module": "./dist/index.mjs",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "browser": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "peerDependencies": {
+    "polkadot-api": ">=1.21.0"
+  }
+}