@meddleware/walrus-ui 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "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",
@@ -42,9 +42,9 @@
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/nft-gate-client": "^0.0.6",
-    "@meddleware/ui": "^0.1.9",
+    "@meddleware/ui": "^0.1.10",
     "@meddleware/wallet-adapter": "^0.0.5",
-    "@meddleware/walrus-client": "^0.0.7",
+    "@meddleware/walrus-client": "^0.0.8",
     "@meddleware/walrus-relay": "^0.1.8",
     "@mysten/sui": "^2.30.0",
     "@mysten/wallet-standard": "^0.20.0",

package/src/components/MyBlobs.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
+import { CopyableAddress, ExplorerLink } from '@meddleware/ui'
 import type { OwnedBlob } from '@meddleware/walrus-client'
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 import type { Executor } from '../wallet.js'
-import { NETWORK } from '../config.js'
+import { NETWORK, walruscanBlobUrl } from '../config.js'
 import { useOwnedBlobs } from '../composables/useOwnedBlobs.js'
 
 const props = defineProps<{
@@ -92,7 +93,15 @@ watch(() => props.address, (addr) => void load(addr))
           :key="blob.objectId"
           :class="{ warn: blob.endEpoch - currentEpoch < EXPIRY_WARN_EPOCHS }"
         >
-          <td class="mono">{{ blob.blobId.slice(0, 12) }}…</td>
+          <td>
+            <CopyableAddress :address="blob.blobId" label="Copy blob ID">
+              <ExplorerLink
+                :href="walruscanBlobUrl(NETWORK, blob.blobId)"
+                :value="blob.blobId"
+                :chars="[8, 6]"
+              />
+            </CopyableAddress>
+          </td>
           <td>{{ (blob.size / 1024).toFixed(1) }} KB</td>
           <td>
             epoch {{ blob.endEpoch }}

package/src/components/WalrusView.vue

@@ -11,13 +11,14 @@ import {
   MAX_SINGLE_RESERVATION_EPOCHS,
 } from '@meddleware/walrus-relay'
 import type { UploadResult } from '@meddleware/walrus-relay'
+import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
 // Lightweight URL import — just the wasm asset URL (does not pull the walrus client).
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 import { WalletGuard } from '@meddleware/wallet-adapter'
 import { useWallet, getSuiClient } from '../wallet.js'
 import { fetchChallenge, buildAccessProof } from '@meddleware/nft-gate-client'
-import { NETWORK, relayHosts, accessGate, uploadRelayMaxTipMist } from '../config.js'
-import { runBlobUpload } from '../upload-flow.js'
+import { NETWORK, relayHosts, accessGate, uploadRelayMaxTipMist, walruscanBlobUrl } from '../config.js'
+import { runBlobUpload, type UploadResumeState } from '../upload-flow.js'
 import { consumeStorageKey, isRedeemedConflict, resolveGatedAuthToken } from '../access-resume.js'
 import { useOwnedBlobs } from '../composables/useOwnedBlobs.js'
 import MyBlobs from './MyBlobs.vue'
@@ -51,15 +52,30 @@ async function onPurchase(): Promise<void> {
   }
 }
 
+// The relay auth token for the current attempt. The walrus client reads it PER REQUEST (a provider),
+// so a retained flow resumed after a failure presents a fresh challenge signature. Undefined ⇒
+// ungated (no header).
+const authTokenRef = ref<string | undefined>(undefined)
+// A same-session registered blob retained after a failed upload, keyed by file content, so a retry
+// resumes from the relay upload instead of re-registering (no new WAL/gas). Cleared on success or
+// when a resumed attempt itself fails (fall back to a fresh full upload).
+const uploadSession = ref<{ key: string; state: UploadResumeState } | null>(null)
+
+/** Cheap content key (length + head/tail bytes) to match a retry to the same selected file. */
+function contentKey(bytes: Uint8Array): string {
+  const head = Array.from(bytes.slice(0, 16)).join(',')
+  const tail = Array.from(bytes.slice(-16)).join(',')
+  return `${bytes.length}:${head}:${tail}`
+}
+
 // Wire the shared WalrusUpload widget to the extracted upload orchestration + the wallet. The
