@meddleware/token-deployer-ui 0.0.1

package/src/components/ReviewPanel.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { TokenConfig, Network } from '../lib/types.js'
+import { FEE_MIST } from '../config.js'
+import AppNotice from './AppNotice.vue'
+
+const props = defineProps<{ config: TokenConfig; network: Network }>()
+defineEmits<{ (e: 'back'): void; (e: 'confirm'): void }>()
+
+const feeSui = Number(FEE_MIST) / 1e9
+</script>
+
+<template>
+  <section class="card" aria-labelledby="review-h">
+    <h2 id="review-h">Review — deploying to {{ props.network }}</h2>
+
+    <AppNotice>
+      These values are <strong>permanent</strong> once published: symbol
+      <span class="mono">{{ config.symbol }}</span
+      >, name <span class="mono">{{ config.name }}</span
+      >, decimals <span class="mono">{{ config.decimals }}</span
+      >, and the coin type
+      <span class="mono">&lt;package&gt;::{{ config.moduleName }}::{{ config.structName }}</span
+      >.
+    </AppNotice>
+
+    <dl class="grid2" v-once>
+      <div>
+        <dt>Initial supply</dt>
+        <dd>{{ config.initialSupply.toString() }}</dd>
+      </div>
+      <div>
+        <dt>Supply policy</dt>
+        <dd>{{ config.supplyPolicy }}</dd>
+      </div>
+      <div>
+        <dt>Metadata</dt>
+        <dd>{{ config.metadataPolicy }}</dd>
+      </div>
+      <div>
+        <dt>Package code</dt>
+        <dd>{{ config.packagePolicy }}</dd>
+      </div>
+      <div>
+        <dt>License (source only)</dt>
+        <dd>{{ config.license }}</dd>
+      </div>
+      <div>
+        <dt>Recipient</dt>
+        <dd class="mono">{{ config.recipient || 'your wallet' }}</dd>
+      </div>
+    </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.
+    </p>
+
+    <p v-once class="hint">
+      You are the sole author of this token and fully responsible for its details and use. This tool
+      does not review, verify, or endorse tokens or their creators, and takes no custody of your
+      token or caps.
+    </p>
+
+    <div class="row" style="margin-top: 1rem">
+      <button type="button" @click="$emit('back')">Back</button>
+      <button type="button" class="primary" @click="$emit('confirm')">Confirm &amp; deploy</button>
+    </div>
+  </section>
+</template>

package/src/components/TermsDialog.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{ open: boolean }>()
+const emit = defineEmits<{
+  (e: 'accept'): void
+  (e: 'cancel'): void
+}>()
+
+const el = ref<HTMLDialogElement>()
+
+watch(
+  () => props.open,
+  (v) => (v ? el.value?.showModal() : el.value?.close()),
+)
+</script>
+
+<template>
+  <dialog ref="el" @click.self="$emit('cancel')" @cancel.prevent="$emit('cancel')">
+    <div class="dialog-header">
+      <h2>Before you deploy</h2>
+    </div>
+    <ul>
+      <li>
+        All operations — bytecode compilation, transaction construction, and signing — take place
+        entirely <strong>client-side</strong>, meaning on your computer. No code runs on our
+        servers, and no server has any visibility into or control over what happens on your machine.
+      </li>
+      <li>
+        This is a neutral, self-service tool. The operator does not review, approve, or endorse any
+        token deployed with it.
+      </li>
+      <li>
+        You are solely responsible for your token, its content, and its use — including compliance
+        with all applicable laws in your jurisdiction.
+      </li>
+      <li>
+        Please don't create tokens that misrepresent projects, impersonate other assets, or
+        facilitate fraud. We can't actually see what you're doing from here, but we thought we'd
+        mention it. Bad vibes.
+      </li>
+      <li>
+        On-chain transactions are irreversible. Review your configuration carefully before
+        confirming.
+      </li>
+      <li>
+        The operator accepts no liability for financial loss, legal consequences, or any harm
+        arising from your use of this tool.
+      </li>
+    </ul>
+    <p style="margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--muted)">
+      By continuing, you confirm that you have read and accept these terms.
+    </p>
+    <div class="terms-actions">
+      <button type="button" class="primary" @click="$emit('accept')">I understand — continue</button>
+      <button type="button" @click="$emit('cancel')">Cancel</button>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+ul {
+  padding-left: 1.25rem;
+  margin: 0 0 1rem;
+  line-height: 1.6;
+}
+
+ul li {
+  margin-bottom: 0.6rem;
+}
+
+ul li:last-child {
+  margin-bottom: 0;
+}
+
+.terms-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+</style>

