@meddleware/token-deployer-ui 0.0.7 → 0.0.9

package/src/components/TermsDialog.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+// Pre-deploy terms, in the shared UiDialog. Closing by any route (Cancel, Escape, backdrop,
+// close button) counts as cancel; only the "continue" action accepts — UiDialog's return value
+// tells them apart.
+import { UiDialog } from '@meddleware/ui'
 
-const props = defineProps<{ open: boolean }>()
+defineProps<{ open: boolean }>()
 const emit = defineEmits<{
   (e: 'accept'): void
   (e: 'cancel'): void
 }>()
 
-const el = ref<HTMLDialogElement>()
-
-watch(
-  () => props.open,
-  (v) => (v ? el.value?.showModal() : el.value?.close()),
-)
+function onClose(returnValue: string): void {
+  if (returnValue === 'accept') emit('accept')
+  else emit('cancel')
+}
 </script>
 
 <template>
-  <dialog ref="el" @click.self="$emit('cancel')" @cancel.prevent="$emit('cancel')">
-    <div class="dialog-header">
-      <h2>Before you deploy</h2>
-    </div>
-    <ul>
+  <UiDialog :open="open" title="Before you deploy" @close="onClose">
+    <!-- A list: each item is a discrete, parallel term (announced with an item count). -->
+    <ul class="terms">
       <li>
         All operations — bytecode compilation, transaction construction, and signing — take place
         entirely <strong>client-side</strong>, meaning on your computer. No code runs on our
