@meddleware/dashboard 0.1.3 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dashboard",
-  "version": "0.1.3",
+  "version": "0.1.7",
   "description": "Meddleware tools hub — Vue 3 SPA listing hosted services (Walrus, Access Gate) with white-label deploy options.",
   "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
@@ -26,12 +26,19 @@
     "access": "public"
   },
   "dependencies": {
+    "@meddleware/access-gate-ui": "^0.1.3",
     "@meddleware/design-tokens": "^0.1.2",
+    "@meddleware/seal-ui": "^0.0.3",
     "@meddleware/ui": "^0.1.6",
+    "@meddleware/wallet-adapter": "^0.0.2",
+    "@meddleware/walrus-ui": "^0.1.5",
     "pinia": "^4.0.2",
     "vue": "^3.5.40",
     "vue-router": "^5.2.0"
   },
+  "overrides": {
+    "@mysten/sui": "2.28.0"
+  },
   "devDependencies": {
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.8",

package/src/App.vue

@@ -6,6 +6,7 @@ import {
   ColorModeControl, SidebarItem, StatusWidget,
   useColorMode,
 } from '@meddleware/ui'
+import { useWallet } from '@meddleware/wallet-adapter'
 
 const { mode, set } = useColorMode('dark')
 const route = useRoute()
@@ -13,6 +14,22 @@ const route = useRoute()
 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>
@@ -23,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>
@@ -67,11 +99,34 @@ const isSealedStorage = computed(() => route.path === '/sealed-storage')
 }
 
 .app-shell__main {
-  overflow: hidden;
+  /* 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/router/index.ts

@@ -1,14 +1,26 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
-import ToolPage from '../views/ToolPage.vue'
 
+// Every tool renders inline via the view component exported from its own package
+// (@meddleware/walrus-ui, @meddleware/access-gate-ui, @meddleware/seal-ui) — no iframes. They
+// share the dashboard's wallet connection through the @meddleware/wallet-adapter singleton, and
+// each route is lazy so a tool's deps (incl. the Walrus wasm) load only on navigation.
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     { path: '/', component: Home },
-    { path: '/walrus', component: ToolPage, props: { src: 'https://sui-walrus.meddleware.co.uk/?embedded=1', title: 'Walrus' } },
-    { 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' } },
+    {
+      path: '/walrus',
+      component: () => import('@meddleware/walrus-ui').then((m) => m.WalrusView),
+    },
+    {
+      path: '/access-gate',
+      component: () => import('@meddleware/access-gate-ui').then((m) => m.AccessGateView),
+    },
+    {
+      path: '/sealed-storage',
+      component: () => import('@meddleware/seal-ui').then((m) => m.SealView),
+    },
   ],
 })
 

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/components/ToolFrame.vue

@@ -1,21 +0,0 @@
-<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/views/ToolPage.vue

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