@meddleware/walrus-ui 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.28",
+  "version": "0.1.30",
+  "homepage": "https://docs.meddleware.co.uk/blockchain/sui/walrus-storage/",
   "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",
@@ -42,7 +43,7 @@
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/nft-gate-client": "^0.0.6",
-    "@meddleware/ui": "^0.1.10",
+    "@meddleware/ui": "^0.1.11",
     "@meddleware/wallet-adapter": "^0.0.5",
     "@meddleware/walrus-client": "^0.0.11",
     "@meddleware/walrus-relay": "^0.1.12",

package/src/App.vue

@@ -7,6 +7,7 @@ import { NETWORK, OPERATOR_RELAY_HOSTS } from './config.js'
 import WalrusView from './components/WalrusView.vue'
 
 const { mode, set } = useColorMode('dark')
+const DOCS_URL = import.meta.env.VITE_DOCS_URL || 'https://docs.meddleware.co.uk/blockchain/sui/walrus-storage/'
 </script>
 
 <template>
@@ -23,7 +24,7 @@ const { mode, set } = useColorMode('dark')
 
     <WalrusView />
 
-    <AppFooter />
+    <AppFooter :docs-url="DOCS_URL" />
   </div>
 </template>
 

package/src/components/WalrusView.vue

@@ -10,7 +10,7 @@ import {
   useAccessGate,
 } from '@meddleware/walrus-relay'
 import type { UploadResult, UploadProgress, ExistingCopy } from '@meddleware/walrus-relay'
-import { CopyableAddress, ExplorerLink, UiNotice, suiExplorerUrl } from '@meddleware/ui'
+import { AppTabNav, CopyableAddress, ExplorerLink, UiNotice, suiExplorerUrl, 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 { WalletGuard } from '@meddleware/wallet-adapter'
@@ -33,8 +33,11 @@ import {
 import { useOwnedBlobs } from '../composables/useOwnedBlobs.js'
 import MyBlobs from './MyBlobs.vue'
 
-type Tab = 'upload' | 'blobs'
-const activeTab = ref<Tab>('upload')
+const TABS: AppTab[] = [
+  { id: 'upload', label: 'Upload' },
+  { id: 'blobs', label: 'My Blobs' },
+]
+const activeTab = ref<string>('upload')
 
 const { account, signPersonalMessage, buildExecutor } = useWallet()
 
@@ -230,24 +233,7 @@ function onSettled(): 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>
+    <AppTabNav :tabs="TABS" v-model="activeTab" aria-label="Feature tabs" style="margin: 1rem 0 0.5rem" />
 
     <WalletGuard message="Connect a Sui wallet to upload and manage your blobs.">
       <template v-if="activeTab === 'upload'">
@@ -381,27 +367,4 @@ function onSettled(): void {
   line-height: 1.5;
 }
 
-.tabs {
-  display: flex;
-  gap: 0.25rem;
-  margin: 1rem 0 0.5rem;
-  border-bottom: 2px solid var(--border);
-}
-
-.tab {
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  padding: 0.5rem 1rem;
-  margin-bottom: -2px;
-  cursor: pointer;
-  font-size: 0.95rem;
-  color: var(--muted);
-}
-
-.tab.active {
-  border-bottom-color: var(--accent);
-  color: var(--text);
-  font-weight: 600;
-}
 </style>