@meddleware/walrus-ui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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",
@@ -41,13 +41,13 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
-    "@meddleware/nft-gate-client": "^0.0.3",
+    "@meddleware/nft-gate-client": "^0.0.6",
     "@meddleware/ui": "^0.1.6",
-    "@meddleware/wallet-adapter": "^0.0.1",
-    "@meddleware/walrus-client": "^0.0.3",
-    "@meddleware/walrus-relay": "^0.1.1",
-    "@mysten/sui": "~2.17.0",
-    "@mysten/wallet-standard": "~0.19.9",
+    "@meddleware/wallet-adapter": "^0.0.3",
+    "@meddleware/walrus-client": "^0.0.5",
+    "@meddleware/walrus-relay": "^0.1.3",
+    "@mysten/sui": "^2.28.0",
+    "@mysten/wallet-standard": "^0.20.0",
     "@mysten/walrus": "~1.1.7",
     "@mysten/walrus-wasm": "~0.2.2",
     "vue": "^3.5.40"

package/src/components/MyBlobs.vue

@@ -40,11 +40,11 @@ async function loadBlobs(): Promise<void> {
     const suiClient = getSuiClient(NETWORK)
     const walrusClient = createWalrusClient({ network: NETWORK, wasmUrl: walrusWasmUrl })
     const [sys, fetched] = await Promise.all([
-      suiClient.getLatestSuiSystemState(),
+      suiClient.getCurrentSystemState(),
       fetchOwnedWalrusBlobs(suiClient, walrusClient, props.address),
     ])
-    currentEpoch.value = Number(sys.epoch)
-    blobs.value = fetched.sort((a, b) => a.endEpoch - b.endEpoch)
+    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 {

package/src/components/WalrusView.vue

@@ -3,7 +3,7 @@
 // Rendered standalone by walrus-ui's App.vue and inline by the dashboard. Wallet state comes
 // from the shared @meddleware/wallet-adapter singleton (via ./wallet.js), so connecting here or
 // in any other inline tool view reflects everywhere.
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import {
   WalrusUpload,
   AccessGateCta,
@@ -13,6 +13,7 @@ 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 { 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'
@@ -21,20 +22,20 @@ import MyBlobs from './MyBlobs.vue'
 type Tab = 'upload' | 'blobs'
 const activeTab = ref<Tab>('upload')
 
-const { wallets, account, connect, disconnect, signPersonalMessage, buildExecutor } = useWallet()
+const { account, signPersonalMessage, buildExecutor } = useWallet()
 
 const gate = accessGate(NETWORK)
 const gateState = useAccessGate({ gate, getClient: () => getSuiClient(NETWORK) })
 const purchasing = ref(false)
 const result = ref<UploadResult | null>(null)
 
-async function onConnectFirst(): Promise<void> {
-  const w = wallets.value[0]
-  if (w) {
-    await connect(w)
-    if (account.value) await gateState.checkOwnership(account.value.address)
-  }
-}
+// Check gate ownership whenever the connected account changes (handles connect, reconnect,
+// and disconnect without needing a manual trigger from the connect button).
+watch(
+  () => account.value?.address ?? null,
+  (addr) => { if (addr && gate) void gateState.checkOwnership(addr) },
+  { immediate: true },
+)
 
 async function onPurchase(): Promise<void> {
   if (!account.value) return
@@ -91,36 +92,25 @@ function onUploaded(r: UploadResult): void {
   <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' }}
+    <WalletGuard message="Connect a Sui wallet to upload and manage your blobs.">
+      <nav class="tabs" aria-label="Feature tabs">
+        <button
+          type="button"
+          class="tab"
+          :class="{ active: activeTab === 'upload' }"
+          @click="activeTab = 'upload'"
+        >
+          Upload
         </button>
-      </template>
-    </section>
+        <button
+          type="button"
+          class="tab"
+          :class="{ active: activeTab === 'blobs' }"
+          @click="activeTab = 'blobs'"
+        >
+          My Blobs
+        </button>
+      </nav>
 
     <template v-if="activeTab === 'upload'">
       <AccessGateCta
@@ -155,6 +145,7 @@ function onUploaded(r: UploadResult): void {
       :address="account?.address ?? null"
       :build-executor="() => buildExecutor(NETWORK)"
     />
+    </WalletGuard>
   </div>
 </template>
 
@@ -171,18 +162,6 @@ function onUploaded(r: UploadResult): void {
   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;

package/src/config.ts

@@ -48,12 +48,12 @@ export function uploadRelayMaxTipMist(envSource: EnvSource = env): number {
 }
 
 /**
- * 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,
- * so a JSON-RPC-capable endpoint is used for testnet).
+ * gRPC-web endpoint used to build + execute the register/certify transactions and read owned
+ * blobs. The Sui SDK's JSON-RPC client is deprecated, so this must be a gRPC-web-capable endpoint
+ * (the Mysten public fullnodes serve gRPC-web at :443 via the browser Fetch transport).
  */
 export const RPC_URLS: Record<WalrusNetwork, string> = {
-  testnet: env.VITE_RPC_TESTNET || 'https://sui-testnet-rpc.publicnode.com',
+  testnet: env.VITE_RPC_TESTNET || 'https://fullnode.testnet.sui.io:443',
   mainnet: env.VITE_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
 }
 

package/tsconfig.json

@@ -14,5 +14,5 @@
     "types": ["node"],
     "noEmit": true
   },
-  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts", "vite.config.ts"]
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts", "vite.config.ts", "playwright.config.ts", "e2e/**/*.ts"]
 }

package/vite.config.ts

@@ -3,9 +3,16 @@ import vue from '@vitejs/plugin-vue'
 
 // design-tokens and ui resolve from node_modules (published packages).
 // @mysten/walrus is excluded from dep-optimization so its wasm `?url` import resolves.
+// node:fs/promises is declared external so rolldown doesn't warn about the Node-only
+// uploadLocalFile helper in @meddleware/walrus-client (never called from browser code).
 export default defineConfig({
   plugins: [vue()],
   optimizeDeps: {
     exclude: ['@mysten/walrus', '@mysten/walrus-wasm'],
   },
+  build: {
+    rollupOptions: {
+      external: ['node:fs/promises'],
+    },
+  },
 })