@meddleware/walrus-ui 0.1.0 → 0.1.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Standalone Vue 3 SPA for uploading blobs to Walrus decentralised storage and managing owned blobs — wallet-connected, NFT-gated relay support.",
-  "author": "MeddleWare <meddleware@proton.me>",
+  "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
   "repository": {
     "type": "git",
@@ -20,16 +20,20 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.0",
+    "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/nft-gate-client": "^0.0.3",
-    "@meddleware/walrus-client": "^0.0.2",
-    "@meddleware/walrus-relay": "^0.1.0",
+    "@meddleware/ui": "^0.1.6",
+    "@meddleware/walrus-client": "^0.0.3",
+    "@meddleware/walrus-relay": "^0.1.1",
     "@mysten/sui": "~2.17.0",
     "@mysten/wallet-standard": "~0.19.9",
     "@mysten/walrus": "~1.1.7",
@@ -37,10 +41,12 @@
     "vue": "^3.5.40"
   },
   "devDependencies": {
+    "@playwright/test": "~1.49.1",
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.8",
     "typescript": "~6.0.0",
     "vite": "^8.1.5",
+    "vitest": "~2.1.9",
     "vue-tsc": "~3.3.0"
   },
   "engines": {

package/src/App.vue

@@ -10,10 +10,15 @@ import {
 import type { UploadResult } from '@meddleware/walrus-relay'
 // 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 { AppHeader, AppFooter, ColorModeControl, useColorMode } from '@meddleware/ui'
 import { useWallet, getSuiClient } from './wallet.js'
-import { NETWORK, OPERATOR_RELAY_HOSTS, relayHosts, accessGate } from './config.js'
+import { NETWORK, OPERATOR_RELAY_HOSTS, relayHosts, accessGate, uploadRelayMaxTipMist } from './config.js'
+import { runBlobUpload } from './upload-flow.js'
 import MyBlobs from './components/MyBlobs.vue'
 
+const isEmbedded = new URLSearchParams(window.location.search).has('embedded')
+const { mode, set } = useColorMode('dark')
+
 type Tab = 'upload' | 'blobs'
 const activeTab = ref<Tab>('upload')
 
@@ -43,15 +48,15 @@ async function onPurchase(): Promise<void> {
   }
 }
 
-// Wire the shared WalrusUpload widget to @meddleware/walrus-client + the wallet.
+// Wire the shared WalrusUpload widget to the extracted upload orchestration + the wallet. The
+// register/upload/certify sequence lives in src/upload-flow.ts (unit-tested); this closure only
+// gathers the wallet-bound inputs (executor, sui client, gated proof token) and delegates.
 async function performUpload(
   bytes: Uint8Array,
   opts: { relayHost: string; onStatus: (s: string) => void },
 ): Promise<UploadResult> {
   if (!account.value) throw new Error('Connect your wallet first.')
-  const { createWalrusClient, createBlobUploadFlow, walrusBlobUrl } = await import('@meddleware/walrus-client')
   const executor = await buildExecutor(NETWORK)
-  const suiClient = getSuiClient(NETWORK)
 
   // If the relay is NFT-gated and we hold access, attach a signed proof token.
   let authToken: string | undefined
@@ -63,41 +68,19 @@ async function performUpload(
     })
   }
 
