@meddleware/dashboard 0.1.2 → 0.1.4

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@meddleware/dashboard",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Meddleware tools hub — Vue 3 SPA listing hosted services (Walrus, Access Gate) with white-label deploy options.",
-  "author": "MeddleWare <meddleware@proton.me>",
+  "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
   "repository": {
     "type": "git",
@@ -28,10 +28,15 @@
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/ui": "^0.1.6",
+    "@meddleware/wallet-adapter": "^0.0.1",
+    "@meddleware/walrus-ui": "^0.1.4",
     "pinia": "^4.0.2",
     "vue": "^3.5.40",
     "vue-router": "^5.2.0"
   },
+  "overrides": {
+    "@mysten/sui": "2.17.0"
+  },
   "devDependencies": {
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.8",

package/src/App.vue

@@ -2,18 +2,34 @@
 import { computed } from 'vue'
 import { useRoute, RouterView } from 'vue-router'
 import {
-  AppHeader, AppSidebar, AppFooter,
+  AppHeader, AppSidebar,
   ColorModeControl, SidebarItem, StatusWidget,
   useColorMode,
 } from '@meddleware/ui'
+import { useWallet } from '@meddleware/wallet-adapter'
 
 const { mode, set } = useColorMode('dark')
 const route = useRoute()
-const year = new Date().getFullYear()
 
 const isWalrus = computed(() => route.path === '/walrus')
 const isAccessGate = computed(() => route.path === '/access-gate')
 const isSealedStorage = computed(() => route.path === '/sealed-storage')
+
+// The dashboard hosts the single shared wallet connection for every inline tool view. It
+// requests the superset of features the tools need so the connect control only offers wallets
+// capable of every operation; individual tools still feature-guard at call time.
+const { wallets, account, connect, disconnect, connecting } = useWallet({
+  requiredFeatures: ['sui:signTransaction', 'sui:signPersonalMessage'],
+})
+
+async function onConnect(): Promise<void> {
+  const w = wallets.value[0]
+  if (w) await connect(w)
+}
+
+function shortAddr(addr: string): string {
+  return `${addr.slice(0, 8)}…${addr.slice(-4)}`
+}
 </script>
 
 <template>
@@ -24,6 +40,21 @@ const isSealedStorage = computed(() => route.path === '/sealed-storage')
         <span>Meddleware</span>
       </template>
       <template #actions>
+        <span v-if="account" class="wallet-addr" :title="account.address">
+          {{ shortAddr(account.address) }}
+        </span>
+        <button v-if="account" type="button" class="wallet-btn" @click="disconnect">
+          Disconnect
+        </button>
+        <button
+          v-else
+          type="button"
+          class="wallet-btn"
+          :disabled="!wallets.length || connecting"
+          @click="onConnect"
+        >
+          {{ wallets.length ? (connecting ? 'Connecting…' : 'Connect wallet') : 'No wallet' }}
+        </button>
         <StatusWidget />
         <ColorModeControl :model-value="mode" @update:model-value="set" />
       </template>
@@ -46,15 +77,56 @@ const isSealedStorage = computed(() => route.path === '/sealed-storage')
     <main class="app-shell__main">
       <RouterView />
     </main>
-
-    <AppFooter class="app-shell__footer" variant="transparent">
-      <span>&copy; {{ year }} Meddleware</span>
-    </AppFooter>
   </div>
 </template>
 
 <style scoped>
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--mw-sidebar-width, 240px) 1fr;
+  grid-template-rows: var(--mw-header-height, 56px) 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app-shell__header {
+  grid-column: 1 / -1;
+}
+
+.app-shell__sidebar {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.app-shell__main {
+  /* Inline tool views can exceed the viewport — scroll the main area internally
+     (the shell itself stays fixed at 100vh). */
+  overflow-y: auto;
+  height: 100%;
+}
+
 .brand-mark {
   color: var(--gold);
 }
+
+.wallet-addr {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.wallet-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.35rem 0.75rem;
+  cursor: pointer;
+  color: var(--text);
+  font-size: 0.85rem;
+}
+
+.wallet-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 </style>

package/src/components/ToolFrame.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{ src: string; title: string }>()
+</script>
+
+<template>
+  <iframe
+    :src="src"
+    :title="title"
+    class="tool-frame"
+    allow="camera; clipboard-read; clipboard-write"
+  />
+</template>
+
+<style scoped>
+.tool-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+</style>

package/src/router/index.ts

@@ -1,16 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
-import WalrusPage from '../views/WalrusPage.vue'
-import AccessGatePage from '../views/AccessGatePage.vue'
-import SealedStoragePage from '../views/SealedStoragePage.vue'
+import ToolPage from '../views/ToolPage.vue'
 
+// Walrus renders inline via the component exported from @meddleware/walrus-ui (no iframe).
+// It shares the dashboard's wallet connection through the @meddleware/wallet-adapter singleton.
+// Access Gate and Sealed Storage remain on the interim iframe path until their phases land.
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     { path: '/', component: Home },
-    { path: '/walrus', component: WalrusPage },
-    { path: '/access-gate', component: AccessGatePage },
-    { path: '/sealed-storage', component: SealedStoragePage },
+    {
+      path: '/walrus',
+      component: () => import('@meddleware/walrus-ui').then((m) => m.WalrusView),
+    },
+    { path: '/access-gate', component: ToolPage, props: { src: 'https://sui-access-gate.meddleware.co.uk/?embedded=1', title: 'Access Gate' } },
+    { path: '/sealed-storage', component: ToolPage, props: { src: 'https://sui-seal.meddleware.co.uk/?embedded=1', title: 'Sealed Storage' } },
   ],
 })
 

