@meddleware/token-deployer-ui 0.0.10 → 0.0.12

package/README.md

@@ -22,7 +22,8 @@ and can optionally push it to a new GitHub repo in their own account.
    ([src/lib/generatePackage.ts](src/lib/generatePackage.ts)) that is **byte-identical**
    to the CLI generator's output, so the on-chain package is source-verifiable.
 5. Licenses are fetched live from SPDX ([src/lib/licenses.ts](src/lib/licenses.ts)); an
-   optional icon upload goes to Walrus ([src/lib/walrus.ts](src/lib/walrus.ts)); and an
+   optional icon upload goes to Walrus (`@meddleware/walrus-client/flow`, from
+   [src/components/IconPicker.vue](src/components/IconPicker.vue)); and an
    optional GitHub push uses the user's own token ([src/lib/github.ts](src/lib/github.ts)).
 
 ## Security & trust model
@@ -163,14 +164,16 @@ Two tests enforce this invariant in CI so it can never silently drift:
 - `scripts/e2e-deploy.mjs` — the **network-parametrized real-chain deploy e2e** (headless
   browser + injected wallet): drives the full UI, does a REAL publish, waits for real
   confirmation, checks the result panel, downloads the source zip, and verifies coin type +
-  operator fee on-chain. Covers exactly what the mocked Cypress suite cannot. `scripts/e2e-browser.mjs`
+  operator fee on-chain. Covers exactly what the mocked Playwright suite cannot. `scripts/e2e-browser.mjs`
   is a thin localnet wrapper over it.
-- `scripts/e2e-walrus-browser.mjs` — the Walrus icon uploader end-to-end on testnet
-  with an injected wallet.
+- `scripts/e2e-walrus-browser.mjs` (`npm run e2e:walrus`) — the Walrus icon uploader end-to-end on
+  testnet with an injected wallet (`SUI_PRIV` with SUI + WAL); `E2E_RELAY=operator` exercises the
+  NFT-gated relay (pass purchase, consume, signed proof). Manual only — it spends real funds.
 
 ## Real-chain e2e / launch runbook
 
-The Playwright mocked suite (`npm run test:e2e`) mocks all RPC via `VITE_E2E=1`, so it can prove
+The Playwright mocked suite (`npm run test:e2e`) mocks all RPC in a dedicated e2e build
+(`npm run build:e2e`, `--mode e2e`; production builds refuse `VITE_E2E`), so it can prove
 the form/wallet/publish UI but **not** on-chain confirmation, the result panel, or the source
 download. The real-chain harness fills that gap. It is **manual** — never wired into automatic CI — because testnet/mainnet runs
 publish a real token and spend real SUI.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/token-deployer-ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "license": "0BSD",
   "exports": {
@@ -8,6 +8,13 @@
       "default": "./src/index.ts"
     }
   },
+  "files": [
+    "src",
+    "!src/__tests__",
+    "env.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -19,13 +26,15 @@
     "test:unit": "vitest",
     "test": "vitest run",
     "test:watch": "vitest",
-    "build:e2e": "VITE_E2E=1 vite build",
+    "build:e2e": "VITE_E2E=1 vite build --mode e2e",
+    "check:bundle": "node scripts/check-prod-bundle.mjs",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "e2e:install": "playwright install --with-deps chromium firefox",
     "e2e:localnet": "VITE_RPC_TESTNET=${VITE_RPC_TESTNET:-http://127.0.0.1:9000} VITE_FEE_TREASURY_TESTNET=${VITE_FEE_TREASURY_TESTNET:-0xfee0000000000000000000000000000000000000000000000000000000000000} vite build && start-server-and-test preview http://localhost:4173 'E2E_NETWORK=localnet node scripts/e2e-deploy.mjs'",
     "e2e:testnet": "vite build && start-server-and-test preview http://localhost:4173 'E2E_NETWORK=testnet node scripts/e2e-deploy.mjs'",
     "e2e:mainnet": "vite build && start-server-and-test preview http://localhost:4173 'E2E_NETWORK=mainnet node scripts/e2e-deploy.mjs'",
+    "e2e:walrus": "vite build && start-server-and-test preview http://localhost:4173 'node scripts/e2e-walrus-browser.mjs'",
     "lint": "npm run lint:css && npm run lint:js && npm run lint:html",
     "format": "oxfmt src/",
     "docs": "typedoc",
@@ -40,16 +49,21 @@
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.7",
     "@meddleware/ui": "^0.1.28",
-    "@meddleware/wallet-adapter": "^0.0.10",
-    "@meddleware/walrus-relay": "^0.1.19",
-    "@mysten/bcs": "~2.1.0",
-    "@mysten/move-bytecode-template": "~0.4.0",
+    "@meddleware/walrus-client": "^0.0.21",
+    "@meddleware/walrus-relay": "^0.1.20",
+    "@mysten/bcs": "~2.1.2",
+    "@mysten/move-bytecode-template": "~0.4.1",
     "@mysten/sui": "^2.33.1",
-    "@mysten/walrus": "~1.2.0",
+    "@mysten/walrus": "~1.2.32",
     "fflate": "^0.8.3",
     "vue": "^3.5.0"
   },
