@meddleware/walrus-storage-ui 0.1.64 → 0.1.66

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.66] - 2026-10-31
+
+- Gated upload composable, blob table split, accessibility gates
+
+## [0.1.65] - 2026-10-30
+
+- Dependency updates (minor and patch groups) and workflow action bumps. No source change.
+
 ## [0.1.64] - 2026-10-30
 
 - Point the developer-docs and indexer links at the machine zone (ADR-0005); current @meddleware packages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/walrus-storage-ui",
-  "version": "0.1.64",
+  "version": "0.1.66",
   "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>",
@@ -31,6 +31,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
+    "build:e2e": "VITE_E2E=1 vite build --mode e2e",
     "preview": "vite preview",
     "type-check": "vue-tsc --noEmit",
     "test": "vitest run",
@@ -41,16 +42,19 @@
     "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"
+    "check:licenses": "node scripts/third-party-licenses.mjs --check",
+    "shots": "SHOTS=1 playwright test",
+    "lhci": "npm run build && lhci autorun"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.11",
-    "@meddleware/ui": "^0.1.35",
-    "@meddleware/walrus-storage-client": "^0.0.33",
-    "@meddleware/walrus-storage-kit": "^0.1.35",
+    "@meddleware/design-tokens": "^0.1.12",
+    "@meddleware/ui": "^0.1.37",
+    "@meddleware/walrus-storage-client": "^0.0.34",
+    "@meddleware/walrus-storage-kit": "^0.1.36",
+    "@meddleware/web-utils": "^0.0.1",
     "@mysten/sui": "^2.33.2",
     "@mysten/walrus": "~1.2.32",
     "@mysten/walrus-wasm": "~0.3.1",
@@ -60,13 +64,15 @@
     "@meddleware/wallet-adapter": ">=0.0.12 <0.2.0"
   },
   "devDependencies": {
+    "@lhci/cli": "^0.15.1",
     "@meddleware/access-gate-client": "^0.0.13",
-    "@meddleware/eslint-config": "^0.0.4",
-    "@meddleware/wallet-adapter": "^0.0.18",
+    "@meddleware/frontend-config": "^0.0.1",
+    "@meddleware/wallet-adapter": "^0.0.20",
     "@playwright/test": "~1.64.1",
     "@types/node": "~26.6.5",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/eslint-config-typescript": "^14.9.0",
+    "@vue/test-utils": "^2.5.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^10.11.0",
     "eslint-plugin-vue": "^10.11.1",
@@ -74,6 +80,7 @@
     "html-validate": "^11.16.1",
     "html-validate-vue": "^9.3.1",
     "jiti": "^2.7.0",
+    "jsdom": "^30.1.0",
     "postcss": "^8.4.49",
     "postcss-html": "^2.0.0",
     "stylelint": "^17.15.0",
@@ -88,8 +95,11 @@
     "node": "^22.18.0 || >=24.12.0"
   },
   "browserslist": [
-    "> 0.5%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "extends @meddleware/frontend-config/browserslist-config"
+  ],
+  "overrides": {
+    "basic-ftp": "^6.2.4",
+    "tmp": "^0.2.7",
+    "zod": "^4.6.7"
+  }
 }

package/src/App.vue

