@meddleware/seal-ui 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/seal-ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Standalone Vue 3 SPA for Sealed Storage — client-side Seal encryption + access-gated, decentralised Walrus storage on Sui.",
   "author": "MeddleWare <meddleware@proton.me>",
   "license": "0BSD",
@@ -38,10 +38,9 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
-    "@meddleware/seal-client": "^0.0.2",
-    "@meddleware/ui": "^0.1.9",
+    "@meddleware/seal-client": "^0.0.3",
+    "@meddleware/ui": "^0.1.11",
     "@meddleware/wallet-adapter": "^0.0.5",
-    "@mysten/seal": "^1.4.7",
     "@mysten/sui": "^2.30.0",
     "@mysten/wallet-standard": "^0.20.0",
     "vue": "^3.5.40"

package/src/components/SealView.vue

@@ -7,16 +7,18 @@
 // Styles are scoped to this component so the dashboard can import it without pulling seal-ui's
 // global stylesheet (which restyles body / #app / bare inputs). The standalone app keeps those
 // globals via main.ts → styles.css.
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { AppTabNav, type AppTab } from '@meddleware/ui'
 import { Transaction } from '@mysten/sui/transactions'
 import {
   buildPublishSealedContentTx,
   type SealedManifest,
   type SealPolicyProvider,
   type SealedContentPointer,
+  type FieldSuggestion,
 } from '@meddleware/seal-client'
 import { WalletGuard } from '@meddleware/wallet-adapter'
-import { useWallet } from '../wallet.js'
+import { useWallet, getSuiClient } from '../wallet.js'
 import { registry, getSealController } from '../seal.js'
 import { storeBlob, readBlob } from '../walrus.js'
 import { discoverSealedContent } from '../sealed-content.js'
@@ -27,16 +29,23 @@ const { account, signPersonalMessage, signAndExecute } = useWallet()
 const providers = registry.list() as SealPolicyProvider[]
 const disabled = computed(() => !SEAL_CONFIGURED)
 
-type Tab = 'encrypt' | 'decrypt' | 'unlock'
-const tab = ref<Tab>('encrypt')
+const TABS: AppTab[] = [
+  { id: 'encrypt', label: 'Encrypt' },
+  { id: 'decrypt', label: 'Decrypt' },
+  { id: 'unlock', label: 'Unlock' },
+]
+const tab = ref<string>('encrypt')
 
 // Deep-link from access-gate-ui: ?gate=<id> preselects the nft-gate policy + gate.
+// Force manual mode so the pre-set ID renders in the text input immediately, before suggestions load.
 onMounted(() => {
   const gate = new URLSearchParams(location.search).get('gate')
   if (gate && providers.some((p) => p.type === 'nft-gate')) {
     encType.value = 'nft-gate'
     encValues.value = { ...encValues.value, gateId: gate }
+    encGateManual.value = true
     unlockGateId.value = gate
+    unlockGateManual.value = true
   }
 })
 const busy = ref(false)
@@ -58,6 +67,21 @@ function triggerDownload(blob: Blob, name: string): void {
   URL.revokeObjectURL(url)
 }
 
+// ── Gate suggestions (nft-gate policy) ───────────────────────────────────────
+const encGateSuggestions = ref<FieldSuggestion[]>([])
+const encGateManual = ref(false)
+const encGateLoading = ref(false)
+const unlockGateSuggestions = ref<FieldSuggestion[]>([])
+const unlockGateManual = ref(false)
+const unlockGateLoading = ref(false)
+
+async function fetchGateSuggestions(provider: SealPolicyProvider | null): Promise<FieldSuggestion[]> {
+  const addr = account.value?.address
+  if (!addr || !provider || !provider.suggest) return []
+  const result = await provider.suggest({ account: addr, client: getSuiClient() })
+  return result.gateId ?? []
+}
+
 // ── Encrypt ──────────────────────────────────────────────────────────────────
 const encType = ref(providers[0]?.type ?? '')
 const encProvider = computed(() => providers.find((p) => p.type === encType.value) ?? null)
@@ -70,6 +94,39 @@ function onEncFile(e: Event): void {
   encFile.value = (e.target as HTMLInputElement).files?.[0] ?? null
 }
 
