@meddleware/dao-ui 0.1.2 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dao-ui",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "Meddleware DAO console — treasury overview, proposals, and governance on Sui.",
   "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
-    "@meddleware/ui": "^0.1.10",
+    "@meddleware/ui": "^0.1.11",
     "@meddleware/wallet-adapter": "^0.0.5",
     "@mysten/sui": "^2.30.0",
     "vue": "^3.5.40"

package/src/DaoView.vue

@@ -6,7 +6,7 @@
 // qt.css is imported here (not just in main.ts) so the styles are included when
 // DaoView is consumed as a library by the dashboard or any other host.
 import './styles/qt.css'
-import { ref, shallowRef, computed } from 'vue'
+import { ref, computed } from 'vue'
 import TabBar from './components/TabBar.vue'
 import StatusBar from './components/StatusBar.vue'
 import OverviewTab from './tabs/OverviewTab.vue'
@@ -47,10 +47,6 @@ const { epoch } = useEpoch()
   <div class="dao-view">
     <div class="dao-toolbar">
       <button class="dao-toolbar__btn" @click="activeTab = 'overview'">🏛 Meddleware DAO</button>
-      <span class="dao-toolbar__sep" />
-      <span class="dao-muted" style="font-size: 0.75rem; padding: 0 4px">
-        access_gate · testnet
-      </span>
     </div>
 
     <TabBar :tabs="TABS" v-model="activeTab" />

package/src/composables/useDaoEvents.ts

@@ -5,7 +5,7 @@ import { PACKAGE_ID } from '../config.js'
 export interface DaoEvent {
   type: 'AccessMinted' | 'AccessConsumed' | 'GateCreated' | 'AccessBurned'
   txDigest: string
-  timestampMs: number
+  checkpoint: string | null
   address?: string
 }
 
@@ -47,14 +47,20 @@ export function useDaoEvents(limit = 20) {
           all.push({
             type: label as DaoEvent['type'],
             txDigest: e.transactionDigest,
-            timestampMs: 0,
+            checkpoint: e.checkpoint ?? null,
             address: String(f.recipient ?? f.creator ?? f.sender ?? ''),
           })
         }
       }
 
-      // Events come back in descending order per-type; stable sort across types by txDigest.
-      // timestampMs is not available from gRPC EventEntry; order is already newest-first per batch.
+      // Sort globally by checkpoint descending so the merged list is newest-first across all types.
+      all.sort((a, b) => {
+        const ca = BigInt(a.checkpoint ?? '0')
+        const cb = BigInt(b.checkpoint ?? '0')
+        if (cb > ca) return 1
+        if (cb < ca) return -1
+        return 0
+      })
       events.value = all.slice(0, limit)
       lastRefresh.value = new Date()
     } catch (e) {

package/src/composables/useGates.ts

@@ -9,7 +9,7 @@ export interface Gate {
   paused: boolean
   frozen: boolean
   txDigest: string
-  timestampMs: number
+  checkpoint: string | null
 }
 
 export function useGates() {
@@ -37,7 +37,7 @@ export function useGates() {
           paused: false,
           frozen: false,
           txDigest: e.transactionDigest,
-          timestampMs: 0,
+          checkpoint: e.checkpoint ?? null,
         }
       })
     } catch (e) {

package/src/styles/qt.css

@@ -131,6 +131,9 @@
   border-top: 1px solid var(--border);
   flex-shrink: 0;
   font-family: var(--font-mono);
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
 }
 
 .dao-statusbar__dot {
@@ -319,6 +322,36 @@
   font-size: 0.72rem;
 }
 
+/* ── Info tooltip marker ─────────────────────────────────────────────────── */
+
+.dao-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  border: 1px solid var(--muted);
+  color: var(--muted);
+  font-size: 0.58rem;
+  font-weight: 700;
+  font-style: normal;
+  cursor: help;
+  vertical-align: middle;
+  margin-left: 3px;
+  text-decoration: none;
+}
+
+/* ── Pagination ──────────────────────────────────────────────────────────── */
+
+.dao-pagination {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 10px;
+}
+
 /* ── Misc ────────────────────────────────────────────────────────────────── */
 
 .dao-mono {

package/src/tabs/GovernanceTab.vue

@@ -1,19 +1,52 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, watch, computed } from 'vue'
 import Panel from '../components/Panel.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
+import { useWallet, getSuiClient } from '../wallet.js'
+import { PACKAGE_ID } from '../config.js'
+import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import { NETWORK } from '../config.js'
 
 const { config } = usePlatformConfig()
