@meddleware/walrus-ui 0.1.25 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "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",
@@ -44,7 +44,7 @@
     "@meddleware/nft-gate-client": "^0.0.6",
     "@meddleware/ui": "^0.1.10",
     "@meddleware/wallet-adapter": "^0.0.5",
-    "@meddleware/walrus-client": "^0.0.9",
+    "@meddleware/walrus-client": "^0.0.10",
     "@meddleware/walrus-relay": "^0.1.10",
     "@mysten/sui": "^2.30.0",
     "@mysten/wallet-standard": "^0.20.0",

package/src/certify-resume.ts

@@ -0,0 +1,66 @@
+// Persistence for "uploaded but not yet certified" blobs, so certification can be completed later —
+// after a tab switch OR a full page reload — from the My Blobs page, without re-uploading.
+//
+// A Walrus upload is register → upload → certify. Register + upload are paid and, with the tip relay,
+// cannot be replayed (the register tx ages out — see upload-flow.ts). If certify doesn't happen (the
+// user dismisses the prompt), the blob is registered + stored + paid but uncertified. The storage-node
+// availability certificate returned by the upload step is all that's needed to certify, and it is not
+// a secret, so we persist it keyed by (network, address). `@meddleware/walrus-client`'s
+// `certifyBlobTransaction` accepts that base64 certificate directly — certify is a plain owner tx.
+
+import type { StorageLike } from './access-resume.js'
+
+/** A stored pending certification, keyed in the map by `blobObjectId`. */
+export interface PendingCertify {
+  /** The Walrus blob id (for display / matching). */
+  blobId: string
+  /** The on-chain Blob object id — the map key and the object being certified. */
+  blobObjectId: string
+  /** Base64 availability certificate from the upload step (accepted directly by the SDK). */
+  certificate: string
+  /** How the blob was registered (our uploads are non-deletable). */
+  deletable: boolean
+  /** Epoch ms the entry was saved, for display / housekeeping. */
+  savedAt: number
+}
+
+/** Stable per-(network, address) key under which pending certifications are stored. */
+export function pendingCertifyKey(network: string, address: string): string {
+  return `mw:walrus:pendingCertify:${network}:${address}`
+}
+
+/** Read the pending-certify map (keyed by blobObjectId); empty object if none/corrupt. */
+export function loadPendingCertifies(
+  storage: StorageLike,
+  key: string,
+): Record<string, PendingCertify> {
+  const raw = storage.getItem(key)
+  if (!raw) return {}
+  try {
+    const v = JSON.parse(raw) as Record<string, PendingCertify>
+    return v && typeof v === 'object' ? v : {}
+  } catch {
+    return {}
+  }
+}
+
+/** Persist one pending certification (merged into the map by blobObjectId). */
+export function savePendingCertify(
+  storage: StorageLike,
+  key: string,
+  entry: Omit<PendingCertify, 'savedAt'>,
+): void {
+  const map = loadPendingCertifies(storage, key)
+  map[entry.blobObjectId] = { ...entry, savedAt: Date.now() }
+  storage.setItem(key, JSON.stringify(map))
+}
+
+/** Remove a pending certification once the blob is certified (or found already certified). */
+export function clearPendingCertify(storage: StorageLike, key: string, blobObjectId: string): void {
+  const map = loadPendingCertifies(storage, key)
+  if (blobObjectId in map) {
+    delete map[blobObjectId]
+    if (Object.keys(map).length === 0) storage.removeItem(key)
+    else storage.setItem(key, JSON.stringify(map))
+  }
+}

package/src/components/MyBlobs.vue

@@ -6,6 +6,12 @@ import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 import type { Executor } from '../wallet.js'
 import { NETWORK, walruscanBlobUrl } from '../config.js'
 import { useOwnedBlobs } from '../composables/useOwnedBlobs.js'