-// register/upload/certify sequence lives in src/upload-flow.ts (unit-tested); this closure only
-// gathers the wallet-bound inputs (executor, sui client, gated proof token) and delegates.
-//
-// Single-use resume: the relay treats the permanent on-chain `consumeDigest` as the one-time
-// redemption token, so a use is only spent when an upload succeeds. We persist the digest before
-// uploading and reuse it on retry/reload (re-signing a fresh challenge is free) — an interrupted
-// upload never burns a use. On success we clear it; if the relay reports the digest already
-// redeemed (a prior upload actually landed), we clear and consume a fresh use once.
+// register/upload/certify sequence lives in src/upload-flow.ts (unit-tested); this closure gathers
+// the wallet-bound inputs and manages two resume layers so an interrupted upload wastes nothing:
+//   1. Single-use consume: the relay treats the permanent on-chain `consumeDigest` as the one-time
+//      redemption token, so a use is only spent when an upload succeeds. The digest is persisted and
+//      reused across retries/reload (re-signing a fresh challenge is free); cleared on success.
+//   2. Walrus flow (same session): a registered-but-not-uploaded blob is retained and reused on a
+//      retry of the same file, skipping re-encode/re-register (no new WAL/gas).
 async function performUpload(
   bytes: Uint8Array,
   opts: { relayHost: string; onStatus: (s: string) => void },
@@ -67,21 +83,23 @@ async function performUpload(
   if (!account.value) throw new Error('Connect your wallet first.')
   const executor = await buildExecutor()
   const address = account.value.address
+  const key = contentKey(bytes)
 
-  // Ungated relay: no consume, straight upload.
-  if (!(gate && gateState.hasAccess.value === true && gateState.nftId.value)) {
-    return runBlobUpload(uploadDeps(bytes, opts, executor, undefined))
-  }
+  const gated = !!(gate && gateState.hasAccess.value === true && gateState.nftId.value)
+  const consumeKey = gate ? consumeStorageKey(NETWORK, gate.gateId, address) : null
 
-  const nftId = gateState.nftId.value
-  const key = consumeStorageKey(NETWORK, gate.gateId, address)
-  const resolve = (forceFresh: boolean) =>
-    resolveGatedAuthToken({
+  // Resolve this attempt's relay token (gated only) and stash it where the client reads it.
+  async function setToken(forceFresh: boolean): Promise<void> {
+    if (!gated) {
+      authTokenRef.value = undefined
+      return
+    }
+    authTokenRef.value = await resolveGatedAuthToken({
       storage: window.localStorage,
-      key,
+      key: consumeKey as string,
       relayHost: opts.relayHost,
       address,
-      nftId,
+      nftId: gateState.nftId.value as string,
       fetchChallenge,
       buildConsume: (id, nonce) => gateState.buildConsume(id, nonce),
       signAndExecute: (tx) => executor.signAndExecute(tx),
@@ -90,44 +108,59 @@ async function performUpload(
       sign: signPersonalMessage,
       forceFresh,
     })
-
-  try {
-    const authToken = await resolve(false)
-    const result = await runBlobUpload(uploadDeps(bytes, opts, executor, authToken))
-    window.localStorage.removeItem(key) // upload succeeded → the use is now spent
-    return result
-  } catch (e) {
-    if (!isRedeemedConflict(e)) throw e // transient failure → keep the digest so the next try resumes
-    // The stored consume was already redeemed (a prior upload actually landed). Clear it and spend
-    // one fresh use for this new upload.
-    window.localStorage.removeItem(key)
-    const authToken = await resolve(true)
-    const result = await runBlobUpload(uploadDeps(bytes, opts, executor, authToken))
-    window.localStorage.removeItem(key)
-    return result
   }
-}
 
-/** Assemble the register→upload→certify inputs for {@link runBlobUpload}. */
-function uploadDeps(
-  bytes: Uint8Array,
-  opts: { relayHost: string; onStatus: (s: string) => void },
-  executor: Awaited<ReturnType<typeof buildExecutor>>,
-  authToken: string | undefined,
-) {
-  if (!account.value) throw new Error('Connect your wallet first.')
-  return {
+  const deps = (resume?: UploadResumeState) => ({
     bytes,
     network: NETWORK,
     relayHost: opts.relayHost,
-    address: account.value.address,
+    address,
     wasmUrl: walrusWasmUrl,
     maxTipMist: uploadRelayMaxTipMist(),
     epochs: MAX_SINGLE_RESERVATION_EPOCHS,
     executor,
     suiClient: getSuiClient(),
-    authToken,
+    // Provider: resolved per request so a resumed flow uses the fresh token.
+    authToken: () => authTokenRef.value,
     onStatus: opts.onStatus,
+    resume,
+    onRegistered: (state: UploadResumeState) => {
+      uploadSession.value = { key, state }
+    },
+  })
+
+  const succeed = (r: UploadResult): UploadResult => {
+    uploadSession.value = null
+    if (consumeKey) window.localStorage.removeItem(consumeKey) // use spent only on success
+    return r
+  }
+
+  // Reuse a retained registration for this exact file, if any.
+  const resumeFor = () => (uploadSession.value?.key === key ? uploadSession.value.state : undefined)
+  const wasResuming = resumeFor() !== undefined
+
+  await setToken(false)
+  try {
+    return succeed(await runBlobUpload(deps(resumeFor())))
+  } catch (e) {
+    // A resumed attempt failed → drop the retained registration so the next try does a full fresh
+    // upload (re-register), guaranteeing behaviour no worse than a non-resumed run.
+    if (wasResuming) uploadSession.value = null
+
+    if (gated && isRedeemedConflict(e)) {
+      // Stored consume already redeemed (a prior upload actually landed): clear it, spend a fresh
+      // use, and retry — resuming the registered blob if we still hold it.
+      window.localStorage.removeItem(consumeKey as string)
+      await setToken(true)
+      const resume2 = resumeFor()
+      try {
+        return succeed(await runBlobUpload(deps(resume2)))
+      } catch (e2) {
+        if (resume2) uploadSession.value = null
+        throw e2
+      }
+    }
+    throw e // keep the retained registration so a manual retry resumes
   }
 }
 
@@ -173,32 +206,65 @@ function onSettled(): void {
 
     <WalletGuard message="Connect a Sui wallet to upload and manage your blobs.">
       <template v-if="activeTab === 'upload'">
-        <AccessGateCta
-          :gate-configured="gateState.gateConfigured"
-          :has-access="gateState.hasAccess.value"
-          :busy="purchasing"
-          :price-mist="gate?.priceMist ?? null"
-          @purchase="onPurchase"
-        />
-
-        <WalrusUpload
-          :hosts="relayHosts(NETWORK)"
-          :connected="!!account"
-          :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
-          :perform-upload="performUpload"
-          @uploaded="onUploaded"
-          @settled="onSettled"
-        />
-
-        <section v-if="result" class="result">
-          <h2>Uploaded ✓</h2>
-          <p><strong>Blob ID:</strong> <code>{{ result.blobId }}</code></p>
-          <p>
-            <strong>URL:</strong>
-            <a :href="result.url" target="_blank" rel="noopener">{{ result.url }}</a>
-          </p>
-          <p v-if="result.digest"><strong>Certify tx:</strong> <code>{{ result.digest }}</code></p>
-        </section>
+        <!-- Gated + no access: replace the form with the purchase CTA so the user is guided to buy
+             first, rather than facing a disabled form. -->
+        <div v-if="gateState.gateConfigured && gateState.hasAccess.value === false" class="gate-card">
+          <AccessGateCta
+            :gate-configured="gateState.gateConfigured"
+            :has-access="gateState.hasAccess.value"
+            :busy="purchasing"
+            :price-mist="gate?.priceMist ?? null"
+            @purchase="onPurchase"
+          />
+        </div>
+
+        <!-- Ownership check still in flight. -->
+        <p
+          v-else-if="gateState.gateConfigured && gateState.hasAccess.value === null"
+          class="checking"
+        >
+          Checking access…
+        </p>
+
+        <!-- Access held (or ungated relay): show the upload form. -->
+        <template v-else>
+          <WalrusUpload
+            :hosts="relayHosts(NETWORK)"
+            :connected="!!account"
+            :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
+            :perform-upload="performUpload"
+            @uploaded="onUploaded"
+            @settled="onSettled"
+          />
+
+          <section v-if="result" class="result">
+            <h2>Uploaded ✓</h2>
+            <p>
+              <strong>Blob ID:</strong>
+              <CopyableAddress :address="result.blobId" label="Copy blob ID">
+                <ExplorerLink
+                  :href="walruscanBlobUrl(NETWORK, result.blobId)"
+                  :value="result.blobId"
+                  :chars="[8, 6]"
+                />
+              </CopyableAddress>
+            </p>
+            <p>
+              <strong>URL:</strong>
+              <a :href="result.url" target="_blank" rel="noopener">{{ result.url }}</a>
+            </p>
+            <p v-if="result.digest">
+              <strong>Certify tx:</strong>
+              <CopyableAddress :address="result.digest" label="Copy transaction digest">
+                <ExplorerLink
+                  :href="suiExplorerUrl('txblock', result.digest, NETWORK)"
+                  :value="result.digest"
+                  :chars="[8, 6]"
+                />
+              </CopyableAddress>
+            </p>
+          </section>
+        </template>
       </template>
 
       <MyBlobs
@@ -235,6 +301,21 @@ function onSettled(): void {
   font-size: 0.85rem;
 }
 
+.gate-card {
+  margin-top: 1rem;
+  padding: 1.5rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface, transparent);
+  text-align: center;
+}
+
+.checking {
+  margin-top: 1.5rem;
+  color: var(--muted);
+  text-align: center;
+}
+
 .tabs {
   display: flex;
   gap: 0.25rem;

package/src/composables/useOwnedBlobs.ts

@@ -34,11 +34,14 @@ async function load(address: string | null, opts: { force?: boolean } = {}): Pro
     const { createWalrusClient, fetchOwnedWalrusBlobs } = await import('@meddleware/walrus-client')
     const suiClient = getSuiClient()
     const walrusClient = createWalrusClient({ network: NETWORK, wasmUrl: walrusWasmUrl })
+    // Blob `endEpoch` is a WALRUS epoch, so compare against the Walrus committee epoch — NOT the
+    // Sui system-state epoch (they are different clocks; the Sui epoch, ~1218 vs ~570, made every
+    // blob read as "expired").
     const [sys, fetched] = await Promise.all([
-      suiClient.getCurrentSystemState(),
+      walrusClient.walrus.systemState(),
       fetchOwnedWalrusBlobs(suiClient, walrusClient, address),
     ])
-    currentEpoch.value = Number(sys.systemState.epoch)
+    currentEpoch.value = Number(sys.committee.epoch)
     blobs.value = fetched.sort((a: OwnedBlob, b: OwnedBlob) => a.endEpoch - b.endEpoch)
     loadedFor.value = address
   } catch (e) {

package/src/config.ts

@@ -34,6 +34,14 @@ export function relayHosts(network: WalrusNetwork): { operator: string; public:
   return { operator: OPERATOR_RELAY_HOSTS[network], public: PUBLIC_WALRUS_RELAY_HOSTS[network] }
 }
 
+/**
+ * Walruscan explorer URL for a blob. A Walrus blob id is not a Sui object, so it links to the
+ * Walrus-native explorer rather than a Sui explorer (SuiVision handles Sui entities elsewhere).
+ */
+export function walruscanBlobUrl(network: WalrusNetwork, blobId: string): string {
+  return `https://walruscan.com/${network}/blob/${blobId}`
+}
+
 /** Default relay tip ceiling (MIST) when `VITE_UPLOAD_RELAY_MAX_TIP_MIST` is unset (0.5 SUI). */
 export const DEFAULT_UPLOAD_RELAY_MAX_TIP_MIST = 500_000_000
 

package/src/upload-flow.ts

@@ -24,7 +24,7 @@ interface BuiltTx {
   build(opts: { client: unknown }): Promise<unknown>
 }
 
-interface BlobUploadFlow {
+export interface BlobUploadFlow {
   encode(): Promise<void>
   register(opts: { owner: string; epochs: number; deletable: boolean }): BuiltTx
   upload(opts: { digest: string }): Promise<void>
@@ -32,6 +32,17 @@ interface BlobUploadFlow {
   getBlob(): Promise<{ blobId: string }>
 }
 
+/**
+ * A same-session resume point: a flow whose blob is already registered on-chain, plus the register
+ * transaction digest. Passing this to {@link runBlobUpload} skips encode + register (no new WAL/gas)
+ * and retries from the relay upload — so an interrupted upload never re-registers. Not serialisable
+ * / not for cross-reload use (the flow holds the encoded blob in memory).
+ */
+export interface UploadResumeState {
+  flow: BlobUploadFlow
+  registerDigest: string
+}
+
 export interface RunBlobUploadDeps {
   bytes: Uint8Array
   network: string
@@ -47,11 +58,24 @@ export interface RunBlobUploadDeps {
   executor: UploadExecutor
   /** A Sui client used to `build()` the register/certify transactions. */
   suiClient: unknown
-  /** Optional Bearer proof token for an NFT-gated relay. */
-  authToken?: string
+  /**
+   * Bearer proof token for an NFT-gated relay. May be a provider resolved per request so a resumed
+   * upload presents a fresh challenge signature (see `@meddleware/walrus-client`).
+   */
+  authToken?: string | (() => string | undefined)
   onStatus: (s: string) => void
   /** Lazy loader for the Walrus client module (keeps wasm out of the eager bundle). */
   loadWalrusClient?: () => Promise<WalrusClientModule>
+  /**
+   * Resume a prior same-session upload from its registered blob (skips encode + register). Omit for
+   * a fresh upload.
+   */
+  resume?: UploadResumeState
+  /**
+   * Called once the blob is registered (fresh uploads only), handing back the flow + register digest
+   * so the caller can retain them and resume the relay upload after a failure without re-registering.
+   */
+  onRegistered?: (state: UploadResumeState) => void
 }
 
 /**
@@ -66,27 +90,41 @@ export async function runBlobUpload(deps: RunBlobUploadDeps): Promise<UploadResu
     (async () => (await import('@meddleware/walrus-client')) as unknown as WalrusClientModule)
   const { createWalrusClient, createBlobUploadFlow, walrusBlobUrl } = await load()
 
-  const client = createWalrusClient({
-    network: deps.network,
-    wasmUrl: deps.wasmUrl,
-    uploadRelayHost: deps.relayHost,
-    uploadRelayAuthToken: deps.authToken,
-    uploadRelayMaxTipMist: deps.maxTipMist,
-  })
-  const flow = createBlobUploadFlow(client, deps.bytes)
+  let flow: BlobUploadFlow
+  let registerDigest: string
+
+  if (deps.resume) {
+    // Same-session resume: the blob is already registered on-chain. Skip encode + register (no new
+    // WAL/gas) and retry from the relay upload. The retained flow keeps its registered state; its
+    // client resolves the relay token per request, so a fresh challenge is used on retry.
+    flow = deps.resume.flow
+    registerDigest = deps.resume.registerDigest
+  } else {
+    const client = createWalrusClient({
+      network: deps.network,
+      wasmUrl: deps.wasmUrl,
+      uploadRelayHost: deps.relayHost,
+      uploadRelayAuthToken: deps.authToken,
+      uploadRelayMaxTipMist: deps.maxTipMist,
+    })
+    flow = createBlobUploadFlow(client, deps.bytes)
 
-  deps.onStatus('Encoding…')
-  await flow.encode()
+    deps.onStatus('Encoding…')
+    await flow.encode()
 
-  deps.onStatus('Registering blob (approve in wallet)…')
-  const regTx = flow.register({ owner: deps.address, epochs: deps.epochs, deletable: false })
-  regTx.setSenderIfNotSet(deps.address)
-  await regTx.build({ client: deps.suiClient })
-  const reg = await deps.executor.signAndExecute(regTx)
-  await deps.executor.waitForTransaction(reg.digest)
+    deps.onStatus('Registering blob (approve in wallet)…')
+    const regTx = flow.register({ owner: deps.address, epochs: deps.epochs, deletable: false })
+    regTx.setSenderIfNotSet(deps.address)
+    await regTx.build({ client: deps.suiClient })
+    const reg = await deps.executor.signAndExecute(regTx)
+    await deps.executor.waitForTransaction(reg.digest)
+    registerDigest = reg.digest
+    // Hand the registered flow back so the caller can resume the relay upload after a failure.
+    deps.onRegistered?.({ flow, registerDigest })
+  }
 
   deps.onStatus('Uploading to the relay…')
-  await flow.upload({ digest: reg.digest })
+  await flow.upload({ digest: registerDigest })
 
   deps.onStatus('Certifying (approve in wallet)…')
   const certTx = flow.certify()