@meddleware/walrus-storage-ui 0.0.0-rename.0 → 0.1.62

package/CHANGELOG.md

@@ -0,0 +1,74 @@
+# Changelog
+
+All notable changes to `@meddleware/walrus-ui` are documented here.
+Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versioning follows
+[Semantic Versioning](https://semver.org/). Before 0.2.0, breaking changes ship as patch releases.
+
+## [0.1.62] - 2026-10-24
+
+### Changed
+
+- Renamed from `walrus-ui` to `walrus-storage-ui` (workspace naming convention, `docs/architecture/ADR-0003-naming.md`). No code change beyond names, paths, hostnames and dependency names; the history below keeps the old names.
+
+## [0.1.61] - 2026-10-22
+
+### Changed
+
+- Dependencies: walrus-client ^0.0.30 (flow passes the real challenge expiry; nft-gate-client 0.0.18 rules), walrus-relay ^0.1.33, access-gate-client ^0.0.10 (stale indexer fallback); image base static-server 0.1.11 (Go 1.26.10 standard library, CVE-2026-111943)
+
+## [0.1.60] - 2026-10-19
+
+### Changed
+
+- Image rebuilt without the `VITE_UPLOAD_RELAY_MAX_TIP_MIST` repository variable (deleted; it still held the old 0.05 SUI ceiling and overrode the 0.005 SUI default introduced in the previous release)
+
+## [0.1.59] - 2026-10-19
+
+### Changed
+
+- The default relay tip ceiling (`VITE_UPLOAD_RELAY_MAX_TIP_MIST` unset) is now `5_000_000` MIST (0.005 SUI), down
+  from 0.05 SUI: about 8× the worst-case tip of the re-priced operator relay (`100_000` MIST + 1 MIST per encoded
+  KiB; workspace cost model, decision D57). The repository variable `VITE_UPLOAD_RELAY_MAX_TIP_MIST`, when set,
+  still wins.
+
+## [0.1.58] - 2026-10-18
+
+### Changed (breaking, pre-v0.2)
+
+- **Adopts `@meddleware/walrus-relay` 0.1.31.** `useAccessGate` is given the network and a client getter
+  that serves the active network only; the access gate is still built by `relayGateConfig`, so it names the
+  published `access_gate` deployment. The purchase prompt (`AccessGateCta`) now shows the price, payees,
+  network and pass kind read from the chain, with a "Read the price again" button when they cannot be read.
+- **`VITE_ACCESS_GATE_PRICE_MIST_TESTNET` is removed** (code, `.env.example`, Dockerfile build argument,
+  release workflow and README). The price is read from the gate on the chain; a build that still sets the
+  variable ignores it.
+- `WalrusUpload` gets `sessionKey` (`<network>:<address>`), so a change of account or network discards the
+  chosen file and any held retry; the upload approvals hint follows the held pass (`singleUse`).
+- Dependencies: `@meddleware/walrus-client` ^0.0.28, `@meddleware/walrus-relay` ^0.1.31,
+  `@meddleware/design-tokens` ^0.1.10, `@meddleware/access-gate-client` ^0.0.9. The unused
+  `@mysten/wallet-standard` dependency is dropped.
+- Image base: `static-server` 0.1.8 (`sha256:e32cf42b…4000`).
+
+### Fixed
+
+- **A slower owned-blob load no longer overwrites a newer one** after a wallet-account or network switch,
+  a disconnect, or a switch back to a list that is already held (a stale result, error or `loading` flag is
+  dropped); a cleared list no longer reads as loaded for the previous account.
+- **Extend shows its cost before the wallet opens.** The seeded +10 epochs is priced on the first press
+  (the button reads "Show cost"), the amount and `≈ WAL` cost are shown, and the wallet opens on the next
+  press (`Extend`). An amount that cannot be priced says "price unavailable".
+- **My Blobs text meets AA contrast in both themes.** It read `--mw-color-*` custom properties that
+  design-tokens does not define, so literal fallbacks (`#888`, `#c00`, `#ddd`, `#f90`) ignored theme and
+  season; it now uses `--muted`, `--danger`, `--border`, `--warning` (tint only) and `--accent`.
+  A test fails if a component reads a custom property design-tokens does not define.
+
+### Security
+
+- `.env*` is git-ignored (except `.env.example`).
+- `SECURITY.md` invariant 1 names the real wiring of the tip ceiling (`maxTipMist` to `runBlobUpload`).
+
+### Added
+
+- `CHANGELOG.md` (it was listed in the package `files` without existing).
+- Tests: stale-load guard (`useOwnedBlobs.stale`), extend quotes, the custom-property check, and the
+  gate-config/`useAccessGate` pairing.

package/LICENSE

@@ -0,0 +1,14 @@
+BSD Zero Clause License
+
+Copyright (c) 2026 MeddleWare
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# @meddleware/walrus-storage-ui
+
+[![License: 0BSD](https://img.shields.io/badge/license-0BSD-blue)](LICENSE)
+
+A Vue 3 SPA for uploading and managing blobs on [Walrus](https://walrus.xyz) decentralised
+storage on Sui. Supports NFT-gated operator relays (commission-enforced on-chain via
+`access_gate`) with automatic fallback to the public Mysten relay.
+
+## Features
+
+- Connect any Sui wallet (wallet-standard)
+- Select between operator relay (supports the app) and public relay (free)
+- Upload blobs through an NFT-gated or open relay
+- View and extend your owned Walrus blobs
+- Two-approval upload flow: register tx → upload → certify tx
+
+## Local development
+
+```bash
+npm install
+npm run dev
+```
+
+> `@meddleware/walrus-storage-kit` is resolved from the npm registry. For local development against an
+> unpublished library, use `npm link @meddleware/walrus-storage-kit` or an `overrides` entry pointing at
+> a local checkout.
+
+## Environment variables
+
+All `VITE_*` vars are baked into the static bundle at build time.
+
+| Variable | Default | Description |
+| --- | --- | --- |
+| `VITE_NETWORK` | `testnet` | Network the standalone build selects (`testnet` or `mainnet`); embedded, the host's selector rules |
+| `VITE_WALRUS_RELAY_TESTNET` | Public Mysten relay | Operator relay URL for testnet |
+| `VITE_WALRUS_RELAY_MAINNET` | Public Mysten relay | Operator relay URL for mainnet |
+| `VITE_ACCESS_GATE_ID_TESTNET` | — | Gate object ID (testnet; unset = no gate) |
+| `VITE_ACCESS_GATE_SOULBOUND_TESTNET` | `false` | `true` if NFTs are soulbound |
+| `VITE_ACCESS_GATE_ID_MAINNET` | — | Gate object ID (mainnet) |
+| `VITE_UPLOAD_RELAY_MAX_TIP_MIST` | `5000000` | Max relay tip cap in MIST (0.005 SUI) |
+
+The `access_gate` package and `PlatformConfig` come from the published deployment
+(`relayGateConfig` in `@meddleware/walrus-storage-kit`) — operators only configure the values listed
+above.
+
+## Docker build
+
+The Docker context is this repo root. `@meddleware/walrus-storage-kit` resolves from the npm registry,
+so the library must be published before building the image.
+
+```bash
+docker build \
+  --build-arg VITE_NETWORK=testnet \
+  --build-arg VITE_WALRUS_RELAY_TESTNET=https://sui-walrus-storage-relay.example.com \
+  --build-arg VITE_ACCESS_GATE_ID_TESTNET=0x... \
+  -t walrus-storage-ui:latest .
+```
+
+## Architecture
+
+Thin SPA — no accounting logic, no chain state derivation. The app:
+1. Reads config from env vars
+2. Wires `@meddleware/walrus-storage-kit` composables (`useAccessGate`, `useWalrusRelay`) to the
+   connected wallet
+3. Passes a `performUpload` callback to `WalrusUpload`, which holds the `@mysten/walrus` client
+   and the upload flow logic
+4. Displays results
+
+All financial truth is on-chain. This UI is an orchestration shell.
+
+## License
+
+0BSD

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <title>Walrus Uploader · MeddleWare</title>
+    <meta name="description" content="Upload blobs to Walrus decentralised storage on Sui through the MeddleWare relay. Client-side; your wallet signs and pays." />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1 +1,95 @@
-{"name":"@meddleware/walrus-storage-ui","version":"0.0.0-rename.0","description":"Placeholder: the real releases are published from CI (renamed package, see https://github.com/meddleware-org/walrus-storage-ui).","license":"0BSD","repository":{"type":"git","url":"git+https://github.com/meddleware-org/walrus-storage-ui.git"},"publishConfig":{"access":"public"}}
+{
+  "name": "@meddleware/walrus-storage-ui",
+  "version": "0.1.62",
+  "homepage": "https://docs.meddleware.co.uk/blockchain/sui/walrus-storage/",
+  "description": "Standalone Vue 3 SPA for uploading blobs to Walrus decentralised storage and managing owned blobs — wallet-connected, NFT-gated relay support.",
+  "author": "Meddleware <dev@meddleware.co.uk>",
+  "license": "0BSD",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meddleware-org/walrus-storage-ui.git"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.vue"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "lint:css": "stylelint \"src/**/*.{css,vue}\"",
+    "lint:js": "eslint .",
+    "lint": "npm run lint:css && npm run lint:js && npm run lint:html",
+    "lint:html": "html-validate \"src/**/*.vue\"",
+    "licenses": "node scripts/third-party-licenses.mjs",
+    "check:licenses": "node scripts/third-party-licenses.mjs --check"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@meddleware/design-tokens": "^0.1.10",
+    "@meddleware/ui": "^0.1.31",
+    "@meddleware/walrus-storage-client": "^0.0.31",
+    "@meddleware/walrus-storage-kit": "^0.1.34",
+    "@mysten/sui": "^2.33.2",
+    "@mysten/walrus": "~1.2.32",
+    "@mysten/walrus-wasm": "~0.3.1",
+    "vue": "^3.5.43"
+  },
+  "peerDependencies": {
+    "@meddleware/wallet-adapter": ">=0.0.12 <0.2.0"
+  },
+  "devDependencies": {
+    "@meddleware/access-gate-client": "^0.0.10",
+    "@meddleware/eslint-config": "^0.0.3",
+    "@meddleware/wallet-adapter": "^0.0.17",
+    "@playwright/test": "~1.64.1",
+    "@types/node": "~26.6.5",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^10.11.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "eslint-plugin-vuejs-accessibility": "^2.6.0",
+    "html-validate": "^11.16.1",
+    "html-validate-vue": "^9.3.1",
+    "jiti": "^2.7.0",
+    "postcss": "^8.4.49",
+    "postcss-html": "^2.0.0",
+    "stylelint": "^17.15.0",
+    "stylelint-config-standard": "^40.0.0",
+    "typescript": "~6.0.0",
+    "vite": "^8.3.0",
+    "vitest": "~5.0.2",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "~3.3.0"
+  },
+  "engines": {
+    "node": "^22.18.0 || >=24.12.0"
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/src/App.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// Standalone shell for the Walrus SPA: app header + footer wrapping the core tool view.
+// The core UI lives in WalrusStorageView.vue (also exported for inline embedding in the dashboard).
+import { AppHeader, AppFooter, ColorModeControl, useColorMode } from '@meddleware/ui'
+import { TipConfigBadge } from '@meddleware/walrus-storage-kit'
+import { walrusNetwork, OPERATOR_RELAY_HOSTS } from './config.js'
+import WalrusStorageView from './components/WalrusStorageView.vue'
+
+const { mode, set } = useColorMode('dark')
+const DOCS_URL = import.meta.env.VITE_DOCS_URL || 'https://docs.meddleware.co.uk/blockchain/sui/walrus-storage/'
+const DEV_URL  = import.meta.env.VITE_DEV_URL  || 'https://dev.meddleware.co.uk/sui/walrus-storage/'
+</script>
+
+<template>
+  <div class="app">
+    <AppHeader variant="dark">
+      <template #brand>
+        <h1 class="brand-title">Walrus Assets</h1>
+      </template>
+      <template #actions>
+        <TipConfigBadge v-if="walrusNetwork" :host="OPERATOR_RELAY_HOSTS[walrusNetwork]" />
+        <ColorModeControl :model-value="mode" @update:model-value="set" />
+      </template>
+    </AppHeader>
+
+    <main class="app__content">
+      <WalrusStorageView />
+    </main>
+
+    <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL" />
+  </div>
+</template>
+
+<style scoped>
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Centre the tool at the shared tool-content width when running standalone. The dashboard
+   supplies its own width container, so this lives in the shell, not WalrusStorageView. */
+.app__content {
+  flex: 1;
+  width: 100%;
+  max-width: var(--mw-tool-content-max);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 1.5rem 1.25rem 4rem;
+}
+
+.brand-title {
+  font: inherit;
+  margin: 0;
+}
+</style>

package/src/blob-groups.ts

@@ -0,0 +1,68 @@
+// Group a wallet's owned Walrus blobs by `blobId` for display. Re-uploading the same content creates
+// multiple independent Blob objects (each its own storage reservation); grouping collapses those into
+// one row so My Blobs matches how Walruscan thinks per-blobId, while still exposing each copy.
+import type { OwnedBlob } from '@meddleware/walrus-storage-client'
+
+export interface BlobGroup {
+  /** Shared Walrus blob id. */
+  blobId: string
+  /** Size in bytes (identical across copies of the same content). */
+  size: number
+  /** Furthest storage end epoch across copies — the effective availability of this content. */
+  maxEndEpoch: number
+  /** True if any copy is certified (i.e. the content is currently available on-chain). */
+  anyCertified: boolean
+  /** The copy that defines availability (max end epoch); the default target for Extend. */
+  representative: OwnedBlob
+  /** All underlying Blob objects for this blobId, furthest-expiry first. */
+  copies: OwnedBlob[]
+}
+
+/** Collapse owned blobs into per-blobId groups, each sorted by end epoch (furthest first). */
+export function groupBlobs(blobs: OwnedBlob[]): BlobGroup[] {
+  const byId = new Map<string, OwnedBlob[]>()
+  for (const b of blobs) {
+    const list = byId.get(b.blobId)
+    if (list) list.push(b)
+    else byId.set(b.blobId, [b])
+  }
+  const groups: BlobGroup[] = []
+  for (const [blobId, copies] of byId) {
+    const sorted = [...copies].sort((a, b) => b.endEpoch - a.endEpoch)
+    const representative = sorted[0]
+    groups.push({
+      blobId,
+      size: representative.size,
+      maxEndEpoch: representative.endEpoch,
+      anyCertified: sorted.some((b) => b.certified),
+      representative,
+      copies: sorted,
+    })
+  }
+  // Most-expiring-soonest groups first (matches the pre-grouping sort), so attention lands on them.
+  return groups.sort((a, b) => a.maxEndEpoch - b.maxEndEpoch)
+}
+
+/** Epochs of storage left before expiry (clamped at 0). */
+export function epochsLeft(endEpoch: number, currentEpoch: number): number {
+  return Math.max(0, endEpoch - currentEpoch)
+}
+
+/** Human label for a blob's remaining lifetime, transport-independent (no fabricated day estimate). */
+export function expiryLabel(endEpoch: number, currentEpoch: number): string {
+  const left = epochsLeft(endEpoch, currentEpoch)
+  if (left <= 0) return `epoch ${endEpoch} · expired`
+  return `epoch ${endEpoch} · ${left} epoch${left === 1 ? '' : 's'} left`
+}
+
+/**
+ * Epochs that can still be added to a blob before hitting `max_epochs_ahead` (a blob's end epoch
+ * cannot exceed `currentEpoch + maxReservation`). Zero means it's already at max lifetime.
+ */
+export function maxExtendableEpochs(
+  endEpoch: number,
+  currentEpoch: number,
+  maxReservation: number,
+): number {
+  return Math.max(0, currentEpoch + maxReservation - endEpoch)
+}