@meddleware/token-deployer-ui 0.0.1

package/src/components/ConfigForm.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import type { FormModel } from '../lib/form.js'
+import type { FormErrors } from '../lib/validation.js'
+import { deriveStructName } from '../lib/validation.js'
+import type { Network } from '../lib/types.js'
+import LicensePicker from './LicensePicker.vue'
+import IconPicker from './IconPicker.vue'
+import FormField from './FormField.vue'
+import FormSelect from './FormSelect.vue'
+import FieldHint from './FieldHint.vue'
+
+const props = defineProps<{
+  form: FormModel
+  errors: FormErrors
+  canProceed: boolean
+  network: Network
+  connected: boolean
+}>()
+const emit = defineEmits<{ (e: 'submit'): void }>()
+
+const structPreview = computed(() => {
+  const m = props.form.moduleName.trim()
+  return m ? deriveStructName(m) : '—'
+})
+const coinTypePreview = computed(
+  () => `<package>::${props.form.moduleName.trim() || 'module'}::${structPreview.value}`,
+)
+const identifierError = computed(() => visibleError('packageName') || visibleError('moduleName'))
+
+const touched = reactive(new Set<string>())
+function visibleError(key: string): string | undefined {
+  return touched.has(key) ? props.errors[key as keyof FormErrors] : undefined
+}
+
+function onBlur(key: string): void {
+  touched.add(key)
+  const form = props.form as unknown as Record<string, unknown>
+  if (typeof form[key] === 'string') form[key] = (form[key] as string).trim()
+}
+</script>
+
+<template>
+  <form novalidate @submit.prevent="emit('submit')">
+    <fieldset>
+      <legend>Package identity <span class="permanent">(permanent)</span></legend>
+      <div class="grid2">
+        <FormField id="package" label="Package name" :error="visibleError('packageName')" v-slot="{ attrs }">
+          <input v-bind="attrs" v-model="form.packageName" placeholder="my_token" autocomplete="off" @blur="onBlur('packageName')" />
+        </FormField>
+        <FormField id="module" label="Module name" :error="visibleError('moduleName')" v-slot="{ attrs }">
+          <input v-bind="attrs" v-model="form.moduleName" placeholder="mytoken" autocomplete="off" @blur="onBlur('moduleName')" />
+        </FormField>
+      </div>
+      <p class="hint" aria-live="polite">
+        <template v-if="identifierError">
+          Fix the package and module names to preview the coin type.
+        </template>
+        <template v-else>
+          Coin type will be <span class="mono">{{ coinTypePreview }}</span
+          >. The witness struct <span class="mono">{{ structPreview }}</span> is derived from
+          the module name (a Sui requirement).
+        </template>
+      </p>
+    </fieldset>
+
+    <fieldset>
+      <legend>Token details</legend>
+
+      <div class="grid2">
+        <FormField id="name" label="Token name" :error="visibleError('name')" v-slot="{ attrs }">
+          <input v-bind="attrs" v-model="form.name" autocomplete="off" @blur="onBlur('name')" />
+        </FormField>
+        <FormField id="symbol" label="Symbol" :error="visibleError('symbol')" v-slot="{ attrs }">
+          <input v-bind="attrs" v-model="form.symbol" autocomplete="off" @blur="onBlur('symbol')" />
+        </FormField>
+      </div>
+
+      <FormField id="description" label="Description" :error="visibleError('description')">
+        <template #label-suffix>&nbsp;<span class="hint">(optional)</span></template>
+        <template #default="{ attrs }">
+          <textarea v-bind="attrs" v-model="form.description" @blur="onBlur('description')" />
+        </template>
+      </FormField>
+
+      <FormField id="decimals" label="Decimals" :error="visibleError('decimals')">
+        <template #label-suffix>&nbsp;<span class="permanent">(permanent)</span></template>
+        <template #default="{ attrs }">
+          <input v-bind="attrs" v-model="form.decimals" inputmode="numeric" @blur="onBlur('decimals')" />
+        </template>
+      </FormField>
+
+      <IconPicker
+        v-model="form.iconUrl"
+        :network="network"
+        :connected="connected"
+        :error="visibleError('iconUrl')"
+        @blur="onBlur('iconUrl')"
+      />
+    </fieldset>
+
+    <details>
+      <summary>Advanced options</summary>
+      <fieldset>
+        <legend class="visually-hidden">Advanced options</legend>
+
+        <FormField id="supply" label="Initial supply" :error="visibleError('initialSupply')">
+          <template #label-suffix>
+            <FieldHint field-id="supply">
+              The number of whole tokens to mint and send to the recipient at deployment.
+              Uses your chosen decimal precision — with 9 decimals, 1 token = 1,000,000,000 base units on-chain.
+              Enter <b>0</b> or leave blank for no initial supply.
+              You can mint more later if you choose the Mintable supply policy.
+            </FieldHint>
+          </template>
+          <template #default="{ attrs }">
+            <input v-bind="attrs" v-model="form.initialSupply" inputmode="numeric" placeholder="0" @blur="onBlur('initialSupply')" />
+          </template>
+        </FormField>
+
+        <div class="grid2">
+          <FormField id="supply-policy" label="Supply">
+            <template #label-suffix>
+              <FieldHint field-id="supply-policy">
+                <b>Mintable</b>: you keep the TreasuryCap and can mint more tokens at any time.<br />
+                <b>Fixed</b>: the TreasuryCap is frozen — the total supply is sealed at deployment.
+              </FieldHint>
+            </template>
+            <template #default="{ attrs }">
+              <FormSelect v-bind="attrs" v-model="form.supplyPolicy">
+                <option value="mintable">Mintable</option>
+                <option value="fixed">Fixed</option>
+              </FormSelect>
+            </template>
+          </FormField>
+          <FormField id="metadata-policy" label="Metadata">
+            <template #label-suffix>
+              <FieldHint field-id="metadata-policy">
+                <b>Updatable</b>: you keep the MetadataCap and can later change the name, symbol,
+                description, or icon.<br />
+                <b>Frozen</b>: the MetadataCap is discarded — all metadata is permanently locked.
+              </FieldHint>
+            </template>
+            <template #default="{ attrs }">
+              <FormSelect v-bind="attrs" v-model="form.metadataPolicy">
+                <option value="updatable">Updatable</option>
+                <option value="frozen">Frozen</option>
+              </FormSelect>
+            </template>
+          </FormField>
+        </div>
+
+        <FormField id="package-policy" label="Package code">
+          <template #label-suffix>
+            <FieldHint field-id="package-policy">
+              <b>Immutable</b>: the UpgradeCap is burned — the on-chain code is sealed.
+              Recommended for trust and auditability.<br />
+              <b>Upgradeable</b>: you keep the UpgradeCap and can push code changes to the package
+              after deployment.
+            </FieldHint>
+          </template>
+          <template #default="{ attrs }">
+            <FormSelect v-bind="attrs" v-model="form.packagePolicy">
+              <option value="immutable">Immutable</option>
+              <option value="upgradeable">Upgradeable</option>
+            </FormSelect>
+          </template>
+        </FormField>
+
+        <FormField id="recipient" label="Recipient" :error="visibleError('recipient')">
+          <template #label-suffix>
+            <FieldHint field-id="recipient">
+              The Sui address that receives the TreasuryCap, MetadataCap, UpgradeCap (if kept),
+              and any initial supply minted at deployment.
+              Leave blank to send everything to the connected wallet.
+              Enter a different address to separate the deployer wallet from the custody wallet.
+            </FieldHint>
+          </template>
+          <template #default="{ attrs }">
+            <input v-bind="attrs" v-model="form.recipient" placeholder="0x…" autocomplete="off" @blur="onBlur('recipient')" />
+          </template>
+        </FormField>
+
+        <LicensePicker v-model="form.license" @name="form.licenseName = $event" />
+      </fieldset>
+    </details>
+
+    <div class="row" style="margin-top: 1rem">
+      <button type="submit" class="primary" :disabled="!canProceed">Review &amp; deploy</button>
+    </div>
+  </form>
+</template>

