@meddleware/seal-ui 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/seal-ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "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",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/seal-client": "^0.0.2",
-    "@meddleware/ui": "^0.1.9",
+    "@meddleware/ui": "^0.1.11",
     "@meddleware/wallet-adapter": "^0.0.5",
     "@mysten/seal": "^1.4.7",
     "@mysten/sui": "^2.30.0",

package/src/components/SealView.vue

@@ -8,6 +8,7 @@
 // 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 { AppTabNav, type AppTab } from '@meddleware/ui'
 import { Transaction } from '@mysten/sui/transactions'
 import {
   buildPublishSealedContentTx,
@@ -20,15 +21,19 @@ import { useWallet } from '../wallet.js'
 import { registry, getSealController } from '../seal.js'
 import { storeBlob, readBlob } from '../walrus.js'
 import { discoverSealedContent } from '../sealed-content.js'
-import { NETWORK, MAINNET_PENDING, SEAL_CONFIGURED, SEAL_PACKAGE_ID } from '../config.js'
+import { NETWORK, SEAL_CONFIGURED, SEAL_PACKAGE_ID } from '../config.js'
 
 const { account, signPersonalMessage, signAndExecute } = useWallet()
 
 const providers = registry.list() as SealPolicyProvider[]
-const disabled = computed(() => MAINNET_PENDING || !SEAL_CONFIGURED)
+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.
 onMounted(() => {
@@ -272,21 +277,21 @@ async function performUnlock(item: SealedContentPointer): Promise<void> {
   <div class="page">
     <p class="muted">Client-side encrypted, access-gated storage on Walrus + Sui.</p>
 
-    <div v-if="MAINNET_PENDING" class="notice notice--warn">
-      Mainnet support is pending — Seal committee mode is currently testnet-only. Switch to testnet to
-      seal content.
-    </div>
-    <div v-else-if="!SEAL_CONFIGURED" class="notice notice--warn">
-      This deployment has no Seal policy package or key-server committee configured
-      (<code>VITE_SEAL_PACKAGE_ID_*</code> / <code>VITE_SEAL_SERVER_OBJECT_IDS_*</code>).
+    <div v-if="!SEAL_CONFIGURED" class="notice notice--warn">
+      <template v-if="NETWORK === 'mainnet'">
+        Seal is not configured for mainnet. Set
+        <code>VITE_SEAL_PACKAGE_ID_MAINNET</code>,
+        <code>VITE_SEAL_SERVER_OBJECT_IDS_MAINNET</code>, and
+        <code>VITE_SEAL_AGGREGATOR_URLS_MAINNET</code>, then redeploy.
+      </template>
+      <template v-else>
+        This deployment has no Seal policy package or key-server committee configured
+        (<code>VITE_SEAL_PACKAGE_ID_*</code> / <code>VITE_SEAL_SERVER_OBJECT_IDS_*</code>).
+      </template>
     </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>
 
@@ -446,25 +451,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

@@ -30,32 +30,53 @@ export const SEAL_PACKAGE_ID: string =
     ? '0x9f0563bfe42fbd29932cd280cc47efe17f5339b4dc569eb110114665eecc231e'
     : '')
 
-/** Threshold `t` in the t-of-n committee (default 2 — matches the 3-server testnet default). */
-export const SEAL_THRESHOLD = Number(env.VITE_SEAL_THRESHOLD || '2')
+/**
+ * Threshold `t` in the t-of-n committee.
+ *   Testnet default: 2 (matches the 3-server testnet committee)
+ *   Mainnet default: 5 (matches the 5-of-8 Mysten Labs mainnet committee)
+ */
+export const SEAL_THRESHOLD = Number(
+  env.VITE_SEAL_THRESHOLD || (NETWORK === 'mainnet' ? '5' : '2'),
+)
 
 /**
  * The key-server committee. Object ids and aggregator URLs are supplied as parallel CSV lists
  * (index-aligned); aggregatorUrl is required for decentralized (committee-type) servers only —
  * independent servers derive their URL from the on-chain object and do not need one.
  *
- * Defaults are the three verified Mysten Labs testnet servers:
- *   [0] Decentralized (Mysten) — requires aggregatorUrl
+ * Testnet defaults — three verified Mysten Labs servers:
+ *   [0] Decentralized (Mysten aggregator) — requires aggregatorUrl
  *   [1] Independent server 1
  *   [2] Independent server 2
  * Override via VITE_SEAL_SERVER_OBJECT_IDS_TESTNET / VITE_SEAL_AGGREGATOR_URLS_TESTNET.
+ *
+ * Mainnet defaults — Mysten Labs 5-of-8 decentralized committee:
+ *   Committee object: 0x686098f1439237fff9f36b99c7329683c22979d2005c2465cb891acb012a7595
+ *   Aggregator: https://seal-aggregator-mainnet.mystenlabs.com
+ *   NOTE: The mainnet aggregator requires an Enoki API key (X-API-Key header).
+ *   Override via VITE_SEAL_SERVER_OBJECT_IDS_MAINNET / VITE_SEAL_AGGREGATOR_URLS_MAINNET.
+ *   When independent open-mode key servers become available on mainnet, they can be added here.
  */
 export const SEAL_SERVERS: KeyServerConfig[] = (() => {
-  const defaultIds = [
-    '0xb012378c9f3799fb5b1a7083da74a4069e3c3f1c93de0b27212a5799ce1e1e98',
-    '0x73d05d62c18d9374e3ea529e8e0ed6161da1a141a94d3f76ae3fe4e99356db75',
-    '0xf5d14a81a982144ae441cd7d64b09027f116a468bd36e7eca494f750591623c8',
-  ]
-  const defaultAggs = ['https://seal-aggregator-testnet.mystenlabs.com']
+  const defaults: Record<Network, { ids: string[]; aggs: string[] }> = {
+    testnet: {
+      ids: [
+        '0xb012378c9f3799fb5b1a7083da74a4069e3c3f1c93de0b27212a5799ce1e1e98',
+        '0x73d05d62c18d9374e3ea529e8e0ed6161da1a141a94d3f76ae3fe4e99356db75',
+        '0xf5d14a81a982144ae441cd7d64b09027f116a468bd36e7eca494f750591623c8',
+      ],
+      aggs: ['https://seal-aggregator-testnet.mystenlabs.com'],
+    },
+    mainnet: {
+      ids: ['0x686098f1439237fff9f36b99c7329683c22979d2005c2465cb891acb012a7595'],
+      aggs: ['https://seal-aggregator-mainnet.mystenlabs.com'],
+    },
+  }
 
   const envIds = csv(netEnv('VITE_SEAL_SERVER_OBJECT_IDS'))
   const envAggs = csv(netEnv('VITE_SEAL_AGGREGATOR_URLS'))
-  const ids = envIds.length > 0 ? envIds : (NETWORK === 'testnet' ? defaultIds : [])
-  const aggs = envAggs.length > 0 ? envAggs : (NETWORK === 'testnet' ? defaultAggs : [])
+  const ids = envIds.length > 0 ? envIds : defaults[NETWORK].ids
+  const aggs = envAggs.length > 0 ? envAggs : defaults[NETWORK].aggs
   return ids.map((objectId, i) => ({ objectId, weight: 1, aggregatorUrl: aggs[i] }))
 })()
 
@@ -75,11 +96,12 @@ export const WALRUS_AGGREGATOR: string =
 /** Default blob lifetime (Walrus storage epochs). */
 export const WALRUS_EPOCHS = Number(env.VITE_WALRUS_EPOCHS || '5')
 
-/**
- * Seal committee mode is testnet-only today. On mainnet the app shows a "pending" notice and
- * disables sealing until the committee is available there.
- */
-export const MAINNET_PENDING = NETWORK === '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
+
+/**
+ * True when the active network has no Seal committee configured (empty package ID or no servers).
+ * On mainnet, populate VITE_SEAL_PACKAGE_ID_MAINNET + VITE_SEAL_SERVER_OBJECT_IDS_MAINNET +
+ * VITE_SEAL_AGGREGATOR_URLS_MAINNET to enable sealing — no code change required.
+ */
+export const MAINNET_PENDING = !SEAL_CONFIGURED