@meddleware/access-gate-ui 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/access-gate-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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",
@@ -38,10 +38,10 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
-    "@meddleware/ui": "^0.1.6",
+    "@meddleware/ui": "^0.1.9",
     "@meddleware/nft-gate-client": "^0.0.6",
-    "@meddleware/wallet-adapter": "^0.0.4",
-    "@mysten/sui": "^2.28.0",
+    "@meddleware/wallet-adapter": "^0.0.5",
+    "@mysten/sui": "^2.30.0",
     "@mysten/wallet-standard": "^0.20.0",
     "vue": "^3.5.40"
   },

package/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 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 { AppHeader, AppFooter, ColorModeControl, UiButton, CopyableAddress, useColorMode } from '@meddleware/ui'
 import { useWallet } from './wallet.js'
 import AccessGateView from './components/AccessGateView.vue'
 
@@ -22,7 +22,7 @@ async function onConnect(): Promise<void> {
       </template>
       <template #actions>
         <template v-if="account">
-          <span class="addr">{{ account.address.slice(0, 8) }}…{{ account.address.slice(-4) }}</span>
+          <CopyableAddress :address="account.address" />
           <UiButton variant="ghost" @click="disconnect">Disconnect</UiButton>
         </template>
         <template v-else>
@@ -47,8 +47,4 @@ async function onConnect(): Promise<void> {
   flex-direction: column;
 }
 
-.addr {
-  font-family: monospace;
-  font-size: 0.9rem;
-}
 </style>

package/src/gates.ts

@@ -13,12 +13,12 @@ export const PACKAGE_ID = ACCESS_GATE_PACKAGE_ID[NETWORK]
 
 /** List every gate the given operator address administers (via their owned AdminCaps). */
 export async function listMyGates(owner: string): Promise<OwnedGate[]> {
-  return fetchOwnedGates(getSuiClient(NETWORK), owner, PACKAGE_ID)
+  return fetchOwnedGates(getSuiClient(), owner, PACKAGE_ID)
 }
 
 /** Re-read one gate's on-chain state (after a management tx), merging back its known adminCapId. */
 export async function refreshGate(gate: OwnedGate): Promise<OwnedGate | null> {
-  const fresh = await fetchGate(getSuiClient(NETWORK), gate.gateId)
+  const fresh = await fetchGate(getSuiClient(), gate.gateId)
   return fresh ? { ...fresh, adminCapId: gate.adminCapId } : null
 }
 
@@ -34,7 +34,7 @@ export function adminContext(gate: OwnedGate): GateAdminContext {
  * @throws {Error} if no wallet is connected or the wallet rejects/execution fails.
  */
 export async function executeTx(tx: Transaction): Promise<string> {
-  const executor = await buildExecutor(NETWORK)
+  const executor = await buildExecutor()
   const { digest } = await executor.signAndExecute(tx)
   await executor.waitForTransaction(digest).catch(() => {})
   return digest

package/src/wallet.ts

@@ -1,28 +1,29 @@
 // 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).
+// RPC URL is resolved from the runtime useNetwork() singleton so network switching
+// in the dashboard propagates immediately to all tool views. 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,
+  useNetwork,
 } from '@meddleware/wallet-adapter'
 import type { Executor } from '@meddleware/wallet-adapter'
-import type { SuiNetwork } from './config.js'
-import { RPC_URLS } from './config.js'
 
 export type { Executor }
 
-/** 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])
+const { network, rpcUrl } = useNetwork()
+
+/** Memoised Sui gRPC client for the currently selected network. */
+export function getSuiClient() {
+  return getSuiClientBase(network.value, rpcUrl.value)
 }
 
-/** 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])
+/** Build a transaction executor bound to the connected wallet and current network RPC URL. */
+export function buildExecutor(): Promise<Executor> {
+  return buildExecutorBase(network.value, rpcUrl.value)
 }
 
 /**