@meddleware/access-gate-ui 0.1.1 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/access-gate-ui",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "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 <dev@meddleware.co.uk>",
   "license": "0BSD",
@@ -9,6 +9,17 @@
     "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",
@@ -28,9 +39,10 @@
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/ui": "^0.1.6",
-    "@meddleware/nft-gate-client": "^0.0.5",
-    "@mysten/sui": "~2.17.0",
-    "@mysten/wallet-standard": "~0.19.9",
+    "@meddleware/nft-gate-client": "^0.0.6",
+    "@meddleware/wallet-adapter": "^0.0.3",
+    "@mysten/sui": "^2.28.0",
+    "@mysten/wallet-standard": "^0.20.0",
     "vue": "^3.5.40"
   },
   "devDependencies": {

package/src/App.vue

@@ -1,56 +1,22 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { AppHeader, AppFooter, ColorModeControl, UiButton, UiNotice, useColorMode } 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'
+import AccessGateView from './components/AccessGateView.vue'
 
-const isEmbedded = new URLSearchParams(window.location.search).has('embedded')
 const { mode, set } = useColorMode('dark')
-
-type Tab = 'create' | 'gates'
-const activeTab = ref<Tab>('gates')
-
 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="app" :class="{ 'app--embedded': isEmbedded }">
-    <AppHeader v-if="!isEmbedded" variant="dark">
+  <div class="app">
+    <AppHeader variant="dark">
       <template #brand>
         <span>Access Gate</span>
       </template>
@@ -60,7 +26,7 @@ function onCreated(): void {
           <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>
@@ -68,39 +34,9 @@ function onCreated(): void {
       </template>
     </AppHeader>
 
-    <div class="page">
-      <p class="sub">Create and manage on-chain access gates on Sui ({{ NETWORK }}).</p>
+    <AccessGateView />
 
-      <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>
-
-    <AppFooter v-if="!isEmbedded" />
+    <AppFooter />
   </div>
 </template>
 
@@ -111,53 +47,8 @@ function onCreated(): void {
   flex-direction: column;
 }
 
-.app--embedded {
-  min-height: 100%;
-}
-
-.page {
-  max-width: 720px;
-  margin: 0 auto;
-  padding: 2rem 1.25rem 4rem;
-  flex: 1;
-}
-
-.app--embedded .page {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.sub {
-  color: var(--muted);
-  margin: 0.25rem 0 1.25rem;
-}
-
 .addr {
   font-family: monospace;
   font-size: 0.9rem;
 }
-
-.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/AccessGateView.vue

@@ -0,0 +1,126 @@
+<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 { WalletGuard } from '@meddleware/wallet-adapter'
+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>
+
+    <WalletGuard v-else message="Connect a Sui wallet to create and manage your access gates.">
+      <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>
+    </WalletGuard>
+  </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/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,
   }
 }