@meddleware/walrus-storage-ui 0.1.65 → 0.1.67

package/src/components/WalrusStorageView.vue

@@ -4,37 +4,16 @@
 // from the shared @meddleware/wallet-adapter singleton (via ./wallet.js), so connecting here or
 // in any other inline tool view reflects everywhere.
 import { computed, ref, watch } from 'vue'
-import { normalizeSuiAddress } from '@mysten/sui/utils'
-import {
-  WalrusUpload,
-  AccessGateCta,
-  useAccessGate,
-  type WalrusNetwork,
-} from '@meddleware/walrus-storage-kit'
-import { AppTabNav, CopyableAddress, ExplorerLink, UiNotice, UiTabPanel, UiToolIntro, suiExplorerUrl, safeHref, type AppTab } 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 { AppTabNav, UiButton, UiLiveStatus, UiNotice, UiTabPanel, UiToolIntro, type AppTab } from '@meddleware/ui'
 import { WalletGuard } from '@meddleware/wallet-adapter'
-import { useWallet, getSuiClient } from '../wallet.js'
-import { network, walrusNetwork, relayHosts, accessGate, uploadRelayMaxTipMist, walruscanBlobUrl } from '../config.js'
-import {
-  runBlobUpload,
-  createGatedAccess,
-  consumeStorageKey,
-  pendingCertifyKey,
-  savePendingCertify,
-  clearPendingCertify,
-  loadPendingCertifies,
-  type BlobUploadResult as UploadResult,
-  type ExistingCopy,
-  type UploadProgress,
-  browserStorage,
-} from '@meddleware/walrus-storage-client/flow'
-
-// Browser storage that never throws (blocked site data falls back to memory for this page).
-const storage = browserStorage()
+import { AccessGateCta, WalrusUpload, useAccessGate, type WalrusNetwork } from '@meddleware/walrus-storage-kit'
+import type { ExistingCopy } from '@meddleware/walrus-storage-client/flow'
+import { buildExecutor, getSuiClient, useWallet } from '../wallet.js'
+import { accessGate, network, relayHosts, walrusNetwork } from '../config.js'
 import { useOwnedBlobs } from '../composables/useOwnedBlobs.js'
+import { useStorageUpload, type UploadResult } from '../composables/useStorageUpload.js'
 import MyBlobs from './MyBlobs.vue'
