@meddleware/token-deployer-ui 0.0.1

package/src/components/IconPicker.vue

@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+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 { 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 type { Network } from '../lib/types.js'
+import AppNotice from './AppNotice.vue'
+import FieldHint from './FieldHint.vue'
+import WalrusBlobBrowser from './WalrusBlobBrowser.vue'
+import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
+
+const props = defineProps<{
+  modelValue: string
+  network: Network
+  connected: boolean
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', url: string): void
+  (e: 'blur'): void
+}>()
+
+const { account, signPersonalMessage } = useWallet()
+
+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 {
+  selectedRelayHost,
+  availableRelays,
+  purchaseAccessAvailable,
+  estimatedCost,
+  fileSizeBytes,
+  checkOperatorRelayHealth,
+} = useWalrusRelay(walrusNet, {
+  gateConfigured: accessGate.gateConfigured,
+  hasAccess: accessGate.hasAccess,
+})
+
+const purchasing = ref(false)
+
+async function refreshAccess(): Promise<void> {
+  if (isWalrusNetwork.value && accessGate.gateConfigured && account.value) {
+    await accessGate.checkOwnership(account.value.address)
+  }
+}
+
+/** Buy relay access (mints the gate NFT to the wallet), then re-check ownership. */
+async function purchaseAccess(): Promise<void> {
+  if (!account.value) {
+    uploadError.value = 'Connect your wallet first.'
+    return
+  }
+  purchasing.value = true
+  uploadError.value = null
+  try {
+    const executor = await buildDeployExecutor(props.network as Network)
+    await accessGate.purchase(executor, account.value.address)
+  } catch (e) {
+    uploadError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    purchasing.value = false
+  }
+}
+
+const tab = ref<'url' | 'upload' | 'browse'>('url')
+
+// Upload state
+const uploading = ref(false)
+const status = ref('')
+const uploadError = ref<string | null>(null)
+const fileName = ref('')
+let bytes: Uint8Array | null = null
+
+const permanent = ref(true)
+const maxSizeLabel = `${Math.round(ICON_MAX_BYTES / 1024)} KB`
+const ICON_YEARS = Math.round(ICON_EPOCHS / 26)
+
+const showFreeRelayTip = computed(() => {
+  const publicHost = availableRelays.value.find((r) => r.isPublic)?.host
+  return availableRelays.value.length > 1 && selectedRelayHost.value !== publicHost
+})
+
+onMounted(() => {
+  if (isWalrusNetwork.value) {
+    checkOperatorRelayHealth()
+    void refreshAccess()
+  }
+})
+
+// Re-check NFT ownership whenever the connected account changes.
+watch(
+  () => account.value?.address,
+  () => {
+    void refreshAccess()
+  },
+)
+
+function onFile(e: Event): void {
+  uploadError.value = null
+  bytes = null
+  fileName.value = ''
+  const f = (e.target as HTMLInputElement).files?.[0]
+  if (!f) return
+  const invalid = validateIconFile(f)
+  if (invalid) { uploadError.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) { uploadError.value = 'Choose an image first.'; return }
+  if (!account.value) { uploadError.value = 'Connect your wallet first.'; return }
+  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
+    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, {
+      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,
+      epochs: ICON_EPOCHS,
+      deletable: !permanent.value,
+    })
+    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))
+    tab.value = 'url'
+    status.value = 'Uploaded ✓ — URL filled in above.'
+  } catch (e) {
+    uploadError.value = e instanceof Error ? e.message : String(e)
+    status.value = ''
+  } finally {
+    uploading.value = false
+  }
+}
+
+function onBrowseSelect(url: string): void {
+  emit('update:modelValue', url)
+  tab.value = 'url'
+}
+</script>
+
+<template>
+  <fieldset class="icon-picker">
+    <legend>Icon <span class="hint">(optional)</span></legend>
+
+    <div class="icon-tabs" role="group" aria-label="Icon source">
+      <label :class="{ active: tab === 'url' }">
+        <input type="radio" v-model="tab" value="url" />
+        URL
+      </label>
+      <label
+        :class="{ active: tab === 'upload', disabled: !isWalrusNetwork }"
+        :title="isWalrusNetwork ? undefined : 'Not available on localnet'"
+      >
+        <input type="radio" v-model="tab" value="upload" :disabled="!isWalrusNetwork" />
+        Upload to Walrus
+      </label>
+      <label
+        :class="{ active: tab === 'browse', disabled: !isWalrusNetwork }"
+        :title="isWalrusNetwork ? undefined : 'Not available on localnet'"
+      >
+        <input type="radio" v-model="tab" value="browse" :disabled="!isWalrusNetwork" />
+        My Walrus blobs
+      </label>
+    </div>
+
+    <!-- URL panel -->
+    <div v-show="tab === 'url'" class="icon-panel">
+      <input
+        id="icon"
+        type="url"
+        :value="modelValue"
+        placeholder="https://…"
+        :aria-invalid="error ? true : undefined"
+        :aria-describedby="error ? 'icon-error' : undefined"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        @blur="emit('blur')"
+      />
+      <p v-if="error" id="icon-error" class="field-error">{{ error }}</p>
+    </div>
+
+    <!-- Upload panel -->
+    <div v-show="tab === 'upload' && isWalrusNetwork" class="icon-panel">
+      <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>
+
+      <label class="permanent-toggle">
+        <input type="checkbox" v-model="permanent" />
+        Permanent blob <span class="hint">(cannot be deleted)</span>
+        <FieldHint field-id="blob-permanent">
+          A permanent blob cannot be deleted once registered, even within its storage period.
+          Deletable blobs can be removed early by the owner to reclaim unused storage fees (WAL).
+          Permanent is the safer default for a token icon that should remain available indefinitely.
+        </FieldHint>
+      </label>
+
+      <fieldset v-if="fileName && availableRelays.length > 1" style="margin: 0.5rem 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>
+
+      <AppNotice v-if="fileName && estimatedCost" style="margin: 0.5rem 0">
+        <strong>Estimated cost:</strong> {{ estimatedCost.label }}
+      </AppNotice>
+
+      <!-- NFT-gated relay: the operator relay is live but this wallet lacks the access NFT.
+           The public relay is still available; purchasing unlocks the operator relay. -->
+      <AppNotice v-if="fileName && purchaseAccessAvailable" style="margin: 0.5rem 0">
+        <p style="margin: 0 0 0.5rem">
+          The operator relay requires an access NFT. You can keep using the public relay, or
+          purchase access to support this app’s relay.
+        </p>
+        <button type="button" :disabled="purchasing || !connected" @click="purchaseAccess">
+          {{ purchasing ? 'Purchasing…' : 'Purchase relay access' }}
+        </button>
+      </AppNotice>
+
+      <p v-if="showFreeRelayTip" class="hint" style="margin: 0.5rem 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 + relay fee) in your wallet; two approvals. Stored for
+        ~{{ ICON_YEARS }} years. <span v-if="status">{{ status }}</span>
+      </p>
+      <AppNotice v-if="uploadError" type="error">{{ uploadError }}</AppNotice>
+    </div>
+
+    <!-- Browse panel -->
+    <div v-show="tab === 'browse' && isWalrusNetwork" class="icon-panel">
+      <WalrusBlobBrowser :network="walrusNet" :connected="connected" @select="onBrowseSelect" />
+    </div>
+  </fieldset>
+</template>
+
+<style scoped>
+.icon-tabs {
+  display: flex;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  width: fit-content;
+  margin-bottom: 0.75rem;
+}
+
+.icon-tabs label {
+  display: flex;
+  align-items: center;
+  padding: 0.4rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  background: transparent;
+  border-right: 1px solid var(--border);
+  transition: background 0.15s, color 0.15s;
+  user-select: none;
+}
+
+.icon-tabs label:last-child {
+  border-right: none;
+}
+
+.icon-tabs label.active {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.icon-tabs label.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.icon-tabs input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.icon-panel {
+  padding-top: 0.5rem;
+}
+
+.permanent-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.permanent-toggle input[type='checkbox'] {
+  margin: 0;
+}
+</style>

package/src/components/LicensePicker.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { fetchLicenseList, fetchLicenseText, NO_LICENSE } from '../lib/licenses.js'
+import type { SpdxLicense } from '../lib/licenses.js'
+import FormSelect from './FormSelect.vue'
+import FieldHint from './FieldHint.vue'
+import AppNotice from './AppNotice.vue'
+
+const props = defineProps<{ modelValue: string }>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', id: string): void
+  (e: 'name', name: string): void
+}>()
+
+const popular = ref<SpdxLicense[]>([])
+const all = ref<SpdxLicense[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+const allExceptNone = computed(() => all.value.filter((x) => x.id !== NO_LICENSE.id))
+const currentLicenseName = computed(
+  () => all.value.find((l) => l.id === props.modelValue)?.name ?? props.modelValue,
+)
+
+function emitSelection(id: string): void {
+  emit('update:modelValue', id)
+  const found =
+    all.value.find((l) => l.id === id) ?? (id === NO_LICENSE.id ? NO_LICENSE : undefined)
+  emit('name', found?.name ?? id)
+}
+
+const selectModel = computed({
+  get: () => props.modelValue,
+  set: (id: string) => emitSelection(id),
+})
+
+onMounted(async () => {
+  try {
+    const cat = await fetchLicenseList()
+    popular.value = cat.popular
+    all.value = cat.all
+    emitSelection(props.modelValue)
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loading.value = false
+  }
+})
+
+// License view modal
+const licenseDialogEl = ref<HTMLDialogElement>()
+const licenseText = ref<string | null>(null)
+const licenseLoading = ref(false)
+const licenseError = ref<string | null>(null)
+
+async function openLicenseModal(): Promise<void> {
+  licenseError.value = null
+  if (props.modelValue !== NO_LICENSE.id) {
+    licenseLoading.value = true
+    try {
+      licenseText.value = await fetchLicenseText(props.modelValue)
+    } catch (e) {
+      licenseError.value = e instanceof Error ? e.message : String(e)
+    } finally {
+      licenseLoading.value = false
+    }
+  }
+  licenseDialogEl.value?.showModal()
+}
+</script>
+
+<template>
+  <div>
+    <label for="license-select">
+      License
+      <FieldHint field-id="license-select">
+        Applies only to the downloadable Move source package — embedded in the LICENSE file and
+        source headers. Has <b>no effect on the on-chain token</b> or its transferability.
+        Choose <b>CC0-1.0</b> (default) for public domain. Choose <b>None</b> to retain all rights.
+      </FieldHint>
+    </label>
+    <div class="license-row">
+      <FormSelect
+        id="license-select"
+        v-model="selectModel"
+        :disabled="loading || Boolean(error)"
+        aria-describedby="license-load-status"
+      >
+        <option :value="NO_LICENSE.id" :title="NO_LICENSE.name">{{ NO_LICENSE.id }}</option>
+        <optgroup v-if="popular.length" label="Popular">
+          <option
+            v-for="l in popular"
+            :key="'p-' + l.id"
+            :value="l.id"
+            :title="`${l.id} — ${l.name}`"
+          >{{ l.id }}</option>
+        </optgroup>
+        <optgroup v-if="all.length" label="All licenses">
+          <option
+            v-for="l in allExceptNone"
+            :key="l.id"
+            :value="l.id"
+            :title="`${l.id} — ${l.name}`"
+          >{{ l.id }}</option>
+        </optgroup>
+      </FormSelect>
+      <button type="button" class="view-btn" :disabled="loading" @click="openLicenseModal">
+        View
+      </button>
+    </div>
+    <p id="license-load-status" class="hint" aria-live="polite">
+      <span v-if="loading"><span class="spinner" aria-hidden="true"></span> Loading licenses from SPDX…</span>
+      <span v-else-if="error" class="field-error">Couldn't load the license list: {{ error }}</span>
+    </p>
+  </div>
+
+  <dialog ref="licenseDialogEl" class="license-dialog" @click.self="licenseDialogEl?.close()">
+    <div class="dialog-header">
+      <h2>{{ currentLicenseName }}</h2>
+      <button
+        type="button"
+        aria-label="Close"
+        style="background: none; border: none; font-size: 1.5rem; padding: 0; cursor: pointer; color: var(--text)"
+        @click="licenseDialogEl?.close()"
+      >×</button>
+    </div>
+    <div v-if="licenseLoading" style="padding: 1rem 0">
+      <span class="spinner" aria-hidden="true"></span> Loading…
+    </div>
+    <AppNotice v-else-if="licenseError" type="error">{{ licenseError }}</AppNotice>
+    <template v-else-if="modelValue === NO_LICENSE.id">
+      <p>No LICENSE file will be generated. All rights are reserved by the author.</p>
+    </template>
+    <template v-else>
+      <p style="margin-top: 0">
+        <a
+          :href="`https://spdx.org/licenses/${modelValue}.html`"
+          target="_blank"
+          rel="noopener noreferrer"
+        >View on SPDX ↗</a>
+      </p>
+      <pre class="license-text">{{ licenseText }}</pre>
+    </template>
+    <div style="margin-top: 1rem; text-align: right">
+      <button type="button" @click="licenseDialogEl?.close()">Close</button>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+.license-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.license-row :deep(.select-wrapper) {
+  flex: 1;
+}
+
+.view-btn {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.license-dialog {
+  width: min(680px, 92vw);
+}
+
+.license-text {
+  white-space: pre-wrap;
+  overflow-y: auto;
+  max-height: 55vh;
+  font-size: 0.8rem;
+  font-family: monospace;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.75rem;
+  margin: 0;
+}
+</style>

package/src/components/ResultPanel.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { PublishResult, TokenConfig } from '../lib/types.js'
+import { explorerObjectUrl } from '../config.js'
+import { generatePackageZip } from '../lib/generatePackage.js'
+import { fetchLicenseText } from '../lib/licenses.js'
+import GithubPush from './GithubPush.vue'
+import AppNotice from './AppNotice.vue'
+
+const props = defineProps<{ result: PublishResult; config: TokenConfig }>()
+defineEmits<{ (e: 'restart'): void }>()
+
+const downloading = ref(false)
+const downloadError = ref<string | null>(null)
+
+const packageUrl = computed(() => explorerObjectUrl(props.result.network, props.result.packageId))
+
+async function downloadPackage(): Promise<void> {
+  downloading.value = true
+  downloadError.value = null
+  try {
+    const licenseText = await fetchLicenseText(props.config.license)
+    const zip = generatePackageZip({
+      config: props.config,
+      licenseText: licenseText ?? undefined,
+      result: props.result,
+    })
+    const blob = new Blob([zip as BlobPart], { type: 'application/zip' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${props.config.packageName}.zip`
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+    URL.revokeObjectURL(url)
+  } catch (e) {
+    downloadError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    downloading.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="card" aria-labelledby="result-h">
+    <h2 id="result-h">🎉 {{ config.symbol }} is live on {{ result.network }}</h2>
+
+    <dl>
+      <dt>Coin type</dt>
+      <dd class="mono">{{ result.coinType }}</dd>
+      <dt>Package</dt>
+      <dd class="mono">
+        <a :href="packageUrl" target="_blank" rel="noopener noreferrer">
+          {{ result.packageId }}
+        </a>
+      </dd>
+      <dt v-if="result.treasuryCapId">TreasuryCap</dt>
+      <dd v-if="result.treasuryCapId" class="mono">{{ result.treasuryCapId }}</dd>
+      <dt v-if="result.metadataCapId">MetadataCap</dt>
+      <dd v-if="result.metadataCapId" class="mono">{{ result.metadataCapId }}</dd>
+      <dt>Package code</dt>
+      <dd>{{ result.upgradeCapId ? 'Upgradeable' : 'Immutable (UpgradeCap burned)' }}</dd>
+    </dl>
+
+    <div class="row">
+      <button type="button" class="primary" :disabled="downloading" @click="downloadPackage">
+        <span v-if="downloading" class="spinner" aria-hidden="true"></span>
+        Download source package (.zip)
+      </button>
+      <button type="button" @click="$emit('restart')">Deploy another</button>
+    </div>
+    <AppNotice v-if="downloadError" type="error">{{ downloadError }}</AppNotice>
+
+    <div style="margin-top: 1rem">
+      <GithubPush :config="config" :result="result" />
+    </div>
+
+    <p v-once class="hint" style="margin-top: 1rem">
+      The download is the full, buildable Move package (matching this on-chain deployment) — your
+      TreasuryCap grants minting rights; keep it safe. This tool takes no custody of your token.
+    </p>
+    <p v-once class="hint">
+      You are the sole author of this token. This tool does not review or endorse it, and its
+      appearance here is not a mark of legitimacy.
+    </p>
+  </section>
+</template>