@meddleware/dao-ui 0.1.0

package/src/config.ts

@@ -0,0 +1,28 @@
+export type Network = 'testnet' | 'mainnet'
+
+export const NETWORK: Network = (import.meta.env.VITE_NETWORK as Network) || 'testnet'
+
+export const RPC_URLS: Record<Network, string> = {
+  testnet: import.meta.env.VITE_RPC_TESTNET || 'https://fullnode.testnet.sui.io:443',
+  mainnet: import.meta.env.VITE_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
+}
+
+/** Published access_gate package ID. Governs which events/objects are queried. */
+export const ACCESS_GATE_PACKAGE_ID: Record<Network, string> = {
+  testnet:
+    import.meta.env.VITE_ACCESS_GATE_PACKAGE_ID_TESTNET ||
+    '0x0bedd0b27d993d3292ca6a5315f7562de8bc0ff3752b445b4c53252c76f2d20d',
+  mainnet: import.meta.env.VITE_ACCESS_GATE_PACKAGE_ID_MAINNET || '',
+}
+
+/** PlatformConfig shared object ID — holds commission_bps + treasury address. */
+export const PLATFORM_CONFIG_ID: Record<Network, string> = {
+  testnet:
+    import.meta.env.VITE_PLATFORM_CONFIG_ID_TESTNET ||
+    '0x7c5aed0ce7f29a4dfb60657858df31c12410a67098b4bcdd1d8cb1e531be4884',
+  mainnet: import.meta.env.VITE_PLATFORM_CONFIG_ID_MAINNET || '',
+}
+
+export const PACKAGE_ID = ACCESS_GATE_PACKAGE_ID[NETWORK]
+export const CONFIG_ID = PLATFORM_CONFIG_ID[NETWORK]
+export const RPC_URL = RPC_URLS[NETWORK]

package/src/env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_NETWORK?: string
+  readonly VITE_RPC_TESTNET?: string
+  readonly VITE_RPC_MAINNET?: string
+  readonly VITE_ACCESS_GATE_PACKAGE_ID_TESTNET?: string
+  readonly VITE_ACCESS_GATE_PACKAGE_ID_MAINNET?: string
+  readonly VITE_PLATFORM_CONFIG_ID_TESTNET?: string
+  readonly VITE_PLATFORM_CONFIG_ID_MAINNET?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default as DaoView } from './DaoView.vue'

package/src/main.ts

@@ -0,0 +1,7 @@
+import '@meddleware/design-tokens/tokens.css'
+import '@meddleware/ui/base.css'
+import './styles/qt.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/styles/qt.css