package/src/components/DeployProgress.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import type { DeployStep } from '../lib/deploy.js'
+
+const ORDER: { key: DeployStep; label: string }[] = [
+  { key: 'patching', label: 'Preparing the module' },
+  { key: 'publishing', label: 'Publishing (sign in your wallet)' },
+  { key: 'confirming', label: 'Confirming on-chain' },
+  { key: 'finalizing', label: 'Finalizing supply & caps (sign again)' },
+  { key: 'confirming-finalize', label: 'Confirming finalize' },
+  { key: 'done', label: 'Done' },
+]
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ step: DeployStep | null }>()
+
+const currentIndex = computed(() => ORDER.findIndex((s) => s.key === props.step))
+
+function getState(i: number): 'done' | 'active' | 'todo' {
+  if (currentIndex.value < 0) return 'todo'
+  if (i < currentIndex.value) return 'done'
+  if (i === currentIndex.value) return 'active'
+  return 'todo'
+}
+
+const steps = computed(() =>
+  ORDER.map((s, i) => ({ ...s, state: getState(i) }))
+)
+</script>
+
+<template>
+  <section class="card" aria-labelledby="progress-h">
+    <h2 id="progress-h">Deploying…</h2>
+    <ol class="steps" aria-live="polite">
+      <li v-for="s in steps" :key="s.key" :data-state="s.state">
+        <span v-if="s.state === 'active'" class="spinner" aria-hidden="true"></span>
+        <span v-else-if="s.state === 'done'" aria-hidden="true">✓ </span>
+        {{ s.label }}
+        <span v-if="s.state === 'active'" class="visually-hidden">(in progress)</span>
+      </li>
+    </ol>
+    <p class="hint">Keep this tab open and approve the wallet prompts.</p>
+  </section>
+</template>

