@meddleware/token-deployer-ui 0.0.2 → 0.0.4

package/src/components/IconPicker.vue

@@ -14,8 +14,7 @@ import {
 } from '../lib/accessGate.js'
 import type { WalrusNetwork } from '../lib/walrus.js'
 import type { Network } from '../lib/types.js'
-import AppNotice from './AppNotice.vue'
-import FieldHint from './FieldHint.vue'
+import { UiNotice, UiFieldHint, UiSegmentedControl } from '@meddleware/ui'
 import WalrusBlobBrowser from './WalrusBlobBrowser.vue'
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 
@@ -77,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)
@@ -229,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">
@@ -286,11 +275,11 @@ function onBrowseSelect(url: string): void {
       <label class="permanent-toggle">
         <input type="checkbox" v-model="permanent" />
         Permanent blob <span class="hint">(cannot be deleted)</span>
-        <FieldHint field-id="blob-permanent">
+        <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.
-        </FieldHint>
+        </UiFieldHint>
       </label>
 
       <fieldset v-if="fileName && availableRelays.length > 1" style="margin: 0.5rem 0">
@@ -312,13 +301,13 @@ function onBrowseSelect(url: string): void {
         </div>
       </fieldset>
 
-      <AppNotice v-if="fileName && estimatedCost" style="margin: 0.5rem 0">
+      <UiNotice v-if="fileName && estimatedCost" style="margin: 0.5rem 0">
         <strong>Estimated cost:</strong> {{ estimatedCost.label }}
-      </AppNotice>
+      </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. -->
-      <AppNotice v-if="fileName && purchaseAccessAvailable" style="margin: 0.5rem 0">
+      <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.
@@ -326,7 +315,7 @@ function onBrowseSelect(url: string): void {
         <button type="button" :disabled="purchasing || !connected" @click="purchaseAccess">
           {{ purchasing ? 'Purchasing…' : 'Purchase relay access' }}
         </button>
-      </AppNotice>
+      </UiNotice>
 
       <p v-if="showFreeRelayTip" class="hint" style="margin: 0.5rem 0">
         Tip: select the public relay above to avoid the relay fee.
@@ -337,7 +326,7 @@ function onBrowseSelect(url: string): void {
         <strong>SUI</strong> (gas + relay fee) in your wallet; two approvals. Stored for
         ~{{ ICON_YEARS }} years. <span v-if="status">{{ status }}</span>
       </p>
-      <AppNotice v-if="uploadError" type="error">{{ uploadError }}</AppNotice>
+      <UiNotice v-if="uploadError" type="error">{{ uploadError }}</UiNotice>
     </div>
 
     <!-- Browse panel -->
@@ -348,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/LicensePicker.vue

@@ -2,9 +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 FormSelect from './FormSelect.vue'
-import FieldHint from './FieldHint.vue'
-import AppNotice from './AppNotice.vue'
+import { UiSelect, UiFieldHint, UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ modelValue: string }>()
 const emit = defineEmits<{
@@ -73,14 +71,14 @@ async function openLicenseModal(): Promise<void> {
   <div>
     <label for="license-select">
       License
-      <FieldHint field-id="license-select">
+      <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.
-      </FieldHint>
+      </UiFieldHint>
     </label>
     <div class="license-row">
-      <FormSelect
+      <UiSelect
         id="license-select"
         v-model="selectModel"
         :disabled="loading || Boolean(error)"
@@ -103,7 +101,7 @@ async function openLicenseModal(): Promise<void> {
             :title="`${l.id} — ${l.name}`"
           >{{ l.id }}</option>
         </optgroup>
-      </FormSelect>
+      </UiSelect>
       <button type="button" class="view-btn" :disabled="loading" @click="openLicenseModal">
         View
       </button>
@@ -127,7 +125,7 @@ async function openLicenseModal(): Promise<void> {
     <div v-if="licenseLoading" style="padding: 1rem 0">
       <span class="spinner" aria-hidden="true"></span> Loading…
     </div>
-    <AppNotice v-else-if="licenseError" type="error">{{ licenseError }}</AppNotice>
+    <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>
@@ -154,7 +152,7 @@ async function openLicenseModal(): Promise<void> {
   align-items: center;
 }
 
-.license-row :deep(.select-wrapper) {
+.license-row :deep(.mw-select) {
   flex: 1;
 }
 

package/src/components/ResultPanel.vue

@@ -5,7 +5,7 @@ import { explorerObjectUrl } from '../config.js'
 import { generatePackageZip } from '../lib/generatePackage.js'
 import { fetchLicenseText } from '../lib/licenses.js'
 import GithubPush from './GithubPush.vue'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ result: PublishResult; config: TokenConfig }>()
 defineEmits<{ (e: 'restart'): void }>()
@@ -70,7 +70,7 @@ async function downloadPackage(): Promise<void> {
       </button>
       <button type="button" @click="$emit('restart')">Deploy another</button>
     </div>
-    <AppNotice v-if="downloadError" type="error">{{ downloadError }}</AppNotice>
+    <UiNotice v-if="downloadError" type="error">{{ downloadError }}</UiNotice>
 
     <div style="margin-top: 1rem">
       <GithubPush :config="config" :result="result" />

package/src/components/ReviewPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TokenConfig, Network } from '../lib/types.js'
 import { FEE_MIST } from '../config.js'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ config: TokenConfig; network: Network }>()
 defineEmits<{ (e: 'back'): void; (e: 'confirm'): void }>()
@@ -13,7 +13,7 @@ const feeSui = Number(FEE_MIST) / 1e9
   <section class="card" aria-labelledby="review-h">
     <h2 id="review-h">Review — deploying to {{ props.network }}</h2>
 
-    <AppNotice>
+    <UiNotice>
       These values are <strong>permanent</strong> once published: symbol
       <span class="mono">{{ config.symbol }}</span
       >, name <span class="mono">{{ config.name }}</span
@@ -21,7 +21,7 @@ const feeSui = Number(FEE_MIST) / 1e9
       >, and the coin type
       <span class="mono">&lt;package&gt;::{{ config.moduleName }}::{{ config.structName }}</span
       >.
-    </AppNotice>
+    </UiNotice>
 
     <dl class="grid2" v-once>
       <div>

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 AppNotice from './AppNotice.vue'
+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" />
@@ -109,7 +176,7 @@ function restart(): void {
       :config="config"
       @restart="restart"
     />
-    <AppNotice v-if="deployError" type="error">{{ deployError }}</AppNotice>
+    <UiNotice v-if="deployError" type="error">{{ deployError }}</UiNotice>
     <TermsDialog :open="showTerms" @accept="onTermsAccept" @cancel="onTermsCancel" />
   </WalletGuard>
 </template>

package/src/components/WalletBar.vue

@@ -3,8 +3,7 @@ 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'
+import { UiSelect, UiNotice } from '@meddleware/ui'
 
 const { wallets, currentWallet, account, connecting, error, connect, disconnect } = useWallet()
 const { network, setNetwork } = useNetwork()
@@ -42,9 +41,9 @@ watch(() => account.value, (acc) => {
       <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">
+          <UiSelect id="network-select" v-model="networkModel">
             <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
-          </FormSelect>
+          </UiSelect>
         </div>
 
         <div class="row">
@@ -68,7 +67,7 @@ watch(() => account.value, (acc) => {
       </div>
     </template>
 
-    <AppNotice v-if="error" type="error" style="margin-top: 0.75rem">{{ error }}</AppNotice>
+    <UiNotice v-if="error" type="error" style="margin-top: 0.75rem">{{ error }}</UiNotice>
   </div>
 
   <dialog ref="dialogEl" aria-labelledby="wallet-dialog-title" @click.self="closeDialog">
@@ -86,9 +85,9 @@ watch(() => account.value, (acc) => {
 
     <div>
       <label for="dialog-network-select">Network</label>
-      <FormSelect id="dialog-network-select" v-model="networkModel">
+      <UiSelect id="dialog-network-select" v-model="networkModel">
         <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
-      </FormSelect>
+      </UiSelect>
     </div>
 
     <div class="wallet-list">

package/src/components/WalrusBlobBrowser.vue

@@ -4,7 +4,7 @@ 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'
+import { UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ network: WalrusNetwork; connected: boolean }>()
 const emit = defineEmits<{ (e: 'select', url: string): void }>()
@@ -84,7 +84,7 @@ function selectBlob(item: BlobItem): void {
     </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>
+    <UiNotice v-if="loadError" type="error">{{ loadError }}</UiNotice>
 
     <p v-if="hasLoaded && blobs.length === 0 && !loading" class="hint">
       No Walrus blobs found at this address.

package/src/components/WalrusIconUpload.vue

@@ -7,7 +7,7 @@ import { ICON_EPOCHS } from '../lib/walrus-constants.js'
 import { ICON_MAX_BYTES, validateIconFile } from '../config.js'
 import type { WalrusNetwork } from '../lib/walrus.js'
 import type { Network } from '../lib/types.js'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 // Vite serves the Walrus wasm as an asset URL (lightweight import — just the URL).
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 
@@ -185,9 +185,9 @@ async function upload(): Promise<void> {
     </fieldset>
 
     <!-- Cost estimation (shown after file selection) -->
-    <AppNotice v-if="fileName && estimatedCost" style="margin: 0.75rem 0">
+    <UiNotice v-if="fileName && estimatedCost" style="margin: 0.75rem 0">
       <strong>Estimated cost:</strong> {{ estimatedCost.label }}
-    </AppNotice>
+    </UiNotice>
 
     <!-- Public relay notice -->
     <p v-if="showFreeRelayTip" class="hint" style="margin: 0.75rem 0">
@@ -200,6 +200,6 @@ async function upload(): Promise<void> {
       stored for ~{{ ICON_YEARS }} years.
       <span v-if="status">{{ status }}</span>
     </p>
-    <AppNotice v-if="error" type="error">{{ error }}</AppNotice>
+    <UiNotice v-if="error" type="error">{{ error }}</UiNotice>
   </div>
 </template>

package/src/index.ts

@@ -1 +1,2 @@
+import './component-styles.css'
 export { default as TokenDeployerView } from './components/TokenDeployerView.vue'

package/src/main.ts

@@ -1,8 +1,12 @@
+import '@meddleware/design-tokens/tokens.css'
+import '@meddleware/design-tokens/seasons.css'
+import '@meddleware/ui/base.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import './styles.css'
+import './component-styles.css'
 import { configureWasm } from './lib/template.js'
-import { useColorMode } from './composables/useColorMode.js'
+import { useColorMode } from '@meddleware/ui'
 
 // Apply the colour mode before mount so there is no theme flash. Defaults to
 // `system` (follows the OS) while enabling the in-app light/dark/system control.