@meddleware/token-deployer-ui 0.0.8 → 0.0.10

package/scripts/e2e-deploy.mjs

@@ -19,7 +19,7 @@
 
 import { readFileSync, existsSync } from 'node:fs'
 import { chromium } from 'playwright'
-import { SuiJsonRpcClient } from '@mysten/sui/jsonRpc'
+import { SuiGrpcClient } from '@mysten/sui/grpc'
 import { requestSuiFromFaucetV2 } from '@mysten/sui/faucet'
 import { Ed25519Keypair } from '@mysten/sui/keypairs/ed25519'
 import { Transaction } from '@mysten/sui/transactions'
@@ -37,7 +37,7 @@ const APP_NETWORK = NETWORK === 'mainnet' ? 'mainnet' : 'testnet'
 
 const DEFAULT_RPC = {
   localnet: 'http://127.0.0.1:9000',
-  testnet: 'https://sui-testnet-rpc.publicnode.com',
+  testnet: 'https://fullnode.testnet.sui.io:443',
   mainnet: 'https://fullnode.mainnet.sui.io:443',
 }
 const RPC = process.env.E2E_RPC || DEFAULT_RPC[NETWORK]
@@ -83,9 +83,15 @@ if (NETWORK === 'localnet') {
 }
 const address = keypair.toSuiAddress()
 
-// Node-side client points at the PHYSICAL RPC; its `network` label is the app network so the
-// built transaction's chain identifier matches what the wallet/app sign under.
-const client = new SuiJsonRpcClient({ url: RPC, network: APP_NETWORK })
+// Node-side gRPC client points at the PHYSICAL RPC; its `network` label is the app network so
+// the built transaction's chain identifier matches what the wallet/app sign under.
+const client = new SuiGrpcClient({ baseUrl: RPC, network: APP_NETWORK })
+
+/** Total SUI balance (MIST) of `owner`. */
+async function suiBalance(owner) {
+  const { balance } = await client.getBalance({ owner })
+  return BigInt(balance.balance)
+}
 
 const EXPECT_FEE = Boolean(FEE_ADDR) && FEE_ADDR !== ZERO_ADDR
 