package/src/components/FieldHint.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+defineProps<{ fieldId: string }>()
+
+function onKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Escape') (e.currentTarget as HTMLElement).blur()
+}
+</script>
+
+<template>
+  <span class="field-hint">
+    <button
+      type="button"
+      class="field-hint-btn"
+      :aria-describedby="`${fieldId}-hint`"
+      aria-label="Help"
+      @keydown="onKeyDown"
+    >?</button>
+    <span :id="`${fieldId}-hint`" role="tooltip" class="field-hint-tip">
+      <slot />
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.field-hint {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.35rem;
+  vertical-align: middle;
+}
+
+.field-hint-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.1em;
+  height: 1.1em;
+  padding: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  border-radius: 50%;
+  border: 1px solid var(--muted);
+  color: var(--muted);
+  background: transparent;
+  cursor: help;
+}
+
+.field-hint-tip {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 10;
+  min-width: 200px;
+  max-width: min(300px, 90vw);
+  padding: 0.6rem 0.75rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--text);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    visibility 0.15s ease;
+  pointer-events: none;
+}
+
+.field-hint:hover .field-hint-tip,
+.field-hint:focus-within .field-hint-tip {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>

package/src/components/FormField.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  id: string
+  label: string
+  error?: string | null
+  hint?: string
+}>()
+
+const errorId = computed(() => `${props.id}-err`)
+const slotAttrs = computed(() => ({
+  id: props.id,
+  'aria-invalid': props.error ? (true as const) : undefined,
+  'aria-describedby': props.error ? errorId.value : undefined,
+}))
+</script>
+
+<template>
+  <div class="form-field">
+    <label :for="id">
+      {{ label }}<slot name="label-suffix" />
+    </label>
+    <slot :attrs="slotAttrs" />
+    <p v-if="hint && !error" class="hint">{{ hint }}</p>
+    <p v-if="error" :id="errorId" class="field-error">{{ error }}</p>
+  </div>
+</template>

