@meddleware/access-gate-ui 0.1.0 → 0.1.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@meddleware/access-gate-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",
@@ -26,9 +26,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.0",
-    "@meddleware/ui": "^0.1.0",
-    "@meddleware/nft-gate-client": "^0.0.3",
+    "@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",
     "vue": "^3.5.40"

package/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { UiButton, UiNotice } from '@meddleware/ui'
+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'
@@ -8,6 +8,9 @@ import { useWallet } from './wallet.js'
 import CreateGateForm from './components/CreateGateForm.vue'
 import GateList from './components/GateList.vue'
 
+const isEmbedded = new URLSearchParams(window.location.search).has('embedded')
+const { mode, set } = useColorMode('dark')
+
 type Tab = 'create' | 'gates'
 const activeTab = ref<Tab>('gates')
 
@@ -46,13 +49,12 @@ function onCreated(): void {
 </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" :class="{ 'app--embedded': isEmbedded }">
+    <AppHeader v-if="!isEmbedded" 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>
@@ -62,81 +64,86 @@ function onCreated(): void {
             {{ 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>
-
-    <UiNotice v-else type="info">
-      Connect a Sui wallet to create and manage your access gates.
-    </UiNotice>
-
-    <footer class="foot">
-      <p>© MeddleWare · <a href="https://sui.meddleware.co.uk">more SUI tools</a></p>
-    </footer>
+        <ColorModeControl :model-value="mode" @update:model-value="set" />
+      </template>
+    </AppHeader>
+
+    <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>
+
+    <AppFooter v-if="!isEmbedded" />
   </div>
 </template>
 
 <style scoped>
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app--embedded {
+  min-height: 100%;
+}
+
 .page {
   max-width: 720px;
   margin: 0 auto;
   padding: 2rem 1.25rem 4rem;
+  flex: 1;
 }
-.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);
+
+.app--embedded .page {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
+
 .sub {
   color: var(--muted);
-  margin: 0.25rem 0 0;
-}
-.wallet {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+  margin: 0.25rem 0 1.25rem;
 }
+
 .addr {
   font-family: monospace;
   font-size: 0.9rem;
-  color: var(--text);
 }
+
 .tabs {
   display: flex;
   gap: 0.25rem;
-  margin: 1.25rem 0 1rem;
+  margin: 0 0 1rem;
   border-bottom: 2px solid var(--border);
 }
+
 .tab {
   background: none;
   border: none;
@@ -147,14 +154,10 @@ function onCreated(): void {
   font-size: 0.95rem;
   color: var(--muted);
 }
+
 .tab.active {
-  border-bottom-color: var(--mw-accent-500, var(--text));
+  border-bottom-color: var(--accent);
   color: var(--text);
   font-weight: 600;
 }
-.foot {
-  margin-top: 3rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
 </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;