@meddleware/walrus-ui 0.1.7 → 0.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.7",
-  "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": {
@@ -42,10 +42,10 @@
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/nft-gate-client": "^0.0.6",
-    "@meddleware/ui": "^0.1.6",
-    "@meddleware/wallet-adapter": "^0.0.4",
+    "@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(NETWORK)
-    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'
@@ -25,7 +26,7 @@ const activeTab = ref<Tab>('upload')
 const { account, signPersonalMessage, buildExecutor } = useWallet()
 
 const gate = accessGate(NETWORK)
-const gateState = useAccessGate({ gate, getClient: () => getSuiClient(NETWORK) })
+const gateState = useAccessGate({ gate, getClient: () => getSuiClient() })
 const purchasing = ref(false)
 const result = ref<UploadResult | null>(null)
 
@@ -41,7 +42,7 @@ async function onPurchase(): Promise<void> {
   if (!account.value) return
   purchasing.value = true
   try {
-    const executor = await buildExecutor(NETWORK)
+    const executor = await buildExecutor()
     await gateState.purchase(executor, account.value.address)
   } finally {
     purchasing.value = false
@@ -56,7 +57,7 @@ async function performUpload(
   opts: { relayHost: string; onStatus: (s: string) => void },
 ): Promise<UploadResult> {
   if (!account.value) throw new Error('Connect your wallet first.')
-  const executor = await buildExecutor(NETWORK)
+  const executor = await buildExecutor()
 
   // If the relay is NFT-gated and we hold access, attach a signed proof token.
   let authToken: string | undefined
@@ -77,15 +78,23 @@ async function performUpload(
     maxTipMist: uploadRelayMaxTipMist(),
     epochs: MAX_SINGLE_RESERVATION_EPOCHS,
     executor,
-    suiClient: getSuiClient(NETWORK),
+    suiClient: getSuiClient(),
     authToken,
     onStatus: opts.onStatus,
   })
 }
 
+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">
@@ -143,7 +153,7 @@ function onUploaded(r: UploadResult): void {
     <MyBlobs
       v-if="activeTab === 'blobs'"
       :address="account?.address ?? null"
-      :build-executor="() => buildExecutor(NETWORK)"
+      :build-executor="() => buildExecutor()"
     />
     </WalletGuard>
   </div>

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 }
+}

package/src/wallet.ts

@@ -1,28 +1,29 @@
 // Thin walrus-ui shim over the shared @meddleware/wallet-adapter singleton.
 //
-// The adapter is network-agnostic (RPC URL passed per call); this shim binds walrus-ui's
-// RPC_URLS so call sites keep the one-arg ergonomics (`getSuiClient(NETWORK)` /
-// `buildExecutor(NETWORK)`). Because the adapter is a module singleton, the wallet connection
-// is shared with any other tool view rendered in the same window (e.g. the dashboard).
+// RPC URL is resolved from the runtime useNetwork() singleton so network switching
+// in the dashboard propagates immediately to all tool views. Because the adapter is a
+// module singleton, the wallet connection is shared with any other tool view rendered
+// in the same window (e.g. the dashboard).
 import {
   useWallet as useWalletBase,
   getSuiClient as getSuiClientBase,
   buildExecutor as buildExecutorBase,
+  useNetwork,
 } from '@meddleware/wallet-adapter'
 import type { Executor } from '@meddleware/wallet-adapter'
-import type { WalrusNetwork } from '@meddleware/walrus-relay'
-import { RPC_URLS } from './config.js'
 
 export type { Executor }
 
-/** Memoised Sui JSON-RPC client for the network, using walrus-ui's configured RPC URL. */
-export function getSuiClient(network: WalrusNetwork) {
-  return getSuiClientBase(network, RPC_URLS[network])
+const { network, rpcUrl } = useNetwork()
+
+/** Memoised Sui gRPC client for the currently selected network. */
+export function getSuiClient() {
+  return getSuiClientBase(network.value, rpcUrl.value)
 }
 
-/** Build a transaction executor bound to the connected wallet + walrus-ui's RPC URL. */
-export function buildExecutor(network: WalrusNetwork): Promise<Executor> {
-  return buildExecutorBase(network, RPC_URLS[network])
+/** Build a transaction executor bound to the connected wallet and current network RPC URL. */
+export function buildExecutor(): Promise<Executor> {
+  return buildExecutorBase(network.value, rpcUrl.value)
 }
 
 /**