package/src/components/FormSelect.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+const model = defineModel<string>()
+</script>
+
+<template>
+  <div class="select-wrapper">
+    <select v-bind="$attrs" v-model="model"><slot /></select>
+    <svg
+      class="select-chevron"
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="8"
+      viewBox="0 0 12 8"
+      aria-hidden="true"
+    >
+      <path d="M1 1l5 5 5-5" />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.select-wrapper {
+  position: relative;
+}
+
+.select-wrapper select {
+  appearance: none;
+  padding-right: 2.5rem;
+  width: 100%;
+}
+
+.select-chevron {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  stroke: var(--muted);
+  stroke-width: 1.5;
+  fill: none;
+}
+</style>

package/src/components/GithubPush.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { PublishResult, TokenConfig } from '../lib/types.js'
+import AppNotice from './AppNotice.vue'
+import { buildPackageFiles } from '../lib/generatePackage.js'
+import { fetchLicenseText } from '../lib/licenses.js'
+import { createRepoAndPush } from '../lib/github.js'
+
+const props = defineProps<{ config: TokenConfig; result: PublishResult }>()
+
+const open = ref(false)
+const token = ref('')
+const repoName = ref(props.config.packageName)
+const isPrivate = ref(false)
+const busy = ref(false)
+const error = ref<string | null>(null)
+const doneUrl = ref<string | null>(null)
+const progress = ref('')
+
+async function push(): Promise<void> {
+  busy.value = true
+  error.value = null
+  doneUrl.value = null
+  try {
+    const licenseText = await fetchLicenseText(props.config.license)
+    const files = buildPackageFiles({
+      config: props.config,
+      licenseText: licenseText ?? undefined,
+      result: props.result,
+    })
+    const res = await createRepoAndPush({
+      token: token.value.trim(),
+      repoName: repoName.value.trim(),
+      description: `${props.config.name} (${props.config.symbol}) — Sui coin package`,
+      isPrivate: isPrivate.value,
+      files,
+      commitMessage: 'Initial token package (generated by Token Deployer)',
+      onProgress: (d, t) => (progress.value = `Pushing files… ${d}/${t}`),
+    })
+    doneUrl.value = res.htmlUrl
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    // Never retain the token beyond a single attempt — clear it whether the push
+    // succeeded or failed (a failed push previously left it in the input/memory).
+    token.value = ''
+    busy.value = false
+    progress.value = ''
+  }
+}
+</script>
+
+<template>
+  <div>
+    <button type="button" :aria-expanded="open" @click="open = !open">
+      {{ open ? '▾' : '▸' }} Create a GitHub repo (optional)
+    </button>
+
+    <div v-if="open" class="card" style="margin-top: 0.5rem">
+      <p v-once class="hint">
+        Uses your <strong>own</strong> GitHub token — the repo is created in your account and this
+        site's servers are never involved. The token is sent only to
+        <span class="mono">api.github.com</span> over HTTPS, is never stored or logged, and is
+        cleared as soon as the push finishes. Use a fine-grained token with "Contents" and
+        "Administration" write access, or a classic token with the
+        <span class="mono">repo</span> scope.
+      </p>
+
+      <label for="gh-repo">Repository name</label>
+      <input id="gh-repo" v-model="repoName" autocomplete="off" />
+
+      <label for="gh-token">GitHub token</label>
+      <input
+        id="gh-token"
+        v-model="token"
+        type="password"
+        autocomplete="off"
+        spellcheck="false"
+        placeholder="github_pat_… or ghp_…"
+      />
+
+      <label style="font-weight: 400; margin-top: 0.75rem">
+        <input type="checkbox" v-model="isPrivate" style="width: auto" /> Make the repository
+        private
+      </label>
+
+      <div class="row" style="margin-top: 0.75rem">
+        <button type="button" class="primary" :disabled="busy || !token || !repoName" @click="push">
+          <span v-if="busy" class="spinner" aria-hidden="true"></span> Create repo &amp; push
+        </button>
+        <span v-if="progress" class="hint" aria-live="polite">{{ progress }}</span>
+      </div>
+
+      <AppNotice v-if="error" type="error">{{ error }}</AppNotice>
+      <AppNotice v-if="doneUrl" type="ok">
+        Pushed: <a :href="doneUrl" target="_blank" rel="noopener noreferrer">{{ doneUrl }}</a>
+      </AppNotice>
+    </div>
+  </div>
+</template>