package/src/components/TokenDeployerView.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useWallet, useNetwork, WalletGuard } from '@meddleware/wallet-adapter'
+import ConfigForm from './ConfigForm.vue'
+import ReviewPanel from './ReviewPanel.vue'
+import DeployProgress from './DeployProgress.vue'
+import ResultPanel from './ResultPanel.vue'
+import TermsDialog from './TermsDialog.vue'
+import AppNotice from './AppNotice.vue'
+import { emptyForm, toTokenConfig } from '../lib/form.js'
+import { validateForm, isValid } from '../lib/validation.js'
+import { deployToken } from '../lib/deploy.js'
+import type { DeployStep } from '../lib/deploy.js'
+import { buildDeployExecutor } from '../lib/deployExecutor.js'
+import { FEE_MIST, FEE_TREASURY, PUBLISH_GAS_BUDGET, isFeeConfigured } from '../config.js'
+import { extractErrorMessage } from '../lib/errors.js'
+import type { Network, PublishResult } from '../lib/types.js'
+
+type Step = 'form' | 'review' | 'deploying' | 'done'
+
+const { account } = useWallet()
+const { network } = useNetwork()
+
+const form = reactive(emptyForm())
+const step = ref<Step>('form')
+const deployStep = ref<DeployStep | null>(null)
+const deployError = ref<string | null>(null)
+const result = ref<PublishResult | null>(null)
+const termsAccepted = ref(localStorage.getItem('sui-deployer:terms-accepted') === '1')
+const showTerms = ref(false)
+
+const errors = computed(() => validateForm(form))
+const config = computed(() => toTokenConfig(form))
+const connected = computed(() => Boolean(account.value))
+const canProceed = computed(() => isValid(errors.value) && connected.value)
+
+function goReview(): void {
+  if (!canProceed.value) return
+  if (!termsAccepted.value) { showTerms.value = true; return }
+  step.value = 'review'
+}
+
+function onTermsAccept(): void {
+  localStorage.setItem('sui-deployer:terms-accepted', '1')
+  termsAccepted.value = true
+  showTerms.value = false
+  step.value = 'review'
+}
+
+function onTermsCancel(): void {
+  showTerms.value = false
+}
+
+async function confirmDeploy(): Promise<void> {
+  const sender = account.value?.address
+  if (!sender) { deployError.value = 'Connect a wallet first.'; return }
+  deployError.value = null
+  step.value = 'deploying'
+  deployStep.value = null
+  try {
+    const net = network.value as Network
+    const feeConfigured = isFeeConfigured(net)
+    result.value = await deployToken({
+      config: config.value,
+      network: net,
+      sender,
+      feeMist: feeConfigured ? FEE_MIST : 0n,
+      feeTreasury: FEE_TREASURY[net],
+      gasBudget: PUBLISH_GAS_BUDGET,
+      executor: await buildDeployExecutor(net),
+      onStep: (s) => (deployStep.value = s),
+    })
+    step.value = 'done'
+  } catch (e) {
+    deployError.value = extractErrorMessage(e)
+    step.value = 'review'
+  }
+}
+
+function restart(): void {
+  result.value = null
+  deployError.value = null
+  step.value = 'form'
+}
+</script>
+
+<template>
+  <WalletGuard message="Connect a Sui wallet to deploy your token.">
+    <ConfigForm
+      v-if="step === 'form'"
+      :form="form"
+      :errors="errors"
+      :can-proceed="canProceed"
+      :network="network"
+      :connected="connected"
+      @submit="goReview"
+    />
+    <ReviewPanel
+      v-if="step === 'review'"
+      :config="config"
+      :network="network"
+      @back="step = 'form'"
+      @confirm="confirmDeploy"
+    />
+    <DeployProgress v-if="step === 'deploying'" :step="deployStep" />
+    <ResultPanel
+      v-if="step === 'done' && result"
+      :result="result"
+      :config="config"
+      @restart="restart"
+    />
+    <AppNotice v-if="deployError" type="error">{{ deployError }}</AppNotice>
+    <TermsDialog :open="showTerms" @accept="onTermsAccept" @cancel="onTermsCancel" />
+  </WalletGuard>
+</template>

