@meddleware/walrus-ui 0.1.23 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "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",
@@ -45,7 +45,7 @@
     "@meddleware/ui": "^0.1.10",
     "@meddleware/wallet-adapter": "^0.0.5",
     "@meddleware/walrus-client": "^0.0.9",
-    "@meddleware/walrus-relay": "^0.1.8",
+    "@meddleware/walrus-relay": "^0.1.9",
     "@mysten/sui": "^2.30.0",
     "@mysten/wallet-standard": "^0.20.0",
     "@mysten/walrus": "~1.2.24",

package/src/components/WalrusView.vue

@@ -10,7 +10,7 @@ import {
   useAccessGate,
   MAX_SINGLE_RESERVATION_EPOCHS,
 } from '@meddleware/walrus-relay'
-import type { UploadResult } from '@meddleware/walrus-relay'
+import type { UploadResult, UploadProgress } from '@meddleware/walrus-relay'
 import { CopyableAddress, ExplorerLink, UiNotice, 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'
@@ -67,7 +67,7 @@ async function onPurchase(): Promise<void> {
 // upload-flow.ts). Reusing a prior registration is what produced "the received transaction is too old".
 async function performUpload(
   bytes: Uint8Array,
-  opts: { relayHost: string; onStatus: (s: string) => void },
+  opts: { relayHost: string; onStatus: (s: string | UploadProgress) => void },
 ): Promise<UploadResult> {
   if (!account.value) throw new Error('Connect your wallet first.')
   const executor = await buildExecutor()
@@ -77,6 +77,10 @@ async function performUpload(
   const gated = !!(gate && gateState.hasAccess.value === true && gateState.nftId.value)
   const consumeKey = gate ? consumeStorageKey(NETWORK, gate.gateId, address) : null
 
+  // Gated uploads spend one NFT use on-chain before the core flow — surface it as the leading
+  // "Access" step so the stepper reflects the extra wallet approval (a reused consume is instant).
+  if (gated) opts.onStatus({ step: 'access', detail: 'Confirming access…' })
+
   // Resolve this attempt's relay token (gated only); reuses a stored consume, fresh challenge each time.
   const token = (forceFresh: boolean): Promise<string | undefined> =>
     !gated

package/src/upload-flow.ts

@@ -11,7 +11,7 @@
 // can't be reused across attempts — reusing a prior/discovered registration (localStorage or on-chain
 // discovery) hands the relay an old tx with a non-matching nonce. Each attempt re-encodes (free) and
 // registers fresh so the tip+nonce the relay verifies is always recent.
-import type { UploadResult } from '@meddleware/walrus-relay'
+import type { UploadResult, UploadProgress } from '@meddleware/walrus-relay'
 
 /** Minimal transaction executor — the structural subset App.vue's wallet executor already provides. */
 export interface UploadExecutor {
@@ -62,7 +62,8 @@ export interface RunBlobUploadDeps {
    * upload presents a fresh challenge signature (see `@meddleware/walrus-client`).
    */
   authToken?: string | (() => string | undefined)
-  onStatus: (s: string) => void
+  /** Structured step progress; drives the stepped indicator in the WalrusUpload widget. */
+  onStatus: (p: UploadProgress) => void
   /** Lazy loader for the Walrus client module (keeps wasm out of the eager bundle). */
   loadWalrusClient?: () => Promise<WalrusClientModule>
 }
@@ -90,20 +91,20 @@ export async function runBlobUpload(deps: RunBlobUploadDeps): Promise<UploadResu
   })
   const flow = createBlobUploadFlow(client, deps.bytes)
 
-  deps.onStatus('Encoding…')
+  deps.onStatus({ step: 'encode', detail: 'Encoding…' })
   await flow.encode()
 
-  deps.onStatus('Registering blob (approve in wallet)…')
+  deps.onStatus({ step: 'register', detail: '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('Uploading to the relay…')
+  deps.onStatus({ step: 'upload', detail: 'Uploading to the relay…' })
   await flow.upload({ digest: reg.digest, deletable: false })
 
-  deps.onStatus('Certifying (approve in wallet)…')
+  deps.onStatus({ step: 'certify', detail: 'Certifying (approve in wallet)…' })
   const certTx = flow.certify()
   certTx.setSenderIfNotSet(deps.address)
   await certTx.build({ client: deps.suiClient })