@meddleware/walrus-ui 0.1.8 → 0.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.8",
-  "description": "Standalone Vue 3 SPA for uploading blobs to Walrus decentralised storage and managing owned blobs — wallet-connected, NFT-gated relay support.",
+  "version": "0.1.9",
+  "description": "Standalone Vue 3 SPA for uploading blobs to Walrus decentralised storage and managing owned blobs \u2014 wallet-connected, NFT-gated relay support.",
   "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
   "repository": {
@@ -45,7 +45,7 @@
     "@meddleware/ui": "^0.1.7",
     "@meddleware/wallet-adapter": "^0.0.5",
     "@meddleware/walrus-client": "^0.0.5",
-    "@meddleware/walrus-relay": "^0.1.3",
+    "@meddleware/walrus-relay": "^0.1.4",
     "@mysten/sui": "^2.28.0",
     "@mysten/wallet-standard": "^0.20.0",
     "@mysten/walrus": "~1.1.7",

package/src/components/MyBlobs.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import type { OwnedBlob } from '@meddleware/walrus-client'
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
-import { getSuiClient } from '../wallet.js'
 import type { Executor } from '../wallet.js'
 import { NETWORK } from '../config.js'
+import { useOwnedBlobs } from '../composables/useOwnedBlobs.js'
 
 const props = defineProps<{
   /** Connected wallet address whose owned blobs to list; `null` when no wallet is connected. */
@@ -13,10 +13,8 @@ const props = defineProps<{
   buildExecutor: () => Promise<Executor>
 }>()
 
-const blobs = ref<OwnedBlob[]>([])
-const loading = ref(false)
-const error = ref<string | null>(null)
-const currentEpoch = ref(0)
+// Shared, session-persistent cache (survives tab switches and inline re-mounts).
+const { blobs, currentEpoch, loading, error, load } = useOwnedBlobs()
 const extending = ref<string | null>(null)
 const extendStatus = ref<Record<string, string>>({})
 
@@ -30,26 +28,9 @@ function epochsToApproxDays(epochs: number): string {
   return `${days} days`
 }
 
-async function loadBlobs(): Promise<void> {
-  if (!props.address) return
-  loading.value = true
-  error.value = null
-  blobs.value = []
-  try {
-    const { createWalrusClient, fetchOwnedWalrusBlobs } = await import('@meddleware/walrus-client')
-    const suiClient = getSuiClient()
-    const walrusClient = createWalrusClient({ network: NETWORK, wasmUrl: walrusWasmUrl })
-    const [sys, fetched] = await Promise.all([
-      suiClient.getCurrentSystemState(),
-      fetchOwnedWalrusBlobs(suiClient, walrusClient, props.address),
-    ])
-    currentEpoch.value = Number(sys.systemState.epoch)
-    blobs.value = fetched.sort((a: OwnedBlob, b: OwnedBlob) => a.endEpoch - b.endEpoch)
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : String(e)
-  } finally {
-    loading.value = false
-  }
+/** Force a fresh fetch (Refresh button + after an on-chain-affecting action). */
+function refresh(): Promise<void> {
+  return load(props.address, { force: true })
 }
 
 async function extendBlob(blob: OwnedBlob): Promise<void> {
@@ -65,7 +46,7 @@ async function extendBlob(blob: OwnedBlob): Promise<void> {
     await executor.waitForTransaction(digest)
     extendStatus.value = { ...extendStatus.value, [blob.objectId]: `Extended ✓ (${digest.slice(0, 8)}…)` }
     // Refresh the list so the new endEpoch is visible.
-    await loadBlobs()
+    await refresh()
   } catch (e) {
     extendStatus.value = {
       ...extendStatus.value,
@@ -76,14 +57,17 @@ async function extendBlob(blob: OwnedBlob): Promise<void> {
   }
 }
 
-watch(() => props.address, loadBlobs)
+// Load on first open (fixes "nothing shows until Refresh") and whenever the address changes.
+// 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))
 </script>
 
 <template>
   <section class="my-blobs">
     <div class="toolbar">
       <h2>My Blobs</h2>
-      <button type="button" :disabled="!address || loading" @click="loadBlobs">
+      <button type="button" :disabled="!address || loading" @click="refresh">
         {{ loading ? 'Loading…' : 'Refresh' }}
       </button>
     </div>

package/src/components/WalrusView.vue

@@ -17,6 +17,7 @@ import { WalletGuard } from '@meddleware/wallet-adapter'
 import { useWallet, getSuiClient } from '../wallet.js'
 import { NETWORK, relayHosts, accessGate, uploadRelayMaxTipMist } from '../config.js'
 import { runBlobUpload } from '../upload-flow.js'
+import { useOwnedBlobs } from '../composables/useOwnedBlobs.js'
 import MyBlobs from './MyBlobs.vue'
 
 type Tab = 'upload' | 'blobs'
@@ -83,9 +84,17 @@ async function performUpload(
   })
 }
 
+const ownedBlobs = useOwnedBlobs()
+
 function onUploaded(r: UploadResult): void {
   result.value = r
 }
+
+// Fires after every upload attempt (success or failure) — a failed UI run may still have landed
+// on-chain, so force-refresh the owned-blobs cache in the background regardless of outcome.
+function onSettled(): void {
+  if (account.value) void ownedBlobs.load(account.value.address, { force: true })
+}
 </script>
 
 <template>
@@ -127,6 +136,7 @@ function onUploaded(r: UploadResult): void {
         :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
         :perform-upload="performUpload"
         @uploaded="onUploaded"
+        @settled="onSettled"
       />
 
       <section v-if="result" class="result">

package/src/composables/useOwnedBlobs.ts

@@ -0,0 +1,54 @@
+// Module-singleton cache of the connected wallet's owned Walrus blobs.
+//
+// State lives at module scope (not inside the composable factory) so it is shared across every
+// `MyBlobs` mount in the session: switching the Upload/My-Blobs tabs — or navigating the whole
+// tool view in and out inline in the dashboard — no longer loses the list or forces a refetch.
+// `load()` is a no-op when the list is already loaded for the given address, unless `force` is set
+// (used after an upload/extend, which can create or mutate on-chain blobs).
+import { ref } from 'vue'
+import type { OwnedBlob } from '@meddleware/walrus-client'
+// Lightweight URL import — just the wasm asset URL (does not pull the walrus client eagerly).
+import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
+import { getSuiClient } from '../wallet.js'
+import { NETWORK } from '../config.js'
+
+const blobs = ref<OwnedBlob[]>([])
+const currentEpoch = ref(0)
+const loading = ref(false)
+const error = ref<string | null>(null)
+/** Address the current `blobs` were fetched for; `null` until a successful load. */
+const loadedFor = ref<string | null>(null)
+
+async function load(address: string | null, opts: { force?: boolean } = {}): Promise<void> {
+  if (!address) {
+    blobs.value = []
+    loadedFor.value = null
+    return
+  }
+  // Skip refetch when we already have this address's list and the last load succeeded.
+  if (!opts.force && loadedFor.value === address && error.value === null) return
+
+  loading.value = true
+  error.value = null
+  try {
+    const { createWalrusClient, fetchOwnedWalrusBlobs } = await import('@meddleware/walrus-client')
+    const suiClient = getSuiClient()
+    const walrusClient = createWalrusClient({ network: NETWORK, wasmUrl: walrusWasmUrl })
+    const [sys, fetched] = await Promise.all([
+      suiClient.getCurrentSystemState(),
+      fetchOwnedWalrusBlobs(suiClient, walrusClient, address),
+    ])
+    currentEpoch.value = Number(sys.systemState.epoch)
+    blobs.value = fetched.sort((a: OwnedBlob, b: OwnedBlob) => a.endEpoch - b.endEpoch)
+    loadedFor.value = address
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** Reactive access to the shared owned-blobs cache and its loader. */
+export function useOwnedBlobs() {
+  return { blobs, currentEpoch, loading, error, loadedFor, load }
+}