package/src/views/Home.vue

@@ -16,43 +16,16 @@ const router = useRouter()
       <UiCard class="tool-card" @click="router.push('/walrus')">
         <h2>🗄 Walrus</h2>
         <p>Upload and manage blobs on Walrus decentralised storage. NFT-gated relay, wallet-connected, no backend required.</p>
-        <a
-          href="https://sui-walrus.meddleware.co.uk"
-          target="_blank"
-          rel="noopener"
-          class="launch-link"
-          @click.stop
-        >
-          Launch →
-        </a>
       </UiCard>
 
       <UiCard class="tool-card" @click="router.push('/access-gate')">
         <h2>🔐 Access Gate</h2>
         <p>Create and manage NFT-gated access controls on Sui. Commission-enforced on-chain, no server required.</p>
-        <a
-          href="https://sui-access-gate.meddleware.co.uk"
-          target="_blank"
-          rel="noopener"
-          class="launch-link"
-          @click.stop
-        >
-          Launch →
-        </a>
       </UiCard>
 
       <UiCard class="tool-card" @click="router.push('/sealed-storage')">
         <h2>🔒 Sealed Storage</h2>
         <p>Client-side encrypted, access-gated storage: seal a file, store it on Walrus, and gate decryption on-chain (NFT pass, time-lock, and more). Testnet — mainnet pending.</p>
-        <a
-          href="https://sui-seal.meddleware.co.uk"
-          target="_blank"
-          rel="noopener"
-          class="launch-link"
-          @click.stop
-        >
-          Launch →
-        </a>
       </UiCard>
     </div>
   </div>
@@ -72,12 +45,4 @@ h1 { margin-top: 0; }
 .tool-card { cursor: pointer; }
 .tool-card h2 { margin-top: 0; }
 
-.launch-link {
-  display: inline-block;
-  margin-top: 0.5rem;
-  color: var(--accent);
-  text-decoration: none;
-  font-weight: 500;
-}
-.launch-link:hover { text-decoration: underline; }
 </style>

package/src/views/ToolPage.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ToolFrame from '../components/ToolFrame.vue'
+
+defineProps<{ src: string; title: string }>()
+</script>
+
+<template>
+  <ToolFrame :src="src" :title="title" />
+</template>

package/vite.config.ts

@@ -4,4 +4,9 @@ import vue from '@vitejs/plugin-vue'
 // @meddleware/* resolve from node_modules (published packages — no monorepo aliases).
 export default defineConfig({
   plugins: [vue()],
+  optimizeDeps: {
+    // The Walrus wasm client is dynamically imported inside the inline WalrusView upload flow;
+    // keep it out of the eager dep-optimization graph so it stays a lazy chunk.
+    exclude: ['@mysten/walrus', '@mysten/walrus-wasm'],
+  },
 })