+  "peerDependencies": {
+    "@meddleware/wallet-adapter": ">=0.0.12 <0.2.0"
+  },
   "devDependencies": {
+    "@meddleware/access-gate-client": "^0.0.1",
+    "@meddleware/wallet-adapter": "^0.0.12",
     "@playwright/test": "^1.56.0",
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.8",
@@ -77,7 +91,7 @@
     "typescript": "~6.0.0",
     "vite": "^8.1.5",
     "vite-plugin-vue-devtools": "^8.1.5",
-    "vitest": "^4.1.10",
+    "vitest": "~5.0.2",
     "vue-eslint-parser": "^10.4.1",
     "vue-tsc": "~3.3.0"
   },

package/src/App.vue

@@ -8,7 +8,7 @@ const { mode: colorMode, set: setColorMode } = useColorMode('system')
 
 <template>
   <a class="skip-link" href="#main-content">Skip to main content</a>
-  <main id="main-content">
+  <main id="main-content" class="mw-token-deployer">
     <header class="page-header">
       <ColorModeControl
         class="theme-toggle"

package/src/component-styles.css

@@ -1,9 +1,11 @@
 /* Component utility styles for TokenDeployerView and its sub-components.
    Imported by index.ts so these are available in both standalone and library (dashboard) mode.
+   Every rule is scoped under `:where(.mw-token-deployer)` so the library injects nothing global
+   into an embedding host, while `:where()` keeps the original (element-level) specificity.
    Relies on design-token CSS variables (--bg, --surface, --border, etc.) provided by the
    consumer — either @meddleware/design-tokens (standalone) or the dashboard's own import. */
 
-.card {
+:where(.mw-token-deployer) .card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -12,20 +14,20 @@
   border-top: 2px solid var(--border);
 }
 
