@meddleware/token-deployer-ui 0.0.1

package/src/components/WalrusIconUpload.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useWallet } from '@meddleware/wallet-adapter'
+import { buildDeployExecutor } from '../lib/deployExecutor.js'
+import { useWalrusRelay } from '../composables/useWalrusRelay.js'
+import { ICON_EPOCHS } from '../lib/walrus-constants.js'
+import { ICON_MAX_BYTES, validateIconFile } from '../config.js'
+import type { WalrusNetwork } from '../lib/walrus.js'
+import type { Network } from '../lib/types.js'
+import AppNotice from './AppNotice.vue'
+// Vite serves the Walrus wasm as an asset URL (lightweight import — just the URL).
+import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
+
+const props = defineProps<{ network: WalrusNetwork; connected: boolean }>()
+const emit = defineEmits<{ (e: 'uploaded', url: string): void }>()
+
+const { account } = useWallet()
+const {
+  selectedRelayHost,
+  availableRelays,
+  estimatedCost,
+  fileSizeBytes,
+  checkOperatorRelayHealth,
+} = useWalrusRelay(props.network)
+
+const uploading = ref(false)
+const status = ref('')
+const error = ref<string | null>(null)
+const fileName = ref('')
+let bytes: Uint8Array | null = null
+
+const maxSizeLabel = `${Math.round(ICON_MAX_BYTES / 1024)} KB`
+const ICON_YEARS = Math.round(ICON_EPOCHS / 26)
+
+onMounted(() => {
+  checkOperatorRelayHealth()
+})
+
+const showPublicRelayNotice = computed(() => availableRelays.value.length > 1)
+
+const showFreeRelayTip = computed(() => {
+  const publicHost = availableRelays.value.find((r) => r.isPublic)?.host
+  return showPublicRelayNotice.value && selectedRelayHost.value !== publicHost
+})
+
+function onFile(e: Event): void {
+  error.value = null
+  bytes = null
+  fileName.value = ''
+  const f = (e.target as HTMLInputElement).files?.[0]
+  if (!f) return
+
+  // UX/cost guard only — the authoritative cap is the edge (relay) body limit.
+  const invalid = validateIconFile(f)
+  if (invalid) {
+    error.value = invalid
+    return
+  }
+
+  fileName.value = f.name
+  fileSizeBytes.value = f.size
+  const reader = new FileReader()
+  reader.onload = () => {
+    bytes = new Uint8Array(reader.result as ArrayBuffer)
+  }
+  reader.readAsArrayBuffer(f)
+}
+
+function onRelayChange(newHost: string): void {
+  selectedRelayHost.value = newHost
+}
+
+async function upload(): Promise<void> {
+  if (!bytes) {
+    error.value = 'Choose an image first.'
+    return
+  }
+  if (!account.value) {
+    error.value = 'Connect your wallet first.'
+    return
+  }
+  uploading.value = true
+  error.value = null
+  try {
+    // Lazily load the heavy @mysten/walrus code and Sui client only on demand.
+    const { createWalrusClient, createBlobUploadFlow, walrusBlobUrl } =
+      await import('../lib/walrus.js')
+    const { getReadClient } = await import('../lib/readClient.js')
+    const executor = await buildDeployExecutor(props.network as Network)
+    const suiClient = getReadClient(props.network as Network)
+    const client = createWalrusClient(props.network, {
+      wasmUrl: walrusWasmUrl,
+      uploadRelayHost: selectedRelayHost.value,
+    })
+    const flow = createBlobUploadFlow(client, bytes)
+
+    status.value = 'Encoding…'
+    await flow.encode()
+
+    // Disclose the relay fee before asking for a signature. `calculateUploadRelayTip`
+    // takes the UNENCODED size and throws if the tip exceeds the client max guard.
+    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 for disclosure; the register step surfaces any real tip error.
+    }
+
+    status.value = `Registering blob (approve in wallet)…${feeNote}`
+    const regTx = flow.register({
+      owner: account.value.address,
+      epochs: ICON_EPOCHS,
+      deletable: false,
+    })
+    // Set sender and build with the Sui client to resolve CoinWithBalance intents
+    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()
+    // Set sender and build the certify transaction with the Sui client
+    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('uploaded', walrusBlobUrl(props.network, blob.blobId))
+    status.value = 'Uploaded ✓ — URL filled in above.'
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+    status.value = ''
+  } finally {
+    uploading.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <label for="walrus-file" class="hint" style="display: block; font-weight: 600">
+      …or upload an image to Walrus
+    </label>
+    <div class="row">
+      <input
+        id="walrus-file"
+        type="file"
+        accept="image/*"
+        aria-label="Choose an image to upload to Walrus"
+        aria-describedby="walrus-help"
+        style="width: auto"
+        @change="onFile"
+      />
+      <button type="button" :disabled="uploading || !connected || !fileName" @click="upload">
+        <span v-if="uploading" class="spinner" aria-hidden="true"></span>
+        Upload to Walrus
+      </button>
+    </div>
+
+    <!-- Relay selection (shown only if multiple relays available) -->
+    <fieldset v-if="fileName && availableRelays.length > 1" style="margin: 0.75rem 0">
+      <legend>Upload relay</legend>
+      <div style="display: flex; flex-direction: column; gap: 0.5rem">
+        <label
+          v-for="option in availableRelays"
+          :key="option.host"
+          style="display: flex; align-items: center; gap: 0.5rem"
+        >
+          <input
+            type="radio"
+            :value="option.host"
+            :checked="selectedRelayHost === option.host"
+            @change="(e) => onRelayChange((e.target as HTMLInputElement).value)"
+          />
+          <span>{{ option.label }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    <!-- Cost estimation (shown after file selection) -->
+    <AppNotice v-if="fileName && estimatedCost" style="margin: 0.75rem 0">
+      <strong>Estimated cost:</strong> {{ estimatedCost.label }}
+    </AppNotice>
+
+    <!-- Public relay notice -->
+    <p v-if="showFreeRelayTip" class="hint" style="margin: 0.75rem 0">
+      Tip: select the public relay above to avoid the relay fee.
+    </p>
+
+    <p id="walrus-help" class="hint" aria-live="polite">
+      Max {{ maxSizeLabel }} · PNG/JPEG/WebP/SVG. Requires <strong>WAL</strong> (storage) and
+      <strong>SUI</strong> (gas + a small relay fee) in your wallet; two wallet approvals. Blob
+      stored for ~{{ ICON_YEARS }} years.
+      <span v-if="status">{{ status }}</span>
+    </p>
+    <AppNotice v-if="error" type="error">{{ error }}</AppNotice>
+  </div>
+</template>

package/src/composables/useAccessGate.ts

@@ -0,0 +1,122 @@
+import { computed, ref } from 'vue'
+import { ACCESS_GATE } from '../config.js'
+import type { WalrusNetwork } from '../config.js'
+import {
+  fetchAccessNfts,
+  buildPurchaseTx,
+  buildConsumeTx,
+  fetchRelayChallenge,
+  personalMessageForNonce,
+  buildAccessProofToken,
+} from '../lib/accessGate.js'
+import type { AccessGateConfig, OwnedObjectsClient } from '../lib/accessGate.js'
+import type { Executor } from '../lib/deploy.js'
+import type { Transaction } from '@mysten/sui/transactions'
+
+/** A wallet personal-message signer, as exposed by `useWallet().signPersonalMessage`. */
+export type PersonalMessageSigner = (message: Uint8Array) => Promise<{ signature: string }>
+
+/**
+ * Reactive NFT-gate state for the operator relay.
+ *
+ * When no gate is configured for the network (`ACCESS_GATE[network] == null`), the relay is
+ * treated as OPEN (`hasAccess === true`) and this composable is inert — behaviour is
+ * unchanged from before gating existed. When a gate IS configured, `checkOwnership` decides
+ * access with a single `getOwnedObjects` call (the same cheap pattern as the relay health
+ * check), and `purchase`/`buildRelayAccessToken` drive the buy + prove flows.
+ */
+export function useAccessGate(
+  network: WalrusNetwork,
+  deps: {
+    getClient: (network: WalrusNetwork) => OwnedObjectsClient
+    /** Override the configured gate (mainly for testing); defaults to `ACCESS_GATE[network]`. */
+    gate?: AccessGateConfig | null
+  },
+) {
+  const gate: AccessGateConfig | null = deps.gate !== undefined ? deps.gate : ACCESS_GATE[network]
+  const gateConfigured = gate !== null
+
+  // No gate → open. Gate → unknown until checked.
+  const hasAccess = ref<boolean | null>(gateConfigured ? null : true)
+  const usesRemaining = ref<number | null>(null)
+  /** Object id of the held access NFT (for the single-use consume step); null if none. */
+  const nftId = ref<string | null>(null)
+  const checking = ref(false)
+  const error = ref<string | null>(null)
+
+  /** Query whether `address` holds the gate NFT. Cheap; safe to call on connect. */
+  async function checkOwnership(address: string): Promise<void> {
+    if (!gate) {
+      hasAccess.value = true
+      return
+    }
+    checking.value = true
+    error.value = null
+    try {
+      const nfts = await fetchAccessNfts(deps.getClient(network), address, gate.nftType, gate.gateId)
+      hasAccess.value = nfts.length > 0
+      usesRemaining.value = nfts.length ? nfts[0].usesRemaining : null
+      nftId.value = nfts.length ? nfts[0].objectId : null
+    } catch (e) {
+      // A failed check must NOT hard-block the user: leave access unknown/false but keep the
+      // purchase path available (the gateway re-verifies server-side regardless).
+      hasAccess.value = false
+      nftId.value = null
+      error.value = e instanceof Error ? e.message : String(e)
+    } finally {
+      checking.value = false
+    }
+  }
+
+  /** Purchase access via the connected wallet, then re-check ownership. */
+  async function purchase(executor: Executor, address: string): Promise<void> {
+    if (!gate) throw new Error('No access gate configured for this network.')
+    const tx = buildPurchaseTx(gate)
+    const res = await executor.signAndExecute(tx)
+    if (res.digest) await executor.waitForTransaction(res.digest).catch(() => {})
+    await checkOwnership(address)
+  }
+
+  /** Build the consume PTB for a single-use NFT (woven into the upload flow before proving). */
+  function buildConsume(nftId: string, nonce: string): Transaction {
+    if (!gate) throw new Error('No access gate configured for this network.')
+    return buildConsumeTx(gate, nftId, nonce)
+  }
+
+  /**
+   * Fetch a challenge from the gateway (served at the operator relay host), sign it, and
+   * return the base64 access-proof token to pass to the Walrus client as the relay auth
+   * token. For single-use gates supply the on-chain consume `consumeDigest`.
+   */
+  async function buildRelayAccessToken(opts: {
+    relayHost: string
+    address: string
+    sign: PersonalMessageSigner
+    consumeDigest?: string
+  }): Promise<string> {
+    const challenge = await fetchRelayChallenge(opts.relayHost)
+    const { signature } = await opts.sign(personalMessageForNonce(challenge.nonce))
+    return buildAccessProofToken({
+      address: opts.address,
+      nonce: challenge.nonce,
+      signature,
+      consumeDigest: opts.consumeDigest,
+    })
+  }
+
+  return {
+    gate,
+    gateConfigured,
+    hasAccess,
+    usesRemaining,
+    nftId,
+    checking,
+    error,
+    /** Convenience: gate configured AND access confirmed. */
+    accessGranted: computed(() => !gateConfigured || hasAccess.value === true),
+    checkOwnership,
+    purchase,
+    buildConsume,
+    buildRelayAccessToken,
+  }
+}

package/src/composables/useColorMode.ts

@@ -0,0 +1,76 @@
+import { ref, watch, type Ref } from 'vue'
+
+/**
+ * Colour-mode state manager (light | dark | system). Sets `data-theme` on
+ * <html>, persists the choice, and follows the OS in `system` mode.
+ *
+ * Vendored mirror of `@meddleware/ui`'s `useColorMode` for visual/UX parity with
+ * the dashboard — this repo is self-contained (no cross-repo links).
+ * TODO(unify): consume `@meddleware/ui` once it is published.
+ */
+
+export type ColorMode = 'light' | 'dark' | 'system'
+
+const STORAGE_KEY = 'sui-deployer:color-mode'
+
+const mode: Ref<ColorMode> = ref<ColorMode>('system')
+let initialized = false
+
+function systemPrefersDark(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  )
+}
+
+function resolveDark(m: ColorMode): boolean {
+  return m === 'dark' || (m === 'system' && systemPrefersDark())
+}
+
+function apply(m: ColorMode): void {
+  if (typeof document === 'undefined') return
+  document.documentElement.setAttribute('data-theme', resolveDark(m) ? 'dark' : 'light')
+}
+
+export function useColorMode(defaultMode: ColorMode = 'system') {
+  if (!initialized) {
+    initialized = true
+    let stored: ColorMode | null = null
+    try {
+      stored =
+        typeof localStorage !== 'undefined'
+          ? (localStorage.getItem(STORAGE_KEY) as ColorMode | null)
+          : null
+    } catch {
+      /* no storage — ignore */
+    }
+    mode.value = stored ?? defaultMode
+    apply(mode.value)
+
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (mode.value === 'system') apply('system')
+      })
+    }
+
+    watch(mode, (m) => {
+      apply(m)
+      try {
+        if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, m)
+      } catch {
+        /* ignore */
+      }
+    })
+  }
+
+  function set(m: ColorMode): void {
+    mode.value = m
+  }
+
+  function cycle(): void {
+    set(mode.value === 'light' ? 'dark' : mode.value === 'dark' ? 'system' : 'light')
+  }
+
+  return { mode, set, cycle, isDark: () => resolveDark(mode.value) }
+}