@@ -0,0 +1,356 @@
+/*
+ * Desktop-application (Bitcoin-Qt / Monero-Qt) aesthetic layer.
+ * Layered on top of @meddleware/design-tokens — uses CSS vars from the token set.
+ * Applied globally via main.ts; does not affect host documents when DaoView is embedded
+ * because the overrides are scoped to .dao-view and its descendants.
+ */
+
+/* ── Layout shell ────────────────────────────────────────────────────────── */
+
+.dao-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  font-size: 0.875rem;
+  color: var(--text);
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────────────────── */
+
+.dao-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  flex-shrink: 0;
+}
+
+.dao-toolbar__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  height: 26px;
+  font-size: 0.8rem;
+  background: var(--lift);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s;
+}
+
+.dao-toolbar__btn:hover {
+  background: var(--surface);
+  border-color: var(--accent);
+}
+
+.dao-toolbar__sep {
+  width: 1px;
+  height: 18px;
+  background: var(--border);
+  margin: 0 4px;
+}
+
+/* ── Tab bar ─────────────────────────────────────────────────────────────── */
+
+.dao-tabs {
+  display: flex;
+  align-items: flex-end;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  flex-shrink: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.dao-tabs::-webkit-scrollbar { display: none; }
+
+.dao-tab {
+  padding: 7px 16px 6px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.1s, border-color 0.1s;
+  letter-spacing: 0.01em;
+}
+
+.dao-tab:hover {
+  color: var(--text);
+}
+
+.dao-tab--active {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+}
+
+/* ── Tab content area ────────────────────────────────────────────────────── */
+
+.dao-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  background: var(--bg);
+}
+
+/* ── Status bar ──────────────────────────────────────────────────────────── */
+
+.dao-statusbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 3px 12px;
+  font-size: 0.72rem;
+  color: var(--muted);
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+}
+
+.dao-statusbar__dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin-right: 4px;
+  flex-shrink: 0;
+}
+
+.dao-statusbar__dot--ok    { background: var(--ok); }
+.dao-statusbar__dot--warn  { background: #b08d2a; }
+.dao-statusbar__dot--error { background: var(--danger); }
+
+.dao-statusbar__item {
+  display: flex;
+  align-items: center;
+}
+
+.dao-statusbar__sep {
+  color: var(--border);
+}
+
+/* ── Panel ───────────────────────────────────────────────────────────────── */
+
+.dao-panel {
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.dao-panel__head {
+  padding: 5px 10px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--lift);
+  border-bottom: 1px solid var(--border);
+}
+
+.dao-panel__body {
+  padding: 10px;
+}
+
+/* ── Data table ──────────────────────────────────────────────────────────── */
+
+.dao-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8rem;
+}
+
+.dao-table th {
+  text-align: left;
+  padding: 5px 8px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.dao-table td {
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+
+.dao-table tr:last-child td {
+  border-bottom: none;
+}
+
+.dao-table tr:nth-child(even) td {
+  background: var(--lift);
+}
+
+/* ── Amount cells (monospace, right-aligned) ─────────────────────────────── */
+
+.dao-amount {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.dao-amount--muted {
+  color: var(--muted);
+}
+
+/* ── Stat grid (Overview key/value pairs) ────────────────────────────────── */
+
+.dao-stat-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 3px 12px;
+  font-size: 0.8rem;
+}
+
+.dao-stat-grid__label {
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.dao-stat-grid__value {
+  font-family: var(--font-mono);
+  color: var(--text);
+  text-align: right;
+}
+
+/* ── Two-column overview layout ──────────────────────────────────────────── */
+
+.dao-overview-cols {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+@media (max-width: 640px) {
+  .dao-overview-cols { grid-template-columns: 1fr; }
+}
+
+/* ── Proposal progress bar ───────────────────────────────────────────────── */
+
+.dao-progress {
+  height: 6px;
+  background: var(--lift);
+  border: 1px solid var(--border);
+  border-radius: 1px;
+  overflow: hidden;
+  margin: 3px 0;
+}
+
+.dao-progress__fill {
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.3s ease;
+}
+
+/* ── Activity feed ───────────────────────────────────────────────────────── */
+
+.dao-feed {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.78rem;
+}
+
+.dao-feed__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--border);
+  color: var(--muted);
+}
+
+.dao-feed__item:last-child {
+  border-bottom: none;
+}
+
+.dao-feed__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
+.dao-feed__type {
+  color: var(--text);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.dao-feed__time {
+  margin-left: auto;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+}
+
+/* ── Misc ────────────────────────────────────────────────────────────────── */
+
+.dao-mono {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+}
+
+.dao-muted {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.dao-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 2px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.dao-badge--active { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
+.dao-badge--closed { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
+.dao-badge--pending { background: color-mix(in srgb, #b08d2a 20%, transparent); color: #b08d2a; }
+
+.dao-section-title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 0 0 6px;
+}
+
+.dao-notice {
+  padding: 8px 10px;
+  border: 1px solid #b08d2a;
+  border-radius: 2px;
+  background: color-mix(in srgb, #b08d2a 10%, transparent);
+  color: #b08d2a;
+  font-size: 0.78rem;
+  margin-bottom: 10px;
+}
+
+.dao-placeholder {
+  text-align: center;
+  padding: 24px 16px;
+  color: var(--muted);
+  font-size: 0.8rem;
+}

package/src/tabs/GovernanceTab.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Panel from '../components/Panel.vue'
+import { usePlatformConfig } from '../composables/usePlatformConfig.js'
+
+const { config } = usePlatformConfig()
+
+const commissionPct = computed(() =>
+  config.value ? (config.value.commissionBps / 100).toFixed(2) + '%' : '—',
+)
+</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">
+        <span class="dao-stat-grid__label">Commission rate</span>
+        <span class="dao-stat-grid__value dao-mono">{{ commissionPct }}</span>
+
+        <span class="dao-stat-grid__label">Max commission cap</span>
+        <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>
+      </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.
+      </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>
+    </Panel>
+  </div>
+</template>

package/src/tabs/HistoryTab.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import DataTable from '../components/DataTable.vue'
+import { useDaoEvents } from '../composables/useDaoEvents.js'
+import type { DaoEvent } from '../composables/useDaoEvents.js'
+
+const { events, loading, error, reload } = useDaoEvents(50)
+
+const eventLabel: Record<DaoEvent['type'], string> = {
+  AccessMinted: 'Access Sold',
+  AccessConsumed: 'Access Used',
+  GateCreated: 'Gate Created',
+  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>
+  <div>
+    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px">
+      <p class="dao-section-title" style="margin: 0">On-Chain Events</p>
+      <button class="dao-toolbar__btn" :disabled="loading" @click="reload">
+        {{ loading ? 'Loading…' : 'Refresh' }}
+      </button>
+    </div>
+
+    <p v-if="error" class="dao-muted">{{ error }}</p>
+
+    <DataTable v-if="events.length || loading" :empty="'No events'">
+      <template #head>
+        <th>Type</th>
+        <th>Address</th>
+        <th>Time (UTC)</th>
+        <th>Tx</th>
+      </template>
+      <tr v-for="ev in events" :key="ev.txDigest + ev.timestampMs">
+        <td>
+          <span
+            class="dao-badge"
+            :class="{
+              'dao-badge--active': ev.type === 'AccessMinted',
+              'dao-badge--pending': ev.type === 'GateCreated',
+              'dao-badge--closed': ev.type === 'AccessConsumed' || ev.type === 'AccessBurned',
+            }"
+          >{{ 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">
+          <a :href="explorerUrl(ev.txDigest)" target="_blank" rel="noopener" style="color: var(--accent)">
+            {{ ev.txDigest.slice(0, 8) }}…
+          </a>
+        </td>
+      </tr>
+    </DataTable>
+    <p v-else-if="!loading" class="dao-placeholder">No events found.</p>
+  </div>
+</template>

package/src/tabs/OverviewTab.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Panel from '../components/Panel.vue'
+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 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 eventLabel: Record<DaoEvent['type'], string> = {
+  AccessMinted: 'Access sold',
+  AccessConsumed: 'Access used',
+  GateCreated: 'Gate created',
+  AccessBurned: 'Access burned',
+}
+
+const commissionPct = computed(() =>
+  config.value ? (config.value.commissionBps / 100).toFixed(2) + '%' : '—',
+)
+</script>
+
+<template>
+  <div class="dao-overview-cols">
+    <!-- Left: treasury summary -->
+    <div style="display: flex; flex-direction: column; gap: 8px">
+      <Panel title="Treasury Balance">
+        <div class="dao-stat-grid">
+          <span class="dao-stat-grid__label">SUI balance</span>
+          <AmountCell class="dao-stat-grid__value" :mist="balance" />
+
+          <span class="dao-stat-grid__label">Commission rate</span>
+          <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>
+        </div>
+      </Panel>
+
+      <Panel title="Platform Stats">
+        <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">Buyback/burn</span>
+          <span class="dao-stat-grid__value dao-muted">—</span>
+
+          <span class="dao-stat-grid__label">Fee distributor</span>
+          <span class="dao-stat-grid__value dao-muted">—</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>
+
+    <!-- Right: recent activity -->
+    <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">
+          <span class="dao-feed__dot" />
+          <span class="dao-feed__type">{{ eventLabel[ev.type] }}</span>
+          <span class="dao-feed__time">{{ timeAgo(ev.timestampMs) }}</span>
+        </li>
+      </ul>
+      <p v-else class="dao-placeholder">No recent events.</p>
+    </Panel>
+  </div>
+</template>

package/src/tabs/ProposalsTab.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import ProposalRow from '../components/ProposalRow.vue'
+import { useProposals } from '../composables/useProposals.js'
+import { useEpoch } from '../composables/useEpoch.js'
+
+const { proposals } = useProposals()
+const { epoch } = useEpoch()
+</script>
+
+<template>
+  <div>
+    <div class="dao-notice">
+      Governance proposals are currently scaffolded with illustrative data.
+      On-chain voting and contributions will be enabled when <code>vault_dao</code> is deployed.
+    </div>
+
+    <p class="dao-section-title">Active &amp; Pending Proposals</p>
+    <ProposalRow
+      v-for="p in proposals"
+      :key="p.id"
+      :proposal="p"
+      :current-epoch="epoch"
+    />
+  </div>
+</template>