@meddleware/access-gate-ui 0.1.0 → 0.1.3

package/package.json

@@ -1,14 +1,25 @@
 {
   "name": "@meddleware/access-gate-ui",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Operator console for creating and managing on-chain Sui access gates — create gates, configure settings, airdrop NFTs, and freeze gates via a wallet-connected SPA.",
-  "author": "MeddleWare <meddleware@proton.me>",
+  "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/meddleware-org/access-gate-ui.git"
   },
   "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.vue"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "src",
     "index.html",
@@ -26,11 +37,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.0",
-    "@meddleware/ui": "^0.1.0",
-    "@meddleware/nft-gate-client": "^0.0.3",
-    "@mysten/sui": "~2.17.0",
-    "@mysten/wallet-standard": "~0.19.9",
+    "@meddleware/design-tokens": "^0.1.2",
+    "@meddleware/ui": "^0.1.6",
+    "@meddleware/nft-gate-client": "^0.0.6",
+    "@meddleware/wallet-adapter": "^0.0.2",
+    "@mysten/sui": "^2.28.0",
+    "@mysten/wallet-standard": "^0.20.0",
     "vue": "^3.5.40"
   },
   "devDependencies": {

package/src/App.vue

@@ -1,160 +1,54 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { UiButton, UiNotice } from '@meddleware/ui'
-import type { OwnedGate } from '@meddleware/nft-gate-client'
-import { NETWORK } from './config.js'
-import { PACKAGE_ID, listMyGates } from './gates.js'
+// Standalone shell for the Access Gate SPA: app header + footer wrapping the core tool view.
+// The core UI lives in AccessGateView.vue (also exported for inline embedding in the dashboard).
+import { AppHeader, AppFooter, ColorModeControl, UiButton, useColorMode } from '@meddleware/ui'
 import { useWallet } from './wallet.js'
-import CreateGateForm from './components/CreateGateForm.vue'
-import GateList from './components/GateList.vue'
-
-type Tab = 'create' | 'gates'
-const activeTab = ref<Tab>('gates')
+import AccessGateView from './components/AccessGateView.vue'
 
+const { mode, set } = useColorMode('dark')
 const { wallets, account, connect, disconnect } = useWallet()
 
-const gates = ref<OwnedGate[]>([])
-const loadingGates = ref(false)
-const loadError = ref<string | null>(null)
-
-const deployed = PACKAGE_ID !== ''
-
-async function reloadGates(): Promise<void> {
-  if (!account.value || !deployed) return
-  loadingGates.value = true
-  loadError.value = null
-  try {
-    gates.value = await listMyGates(account.value.address)
-  } catch (e) {
-    loadError.value = e instanceof Error ? e.message : String(e)
-  } finally {
-    loadingGates.value = false
-  }
-}
-
-async function onConnectFirst(): Promise<void> {
+async function onConnect(): Promise<void> {
   const w = wallets.value[0]
-  if (!w) return
-  await connect(w)
-  await reloadGates()
-}
-
-function onCreated(): void {
-  activeTab.value = 'gates'
-  void reloadGates()
+  if (w) await connect(w)
 }
 </script>
 
 <template>
-  <div class="page">
-    <header class="head">
-      <div>
-        <h1>Access Gate Operator</h1>
-        <p class="sub">Create and manage on-chain access gates on Sui ({{ NETWORK }}).</p>
-      </div>
-      <div class="wallet">
+  <div class="app">
+    <AppHeader variant="dark">
+      <template #brand>
+        <span>Access Gate</span>
+      </template>
+      <template #actions>
         <template v-if="account">
           <span class="addr">{{ account.address.slice(0, 8) }}…{{ account.address.slice(-4) }}</span>
           <UiButton variant="ghost" @click="disconnect">Disconnect</UiButton>
         </template>
         <template v-else>
-          <UiButton :disabled="!wallets.length" @click="onConnectFirst">
+          <UiButton :disabled="!wallets.length" @click="onConnect">
             {{ wallets.length ? 'Connect wallet' : 'No wallet detected' }}
           </UiButton>
         </template>
-      </div>
-    </header>
-
-    <UiNotice v-if="!deployed" type="error">
-      The access_gate contract is not deployed on {{ NETWORK }}. Switch to a supported network.
-    </UiNotice>
-
-    <template v-else-if="account">
-      <nav class="tabs" aria-label="Sections">
-        <button type="button" class="tab" :class="{ active: activeTab === 'gates' }" @click="activeTab = 'gates'; reloadGates()">
-          My gates
-        </button>
-        <button type="button" class="tab" :class="{ active: activeTab === 'create' }" @click="activeTab = 'create'">
-          Create gate
-        </button>
-      </nav>
-
-      <UiNotice v-if="loadError" type="error">{{ loadError }}</UiNotice>
-
-      <section v-if="activeTab === 'gates'">
-        <GateList :gates="gates" :loading="loadingGates" @changed="reloadGates" />
-      </section>
-      <section v-else>
-        <CreateGateForm :address="account.address" @created="onCreated" />
-      </section>
-    </template>
+        <ColorModeControl :model-value="mode" @update:model-value="set" />
+      </template>
+    </AppHeader>
 
-    <UiNotice v-else type="info">
-      Connect a Sui wallet to create and manage your access gates.
-    </UiNotice>
+    <AccessGateView />
 
-    <footer class="foot">
-      <p>© MeddleWare · <a href="https://sui.meddleware.co.uk">more SUI tools</a></p>
-    </footer>
+    <AppFooter />
   </div>
 </template>
 
 <style scoped>
-.page {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 2rem 1.25rem 4rem;
-}
-.head {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-.head h1 {
-  margin: 0;
-  font-size: 1.8rem;
-  color: var(--text);
-}
-.sub {
-  color: var(--muted);
-  margin: 0.25rem 0 0;
-}
-.wallet {
+.app {
+  min-height: 100vh;
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
+  flex-direction: column;
 }
+
 .addr {
   font-family: monospace;
   font-size: 0.9rem;
-  color: var(--text);
-}
-.tabs {
-  display: flex;
-  gap: 0.25rem;
-  margin: 1.25rem 0 1rem;
-  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(--mw-accent-500, var(--text));
-  color: var(--text);
-  font-weight: 600;
-}
-.foot {
-  margin-top: 3rem;
-  font-size: 0.85rem;
-  color: var(--muted);
 }
 </style>

package/src/components/AccessGateView.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+// Core Access Gate tool UI (list + create + manage gates), free of any app shell.
+// Rendered standalone by access-gate-ui's App.vue and inline by the dashboard. Wallet state
+// comes from the shared @meddleware/wallet-adapter singleton (via ./wallet.js): connecting here
+// or in any other inline tool view (or the dashboard header) reflects everywhere.
+//
+// Gate loading is driven by watching the connected account, so it works whether the connection
+// is made from this app's own header (standalone) or the dashboard's shared control (embedded).
+import { ref, watch } from 'vue'
+import { UiNotice } from '@meddleware/ui'
+import type { OwnedGate } from '@meddleware/nft-gate-client'
+import { NETWORK } from '../config.js'
+import { PACKAGE_ID, listMyGates } from '../gates.js'
+import { useWallet } from '../wallet.js'
+import CreateGateForm from './CreateGateForm.vue'
+import GateList from './GateList.vue'
+
+type Tab = 'create' | 'gates'
+const activeTab = ref<Tab>('gates')
+
+const { account } = useWallet()
+
+const gates = ref<OwnedGate[]>([])
+const loadingGates = ref(false)
+const loadError = ref<string | null>(null)
+
+const deployed = PACKAGE_ID !== ''
+
+async function reloadGates(): Promise<void> {
+  if (!account.value || !deployed) return
+  loadingGates.value = true
+  loadError.value = null
+  try {
+    gates.value = await listMyGates(account.value.address)
+  } catch (e) {
+    loadError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loadingGates.value = false
+  }
+}
+
+// Load (and clear) gates as the shared wallet connects/disconnects — independent of where the
+// connect action originates.
+watch(
+  () => account.value?.address ?? null,
+  (addr) => {
+    if (addr) void reloadGates()
+    else gates.value = []
+  },
+  { immediate: true },
+)
+
+function onCreated(): void {
+  activeTab.value = 'gates'
+  void reloadGates()
+}
+</script>
+
+<template>
+  <div class="page">
+    <p class="sub">Create and manage on-chain access gates on Sui ({{ NETWORK }}).</p>
+
+    <UiNotice v-if="!deployed" type="error">
+      The access_gate contract is not deployed on {{ NETWORK }}. Switch to a supported network.
+    </UiNotice>
+
+    <template v-else-if="account">
+      <nav class="tabs" aria-label="Sections">
+        <button type="button" class="tab" :class="{ active: activeTab === 'gates' }" @click="activeTab = 'gates'; reloadGates()">
+          My gates
+        </button>
+        <button type="button" class="tab" :class="{ active: activeTab === 'create' }" @click="activeTab = 'create'">
+          Create gate
+        </button>
+      </nav>
+
+      <UiNotice v-if="loadError" type="error">{{ loadError }}</UiNotice>
+
+      <section v-if="activeTab === 'gates'">
+        <GateList :gates="gates" :loading="loadingGates" @changed="reloadGates" />
+      </section>
+      <section v-else>
+        <CreateGateForm :address="account.address" @created="onCreated" />
+      </section>
+    </template>
+
+    <UiNotice v-else type="info">
+      Connect a Sui wallet to create and manage your access gates.
+    </UiNotice>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 2rem 1.25rem 4rem;
+  flex: 1;
+}
+
+.sub {
+  color: var(--muted);
+  margin: 0.25rem 0 1.25rem;
+}
+
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin: 0 0 1rem;
+  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>

package/src/components/GateCard.vue

@@ -43,6 +43,13 @@ function priceLabel(mist: bigint): string {
 
     <div class="actions">
       <UiButton variant="ghost" @click="open = !open">{{ open ? 'Hide' : 'Manage' }}</UiButton>
+      <a
+        class="seal-link"
+        :href="`https://sui-seal.meddleware.co.uk/?gate=${gate.gateId}`"
+        target="_blank"
+        rel="noopener"
+        title="Seal-encrypt content that only this gate's pass-holders can unlock"
+      >🔒 Add unlockable content →</a>
     </div>
 
     <div v-if="open" class="manage">
@@ -97,6 +104,18 @@ function priceLabel(mist: bigint): string {
 }
 .actions {
   margin-top: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.seal-link {
+  color: var(--accent, #c0503f);
+  text-decoration: none;
+  font-size: 0.85rem;
+}
+.seal-link:hover {
+  text-decoration: underline;
 }
 .manage {
   margin-top: 0.75rem;

package/src/config.ts

@@ -11,11 +11,11 @@ const env = (import.meta as unknown as { env?: Record<string, string | undefined
 export const NETWORK: SuiNetwork = (env.VITE_NETWORK as SuiNetwork) || 'testnet'
 
 /**
- * JSON-RPC endpoint used to build + execute gate transactions and read gate state.
- * NOTE: this is JSON-RPC — the public testnet fullnode serves gRPC only, so a JSON-RPC-capable
- * endpoint is used for testnet by default.
+ * gRPC-web endpoint used to build + execute gate transactions and read gate state. The Sui SDK's
+ * JSON-RPC client is deprecated, so this must be a gRPC-web-capable endpoint (the Mysten public
+ * fullnodes serve gRPC-web at :443 via the browser Fetch transport).
  */
 export const RPC_URLS: Record<SuiNetwork, string> = {
-  testnet: env.VITE_RPC_TESTNET || 'https://sui-testnet-rpc.publicnode.com',
+  testnet: env.VITE_RPC_TESTNET || 'https://fullnode.testnet.sui.io:443',
   mainnet: env.VITE_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
 }

package/src/index.ts

@@ -0,0 +1,10 @@
+// @meddleware/access-gate-ui — library entry.
+//
+// Exports the core Access Gate tool view (no app shell) for inline embedding in the dashboard.
+// The standalone SPA (App.vue + main.ts) is unaffected and still builds/deploys as before.
+//
+// Consumers must import the shared design tokens + UI base once at their entry:
+//   import '@meddleware/design-tokens/tokens.css'
+//   import '@meddleware/ui/base.css'
+
+export { default as AccessGateView } from './components/AccessGateView.vue'

package/src/wallet.ts

@@ -1,138 +1,45 @@
-// Minimal Sui wallet integration on @mysten/wallet-standard (dapp-kit is React-only).
-// Discovers wallets, connects, and adapts the connected wallet into a transaction executor.
-// Module singleton — all callers share one wallet/account state.
-import { markRaw, readonly, ref, shallowRef } from 'vue'
-import { getWallets, isWalletWithRequiredFeatureSet } from '@mysten/wallet-standard'
-import type { Wallet, WalletAccount } from '@mysten/wallet-standard'
-import { SuiJsonRpcClient } from '@mysten/sui/jsonRpc'
-import type { Transaction } from '@mysten/sui/transactions'
+// Thin access-gate-ui shim over the shared @meddleware/wallet-adapter singleton.
+//
+// The adapter is network-agnostic (RPC URL passed per call); this shim binds access-gate-ui's
+// RPC_URLS so call sites keep the one-arg ergonomics (`getSuiClient(NETWORK)` /
+// `buildExecutor(NETWORK)`). Because the adapter is a module singleton, the wallet connection is
+// shared with any other tool view rendered in the same window (e.g. the dashboard).
+import {
+  useWallet as useWalletBase,
+  getSuiClient as getSuiClientBase,
+  buildExecutor as buildExecutorBase,
+} from '@meddleware/wallet-adapter'
+import type { Executor } from '@meddleware/wallet-adapter'
 import type { SuiNetwork } from './config.js'
 import { RPC_URLS } from './config.js'
 
-const REQUIRED_FEATURES = ['standard:connect', 'sui:signTransaction'] as const
+export type { Executor }
 
-const wallets = shallowRef<Wallet[]>([])
-const currentWallet = shallowRef<Wallet | null>(null)
-const account = shallowRef<WalletAccount | null>(null)
-const connecting = ref(false)
-const error = ref<string | null>(null)
-
-const clients = new Map<SuiNetwork, SuiJsonRpcClient>()
-/** Return a memoised {@link SuiJsonRpcClient} for the network (one instance per network). */
-export function getSuiClient(network: SuiNetwork): SuiJsonRpcClient {
-  let c = clients.get(network)
-  if (!c) {
-    c = new SuiJsonRpcClient({ url: RPC_URLS[network], network })
-    clients.set(network, c)
-  }
-  return c
-}
-
-function refreshWallets(): void {
-  // markRaw: extension Wallet objects expose name/icon as ES-private-field getters
-  // that throw when accessed through a Vue reactive Proxy.
-  wallets.value = getWallets()
-    .get()
-    .filter((w) => isWalletWithRequiredFeatureSet(w, [...REQUIRED_FEATURES]))
-    .map((w) => markRaw(w))
-}
-
-let initialised = false
-function init(): void {
-  if (initialised) return
-  initialised = true
-  const api = getWallets()
-  refreshWallets()
-  api.on('register', refreshWallets)
-  api.on('unregister', refreshWallets)
-}
-
-async function connect(wallet: Wallet): Promise<void> {
-  error.value = null
-  connecting.value = true
-  try {
-    const feature = wallet.features['standard:connect'] as {
-      connect: () => Promise<{ accounts: readonly WalletAccount[] }>
-    }
-    const { accounts } = await feature.connect()
-    if (!accounts.length) throw new Error('Wallet returned no accounts.')
-    currentWallet.value = markRaw(wallet)
-    account.value = markRaw(accounts[0])
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : String(e)
-    throw e
-  } finally {
-    connecting.value = false
-  }
+/** Memoised Sui JSON-RPC client for the network, using access-gate-ui's configured RPC URL. */
+export function getSuiClient(network: SuiNetwork) {
+  return getSuiClientBase(network, RPC_URLS[network])
 }
 
-function disconnect(): void {
-  const disc = currentWallet.value?.features['standard:disconnect'] as
-    | { disconnect?: () => Promise<void> }
-    | undefined
-  void disc?.disconnect?.()
-  currentWallet.value = null
-  account.value = null
-}
-
-/** Transaction executor bound to the connected wallet: sign+execute a PTB and await finality. */
-export interface Executor {
-  address: string
-  signAndExecute(tx: Transaction): Promise<{ digest: string }>
-  waitForTransaction(digest: string): Promise<unknown>
-}
-
-/** Build an executor bound to the connected wallet + network. */
-export async function buildExecutor(network: SuiNetwork): Promise<Executor> {
-  const wallet = currentWallet.value
-  const acct = account.value
-  if (!wallet || !acct) throw new Error('Connect a wallet first.')
-  const client = getSuiClient(network)
-  const chain = `sui:${network}` as const
-
-  const signFeature = wallet.features['sui:signTransaction'] as {
-    signTransaction: (input: {
-      transaction: Transaction
-      account: WalletAccount
-      chain: `sui:${string}`
-    }) => Promise<{ bytes: string; signature: string }>
-  }
-
-  return {
-    address: acct.address,
-    async signAndExecute(tx: Transaction): Promise<{ digest: string }> {
-      const { bytes, signature } = await signFeature.signTransaction({
-        transaction: tx,
-        account: acct,
-        chain,
-      })
-      const res = await client.executeTransactionBlock({
-        transactionBlock: bytes,
-        signature,
-        options: { showEffects: true },
-      })
-      return { digest: res.digest }
-    },
-    async waitForTransaction(digest: string): Promise<unknown> {
-      return client.waitForTransaction({ digest })
-    },
-  }
+/** Build a transaction executor bound to the connected wallet + access-gate-ui's RPC URL. */
+export function buildExecutor(network: SuiNetwork): Promise<Executor> {
+  return buildExecutorBase(network, RPC_URLS[network])
 }
 
 /**
- * Wallet composable: discovers wallets, exposes reactive connection state, and provides
- * `connect` / `disconnect` / `buildExecutor`. Module singleton — all callers share one state.
+ * Wallet composable bound to access-gate-ui's network config. Delegates to the shared adapter
+ * singleton; gate management needs `sui:signTransaction` so it's requested for discovery.
  */
 export function useWallet() {
-  init()
+  const base = useWalletBase({ requiredFeatures: ['sui:signTransaction'] })
   return {
-    wallets: readonly(wallets),
-    currentWallet: readonly(currentWallet),
-    account: readonly(account),
-    connecting: readonly(connecting),
-    error: readonly(error),
-    connect,
-    disconnect,
+    wallets: base.wallets,
+    currentWallet: base.currentWallet,
+    account: base.account,
+    connecting: base.connecting,
+    error: base.error,
+    connect: base.connect,
+    disconnect: base.disconnect,
+    getSuiClient,
     buildExecutor,
   }
 }