@meddleware/token-deployer-ui 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/token-deployer-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "exports": {
     ".": {
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.6",
-    "@meddleware/ui": "^0.1.26",
+    "@meddleware/ui": "^0.1.27",
     "@meddleware/wallet-adapter": "^0.0.8",
     "@meddleware/walrus-relay": "^0.1.17",
     "@mysten/bcs": "~2.1.0",

package/src/components/ConfigForm.vue

@@ -49,11 +49,27 @@ function onBlur(key: string): void {
       <fieldset>
         <legend>Package identity <span class="permanent">(permanent)</span></legend>
         <div class="grid2">
-          <UiFormField 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')" />
+          <UiFormField id="package" label="Package name" :error="visibleError('packageName')">
+            <template #label-suffix>
+              <UiFieldHint field-id="package-name">
+                The on-chain Move package name (snake_case, e.g. <b>my_token</b>). It identifies the
+                published package and cannot be changed after deployment.
+              </UiFieldHint>
+            </template>
+            <template #default="{ attrs }">
+              <input v-bind="attrs" v-model="form.packageName" placeholder="my_token" autocomplete="off" @blur="onBlur('packageName')" />
+            </template>
           </UiFormField>
-          <UiFormField 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')" />
+          <UiFormField id="module" label="Module name" :error="visibleError('moduleName')">
+            <template #label-suffix>
+              <UiFieldHint field-id="module-name">
+                The Move module inside the package (lowercase, e.g. <b>mytoken</b>). The coin type and
+                its one-time-witness struct are derived from this name, so it is permanent too.
+              </UiFieldHint>
+            </template>
+            <template #default="{ attrs }">
+              <input v-bind="attrs" v-model="form.moduleName" placeholder="mytoken" autocomplete="off" @blur="onBlur('moduleName')" />
+            </template>
           </UiFormField>
         </div>
         <p class="hint" aria-live="polite">
@@ -75,23 +91,50 @@ function onBlur(key: string): void {
         <legend>Token details</legend>
 
         <div class="grid2">
-          <UiFormField id="name" label="Token name" :error="visibleError('name')" v-slot="{ attrs }">
-            <input v-bind="attrs" v-model="form.name" autocomplete="off" @blur="onBlur('name')" />
+          <UiFormField id="name" label="Token name" :error="visibleError('name')">
+            <template #label-suffix>
+              <UiFieldHint field-id="token-name">
+                The human-readable display name shown in wallets and explorers (e.g. <b>My Token</b>).
+                Editable later if you keep the Updatable metadata policy.
+              </UiFieldHint>
+            </template>
+            <template #default="{ attrs }">
+              <input v-bind="attrs" v-model="form.name" autocomplete="off" @blur="onBlur('name')" />
+            </template>
           </UiFormField>
-          <UiFormField id="symbol" label="Symbol" :error="visibleError('symbol')" v-slot="{ attrs }">
-            <input v-bind="attrs" v-model="form.symbol" autocomplete="off" @blur="onBlur('symbol')" />
+          <UiFormField id="symbol" label="Symbol" :error="visibleError('symbol')">
+            <template #label-suffix>
+              <UiFieldHint field-id="token-symbol">
+                The short ticker shown in wallets (e.g. <b>MYT</b>), typically 3–5 uppercase letters.
+              </UiFieldHint>
+            </template>
+            <template #default="{ attrs }">
+              <input v-bind="attrs" v-model="form.symbol" autocomplete="off" @blur="onBlur('symbol')" />
+            </template>
           </UiFormField>
         </div>
 
         <UiFormField id="description" label="Description" :error="visibleError('description')">
-          <template #label-suffix>&nbsp;<span class="hint">(optional)</span></template>
+          <template #label-suffix>
+            &nbsp;<span class="hint">(optional)</span>
+            <UiFieldHint field-id="token-description">
+              A short blurb stored in the coin metadata and shown in some wallets/explorers.
+              Leave blank if you don't need one.
+            </UiFieldHint>
+          </template>
           <template #default="{ attrs }">
             <textarea v-bind="attrs" v-model="form.description" @blur="onBlur('description')" />
           </template>
         </UiFormField>
 
         <UiFormField id="decimals" label="Decimals" :error="visibleError('decimals')">
-          <template #label-suffix>&nbsp;<span class="permanent">(permanent)</span></template>
+          <template #label-suffix>
+            &nbsp;<span class="permanent">(permanent)</span>
+            <UiFieldHint field-id="token-decimals">
+              How many decimal places the coin supports. <b>9</b> is the Sui convention (1 token =
+              1,000,000,000 base units). Fixed at deployment and cannot be changed.
+            </UiFieldHint>
+          </template>
           <template #default="{ attrs }">
             <input v-bind="attrs" v-model="form.decimals" inputmode="numeric" @blur="onBlur('decimals')" />
           </template>

package/src/components/IconPicker.vue

@@ -283,7 +283,15 @@ function onBrowseSelect(url: string): void {
       </label>
 
       <fieldset v-if="fileName && availableRelays.length > 1" style="margin: 0.5rem 0">
-        <legend>Upload relay</legend>
+        <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>
         <div style="display: flex; flex-direction: column; gap: 0.5rem">
           <label
             v-for="option in availableRelays"
@@ -321,7 +329,7 @@ function onBrowseSelect(url: string): void {
         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>
@@ -345,12 +353,31 @@ function onBrowseSelect(url: string): void {
   display: flex;
   align-items: center;
   gap: 0.4rem;
+  /* Only span the content — otherwise the row stretches the full field width. */
+  width: fit-content;
   margin-top: 0.5rem;
   font-size: 0.875rem;
   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>