+import UploadResultCard from './UploadResultCard.vue'
 
 const TABS: AppTab[] = [
   { id: 'upload', label: 'Upload' },
@@ -42,29 +21,33 @@ const TABS: AppTab[] = [
 ]
 const activeTab = ref<string>('upload')
 
-const { account, signPersonalMessage, buildExecutor } = useWallet()
+const { account } = useWallet()
 
-// One access-gate state per Walrus network (the gate is a per-network setting); the active
-// network's is used. Each is inert until an ownership check runs.
-// `useAccessGate` throws for a gate that is not the published deployment on its network;
-// `accessGate()` only returns such configs (or null, ungated). The shared client serves the active
-// network only, so a state for another network refuses to read rather than reading the wrong chain.
-function gateClient(net: WalrusNetwork) {
-  if (net !== network.value) throw new Error(`No Sui client for ${net} while ${network.value} is active.`)
-  return getSuiClient()
-}
-const gateStates = {
-  testnet: useAccessGate({ network: 'testnet', gate: accessGate('testnet'), getClient: gateClient }),
-  mainnet: useAccessGate({ network: 'mainnet', gate: accessGate('mainnet'), getClient: gateClient }),
+// One access-gate state per Walrus network (the gate is a per-network setting), created when its network is first the active one and
+// inert until an ownership check runs. `useAccessGate` throws for a gate that is not the published deployment on its network;
+// `accessGate()` only returns such configs (or null, ungated). The shared client serves the active network only, so a state for
+// another network refuses to read rather than reading the wrong chain.
+const gateStates: Partial<Record<WalrusNetwork, ReturnType<typeof useAccessGate>>> = {}
+function gateFor(net: WalrusNetwork) {
+  return (gateStates[net] ??= useAccessGate({
+    network: net,
+    gate: accessGate(net),
+    getClient: () => {
+      if (net !== network.value) throw new Error(`No Sui client for ${net} while ${network.value} is active.`)
+      return getSuiClient()
+    },
+  }))
 }
 /** The active network's gate state (testnet's while the view is hidden on a non-Walrus network). */
-const gateState = computed(() => gateStates[walrusNetwork.value ?? 'testnet'])
+const gateState = computed(() => gateFor(walrusNetwork.value ?? 'testnet'))
 const purchasing = ref(false)
 const result = ref<UploadResult | null>(null)
+/** A gate is configured and the ownership check has not decided yet. */
+const checkingAccess = computed(() => gateState.value.gateConfigured && gateState.value.hasAccess.value === null)
+const needsPass = computed(() => gateState.value.gateConfigured && gateState.value.hasAccess.value === false)
 
-// Check gate ownership whenever the connected account or the network changes. A switched or
-// disconnected wallet never inherits the previous wallet's access state: `reset()` also discards
-// any in-flight check.
+// Check gate ownership whenever the connected account or the network changes. A switched or disconnected wallet never inherits the
+// previous wallet's access state: `reset()` also discards any in-flight check.
 watch(
   [() => account.value?.address ?? null, walrusNetwork],
   ([addr], previous) => {
@@ -81,8 +64,7 @@ async function onPurchase(): Promise<void> {
   if (!account.value) return
   purchasing.value = true
   try {
-    const executor = await buildExecutor()
-    await gateState.value.purchase(executor, account.value.address)
+    await gateState.value.purchase(await buildExecutor(), account.value.address)
   } catch {
     // The reason is published in `purchaseError` and shown by the prompt.
   } finally {
@@ -90,117 +72,8 @@ async function onPurchase(): Promise<void> {
   }
 }
 
-// Wire the shared WalrusUpload widget to walrus-storage-client's upload orchestrator and the wallet. The
-// orchestrator registers fresh on every attempt (the relay rejects an old register transaction),
-// and, for a gated relay, `createGatedAccess` keeps the single-use consume resumable: its digest is
-// persisted before the upload, reused after an interruption, cleared once the upload lands, and
-// replaced only after the gateway reports it redeemed.
-async function performUpload(
-  bytes: Uint8Array,
-  opts: {
-    relayHost: string
-    epochs: number
-    force?: boolean
-    deletable?: boolean
-    onStatus: (s: string | UploadProgress) => void
-  },
-): Promise<UploadResult> {
-  if (!account.value) throw new Error('Connect your wallet first.')
-  const net = walrusNetwork.value
-  if (!net) throw new Error(`Walrus storage is not available on ${network.value}.`)
-  const executor = await buildExecutor()
-  const address = account.value.address
-  const state = gateState.value
-  const gate = state.gate
-  const nftId = state.nftId.value
-
-  const access =
-    gate && state.hasAccess.value === true && nftId
-      ? createGatedAccess({
-          storage,
-          key: consumeStorageKey(net, gate.gateId, address),
-          relayHost: opts.relayHost,
-          address,
-          // Signed into every access proof with the relay's origin: a proof made here works nowhere else.
-          gateId: normalizeSuiAddress(gate.gateId),
-          network: net,
-          nftId,
-          singleUse: state.singleUse.value,
-          buildConsume: (id, nonce) => state.buildConsume(id, nonce),
-          signAndExecute: (tx) => executor.signAndExecute(tx),
-          waitForTransaction: (digest) => executor.waitForTransaction(digest),
-          sign: signPersonalMessage,
-          onStatus: opts.onStatus,
-        })
-      : undefined
-
-  return runBlobUpload({
-    bytes,
-    network: net,
-    relayHost: opts.relayHost,
-    address,
-    wasmUrl: walrusWasmUrl,
-    maxTipMist: uploadRelayMaxTipMist(),
-    epochs: opts.epochs,
-    deletable: opts.deletable,
-    force: opts.force,
-    findExistingCopy,
-    executor,
-    suiClient: getSuiClient(),
-    access,
-    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(net, address), info),
-    onCertified: (blobObjectId) => clearPendingCertify(storage, pendingCertifyKey(net, address), blobObjectId),
-  })
-}
-
-// Precheck (before paying to register): does the wallet already own this exact blob? Returns a
-// `certified` match (offer Extend) or a `pending` one — uncertified but with a saved certificate
-// (offer Certify). Best-effort: any failure returns null so the upload simply proceeds.
-async function findExistingCopy(blobId: string): Promise<ExistingCopy | null> {
-  const address = account.value?.address
-  const net = walrusNetwork.value
-  if (!address || !net) return null
-  try {
-    const { createWalrusClient, fetchOwnedWalrusBlobs } = await import('@meddleware/walrus-storage-client')
-    const walrusClient = createWalrusClient({ network: net, wasmUrl: walrusWasmUrl })
-    const [sys, owned] = await Promise.all([
-      walrusClient.walrus.systemState(),
-      fetchOwnedWalrusBlobs(getSuiClient(), walrusClient, address),
-    ])
-    const currentEpoch = Number(sys.committee.epoch)
-    const copies = owned.filter((b) => b.blobId === blobId && b.endEpoch > currentEpoch)
-    const certified = copies.find((b) => b.certified)
-    if (certified) {
-      return { kind: 'certified', blobId, objectId: certified.objectId, endEpoch: certified.endEpoch }
-    }
-    const store = loadPendingCertifies(storage, pendingCertifyKey(net, address))
-    const pending = copies.find((b) => !b.certified && b.objectId in store)
-    if (pending) {
-      return { kind: 'pending', blobId, objectId: pending.objectId, endEpoch: pending.endEpoch }
-    }
-    return null
-  } catch {
-    return null
-  }
-}
-
-// Injected into the upload widget so it can price a chosen reservation duration (storage is WAL,
-// billed per size × epochs). Returns total cost in FROST, or null on error.
-async function estimateUploadStorageCost(sizeBytes: number, epochs: number): Promise<bigint | null> {
-  const net = walrusNetwork.value
-  if (!net) return null
-  try {
-    const { createWalrusClient, estimateStorageCost } = await import('@meddleware/walrus-storage-client')
-    const walrusClient = createWalrusClient({ network: net, wasmUrl: walrusWasmUrl })
-    const cost = await estimateStorageCost(walrusClient, sizeBytes, epochs)
-    return cost.totalCost
-  } catch {
-    return null
-  }
-}
+const { performUpload, estimateStorageCost } = useStorageUpload(() => gateState.value)
+const ownedBlobs = useOwnedBlobs()
 
 // The user declined a duplicate upload and chose to manage the existing copy: jump to My Blobs and
 // highlight it (the grouped row exposes Extend for certified, Certify for pending).
@@ -210,167 +83,78 @@ function onManageExisting(existing: ExistingCopy): void {
   activeTab.value = 'blobs'
 }
 
-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 and NFT ownership (uses remaining) in the
-// background regardless of outcome.
+// Fires after every upload attempt (success or failure): a failed run may still have landed on-chain, so force-refresh the
+// owned-blobs cache and NFT ownership (uses remaining) in the background regardless of outcome.
 function onSettled(): void {
-  if (account.value) {
-    void ownedBlobs.load(account.value.address, { force: true })
-    if (gateState.value.gate) void gateState.value.checkOwnership(account.value.address)
-  }
+  if (!account.value) return
+  void ownedBlobs.load(account.value.address, { force: true })
+  if (gateState.value.gate) void gateState.value.checkOwnership(account.value.address)
 }
 </script>
 
 <template>
+  <section aria-labelledby="walrus-title">
+    <h2 id="walrus-title">Walrus storage</h2>
     <UiToolIntro>Upload and manage blobs on Walrus decentralised storage ({{ network }}).</UiToolIntro>
 
-    <UiNotice v-if="!walrusNetwork" type="info">Walrus storage is not available on {{ network }}. Switch to testnet or mainnet.</UiNotice>
+    <UiNotice v-if="!walrusNetwork" type="info" :message="`Walrus storage is not available on ${network}. Switch to testnet or mainnet.`" />
     <template v-else>
-
-    <AppTabNav v-model="activeTab" :tabs="TABS" id-prefix="walrus" aria-label="Feature tabs" class="walrus-tabs" />
-
-    <!-- The tab list and its panel always render (the selected tab controls a live panel); the wallet
-         prompt replaces only the panel's content until a wallet is connected. -->
-    <UiTabPanel id-prefix="walrus" :tab="activeTab">
-      <WalletGuard message="Connect a Sui wallet to upload and manage your blobs.">
-        <template v-if="activeTab === 'upload'">
-          <!-- 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"
-              :terms="gateState.terms.value"
-              :terms-error="gateState.termsError.value"
-              :purchase-error="gateState.purchaseError.value"
-              @purchase="onPurchase"
-            />
-            <button
-              v-if="gateState.termsError.value && !gateState.termsLoading.value"
-              type="button"
-              class="retry-terms"
-              @click="gateState.loadTerms()"
-            >
-              Read the price again
-            </button>
-          </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>
-            <!-- Gated relays spend a credit before the file is stored — make the "attempt, not a
-                 guarantee" nature explicit, while reassuring that attempts resume. -->
-            <UiNotice v-if="gateState.gateConfigured" type="info" class="credit-notice">
-              Uploading spends <strong>one credit</strong> from your access NFT (an on-chain step)
-              before the file is stored — it pays for an upload <em>attempt</em>, not a guaranteed
-              upload. Your attempt resumes automatically, even after a page reload if you re-select
-              the same file, so a credit is normally not lost. A credit is spent without a completed
-              upload only if you abandon the upload entirely, cancel a required wallet approval, or
-              wait long enough that the reserved storage lapses.
-            </UiNotice>
-
-            <WalrusUpload
-              :hosts="relayHosts(walrusNetwork)"
-              :connected="!!account"
-              :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess, singleUse: gateState.singleUse }"
-              :session-key="`${walrusNetwork}:${account?.address ?? ''}`"
-              :perform-upload="performUpload"
-              :estimate-storage-cost="estimateUploadStorageCost"
-              @uploaded="onUploaded"
-              @settled="onSettled"
-              @manage-existing="onManageExisting"
-            />
-
-            <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(walrusNetwork, result.blobId)"
-                    :value="result.blobId"
-                    :chars="[8, 6]"
-                  />
-                </CopyableAddress>
-              </p>
-              <p>
-                <strong>URL:</strong>
-                <a :href="safeHref(result.url)" target="_blank" rel="noopener noreferrer">{{ 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, walrusNetwork)"
-                    :value="result.digest"
-                    :chars="[8, 6]"
-                  />
-                </CopyableAddress>
-              </p>
-            </section>
+      <AppTabNav v-model="activeTab" :tabs="TABS" id-prefix="walrus" aria-label="Feature tabs" />
+
+      <!-- The tab list and its panel always render (the selected tab controls a live panel); the wallet
+           prompt replaces only the panel's content until a wallet is connected. -->
+      <UiTabPanel id-prefix="walrus" :tab="activeTab">
+        <WalletGuard message="Connect a Sui wallet to upload and manage your blobs.">
+          <template v-if="activeTab === 'upload'">
+            <UiLiveStatus label="Access pass" :message="checkingAccess ? 'Checking access…' : ''" />
+
+            <!-- Gated + no access: replace the form with the purchase prompt, so the person is guided to buy first rather than
+                 facing a disabled form. -->
+            <template v-if="needsPass">
+              <AccessGateCta
+                :gate-configured="gateState.gateConfigured"
+                :has-access="gateState.hasAccess.value"
+                :busy="purchasing"
+                :terms="gateState.terms.value"
+                :terms-error="gateState.termsError.value"
+                :purchase-error="gateState.purchaseError.value"
+                @purchase="onPurchase"
+              />
+              <UiButton v-if="gateState.termsError.value && !gateState.termsLoading.value" variant="secondary" @click="gateState.loadTerms()">
+                Read the price again
+              </UiButton>
+            </template>
+
+            <!-- Access held (or ungated relay): the upload form. -->
+            <template v-else-if="!checkingAccess">
+              <!-- Gated relays spend a credit before the file is stored: say that it pays for an attempt, not a guarantee, and
+                   that attempts resume. -->
+              <UiNotice v-if="gateState.gateConfigured" type="info">
+                Uploading spends <strong>one credit</strong> from your access NFT (an on-chain step) before the file is stored — it pays
+                for an upload <em>attempt</em>, not a guaranteed upload. Your attempt resumes automatically, even after a page reload if
+                you re-select the same file, so a credit is normally not lost. A credit is spent without a completed upload only if you
+                abandon the upload entirely, cancel a required wallet approval, or wait long enough that the reserved storage lapses.
+              </UiNotice>
+
+              <WalrusUpload
+                :hosts="relayHosts(walrusNetwork)"
+                :connected="!!account"
+                :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess, singleUse: gateState.singleUse }"
+                :session-key="`${walrusNetwork}:${account?.address ?? ''}`"
+                :perform-upload="performUpload"
+                :estimate-storage-cost="estimateStorageCost"
+                @uploaded="result = $event"
+                @settled="onSettled"
+                @manage-existing="onManageExisting"
+              />
+
+              <UploadResultCard v-if="result" :result="result" :network="walrusNetwork" />
+            </template>
           </template>
-        </template>
 
-        <MyBlobs
-          v-if="activeTab === 'blobs'"
-          :address="account?.address ?? null"
-          :build-executor="() => buildExecutor()"
-          :highlight-blob-id="highlightBlobId"
-        />
-      </WalletGuard>
-    </UiTabPanel>
+          <MyBlobs v-else :address="account?.address ?? null" :build-executor="buildExecutor" :highlight-blob-id="highlightBlobId" />
+        </WalletGuard>
+      </UiTabPanel>
     </template>
+  </section>
 </template>
-
-<style scoped>
-.walrus-tabs {
-  margin: 1rem 0 0.5rem;
-}
-.result {
-  margin-top: 1.5rem;
-  padding: 1rem;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  word-break: break-all;
-}
-
-.result code {
-  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;
-}
-
-.credit-notice {
-  margin: 1rem 0;
-  font-size: 0.85rem;
-  line-height: 1.5;
-}
-
-</style>

package/src/composables/useExtendQuotes.ts

@@ -1,7 +1,7 @@
 // Prices an Extend before the wallet opens (audit F12). A row's quote is the WAL cost of adding
 // `epochs`; Extend opens the wallet only for an amount whose quote the user has been shown. A quote is
 // an estimate (labelled `≈`): the wallet and the chain still decide the amount actually paid.
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 export type ExtendQuote =
   | { epochs: number; state: 'ready'; costFrost: bigint }
@@ -12,8 +12,8 @@ export type EstimateExtendCost = (size: number, epochs: number) => Promise<bigin
 
 export function useExtendQuotes(estimate: EstimateExtendCost) {
   /** Latest quote per Blob object id (one per row). */
-  const quotes = ref<Record<string, ExtendQuote>>({})
-  const pricing = ref<Record<string, number>>({})
+  const quotes = shallowRef<Record<string, ExtendQuote>>({})
+  const pricing = shallowRef<Record<string, number>>({})
   /** Per-row request counter: an older answer never replaces a newer amount's quote. */
   const tokens: Record<string, number> = {}
 

package/src/composables/useOwnedBlobs.ts

@@ -6,14 +6,14 @@
 // `load()` is a no-op when the list is already loaded for the given address on the active network,
 // unless `force` is set
 // (used after an upload/extend, which can create or mutate on-chain blobs).
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 import type { OwnedBlob } from '@meddleware/walrus-storage-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 { errorMessage } from '@meddleware/web-utils'
 import { getSuiClient } from '../wallet.js'
 import { walrusNetwork } from '../config.js'
+import { walrusClient, walrusLib } from '../walrus.js'
 
-const blobs = ref<OwnedBlob[]>([])
+const blobs = shallowRef<OwnedBlob[]>([])
 const currentEpoch = ref(0)
 const loading = ref(false)
 const error = ref<string | null>(null)
@@ -58,15 +58,14 @@ async function load(address: string | null, opts: { force?: boolean } = {}): Pro
   loading.value = true
   error.value = null
   try {
-    const { createWalrusClient, fetchOwnedWalrusBlobs } = await import('@meddleware/walrus-storage-client')
+    const [{ fetchOwnedWalrusBlobs }, client] = await Promise.all([walrusLib(), walrusClient(net)])
     const suiClient = getSuiClient()
-    const walrusClient = createWalrusClient({ network: net, 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([
-      walrusClient.walrus.systemState(),
-      fetchOwnedWalrusBlobs(suiClient, walrusClient, address),
+      client.walrus.systemState(),
+      fetchOwnedWalrusBlobs(suiClient, client, address),
     ])
     // A newer load (or a switch) took over while this one was in flight: its answer is for another
     // account or network, so drop it without touching the list, the error or `loading`.
@@ -76,7 +75,7 @@ async function load(address: string | null, opts: { force?: boolean } = {}): Pro
     loadedFor.value = key
   } catch (e) {
     if (mine !== latest) return
-    error.value = e instanceof Error ? e.message : String(e)
+    error.value = errorMessage(e)
   } finally {
     if (mine === latest) {
       loading.value = false

package/src/composables/useStorageUpload.ts

@@ -0,0 +1,111 @@
+// The Upload tab's orchestration: wires the shared `WalrusUpload` widget to walrus-storage-client's upload flow and the wallet.
+// `runBlobUpload` registers fresh on every attempt (the relay rejects an old register transaction); for a gated relay `useGatedUpload`
+// keeps the single-use consume resumable (its digest is persisted before the upload, reused after an interruption, cleared once the
+// upload lands, and replaced only after the gateway reports it redeemed).
+import { useGatedUpload, type AccessGateState } from '@meddleware/walrus-storage-kit'
+import {
+  browserStorage,
+  clearPendingCertify,
+  loadPendingCertifies,
+  pendingCertifyKey,
+  runBlobUpload,
+  savePendingCertify,
+  type BlobUploadResult,
+  type ExistingCopy,
+  type UploadProgress,
+} from '@meddleware/walrus-storage-client/flow'
+import { network, relayHosts, uploadRelayMaxTipMist, walrusNetwork } from '../config.js'
+import { buildExecutor, getSuiClient, useWallet } from '../wallet.js'
+import { walrusClient, walrusLib, walrusWasmUrl } from '../walrus.js'
+
+export type UploadResult = BlobUploadResult
+
+export interface UploadOptions {
+  relayHost: string
+  epochs: number
+  force?: boolean
+  deletable?: boolean
+  onStatus: (s: string | UploadProgress) => void
+}
+
+/** `gate` is the active network's access-gate state (a getter: it changes with the network). */
+export function useStorageUpload(gate: () => AccessGateState) {
+  // Browser storage that never throws (blocked site data falls back to memory for this page).
+  const storage = browserStorage()
+  const { account, signPersonalMessage } = useWallet()
+  const { accessFor } = useGatedUpload(gate)
+
+  // Precheck (before paying to register): does the wallet already own this exact blob? Returns a `certified` match (offer Extend) or a
+  // `pending` one: uncertified but with a saved certificate (offer Certify). Best-effort: any failure returns null so the upload proceeds.
+  async function findExistingCopy(blobId: string): Promise<ExistingCopy | null> {
+    const address = account.value?.address
+    const net = walrusNetwork.value
+    if (!address || !net) return null
+    try {
+      const [{ fetchOwnedWalrusBlobs }, client] = await Promise.all([walrusLib(), walrusClient(net)])
+      const [sys, owned] = await Promise.all([client.walrus.systemState(), fetchOwnedWalrusBlobs(getSuiClient(), client, address)])
+      const currentEpoch = Number(sys.committee.epoch)
+      const copies = owned.filter((b) => b.blobId === blobId && b.endEpoch > currentEpoch)
+      const certified = copies.find((b) => b.certified)
+      if (certified) return { kind: 'certified', blobId, objectId: certified.objectId, endEpoch: certified.endEpoch }
+      const store = loadPendingCertifies(storage, pendingCertifyKey(net, address))
+      const pending = copies.find((b) => !b.certified && b.objectId in store)
+      return pending ? { kind: 'pending', blobId, objectId: pending.objectId, endEpoch: pending.endEpoch } : null
+    } catch {
+      return null
+    }
+  }
+
+  async function performUpload(bytes: Uint8Array, opts: UploadOptions): Promise<UploadResult> {
+    if (!account.value) throw new Error('Connect your wallet first.')
+    const net = walrusNetwork.value
+    if (!net) throw new Error(`Walrus storage is not available on ${network.value}.`)
+    const executor = await buildExecutor()
+    const address = account.value.address
+    const access = accessFor({
+      relayHost: opts.relayHost,
+      publicHost: relayHosts(net).public,
+      address,
+      network: net,
+      executor,
+      sign: signPersonalMessage,
+      onStatus: opts.onStatus,
+      storage,
+    })
+    return runBlobUpload({
+      bytes,
+      network: net,
+      relayHost: opts.relayHost,
+      address,
+      wasmUrl: walrusWasmUrl,
+      maxTipMist: uploadRelayMaxTipMist(),
+      epochs: opts.epochs,
+      deletable: opts.deletable,
+      force: opts.force,
+      findExistingCopy,
+      executor,
+      suiClient: getSuiClient(),
+      access,
+      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(net, address), info),
+      onCertified: (blobObjectId) => clearPendingCertify(storage, pendingCertifyKey(net, address), blobObjectId),
+    })
+  }
+
+  // Injected into the upload widget so it can price a chosen reservation duration (storage is WAL, billed per size × epochs).
+  // Returns the total cost in FROST, or null when it cannot be priced.
+  async function estimateStorageCost(sizeBytes: number, epochs: number): Promise<bigint | null> {
+    const net = walrusNetwork.value
+    if (!net) return null
+    try {
+      const [{ estimateStorageCost: estimate }, client] = await Promise.all([walrusLib(), walrusClient(net)])
+      return (await estimate(client, sizeBytes, epochs)).totalCost
+    } catch {
+      return null
+    }
+  }
+
+  return { performUpload, estimateStorageCost }
+}