+import {
+  pendingCertifyKey,
+  loadPendingCertifies,
+  clearPendingCertify,
+  type PendingCertify,
+} from '../certify-resume.js'
 
 const props = defineProps<{
   /** Connected wallet address whose owned blobs to list; `null` when no wallet is connected. */
@@ -19,6 +25,66 @@ const { blobs, currentEpoch, loading, error, load } = useOwnedBlobs()
 const extending = ref<string | null>(null)
 const extendStatus = ref<Record<string, string>>({})
 
+// Pending certifications: blobs uploaded + paid for but not yet certified (the certify prompt was
+// dismissed). Persisted by the upload flow, keyed by blobObjectId; resumable here without re-upload.
+const pending = ref<Record<string, PendingCertify>>({})
+const certifying = ref<string | null>(null)
+const certifyStatus = ref<Record<string, string>>({})
+
+/** The pending-certify entry for a blob, if it's uncertified and we hold its certificate. */
+function pendingFor(blob: OwnedBlob): PendingCertify | null {
+  return !blob.certified ? (pending.value[blob.objectId] ?? null) : null
+}
+
+/** Reload the pending map from storage, dropping entries whose blob is already certified. */
+function refreshPending(): void {
+  if (!props.address) {
+    pending.value = {}
+    return
+  }
+  const key = pendingCertifyKey(NETWORK, props.address)
+  const map = loadPendingCertifies(window.localStorage, key)
+  // Housekeeping: a blob certified elsewhere no longer needs a stored certificate.
+  for (const blob of blobs.value) {
+    if (blob.certified && blob.objectId in map) {
+      clearPendingCertify(window.localStorage, key, blob.objectId)
+      delete map[blob.objectId]
+    }
+  }
+  pending.value = map
+}
+
+async function certifyBlob(blob: OwnedBlob): Promise<void> {
+  const entry = pendingFor(blob)
+  if (!entry || !props.address) return
+  certifying.value = blob.objectId
+  certifyStatus.value = { ...certifyStatus.value, [blob.objectId]: 'Building transaction…' }
+  try {
+    const { createWalrusClient, certifyBlobTransaction } = await import('@meddleware/walrus-client')
+    const walrusClient = createWalrusClient({ network: NETWORK, wasmUrl: walrusWasmUrl })
+    const tx = certifyBlobTransaction(walrusClient, {
+      blobId: entry.blobId,
+      blobObjectId: entry.blobObjectId,
+      certificate: entry.certificate,
+      deletable: entry.deletable,
+    })
+    const executor = await props.buildExecutor()
+    certifyStatus.value = { ...certifyStatus.value, [blob.objectId]: 'Approve in wallet…' }
+    const { digest } = await executor.signAndExecute(tx)
+    await executor.waitForTransaction(digest)
+    clearPendingCertify(window.localStorage, pendingCertifyKey(NETWORK, props.address), blob.objectId)
+    certifyStatus.value = { ...certifyStatus.value, [blob.objectId]: `Certified ✓ (${digest.slice(0, 8)}…)` }
+    await refresh() // reflect certified = ✓
+  } catch (e) {
+    certifyStatus.value = {
+      ...certifyStatus.value,
+      [blob.objectId]: `Failed: ${e instanceof Error ? e.message : String(e)}`,
+    }
+  } finally {
+    certifying.value = null
+  }
+}
+
 const EXPIRY_WARN_EPOCHS = 10
 const EPOCHS_PER_DAY = 1 / 0.038 // ~1 Walrus epoch ≈ 38 minutes on testnet
 
@@ -62,6 +128,9 @@ async function extendBlob(blob: OwnedBlob): Promise<void> {
 // The composable no-ops when the list is already cached for this address, so re-mounting is cheap.
 onMounted(() => void load(props.address))
 watch(() => props.address, (addr) => void load(addr))
+// Re-derive pending certifications whenever the list refreshes or the account changes.
+watch(blobs, () => refreshPending())
+watch(() => props.address, () => refreshPending())
 </script>
 
 <template>
@@ -107,8 +176,30 @@ watch(() => props.address, (addr) => void load(addr))
             epoch {{ blob.endEpoch }}
             <span class="approx">(≈{{ epochsToApproxDays(blob.endEpoch - currentEpoch) }})</span>
           </td>
-          <td>{{ blob.certified ? '✓' : '—' }}</td>
           <td>
+            <span v-if="blob.certified">✓</span>
+            <span v-else-if="pendingFor(blob)" class="pending-badge" title="Uploaded but not certified">
+              pending
+            </span>
+            <span v-else>—</span>
+          </td>
+          <td class="actions">
+            <!-- Certify: the blob was uploaded + paid for but not certified; finish it (no re-upload). -->
+            <template v-if="pendingFor(blob)">
+              <span v-if="certifyStatus[blob.objectId]" class="ext-status">
+                {{ certifyStatus[blob.objectId] }}
+              </span>
+              <button
+                v-else
+                type="button"
+                class="certify-btn"
+                :disabled="certifying === blob.objectId"
+                @click="certifyBlob(blob)"
+              >
+                Certify
+              </button>
+            </template>
+
             <span v-if="extendStatus[blob.objectId]" class="ext-status">
               {{ extendStatus[blob.objectId] }}
             </span>
@@ -178,4 +269,19 @@ watch(() => props.address, (addr) => void load(addr))
   font-size: 0.85rem;
   color: var(--mw-color-text-muted, #888);
 }
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+}
+.certify-btn {
+  border-color: var(--accent, #6366f1);
+  color: var(--accent, #6366f1);
+}
+.pending-badge {
+  font-size: 0.78rem;
+  color: var(--accent, #6366f1);
+  font-weight: 600;
+}
 </style>

package/src/components/WalrusView.vue

@@ -25,6 +25,11 @@ import {
   isRedeemedConflict,
   resolveGatedAuthToken,
 } from '../access-resume.js'
+import {
+  pendingCertifyKey,
+  savePendingCertify,
+  clearPendingCertify,
+} from '../certify-resume.js'
 import { useOwnedBlobs } from '../composables/useOwnedBlobs.js'
 import MyBlobs from './MyBlobs.vue'
 
@@ -115,6 +120,12 @@ async function performUpload(
         suiClient: getSuiClient(),
         authToken,
         onStatus: opts.onStatus,
+        // Persist the certificate the moment the upload lands, and drop it once certified — so a
+        // dismissed certify can be finished from My Blobs after a tab switch or reload.
+        onUploaded: (info) =>
+          savePendingCertify(storage, pendingCertifyKey(NETWORK, address), info),
+        onCertified: (blobObjectId) =>
+          clearPendingCertify(storage, pendingCertifyKey(NETWORK, address), blobObjectId),
       })
       // Success → clear the consume layer (the use is now genuinely spent for an upload).
       if (consumeKey) storage.removeItem(consumeKey)

package/src/upload-flow.ts

@@ -38,7 +38,13 @@ export interface BlobUploadFlow {
   encode(): Promise<void>
   register(opts: { owner: string; epochs: number; deletable: boolean }): BuiltTx
   // `digest` = the register transaction digest produced by the register tx executed this attempt.
-  upload(opts: { digest: string; deletable?: boolean }): Promise<void>
+  // Returns the SDK "uploaded" step, including the on-chain `blobObjectId` and the base64
+  // availability `certificate` needed to certify later (persisted so certify can resume).
+  upload(opts: { digest: string; deletable?: boolean }): Promise<{
+    blobId: string
+    blobObjectId: string
+    certificate: string
+  }>
   certify(): BuiltTx
   getBlob(): Promise<{ blobId: string }>
 }
@@ -67,6 +73,14 @@ export interface RunBlobUploadDeps {
   onStatus: (p: UploadProgress) => void
   /** Lazy loader for the Walrus client module (keeps wasm out of the eager bundle). */
   loadWalrusClient?: () => Promise<WalrusClientModule>
+  /**
+   * Called once the upload has landed (blob registered + stored + paid) but BEFORE certify, with the
+   * data needed to certify later without re-uploading. Persist it so a dismissed certify can be
+   * resumed from My Blobs after a tab switch or reload. Cleared via {@link RunBlobUploadDeps.onCertified}.
+   */
+  onUploaded?: (info: { blobId: string; blobObjectId: string; certificate: string; deletable: boolean }) => void
+  /** Called with the `blobObjectId` once certify succeeds, so the caller can drop the persisted entry. */
+  onCertified?: (blobObjectId: string) => void
 }
 
 /**
@@ -103,7 +117,16 @@ export async function runBlobUpload(deps: RunBlobUploadDeps): Promise<UploadResu
   await deps.executor.waitForTransaction(reg.digest)
 
   deps.onStatus({ step: 'upload', detail: 'Uploading to the relay…' })
-  await flow.upload({ digest: reg.digest, deletable: false })
+  const uploaded = await flow.upload({ digest: reg.digest, deletable: false })
+
+  // Upload landed (registered + stored + paid). Persist the certificate NOW so certify can be
+  // completed later from My Blobs (after a tab switch / reload) if the user dismisses the prompt.
+  deps.onUploaded?.({
+    blobId: uploaded.blobId,
+    blobObjectId: uploaded.blobObjectId,
+    certificate: uploaded.certificate,
+    deletable: false,
+  })
 
   // Certify is a plain owner tx built from the storage-node certificate the live `flow` now holds
   // (no relay, no tip). If it fails (e.g. the user rejects the prompt) the blob is already registered
@@ -117,6 +140,7 @@ export async function runBlobUpload(deps: RunBlobUploadDeps): Promise<UploadResu
     const cert = await deps.executor.signAndExecute(certTx)
     await deps.executor.waitForTransaction(cert.digest)
     const blob = await flow.getBlob()
+    deps.onCertified?.(uploaded.blobObjectId) // certified → drop the persisted pending entry
     return { blobId: blob.blobId, url: walrusBlobUrl(deps.network, blob.blobId), digest: cert.digest }
   }