@meddleware/token-deployer-ui 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/token-deployer-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "exports": {
     ".": { "default": "./src/index.ts" }
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.5",
-    "@meddleware/ui": "^0.1.22",
+    "@meddleware/ui": "^0.1.23",
     "@meddleware/wallet-adapter": "^0.0.7",
     "@meddleware/walrus-relay": "^0.1.16",
     "@mysten/bcs": "~2.1.0",

package/src/components/ConfigForm.vue

@@ -8,8 +8,7 @@ import LicensePicker from './LicensePicker.vue'
 import IconPicker from './IconPicker.vue'
 import { UiFormField, UiSelect, UiFieldHint } from '@meddleware/ui'
 
-
-
+export type ConfigFormStep = 'identity' | 'token' | 'settings'
 
 const props = defineProps<{
   form: FormModel
@@ -17,8 +16,9 @@ const props = defineProps<{
   canProceed: boolean
   network: Network
   connected: boolean
+  formStep: ConfigFormStep
 }>()
-const emit = defineEmits<{ (e: 'submit'): void }>()
+const emit = defineEmits<{ (e: 'next'): void; (e: 'back'): void }>()
 
 const structPreview = computed(() => {
   const m = props.form.moduleName.trim()
@@ -42,68 +42,75 @@ function onBlur(key: string): void {
 </script>
 
 <template>
-  <form novalidate @submit.prevent="emit('submit')">
-    <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>
-        <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>
-      </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">
-        <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')" />
+  <form novalidate @submit.prevent="emit('next')">
+
+    <!-- Step 1: Identity -->
+    <template v-if="formStep === 'identity'">
+      <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>
+          <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>
+        </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>
+    </template>
+
+    <!-- Step 2: Token -->
+    <template v-if="formStep === 'token'">
+      <fieldset>
+        <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>
+          <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>
+        </div>
+
+        <UiFormField 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>
         </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="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>
         </UiFormField>
-      </div>
-
-      <UiFormField 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>
-      </UiFormField>
-
-      <UiFormField 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>
-      </UiFormField>
-
-      <IconPicker
-        v-model="form.iconUrl"
-        :network="network"
-        :connected="connected"
-        :error="visibleError('iconUrl')"
-        @blur="onBlur('iconUrl')"
-      />
-    </fieldset>
-
-    <details>
-      <summary>Advanced options</summary>
+
+        <IconPicker
+          v-model="form.iconUrl"
+          :network="network"
+          :connected="connected"
+          :error="visibleError('iconUrl')"
+          @blur="onBlur('iconUrl')"
+        />
+      </fieldset>
+    </template>
+
+    <!-- Step 3: Settings -->
+    <template v-if="formStep === 'settings'">
       <fieldset>
-        <legend class="visually-hidden">Advanced options</legend>
+        <legend>Supply &amp; policies</legend>
 
         <UiFormField id="supply" label="Initial supply" :error="visibleError('initialSupply')">
           <template #label-suffix>
@@ -184,10 +191,13 @@ function onBlur(key: string): void {
 
         <LicensePicker v-model="form.license" @name="form.licenseName = $event" />
       </fieldset>
-    </details>
+    </template>
 
     <div class="row" style="margin-top: 1rem">
-      <button type="submit" class="primary" :disabled="!canProceed">Review &amp; deploy</button>
+      <button v-if="formStep !== 'identity'" type="button" @click="emit('back')">Back</button>
+      <button type="submit" class="primary" :disabled="!canProceed">
+        {{ formStep === 'settings' ? 'Review &amp; deploy' : 'Next' }}
+      </button>
     </div>
   </form>
 </template>

package/src/components/IconPicker.vue

@@ -14,7 +14,7 @@ import {
 } from '../lib/accessGate.js'
 import type { WalrusNetwork } from '../lib/walrus.js'
 import type { Network } from '../lib/types.js'
-import { UiNotice, UiFieldHint } from '@meddleware/ui'
+import { UiNotice, UiFieldHint, UiSegmentedControl } from '@meddleware/ui'
 import WalrusBlobBrowser from './WalrusBlobBrowser.vue'
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 
@@ -76,7 +76,7 @@ async function purchaseAccess(): Promise<void> {
   }
 }
 
-const tab = ref<'url' | 'upload' | 'browse'>('url')
+const tab = ref('url')
 
 // Upload state
 const uploading = ref(false)
@@ -228,26 +228,16 @@ function onBrowseSelect(url: string): void {
   <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>
+    <UiSegmentedControl
+      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' },
+      ]"
+      aria-label="Icon source"
+      style="margin-bottom: 0.75rem"
+    />
 
     <!-- URL panel -->
     <div v-show="tab === 'url'" class="icon-panel">
@@ -347,49 +337,6 @@ function onBrowseSelect(url: string): void {
 </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;
 }

package/src/components/TokenDeployerView.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
 import { useWallet, useNetwork, WalletGuard } from '@meddleware/wallet-adapter'
-import ConfigForm from './ConfigForm.vue'
+import ConfigForm, { type ConfigFormStep } from './ConfigForm.vue'
 import ReviewPanel from './ReviewPanel.vue'
 import DeployProgress from './DeployProgress.vue'
 import ResultPanel from './ResultPanel.vue'
 import TermsDialog from './TermsDialog.vue'
-import { UiNotice } from '@meddleware/ui'
+import { UiNotice, UiStepper, type StepperStep } from '@meddleware/ui'
 import { emptyForm, toTokenConfig } from '../lib/form.js'
-import { validateForm, isValid } from '../lib/validation.js'
+import { validateForm } from '../lib/validation.js'
+import type { FormErrors } from '../lib/validation.js'
 import { deployToken } from '../lib/deploy.js'
 import type { DeployStep } from '../lib/deploy.js'
 import { buildDeployExecutor } from '../lib/deployExecutor.js'
@@ -16,13 +17,23 @@ import { FEE_MIST, FEE_TREASURY, PUBLISH_GAS_BUDGET, isFeeConfigured } from '../
 import { extractErrorMessage } from '../lib/errors.js'
 import type { Network, PublishResult } from '../lib/types.js'
 
-type Step = 'form' | 'review' | 'deploying' | 'done'
+type Step = 'identity' | 'token' | 'settings' | 'review' | 'deploying' | 'done'
+
+const STEPS: StepperStep[] = [
+  { id: 'identity', label: 'Identity' },
+  { id: 'token', label: 'Token' },
+  { id: 'settings', label: 'Settings' },
+  { id: 'review', label: 'Review' },
+  { id: 'done', label: 'Done' },
+]
+
+const CONFIG_STEPS: ConfigFormStep[] = ['identity', 'token', 'settings']
 
 const { account } = useWallet()
 const { network } = useNetwork()
 
 const form = reactive(emptyForm())
-const step = ref<Step>('form')
+const step = ref<Step>('identity')
 const deployStep = ref<DeployStep | null>(null)
 const deployError = ref<string | null>(null)
 const result = ref<PublishResult | null>(null)
@@ -32,12 +43,65 @@ 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 {
+const IDENTITY_KEYS: (keyof FormErrors)[] = ['packageName', 'moduleName']
+const TOKEN_KEYS: (keyof FormErrors)[] = ['name', 'symbol', 'description', 'iconUrl', 'decimals']
+const SETTINGS_KEYS: (keyof FormErrors)[] = ['initialSupply', 'recipient']
+
+function stepHasErrors(keys: (keyof FormErrors)[]): boolean {
+  return keys.some((k) => Boolean(errors.value[k]))
+}
+
+const canProceed = computed((): boolean => {
+  if (!connected.value) return false
+  switch (step.value) {
+    case 'identity': return !stepHasErrors(IDENTITY_KEYS)
+    case 'token': return !stepHasErrors(TOKEN_KEYS)
+    case 'settings': return !stepHasErrors(SETTINGS_KEYS)
+    default: return true
+  }
+})
+
+const formStep = computed((): ConfigFormStep => {
+  if (step.value === 'token') return 'token'
+  if (step.value === 'settings') return 'settings'
+  return 'identity'
+})
+
+const stepIndex = computed((): number => {
+  const map: Record<Step, number> = {
+    identity: 0,
+    token: 1,
+    settings: 2,
+    review: 3,
+    deploying: 3,
+    done: 4,
+  }
+  return map[step.value]
+})
+
+function onStepperBack(i: number): void {
+  const configStepAt = CONFIG_STEPS[i]
+  if (configStepAt && step.value === 'review') step.value = configStepAt
+  if (i < stepIndex.value && CONFIG_STEPS.includes(step.value as ConfigFormStep)) {
+    step.value = CONFIG_STEPS[i] ?? 'identity'
+  }
+}
+
+function goNext(): void {
   if (!canProceed.value) return
-  if (!termsAccepted.value) { showTerms.value = true; return }
-  step.value = 'review'
+  if (step.value === 'identity') { step.value = 'token'; return }
+  if (step.value === 'token') { step.value = 'settings'; return }
+  if (step.value === 'settings') {
+    if (!termsAccepted.value) { showTerms.value = true; return }
+    step.value = 'review'
+  }
+}
+
+function goBack(): void {
+  if (step.value === 'token') { step.value = 'identity'; return }
+  if (step.value === 'settings') { step.value = 'token'; return }
+  if (step.value === 'review') { step.value = 'settings'; return }
 }
 
 function onTermsAccept(): void {
@@ -80,26 +144,29 @@ async function confirmDeploy(): Promise<void> {
 function restart(): void {
   result.value = null
   deployError.value = null
-  step.value = 'form'
+  step.value = 'identity'
 }
 </script>
 
 <template>
   <WalletGuard message="Connect a Sui wallet to deploy your token.">
+    <UiStepper :steps="STEPS" :model-value="stepIndex" @update:model-value="onStepperBack" />
     <ConfigForm
-      v-if="step === 'form'"
+      v-if="step === 'identity' || step === 'token' || step === 'settings'"
       :form="form"
       :errors="errors"
       :can-proceed="canProceed"
       :network="network"
       :connected="connected"
-      @submit="goReview"
+      :form-step="formStep"
+      @next="goNext"
+      @back="goBack"
     />
     <ReviewPanel
       v-if="step === 'review'"
       :config="config"
       :network="network"
-      @back="step = 'form'"
+      @back="goBack"
       @confirm="confirmDeploy"
     />
     <DeployProgress v-if="step === 'deploying'" :step="deployStep" />