@meddleware/token-deployer-ui 0.0.10 → 0.0.11

package/src/components/TokenDeployerView.vue

@@ -191,57 +191,61 @@ function restart(): void {
 </script>
 
 <template>
-  <UiToolIntro
-    >Deploy your own Sui coin — your wallet signs and pays; no intermediaries ({{
-      network
-    }}).</UiToolIntro
-  >
-
-  <AppTabNav
-    v-model="activeTab"
-    :tabs="TABS"
-    id-prefix="token-deployer"
-    aria-label="Sections"
-    class="deployer-tabs"
-  />
-
-  <WalletGuard message="Connect a Sui wallet to deploy your token.">
+  <div class="mw-token-deployer">
+    <UiToolIntro
+      >Deploy your own Sui coin — your wallet signs and pays; no intermediaries ({{
+        network
+      }}).</UiToolIntro
+    >
+
+    <AppTabNav
+      v-model="activeTab"
+      :tabs="TABS"
+      id-prefix="token-deployer"
+      aria-label="Sections"
+      class="deployer-tabs"
+    />
+
+    <!-- The tab list and its panel always render (the selected tab controls a live panel); the wallet
+         prompt replaces only the panel's content until a wallet is connected. -->
     <UiTabPanel id-prefix="token-deployer" :tab="activeTab">
-      <template v-if="activeTab === 'deploy'">
-        <UiStepper :steps="STEPS" :model-value="stepIndex" @update:model-value="onStepperBack" />
-        <ConfigForm
-          v-if="step === 'identity' || step === 'token' || step === 'settings'"
-          :form="form"
-          :errors="errors"
-          :can-proceed="canProceed"
-          :network="network"
-          :connected="connected"
-          :form-step="formStep"
-          @next="goNext"
-          @back="goBack"
-        />
-        <ReviewPanel
-          v-if="step === 'review'"
-          :config="config"
-          :network="network"
-          @back="goBack"
-          @confirm="confirmDeploy"
-        />
-        <DeployProgress v-if="step === 'deploying'" :step="deployStep" />
-        <ResultPanel
-          v-if="step === 'done' && result"
-          :result="result"
-          :config="config"
-          @restart="restart"
-        />
-        <UiNotice v-if="deployError" type="error">{{ deployError }}</UiNotice>
-      </template>
-
-      <MyTokens v-else :owner="account?.address ?? null" :network="network" />
+      <WalletGuard message="Connect a Sui wallet to deploy your token.">
+        <template v-if="activeTab === 'deploy'">
+          <UiStepper :steps="STEPS" :model-value="stepIndex" @update:model-value="onStepperBack" />
+          <ConfigForm
+            v-if="step === 'identity' || step === 'token' || step === 'settings'"
+            :form="form"
+            :errors="errors"
+            :can-proceed="canProceed"
+            :network="network"
+            :connected="connected"
+            :form-step="formStep"
+            @next="goNext"
+            @back="goBack"
+          />
+          <ReviewPanel
+            v-if="step === 'review'"
+            :config="config"
+            :network="network"
+            @back="goBack"
+            @confirm="confirmDeploy"
+          />
+          <DeployProgress v-if="step === 'deploying'" :step="deployStep" />
+          <ResultPanel
+            v-if="step === 'done' && result"
+            :result="result"
+            :config="config"
+            @restart="restart"
+          />
+          <UiNotice v-if="deployError" type="error">{{ deployError }}</UiNotice>
+        </template>
+
+        <MyTokens v-else :owner="account?.address ?? null" :network="network" />
+      </WalletGuard>
     </UiTabPanel>
-  </WalletGuard>
 
-  <TermsDialog :open="showTerms" @accept="onTermsAccept" @cancel="onTermsCancel" />
+    <TermsDialog :open="showTerms" @accept="onTermsAccept" @cancel="onTermsCancel" />
+  </div>
 </template>
 
 <style scoped>

package/src/components/WalletBar.vue

@@ -3,6 +3,17 @@ import { computed, ref, watch } from 'vue'
 import { useWallet, useNetwork } from '@meddleware/wallet-adapter'
 import { SELECTABLE_NETWORKS } from '../config.js'
 import type { Network } from '../lib/types.js'
+
+/** Wallet-supplied icons are untrusted: render only inline images or https URLs. */
+function safeIcon(icon: string | undefined): string | undefined {
+  if (!icon) return undefined
+  if (/^data:image\/(png|svg\+xml|jpeg|webp|gif);/i.test(icon)) return icon
+  try {
+    return new URL(icon).protocol === 'https:' ? icon : undefined
+  } catch {
+    return undefined
+  }
+}
 import { UiDialog, UiFormField, UiNotice, UiSelect } from '@meddleware/ui'
 
 const { wallets, currentWallet, account, connecting, error, connect, disconnect } = useWallet()
@@ -66,7 +77,7 @@ watch(
     <menu class="wallet-list">
       <li v-for="w in wallets" :key="w.name">
         <button type="button" class="primary" :disabled="connecting" @click="connect(w)">
-          <img v-if="w.icon" :src="w.icon" alt="" width="20" height="20" />
+          <img v-if="safeIcon(w.icon)" :src="safeIcon(w.icon)" alt="" width="20" height="20" />
           {{ w.name }}
         </button>
       </li>

package/src/components/WalrusBlobBrowser.vue

@@ -2,7 +2,8 @@
 import { ref, watch } from 'vue'
 import { useWallet } from '@meddleware/wallet-adapter'
 import { getReadClient } from '../lib/readClient.js'
-import type { OwnedBlob, WalrusNetwork } from '../lib/walrus.js'
+import type { OwnedBlob } from '@meddleware/walrus-client'
+import { WALRUS_RPC_URLS, type WalrusNetwork } from '../config.js'
 import type { Network } from '../lib/types.js'
 import { UiNotice } from '@meddleware/ui'
 
@@ -46,10 +47,9 @@ async function load(): Promise<void> {
   blobs.value = []
   hasLoaded.value = false
   try {
-    const { createWalrusClient, walrusBlobUrl, fetchOwnedWalrusBlobs } =
-      await import('../lib/walrus.js')
+    const { createWalrusClient, walrusBlobUrl, fetchOwnedWalrusBlobs } = await import('@meddleware/walrus-client')
     const suiClient = getReadClient(props.network as Network)
-    const client = createWalrusClient(props.network)
+    const client = createWalrusClient({ network: props.network, rpcUrl: WALRUS_RPC_URLS[props.network] })
     const raw = await fetchOwnedWalrusBlobs(suiClient, client, addr)
     blobs.value = raw.map((b) => ({ ...b, url: walrusBlobUrl(props.network, b.blobId) }))
     hasLoaded.value = true

package/src/composables/useWalrusRelay.ts

@@ -4,8 +4,7 @@
 // (`IconPicker.vue`) and tests are unaffected.
 import { useWalrusRelay as useSharedWalrusRelay } from '@meddleware/walrus-relay'
 import type { RelayAccessOptions, RelayOption } from '@meddleware/walrus-relay'
-import { WALRUS_RELAY_HOSTS, PUBLIC_WALRUS_RELAY_HOSTS } from '../config.js'
-import type { WalrusNetwork } from '../lib/walrus.js'
+import { WALRUS_RELAY_HOSTS, PUBLIC_WALRUS_RELAY_HOSTS, type WalrusNetwork } from '../config.js'
 
 export type { RelayAccessOptions, RelayOption }
 

package/src/config.ts

@@ -2,7 +2,7 @@
 // Vite env vars so they can be set at build/deploy time without code changes.
 // See .env.example.
 import type { Network } from './lib/types.js'
-import type { AccessGateConfig } from './lib/accessGate.js'
+import { relayGateConfig, type RelayGateConfig } from '@meddleware/walrus-relay'
 
 const env = (import.meta as unknown as { env?: Record<string, string | undefined> }).env ?? {}
 
@@ -56,7 +56,7 @@ export const SELECTABLE_NETWORKS: Network[] = ['testnet', 'mainnet']
 // ---------------------------------------------------------------------------
 // Walrus is a separate protocol from Sui; only testnet/mainnet exist (no
 // localnet). Icon uploads go through an upload relay (direct-to-storage-node
-// writes fail from browsers). See `src/lib/walrus.ts` and the relay runbook in
+// writes fail from browsers). The upload is `@meddleware/walrus-client/flow`; see the relay runbook in
 // README.md / CLAUDE.md for the operator side.
 
 /** A Walrus network — a strict subset of {@link Network} (no localnet). */
@@ -113,27 +113,29 @@ export const WALRUS_MAX_TIP_MIST: bigint = BigInt(env.VITE_WALRUS_MAX_TIP_MIST |
 // NFT-gated relay access (optional)
 // ---------------------------------------------------------------------------
 // When the operator relay runs behind an `nft-gate` gateway, using it requires
-// holding the gate's access NFT. Configure the gate per network via env; when a
-// gate is NOT configured the relay behaves exactly as before (no gating). See
-// `src/lib/accessGate.ts` and `useAccessGate`.
+// holding the gate's access NFT. The operator sets the gate id, soulbound flag (default true) and
+// price per network via env; `relayGateConfig` (walrus-relay) fixes the package and PlatformConfig
+// to the published access_gate deployment. When no gate id is set the relay is ungated.
 
-function parseAccessGate(network: WalrusNetwork): AccessGateConfig | null {
+/** The gate config for a network, or `null` (ungated) without a gate id or a recorded deployment. */
+export function parseAccessGate(network: WalrusNetwork, envSource: Record<string, string | undefined> = env): RelayGateConfig | null {
   const NET = network.toUpperCase()
-  const packageId = env[`VITE_ACCESS_GATE_PACKAGE_${NET}`]
-  const gateId = env[`VITE_ACCESS_GATE_ID_${NET}`]
-  const nftType = env[`VITE_ACCESS_GATE_NFT_TYPE_${NET}`]
-  if (!packageId || !gateId || !nftType) return null
-  return {
-    packageId,
-    gateId,
-    nftType,
-    soulbound: (env[`VITE_ACCESS_GATE_SOULBOUND_${NET}`] ?? 'true') !== 'false',
-    priceMist: BigInt(env[`VITE_ACCESS_GATE_PRICE_MIST_${NET}`] || '0'),
+  const gateId = envSource[`VITE_ACCESS_GATE_ID_${NET}`]
+  if (!gateId) return null
+  try {
+    return relayGateConfig(network, {
+      gateId,
+      soulbound: (envSource[`VITE_ACCESS_GATE_SOULBOUND_${NET}`] ?? 'true') !== 'false',
+      priceMist: BigInt(envSource[`VITE_ACCESS_GATE_PRICE_MIST_${NET}`] || '0'),
+    })
+  } catch (e) {
+    console.warn(`[token-deployer-ui] access gate for ${network} disabled: ${e instanceof Error ? e.message : String(e)}`)
+    return null
   }
 }
 
 /** The access gate per Walrus network, or `null` when gating is not configured. */
-export const ACCESS_GATE: Record<WalrusNetwork, AccessGateConfig | null> = {
+export const ACCESS_GATE: Record<WalrusNetwork, RelayGateConfig | null> = {
   testnet: parseAccessGate('testnet'),
   mainnet: parseAccessGate('mainnet'),
 }

package/src/lib/buildPublishTx.ts

@@ -73,16 +73,6 @@ export interface BuildFinalizeArgs {
   gasBudget: bigint
 }
 
-/** Whether a finalize transaction is needed at all for this config. */
-export function needsFinalize(config: TokenConfig, sender: string): boolean {
-  return (
-    config.initialSupply > 0n ||
-    config.supplyPolicy === 'fixed' ||
-    config.metadataPolicy === 'frozen' ||
-    config.recipient.toLowerCase() !== sender.toLowerCase()
-  )
-}
-
 /**
  * Finalize PTB: register the coin in the registry, mint initial supply, apply
  * supply/metadata policy, and route caps to the recipient.

package/src/lib/deploy.ts

@@ -87,10 +87,16 @@ export interface DeployArgs {
   onStep?: (step: DeployStep) => void
 }
 
+/**
+ * Only an explicit `success` effects status counts: a missing status (an executor that did not
+ * return effects) is treated as failure, never as success.
+ */
 function assertSuccess(res: SuiTxResult, what: string): void {
   const status = res.effects?.status?.status
-  if (status && status !== 'success') {
-    throw new Error(`${what} failed: ${res.effects?.status?.error ?? status}`)
+  if (status !== 'success') {
+    throw new Error(
+      `${what} failed: ${res.effects?.status?.error ?? status ?? 'no effects status returned'}`,
+    )
   }
 }
 
@@ -103,7 +109,7 @@ export async function deployToken(args: DeployArgs): Promise<PublishResult> {
   const structName = deriveStructName(config.moduleName)
   const normalizedConfig: TokenConfig = { ...config, structName }
   const recipient = normalizedConfig.recipient || args.sender
-  const isE2e = import.meta.env.VITE_E2E === '1'
+  const isE2e = import.meta.env.MODE === 'e2e' && import.meta.env.VITE_E2E === '1'
 
   onStep?.('patching')
   const moduleBytes = await patchTemplateModule({

package/src/lib/deployExecutor.ts

@@ -1,63 +1,36 @@
-// Builds a deploy Executor using the wallet-adapter's shared signing capability
-// + the app's gRPC client for execution (returns the object changes required by
-// extractPublishResult).
-//
-// The wallet-adapter's own Executor only returns { digest } which is not sufficient
-// for the token deploy flow; we sign via the shared wallet connection but execute
-// via our own client so we can request effects + object types.
+// Builds the deploy Executor from the wallet-adapter's shared executor, executing through this
+// app's gRPC client (`getReadClient`, which E2E builds stub) and asking for the effects and
+// object types `extractPublishResult` needs. Signing, the chain check and the account binding
+// are the wallet-adapter's.
 
-import { fromBase64 } from '@mysten/sui/utils'
-import { useWallet } from '@meddleware/wallet-adapter'
+import { buildExecutor } from '@meddleware/wallet-adapter'
 import type { Transaction } from '@mysten/sui/transactions'
 import { toSuiTxResult } from './deploy.js'
 import type { SuiTxResult, Executor } from './deploy.js'
 import type { Network } from './types.js'
 import { getReadClient } from './readClient.js'
+import { RPC_URLS } from '../config.js'
 
 /**
- * Build a deploy Executor bound to the currently connected wallet (via the
- * wallet-adapter singleton) and the given network's gRPC client.
+ * Build a deploy Executor bound to the currently connected wallet and `network`.
  *
- * The returned executor signs via `sui:signTransaction` and executes via
- * `executeTransaction` with `effects + objectTypes`, mapped by {@link toSuiTxResult}
- * so the caller can extract the published package ID, coin type, TreasuryCap, etc.
+ * `signAndExecute` requests `effects + objectTypes` and maps the result with
+ * {@link toSuiTxResult}, so the caller can extract the published package id, coin type,
+ * TreasuryCap, MetadataCap and the Currency ref. A failed transaction is returned (not thrown);
+ * `deploy.ts` checks its status.
+ *
+ * @throws {Error} if no wallet is connected, it cannot sign transactions, or its account does not
+ *   list `sui:<network>`.
  */
 export async function buildDeployExecutor(network: Network): Promise<Executor> {
-  const { currentWallet, account } = useWallet()
-  const wallet = currentWallet.value
-  const acct = account.value
-  if (!wallet || !acct) throw new Error('Connect a wallet first.')
-
-  const suiClient = getReadClient(network)
-  const chain = `sui:${network}` as const
-
-  const signFeature = wallet.features['sui:signTransaction'] as
-    | {
-        signTransaction: (input: {
-          transaction: Transaction
-          account: typeof acct
-          chain: `sui:${string}`
-        }) => Promise<{ bytes: string; signature: string }>
-      }
-    | undefined
-  if (!signFeature) throw new Error('This wallet cannot sign transactions.')
-
+  const executor = await buildExecutor(network, RPC_URLS[network], { client: getReadClient(network) })
   return {
     async signAndExecute(tx: Transaction): Promise<SuiTxResult> {
-      const { bytes, signature } = await signFeature.signTransaction({
-        transaction: tx,
-        account: acct,
-        chain,
-      })
-      const res = await suiClient.executeTransaction({
-        transaction: fromBase64(bytes),
-        signatures: [signature],
-        include: { effects: true, objectTypes: true },
-      })
-      return toSuiTxResult(res)
+      const { result } = await executor.signAndExecute(tx, { include: { effects: true, objectTypes: true } })
+      return toSuiTxResult(result)
     },
     async waitForTransaction(digest: string): Promise<void> {
-      await suiClient.waitForTransaction({ digest })
+      await executor.waitForTransaction(digest)
     },
   }
 }

package/src/lib/template.ts

@@ -38,6 +38,9 @@ export function initTemplateWasm(): Promise<unknown> {
   if (!initPromise) {
     initPromise = Promise.resolve()
       .then(() => (init as unknown as (i?: unknown) => unknown)(wasmInput))
+      // Deliberate: under Node the package's nodejs build loads its own wasm and this init call
+      // is unnecessary (and may throw). A genuine browser init failure is not hidden — the first
+      // bytecode call in patchTemplateModule then fails with the wasm error.
       .catch(() => undefined)
   }
   return initPromise

package/src/lib/walrus-constants.ts

@@ -1,5 +1,5 @@
-// Lightweight Walrus constants with NO heavy imports, so both the (lazily loaded)
-// `lib/walrus.ts` client and the eagerly rendered `IconPicker.vue` component
+// Lightweight Walrus constants with NO heavy imports, so the eagerly rendered `IconPicker.vue`
+// component and the lazily loaded upload
 // can share a single source of truth without pulling `@mysten/walrus` into the
 // component's chunk.
 

package/src/main.ts

@@ -8,7 +8,7 @@ import './component-styles.css'
 import { configureWasm } from './lib/template.js'
 // Static: readClient is already in the main chunk (IconPicker, WalrusBlobBrowser and listMyTokens
 // import it), so a dynamic import in the E2E block below could not split it out anyway.
-import { getReadClient, setReadClient } from './lib/readClient.js'
+import { setReadClient } from './lib/readClient.js'
 import type { SuiGrpcClient } from '@mysten/sui/grpc'
 import { useColorMode, useSeason } from '@meddleware/ui'
 
@@ -28,9 +28,10 @@ configureWasm(wasmUrl)
 
 // E2E-only: stub the Sui client, register a mock wallet and expose getSuiClient for headless tests.
 // Wrapped in async IIFE to ensure wallet is registered BEFORE app mounts (timing critical).
-// Tree-shaking removes this entire block from production when VITE_E2E !== '1'.
+// Only the `e2e` build mode may set VITE_E2E (vite.config.ts refuses otherwise); both are static,
+// so every other build tree-shakes this entire block (verified by `npm run check:bundle`).
 ;(async () => {
-  if (import.meta.env.VITE_E2E === '1') {
+  if (import.meta.env.MODE === 'e2e' && import.meta.env.VITE_E2E === '1') {
     const { getWallets } = await import('@mysten/wallet-standard')
 
     // Stub gRPC client in place of the network (gRPC-web is binary, so it cannot be faked
@@ -137,9 +138,6 @@ configureWasm(wasmUrl)
       unregister?.()
       unregister = undefined
     }
-
-    // Expose getSuiClient for tests to build transactions
-    w.__getSuiClient = getReadClient
   }
 
   createApp(App).mount('#app')

package/src/styles.css

@@ -58,3 +58,25 @@ footer {
   padding-top: 1.5rem;
   margin-top: 2rem;
 }
+
+/* Skip link (standalone app shell only — not part of the embeddable library styles). */
+.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;
+  }
+}