@meddleware/walrus-ui 0.1.9 → 0.1.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meddleware/walrus-ui",
-  "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.",
+  "version": "0.1.11",
+  "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",
   "repository": {

package/src/App.vue

@@ -13,7 +13,7 @@ const { mode, set } = useColorMode('dark')
   <div class="app">
     <AppHeader variant="dark">
       <template #brand>
-        <span>Walrus Assets</span>
+        <h1 class="brand-title">Walrus Assets</h1>
       </template>
       <template #actions>
         <TipConfigBadge :host="OPERATOR_RELAY_HOSTS[NETWORK]" />
@@ -33,4 +33,9 @@ const { mode, set } = useColorMode('dark')
   display: flex;
   flex-direction: column;
 }
+
+.brand-title {
+  font: inherit;
+  margin: 0;
+}
 </style>

package/src/components/WalrusView.vue

@@ -101,60 +101,60 @@ function onSettled(): void {
   <div class="page">
     <p class="sub">Upload and manage blobs on Walrus decentralised storage ({{ NETWORK }}).</p>
 
-    <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>
-        <button
-          type="button"
-          class="tab"
-          :class="{ active: activeTab === 'blobs' }"
-          @click="activeTab = 'blobs'"
-        >
-          My Blobs
-        </button>
-      </nav>
-
-    <template v-if="activeTab === 'upload'">
-      <AccessGateCta
-        :gate-configured="gateState.gateConfigured"
-        :has-access="gateState.hasAccess.value"
-        :busy="purchasing"
-        :price-mist="gate?.priceMist ?? null"
-        @purchase="onPurchase"
-      />
+    <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>
 
-      <WalrusUpload
-        :hosts="relayHosts(NETWORK)"
-        :connected="!!account"
-        :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
-        :perform-upload="performUpload"
-        @uploaded="onUploaded"
-        @settled="onSettled"
+    <WalletGuard message="Connect a Sui wallet to upload and manage your blobs.">
+      <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"
+          @settled="onSettled"
+        />
+
+        <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()"
       />
-
-      <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()"
-    />
     </WalletGuard>
   </div>
 </template>