@meddleware/token-deployer-ui 0.0.8 → 0.0.10

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

@@ -22,7 +22,7 @@ export type PersonalMessageSigner = (message: Uint8Array) => Promise<{ signature
  * When no gate is configured for the network (`ACCESS_GATE[network] == null`), the relay is
  * treated as OPEN (`hasAccess === true`) and this composable is inert — behaviour is
  * unchanged from before gating existed. When a gate IS configured, `checkOwnership` decides
- * access with a single `getOwnedObjects` call (the same cheap pattern as the relay health
+ * access with a single `listOwnedObjects` call (the same cheap pattern as the relay health
  * check), and `purchase`/`buildRelayAccessToken` drive the buy + prove flows.
  */
 export function useAccessGate(
@@ -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/config.ts

@@ -7,16 +7,16 @@ import type { AccessGateConfig } from './lib/accessGate.js'
 const env = (import.meta as unknown as { env?: Record<string, string | undefined> }).env ?? {}
 
 /**
- * Public JSON-RPC fullnode URLs per network (overridable via `VITE_RPC_*`).
+ * Public gRPC fullnode URLs per network (overridable via `VITE_RPC_*`).
  *
- * NOTE: the official testnet fullnode (`fullnode.testnet.sui.io`) now serves gRPC
- * only and returns 404 for JSON-RPC, so a JSON-RPC-capable endpoint is used for
- * testnet. Operators should set `VITE_RPC_*` to their preferred (often paid) RPC
- * for production to avoid public rate limits.
+ * These are **gRPC(-web)** endpoints for `SuiGrpcClient` — public fullnodes have
+ * deprecated JSON-RPC, so a JSON-RPC-only URL will not work here. Operators should
+ * set `VITE_RPC_*` to their preferred (often paid) gRPC endpoint for production to
+ * avoid public rate limits.
  */
 export const RPC_URLS: Record<Network, string> = {
   mainnet: env.VITE_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
-  testnet: env.VITE_RPC_TESTNET || 'https://sui-testnet-rpc.publicnode.com',
+  testnet: env.VITE_RPC_TESTNET || 'https://fullnode.testnet.sui.io:443',
   localnet: env.VITE_RPC_LOCALNET || 'http://127.0.0.1:9000',
 }
 
@@ -89,15 +89,12 @@ export function isOperatorRelayConfigured(network: WalrusNetwork): boolean {
 /**
  * gRPC fullnode URL for the Walrus icon-upload client (a `SuiGrpcClient`).
  *
- * IMPORTANT: this is a **gRPC** endpoint and is intentionally *separate* from
- * {@link RPC_URLS} (the JSON-RPC endpoints used by the deploy path). The two protocols
- * are not interchangeable — pointing the Walrus gRPC client at a JSON-RPC URL breaks it —
- * so this has its own `VITE_WALRUS_RPC_*` override rather than reusing `VITE_RPC_*`.
- * Defaults to the public gRPC fullnodes (rate-limited); set your own for production.
+ * Defaults to {@link RPC_URLS} (also gRPC); `VITE_WALRUS_RPC_*` overrides it only when
+ * Walrus traffic should use a different fullnode from the deploy path.
  */
 export const WALRUS_RPC_URLS: Record<WalrusNetwork, string> = {
-  testnet: env.VITE_WALRUS_RPC_TESTNET || 'https://fullnode.testnet.sui.io:443',
-  mainnet: env.VITE_WALRUS_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
+  testnet: env.VITE_WALRUS_RPC_TESTNET || RPC_URLS.testnet,
+  mainnet: env.VITE_WALRUS_RPC_MAINNET || RPC_URLS.mainnet,
 }
 
 /**

package/src/lib/accessGate.ts

@@ -30,27 +30,41 @@ export interface OwnedAccessNft {
   usesRemaining: number | null
 }
 
-/** Minimal structural subset of the JSON-RPC client used here. */
+/** Minimal structural subset of the core (gRPC) client used here. */
 export interface OwnedObjectsClient {
-  getOwnedObjects(params: {
-    owner: string
-    filter?: { StructType: string }
-    options?: { showContent?: boolean; showType?: boolean }
-  }): Promise<{ data: unknown[] }>
+  core: {
+    listOwnedObjects(params: {
+      owner: string
+      type?: string
+      include?: { json?: boolean }
+    }): Promise<{ objects: unknown[] }>
+  }
+}
+
+/**
+ * Unwrap a Move-struct field bag from a core `json` value. The gRPC/core API returns struct
+ * fields flat; the old JSON-RPC shape nested them under `.fields`. Tolerate both.
+ */
+function structFields(v: unknown): Record<string, any> | undefined {
+  if (!v || typeof v !== 'object') return undefined
+  const o = v as Record<string, any>
+  const nested = o.fields
+  return nested && typeof nested === 'object' ? (nested as Record<string, any>) : o
 }
 
 function parseUsesRemaining(variant: any): number | null {
   if (variant == null) return null
+  const tag: string | undefined = variant.variant ?? variant.type ?? variant.$kind
+  if (tag === 'UnlimitedPass') return null
   const fields = variant.fields ?? variant
   const ur = fields?.uses_remaining ?? fields?.SingleUse?.uses_remaining
   return ur != null ? Number(ur) : null
 }
 
-/** Parse a `getOwnedObjects` entry into an access NFT, or `null` if it isn't one. */
+/** Parse a `listOwnedObjects` entry into an access NFT, or `null` if it isn't one. */
 export function parseOwnedAccessNft(entry: any): OwnedAccessNft | null {
-  const obj = entry?.data ?? entry
-  const objectId: string | undefined = obj?.objectId
-  const inner = obj?.content?.fields?.data?.fields
+  const objectId: string | undefined = entry?.objectId
+  const inner = structFields(structFields(entry?.json)?.data)
   const gateId: string | undefined = inner?.gate_id ?? inner?.gateId
   if (!objectId || !gateId) return null
   return { objectId, gateId, usesRemaining: parseUsesRemaining(inner?.variant) }
@@ -63,12 +77,12 @@ export async function fetchAccessNfts(
   nftType: string,
   gateId?: string,
 ): Promise<OwnedAccessNft[]> {
-  const { data } = await client.getOwnedObjects({
+  const { objects } = await client.core.listOwnedObjects({
     owner,
-    filter: { StructType: nftType },
-    options: { showContent: true, showType: true },
+    type: nftType,
+    include: { json: true },
   })
-  const parsed = (data ?? [])
+  const parsed = (objects ?? [])
     .map(parseOwnedAccessNft)
     .filter((n): n is OwnedAccessNft => n !== null)
   return gateId ? parsed.filter((n) => n.gateId === gateId) : parsed

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
       ],
     })