@meddleware/token-deployer-ui 0.0.7 → 0.0.9

package/src/components/IconPicker.vue

@@ -116,11 +116,16 @@ function onFile(e: Event): void {
   const f = (e.target as HTMLInputElement).files?.[0]
   if (!f) return
   const invalid = validateIconFile(f)
-  if (invalid) { uploadError.value = invalid; return }
+  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.onload = () => {
+    bytes = new Uint8Array(reader.result as ArrayBuffer)
+  }
   reader.readAsArrayBuffer(f)
 }
 
@@ -129,14 +134,19 @@ function onRelayChange(newHost: string): void {
 }
 
 async function upload(): Promise<void> {
-  if (!bytes) { uploadError.value = 'Choose an image first.'; return }
-  if (!account.value) { uploadError.value = 'Connect your wallet first.'; return }
+  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 { createWalrusClient, createBlobUploadFlow, walrusBlobUrl } =
+      await import('../lib/walrus.js')
     const executor = await buildDeployExecutor(props.network as Network)
     const suiClient = getReadClient(props.network as Network)
 
@@ -232,11 +242,21 @@ function onBrowseSelect(url: string): void {
       v-model="tab"
       :options="[
         { id: 'url', label: 'URL' },
-        { id: 'upload', label: 'Upload to Walrus', disabled: !isWalrusNetwork, title: isWalrusNetwork ? undefined : 'Not available on localnet' },
-        { id: 'browse', label: 'My Walrus blobs', disabled: !isWalrusNetwork, title: isWalrusNetwork ? undefined : 'Not available on localnet' },
+        {
+          id: 'upload',
+          label: 'Upload to Walrus',
+          disabled: !isWalrusNetwork,
+          title: isWalrusNetwork ? undefined : 'Not available on localnet',
+        },
+        {
+          id: 'browse',
+          label: 'My Walrus blobs',
+          disabled: !isWalrusNetwork,
+          title: isWalrusNetwork ? undefined : 'Not available on localnet',
+        },
       ]"
       aria-label="Icon source"
-      style="margin-bottom: 0.75rem"
+      class="icon-source"
     />
 
     <!-- URL panel -->
@@ -263,7 +283,7 @@ function onBrowseSelect(url: string): void {
           accept="image/*"
           aria-label="Choose an image to upload to Walrus"
           aria-describedby="walrus-help"
-          style="width: auto"
+          class="icon-file"
           @change="onFile"
         />
         <button type="button" :disabled="uploading || !connected || !fileName" @click="upload">
@@ -272,59 +292,70 @@ function onBrowseSelect(url: string): void {
         </button>
       </div>
 
-      <label class="permanent-toggle">
-        <input type="checkbox" v-model="permanent" />
-        Permanent blob <span class="hint">(cannot be deleted)</span>
+      <!-- The help button sits beside the label, not inside it (a label may only contain its control). -->
+      <p class="permanent-toggle">
+        <label>
+          <input v-model="permanent" type="checkbox" />
+          Permanent blob <span class="hint">(cannot be deleted)</span>
+        </label>
         <UiFieldHint 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.
         </UiFieldHint>
-      </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>
+      </p>
+
+      <fieldset v-if="fileName && availableRelays.length > 1" class="relay-choice">
+        <legend>
+          Upload relay
+          <UiFieldHint field-id="upload-relay">
+            Browsers can't write to Walrus directly, so the blob is sent through an upload relay.
+            The <b>public</b> relay is free; the <b>operator</b> relay is run by this app and may
+            charge a small SUI tip per upload. Both store the identical blob — pick whichever you
+            prefer.
+          </UiFieldHint>
+        </legend>
+        <label v-for="option in availableRelays" :key="option.host">
+          <input
+            type="radio"
+            name="upload-relay"
+            :value="option.host"
+            :checked="selectedRelayHost === option.host"
+            @change="(e) => onRelayChange((e.target as HTMLInputElement).value)"
+          />
+          <span>{{ option.label }}</span>
+        </label>
       </fieldset>
 
-      <UiNotice v-if="fileName && estimatedCost" style="margin: 0.5rem 0">
+      <UiNotice v-if="fileName && estimatedCost" class="icon-notice">
         <strong>Estimated cost:</strong> {{ estimatedCost.label }}
       </UiNotice>
 
       <!-- 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. -->
-      <UiNotice 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">
+      <UiNotice v-if="fileName && purchaseAccessAvailable" class="icon-notice">
+        The operator relay requires an access NFT. You can keep using the public relay, or purchase
+        access to support this app’s relay.
+        <button
+          type="button"
+          class="icon-notice__cta"
+          :disabled="purchasing || !connected"
+          @click="purchaseAccess"
+        >
           {{ purchasing ? 'Purchasing…' : 'Purchase relay access' }}
         </button>
       </UiNotice>
 
-      <p v-if="showFreeRelayTip" class="hint" style="margin: 0.5rem 0">
+      <p v-if="showFreeRelayTip" class="hint icon-notice">
         Tip: select the public relay above to avoid the relay fee.
       </p>
 
-      <p id="walrus-help" class="hint" aria-live="polite">
+      <p id="walrus-help" class="upload-note" 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>
+        <strong>SUI</strong> (gas + relay fee) in your wallet; two approvals. Stored for ~{{
+          ICON_YEARS
+        }}
+        years. <span v-if="status">{{ status }}</span>
       </p>
       <UiNotice v-if="uploadError" type="error">{{ uploadError }}</UiNotice>
     </div>
@@ -337,6 +368,37 @@ function onBrowseSelect(url: string): void {
 </template>
 
 <style scoped>
+.icon-source {
+  margin-bottom: 0.75rem;
+}
+
+.icon-file {
+  width: auto;
+}
+
+.relay-choice {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0.5rem 0;
+}
+
+.relay-choice label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.icon-notice {
+  margin: 0.5rem 0;
+}
+
+.icon-notice__cta {
+  display: block;
+  margin-top: 0.5rem;
+}
+
 .icon-panel {
   padding-top: 0.5rem;
 }
@@ -345,12 +407,38 @@ function onBrowseSelect(url: string): void {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  margin-top: 0.5rem;
+  /* Only span the content — otherwise the row stretches the full field width. */
+  width: fit-content;
+  margin: 0.5rem 0 0;
   font-size: 0.875rem;
+}
+
+.permanent-toggle label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
   cursor: pointer;
 }
 
 .permanent-toggle input[type='checkbox'] {
+  /* Override the global `input { width: 100% }` so the checkbox stays its
+     natural size instead of consuming most of the row. */
+  width: auto;
+  flex: none;
   margin: 0;
 }
+
+/* Boxed, muted note that reads as section-level guidance — visually distinct
+   from the Permanent-blob toggle above it. */
+.upload-note {
+  margin: 0.75rem 0 0;
+  padding: 0.5rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--muted);
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
 </style>

package/src/components/LicensePicker.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { fetchLicenseList, fetchLicenseText, NO_LICENSE } from '../lib/licenses.js'
 import type { SpdxLicense } from '../lib/licenses.js'
-import { UiSelect, UiFieldHint, UiNotice } from '@meddleware/ui'
+import { UiDialog, UiFieldHint, UiFormField, UiNotice, UiSelect } from '@meddleware/ui'
 
 const props = defineProps<{ modelValue: string }>()
 const emit = defineEmits<{
@@ -46,7 +46,7 @@ onMounted(async () => {
 })
 
 // License view modal
-const licenseDialogEl = ref<HTMLDialogElement>()
+const licenseOpen = ref(false)
 const licenseText = ref<string | null>(null)
 const licenseLoading = ref(false)
 const licenseError = ref<string | null>(null)
@@ -63,86 +63,85 @@ async function openLicenseModal(): Promise<void> {
       licenseLoading.value = false
     }
   }
-  licenseDialogEl.value?.showModal()
+  licenseOpen.value = true
 }
 </script>
 
 <template>
-  <div>
-    <label for="license-select">
-      License
+  <UiFormField id="license-select" label="License">
+    <template #label-suffix>
       <UiFieldHint 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.
+        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.
       </UiFieldHint>
-    </label>
-    <div class="license-row">
-      <UiSelect
-        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>
-      </UiSelect>
-      <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>
+    </template>
+    <template #default="{ attrs }">
+      <span class="license-row">
+        <UiSelect
+          v-bind="attrs"
+          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>
+        </UiSelect>
+        <button type="button" class="view-btn" :disabled="loading" @click="openLicenseModal">
+          View
+        </button>
+      </span>
+    </template>
+  </UiFormField>
+  <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>
 
-  <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">
+  <UiDialog v-model:open="licenseOpen" :title="currentLicenseName" width="min(680px, 92vw)">
+    <p v-if="licenseLoading" role="status">
       <span class="spinner" aria-hidden="true"></span> Loading…
-    </div>
+    </p>
     <UiNotice v-else-if="licenseError" type="error">{{ licenseError }}</UiNotice>
-    <template v-else-if="modelValue === NO_LICENSE.id">
-      <p>No LICENSE file will be generated. All rights are reserved by the author.</p>
-    </template>
+    <p v-else-if="modelValue === NO_LICENSE.id">
+      No LICENSE file will be generated. All rights are reserved by the author.
+    </p>
     <template v-else>
-      <p style="margin-top: 0">
+      <p class="license-spdx">
         <a
           :href="`https://spdx.org/licenses/${modelValue}.html`"
           target="_blank"
           rel="noopener noreferrer"
-        >View on SPDX ↗</a>
+          >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 #actions="{ close }">
+      <button type="button" @click="close()">Close</button>
+    </template>
+  </UiDialog>
 </template>
 
 <style scoped>
@@ -161,8 +160,8 @@ async function openLicenseModal(): Promise<void> {
   white-space: nowrap;
 }
 
-.license-dialog {
-  width: min(680px, 92vw);
+.license-spdx {
+  margin: 0;
 }
 
 .license-text {

package/src/components/MyTokens.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+// Lists the coins the connected wallet has deployed (owned TreasuryCap<T> objects). Read-only,
+// mirroring access-gate's "My Gates". Loads on mount + whenever the connected address changes.
+import { computed, ref, watch } from 'vue'
+import {
+  CopyableAddress,
+  ExplorerLink,
+  UiNotice,
+  suiExplorerUrl,
+  type SuiNetwork,
+} from '@meddleware/ui'
+import { listMyTokens, type DeployedToken } from '../lib/listMyTokens.js'
+import type { Network } from '../lib/types.js'
+
+const props = defineProps<{ owner: string | null; network: Network }>()
+
+// SuiVision has no localnet explorer, so only build object links on public networks.
+const explorerNetwork = computed<SuiNetwork | null>(() =>
+  props.network === 'localnet' ? null : props.network,
+)
+function objectHref(id: string): string | null {
+  return explorerNetwork.value ? suiExplorerUrl('object', id, explorerNetwork.value) : null
+}
+
+const tokens = ref<DeployedToken[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+async function load(): Promise<void> {
+  if (!props.owner) {
+    tokens.value = []
+    return
+  }
+  loading.value = true
+  error.value = null
+  try {
+    tokens.value = await listMyTokens(props.owner, props.network)
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+    tokens.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.owner, load, { immediate: true })
+defineExpose({ reload: load })
+</script>
+
+<template>
+  <div class="my-tokens">
+    <p v-if="loading" class="hint">Loading your deployed tokens…</p>
+    <UiNotice v-else-if="error" type="error">{{ error }}</UiNotice>
+    <p v-else-if="!tokens.length" class="hint">
+      No deployed tokens found for this wallet. Deploy one from the <strong>Deploy</strong> tab.
+    </p>
+    <ul v-else class="my-tokens__list">
+      <li v-for="t in tokens" :key="t.treasuryCapId" class="my-tokens__item">
+        <div class="my-tokens__label">{{ t.label }}</div>
+        <dl class="my-tokens__meta">
+          <dt>Coin type</dt>
+          <dd><CopyableAddress :address="t.coinType" label="Copy coin type" /></dd>
+          <dt>Package</dt>
+          <dd>
+            <CopyableAddress :address="t.packageId" label="Copy package id">
+              <ExplorerLink
+                v-if="objectHref(t.packageId)"
+                :href="objectHref(t.packageId)!"
+                :value="t.packageId"
+              />
+            </CopyableAddress>
+          </dd>
+          <dt>Treasury cap</dt>
+          <dd>
+            <CopyableAddress :address="t.treasuryCapId" label="Copy treasury cap id">
+              <ExplorerLink
+                v-if="objectHref(t.treasuryCapId)"
+                :href="objectHref(t.treasuryCapId)!"
+                :value="t.treasuryCapId"
+              />
+            </CopyableAddress>
+          </dd>
+        </dl>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.my-tokens__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.my-tokens__item {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.75rem 0.9rem;
+  background: var(--surface);
+}
+.my-tokens__label {
+  font-weight: 600;
+  margin-bottom: 0.4rem;
+}
+.my-tokens__meta {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.2rem 0.75rem;
+  margin: 0;
+  font-size: 0.8rem;
+}
+.my-tokens__meta dt {
+  color: var(--muted);
+  white-space: nowrap;
+}
+.my-tokens__meta dd {
+  margin: 0;
+  min-width: 0;
+  font-family: var(--mw-font-mono);
+  font-size: 0.72rem;
+}
+</style>

package/src/components/ResultPanel.vue

@@ -72,11 +72,9 @@ async function downloadPackage(): Promise<void> {
     </div>
     <UiNotice v-if="downloadError" type="error">{{ downloadError }}</UiNotice>
 
-    <div style="margin-top: 1rem">
-      <GithubPush :config="config" :result="result" />
-    </div>
+    <GithubPush class="actions" :config="config" :result="result" />
 
-    <p v-once class="hint" style="margin-top: 1rem">
+    <p v-once class="hint actions">
       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>

package/src/components/ReviewPanel.vue

@@ -61,7 +61,7 @@ const feeSui = Number(FEE_MIST) / 1e9
       token or caps.
     </p>
 
-    <div class="row" style="margin-top: 1rem">
+    <div class="row actions">
       <button type="button" @click="$emit('back')">Back</button>
       <button type="button" class="primary" @click="$emit('confirm')">Confirm &amp; deploy</button>
     </div>