package/src/components/WalletBar.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+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'
+import FormSelect from './FormSelect.vue'
+import AppNotice from './AppNotice.vue'
+
+const { wallets, currentWallet, account, connecting, error, connect, disconnect } = useWallet()
+const { network, setNetwork } = useNetwork()
+
+const dialogEl = ref<HTMLDialogElement>()
+
+const shortAddress = computed(() => {
+  const a = account.value?.address
+  return a ? `${a.slice(0, 6)}…${a.slice(-4)}` : ''
+})
+
+const networkModel = computed({
+  get: () => network.value,
+  set: (v: string) => setNetwork(v as Network),
+})
+
+function openDialog(): void {
+  dialogEl.value?.showModal()
+}
+
+function closeDialog(): void {
+  dialogEl.value?.close()
+}
+
+watch(() => account.value, (acc) => {
+  if (acc) {
+    closeDialog()
+  }
+})
+</script>
+
+<template>
+  <div class="card" role="region" aria-label="Wallet and network">
+    <template v-if="account">
+      <div class="row" style="justify-content: space-between">
+        <div class="row">
+          <label for="network-select" style="margin: 0">Network</label>
+          <FormSelect id="network-select" v-model="networkModel">
+            <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
+          </FormSelect>
+        </div>
+
+        <div class="row">
+          <span class="badge" aria-label="Connected wallet">
+            {{ currentWallet?.name }} · <span class="mono">{{ shortAddress }}</span>
+          </span>
+          <button type="button" @click="disconnect">Disconnect</button>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="row">
+        <div v-if="!wallets.length" style="width: 100%">
+          <p class="hint" style="margin: 0">
+            No Sui wallet detected. Install a Sui wallet extension to continue.
+          </p>
+        </div>
+        <button v-else type="button" class="primary" @click="openDialog">
+          Connect Wallet
+        </button>
+      </div>
+    </template>
+
+    <AppNotice v-if="error" type="error" style="margin-top: 0.75rem">{{ error }}</AppNotice>
+  </div>
+
+  <dialog ref="dialogEl" aria-labelledby="wallet-dialog-title" @click.self="closeDialog">
+    <div class="dialog-header">
+      <h2 id="wallet-dialog-title">Connect Wallet</h2>
+      <button
+        type="button"
+        aria-label="Close"
+        style="background: none; border: none; font-size: 1.5rem; padding: 0; cursor: pointer; color: var(--text)"
+        @click="closeDialog"
+      >
+        ×
+      </button>
+    </div>
+
+    <div>
+      <label for="dialog-network-select">Network</label>
+      <FormSelect id="dialog-network-select" v-model="networkModel">
+        <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
+      </FormSelect>
+    </div>
+
+    <div class="wallet-list">
+      <button
+        v-for="w in wallets"
+        :key="w.name"
+        type="button"
+        class="primary"
+        :disabled="connecting"
+        @click="connect(w)"
+      >
+        <img v-if="w.icon" :src="w.icon" alt="" width="20" height="20" />
+        {{ w.name }}
+      </button>
+    </div>
+  </dialog>
+</template>