-label {
+:where(.mw-token-deployer) label {
   display: block;
   font-weight: 600;
   margin: 0.9rem 0 0.3rem;
 }
-.hint {
+:where(.mw-token-deployer) .hint {
   color: var(--muted);
   font-weight: 400;
   font-size: 0.9rem;
 }
 
-input,
-select,
-textarea {
+:where(.mw-token-deployer) input,
+:where(.mw-token-deployer) select,
+:where(.mw-token-deployer) textarea {
   width: 100%;
   padding: 0.6rem 0.7rem;
   font: inherit;
@@ -34,24 +36,24 @@ textarea {
   border: 1px solid var(--border);
   border-radius: 8px;
 }
-textarea {
+:where(.mw-token-deployer) textarea {
   min-height: 4rem;
   resize: vertical;
 }
 
-input[aria-invalid='true'],
-select[aria-invalid='true'],
-textarea[aria-invalid='true'] {
+:where(.mw-token-deployer) input[aria-invalid='true'],
+:where(.mw-token-deployer) select[aria-invalid='true'],
+:where(.mw-token-deployer) textarea[aria-invalid='true'] {
   border-color: var(--danger);
 }
 
-.field-error {
+:where(.mw-token-deployer) .field-error {
   color: var(--danger);
   font-size: 0.88rem;
   margin-top: 0.3rem;
 }
 
-button {
+:where(.mw-token-deployer) button {
   font: inherit;
   font-weight: 600;
   padding: 0.6rem 1rem;
@@ -61,54 +63,54 @@ button {
   color: var(--text);
   cursor: pointer;
 }
-button.primary {
+:where(.mw-token-deployer) button.primary {
   background: var(--accent);
   color: var(--accent-contrast);
   border-color: transparent;
 }
-button:disabled {
+:where(.mw-token-deployer) button:disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }
 
-.row {
+:where(.mw-token-deployer) .row {
   display: flex;
   gap: 0.75rem;
   flex-wrap: wrap;
   align-items: center;
 }
 /* A row of form/navigation actions below a block of content. */
-.actions {
+:where(.mw-token-deployer) .actions {
   margin-top: 1rem;
 }
-.grid2 {
+:where(.mw-token-deployer) .grid2 {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0 1rem;
 }
 @media (width >= 520px) {
-  .grid2 {
+  :where(.mw-token-deployer) .grid2 {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-fieldset {
+:where(.mw-token-deployer) fieldset {
   background: var(--lift);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 0.5rem 1rem 1rem;
   margin: 1rem 0;
 }
-legend {
+:where(.mw-token-deployer) legend {
   font-weight: 700;
   padding: 0 0.4rem;
 }
 
-details {
+:where(.mw-token-deployer) details {
   margin: 1rem 0;
 }
 
-details > summary {
+:where(.mw-token-deployer) details > summary {
   color: var(--accent);
   font-weight: 700;
   margin: 0.5rem 0;
@@ -119,28 +121,28 @@ details > summary {
   transition: border-color 0.2s ease;
 }
 
-details > summary:hover {
+:where(.mw-token-deployer) details > summary:hover {
   border-color: var(--border);
 }
 
-details[open] > summary {
+:where(.mw-token-deployer) details[open] > summary {
   border-color: var(--border);
   margin-bottom: 1rem;
 }
 
-details > fieldset {
+:where(.mw-token-deployer) details > fieldset {
   margin-top: 0;
 }
 
-.permanent {
+:where(.mw-token-deployer) .permanent {
   color: var(--danger);
   font-weight: 600;
 }
-.mono {
+:where(.mw-token-deployer) .mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   word-break: break-all;
 }
-.badge {
+:where(.mw-token-deployer) .badge {
   display: inline-block;
   font-size: 0.8rem;
   padding: 0.15rem 0.5rem;
@@ -148,44 +150,24 @@ details > fieldset {
   background: var(--border);
 }
 
-.skip-link {
-  position: absolute;
-  left: 0.5rem;
-  top: -3rem;
-  z-index: 100;
-  background: var(--accent);
-  color: #fff;
-  padding: 0.5rem 0.9rem;
-  border-radius: 6px;
-  text-decoration: none;
-  transition: top 0.15s ease;
-}
-.skip-link:focus {
-  top: 0.5rem;
-}
-@media (prefers-reduced-motion: reduce) {
-  .skip-link {
-    transition: none;
-  }
-}
 
-.steps {
+:where(.mw-token-deployer) .steps {
   list-style: none;
   padding: 0;
 }
-.steps li {
+:where(.mw-token-deployer) .steps li {
   padding: 0.35rem 0;
   color: var(--muted);
 }
-.steps li[data-state='active'] {
+:where(.mw-token-deployer) .steps li[data-state='active'] {
   color: var(--text);
   font-weight: 600;
 }
-.steps li[data-state='done'] {
+:where(.mw-token-deployer) .steps li[data-state='done'] {
   color: var(--ok);
 }
 
-.spinner {
+:where(.mw-token-deployer) .spinner {
   width: 1em;
   height: 1em;
   border: 2px solid currentColor;
@@ -201,21 +183,21 @@ details > fieldset {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .spinner {
+  :where(.mw-token-deployer) .spinner {
     animation: none;
   }
-  * {
+  :where(.mw-token-deployer) * {
     scroll-behavior: auto;
   }
 }
 
-.wallet-list {
+:where(.mw-token-deployer) .wallet-list {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   margin-top: 1rem;
 }
-.wallet-list button {
+:where(.mw-token-deployer) .wallet-list button {
   display: flex;
   align-items: center;
   gap: 0.6rem;

package/src/components/GithubPush.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { PublishResult, TokenConfig } from '../lib/types.js'
-import { UiNotice } from '@meddleware/ui'
+import { UiNotice, safeHref } from '@meddleware/ui'
 import { buildPackageFiles } from '../lib/generatePackage.js'
 import { fetchLicenseText } from '../lib/licenses.js'
 import { createRepoAndPush } from '../lib/github.js'
@@ -92,7 +92,7 @@ async function push(): Promise<void> {
 
       <UiNotice v-if="error" type="error">{{ error }}</UiNotice>
       <UiNotice v-if="doneUrl" type="ok">
-        Pushed: <a :href="doneUrl" target="_blank" rel="noopener noreferrer">{{ doneUrl }}</a>
+        Pushed: <a :href="safeHref(doneUrl)" target="_blank" rel="noopener noreferrer">{{ doneUrl }}</a>
       </UiNotice>
     </div>
   </div>

package/src/components/IconPicker.vue

@@ -4,15 +4,12 @@ import { useWallet } from '@meddleware/wallet-adapter'
 import { buildDeployExecutor } from '../lib/deployExecutor.js'
 import { getReadClient } from '../lib/readClient.js'
 import { useWalrusRelay } from '../composables/useWalrusRelay.js'
-import { useAccessGate } from '../composables/useAccessGate.js'
+import { useAccessGate } from '@meddleware/walrus-relay'
+// The flow subpath carries no wasm; it loads the Walrus client lazily when an upload starts.
+import { consumeStorageKey, createGatedAccess, runBlobUpload } from '@meddleware/walrus-client/flow'
 import { ICON_EPOCHS } from '../lib/walrus-constants.js'
-import { ICON_MAX_BYTES, validateIconFile } from '../config.js'
-import {
-  fetchRelayChallenge,
-  personalMessageForNonce,
-  buildAccessProofToken,
-} from '../lib/accessGate.js'
-import type { WalrusNetwork } from '../lib/walrus.js'
+import { ACCESS_GATE, ICON_MAX_BYTES, WALRUS_MAX_TIP_MIST, WALRUS_RPC_URLS, validateIconFile } from '../config.js'
+import type { WalrusNetwork } from '../config.js'
 import type { Network } from '../lib/types.js'
 import { UiNotice, UiFieldHint, UiSegmentedControl } from '@meddleware/ui'
 import WalrusBlobBrowser from './WalrusBlobBrowser.vue'
@@ -36,7 +33,7 @@ const isWalrusNetwork = computed(() => props.network !== 'localnet')
 const walrusNet: WalrusNetwork = props.network === 'mainnet' ? 'mainnet' : 'testnet'
 
 // NFT-gated relay access (inert when no gate is configured for this network).
-const accessGate = useAccessGate(walrusNet, { getClient: (n) => getReadClient(n) })
+const accessGate = useAccessGate({ gate: ACCESS_GATE[walrusNet], getClient: () => getReadClient(walrusNet) })
 
 const {
   selectedRelayHost,
@@ -142,82 +139,53 @@ async function upload(): Promise<void> {
     uploadError.value = 'Connect your wallet first.'
     return
   }
+  const address = account.value.address
   uploading.value = true
   uploadError.value = null
   try {
-    const { createWalrusClient, createBlobUploadFlow, walrusBlobUrl } =
-      await import('../lib/walrus.js')
     const executor = await buildDeployExecutor(props.network as Network)
-    const suiClient = getReadClient(props.network as Network)
 
-    // If the gated operator relay is selected, prove NFT access: (single-use only) consume
-    // one use on-chain bound to the challenge nonce, then sign the challenge. The token rides
-    // the relay Authorization header; the nft-gate gateway verifies it before proxying.
-    let uploadRelayAuthToken: string | undefined
+    // The gated operator relay needs proof of an access pass. For a single-use pass the on-chain
+    // consume is persisted before the upload and reused on a retry (the gateway redeems a consume
+    // digest once, on a successful upload), so an interrupted upload never burns a use; a fresh use
+    // is spent only after the gateway reports the stored one redeemed.
     const publicHost = availableRelays.value.find((r) => r.isPublic)?.host
-    const usingOperatorRelay = selectedRelayHost.value !== publicHost
-    if (accessGate.gateConfigured && usingOperatorRelay && account.value) {
-      const challenge = await fetchRelayChallenge(selectedRelayHost.value)
-      let consumeDigest: string | undefined
-      if (accessGate.usesRemaining.value != null && accessGate.nftId.value) {
-        status.value = 'Consuming one access use (approve in wallet)…'
-        const consumeTx = accessGate.buildConsume(accessGate.nftId.value, challenge.nonce)
-        const cres = await executor.signAndExecute(consumeTx)
-        await executor.waitForTransaction(cres.digest)
-        consumeDigest = cres.digest
-      }
-      status.value = 'Signing relay access proof…'
-      const { signature } = await signPersonalMessage(personalMessageForNonce(challenge.nonce))
-      uploadRelayAuthToken = buildAccessProofToken({
-        address: account.value.address,
-        nonce: challenge.nonce,
-        signature,
-        consumeDigest,
-      })
-    }
-
-    const client = createWalrusClient(walrusNet, {
+    const gate = accessGate.gate
+    const nftId = accessGate.nftId.value
+    const gated = !!gate && accessGate.hasAccess.value === true && !!nftId && selectedRelayHost.value !== publicHost
+    const access =
+      gated && gate && nftId
+        ? createGatedAccess({
+            storage: window.localStorage,
+            key: consumeStorageKey(walrusNet, gate.gateId, address),
+            relayHost: selectedRelayHost.value,
+            address,
+            nftId,
+            singleUse: accessGate.usesRemaining.value !== null,
+            buildConsume: (id, nonce) => accessGate.buildConsume(id, nonce),
+            signAndExecute: (tx) => executor.signAndExecute(tx),
+            waitForTransaction: (digest) => executor.waitForTransaction(digest),
+            sign: signPersonalMessage,
+            onStatus: (p) => (status.value = p.detail ?? ''),
+          })
+        : undefined
+
+    const result = await runBlobUpload({
+      bytes,
+      network: walrusNet,
+      relayHost: selectedRelayHost.value,
+      address,
+      rpcUrl: WALRUS_RPC_URLS[walrusNet],
       wasmUrl: walrusWasmUrl,
-      uploadRelayHost: selectedRelayHost.value,
-      uploadRelayAuthToken,
-    })
-    const flow = createBlobUploadFlow(client, bytes)
-
-    status.value = 'Encoding…'
-    await flow.encode()
-
-    let feeNote = ''
-    try {
-      const tipMist = await client.walrus.calculateUploadRelayTip({ size: bytes.length })
-      const tipSui = Number(tipMist) / 1e9
-      feeNote = tipMist > 0n ? ` Relay fee ≈ ${tipSui.toFixed(4)} SUI + storage (WAL).` : ''
-    } catch {
-      // Non-fatal — the register step surfaces any real tip error.
-    }
-
-    status.value = `Registering blob (approve in wallet)…${feeNote}`
-    const regTx = flow.register({
-      owner: account.value.address,
+      maxTipMist: Number(WALRUS_MAX_TIP_MIST),
       epochs: ICON_EPOCHS,
       deletable: !permanent.value,
+      executor,
+      suiClient: getReadClient(props.network as Network),
+      access,
+      onStatus: (p) => (status.value = p.detail ?? ''),
     })
-    regTx.setSenderIfNotSet(account.value.address)
-    await regTx.build({ client: suiClient })
-    const reg = await executor.signAndExecute(regTx)
-    await executor.waitForTransaction(reg.digest)
-
-    status.value = 'Uploading to the relay…'
-    await flow.upload({ digest: reg.digest })
-
-    status.value = 'Certifying (approve in wallet)…'
-    const certTx = flow.certify()
-    certTx.setSenderIfNotSet(account.value.address)
-    await certTx.build({ client: suiClient })
-    const cert = await executor.signAndExecute(certTx)
-    await executor.waitForTransaction(cert.digest)
-
-    const blob = await flow.getBlob()
-    emit('update:modelValue', walrusBlobUrl(walrusNet, blob.blobId))
+    emit('update:modelValue', result.url)
     tab.value = 'url'
     status.value = 'Uploaded ✓ — URL filled in above.'
   } catch (e) {
@@ -225,6 +193,7 @@ async function upload(): Promise<void> {
     status.value = ''
   } finally {
     uploading.value = false
+    if (account.value) void refreshAccess() // uses remaining may have changed
   }
 }
 

package/src/components/LicensePicker.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { fetchLicenseList, fetchLicenseText, NO_LICENSE } from '../lib/licenses.js'
 import type { SpdxLicense } from '../lib/licenses.js'
-import { UiDialog, UiFieldHint, UiFormField, UiNotice, UiSelect } from '@meddleware/ui'
+import { UiDialog, UiFieldHint, UiFormField, UiNotice, UiSelect, safeHref } from '@meddleware/ui'
 
 const props = defineProps<{ modelValue: string }>()
 const emit = defineEmits<{
@@ -131,7 +131,7 @@ async function openLicenseModal(): Promise<void> {
     <template v-else>
       <p class="license-spdx">
         <a
-          :href="`https://spdx.org/licenses/${modelValue}.html`"
+          :href="safeHref(`https://spdx.org/licenses/${encodeURIComponent(modelValue)}.html`)"
           target="_blank"
           rel="noopener noreferrer"
           >View on SPDX ↗</a

package/src/components/ResultPanel.vue

@@ -5,7 +5,7 @@ import { explorerObjectUrl } from '../config.js'
 import { generatePackageZip } from '../lib/generatePackage.js'
 import { fetchLicenseText } from '../lib/licenses.js'
 import GithubPush from './GithubPush.vue'
-import { UiNotice } from '@meddleware/ui'
+import { UiNotice, safeHref } from '@meddleware/ui'
 
 const props = defineProps<{ result: PublishResult; config: TokenConfig }>()
 defineEmits<{ (e: 'restart'): void }>()
@@ -51,7 +51,7 @@ async function downloadPackage(): Promise<void> {
       <dd class="mono">{{ result.coinType }}</dd>
       <dt>Package</dt>
       <dd class="mono">
-        <a :href="packageUrl" target="_blank" rel="noopener noreferrer">
+        <a :href="safeHref(packageUrl)" target="_blank" rel="noopener noreferrer">
           {{ result.packageId }}
         </a>
       </dd>

package/src/components/ReviewPanel.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { TokenConfig, Network } from '../lib/types.js'
-import { FEE_MIST } from '../config.js'
+import { FEE_MIST, FEE_TREASURY, isFeeConfigured } from '../config.js'
 import { UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ config: TokenConfig; network: Network }>()
 defineEmits<{ (e: 'back'): void; (e: 'confirm'): void }>()
 
+// Mirrors TokenDeployerView: the fee is only charged when a real treasury is configured.
+const feeCharged = isFeeConfigured(props.network)
 const feeSui = Number(FEE_MIST) / 1e9
+const treasury = FEE_TREASURY[props.network]
 </script>
 
 <template>
@@ -51,8 +54,13 @@ const feeSui = Number(FEE_MIST) / 1e9
     </dl>
 
     <p v-once class="hint">
-      Your wallet signs and pays gas. A one-off fee of <strong>{{ feeSui }} SUI</strong> is included
-      in the publish transaction. Nothing is compiled or signed on a server.
+      Your wallet signs and pays gas.
+      <template v-if="feeCharged">
+        A one-off fee of <strong>{{ feeSui }} SUI</strong> is included in the publish transaction,
+        paid to the operator treasury <span class="mono">{{ treasury }}</span>.
+      </template>
+      <template v-else>No operator fee is charged on this network.</template>
+      Nothing is compiled or signed on a server.
     </p>
 
     <p v-once class="hint">