-  const client = createWalrusClient({
+  return runBlobUpload({
+    bytes,
     network: NETWORK,
+    relayHost: opts.relayHost,
+    address: account.value.address,
     wasmUrl: walrusWasmUrl,
-    uploadRelayHost: opts.relayHost,
-    uploadRelayAuthToken: authToken,
-    uploadRelayMaxTipMist: Number(import.meta.env.VITE_UPLOAD_RELAY_MAX_TIP_MIST) || 50_000_000,
-  })
-  const flow = createBlobUploadFlow(client, bytes)
-
-  opts.onStatus('Encoding…')
-  await flow.encode()
-
-  opts.onStatus('Registering blob (approve in wallet)…')
-  const regTx = flow.register({
-    owner: account.value.address,
+    maxTipMist: uploadRelayMaxTipMist(),
     epochs: MAX_SINGLE_RESERVATION_EPOCHS,
-    deletable: false,
+    executor,
+    suiClient: getSuiClient(NETWORK),
+    authToken,
+    onStatus: opts.onStatus,
   })
-  regTx.setSenderIfNotSet(account.value.address)
-  await regTx.build({ client: suiClient })
-  const reg = await executor.signAndExecute(regTx)
-  await executor.waitForTransaction(reg.digest)
-
-  opts.onStatus('Uploading to the relay…')
-  await flow.upload({ digest: reg.digest })
-
-  opts.onStatus('Certifying (approve in wallet)…')
-  const certTx = flow.certify()
-  certTx.setSenderIfNotSet(account.value.address)
-  await certTx.build({ client: suiClient })
-  const cert = await executor.signAndExecute(certTx)
-  await executor.waitForTransaction(cert.digest)
-
-  const blob = await flow.getBlob()
-  return { blobId: blob.blobId, url: walrusBlobUrl(NETWORK, blob.blobId), digest: cert.digest }
 }
 
 function onUploaded(r: UploadResult): void {
@@ -106,133 +89,149 @@ function onUploaded(r: UploadResult): void {
 </script>
 
 <template>
-  <div class="page">
-    <header class="head">
-      <div>
-        <h1>Walrus Assets</h1>
-        <p class="sub">Upload and manage blobs on Walrus decentralised storage ({{ NETWORK }}).</p>
-      </div>
-      <TipConfigBadge :host="OPERATOR_RELAY_HOSTS[NETWORK]" />
-    </header>
-
-    <nav class="tabs" aria-label="Feature tabs">
-      <button
-        type="button"
-        class="tab"
-        :class="{ active: activeTab === 'upload' }"
-        @click="activeTab = 'upload'"
-      >
-        Upload
-      </button>
-      <button
-        type="button"
-        class="tab"
-        :class="{ active: activeTab === 'blobs' }"
-        @click="activeTab = 'blobs'"
-      >
-        My Blobs
-      </button>
-    </nav>
-
-    <section class="wallet">
-      <template v-if="account">
-        <span class="addr">{{ account.address.slice(0, 8) }}…{{ account.address.slice(-4) }}</span>
-        <button type="button" @click="disconnect">Disconnect</button>
+  <div class="app" :class="{ 'app--embedded': isEmbedded }">
+    <AppHeader v-if="!isEmbedded" variant="dark">
+      <template #brand>
+        <span>Walrus Assets</span>
       </template>
-      <template v-else>
-        <button type="button" :disabled="!wallets.length" @click="onConnectFirst">
-          {{ wallets.length ? 'Connect wallet' : 'No wallet detected' }}
-        </button>
+      <template #actions>
+        <TipConfigBadge :host="OPERATOR_RELAY_HOSTS[NETWORK]" />
+        <ColorModeControl :model-value="mode" @update:model-value="set" />
       </template>
-    </section>
+    </AppHeader>
+
+    <div class="page">
+      <p class="sub">Upload and manage blobs on Walrus decentralised storage ({{ NETWORK }}).</p>
+
+      <nav class="tabs" aria-label="Feature tabs">
+        <button
+          type="button"
+          class="tab"
+          :class="{ active: activeTab === 'upload' }"
+          @click="activeTab = 'upload'"
+        >
+          Upload
+        </button>
+        <button
+          type="button"
+          class="tab"
+          :class="{ active: activeTab === 'blobs' }"
+          @click="activeTab = 'blobs'"
+        >
+          My Blobs
+        </button>
+      </nav>
+
+      <section class="wallet">
+        <template v-if="account">
+          <span class="addr">{{ account.address.slice(0, 8) }}…{{ account.address.slice(-4) }}</span>
+          <button type="button" @click="disconnect">Disconnect</button>
+        </template>
+        <template v-else>
+          <button type="button" :disabled="!wallets.length" @click="onConnectFirst">
+            {{ wallets.length ? 'Connect wallet' : 'No wallet detected' }}
+          </button>
+        </template>
+      </section>
 
-    <template v-if="activeTab === 'upload'">
-      <AccessGateCta
-        :gate-configured="gateState.gateConfigured"
-        :has-access="gateState.hasAccess.value"
-        :busy="purchasing"
-        :price-mist="gate?.priceMist ?? null"
-        @purchase="onPurchase"
-      />
+      <template v-if="activeTab === 'upload'">
+        <AccessGateCta
+          :gate-configured="gateState.gateConfigured"
+          :has-access="gateState.hasAccess.value"
+          :busy="purchasing"
+          :price-mist="gate?.priceMist ?? null"
+          @purchase="onPurchase"
+        />
+
+        <WalrusUpload
+          :hosts="relayHosts(NETWORK)"
+          :connected="!!account"
+          :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
+          :perform-upload="performUpload"
+          @uploaded="onUploaded"
+        />
+
+        <section v-if="result" class="result">
+          <h2>Uploaded ✓</h2>
+          <p><strong>Blob ID:</strong> <code>{{ result.blobId }}</code></p>
+          <p>
+            <strong>URL:</strong>
+            <a :href="result.url" target="_blank" rel="noopener">{{ result.url }}</a>
+          </p>
+          <p v-if="result.digest"><strong>Certify tx:</strong> <code>{{ result.digest }}</code></p>
+        </section>
+      </template>
 
-      <WalrusUpload
-        :hosts="relayHosts(NETWORK)"
-        :connected="!!account"
-        :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
-        :perform-upload="performUpload"
-        @uploaded="onUploaded"
+      <MyBlobs
+        v-if="activeTab === 'blobs'"
+        :address="account?.address ?? null"
+        :build-executor="() => buildExecutor(NETWORK)"
       />
+    </div>
 
-      <section v-if="result" class="result">
-        <h2>Uploaded ✓</h2>
-        <p><strong>Blob ID:</strong> <code>{{ result.blobId }}</code></p>
-        <p>
-          <strong>URL:</strong>
-          <a :href="result.url" target="_blank" rel="noopener">{{ result.url }}</a>
-        </p>
-        <p v-if="result.digest"><strong>Certify tx:</strong> <code>{{ result.digest }}</code></p>
-      </section>
-    </template>
-
-    <MyBlobs
-      v-if="activeTab === 'blobs'"
-      :address="account?.address ?? null"
-      :build-executor="() => buildExecutor(NETWORK)"
-    />
-
-    <footer class="foot">
-      <p>© MeddleWare · <a href="https://sui.meddleware.co.uk">more SUI tools</a></p>
-    </footer>
+    <AppFooter v-if="!isEmbedded" />
   </div>
 </template>
 
 <style scoped>
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app--embedded {
+  min-height: 100%;
+}
+
 .page {
   max-width: 640px;
   margin: 0 auto;
   padding: 2rem 1.25rem 4rem;
+  flex: 1;
 }
-.head {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-.head h1 {
-  margin: 0;
-  font-size: 1.8rem;
+
+.app--embedded .page {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
+
 .sub {
-  color: var(--mw-color-text-muted, #666);
+  color: var(--muted);
   margin: 0.25rem 0 0;
 }
+
 .wallet {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin: 1.25rem 0;
 }
+
 .addr {
   font-family: monospace;
   font-size: 0.9rem;
 }
+
 .result {
   margin-top: 1.5rem;
   padding: 1rem;
-  border: 1px solid var(--mw-color-border, #ddd);
+  border: 1px solid var(--border);
   border-radius: 10px;
   word-break: break-all;
 }
+
 .result code {
   font-size: 0.85rem;
 }
+
 .tabs {
   display: flex;
   gap: 0.25rem;
   margin: 1rem 0 0.5rem;
-  border-bottom: 2px solid var(--mw-color-border, #ddd);
+  border-bottom: 2px solid var(--border);
 }
+
 .tab {
   background: none;
   border: none;
@@ -241,16 +240,12 @@ function onUploaded(r: UploadResult): void {
   margin-bottom: -2px;
   cursor: pointer;
   font-size: 0.95rem;
-  color: var(--mw-color-text-muted, #666);
+  color: var(--muted);
 }
+
 .tab.active {
-  border-bottom-color: var(--mw-color-primary, #6c3);
-  color: var(--mw-color-text, #111);
+  border-bottom-color: var(--accent);
+  color: var(--text);
   font-weight: 600;
 }
-.foot {
-  margin-top: 3rem;
-  font-size: 0.85rem;
-  color: var(--mw-color-text-muted, #666);
-}
 </style>

package/src/config.ts

@@ -8,7 +8,11 @@ import {
   accessGateNftType,
 } from '@meddleware/walrus-relay'
 
-const env = (import.meta as unknown as { env?: Record<string, string | undefined> }).env ?? {}
+/** Build-time env bag. Injectable on the env-reading helpers below purely so unit tests can exercise
+ *  each branch without depending on Vite's (frozen) `import.meta.env` inlining. */
+export type EnvSource = Record<string, string | undefined>
+
+const env: EnvSource = (import.meta as unknown as { env?: EnvSource }).env ?? {}
 
 /** Active Walrus network, from `VITE_NETWORK` (default `testnet`). */
 export const NETWORK: WalrusNetwork = (env.VITE_NETWORK as WalrusNetwork) || 'testnet'
@@ -30,6 +34,19 @@ export function relayHosts(network: WalrusNetwork): { operator: string; public:
   return { operator: OPERATOR_RELAY_HOSTS[network], public: PUBLIC_WALRUS_RELAY_HOSTS[network] }
 }
 
+/** Default relay tip ceiling (MIST) when `VITE_UPLOAD_RELAY_MAX_TIP_MIST` is unset (0.05 SUI). */
+export const DEFAULT_UPLOAD_RELAY_MAX_TIP_MIST = 50_000_000
+
+/**
+ * Cap on the relay tip payment in MIST, from `VITE_UPLOAD_RELAY_MAX_TIP_MIST`. This is a ceiling to
+ * prevent overpayment (the relay asks for the minimum), NOT a fixed charge. A non-positive or
+ * unparseable value falls back to {@link DEFAULT_UPLOAD_RELAY_MAX_TIP_MIST}.
+ */
+export function uploadRelayMaxTipMist(envSource: EnvSource = env): number {
+  const parsed = Number(envSource.VITE_UPLOAD_RELAY_MAX_TIP_MIST)
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : DEFAULT_UPLOAD_RELAY_MAX_TIP_MIST
+}
+
 /**
  * JSON-RPC endpoint used to build + execute the register/certify transactions.
  * NOTE: this is JSON-RPC (the public testnet fullnode serves gRPC only for JSON-RPC,
@@ -45,19 +62,19 @@ export const RPC_URLS: Record<WalrusNetwork, string> = {
  * packageId and platformConfigId are hardcoded in the library — operators only
  * need to supply their Gate object ID, soulbound flag, and purchase price.
  */
-export function accessGate(network: WalrusNetwork): RelayGateConfig | null {
+export function accessGate(network: WalrusNetwork, envSource: EnvSource = env): RelayGateConfig | null {
   const NET = network.toUpperCase()
   const packageId = ACCESS_GATE_PACKAGE_ID[network]
   const platformConfigId = ACCESS_GATE_PLATFORM_CONFIG_ID[network]
-  const gateId = env[`VITE_ACCESS_GATE_ID_${NET}`]
+  const gateId = envSource[`VITE_ACCESS_GATE_ID_${NET}`]
   if (!packageId || !platformConfigId || !gateId) return null
-  const soulbound = env[`VITE_ACCESS_GATE_SOULBOUND_${NET}`] === 'true'
+  const soulbound = envSource[`VITE_ACCESS_GATE_SOULBOUND_${NET}`] === 'true'
   return {
     packageId,
     gateId,
     platformConfigId,
     nftType: accessGateNftType(network, soulbound),
     soulbound,
-    priceMist: BigInt(env[`VITE_ACCESS_GATE_PRICE_MIST_${NET}`] || '0'),
+    priceMist: BigInt(envSource[`VITE_ACCESS_GATE_PRICE_MIST_${NET}`] || '0'),
   }
 }

package/src/main.ts

@@ -1,4 +1,5 @@
 import '@meddleware/design-tokens/tokens.css'
+import '@meddleware/ui/base.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 

package/src/upload-flow.ts

@@ -0,0 +1,100 @@
+// The multi-step Walrus blob upload orchestration (encode → register → upload → certify → resolve),
+// extracted from App.vue so it can be unit-tested and reused by the e2e harness.
+//
+// The `@mysten/walrus` wasm client must NOT be pulled into the eager module graph (see CLAUDE.md),
+// so this module never imports @meddleware/walrus-client at top level — it loads it lazily through
+// the injectable `loadWalrusClient` (default: a dynamic import). Tests inject a fake loader.
+import type { UploadResult } from '@meddleware/walrus-relay'
+
+/** Minimal transaction executor — the structural subset App.vue's wallet executor already provides. */
+export interface UploadExecutor {
+  signAndExecute(tx: unknown): Promise<{ digest: string }>
+  waitForTransaction(digest: string): Promise<unknown>
+}
+
+/** The slice of `@meddleware/walrus-client` this flow needs. */
+export interface WalrusClientModule {
+  createWalrusClient: (opts: Record<string, unknown>) => unknown
+  createBlobUploadFlow: (client: unknown, bytes: Uint8Array) => BlobUploadFlow
+  walrusBlobUrl: (network: string, blobId: string) => string
+}
+
+interface BuiltTx {
+  setSenderIfNotSet(address: string): void
+  build(opts: { client: unknown }): Promise<unknown>
+}
+
+interface BlobUploadFlow {
+  encode(): Promise<void>
+  register(opts: { owner: string; epochs: number; deletable: boolean }): BuiltTx
+  upload(opts: { digest: string }): Promise<void>
+  certify(): BuiltTx
+  getBlob(): Promise<{ blobId: string }>
+}
+
+export interface RunBlobUploadDeps {
+  bytes: Uint8Array
+  network: string
+  relayHost: string
+  /** Owner/sender address (already-connected wallet account). */
+  address: string
+  /** Wasm bundle URL for the Walrus client. */
+  wasmUrl: string
+  /** Cap on the relay tip payment in MIST. */
+  maxTipMist: number
+  /** Blob storage reservation length in epochs. */
+  epochs: number
+  executor: UploadExecutor
+  /** A Sui client used to `build()` the register/certify transactions. */
+  suiClient: unknown
+  /** Optional Bearer proof token for an NFT-gated relay. */
+  authToken?: string
+  onStatus: (s: string) => void
+  /** Lazy loader for the Walrus client module (keeps wasm out of the eager bundle). */
+  loadWalrusClient?: () => Promise<WalrusClientModule>
+}
+
+/**
+ * Register → upload → certify a blob and resolve its id + public URL. Two wallet approvals
+ * (register, certify) are requested via `executor`; `onStatus` narrates each step.
+ */
+export async function runBlobUpload(deps: RunBlobUploadDeps): Promise<UploadResult> {
+  // The real module's flow types are richer than the narrow structural subset we use here, so the
+  // default loader casts through `unknown`. Tests inject an exact-shape fake instead.
+  const load =
+    deps.loadWalrusClient ??
+    (async () => (await import('@meddleware/walrus-client')) as unknown as WalrusClientModule)
+  const { createWalrusClient, createBlobUploadFlow, walrusBlobUrl } = await load()
+
+  const client = createWalrusClient({
+    network: deps.network,
+    wasmUrl: deps.wasmUrl,
+    uploadRelayHost: deps.relayHost,
+    uploadRelayAuthToken: deps.authToken,
+    uploadRelayMaxTipMist: deps.maxTipMist,
+  })
+  const flow = createBlobUploadFlow(client, deps.bytes)
+
+  deps.onStatus('Encoding…')
+  await flow.encode()
+
+  deps.onStatus('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…')
+  await flow.upload({ digest: reg.digest })
+
+  deps.onStatus('Certifying (approve in wallet)…')
+  const certTx = flow.certify()
+  certTx.setSenderIfNotSet(deps.address)
+  await certTx.build({ client: deps.suiClient })
+  const cert = await deps.executor.signAndExecute(certTx)
+  await deps.executor.waitForTransaction(cert.digest)
+
+  const blob = await flow.getBlob()
+  return { blobId: blob.blobId, url: walrusBlobUrl(deps.network, blob.blobId), digest: cert.digest }
+}