@@ -48,34 +47,36 @@ watch(
         arising from your use of this tool.
       </li>
     </ul>
-    <p style="margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--muted)">
+    <p class="terms__confirm">
       By continuing, you confirm that you have read and accept these terms.
     </p>
-    <div class="terms-actions">
-      <button type="button" class="primary" @click="$emit('accept')">I understand — continue</button>
-      <button type="button" @click="$emit('cancel')">Cancel</button>
-    </div>
-  </dialog>
+    <template #actions="{ close }">
+      <button type="button" class="primary" @click="close('accept')">
+        I understand — continue
+      </button>
+      <button type="button" @click="close('cancel')">Cancel</button>
+    </template>
+  </UiDialog>
 </template>
 
 <style scoped>
-ul {
+.terms {
   padding-left: 1.25rem;
-  margin: 0 0 1rem;
+  margin: 0;
   line-height: 1.6;
 }
 
-ul li {
+.terms li {
   margin-bottom: 0.6rem;
 }
 
-ul li:last-child {
+.terms li:last-child {
   margin-bottom: 0;
 }
 
-.terms-actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
+.terms__confirm {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
 }
 </style>

package/src/components/TokenDeployerView.vue

@@ -6,7 +6,16 @@ import ReviewPanel from './ReviewPanel.vue'
 import DeployProgress from './DeployProgress.vue'
 import ResultPanel from './ResultPanel.vue'
 import TermsDialog from './TermsDialog.vue'
-import { UiNotice, UiStepper, type StepperStep } from '@meddleware/ui'
+import MyTokens from './MyTokens.vue'
+import {
+  AppTabNav,
+  UiNotice,
+  UiStepper,
+  UiTabPanel,
+  UiToolIntro,
+  type AppTab,
+  type StepperStep,
+} from '@meddleware/ui'
 import { emptyForm, toTokenConfig } from '../lib/form.js'
 import { validateForm } from '../lib/validation.js'
 import type { FormErrors } from '../lib/validation.js'
@@ -32,6 +41,14 @@ const CONFIG_STEPS: ConfigFormStep[] = ['identity', 'token', 'settings']
 const { account } = useWallet()
 const { network } = useNetwork()
 
+// Top-level tabs — Deploy (the wizard) and My Tokens (coins this wallet has deployed), so the
+// layout matches the other Sui tools (intro → tabs → content).
+const TABS: AppTab[] = [
+  { id: 'deploy', label: 'Deploy' },
+  { id: 'my-tokens', label: 'My Tokens' },
+]
+const activeTab = ref('deploy')
+
 const form = reactive(emptyForm())
 const step = ref<Step>('identity')
 const deployStep = ref<DeployStep | null>(null)
@@ -55,10 +72,14 @@ function stepHasErrors(keys: (keyof FormErrors)[]): boolean {
 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
+    case 'identity':
+      return !stepHasErrors(IDENTITY_KEYS)
+    case 'token':
+      return !stepHasErrors(TOKEN_KEYS)
+    case 'settings':
+      return !stepHasErrors(SETTINGS_KEYS)
+    default:
+      return true
   }
 })
 
@@ -90,18 +111,36 @@ function onStepperBack(i: number): void {
 
 function goNext(): void {
   if (!canProceed.value) return
-  if (step.value === 'identity') { step.value = 'token'; return }
-  if (step.value === 'token') { step.value = 'settings'; return }
+  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 }
+    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 }
+  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 {
@@ -117,7 +156,10 @@ function onTermsCancel(): void {
 
 async function confirmDeploy(): Promise<void> {
   const sender = account.value?.address
-  if (!sender) { deployError.value = 'Connect a wallet first.'; return }
+  if (!sender) {
+    deployError.value = 'Connect a wallet first.'
+    return
+  }
   deployError.value = null
   step.value = 'deploying'
   deployStep.value = null
@@ -149,34 +191,61 @@ function restart(): void {
 </script>
 
 <template>
+  <UiToolIntro
+    >Deploy your own Sui coin — your wallet signs and pays; no intermediaries ({{
+      network
+    }}).</UiToolIntro
+  >
+
+  <AppTabNav
+    v-model="activeTab"
+    :tabs="TABS"
+    id-prefix="token-deployer"
+    aria-label="Sections"
+    class="deployer-tabs"
+  />
+
   <WalletGuard message="Connect a Sui wallet to deploy your token.">
-    <UiStepper :steps="STEPS" :model-value="stepIndex" @update:model-value="onStepperBack" />
-    <ConfigForm
-      v-if="step === 'identity' || step === 'token' || step === 'settings'"
-      :form="form"
-      :errors="errors"
-      :can-proceed="canProceed"
-      :network="network"
-      :connected="connected"
-      :form-step="formStep"
-      @next="goNext"
-      @back="goBack"
-    />
-    <ReviewPanel
-      v-if="step === 'review'"
-      :config="config"
-      :network="network"
-      @back="goBack"
-      @confirm="confirmDeploy"
-    />
-    <DeployProgress v-if="step === 'deploying'" :step="deployStep" />
-    <ResultPanel
-      v-if="step === 'done' && result"
-      :result="result"
-      :config="config"
-      @restart="restart"
-    />
-    <UiNotice v-if="deployError" type="error">{{ deployError }}</UiNotice>
-    <TermsDialog :open="showTerms" @accept="onTermsAccept" @cancel="onTermsCancel" />
+    <UiTabPanel id-prefix="token-deployer" :tab="activeTab">
+      <template v-if="activeTab === 'deploy'">
+        <UiStepper :steps="STEPS" :model-value="stepIndex" @update:model-value="onStepperBack" />
+        <ConfigForm
+          v-if="step === 'identity' || step === 'token' || step === 'settings'"
+          :form="form"
+          :errors="errors"
+          :can-proceed="canProceed"
+          :network="network"
+          :connected="connected"
+          :form-step="formStep"
+          @next="goNext"
+          @back="goBack"
+        />
+        <ReviewPanel
+          v-if="step === 'review'"
+          :config="config"
+          :network="network"
+          @back="goBack"
+          @confirm="confirmDeploy"
+        />
+        <DeployProgress v-if="step === 'deploying'" :step="deployStep" />
+        <ResultPanel
+          v-if="step === 'done' && result"
+          :result="result"
+          :config="config"
+          @restart="restart"
+        />
+        <UiNotice v-if="deployError" type="error">{{ deployError }}</UiNotice>
+      </template>
+
+      <MyTokens v-else :owner="account?.address ?? null" :network="network" />
+    </UiTabPanel>
   </WalletGuard>
+
+  <TermsDialog :open="showTerms" @accept="onTermsAccept" @cancel="onTermsCancel" />
 </template>
+
+<style scoped>
+.deployer-tabs {
+  margin: 0 0 1rem;
+}
+</style>

package/src/components/WalletBar.vue

@@ -3,12 +3,12 @@ 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 { UiSelect, UiNotice } from '@meddleware/ui'
+import { UiDialog, UiFormField, UiNotice, UiSelect } from '@meddleware/ui'
 
 const { wallets, currentWallet, account, connecting, error, connect, disconnect } = useWallet()
 const { network, setNetwork } = useNetwork()
 
-const dialogEl = ref<HTMLDialogElement>()
+const dialogOpen = ref(false)
 
 const shortAddress = computed(() => {
   const a = account.value?.address
@@ -20,88 +20,77 @@ const networkModel = computed({
   set: (v: string) => setNetwork(v as Network),
 })
 
-function openDialog(): void {
-  dialogEl.value?.showModal()
-}
-
-function closeDialog(): void {
-  dialogEl.value?.close()
-}
-
-watch(() => account.value, (acc) => {
-  if (acc) {
-    closeDialog()
-  }
-})
+// Close the connect dialog once a wallet connects.
+watch(
+  () => account.value,
+  (acc) => {
+    if (acc) dialogOpen.value = false
+  },
+)
 </script>
 
 <template>
-  <div class="card" role="region" aria-label="Wallet and network">
+  <section class="card wallet-bar" aria-label="Wallet and network">
     <template v-if="account">
-      <div class="row" style="justify-content: space-between">
-        <div class="row">
-          <label for="network-select" style="margin: 0">Network</label>
-          <UiSelect id="network-select" v-model="networkModel">
-            <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
-          </UiSelect>
-        </div>
-
-        <div class="row">
-          <span class="badge" aria-label="Connected wallet">
-            {{ currentWallet?.name }} · <span class="mono">{{ shortAddress }}</span>
-          </span>
-          <button type="button" @click="disconnect">Disconnect</button>
-        </div>
-      </div>
-    </template>
-    <template v-else>
-      <div class="row">
-        <div v-if="!wallets.length" style="width: 100%">
-          <p class="hint" style="margin: 0">
-            No Sui wallet detected. Install a Sui wallet extension to continue.
-          </p>
-        </div>
-        <button v-else type="button" class="primary" @click="openDialog">
-          Connect Wallet
-        </button>
-      </div>
+      <label class="row wallet-bar__network">
+        Network
+        <UiSelect v-model="networkModel">
+          <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
+        </UiSelect>
+      </label>
+      <p class="row wallet-bar__account">
+        <span class="badge">
+          <span class="mw-visually-hidden">Connected wallet:</span>
+          {{ currentWallet?.name }} · <span class="mono">{{ shortAddress }}</span>
+        </span>
+        <button type="button" @click="disconnect">Disconnect</button>
+      </p>
     </template>
+    <p v-else-if="!wallets.length" class="hint wallet-bar__none">
+      No Sui wallet detected. Install a Sui wallet extension to continue.
+    </p>
+    <button v-else type="button" class="primary" @click="dialogOpen = true">Connect Wallet</button>
 
-    <UiNotice v-if="error" type="error" style="margin-top: 0.75rem">{{ error }}</UiNotice>
-  </div>
+    <UiNotice v-if="error" type="error" class="wallet-bar__error">{{ error }}</UiNotice>
+  </section>
 
-  <dialog ref="dialogEl" aria-labelledby="wallet-dialog-title" @click.self="closeDialog">
-    <div class="dialog-header">
-      <h2 id="wallet-dialog-title">Connect Wallet</h2>
-      <button
-        type="button"
-        aria-label="Close"
-        style="background: none; border: none; font-size: 1.5rem; padding: 0; cursor: pointer; color: var(--text)"
-        @click="closeDialog"
-      >
-        ×
-      </button>
-    </div>
+  <UiDialog v-model:open="dialogOpen" title="Connect Wallet">
+    <UiFormField id="dialog-network-select" label="Network">
+      <template #default="{ attrs }">
+        <UiSelect v-bind="attrs" v-model="networkModel">
+          <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
+        </UiSelect>
+      </template>
+    </UiFormField>
 
-    <div>
-      <label for="dialog-network-select">Network</label>
-      <UiSelect id="dialog-network-select" v-model="networkModel">
-        <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
-      </UiSelect>
-    </div>
-
-    <div class="wallet-list">
-      <button
-        v-for="w in wallets"
-        :key="w.name"
-        type="button"
-        class="primary"
-        :disabled="connecting"
-        @click="connect(w)"
-      >
-        <img v-if="w.icon" :src="w.icon" alt="" width="20" height="20" />
-        {{ w.name }}
-      </button>
-    </div>
-  </dialog>
+    <menu class="wallet-list">
+      <li v-for="w in wallets" :key="w.name">
+        <button type="button" class="primary" :disabled="connecting" @click="connect(w)">
+          <img v-if="w.icon" :src="w.icon" alt="" width="20" height="20" />
+          {{ w.name }}
+        </button>
+      </li>
+    </menu>
+  </UiDialog>
 </template>
+
+<style scoped>
+.wallet-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.wallet-bar__network,
+.wallet-bar__account,
+.wallet-bar__none {
+  margin: 0;
+}
+.wallet-bar__none {
+  width: 100%;
+}
+.wallet-bar__error {
+  flex-basis: 100%;
+}
+</style>

package/src/components/WalrusBlobBrowser.vue

@@ -46,9 +46,8 @@ async function load(): Promise<void> {
   blobs.value = []
   hasLoaded.value = false
   try {
-    const { createWalrusClient, walrusBlobUrl, fetchOwnedWalrusBlobs } = await import(
-      '../lib/walrus.js'
-    )
+    const { createWalrusClient, walrusBlobUrl, fetchOwnedWalrusBlobs } =
+      await import('../lib/walrus.js')
     const suiClient = getReadClient(props.network as Network)
     const client = createWalrusClient(props.network)
     const raw = await fetchOwnedWalrusBlobs(suiClient, client, addr)
@@ -75,9 +74,13 @@ function selectBlob(item: BlobItem): void {
         type="text"
         placeholder="0x… or leave blank for your wallet"
         aria-label="Wallet address to browse"
-        style="flex: 1"
+        class="blob-browser__address"
       />
-      <button type="button" :disabled="loading || (!connected && !addressInput.trim())" @click="load">
+      <button
+        type="button"
+        :disabled="loading || (!connected && !addressInput.trim())"
+        @click="load"
+      >
         <span v-if="loading" class="spinner" aria-hidden="true"></span>
         Load
       </button>
@@ -90,26 +93,26 @@ function selectBlob(item: BlobItem): void {
       No Walrus blobs found at this address.
     </p>
 
-    <div v-if="blobs.length > 0" class="blob-grid" role="listbox" aria-label="Walrus blobs">
-      <button
-        v-for="b in blobs"
-        :key="b.objectId"
-        type="button"
-        class="blob-thumb"
-        :class="{ selected: selected === b.blobId }"
-        role="option"
-        :aria-selected="selected === b.blobId"
-        @click="selectBlob(b)"
-      >
-        <img
-          :src="b.url"
-          :alt="`Blob ${b.blobId.slice(0, 8)}…`"
-          loading="lazy"
-          @error="(e) => (e.target as HTMLElement).parentElement?.classList.add('no-img')"
-        />
-        <span class="blob-meta">{{ formatSize(b.size) }}</span>
-      </button>
-    </div>
+    <!-- A list of toggle buttons (native keyboard behaviour); aria-pressed marks the chosen blob. -->
+    <ul v-if="blobs.length > 0" role="list" class="blob-grid" aria-label="Walrus blobs">
+      <li v-for="b in blobs" :key="b.objectId">
+        <button
+          type="button"
+          class="blob-thumb"
+          :class="{ selected: selected === b.blobId }"
+          :aria-pressed="selected === b.blobId"
+          @click="selectBlob(b)"
+        >
+          <img
+            :src="b.url"
+            :alt="`Blob ${b.blobId.slice(0, 8)}…`"
+            loading="lazy"
+            @error="(e) => (e.target as HTMLElement).parentElement?.classList.add('no-img')"
+          />
+          <span class="blob-meta">{{ formatSize(b.size) }}</span>
+        </button>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -127,7 +130,12 @@ function selectBlob(item: BlobItem): void {
   margin-top: 0.25rem;
 }
 
+.blob-browser__address {
+  flex: 1;
+}
+
 .blob-thumb {
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

package/src/composables/useAccessGate.ts

@@ -53,7 +53,12 @@ export function useAccessGate(
     checking.value = true
     error.value = null
     try {
-      const nfts = await fetchAccessNfts(deps.getClient(network), address, gate.nftType, gate.gateId)
+      const nfts = await fetchAccessNfts(
+        deps.getClient(network),
+        address,
+        gate.nftType,
+        gate.gateId,
+      )
       hasAccess.value = nfts.length > 0
       usesRemaining.value = nfts.length ? nfts[0].usesRemaining : null
       nftId.value = nfts.length ? nfts[0].objectId : null

package/src/composables/useWalrusRelay.ts

@@ -1,7 +1,7 @@
 // Thin wrapper around the shared `@meddleware/walrus-relay-ui` composable: injects
 // this app's per-network relay host pair so the relay-selection + tip-estimation logic
 // lives in exactly one place (DRY). The return shape is unchanged, so consumers
-// (`WalrusIconUpload.vue`, `IconPicker.vue`) and tests are unaffected.
+// (`IconPicker.vue`) and tests are unaffected.
 import { useWalrusRelay as useSharedWalrusRelay } from '@meddleware/walrus-relay'
 import type { RelayAccessOptions, RelayOption } from '@meddleware/walrus-relay'
 import { WALRUS_RELAY_HOSTS, PUBLIC_WALRUS_RELAY_HOSTS } from '../config.js'

package/src/lib/buildPublishTx.ts

@@ -103,7 +103,7 @@ export function buildFinalizeTransaction(args: BuildFinalizeArgs): Transaction {
       target: `${SUI_FRAMEWORK}::coin_registry::finalize_registration`,
       typeArguments: [coinType],
       arguments: [
-        tx.object('0xc'),               // &mut CoinRegistry (shared object at well-known address)
+        tx.object('0xc'), // &mut CoinRegistry (shared object at well-known address)
         tx.receivingRef(args.currencyRef), // Receiving<Currency<T>> — pending object at @0xc
       ],
     })

package/src/lib/generatePackage.ts

@@ -11,7 +11,12 @@
 import { zipSync, strToU8 } from 'fflate'
 import templateFiles from '../template-src/files.json'
 import type { PublishResult, TokenConfig } from './types.js'
-import { SAFE_TEXT, deriveStructName, validateIdentifier, hasAllowedIconScheme } from './validation.js'
+import {
+  SAFE_TEXT,
+  deriveStructName,
+  validateIdentifier,
+  hasAllowedIconScheme,
+} from './validation.js'
 
 const files = templateFiles as Record<string, string>
 

package/src/lib/listMyTokens.ts

@@ -0,0 +1,45 @@
+// Discover coins the connected wallet has deployed, by listing the TreasuryCap<T> objects it
+// owns (the deploy sends the TreasuryCap to the sender). Read-only; mirrors access-gate's
+// AdminCap-based "My Gates" discovery.
+import { getReadClient } from './readClient.js'
+import type { Network } from './types.js'
+
+/** One deployed coin the wallet controls (holds the TreasuryCap for). */
+export interface DeployedToken {
+  /** Full coin type, e.g. `0x<pkg>::mytoken::MYTOKEN`. */
+  coinType: string
+  /** The published package id (first segment of the coin type). */
+  packageId: string
+  /** Object id of the owned `TreasuryCap<T>`. */
+  treasuryCapId: string
+  /** The one-time-witness struct name (last segment) — a compact display label. */
+  label: string
+}
+
+/** List the coins `owner` has deployed on `network` (via owned `TreasuryCap<T>` objects). */
+export async function listMyTokens(owner: string, network: Network): Promise<DeployedToken[]> {
+  const client = getReadClient(network)
+  // The StructType filter without type params matches every TreasuryCap<T> instantiation.
+  const res = await client.getOwnedObjects({
+    owner,
+    filter: { StructType: '0x2::coin::TreasuryCap' },
+    options: { showType: true },
+  })
+  const seen = new Set<string>()
+  const out: DeployedToken[] = []
+  for (const item of res.data ?? []) {
+    const data = item.data
+    const m = String(data?.type ?? '').match(/^0x2::coin::TreasuryCap<(.+)>$/)
+    if (!m || !data) continue
+    const coinType = m[1]
+    if (seen.has(coinType)) continue
+    seen.add(coinType)
+    out.push({
+      coinType,
+      packageId: coinType.split('::')[0] ?? '',
+      treasuryCapId: data.objectId,
+      label: coinType.split('::').pop() ?? coinType,
+    })
+  }
+  return out
+}