+const { account } = useWallet()
 
 const commissionPct = computed(() =>
   config.value ? (config.value.commissionBps / 100).toFixed(2) + '%' : '—',
 )
+
+type CapState = 'idle' | 'checking' | 'found' | 'not-found' | 'error'
+const capState = ref<CapState>('idle')
+
+async function checkCaps(address: string) {
+  if (!PACKAGE_ID) { capState.value = 'not-found'; return }
+  capState.value = 'checking'
+  try {
+    const client = getSuiClient()
+    const res = await client.listOwnedObjects({
+      owner: address,
+      type: `${PACKAGE_ID}::access_gate::PlatformAdminCap`,
+      limit: 1,
+    })
+    capState.value = res.objects.length > 0 ? 'found' : 'not-found'
+  } catch {
+    capState.value = 'error'
+  }
+}
+
+watch(
+  () => account.value?.address,
+  (addr) => {
+    if (addr) void checkCaps(addr)
+    else capState.value = 'idle'
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
   <div style="display: flex; flex-direction: column; gap: 10px">
-    <Panel title="On-Chain Parameters (access_gate)">
-      <div class="dao-stat-grid" style="max-width: 420px">
+    <Panel title="Platform Parameters">
+      <div class="dao-stat-grid" style="max-width: 480px">
         <span class="dao-stat-grid__label">Commission rate</span>
         <span class="dao-stat-grid__value dao-mono">{{ commissionPct }}</span>
 
@@ -21,34 +54,61 @@ const commissionPct = computed(() =>
         <span class="dao-stat-grid__value dao-mono">10.00% (1000 bps — on-chain hard cap)</span>
 
         <span class="dao-stat-grid__label">Treasury address</span>
-        <span
-          class="dao-stat-grid__value dao-mono"
-          style="font-size: 0.72rem; text-align: left; word-break: break-all"
-        >
-          {{ config?.treasury ?? '—' }}
+        <span class="dao-stat-grid__value" style="text-align: left">
+          <CopyableAddress v-if="config?.treasury" :address="config.treasury">
+            <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
+          </CopyableAddress>
+          <span v-else class="dao-mono" style="font-size: 0.7rem">—</span>
         </span>
       </div>
 
       <p class="dao-muted" style="margin: 10px 0 0; font-size: 0.72rem">
         Parameters are governed by <code>PlatformAdminCap</code> on-chain.
-        Commission is split on every NFT purchase: <code>commission_bps / 10000 × price</code>
-        routes to treasury; the remainder goes to the gate operator.
-      </p>
-    </Panel>
-
-    <Panel title="Vault DAO Parameters">
-      <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
-        DAO-governed vault parameters (skim fee, buyback ratio, allocation caps, fee recipients)
-        will appear here when <code>vault_config</code> and <code>vault_dao</code> are deployed.
+        Commission is charged on every NFT access purchase:
+        <code>commission_bps / 10000 × price</code> routes to treasury;
+        the remainder goes to the gate operator.
       </p>
     </Panel>
 
     <Panel title="Admin Actions">
-      <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
-        Privileged actions (update commission, change treasury, pause gates) require the
-        <code>PlatformAdminCap</code> or <code>DaoAdminCap</code>.
-        Connect a wallet holding the relevant capability to enable these controls.
-      </p>
+      <!-- Not connected -->
+      <template v-if="!account">
+        <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
+          Connect a wallet via the header to manage platform settings.
+        </p>
+      </template>
+
+      <!-- Connected, checking -->
+      <template v-else-if="capState === 'checking'">
+        <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
+          Checking capabilities for {{ account.address.slice(0, 10) }}…
+        </p>
+      </template>
+
+      <!-- Connected, has PlatformAdminCap -->
+      <template v-else-if="capState === 'found'">
+        <p class="dao-muted" style="margin: 0 0 8px; font-size: 0.78rem">
+          <span style="color: var(--ok)">●</span>
+          <code>PlatformAdminCap</code> detected. Admin controls will appear here when implemented.
+        </p>
+      </template>
+
+      <!-- Connected, no cap -->
+      <template v-else-if="capState === 'not-found'">
+        <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
+          <span>●</span>
+          Connected: {{ account.address.slice(0, 10) }}…{{ account.address.slice(-6) }}<br>
+          This wallet does not hold <code>PlatformAdminCap</code> or <code>DaoAdminCap</code>.
+          Privileged actions are not available.
+        </p>
+      </template>
+
+      <!-- Error -->
+      <template v-else-if="capState === 'error'">
+        <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
+          Unable to verify capabilities. Check your connection and try again.
+        </p>
+      </template>
     </Panel>
   </div>
 </template>

package/src/tabs/HistoryTab.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import DataTable from '../components/DataTable.vue'
 import { useDaoEvents } from '../composables/useDaoEvents.js'
+import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import { NETWORK } from '../config.js'
 import type { DaoEvent } from '../composables/useDaoEvents.js'
 
-const { events, loading, error, reload } = useDaoEvents(50)
+const { events, loading, error, reload } = useDaoEvents(200)
+
+const PAGE_SIZE = 20
+const page = ref(1)
+
+const totalPages = computed(() => Math.max(1, Math.ceil(events.value.length / PAGE_SIZE)))
+const pageEvents = computed(() =>
+  events.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE),
+)
+
+function prevPage() { if (page.value > 1) page.value-- }
+function nextPage() { if (page.value < totalPages.value) page.value++ }
 
 const eventLabel: Record<DaoEvent['type'], string> = {
   AccessMinted: 'Access Sold',
@@ -12,19 +26,6 @@ const eventLabel: Record<DaoEvent['type'], string> = {
   AccessBurned: 'Access Burned',
 }
 
-function shortTs(ms: number): string {
-  if (!ms) return '—'
-  return new Date(ms).toISOString().replace('T', ' ').slice(0, 19) + ' UTC'
-}
-
-function shortAddr(addr: string | undefined): string {
-  if (!addr || addr === 'undefined') return '—'
-  return addr.slice(0, 10) + '…' + addr.slice(-6)
-}
-
-function explorerUrl(digest: string): string {
-  return `https://suiscan.xyz/testnet/tx/${digest}`
-}
 </script>
 
 <template>
@@ -38,14 +39,23 @@ function explorerUrl(digest: string): string {
 
     <p v-if="error" class="dao-muted">{{ error }}</p>
 
-    <DataTable v-if="events.length || loading" :empty="'No events'">
+    <DataTable v-if="pageEvents.length || loading" :empty="'No events'">
       <template #head>
         <th>Type</th>
-        <th>Address</th>
-        <th>Time (UTC)</th>
-        <th>Tx</th>
+        <th>
+          Address
+          <abbr class="dao-info" title="The wallet address associated with this event (recipient, creator, or initiator depending on event type). Click to view in explorer; click the copy icon to copy the full address.">?</abbr>
+        </th>
+        <th>
+          Block
+          <abbr class="dao-info" title="Sui checkpoint sequence number — equivalent to a block height in other blockchains. Each checkpoint finalizes a batch of transactions; higher numbers are more recent.">?</abbr>
+        </th>
+        <th>
+          Transaction
+          <abbr class="dao-info" title="Transaction digest — a unique identifier for the transaction that emitted this event. Click to view in explorer; click the copy icon to copy the full digest.">?</abbr>
+        </th>
       </template>
-      <tr v-for="ev in events" :key="ev.txDigest + ev.timestampMs">
+      <tr v-for="ev in pageEvents" :key="ev.txDigest">
         <td>
           <span
             class="dao-badge"
@@ -56,15 +66,28 @@ function explorerUrl(digest: string): string {
             }"
           >{{ eventLabel[ev.type] }}</span>
         </td>
-        <td class="dao-mono" style="font-size: 0.72rem">{{ shortAddr(ev.address) }}</td>
-        <td class="dao-mono" style="font-size: 0.72rem">{{ shortTs(ev.timestampMs) }}</td>
+        <td class="dao-mono" style="font-size: 0.72rem; white-space: nowrap">
+          <CopyableAddress v-if="ev.address && ev.address !== 'undefined'" :address="ev.address">
+            <ExplorerLink :href="suiExplorerUrl('account', ev.address, NETWORK)" :value="ev.address" />
+          </CopyableAddress>
+          <span v-else>—</span>
+        </td>
         <td class="dao-mono" style="font-size: 0.72rem">
-          <a :href="explorerUrl(ev.txDigest)" target="_blank" rel="noopener" style="color: var(--accent)">
-            {{ ev.txDigest.slice(0, 8) }}…
-          </a>
+          {{ ev.checkpoint ? '#' + ev.checkpoint : '—' }}
+        </td>
+        <td class="dao-mono" style="font-size: 0.72rem; white-space: nowrap">
+          <CopyableAddress :address="ev.txDigest" label="Copy transaction">
+            <ExplorerLink :href="suiExplorerUrl('txblock', ev.txDigest, NETWORK)" :value="ev.txDigest" />
+          </CopyableAddress>
         </td>
       </tr>
     </DataTable>
     <p v-else-if="!loading" class="dao-placeholder">No events found.</p>
+
+    <div v-if="totalPages > 1" class="dao-pagination">
+      <button class="dao-toolbar__btn" :disabled="page === 1" @click="prevPage">← Prev</button>
+      <span class="dao-muted" style="font-size: 0.78rem">Page {{ page }} / {{ totalPages }}</span>
+      <button class="dao-toolbar__btn" :disabled="page === totalPages" @click="nextPage">Next →</button>
+    </div>
   </div>
 </template>

package/src/tabs/OverviewTab.vue

@@ -5,19 +5,15 @@ import AmountCell from '../components/AmountCell.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
 import { useTreasury } from '../composables/useTreasury.js'
 import { useDaoEvents } from '../composables/useDaoEvents.js'
+import { useGates } from '../composables/useGates.js'
+import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import { NETWORK } from '../config.js'
 import type { DaoEvent } from '../composables/useDaoEvents.js'
 
 const { config } = usePlatformConfig()
 const { balance } = useTreasury(() => config.value?.treasury ?? null)
 const { events, loading: eventsLoading } = useDaoEvents(12)
-
-function timeAgo(ms: number): string {
-  const s = Math.floor((Date.now() - ms) / 1000)
-  if (s < 5) return 'just now'
-  if (s < 60) return `${s}s ago`
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`
-  return `${Math.floor(s / 3600)}h ago`
-}
+const { gates, loading: gatesLoading } = useGates()
 
 const eventLabel: Record<DaoEvent['type'], string> = {
   AccessMinted: 'Access sold',
@@ -29,6 +25,9 @@ const eventLabel: Record<DaoEvent['type'], string> = {
 const commissionPct = computed(() =>
   config.value ? (config.value.commissionBps / 100).toFixed(2) + '%' : '—',
 )
+
+const accessesMinted = computed(() => events.value.filter((e) => e.type === 'AccessMinted').length)
+const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'AccessConsumed').length)
 </script>
 
 <template>
@@ -44,31 +43,26 @@ const commissionPct = computed(() =>
           <span class="dao-stat-grid__value dao-mono">{{ commissionPct }}</span>
 
           <span class="dao-stat-grid__label">Treasury address</span>
-          <span
-            class="dao-stat-grid__value dao-mono"
-            style="font-size: 0.7rem; word-break: break-all; text-align: left"
-            :title="config?.treasury"
-          >
-            {{ config?.treasury ? config.treasury.slice(0, 10) + '…' + config.treasury.slice(-6) : '—' }}
+          <span class="dao-stat-grid__value" style="text-align: left">
+            <CopyableAddress v-if="config?.treasury" :address="config.treasury">
+              <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
+            </CopyableAddress>
+            <span v-else class="dao-mono" style="font-size: 0.7rem">—</span>
           </span>
         </div>
       </Panel>
 
-      <Panel title="Platform Stats">
+      <Panel title="Platform Activity">
         <div class="dao-stat-grid">
-          <span class="dao-stat-grid__label">Strategy NAV</span>
-          <span class="dao-stat-grid__value dao-muted">—</span>
+          <span class="dao-stat-grid__label">Active gates</span>
+          <span class="dao-stat-grid__value dao-mono">{{ gatesLoading ? '…' : gates.length }}</span>
 
-          <span class="dao-stat-grid__label">Buyback/burn</span>
-          <span class="dao-stat-grid__value dao-muted">—</span>
+          <span class="dao-stat-grid__label">Accesses minted</span>
+          <span class="dao-stat-grid__value dao-mono">{{ accessesMinted || '—' }}</span>
 
-          <span class="dao-stat-grid__label">Fee distributor</span>
-          <span class="dao-stat-grid__value dao-muted">—</span>
+          <span class="dao-stat-grid__label">Accesses consumed</span>
+          <span class="dao-stat-grid__value dao-mono">{{ accessesConsumed || '—' }}</span>
         </div>
-        <p class="dao-muted" style="margin: 8px 0 0; font-size: 0.72rem">
-          Strategy NAV, buyback and fee distribution data will appear here when
-          <code>vault_core</code> and <code>vault_fee_distributor</code> are deployed.
-        </p>
       </Panel>
     </div>
 
@@ -76,10 +70,10 @@ const commissionPct = computed(() =>
     <Panel title="Recent Activity">
       <p v-if="eventsLoading" class="dao-muted" style="margin: 0">Loading events…</p>
       <ul v-else-if="events.length" class="dao-feed">
-        <li v-for="ev in events" :key="ev.txDigest + ev.timestampMs" class="dao-feed__item">
+        <li v-for="ev in events" :key="ev.txDigest" class="dao-feed__item">
           <span class="dao-feed__dot" />
           <span class="dao-feed__type">{{ eventLabel[ev.type] }}</span>
-          <span class="dao-feed__time">{{ timeAgo(ev.timestampMs) }}</span>
+          <span class="dao-feed__time">ckpt {{ ev.checkpoint ?? '?' }}</span>
         </li>
       </ul>
       <p v-else class="dao-placeholder">No recent events.</p>

package/src/tabs/TreasuryTab.vue

@@ -6,6 +6,8 @@ import DataTable from '../components/DataTable.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
 import { useTreasury } from '../composables/useTreasury.js'
 import { useGates } from '../composables/useGates.js'
+import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import { NETWORK } from '../config.js'
 
 const { config, loading: cfgLoading, error: cfgErr } = usePlatformConfig()
 const { balance } = useTreasury(() => config.value?.treasury ?? null)
@@ -19,15 +21,11 @@ function formatPrice(mist: bigint): string {
   const n = Number(mist) / 1e9
   return n >= 0.0001 ? n.toFixed(4) + ' SUI' : n.toFixed(9).replace(/0+$/, '') + ' SUI'
 }
-
-function shortDate(ms: number): string {
-  return ms ? new Date(ms).toISOString().slice(0, 10) : '—'
-}
 </script>
 
 <template>
   <div style="display: flex; flex-direction: column; gap: 10px">
-    <Panel title="Commission Configuration">
+    <Panel title="Treasury">
       <p v-if="cfgLoading" class="dao-muted">Loading…</p>
       <p v-else-if="cfgErr" class="dao-muted">{{ cfgErr }}</p>
       <template v-else-if="config">
@@ -35,40 +33,42 @@ function shortDate(ms: number): string {
           <span class="dao-stat-grid__label">Commission rate</span>
           <span class="dao-stat-grid__value dao-mono">{{ commissionPct }} ({{ config.commissionBps }} bps)</span>
 
-          <span class="dao-stat-grid__label">Treasury address</span>
-          <span class="dao-stat-grid__value dao-mono" style="font-size: 0.72rem; text-align: left; word-break: break-all">
-            {{ config.treasury }}
-          </span>
-
           <span class="dao-stat-grid__label">Current balance</span>
           <AmountCell class="dao-stat-grid__value" :mist="balance" />
+
+          <span class="dao-stat-grid__label">Treasury address</span>
+          <span class="dao-stat-grid__value" style="text-align: left">
+            <CopyableAddress :address="config.treasury">
+              <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
+            </CopyableAddress>
+          </span>
         </div>
       </template>
       <p v-else class="dao-muted">PlatformConfig not loaded.</p>
     </Panel>
 
-    <Panel title="Fee Distribution">
-      <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
-        Fee distributor data (buyback/burn ratios, distribution history) will appear here when
-        <code>vault_fee_distributor</code> is deployed.
-      </p>
-    </Panel>
-
     <Panel title="Community Gates">
       <p v-if="gatesLoading" class="dao-muted">Loading gates…</p>
       <DataTable v-else-if="gates.length" :empty="'No gates found'">
         <template #head>
           <th>Gate name</th>
           <th>Price</th>
-          <th>Created</th>
+          <th>
+            Block
+            <abbr class="dao-info" title="Sui checkpoint sequence number at which this gate was created. Equivalent to a block height in other blockchains.">?</abbr>
+          </th>
           <th>Object ID</th>
         </template>
         <tr v-for="gate in gates" :key="gate.id">
           <td>{{ gate.name }}</td>
           <td class="dao-amount">{{ formatPrice(gate.price) }}</td>
-          <td class="dao-mono" style="font-size: 0.72rem">{{ shortDate(gate.timestampMs) }}</td>
-          <td class="dao-mono" style="font-size: 0.7rem">
-            {{ gate.id.slice(0, 10) }}…{{ gate.id.slice(-6) }}
+          <td class="dao-mono" style="font-size: 0.72rem">
+            {{ gate.checkpoint ? '#' + gate.checkpoint : '—' }}
+          </td>
+          <td class="dao-mono" style="font-size: 0.7rem; white-space: nowrap">
+            <CopyableAddress :address="gate.id" label="Copy object ID">
+              <ExplorerLink :href="suiExplorerUrl('object', gate.id, NETWORK)" :value="gate.id" />
+            </CopyableAddress>
           </td>
         </tr>
       </DataTable>