+watch(
+  [() => account.value?.address, encProvider],
+  async ([, provider]) => {
+    if (encType.value !== 'nft-gate') { encGateSuggestions.value = []; return }
+    encGateLoading.value = true
+    encGateManual.value = false
+    try {
+      encGateSuggestions.value = await fetchGateSuggestions(provider)
+    } catch {
+      encGateSuggestions.value = []
+    } finally {
+      encGateLoading.value = false
+    }
+  },
+)
+
+watch(
+  [() => account.value?.address, tab],
+  async ([, t]) => {
+    if (t !== 'unlock') return
+    const nftGateProvider = providers.find((p) => p.type === 'nft-gate') ?? null
+    unlockGateLoading.value = true
+    unlockGateManual.value = false
+    try {
+      unlockGateSuggestions.value = await fetchGateSuggestions(nftGateProvider)
+    } catch {
+      unlockGateSuggestions.value = []
+    } finally {
+      unlockGateLoading.value = false
+    }
+  },
+)
+
 async function performEncrypt(): Promise<void> {
   errorMsg.value = null
   status.value = null
@@ -286,11 +343,7 @@ async function performUnlock(item: SealedContentPointer): Promise<void> {
     </div>
 
     <WalletGuard message="Connect a Sui wallet to encrypt and decrypt sealed content.">
-    <nav class="tabs">
-      <button :class="{ active: tab === 'encrypt' }" @click="tab = 'encrypt'">Encrypt</button>
-      <button :class="{ active: tab === 'decrypt' }" @click="tab = 'decrypt'">Decrypt</button>
-      <button :class="{ active: tab === 'unlock' }" @click="tab = 'unlock'">Unlock</button>
-    </nav>
+    <AppTabNav :tabs="TABS" v-model="tab" style="margin: 1rem 0" />
 
     <div v-if="errorMsg" class="notice notice--error">{{ errorMsg }}</div>
 
@@ -307,17 +360,31 @@ async function performUnlock(item: SealedContentPointer): Promise<void> {
       <p v-if="encProvider" class="muted">{{ encProvider.describe().help }}</p>
 
       <template v-if="encProvider">
-        <label
-          v-for="f in encProvider.describe().encryptFields"
-          :key="f.name"
-          class="field"
-          :class="{ checkbox: f.kind === 'boolean' }"
-        >
-          <span>{{ f.label }}<template v-if="f.required"> *</template></span>
-          <input v-if="f.kind === 'datetime'" type="datetime-local" v-model="encValues[f.name]" />
-          <input v-else-if="f.kind === 'boolean'" type="checkbox" v-model="encValues[f.name]" />
-          <input v-else type="text" v-model="encValues[f.name]" :placeholder="f.help" />
-        </label>
+        <template v-for="f in encProvider.describe().encryptFields" :key="f.name">
+          <!-- Gate ID field: show a picker when wallet-owned gates are available -->
+          <label v-if="f.name === 'gateId'" class="field">
+            <span>{{ f.label }}<template v-if="f.required"> *</template></span>
+            <span v-if="encGateLoading" class="muted" style="font-size:0.8rem">Loading your gates…</span>
+            <template v-else-if="encGateSuggestions.length && !encGateManual">
+              <select v-model="encValues[f.name]">
+                <option value="">Select a gate…</option>
+                <option v-for="s in encGateSuggestions" :key="s.value" :value="s.value">{{ s.label }}</option>
+              </select>
+              <button class="link" style="margin-top:0.25rem" @click="encGateManual = true; encValues[f.name] = ''">Enter ID manually</button>
+            </template>
+            <template v-else>
+              <input type="text" v-model="encValues[f.name]" :placeholder="f.help" />
+              <button v-if="encGateSuggestions.length" class="link" style="margin-top:0.25rem" @click="encGateManual = false; encValues[f.name] = ''">← Back to picker</button>
+            </template>
+          </label>
+          <!-- All other fields: generic rendering -->
+          <label v-else class="field" :class="{ checkbox: f.kind === 'boolean' }">
+            <span>{{ f.label }}<template v-if="f.required"> *</template></span>
+            <input v-if="f.kind === 'datetime'" type="datetime-local" v-model="encValues[f.name]" />
+            <input v-else-if="f.kind === 'boolean'" type="checkbox" v-model="encValues[f.name]" />
+            <input v-else type="text" v-model="encValues[f.name]" :placeholder="f.help" />
+          </label>
+        </template>
       </template>
 
       <label class="field">
@@ -360,7 +427,18 @@ async function performUnlock(item: SealedContentPointer): Promise<void> {
       </p>
       <label class="field">
         <span>Access gate ID</span>
-        <input type="text" v-model="unlockGateId" placeholder="0x… gate object id" />
+        <span v-if="unlockGateLoading" class="muted" style="font-size:0.8rem">Loading your gates…</span>
+        <template v-else-if="unlockGateSuggestions.length && !unlockGateManual">
+          <select v-model="unlockGateId">
+            <option value="">Select a gate…</option>
+            <option v-for="s in unlockGateSuggestions" :key="s.value" :value="s.value">{{ s.label }}</option>
+          </select>
+          <button class="link" style="margin-top:0.25rem" @click="unlockGateManual = true; unlockGateId = ''">Enter ID manually</button>
+        </template>
+        <template v-else>
+          <input type="text" v-model="unlockGateId" placeholder="0x… gate object id" />
+          <button v-if="unlockGateSuggestions.length" class="link" style="margin-top:0.25rem" @click="unlockGateManual = false; unlockGateId = ''">← Back to picker</button>
+        </template>
       </label>
       <button class="primary" :disabled="busy || !unlockGateId" @click="performDiscover">
         {{ busy ? 'Working…' : 'Find sealed content' }}
@@ -450,25 +528,6 @@ async function performUnlock(item: SealedContentPointer): Promise<void> {
 .notice--warn { background: color-mix(in srgb, #d29922 15%, transparent); }
 .notice--error { background: color-mix(in srgb, #f85149 18%, transparent); }
 
-.tabs {
-  display: flex;
-  gap: 0.25rem;
-  margin: 1rem 0;
-  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-}
-.tabs button {
-  background: transparent;
-  border: 0;
-  color: inherit;
-  padding: 0.5rem 0.9rem;
-  cursor: pointer;
-  opacity: 0.7;
-  border-bottom: 2px solid transparent;
-}
-.tabs button.active {
-  opacity: 1;
-  border-bottom-color: var(--accent, #c0503f);
-}
 
 .card {
   background: var(--surface, #1e1917);

package/src/config.ts

@@ -96,6 +96,16 @@ export const WALRUS_AGGREGATOR: string =
 /** Default blob lifetime (Walrus storage epochs). */
 export const WALRUS_EPOCHS = Number(env.VITE_WALRUS_EPOCHS || '5')
 
+/**
+ * Meddleware's deployed `access_gate` package IDs per network.
+ * Used by the nft-gate provider's `suggest()` to list AdminCap-owned gates for the connected wallet.
+ * Kept in sync with access-gate-ui/src/constants.ts (same deployment).
+ */
+export const ACCESS_GATE_PACKAGE_ID: Record<Network, string> = {
+  testnet: '0x0bedd0b27d993d3292ca6a5315f7562de8bc0ff3752b445b4c53252c76f2d20d',
+  mainnet: '',
+}
+
 /** True when the on-chain policy package + committee are configured for the active network. */
 export const SEAL_CONFIGURED = Boolean(SEAL_PACKAGE_ID) && SEAL_SERVERS.length > 0
 

package/src/seal.ts

@@ -6,10 +6,10 @@
 import { createDefaultRegistry, type PolicyRegistry } from '@meddleware/seal-client'
 import type { SealController } from '@meddleware/seal-client/controller'
 import { getSuiClient } from './wallet.js'
-import { NETWORK, SEAL_PACKAGE_ID, SEAL_THRESHOLD, SEAL_SERVERS } from './config.js'
+import { NETWORK, SEAL_PACKAGE_ID, SEAL_THRESHOLD, SEAL_SERVERS, ACCESS_GATE_PACKAGE_ID } from './config.js'
 
 /** The policy registry (nft-gate + time-lock as peers). Iterate `list()` to render the picker. */
-export const registry: PolicyRegistry = createDefaultRegistry()
+export const registry: PolicyRegistry = createDefaultRegistry(ACCESS_GATE_PACKAGE_ID[NETWORK])
 
 let controller: SealController | null = null