package/src/views/AccessGatePage.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { UiCard } from '@meddleware/ui'
-</script>
-
-<template>
-  <div class="feature-page">
-    <h1>🔐 Access Gate</h1>
-
-    <UiCard class="section">
-      <h2>Overview</h2>
-      <p>
-        Access Gate is an on-chain NFT access control system on Sui. Operators deploy a gate
-        smart contract that issues soulbound or transferable NFT passes; the gate enforces a
-        platform commission (20 bps) on every pass purchase, routed directly on-chain. The
-        Meddleware Access Gate console lets you create gates, configure pricing, and monitor
-        your gate's activity — all from a browser wallet, with no backend required.
-      </p>
-    </UiCard>
-
-    <UiCard class="section">
-      <h2>Launch</h2>
-      <p>Use the hosted Meddleware Access Gate console — no installation required.</p>
-      <a
-        href="https://sui-access-gate.meddleware.co.uk"
-        target="_blank"
-        rel="noopener"
-        class="launch-btn"
-      >
-        Open Access Gate →
-      </a>
-    </UiCard>
-
-    <UiCard class="section section--secondary">
-      <h2>White-label</h2>
-      <p>
-        Deploy a branded version of the Access Gate console for your own project. The
-        <code>access-gate-ui</code> Docker image is a standalone Vue 3 SPA — run it behind
-        your own subdomain and point users at your specific gate ID. The commission enforcement
-        is in the smart contract, so any gate created through your interface still routes 20 bps
-        to Meddleware automatically.
-      </p>
-      <p class="note">
-        Detailed deployment instructions will be available at <code>dev.meddleware.co.uk</code>.
-      </p>
-    </UiCard>
-  </div>
-</template>
-
-<style scoped>
-.feature-page { max-width: 760px; }
-h1 { margin-top: 0; }
-
-.section { margin-bottom: 1.25rem; }
-.section h2 { margin-top: 0; }
-
-.section--secondary { opacity: 0.9; }
-.section--secondary h2 { font-size: 1rem; }
-
-.launch-btn {
-  display: inline-block;
-  margin-top: 0.25rem;
-  padding: 0.55rem 1.2rem;
-  border-radius: var(--mw-radius, 10px);
-  background: var(--accent);
-  color: #fff;
-  text-decoration: none;
-  font-weight: 600;
-}
-.launch-btn:hover { opacity: 0.88; }
-
-code {
-  font-size: 0.85em;
-  background: color-mix(in srgb, currentColor 10%, transparent);
-  padding: 0.1em 0.35em;
-  border-radius: 4px;
-}
-
-.note {
-  margin-top: 0.75rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-</style>

package/src/views/SealedStoragePage.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { UiCard } from '@meddleware/ui'
-</script>
-
-<template>
-  <div class="feature-page">
-    <h1>🔒 Sealed Storage <span class="badge">Testnet · mainnet pending</span></h1>
-
-    <UiCard class="section">
-      <h2>Overview</h2>
-      <p>
-        Sealed Storage composes three primitives into one: encrypt a file in your browser with
-        <strong>Seal</strong> (threshold identity-based encryption), store the ciphertext on
-        <strong>Walrus</strong>, and gate decryption with an on-chain <strong>access policy</strong>.
-        Decryption keys are released by a committee of independent key servers only when the policy is
-        satisfied — no server ever holds your data or keys. Policies are modular: gate on an
-        <strong>access-gate NFT</strong>, a <strong>time-lock</strong>, and more over time.
-      </p>
-    </UiCard>
-
-    <UiCard class="section">
-      <h2>Launch</h2>
-      <p>Use the hosted Meddleware Sealed Storage app (testnet).</p>
-      <a
-        href="https://sui-seal.meddleware.co.uk"
-        target="_blank"
-        rel="noopener"
-        class="launch-btn"
-      >
-        Open Sealed Storage →
-      </a>
-      <p class="note">
-        Mainnet is pending: Seal committee mode is currently testnet-only. The app will enable mainnet
-        automatically once it ships.
-      </p>
-    </UiCard>
-
-    <UiCard class="section section--secondary">
-      <h2>White-label</h2>
-      <p>
-        Deploy your own branded Sealed Storage with the <code>seal-ui</code> Docker image: set your
-        network, policy package, key-server committee, and Walrus endpoints via build-time VITE args.
-        The policy contracts (<code>seal-policies-sui</code>) and client
-        (<code>@meddleware/seal-client</code>) are reusable — add your own policy type as a drop-in
-        Move module + client provider.
-      </p>
-      <p class="note">
-        Detailed deployment instructions will be available at <code>dev.meddleware.co.uk</code>.
-      </p>
-    </UiCard>
-  </div>
-</template>
-
-<style scoped>
-.feature-page { max-width: 760px; }
-h1 { margin-top: 0; }
-
-.badge {
-  font-size: 0.6em;
-  vertical-align: middle;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 0.2em 0.6em;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--gold, #d29922) 22%, transparent);
-  color: var(--text);
-}
-
-.section { margin-bottom: 1.25rem; }
-.section h2 { margin-top: 0; }
-
-.section--secondary { opacity: 0.9; }
-.section--secondary h2 { font-size: 1rem; }
-
-.launch-btn {
-  display: inline-block;
-  margin-top: 0.25rem;
-  padding: 0.55rem 1.2rem;
-  border-radius: var(--mw-radius, 10px);
-  background: var(--accent);
-  color: #fff;
-  text-decoration: none;
-  font-weight: 600;
-}
-.launch-btn:hover { opacity: 0.88; }
-
-code {
-  font-size: 0.85em;
-  background: color-mix(in srgb, currentColor 10%, transparent);
-  padding: 0.1em 0.35em;
-  border-radius: 4px;
-}
-
-.note {
-  margin-top: 0.75rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-</style>

package/src/views/WalrusPage.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { UiCard } from '@meddleware/ui'
-</script>
-
-<template>
-  <div class="feature-page">
-    <h1>🗄 Walrus</h1>
-
-    <UiCard class="section">
-      <h2>Overview</h2>
-      <p>
-        Walrus is a decentralised blob storage network built on Sui. The Meddleware Walrus app
-        lets you upload arbitrary files, manage your owned blobs, and extend their storage lifetime
-        — all from your browser wallet. Access is controlled by an on-chain NFT gate: the relay tip
-        is paid only after gate verification, keeping the relay open to legitimate holders while
-        preventing spam.
-      </p>
-    </UiCard>
-
-    <UiCard class="section">
-      <h2>Launch</h2>
-      <p>Use the hosted Meddleware Walrus app — no installation required.</p>
-      <a
-        href="https://sui-walrus.meddleware.co.uk"
-        target="_blank"
-        rel="noopener"
-        class="launch-btn"
-      >
-        Open Walrus →
-      </a>
-    </UiCard>
-
-    <UiCard class="section section--secondary">
-      <h2>White-label</h2>
-      <p>
-        Run your own branded Walrus upload experience. The <code>walrus-ui</code> Docker image
-        accepts VITE build args baked at build time — set your relay URL, network, and access
-        gate IDs, then deploy the image behind your own subdomain.
-      </p>
-      <p>
-        You will also need your own NFT gate (deployed via Access Gate) and a running relay
-        Worker (nft-gate Cloudflare Worker pointing at a Walrus upload relay origin). The
-        commission enforcement (20 bps) is hard-coded in the
-        <code>@meddleware/walrus-relay</code> library constants and applies to all relays,
-        regardless of who operates them.
-      </p>
-      <p class="note">
-        Detailed deployment instructions will be available at <code>dev.meddleware.co.uk</code>.
-      </p>
-    </UiCard>
-  </div>
-</template>
-
-<style scoped>
-.feature-page { max-width: 760px; }
-h1 { margin-top: 0; }
-
-.section { margin-bottom: 1.25rem; }
-.section h2 { margin-top: 0; }
-
-.section--secondary { opacity: 0.9; }
-.section--secondary h2 { font-size: 1rem; }
-
-.launch-btn {
-  display: inline-block;
-  margin-top: 0.25rem;
-  padding: 0.55rem 1.2rem;
-  border-radius: var(--mw-radius, 10px);
-  background: var(--accent);
-  color: #fff;
-  text-decoration: none;
-  font-weight: 600;
-}
-.launch-btn:hover { opacity: 0.88; }
-
-code {
-  font-size: 0.85em;
-  background: color-mix(in srgb, currentColor 10%, transparent);
-  padding: 0.1em 0.35em;
-  border-radius: 4px;
-}
-
-.note {
-  margin-top: 0.75rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-</style>