@meddleware/token-deployer-ui 0.0.22 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/token-deployer-ui",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "license": "0BSD",
   "repository": {
@@ -49,10 +49,10 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.7",
-    "@meddleware/sui-token-client": "^0.0.3",
+    "@meddleware/sui-token-client": "^0.0.5",
     "@meddleware/ui": "^0.1.28",
-    "@meddleware/walrus-client": "^0.0.22",
-    "@meddleware/walrus-relay": "^0.1.23",
+    "@meddleware/walrus-client": "^0.0.24",
+    "@meddleware/walrus-relay": "^0.1.25",
     "@mysten/move-bytecode-template": "~0.4.1",
     "@mysten/sui": "^2.33.1",
     "@mysten/walrus": "~1.2.32",
@@ -63,7 +63,7 @@
   },
   "devDependencies": {
     "@meddleware/access-gate-client": "^0.0.3",
-    "@meddleware/wallet-adapter": "^0.0.12",
+    "@meddleware/wallet-adapter": "^0.0.13",
     "@playwright/test": "^1.56.0",
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.8",

package/src/components/IconPicker.vue

@@ -6,7 +6,7 @@ import { getReadClient } from '../wallet.js'
 import { useWalrusRelay } from '../composables/useWalrusRelay.js'
 import { useAccessGate } from '@meddleware/walrus-relay'
 // The flow subpath carries no wasm; it loads the Walrus client lazily when an upload starts.
-import { consumeStorageKey, createGatedAccess, runBlobUpload } from '@meddleware/walrus-client/flow'
+import { browserStorage, consumeStorageKey, createGatedAccess, runBlobUpload } from '@meddleware/walrus-client/flow'
 import { ICON_EPOCHS } from '../lib/walrus-constants.js'
 import { ACCESS_GATE, ICON_MAX_BYTES, WALRUS_MAX_TIP_MIST, WALRUS_RPC_URLS, validateIconFile } from '../config.js'
 import type { WalrusNetwork } from '../config.js'
@@ -157,7 +157,7 @@ async function upload(): Promise<void> {
     const access =
       gated && gate && nftId
         ? createGatedAccess({
-            storage: window.localStorage,
+            storage: browserStorage(),
             key: consumeStorageKey(walrusNet, gate.gateId, address),
             relayHost: selectedRelayHost.value,
             address,

package/src/components/TokenDeployerView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useWallet, useNetwork, WalletGuard } from '@meddleware/wallet-adapter'
 import ConfigForm, { type ConfigFormStep } from './ConfigForm.vue'
 import ReviewPanel from './ReviewPanel.vue'
@@ -9,6 +9,7 @@ import TermsDialog from './TermsDialog.vue'
 import MyTokens from './MyTokens.vue'
 import {
   AppTabNav,
+  UiButton,
   UiNotice,
   UiStepper,
   UiTabPanel,
@@ -19,14 +20,12 @@ import {
 import { emptyForm, toTokenConfig } from '../lib/form.js'
 import { validateForm } from '../lib/validation.js'
 import type { FormErrors } from '../lib/validation.js'
-import { deployToken } from '@meddleware/sui-token-client/deploy'
-import type { DeployStep } from '@meddleware/sui-token-client/deploy'
-import { buildDeployExecutor } from '../lib/deployExecutor.js'
+import { useDeploy } from '../composables/useDeploy.js'
+import { browserStorage } from '@meddleware/walrus-client/flow'
 import { FEE_MIST, FEE_TREASURY, PUBLISH_GAS_BUDGET, isFeeConfigured } from '../config.js'
-import { extractErrorMessage } from '../lib/errors.js'
-import type { TokenNetwork as Network, PublishResult } from '@meddleware/sui-token-client'
+import type { TokenNetwork as Network } from '@meddleware/sui-token-client'
 
-type Step = 'identity' | 'token' | 'settings' | 'review' | 'deploying' | 'done'
+type Step = 'identity' | 'token' | 'settings' | 'review' | 'deploying' | 'incomplete' | 'published' | 'done'
 
 const STEPS: StepperStep[] = [
   { id: 'identity', label: 'Identity' },
@@ -51,10 +50,24 @@ const activeTab = ref('deploy')
 
 const form = reactive(emptyForm())
 const step = ref<Step>('identity')
-const deployStep = ref<DeployStep | null>(null)
-const deployError = ref<string | null>(null)
-const result = ref<PublishResult | null>(null)
-const termsAccepted = ref(localStorage.getItem('sui-deployer:terms-accepted') === '1')
+const flow = useDeploy()
+const deployStep = flow.step
+const result = flow.result
+// A wallet message ("Connect a wallet first.") or the flow's error.
+const walletError = ref<string | null>(null)
+const deployError = computed(() => walletError.value ?? flow.error.value)
+// The flow decides the step once it leaves `deploying`: a failure before publishing returns to the
+// review; anything after a publish never does (a second deploy would publish a second coin).
+watch(flow.phase, (phase) => {
+  if (phase === 'deploying') step.value = 'deploying'
+  else if (phase === 'done') step.value = 'done'
+  else if (phase === 'incomplete') step.value = 'incomplete'
+  else if (phase === 'published') step.value = 'published'
+  else if (phase === 'failed') step.value = 'review'
+})
+// Storage that never throws: with site data blocked the terms are simply asked again next visit.
+const storage = browserStorage()
+const termsAccepted = ref(storage.getItem('sui-deployer:terms-accepted') === '1')
 const showTerms = ref(false)
 
 const errors = computed(() => validateForm(form))
@@ -96,6 +109,8 @@ const stepIndex = computed((): number => {
     settings: 2,
     review: 3,
     deploying: 3,
+    incomplete: 3,
+    published: 3,
     done: 4,
   }
   return map[step.value]
@@ -144,7 +159,7 @@ function goBack(): void {
 }
 
 function onTermsAccept(): void {
-  localStorage.setItem('sui-deployer:terms-accepted', '1')
+  storage.setItem('sui-deployer:terms-accepted', '1')
   termsAccepted.value = true
   showTerms.value = false
   step.value = 'review'
@@ -157,35 +172,25 @@ function onTermsCancel(): void {
 async function confirmDeploy(): Promise<void> {
   const sender = account.value?.address
   if (!sender) {
-    deployError.value = 'Connect a wallet first.'
+    walletError.value = 'Connect a wallet first.'
     return
   }
-  deployError.value = null
-  step.value = 'deploying'
-  deployStep.value = null
-  try {
-    const net = network.value as Network
-    const feeConfigured = isFeeConfigured(net)
-    result.value = await deployToken({
-      config: config.value,
-      network: net,
-      sender,
-      feeMist: feeConfigured ? FEE_MIST : 0n,
-      feeTreasury: FEE_TREASURY[net],
-      gasBudget: PUBLISH_GAS_BUDGET,
-      executor: await buildDeployExecutor(net),
-      onStep: (s) => (deployStep.value = s),
-    })
-    step.value = 'done'
-  } catch (e) {
-    deployError.value = extractErrorMessage(e)
-    step.value = 'review'
-  }
+  walletError.value = null
+  const net = network.value as Network
+  const feeConfigured = isFeeConfigured(net)
+  await flow.deploy({
+    config: config.value,
+    network: net,
+    sender,
+    feeMist: feeConfigured ? FEE_MIST : 0n,
+    feeTreasury: FEE_TREASURY[net],
+    gasBudget: PUBLISH_GAS_BUDGET,
+  })
 }
 
 function restart(): void {
-  result.value = null
-  deployError.value = null
+  flow.reset()
+  walletError.value = null
   step.value = 'identity'
 }
 </script>
@@ -231,6 +236,25 @@ function restart(): void {
             @confirm="confirmDeploy"
           />
           <DeployProgress v-if="step === 'deploying'" :step="deployStep" />
+          <section v-if="step === 'incomplete' && flow.pending.value" class="deploy-incomplete" aria-labelledby="incomplete-h">
+            <h2 id="incomplete-h">Your coin is published — finish its setup</h2>
+            <p>
+              <code>{{ flow.pending.value.result.coinType }}</code> exists on {{ flow.pending.value.result.network }},
+              but the second transaction did not complete: the currency is not registered, the initial supply
+              is not minted and your supply and metadata choices are not applied yet. The caps are in your
+              wallet.
+            </p>
+            <p>Do not deploy again — that would publish a second coin. Sign the setup transaction instead.</p>
+            <UiButton variant="primary" @click="flow.finish()">Finish setup (sign again)</UiButton>
+          </section>
+          <section v-if="step === 'published'" class="deploy-incomplete" aria-labelledby="published-h">
+            <h2 id="published-h">A coin was published, but the result could not be read</h2>
+            <p>
+              Publish transaction <code>{{ flow.publishDigest.value }}</code>. Check it in an explorer before
+              doing anything else; do not deploy again.
+            </p>
+            <UiButton variant="ghost" @click="restart">Start a new token</UiButton>
+          </section>
           <ResultPanel
             v-if="step === 'done' && result"
             :result="result"
@@ -252,4 +276,8 @@ function restart(): void {
 .deployer-tabs {
   margin: 0 0 1rem;
 }
+
+.deploy-incomplete {
+  margin: 1rem 0;
+}
 </style>

package/src/composables/useDeploy.ts

@@ -0,0 +1,105 @@
+import { ref } from 'vue'
+import {
+  DeployIncompleteError,
+  DeployUnconfirmedError,
+  PublishedError,
+  deployToken,
+  finalizeToken,
+  type DeployArgs,
+  type DeployStep,
+  type Executor,
+  type PendingFinalize,
+} from '@meddleware/sui-token-client/deploy'
+import type { PublishResult, TokenNetwork } from '@meddleware/sui-token-client'
+import { buildDeployExecutor } from '../lib/deployExecutor.js'
+import { extractErrorMessage } from '../lib/errors.js'
+
+/**
+ * Where a deploy stands:
+ * - `failed` — nothing was published; the user may review and try again.
+ * - `incomplete` — the coin is published but its setup (second signature) is not finished. The UI
+ *   must offer {@link finish}, never a fresh deploy, which would publish a second coin and charge the
+ *   fee again.
+ * - `published` — a coin was published but the outcome could not be read; the UI shows the
+ *   transaction and offers no deploy or retry.
+ * - `done` — finished (`error` may still say the last step was not confirmed).
+ */
+export type DeployPhase = 'idle' | 'deploying' | 'failed' | 'incomplete' | 'published' | 'done'
+
+/** The deploy flow's state machine, with the wallet executor injectable for tests. */
+export function useDeploy(executorFor: (network: TokenNetwork) => Promise<Executor> = buildDeployExecutor) {
+  const phase = ref<DeployPhase>('idle')
+  const step = ref<DeployStep | null>(null)
+  const error = ref<string | null>(null)
+  const result = ref<PublishResult | null>(null)
+  const pending = ref<PendingFinalize | null>(null)
+  /** The publish transaction, once one executed (shown when its outcome is unclear). */
+  const publishDigest = ref<string | null>(null)
+
+  /** Route a failure: anything after the publish executed never goes back to a fresh deploy. */
+  function onFailure(e: unknown): void {
+    error.value = extractErrorMessage(e)
+    if (e instanceof DeployUnconfirmedError) {
+      result.value = e.result
+      pending.value = null
+      phase.value = 'done'
+    } else if (e instanceof DeployIncompleteError) {
+      pending.value = e.pending
+      publishDigest.value = e.publishDigest
+      phase.value = 'incomplete'
+    } else if (e instanceof PublishedError) {
+      publishDigest.value = e.publishDigest
+      phase.value = 'published'
+    } else if (pending.value) {
+      phase.value = 'incomplete'
+    } else {
+      phase.value = 'failed'
+    }
+  }
+
+  async function deploy(args: Omit<DeployArgs, 'executor' | 'onStep'>): Promise<void> {
+    phase.value = 'deploying'
+    step.value = null
+    error.value = null
+    try {
+      result.value = await deployToken({
+        ...args,
+        executor: await executorFor(args.network),
+        onStep: (s) => (step.value = s),
+      })
+      phase.value = 'done'
+    } catch (e) {
+      onFailure(e)
+    }
+  }
+
+  /** Finish a published coin's setup: one more signature, on the network it was published to. */
+  async function finish(): Promise<void> {
+    const p = pending.value
+    if (!p) return
+    phase.value = 'deploying'
+    error.value = null
+    try {
+      result.value = await finalizeToken({
+        pending: p,
+        executor: await executorFor(p.result.network),
+        onStep: (s) => (step.value = s),
+      })
+      pending.value = null
+      phase.value = 'done'
+    } catch (e) {
+      onFailure(e)
+    }
+  }
+
+  function reset(): void {
+    phase.value = 'idle'
+    step.value = null
+    error.value = null
+    result.value = null
+    pending.value = null
+    publishDigest.value = null
+  }
+
+  return { phase, step, error, result, pending, publishDigest, deploy, finish, reset }
+}