@@ -1,56 +1,35 @@
 <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 { AppFooter, AppHeader, ColorModeControl, CopyrightLine, UiAppShell, 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://meddleware.dev/sui/walrus-storage/'
+const DEV_URL = import.meta.env.VITE_DEV_URL || 'https://meddleware.dev/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>
+  <UiAppShell contained>
+    <template #header>
+      <AppHeader variant="dark">
+        <template #brand>Walrus Assets</template>
+        <template #actions>
+          <TipConfigBadge v-if="walrusNetwork" :host="OPERATOR_RELAY_HOSTS[walrusNetwork]" />
+          <ColorModeControl :model-value="mode" @update:model-value="set" />
+        </template>
+      </AppHeader>
+    </template>
 
-    <main class="app__content">
-      <WalrusStorageView />
-    </main>
+    <h1 class="mw-visually-hidden">Walrus Assets</h1>
+    <WalrusStorageView />
 
-    <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL" />
-  </div>
+    <template #footer>
+      <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL">
+        <CopyrightLine symbol-variant="kopimi" organisation-name="Meddleware" rights-statement="jam" />
+      </AppFooter>
+    </template>
+  </UiAppShell>
 </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/components/BlobGroupRows.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+// One blob's rows in the My Blobs table: the group row (re-uploads of the same content are collapsed into it), and, when expanded, one
+// row per underlying copy so a specific pending copy can be certified. Presentational: the parent owns the data and runs the actions.
+import { computed } from 'vue'
+import { CopyableAddress, ExplorerLink, UiBadge, UiButton, UiLiveStatus } from '@meddleware/ui'
+import { formatBytes, truncateMiddle, walruscanBlobUrl } from '@meddleware/web-utils'
+import type { WalrusNetwork } from '@meddleware/walrus-storage-kit'
+import type { OwnedBlob } from '@meddleware/walrus-storage-client'
+import type { PendingCertify } from '@meddleware/walrus-storage-client/flow'
+import { expiryLabel, maxExtendableEpochs, type BlobGroup } from '../blob-groups.js'
+import type { EstimateExtendCost } from '../composables/useExtendQuotes.js'
+import ExtendControl from './ExtendControl.vue'
+
+/** Expiring within this many epochs is flagged. */
+const SOON_EPOCHS = 10
+
+const props = defineProps<{
+  group: BlobGroup
+  network: WalrusNetwork
+  currentEpoch: number
+  /** The longest reservation the chain allows (epochs ahead). */
+  maxReservation: number
+  /** Routed here from the duplicate-upload dialog. */
+  highlighted: boolean
+  expanded: boolean
+  /** Stored certificates of uploaded-but-uncertified copies, by Blob object id. */
+  pending: Record<string, PendingCertify>
+  /** The Blob object id whose action is running, or null. */
+  busy: string | null
+  /** The last action's outcome, by Blob object id. */
+  statuses: Record<string, string>
+  estimate: EstimateExtendCost
+}>()
+const emit = defineEmits<{ toggle: []; extend: [blob: OwnedBlob, epochs: number]; certify: [blob: OwnedBlob] }>()
+
+const representative = computed(() => props.group.representative)
+const certifiable = computed(() => props.group.copies.find((c) => !c.certified && props.pending[c.objectId]) ?? null)
+const certification = computed<'certified' | 'pending' | 'none'>(() => (props.group.anyCertified ? 'certified' : certifiable.value ? 'pending' : 'none'))
+const maxAddable = computed(() => maxExtendableEpochs(representative.value.endEpoch, props.currentEpoch, props.maxReservation))
+const expiresSoon = computed(() => props.group.maxEndEpoch - props.currentEpoch < SOON_EPOCHS)
+const shownCopies = computed(() => (props.expanded ? props.group.copies : []))
+</script>
+
+<template>
+  <tr :id="`blob-row-${group.blobId}`" :class="{ highlight: highlighted }" :aria-current="highlighted || undefined">
+    <th scope="row">
+      <CopyableAddress :address="group.blobId" label="Copy blob ID">
+        <ExplorerLink :href="walruscanBlobUrl(network, group.blobId)" :value="group.blobId" :chars="[8, 6]" />
+      </CopyableAddress>
+      <UiButton v-if="group.copies.length > 1" class="toggle" variant="link" size="sm" :aria-expanded="expanded" @click="emit('toggle')">
+        <span aria-hidden="true">{{ expanded ? '▾' : '▸' }}</span> {{ group.copies.length }} copies
+      </UiButton>
+    </th>
+    <td class="size">{{ formatBytes(group.size) }}</td>
+    <td>
+      {{ expiryLabel(group.maxEndEpoch, currentEpoch) }}
+      <UiBadge v-if="expiresSoon" tone="warn">Expiring soon</UiBadge>
+    </td>
+    <td>
+      <UiBadge v-if="certification === 'certified'" tone="ok">Certified</UiBadge>
+      <UiBadge v-else-if="certification === 'pending'" tone="warn">Uploaded, not certified</UiBadge>
+      <UiBadge v-else tone="neutral" :symbol="false">Not certified</UiBadge>
+    </td>
+    <td class="actions">
+      <UiButton v-if="certifiable" size="sm" variant="secondary" :disabled="busy !== null" :busy="busy === certifiable.objectId" @click="emit('certify', certifiable)">
+        Certify
+      </UiButton>
+      <p v-if="maxAddable === 0" class="at-max">At max lifetime</p>
+      <ExtendControl
+        v-else
+        :blob="representative"
+        :max="maxAddable"
+        :disabled="busy !== null"
+        :busy="busy === representative.objectId"
+        :estimate="estimate"
+        @extend="(epochs) => emit('extend', representative, epochs)"
+      />
+      <UiLiveStatus label="Result" :message="statuses[representative.objectId] ?? ''" />
+    </td>
+  </tr>
+
+  <!-- Per-copy detail for grouped duplicates: certify a specific pending copy. -->
+  <tr v-for="c in shownCopies" :key="c.objectId" class="copy-row">
+    <th scope="row">
+      <CopyableAddress :address="c.objectId" label="Copy object ID">{{ truncateMiddle(c.objectId, [10, 0]) }}</CopyableAddress>
+    </th>
+    <td></td>
+    <td>{{ expiryLabel(c.endEpoch, currentEpoch) }}</td>
+    <td>
+      <UiBadge v-if="c.certified" tone="ok">Certified</UiBadge>
+      <UiBadge v-else-if="pending[c.objectId]" tone="warn">Uploaded, not certified</UiBadge>
+      <UiBadge v-else tone="neutral" :symbol="false">Not certified</UiBadge>
+    </td>
+    <td class="actions">
+      <UiButton v-if="!c.certified && pending[c.objectId]" size="sm" variant="secondary" :disabled="busy !== null" :busy="busy === c.objectId" @click="emit('certify', c)">
+        Certify
+      </UiButton>
+      <UiLiveStatus label="Result" :message="statuses[c.objectId] ?? ''" />
+    </td>
+  </tr>
+</template>
+
+<style scoped>
+/* A truncated id and a size stay on one line each; the table scrolls inside its own box when the screen is narrower. */
+th {
+  white-space: nowrap;
+}
+.size {
+  white-space: nowrap;
+}
+.highlight > * {
+  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
+}
+.copy-row > * {
+  background: var(--lift);
+  font-size: var(--font-size-xs);
+}
+.actions {
+  min-width: 14em;
+}
+/* The toggle sits on its own line under the blob link (the cell does not wrap, so left inline it would spill into the next column), and
+ * the two targets stay 24px apart (WCAG 2.5.8). */
+.toggle {
+  display: flex;
+  inline-size: fit-content;
+  margin-block-start: var(--space-2xs);
+}
+.at-max {
+  margin: 0;
+  color: var(--muted);
+  font-size: var(--font-size-sm);
+}
+</style>

package/src/components/ExtendControl.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+// Extend one blob's storage: choose how many epochs to add (clamped to what the chain still allows), see what that costs in WAL, then
+// extend. The wallet opens only for an amount whose cost has been shown (audit F12): the first press prices the amount, the second
+// confirms. The quote is an estimate (≈); the wallet and the chain decide what is actually paid.
+import { computed, ref, watch } from 'vue'
+import { UiButton, UiInput, UiLiveStatus } from '@meddleware/ui'
+import { truncateMiddle } from '@meddleware/web-utils'
+import { formatCoinAmount } from '@meddleware/walrus-storage-kit'
+import type { OwnedBlob } from '@meddleware/walrus-storage-client'
+import { useExtendQuotes, type EstimateExtendCost } from '../composables/useExtendQuotes.js'
+
+const props = defineProps<{
+  /** The blob (the group's furthest-expiry copy) to extend. */
+  blob: OwnedBlob
+  /** Epochs that can still be added; the control is not shown at 0. */
+  max: number
+  /** Another action is running. */
+  disabled: boolean
+  /** This blob's extension is running. */
+  busy: boolean
+  /** Prices storing `size` bytes for `epochs` (WAL, FROST). */
+  estimate: EstimateExtendCost
+}>()
+const emit = defineEmits<{ extend: [epochs: number] }>()
+
+const quotes = useExtendQuotes(props.estimate)
+// Seeded with a sensible default (+10, clamped) without pricing it: the estimate is fetched on the first interaction, not for every row.
+const amount = ref(Math.min(10, props.max))
+
+function clamp(value: number | string): number {
+  return Math.min(props.max, Math.max(1, Math.floor(Number(value) || 1)))
+}
+
+/** The person picked an amount: clamp it and (re)price it. */
+function pick(value: number | string): void {
+  amount.value = clamp(value)
+  void quotes.price(props.blob.objectId, props.blob.size, amount.value)
+}
+
+const quote = computed(() => quotes.quoteFor(props.blob.objectId, amount.value))
+const quoteText = computed(() => {
+  const q = quote.value
+  if (q?.state === 'ready') return `≈${formatCoinAmount(q.costFrost, 'WAL')} for +${q.epochs} epochs`
+  if (q?.state === 'unavailable') return 'price unavailable'
+  return quotes.pricing.value[props.blob.objectId] === amount.value ? 'pricing…' : ''
+})
+
+async function extend(): Promise<void> {
+  if (props.disabled || props.busy) return
+  if (await quotes.shownBeforeSigning(props.blob.objectId, props.blob.size, amount.value)) emit('extend', amount.value)
+}
+
+// An extension changes the blob's end epoch (and what it may still add): the old quote no longer applies.
+watch(
+  () => props.blob.endEpoch,
+  () => {
+    quotes.clear(props.blob.objectId)
+    amount.value = clamp(amount.value)
+  },
+)
+watch(
+  () => props.max,
+  (max) => {
+    if (amount.value > max) amount.value = Math.max(1, max)
+  },
+)
+</script>
+
+<template>
+  <fieldset class="extend">
+    <legend class="mw-visually-hidden">Extend {{ truncateMiddle(blob.blobId, [8, 6]) }}</legend>
+    <UiInput
+      type="number"
+      min="1"
+      :max="max"
+      :model-value="amount"
+      :aria-label="`Epochs to add to ${truncateMiddle(blob.blobId, [8, 6])}`"
+      @update:model-value="pick($event ?? 1)"
+    />
+    <UiButton variant="ghost" size="sm" @click="pick(10)">+10</UiButton>
+    <UiButton variant="ghost" size="sm" @click="pick(25)">+25</UiButton>
+    <UiButton variant="ghost" size="sm" @click="pick(max)">Max</UiButton>
+    <UiButton size="sm" :disabled="disabled" :busy="busy" @click="extend">{{ quote ? 'Extend' : 'Show cost' }}</UiButton>
+    <UiLiveStatus label="Extension cost" :message="quoteText" />
+  </fieldset>
+</template>
+
+<style scoped>
+.extend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3xs);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.extend :deep(.mw-input) {
+  width: 5em;
+}
+</style>