@meddleware/token-deployer-ui 0.0.8 → 0.0.9

package/src/styles.css

@@ -2,12 +2,18 @@
    Token variables come from @meddleware/design-tokens, imported before this.
    Component utility classes live in component-styles.css. */
 
-.theme-bar {
-  display: flex;
-  justify-content: flex-end;
+/* The colour-mode control is the page header's first grid item, aligned to the inline end. */
+.theme-toggle {
+  justify-self: end;
   margin-bottom: 0.75rem;
 }
 
+.page-footer {
+  margin-top: 3rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
 body {
   margin: 0;
   background: var(--bg);
@@ -21,12 +27,14 @@ body {
 }
 
 main {
-  max-width: 760px;
+  max-width: var(--mw-tool-content-max);
   margin: 0 auto;
   padding: 1.5rem 1.25rem 4rem;
 }
 
-header {
+/* A single-column grid so the colour-mode control can sit at the inline end without a wrapper. */
+.page-header {
+  display: grid;
   padding-bottom: 1.5rem;
   border-bottom: 1px solid var(--border);
   margin-bottom: 1.5rem;

package/stylelint.config.js

@@ -0,0 +1,33 @@
+// Stylelint over the library's CSS and the <style> blocks of its SFCs.
+// postcss-html provides the custom syntax needed to lint Vue single-file components.
+export default {
+  extends: ['stylelint-config-standard'],
+  overrides: [{ files: ['**/*.vue'], customSyntax: 'postcss-html' }],
+  rules: {
+    // The design system leans heavily on custom properties and deliberate
+    // ordering; these standard rules are too noisy for a token-driven codebase.
+    'custom-property-empty-line-before': null,
+    'declaration-empty-line-before': null,
+    'comment-empty-line-before': null,
+    'rule-empty-line-before': null,
+    'at-rule-empty-line-before': null,
+    'no-descending-specificity': null,
+    // BEM-style class names (block__element--modifier) are intentional.
+    'selector-class-pattern': null,
+    // Some presentational SFCs use compact single-line multi-declaration rules.
+    'declaration-block-single-line-max-declarations': null,
+    // Preserve camelCase CSS keyword values (e.g. text-rendering: optimizeLegibility).
+    'value-keyword-case': null,
+    // Vue SFC scoped-style pseudo-classes.
+    'selector-pseudo-class-no-unknown': [
+      true,
+      { ignorePseudoClasses: ['deep', 'slotted', 'global'] },
+    ],
+    // Private panel vars use a leading-underscore convention (--_bg, --_text).
+    'custom-property-pattern': null,
+    // Vendor-prefixed properties are emitted by autoprefixer at build time; the
+    // hand-written -webkit-/-moz- font-smoothing pair is intentional.
+    'property-no-vendor-prefix': null,
+    'value-no-vendor-prefix': null,
+  },
+}

package/test-results/.last-run.json

@@ -1,4 +1,4 @@
 {
-  "status": "passed",
+  "status": "failed",
   "failedTests": []
 }

package/typedoc.json

@@ -13,8 +13,8 @@
     "src/lib/github.ts",
     "src/lib/walrus.ts",
     "src/lib/walrus-constants.ts",
-    "src/composables/useWallet.ts",
-    "src/composables/useSuiClient.ts"
+    "src/composables/useAccessGate.ts",
+    "src/composables/useWalrusRelay.ts"
   ],
   "out": "docs/api",
   "readme": "none",

package/src/components/WalrusIconUpload.vue

@@ -1,205 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { useWallet } from '@meddleware/wallet-adapter'
-import { buildDeployExecutor } from '../lib/deployExecutor.js'
-import { useWalrusRelay } from '../composables/useWalrusRelay.js'
-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 { 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'
-
-const props = defineProps<{ network: WalrusNetwork; connected: boolean }>()
-const emit = defineEmits<{ (e: 'uploaded', url: string): void }>()
-
-const { account } = useWallet()
-const {
-  selectedRelayHost,
-  availableRelays,
-  estimatedCost,
-  fileSizeBytes,
-  checkOperatorRelayHealth,
-} = useWalrusRelay(props.network)
-
-const uploading = ref(false)
-const status = ref('')
-const error = ref<string | null>(null)
-const fileName = ref('')
-let bytes: Uint8Array | null = null
-
-const maxSizeLabel = `${Math.round(ICON_MAX_BYTES / 1024)} KB`
-const ICON_YEARS = Math.round(ICON_EPOCHS / 26)
-
-onMounted(() => {
-  checkOperatorRelayHealth()
-})
-
-const showPublicRelayNotice = computed(() => availableRelays.value.length > 1)
-
-const showFreeRelayTip = computed(() => {
-  const publicHost = availableRelays.value.find((r) => r.isPublic)?.host
-  return showPublicRelayNotice.value && selectedRelayHost.value !== publicHost
-})
-
-function onFile(e: Event): void {
-  error.value = null
-  bytes = null
-  fileName.value = ''
-  const f = (e.target as HTMLInputElement).files?.[0]
-  if (!f) return
-
-  // UX/cost guard only — the authoritative cap is the edge (relay) body limit.
-  const invalid = validateIconFile(f)
-  if (invalid) {
-    error.value = invalid
-    return
-  }
-
-  fileName.value = f.name
-  fileSizeBytes.value = f.size
-  const reader = new FileReader()
-  reader.onload = () => {
-    bytes = new Uint8Array(reader.result as ArrayBuffer)
-  }
-  reader.readAsArrayBuffer(f)
-}
-
-function onRelayChange(newHost: string): void {
-  selectedRelayHost.value = newHost
-}
-
-async function upload(): Promise<void> {
-  if (!bytes) {
-    error.value = 'Choose an image first.'
-    return
-  }
-  if (!account.value) {
-    error.value = 'Connect your wallet first.'
-    return
-  }
-  uploading.value = true
-  error.value = null
-  try {
-    // Lazily load the heavy @mysten/walrus code and Sui client only on demand.
-    const { createWalrusClient, createBlobUploadFlow, walrusBlobUrl } =
-      await import('../lib/walrus.js')
-    const { getReadClient } = await import('../lib/readClient.js')
-    const executor = await buildDeployExecutor(props.network as Network)
-    const suiClient = getReadClient(props.network as Network)
-    const client = createWalrusClient(props.network, {
-      wasmUrl: walrusWasmUrl,
-      uploadRelayHost: selectedRelayHost.value,
-    })
-    const flow = createBlobUploadFlow(client, bytes)
-
-    status.value = 'Encoding…'
-    await flow.encode()
-
-    // Disclose the relay fee before asking for a signature. `calculateUploadRelayTip`
-    // takes the UNENCODED size and throws if the tip exceeds the client max guard.
-    let feeNote = ''
-    try {
-      const tipMist = await client.walrus.calculateUploadRelayTip({ size: bytes.length })
-      const tipSui = Number(tipMist) / 1e9
-      feeNote = tipMist > 0n ? ` Relay fee ≈ ${tipSui.toFixed(4)} SUI + storage (WAL).` : ''
-    } catch {
-      // Non-fatal for disclosure; the register step surfaces any real tip error.
-    }
-
-    status.value = `Registering blob (approve in wallet)…${feeNote}`
-    const regTx = flow.register({
-      owner: account.value.address,
-      epochs: ICON_EPOCHS,
-      deletable: false,
-    })
-    // Set sender and build with the Sui client to resolve CoinWithBalance intents
-    regTx.setSenderIfNotSet(account.value.address)
-    await regTx.build({ client: suiClient })
-    const reg = await executor.signAndExecute(regTx)
-    await executor.waitForTransaction(reg.digest)
-
-    status.value = 'Uploading to the relay…'
-    await flow.upload({ digest: reg.digest })
-
-    status.value = 'Certifying (approve in wallet)…'
-    const certTx = flow.certify()
-    // Set sender and build the certify transaction with the Sui client
-    certTx.setSenderIfNotSet(account.value.address)
-    await certTx.build({ client: suiClient })
-    const cert = await executor.signAndExecute(certTx)
-    await executor.waitForTransaction(cert.digest)
-
-    const blob = await flow.getBlob()
-    emit('uploaded', walrusBlobUrl(props.network, blob.blobId))
-    status.value = 'Uploaded ✓ — URL filled in above.'
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : String(e)
-    status.value = ''
-  } finally {
-    uploading.value = false
-  }
-}
-</script>
-
-<template>
-  <div>
-    <label for="walrus-file" class="hint" style="display: block; font-weight: 600">
-      …or upload an image to Walrus
-    </label>
-    <div class="row">
-      <input
-        id="walrus-file"
-        type="file"
-        accept="image/*"
-        aria-label="Choose an image to upload to Walrus"
-        aria-describedby="walrus-help"
-        style="width: auto"
-        @change="onFile"
-      />
-      <button type="button" :disabled="uploading || !connected || !fileName" @click="upload">
-        <span v-if="uploading" class="spinner" aria-hidden="true"></span>
-        Upload to Walrus
-      </button>
-    </div>
-
-    <!-- Relay selection (shown only if multiple relays available) -->
-    <fieldset v-if="fileName && availableRelays.length > 1" style="margin: 0.75rem 0">
-      <legend>Upload relay</legend>
-      <div style="display: flex; flex-direction: column; gap: 0.5rem">
-        <label
-          v-for="option in availableRelays"
-          :key="option.host"
-          style="display: flex; align-items: center; gap: 0.5rem"
-        >
-          <input
-            type="radio"
-            :value="option.host"
-            :checked="selectedRelayHost === option.host"
-            @change="(e) => onRelayChange((e.target as HTMLInputElement).value)"
-          />
-          <span>{{ option.label }}</span>
-        </label>
-      </div>
-    </fieldset>
-
-    <!-- Cost estimation (shown after file selection) -->
-    <UiNotice v-if="fileName && estimatedCost" style="margin: 0.75rem 0">
-      <strong>Estimated cost:</strong> {{ estimatedCost.label }}
-    </UiNotice>
-
-    <!-- Public relay notice -->
-    <p v-if="showFreeRelayTip" class="hint" style="margin: 0.75rem 0">
-      Tip: select the public relay above to avoid the relay fee.
-    </p>
-
-    <p id="walrus-help" class="hint" aria-live="polite">
-      Max {{ maxSizeLabel }} · PNG/JPEG/WebP/SVG. Requires <strong>WAL</strong> (storage) and
-      <strong>SUI</strong> (gas + a small relay fee) in your wallet; two wallet approvals. Blob
-      stored for ~{{ ICON_YEARS }} years.
-      <span v-if="status">{{ status }}</span>
-    </p>
-    <UiNotice v-if="error" type="error">{{ error }}</UiNotice>
-  </div>
-</template>