package/src/components/WalrusBlobBrowser.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+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 { Network } from '../lib/types.js'
+import AppNotice from './AppNotice.vue'
+
+const props = defineProps<{ network: WalrusNetwork; connected: boolean }>()
+const emit = defineEmits<{ (e: 'select', url: string): void }>()
+
+const { account } = useWallet()
+
+const addressInput = ref(account.value?.address ?? '')
+watch(
+  () => account.value?.address,
+  (addr) => {
+    if (addr && !addressInput.value) addressInput.value = addr
+  },
+)
+
+interface BlobItem extends OwnedBlob {
+  url: string
+}
+
+const blobs = ref<BlobItem[]>([])
+const loading = ref(false)
+const loadError = ref<string | null>(null)
+const selected = ref('')
+const hasLoaded = ref(false)
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+async function load(): Promise<void> {
+  const addr = addressInput.value.trim() || account.value?.address
+  if (!addr) {
+    loadError.value = 'Enter an address or connect your wallet.'
+    return
+  }
+  loading.value = true
+  loadError.value = null
+  blobs.value = []
+  hasLoaded.value = false
+  try {
+    const { createWalrusClient, walrusBlobUrl, fetchOwnedWalrusBlobs } = await import(
+      '../lib/walrus.js'
+    )
+    const suiClient = getReadClient(props.network as Network)
+    const client = createWalrusClient(props.network)
+    const raw = await fetchOwnedWalrusBlobs(suiClient, client, addr)
+    blobs.value = raw.map((b) => ({ ...b, url: walrusBlobUrl(props.network, b.blobId) }))
+    hasLoaded.value = true
+  } catch (e) {
+    loadError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectBlob(item: BlobItem): void {
+  selected.value = item.blobId
+  emit('select', item.url)
+}
+</script>
+
+<template>
+  <div class="blob-browser">
+    <div class="row">
+      <input
+        v-model="addressInput"
+        type="text"
+        placeholder="0x… or leave blank for your wallet"
+        aria-label="Wallet address to browse"
+        style="flex: 1"
+      />
+      <button type="button" :disabled="loading || (!connected && !addressInput.trim())" @click="load">
+        <span v-if="loading" class="spinner" aria-hidden="true"></span>
+        Load
+      </button>
+    </div>
+    <p class="hint">Browse Walrus blobs owned by this address. Only image blobs show a preview.</p>
+
+    <AppNotice v-if="loadError" type="error">{{ loadError }}</AppNotice>
+
+    <p v-if="hasLoaded && blobs.length === 0 && !loading" class="hint">
+      No Walrus blobs found at this address.
+    </p>
+
+    <div v-if="blobs.length > 0" class="blob-grid" role="listbox" aria-label="Walrus blobs">
+      <button
+        v-for="b in blobs"
+        :key="b.objectId"
+        type="button"
+        class="blob-thumb"
+        :class="{ selected: selected === b.blobId }"
+        role="option"
+        :aria-selected="selected === b.blobId"
+        @click="selectBlob(b)"
+      >
+        <img
+          :src="b.url"
+          :alt="`Blob ${b.blobId.slice(0, 8)}…`"
+          loading="lazy"
+          @error="(e) => (e.target as HTMLElement).parentElement?.classList.add('no-img')"
+        />
+        <span class="blob-meta">{{ formatSize(b.size) }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blob-browser {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.blob-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.blob-thumb {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 2px solid var(--border);
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color 0.15s;
+}
+
+.blob-thumb:hover {
+  border-color: var(--accent);
+}
+
+.blob-thumb.selected {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.blob-thumb img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 3px;
+  display: block;
+}
+
+.blob-thumb.no-img img {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+.blob-thumb.no-img::before {
+  content: '?';
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1;
+  font-size: 1.25rem;
+  color: var(--muted);
+  background: var(--surface);
+  border-radius: 3px;
+}
+
+.blob-meta {
+  font-size: 0.65rem;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+</style>