package/src/composables/useWalrusRelay.ts

@@ -0,0 +1,21 @@
+// Thin wrapper around the shared `@meddleware/walrus-relay-ui` composable: injects
+// this app's per-network relay host pair so the relay-selection + tip-estimation logic
+// lives in exactly one place (DRY). The return shape is unchanged, so consumers
+// (`WalrusIconUpload.vue`, `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'
+
+export type { RelayAccessOptions, RelayOption }
+
+/**
+ * Manage Walrus relay selection and cost estimation for `network`.
+ * See `@meddleware/walrus-relay-ui`'s `useWalrusRelay` for the full behaviour.
+ */
+export function useWalrusRelay(network: WalrusNetwork, access: RelayAccessOptions = {}) {
+  return useSharedWalrusRelay(
+    { operator: WALRUS_RELAY_HOSTS[network], public: PUBLIC_WALRUS_RELAY_HOSTS[network] },
+    access,
+  )
+}

package/src/config.ts

@@ -0,0 +1,185 @@
+// Deployment-wide configuration. Operator values (fee + treasury) are read from
+// 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'
+
+const env = (import.meta as unknown as { env?: Record<string, string | undefined> }).env ?? {}
+
+/**
+ * Public JSON-RPC fullnode URLs per network (overridable via `VITE_RPC_*`).
+ *
+ * NOTE: the official testnet fullnode (`fullnode.testnet.sui.io`) now serves gRPC
+ * only and returns 404 for JSON-RPC, so a JSON-RPC-capable endpoint is used for
+ * testnet. Operators should set `VITE_RPC_*` to their preferred (often paid) RPC
+ * for production to avoid public rate limits.
+ */
+export const RPC_URLS: Record<Network, string> = {
+  mainnet: env.VITE_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
+  testnet: env.VITE_RPC_TESTNET || 'https://sui-testnet-rpc.publicnode.com',
+  localnet: env.VITE_RPC_LOCALNET || 'http://127.0.0.1:9000',
+}
+
+/** Sui explorer base (coin/object links in the result screen). */
+export function explorerObjectUrl(network: Network, id: string): string {
+  return `https://suiscan.xyz/${network}/object/${id}`
+}
+
+/**
+ * The trivial fee (MIST), split from the user's gas coin into the operator
+ * treasury inside the publish PTB. Override with VITE_FEE_MIST.
+ */
+export const FEE_MIST: bigint = BigInt(env.VITE_FEE_MIST || '1000000000') // 1 SUI default
+
+const ZERO_ADDR = '0x0000000000000000000000000000000000000000000000000000000000000000'
+
+/** Operator treasury per network (set VITE_FEE_TREASURY_* before launch). */
+export const FEE_TREASURY: Record<Network, string> = {
+  mainnet: env.VITE_FEE_TREASURY_MAINNET || ZERO_ADDR,
+  testnet: env.VITE_FEE_TREASURY_TESTNET || ZERO_ADDR,
+  localnet: env.VITE_FEE_TREASURY_LOCALNET || ZERO_ADDR,
+}
+
+/** True when a real treasury has been configured for the network. */
+export function isFeeConfigured(network: Network): boolean {
+  return FEE_TREASURY[network] !== ZERO_ADDR
+}
+
+/** Gas budget for the publish transaction (MIST). */
+export const PUBLISH_GAS_BUDGET: bigint = BigInt(env.VITE_PUBLISH_GAS_BUDGET || '500000000')
+
+/** Networks selectable in the UI. Ship testnet first. */
+export const SELECTABLE_NETWORKS: Network[] = ['testnet', 'mainnet']
+
+// ---------------------------------------------------------------------------
+// Walrus icon-upload configuration
+// ---------------------------------------------------------------------------
+// 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
+// README.md / CLAUDE.md for the operator side.
+
+/** A Walrus network — a strict subset of {@link Network} (no localnet). */
+export type WalrusNetwork = 'testnet' | 'mainnet'
+
+/** Public Mysten-operated upload relays — the fallback when no operator relay is set. */
+export const PUBLIC_WALRUS_RELAY_HOSTS: Record<WalrusNetwork, string> = {
+  testnet: 'https://upload-relay.testnet.walrus.space',
+  mainnet: 'https://upload-relay.mainnet.walrus.space',
+}
+
+/**
+ * Upload relay host per Walrus network.
+ *
+ * Fallback order: `VITE_WALRUS_RELAY_*` (the operator's own relay — the only way
+ * to *collect* the native tip as revenue) → the public Mysten relay. Uploads
+ * through the public relay still work but tip Mysten, not the operator, so they
+ * earn nothing. A user may also override this at runtime by entering a relay URL.
+ */
+export const WALRUS_RELAY_HOSTS: Record<WalrusNetwork, string> = {
+  testnet: env.VITE_WALRUS_RELAY_TESTNET || PUBLIC_WALRUS_RELAY_HOSTS.testnet,
+  mainnet: env.VITE_WALRUS_RELAY_MAINNET || PUBLIC_WALRUS_RELAY_HOSTS.mainnet,
+}
+
+/** True when an operator-owned relay (not the public fallback) is configured. */
+export function isOperatorRelayConfigured(network: WalrusNetwork): boolean {
+  return WALRUS_RELAY_HOSTS[network] !== PUBLIC_WALRUS_RELAY_HOSTS[network]
+}
+
+/**
+ * gRPC fullnode URL for the Walrus icon-upload client (a `SuiGrpcClient`).
+ *
+ * IMPORTANT: this is a **gRPC** endpoint and is intentionally *separate* from
+ * {@link RPC_URLS} (the JSON-RPC endpoints used by the deploy path). The two protocols
+ * are not interchangeable — pointing the Walrus gRPC client at a JSON-RPC URL breaks it —
+ * so this has its own `VITE_WALRUS_RPC_*` override rather than reusing `VITE_RPC_*`.
+ * Defaults to the public gRPC fullnodes (rate-limited); set your own for production.
+ */
+export const WALRUS_RPC_URLS: Record<WalrusNetwork, string> = {
+  testnet: env.VITE_WALRUS_RPC_TESTNET || 'https://fullnode.testnet.sui.io:443',
+  mainnet: env.VITE_WALRUS_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
+}
+
+/**
+ * Maximum relay tip the client will pay, in MIST.
+ *
+ * COUPLING CONSTRAINT: the Walrus SDK **hard-fails** an upload (throws) if the
+ * relay's configured tip exceeds this value. It must therefore be set with
+ * generous headroom *above* whatever tip the operator's relay charges — raising
+ * the relay tip past this ceiling breaks uploads until the frontend is
+ * redeployed with a higher value. Default 0.05 SUI: comfortably above a
+ * cents-scale icon tip, well below anything a user would object to.
+ */
+export const WALRUS_MAX_TIP_MIST: bigint = BigInt(env.VITE_WALRUS_MAX_TIP_MIST || '50000000')
+
+// ---------------------------------------------------------------------------
+// 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`.
+
+function parseAccessGate(network: WalrusNetwork): AccessGateConfig | 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'),
+  }
+}
+
+/** The access gate per Walrus network, or `null` when gating is not configured. */
+export const ACCESS_GATE: Record<WalrusNetwork, AccessGateConfig | null> = {
+  testnet: parseAccessGate('testnet'),
+  mainnet: parseAccessGate('mainnet'),
+}
+
+/** True when an NFT gate is configured for the network's operator relay. */
+export function isAccessGateConfigured(network: WalrusNetwork): boolean {
+  return ACCESS_GATE[network] !== null
+}
+
+/**
+ * Maximum icon file size, in bytes (default 100 KiB).
+ *
+ * This is a UX / predictable-cost guard only — NOT a security control. The
+ * authoritative cap is a hard request-body limit at the edge (Cloudflare /
+ * reverse proxy in front of the relay); a malicious client bypasses this one.
+ */
+export const ICON_MAX_BYTES: number = Number(env.VITE_ICON_MAX_BYTES || String(100 * 1024))
+
+/** Accepted icon MIME types (override via `VITE_ICON_ALLOWED_TYPES`, comma-separated). */
+export const ICON_ALLOWED_TYPES: string[] = (
+  env.VITE_ICON_ALLOWED_TYPES || 'image/png,image/jpeg,image/webp,image/svg+xml'
+)
+  .split(',')
+  .map((t) => t.trim())
+  .filter(Boolean)
+
+/**
+ * Validate a chosen icon file against the {@link ICON_ALLOWED_TYPES} /
+ * {@link ICON_MAX_BYTES} gate. Returns a user-facing error message, or `null`
+ * when the file is acceptable.
+ *
+ * UX / predictable-cost guard only — NOT a security control (a malicious client
+ * bypasses it; the authoritative cap is the edge request-body limit).
+ */
+export function validateIconFile(file: { type: string; size: number }): string | null {
+  if (ICON_ALLOWED_TYPES.length && !ICON_ALLOWED_TYPES.includes(file.type)) {
+    const allowed = ICON_ALLOWED_TYPES.map((t) => t.replace('image/', '')).join(', ')
+    return `Unsupported image type${file.type ? ` (${file.type})` : ''}. Allowed: ${allowed}.`
+  }
+  if (file.size > ICON_MAX_BYTES) {
+    return `Image is too large (${Math.round(file.size / 1024)} KB). Maximum is ${Math.round(
+      ICON_MAX_BYTES / 1024,
+    )} KB.`
+  }
+  return null
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default as TokenDeployerView } from './components/TokenDeployerView.vue'