@@ -95,19 +101,16 @@ async function main() {
   if (NETWORK === 'localnet') {
     await requestSuiFromFaucetV2({ host: FAUCET, recipient: address })
     for (let i = 0; i < 25; i++) {
-      const b = await client.getBalance({ owner: address })
-      if (BigInt(b.totalBalance) > 0n) break
+      if ((await suiBalance(address)) > 0n) break
       await new Promise((r) => setTimeout(r, 1000))
     }
   }
 
-  const balance = BigInt((await client.getBalance({ owner: address })).totalBalance)
+  const balance = await suiBalance(address)
   console.log('sender:', address, 'balance:', balance.toString(), 'MIST')
   if (balance === 0n) fail(`sender ${address} has no SUI on ${NETWORK}`)
 
-  const feeBefore = EXPECT_FEE
-    ? BigInt((await client.getBalance({ owner: FEE_ADDR })).totalBalance)
-    : 0n
+  const feeBefore = EXPECT_FEE ? await suiBalance(FEE_ADDR) : 0n
 
   // Browser resolution: explicit CHROME_PATH → a locally-installed Chrome → Playwright's
   // bundled Chromium (CI installs it via `npx playwright install chromium`).
@@ -167,7 +170,7 @@ async function main() {
 
   // Connect: open the dialog, select the app network if it differs from the testnet default,
   // then pick the injected wallet.
-  await page.getByRole('button', { name: 'Connect Wallet' }).click()
+  await page.getByRole('button', { name: 'Connect Wallet', exact: true }).click()
   if (APP_NETWORK !== 'testnet') {
     await page.locator('#dialog-network-select').selectOption(APP_NETWORK)
   }
@@ -175,15 +178,17 @@ async function main() {
   await page.getByText(/Mock Test Wallet ·/).waitFor({ timeout: 10000 })
   console.log('wallet connected in UI')
 
-  // Fill the form.
+  // Fill the wizard: identity → token → settings (defaults) → terms (first run) → review.
+  await page.locator('#package').fill('browser_coin')
+  await page.locator('#module').fill('browsercoin')
+  await page.getByRole('button', { name: 'Next', exact: true }).click()
   await page.locator('#name').fill('Browser Coin')
   await page.locator('#symbol').fill('BRWC')
   await page.locator('#description').fill('Deployed via headless browser e2e')
   await page.locator('#decimals').fill('6')
-  await page.locator('#package').fill('browser_coin')
-  await page.locator('#module').fill('browsercoin')
-
+  await page.getByRole('button', { name: 'Next', exact: true }).click()
   await page.getByRole('button', { name: /Review & deploy/ }).click()
+  await page.getByRole('button', { name: /I understand — continue/ }).click()
   await page.getByRole('button', { name: /Confirm & deploy/ }).click()
   console.log('confirmed; deploying (real publish + confirmation)…')
 
@@ -208,7 +213,7 @@ async function main() {
   if (!coinType.includes('::browsercoin::BROWSERCOIN')) fail(`unexpected coin type: ${coinType}`)
 
   if (EXPECT_FEE) {
-    const feeAfter = BigInt((await client.getBalance({ owner: FEE_ADDR })).totalBalance)
+    const feeAfter = await suiBalance(FEE_ADDR)
     const feeDelta = feeAfter - feeBefore
     console.log('fee delivered this run:', feeDelta.toString(), 'MIST (to', FEE_ADDR + ')')
     if (feeDelta !== EXPECT_FEE_MIST) fail(`expected ${EXPECT_FEE_MIST} MIST fee this run, got ${feeDelta}`)

package/scripts/e2e-localnet.mjs

@@ -1,18 +1,21 @@
 // End-to-end: patch -> publish (fee + immutable) -> finalize (mint + fixed supply
 // + frozen metadata) against localnet, using the actual app lib.
 import init from '@mysten/move-bytecode-template';
-import { SuiJsonRpcClient } from '@mysten/sui/jsonRpc';
+import { SuiGrpcClient } from '@mysten/sui/grpc';
 import { requestSuiFromFaucetV2 } from '@mysten/sui/faucet';
 import { Ed25519Keypair } from '@mysten/sui/keypairs/ed25519';
 import { patchTemplateModule } from '../src/lib/template.ts';
 import { buildPublishTransaction, buildFinalizeTransaction, extractPublishResult, needsFinalize } from '../src/lib/buildPublishTx.ts';
+import { toSuiTxResult } from '../src/lib/deploy.ts';
 
 await (init)();
-const client = new SuiJsonRpcClient({ url: 'http://127.0.0.1:9000' });
+const client = new SuiGrpcClient({ baseUrl: 'http://127.0.0.1:9000', network: 'localnet' });
+const balanceOf = async (owner, coinType) => BigInt((await client.getBalance({ owner, coinType })).balance.balance);
+const include = { effects: true, objectTypes: true };
 const kp = new Ed25519Keypair(); const sender = kp.toSuiAddress();
 const feeRecipient = new Ed25519Keypair().toSuiAddress();
 await requestSuiFromFaucetV2({ host: 'http://127.0.0.1:9123', recipient: sender });
-for (let i=0;i<25;i++){ const b=await client.getBalance({owner:sender}); if(BigInt(b.totalBalance)>0n)break; await new Promise(r=>setTimeout(r,1000)); }
+for (let i=0;i<25;i++){ if((await balanceOf(sender))>0n)break; await new Promise(r=>setTimeout(r,1000)); }
 
 const config = {
   packageName:'fixed_token', moduleName:'fixedtok', structName:'FIXEDTOK',
@@ -24,7 +27,7 @@ const config = {
 const moduleBytes = await patchTemplateModule(config);
 const feeMist = 250000000n;
 const pubTx = buildPublishTransaction({ moduleBytes, sender, feeMist, feeRecipient, gasBudget: 500000000n, packagePolicy: config.packagePolicy });
-const pub = await client.signAndExecuteTransaction({ signer: kp, transaction: pubTx, options: { showEffects:true, showObjectChanges:true, showBalanceChanges:true } });
+const pub = toSuiTxResult(await client.signAndExecuteTransaction({ signer: kp, transaction: pubTx, include }));
 console.log('publish status:', pub.effects?.status?.status);
 if (pub.effects?.status?.status !== 'success') { console.log(JSON.stringify(pub.effects?.status)); process.exit(1); }
 
@@ -35,30 +38,29 @@ console.log('coinType:', result.coinType);
 console.log('caps:', { t: !!result.treasuryCapId, m: !!result.metadataCapId, upgrade: result.upgradeCapId ?? '(burned=immutable)' });
 
 // fee arrived?
-const feeBal = await client.getBalance({ owner: feeRecipient });
-console.log('fee recipient balance:', feeBal.totalBalance, feeBal.totalBalance === feeMist.toString() ? 'OK' : 'MISMATCH');
+const feeBal = await balanceOf(feeRecipient);
+console.log('fee recipient balance:', feeBal.toString(), feeBal === feeMist ? 'OK' : 'MISMATCH');
 
 // finalize
 console.log('needsFinalize:', needsFinalize(config, sender));
 const finTx = buildFinalizeTransaction({ config, coinType: result.coinType, treasuryCapId: result.treasuryCapId, metadataCapId: result.metadataCapId, sender, gasBudget: 500000000n });
-const fin = await client.signAndExecuteTransaction({ signer: kp, transaction: finTx, options: { showEffects:true, showObjectChanges:true } });
+const fin = toSuiTxResult(await client.signAndExecuteTransaction({ signer: kp, transaction: finTx, include }));
 await client.waitForTransaction({ digest: fin.digest });
 console.log('finalize status:', fin.effects?.status?.status);
 if (fin.effects?.status?.status !== 'success') { console.log(JSON.stringify(fin.effects?.status)); process.exit(1); }
 
 // minted coin present?
-const coins = await client.getCoins({ owner: sender, coinType: result.coinType });
-const total = coins.data.reduce((a,c)=>a+BigInt(c.balance), 0n);
+const total = await balanceOf(sender, result.coinType);
 const expected = 1000n * 10n**6n;
 console.log('minted balance:', total.toString(), total===expected ? 'OK (1000 * 10^6)' : 'MISMATCH exp '+expected);
 
 // treasury cap frozen (immutable owner)?
-const tcap = await client.getObject({ id: result.treasuryCapId, options:{ showOwner:true } });
-const owner = tcap.data?.owner ?? tcap.object?.owner ?? tcap.owner;
+const { object: tcap } = await client.getObject({ objectId: result.treasuryCapId });
+const owner = tcap.owner;
 console.log('treasuryCap owner after fixed-supply freeze:', JSON.stringify(owner));
 
 const ok = result.coinType.endsWith('::fixedtok::FIXEDTOK')
-  && feeBal.totalBalance === feeMist.toString()
+  && feeBal === feeMist
   && !result.upgradeCapId
   && total === expected;
 console.log('\nE2E', ok ? 'PASS ✓' : 'FAIL ✗');

package/scripts/e2e-walrus-browser.mjs

@@ -8,15 +8,12 @@
 
 import { readFileSync } from 'node:fs'
 import { chromium } from 'playwright'
-import { SuiJsonRpcClient } from '@mysten/sui/jsonRpc'
 import { Ed25519Keypair } from '@mysten/sui/keypairs/ed25519'
 import { toBase64 } from '@mysten/sui/utils'
 
 const APP_URL = process.env.APP_URL || 'http://localhost:4173'
-const RPC = process.env.RPC || 'https://sui-testnet-rpc.publicnode.com'
 const ICON = '/tmp/test-icon.svg'
 
-const _client = new SuiJsonRpcClient({ url: RPC, network: 'testnet' })
 const keypair = Ed25519Keypair.fromSecretKey(process.env.SUI_PRIV)
 const address = keypair.toSuiAddress()
 
@@ -30,7 +27,7 @@ async function main() {
   const browser = await chromium.launch({
     headless: true,
     executablePath: process.env.CHROME_PATH || '/usr/bin/google-chrome',
-    // Bypass CORS so the in-browser tx.build() can hit the testnet RPC.
+    // Bypass CORS so the in-browser tx.build() can hit the testnet gRPC endpoint.
     args: ['--disable-web-security', '--disable-features=IsolateOrigins,site-per-process'],
   })
   const page = await browser.newPage()

package/scripts/gen-og-image.mjs

@@ -14,13 +14,13 @@ h1 .accent{color:#6ea8fe}
 p{font-size:34px;line-height:1.35;color:#aebfd6;max-width:960px}
 .row{display:flex;gap:18px;margin-top:52px}
 .chip{font-size:24px;color:#cfe0f7;background:#16233d;border:1px solid #26365a;border-radius:10px;padding:12px 20px}
-.url{position:absolute;bottom:56px;right:80px;font-size:26px;color:#6ea8fe;font-weight:600}
+.url{position:absolute;top:84px;right:80px;font-size:26px;color:#6ea8fe;font-weight:600}
 </style></head><body>
 <div class="badge">Sui &middot; client-side</div>
 <h1>Create your own <span class="accent">Sui coin</span><br>in the browser</h1>
 <p>Your wallet signs and pays gas &mdash; nothing is compiled or signed on a server. Keep the full, verifiable source package.</p>
 <div class="row"><div class="chip">No server</div><div class="chip">No custody</div><div class="chip">Full source included</div></div>
-<div class="url">tokens.meddleware.co.uk</div>
+<div class="url">sui-token-deployer.meddleware.co.uk</div>
 </body></html>`
 
 const browser = await chromium.launch({ executablePath: process.env.CHROME_PATH || '/usr/bin/google-chrome' })

package/scripts/publish-localnet.mjs

@@ -1,16 +1,17 @@
 import { readFileSync } from 'node:fs';
 import { bcs } from '@mysten/bcs';
 import * as tpl from '@mysten/move-bytecode-template';
-import { SuiJsonRpcClient } from '@mysten/sui/jsonRpc';
+import { SuiGrpcClient } from '@mysten/sui/grpc';
 import { requestSuiFromFaucetV2 } from '@mysten/sui/faucet';
 import { Transaction } from '@mysten/sui/transactions';
 import { Ed25519Keypair } from '@mysten/sui/keypairs/ed25519';
 import { toBase64 } from '@mysten/sui/utils';
+import { toSuiTxResult } from '../src/lib/deploy.ts';
 
 const init = tpl.default ?? tpl.init;
 try { if (typeof init === 'function') await init(); } catch {}
 
-const client = new SuiJsonRpcClient({ url: 'http://127.0.0.1:9000' });
+const client = new SuiGrpcClient({ baseUrl: 'http://127.0.0.1:9000', network: 'localnet' });
 
 const orig = new Uint8Array(readFileSync(new URL('../src/move-template/sui_token_template.mv', import.meta.url)));
 const json = tpl.deserialize(orig);
@@ -29,7 +30,7 @@ const addr = kp.toSuiAddress();
 console.log('address:', addr);
 await requestSuiFromFaucetV2({ host: 'http://127.0.0.1:9123', recipient: addr });
 let bal = '0';
-for (let i=0;i<25;i++){ const b = await client.getBalance({ owner: addr }); if (BigInt(b.totalBalance) > 0n){ bal=b.totalBalance; break;} await new Promise(r=>setTimeout(r,1000)); }
+for (let i=0;i<25;i++){ const { balance } = await client.getBalance({ owner: addr }); if (BigInt(balance.balance) > 0n){ bal=balance.balance; break;} await new Promise(r=>setTimeout(r,1000)); }
 console.log('balance:', bal);
 
 const tx = new Transaction();
@@ -39,7 +40,7 @@ tx.transferObjects([upgradeCap], addr);
 tx.setGasBudget(500000000);
 
 try {
-  const res = await client.signAndExecuteTransaction({ signer: kp, transaction: tx, options: { showEffects: true, showObjectChanges: true } });
+  const res = toSuiTxResult(await client.signAndExecuteTransaction({ signer: kp, transaction: tx, include: { effects: true, objectTypes: true } }));
   const status = res.effects?.status?.status;
   console.log('\nstatus:', status);
   if (status !== 'success') { console.log('ERR:', JSON.stringify(res.effects?.status)); process.exit(1); }

package/src/App.vue

@@ -9,12 +9,14 @@ const { mode: colorMode, set: setColorMode } = useColorMode('system')
 <template>
   <a class="skip-link" href="#main-content">Skip to main content</a>
   <main id="main-content">
-    <div class="theme-bar">
-      <ColorModeControl :model-value="colorMode" @update:model-value="setColorMode" />
-    </div>
-    <header v-once>
+    <header class="page-header">
+      <ColorModeControl
+        class="theme-toggle"
+        :model-value="colorMode"
+        @update:model-value="setColorMode"
+      />
       <h1>Create your own Sui coin</h1>
-      <p class="lede">
+      <p v-once class="lede">
         Deploy a coin on Sui directly from your browser. Your wallet signs and pays gas — nothing is
         compiled or signed on a server — and you keep the full, verifiable source package.
       </p>
@@ -24,7 +26,7 @@ const { mode: colorMode, set: setColorMode } = useColorMode('system')
 
     <TokenDeployerView />
 
-    <footer v-once style="margin-top: 3rem; color: var(--muted); font-size: 0.9rem">
+    <footer v-once class="page-footer">
       <p>
         Client-side token deployment. This tool never takes custody of your token or keys. Symbol,
         name, and decimals are permanent once published.

package/src/component-styles.css

@@ -77,12 +77,16 @@ button:disabled {
   flex-wrap: wrap;
   align-items: center;
 }
+/* A row of form/navigation actions below a block of content. */
+.actions {
+  margin-top: 1rem;
+}
 .grid2 {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0 1rem;
 }
-@media (min-width: 520px) {
+@media (width >= 520px) {
   .grid2 {
     grid-template-columns: 1fr 1fr;
   }
@@ -144,18 +148,6 @@ details > fieldset {
   background: var(--border);
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .skip-link {
   position: absolute;
   left: 0.5rem;
@@ -217,31 +209,6 @@ details > fieldset {
   }
 }
 
-dialog {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.5rem;
-  width: min(420px, 90vw);
-  max-height: 90vh;
-  overflow-y: auto;
-  color: var(--text);
-}
-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.45);
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-}
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.25rem;
-}
-.dialog-header h2 {
-  margin: 0;
-  font-size: 1.1rem;
-}
 .wallet-list {
   display: flex;
   flex-direction: column;

package/src/components/ConfigForm.vue

@@ -43,7 +43,6 @@ function onBlur(key: string): void {
 
 <template>
   <form novalidate @submit.prevent="emit('next')">
-
     <!-- Step 1: Identity -->
     <template v-if="formStep === 'identity'">
       <fieldset>
@@ -57,18 +56,32 @@ function onBlur(key: string): void {
               </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <input v-bind="attrs" v-model="form.packageName" placeholder="my_token" autocomplete="off" @blur="onBlur('packageName')" />
+              <input
+                type="text"
+                v-bind="attrs"
+                v-model="form.packageName"
+                placeholder="my_token"
+                autocomplete="off"
+                @blur="onBlur('packageName')"
+              />
             </template>
           </UiFormField>
           <UiFormField id="module" label="Module name" :error="visibleError('moduleName')">
             <template #label-suffix>
               <UiFieldHint field-id="module-name">
-                The Move module inside the package (lowercase, e.g. <b>mytoken</b>). The coin type and
-                its one-time-witness struct are derived from this name, so it is permanent too.
+                The Move module inside the package (lowercase, e.g. <b>mytoken</b>). The coin type
+                and its one-time-witness struct are derived from this name, so it is permanent too.
               </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <input v-bind="attrs" v-model="form.moduleName" placeholder="mytoken" autocomplete="off" @blur="onBlur('moduleName')" />
+              <input
+                type="text"
+                v-bind="attrs"
+                v-model="form.moduleName"
+                placeholder="mytoken"
+                autocomplete="off"
+                @blur="onBlur('moduleName')"
+              />
             </template>
           </UiFormField>
         </div>
@@ -78,8 +91,8 @@ function onBlur(key: string): void {
           </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).
+            >. The witness struct <span class="mono">{{ structPreview }}</span> is derived from the
+            module name (a Sui requirement).
           </template>
         </p>
       </fieldset>
@@ -94,22 +107,35 @@ function onBlur(key: string): void {
           <UiFormField id="name" label="Token name" :error="visibleError('name')">
             <template #label-suffix>
               <UiFieldHint field-id="token-name">
-                The human-readable display name shown in wallets and explorers (e.g. <b>My Token</b>).
-                Editable later if you keep the Updatable metadata policy.
+                The human-readable display name shown in wallets and explorers (e.g.
+                <b>My Token</b>). Editable later if you keep the Updatable metadata policy.
               </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <input v-bind="attrs" v-model="form.name" autocomplete="off" @blur="onBlur('name')" />
+              <input
+                type="text"
+                v-bind="attrs"
+                v-model="form.name"
+                autocomplete="off"
+                @blur="onBlur('name')"
+              />
             </template>
           </UiFormField>
           <UiFormField id="symbol" label="Symbol" :error="visibleError('symbol')">
             <template #label-suffix>
               <UiFieldHint field-id="token-symbol">
-                The short ticker shown in wallets (e.g. <b>MYT</b>), typically 3–5 uppercase letters.
+                The short ticker shown in wallets (e.g. <b>MYT</b>), typically 3–5 uppercase
+                letters.
               </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <input v-bind="attrs" v-model="form.symbol" autocomplete="off" @blur="onBlur('symbol')" />
+              <input
+                type="text"
+                v-bind="attrs"
+                v-model="form.symbol"
+                autocomplete="off"
+                @blur="onBlur('symbol')"
+              />
             </template>
           </UiFormField>
         </div>
@@ -118,8 +144,8 @@ function onBlur(key: string): void {
           <template #label-suffix>
             &nbsp;<span class="hint">(optional)</span>
             <UiFieldHint field-id="token-description">
-              A short blurb stored in the coin metadata and shown in some wallets/explorers.
-              Leave blank if you don't need one.
+              A short blurb stored in the coin metadata and shown in some wallets/explorers. Leave
+              blank if you don't need one.
             </UiFieldHint>
           </template>
           <template #default="{ attrs }">
@@ -136,7 +162,13 @@ function onBlur(key: string): void {
             </UiFieldHint>
           </template>
           <template #default="{ attrs }">
-            <input v-bind="attrs" v-model="form.decimals" inputmode="numeric" @blur="onBlur('decimals')" />
+            <input
+              type="text"
+              v-bind="attrs"
+              v-model="form.decimals"
+              inputmode="numeric"
+              @blur="onBlur('decimals')"
+            />
           </template>
         </UiFormField>
 
@@ -158,14 +190,21 @@ function onBlur(key: string): void {
         <UiFormField id="supply" label="Initial supply" :error="visibleError('initialSupply')">
           <template #label-suffix>
             <UiFieldHint field-id="supply">
-              The number of whole tokens to mint and send to the recipient at deployment.
-              Uses your chosen decimal precision — with 9 decimals, 1 token = 1,000,000,000 base units on-chain.
-              Enter <b>0</b> or leave blank for no initial supply.
-              You can mint more later if you choose the Mintable supply policy.
+              The number of whole tokens to mint and send to the recipient at deployment. Uses your
+              chosen decimal precision — with 9 decimals, 1 token = 1,000,000,000 base units
+              on-chain. Enter <b>0</b> or leave blank for no initial supply. You can mint more later
+              if you choose the Mintable supply policy.
             </UiFieldHint>
           </template>
           <template #default="{ attrs }">
-            <input v-bind="attrs" v-model="form.initialSupply" inputmode="numeric" placeholder="0" @blur="onBlur('initialSupply')" />
+            <input
+              type="text"
+              v-bind="attrs"
+              v-model="form.initialSupply"
+              inputmode="numeric"
+              placeholder="0"
+              @blur="onBlur('initialSupply')"
+            />
           </template>
         </UiFormField>
 
@@ -204,8 +243,8 @@ function onBlur(key: string): void {
         <UiFormField id="package-policy" label="Package code">
           <template #label-suffix>
             <UiFieldHint field-id="package-policy">
-              <b>Immutable</b>: the UpgradeCap is burned — the on-chain code is sealed.
-              Recommended for trust and auditability.<br />
+              <b>Immutable</b>: the UpgradeCap is burned — the on-chain code is sealed. Recommended
+              for trust and auditability.<br />
               <b>Upgradeable</b>: you keep the UpgradeCap and can push code changes to the package
               after deployment.
             </UiFieldHint>
@@ -221,14 +260,21 @@ function onBlur(key: string): void {
         <UiFormField id="recipient" label="Recipient" :error="visibleError('recipient')">
           <template #label-suffix>
             <UiFieldHint field-id="recipient">
-              The Sui address that receives the TreasuryCap, MetadataCap, UpgradeCap (if kept),
-              and any initial supply minted at deployment.
-              Leave blank to send everything to the connected wallet.
-              Enter a different address to separate the deployer wallet from the custody wallet.
+              The Sui address that receives the TreasuryCap, MetadataCap, UpgradeCap (if kept), and
+              any initial supply minted at deployment. Leave blank to send everything to the
+              connected wallet. Enter a different address to separate the deployer wallet from the
+              custody wallet.
             </UiFieldHint>
           </template>
           <template #default="{ attrs }">
-            <input v-bind="attrs" v-model="form.recipient" placeholder="0x…" autocomplete="off" @blur="onBlur('recipient')" />
+            <input
+              type="text"
+              v-bind="attrs"
+              v-model="form.recipient"
+              placeholder="0x…"
+              autocomplete="off"
+              @blur="onBlur('recipient')"
+            />
           </template>
         </UiFormField>
 
@@ -236,7 +282,7 @@ function onBlur(key: string): void {
       </fieldset>
     </template>
 
-    <div class="row" style="margin-top: 1rem">
+    <div class="row actions">
       <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' }}

package/src/components/DeployProgress.vue

@@ -25,9 +25,7 @@ function getState(i: number): 'done' | 'active' | 'todo' {
   return 'todo'
 }
 
-const steps = computed(() =>
-  ORDER.map((s, i) => ({ ...s, state: getState(i) }))
-)
+const steps = computed(() => ORDER.map((s, i) => ({ ...s, state: getState(i) })))
 </script>
 
 <template>
@@ -38,7 +36,7 @@ const steps = computed(() =>
         <span v-if="s.state === 'active'" class="spinner" aria-hidden="true"></span>
         <span v-else-if="s.state === 'done'" aria-hidden="true">✓ </span>
         {{ s.label }}
-        <span v-if="s.state === 'active'" class="visually-hidden">(in progress)</span>
+        <span v-if="s.state === 'active'" class="mw-visually-hidden">(in progress)</span>
       </li>
     </ol>
     <p class="hint">Keep this tab open and approve the wallet prompts.</p>

package/src/components/GithubPush.vue

@@ -56,7 +56,7 @@ async function push(): Promise<void> {
       {{ open ? '▾' : '▸' }} Create a GitHub repo (optional)
     </button>
 
-    <div v-if="open" class="card" style="margin-top: 0.5rem">
+    <div v-if="open" class="card github-push__form">
       <p v-once class="hint">
         Uses your <strong>own</strong> GitHub token — the repo is created in your account and this
         site's servers are never involved. The token is sent only to
@@ -67,24 +67,23 @@ async function push(): Promise<void> {
       </p>
 
       <label for="gh-repo">Repository name</label>
-      <input id="gh-repo" v-model="repoName" autocomplete="off" />
+      <input id="gh-repo" v-model="repoName" type="text" autocomplete="off" />
 
       <label for="gh-token">GitHub token</label>
       <input
         id="gh-token"
         v-model="token"
         type="password"
-        autocomplete="off"
+        autocomplete="new-password"
         spellcheck="false"
         placeholder="github_pat_… or ghp_…"
       />
 
-      <label style="font-weight: 400; margin-top: 0.75rem">
-        <input type="checkbox" v-model="isPrivate" style="width: auto" /> Make the repository
-        private
+      <label class="github-push__private">
+        <input v-model="isPrivate" type="checkbox" /> Make the repository private
       </label>
 
-      <div class="row" style="margin-top: 0.75rem">
+      <div class="row github-push__actions">
         <button type="button" class="primary" :disabled="busy || !token || !repoName" @click="push">
           <span v-if="busy" class="spinner" aria-hidden="true"></span> Create repo &amp; push
         </button>
@@ -98,3 +97,19 @@ async function push(): Promise<void> {
     </div>
   </div>
 </template>
+
+<style scoped>
+.github-push__form {
+  margin-top: 0.5rem;
+}
+.github-push__private {
+  margin-top: 0.75rem;
+  font-weight: 400;
+}
+.github-push__private input {
+  width: auto;
+}
+.github-push__actions {
+  margin-top: 0.75rem;
+}
+</style>