npm - @meddleware/walrus-ui - Versions diffs - 0.1.0 - Mend

@meddleware/walrus-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/LICENSE +14 -0
package/README.md +76 -0
package/index.html +13 -0
package/package.json +49 -0
package/src/App.vue +256 -0
package/src/components/MyBlobs.vue +188 -0
package/src/config.ts +63 -0
package/src/env.d.ts +7 -0
package/src/main.ts +5 -0
package/src/wallet.ts +160 -0
package/tsconfig.json +18 -0
package/vite.config.ts +11 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,14 @@
+BSD Zero Clause License
+Copyright (c) 2026 MeddleWare
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,76 @@
+# @meddleware/walrus-ui
+[![License: 0BSD](https://img.shields.io/badge/license-0BSD-blue)](LICENSE)
+A Vue 3 SPA for uploading and managing blobs on [Walrus](https://walrus.xyz) decentralised
+storage on Sui. Supports NFT-gated operator relays (commission-enforced on-chain via
+`access_gate`) with automatic fallback to the public Mysten relay.
+## Features
+- Connect any Sui wallet (wallet-standard)
+- Select between operator relay (supports the app) and public relay (free)
+- Upload blobs through an NFT-gated or open relay
+- View and extend your owned Walrus blobs
+- Two-approval upload flow: register tx → upload → certify tx
+## Local development
+```bash
+npm install
+npm run dev
+```
+> `@meddleware/walrus-relay` is resolved from the npm registry. For local development against an
+> unpublished library, use `npm link @meddleware/walrus-relay` or an `overrides` entry pointing at
+> a local checkout.
+## Environment variables
+All `VITE_*` vars are baked into the static bundle at build time.
+| Variable | Default | Description |
+| --- | --- | --- |
+| `VITE_NETWORK` | `testnet` | `testnet` or `mainnet` |
+| `VITE_WALRUS_RELAY_TESTNET` | Public Mysten relay | Operator relay URL for testnet |
+| `VITE_WALRUS_RELAY_MAINNET` | Public Mysten relay | Operator relay URL for mainnet |
+| `VITE_RPC_TESTNET` | `https://sui-testnet-rpc.publicnode.com` | Sui RPC for testnet |
+| `VITE_RPC_MAINNET` | `https://fullnode.mainnet.sui.io:443` | Sui RPC for mainnet |
+| `VITE_ACCESS_GATE_ID_TESTNET` | — | Gate object ID (testnet; unset = no gate) |
+| `VITE_ACCESS_GATE_SOULBOUND_TESTNET` | `false` | `true` if NFTs are soulbound |
+| `VITE_ACCESS_GATE_PRICE_MIST_TESTNET` | `0` | Purchase price in MIST |
+| `VITE_ACCESS_GATE_ID_MAINNET` | — | Gate object ID (mainnet) |
+| `VITE_UPLOAD_RELAY_MAX_TIP_MIST` | `50000000` | Max relay tip cap in MIST (0.05 SUI) |
+`ACCESS_GATE_PACKAGE_ID` and `ACCESS_GATE_PLATFORM_CONFIG_ID` are hardcoded in
+`@meddleware/walrus-relay` — operators only configure the values listed above.
+## Docker build
+The Docker context is this repo root. `@meddleware/walrus-relay` resolves from the npm registry,
+so the library must be published before building the image.
+```bash
+docker build \
+  --build-arg VITE_NETWORK=testnet \
+  --build-arg VITE_WALRUS_RELAY_TESTNET=https://sui-walrus-relay.example.com \
+  --build-arg VITE_ACCESS_GATE_ID_TESTNET=0x... \
+  --build-arg VITE_ACCESS_GATE_PRICE_MIST_TESTNET=100000000 \
+  -t walrus-ui:latest .
+```
+## Architecture
+Thin SPA — no accounting logic, no chain state derivation. The app:
+1. Reads config from env vars
+2. Wires `@meddleware/walrus-relay` composables (`useAccessGate`, `useWalrusRelay`) to the
+   connected wallet
+3. Passes a `performUpload` callback to `WalrusUpload`, which holds the `@mysten/walrus` client
+   and the upload flow logic
+4. Displays results
+All financial truth is on-chain. This UI is an orchestration shell.
+## License
+0BSD

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Walrus Uploader · MeddleWare</title>
+    <meta name="description" content="Upload blobs to Walrus decentralised storage on Sui through the MeddleWare relay. Client-side; your wallet signs and pays." />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "@meddleware/walrus-ui",
+  "version": "0.1.0",
+  "description": "Standalone Vue 3 SPA for uploading blobs to Walrus decentralised storage and managing owned blobs — wallet-connected, NFT-gated relay support.",
+  "author": "MeddleWare <meddleware@proton.me>",
+  "license": "0BSD",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meddleware-org/walrus-ui.git"
+  },
+  "type": "module",
+  "files": [
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@meddleware/design-tokens": "^0.1.0",
+    "@meddleware/nft-gate-client": "^0.0.3",
+    "@meddleware/walrus-client": "^0.0.2",
+    "@meddleware/walrus-relay": "^0.1.0",
+    "@mysten/sui": "~2.17.0",
+    "@mysten/wallet-standard": "~0.19.9",
+    "@mysten/walrus": "~1.1.7",
+    "@mysten/walrus-wasm": "~0.2.2",
+    "vue": "^3.5.40"
+  },
+  "devDependencies": {
+    "@types/node": "~24.12.2",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "typescript": "~6.0.0",
+    "vite": "^8.1.5",
+    "vue-tsc": "~3.3.0"
+  },
+  "engines": {
+    "node": "^22.18.0 || >=24.12.0"
+  }
+}

package/src/App.vue ADDED Viewed

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  WalrusUpload,
+  TipConfigBadge,
+  AccessGateCta,
+  useAccessGate,
+  MAX_SINGLE_RESERVATION_EPOCHS,
+} from '@meddleware/walrus-relay'
+import type { UploadResult } from '@meddleware/walrus-relay'
+// Lightweight URL import — just the wasm asset URL (does not pull the walrus client).
+import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
+import { useWallet, getSuiClient } from './wallet.js'
+import { NETWORK, OPERATOR_RELAY_HOSTS, relayHosts, accessGate } from './config.js'
+import MyBlobs from './components/MyBlobs.vue'
+type Tab = 'upload' | 'blobs'
+const activeTab = ref<Tab>('upload')
+const { wallets, account, connect, disconnect, signPersonalMessage, buildExecutor } = useWallet()
+const gate = accessGate(NETWORK)
+const gateState = useAccessGate({ gate, getClient: () => getSuiClient(NETWORK) })
+const purchasing = ref(false)
+const result = ref<UploadResult | null>(null)
+async function onConnectFirst(): Promise<void> {
+  const w = wallets.value[0]
+  if (w) {
+    await connect(w)
+    if (account.value) await gateState.checkOwnership(account.value.address)
+  }
+}
+async function onPurchase(): Promise<void> {
+  if (!account.value) return
+  purchasing.value = true
+  try {
+    const executor = await buildExecutor(NETWORK)
+    await gateState.purchase(executor, account.value.address)
+  } finally {
+    purchasing.value = false
+  }
+}
+// Wire the shared WalrusUpload widget to @meddleware/walrus-client + the wallet.
+async function performUpload(
+  bytes: Uint8Array,
+  opts: { relayHost: string; onStatus: (s: string) => void },
+): Promise<UploadResult> {
+  if (!account.value) throw new Error('Connect your wallet first.')
+  const { createWalrusClient, createBlobUploadFlow, walrusBlobUrl } = await import('@meddleware/walrus-client')
+  const executor = await buildExecutor(NETWORK)
+  const suiClient = getSuiClient(NETWORK)
+  // If the relay is NFT-gated and we hold access, attach a signed proof token.
+  let authToken: string | undefined
+  if (gate && gateState.hasAccess.value === true) {
+    authToken = await gateState.buildRelayAccessToken({
+      relayHost: opts.relayHost,
+      address: account.value.address,
+      sign: signPersonalMessage,
+    })
+  }
+  const client = createWalrusClient({
+    network: NETWORK,
+    wasmUrl: walrusWasmUrl,
+    uploadRelayHost: opts.relayHost,
+    uploadRelayAuthToken: authToken,
+    uploadRelayMaxTipMist: Number(import.meta.env.VITE_UPLOAD_RELAY_MAX_TIP_MIST) || 50_000_000,
+  })
+  const flow = createBlobUploadFlow(client, bytes)
+  opts.onStatus('Encoding…')
+  await flow.encode()
+  opts.onStatus('Registering blob (approve in wallet)…')
+  const regTx = flow.register({
+    owner: account.value.address,
+    epochs: MAX_SINGLE_RESERVATION_EPOCHS,
+    deletable: false,
+  })
+  regTx.setSenderIfNotSet(account.value.address)
+  await regTx.build({ client: suiClient })
+  const reg = await executor.signAndExecute(regTx)
+  await executor.waitForTransaction(reg.digest)
+  opts.onStatus('Uploading to the relay…')
+  await flow.upload({ digest: reg.digest })
+  opts.onStatus('Certifying (approve in wallet)…')
+  const certTx = flow.certify()
+  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()
+  return { blobId: blob.blobId, url: walrusBlobUrl(NETWORK, blob.blobId), digest: cert.digest }
+}
+function onUploaded(r: UploadResult): void {
+  result.value = r
+}
+</script>
+<template>
+  <div class="page">
+    <header class="head">
+      <div>
+        <h1>Walrus Assets</h1>
+        <p class="sub">Upload and manage blobs on Walrus decentralised storage ({{ NETWORK }}).</p>
+      </div>
+      <TipConfigBadge :host="OPERATOR_RELAY_HOSTS[NETWORK]" />
+    </header>
+    <nav class="tabs" aria-label="Feature tabs">
+      <button
+        type="button"
+        class="tab"
+        :class="{ active: activeTab === 'upload' }"
+        @click="activeTab = 'upload'"
+      >
+        Upload
+      </button>
+      <button
+        type="button"
+        class="tab"
+        :class="{ active: activeTab === 'blobs' }"
+        @click="activeTab = 'blobs'"
+      >
+        My Blobs
+      </button>
+    </nav>
+    <section class="wallet">
+      <template v-if="account">
+        <span class="addr">{{ account.address.slice(0, 8) }}…{{ account.address.slice(-4) }}</span>
+        <button type="button" @click="disconnect">Disconnect</button>
+      </template>
+      <template v-else>
+        <button type="button" :disabled="!wallets.length" @click="onConnectFirst">
+          {{ wallets.length ? 'Connect wallet' : 'No wallet detected' }}
+        </button>
+      </template>
+    </section>
+    <template v-if="activeTab === 'upload'">
+      <AccessGateCta
+        :gate-configured="gateState.gateConfigured"
+        :has-access="gateState.hasAccess.value"
+        :busy="purchasing"
+        :price-mist="gate?.priceMist ?? null"
+        @purchase="onPurchase"
+      />
+      <WalrusUpload
+        :hosts="relayHosts(NETWORK)"
+        :connected="!!account"
+        :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
+        :perform-upload="performUpload"
+        @uploaded="onUploaded"
+      />
+      <section v-if="result" class="result">
+        <h2>Uploaded ✓</h2>
+        <p><strong>Blob ID:</strong> <code>{{ result.blobId }}</code></p>
+        <p>
+          <strong>URL:</strong>
+          <a :href="result.url" target="_blank" rel="noopener">{{ result.url }}</a>
+        </p>
+        <p v-if="result.digest"><strong>Certify tx:</strong> <code>{{ result.digest }}</code></p>
+      </section>
+    </template>
+    <MyBlobs
+      v-if="activeTab === 'blobs'"
+      :address="account?.address ?? null"
+      :build-executor="() => buildExecutor(NETWORK)"
+    />
+    <footer class="foot">
+      <p>© MeddleWare · <a href="https://sui.meddleware.co.uk">more SUI tools</a></p>
+    </footer>
+  </div>
+</template>
+<style scoped>
+.page {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 2rem 1.25rem 4rem;
+}
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.head h1 {
+  margin: 0;
+  font-size: 1.8rem;
+}
+.sub {
+  color: var(--mw-color-text-muted, #666);
+  margin: 0.25rem 0 0;
+}
+.wallet {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.25rem 0;
+}
+.addr {
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+.result {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  border: 1px solid var(--mw-color-border, #ddd);
+  border-radius: 10px;
+  word-break: break-all;
+}
+.result code {
+  font-size: 0.85rem;
+}
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin: 1rem 0 0.5rem;
+  border-bottom: 2px solid var(--mw-color-border, #ddd);
+}
+.tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0.5rem 1rem;
+  margin-bottom: -2px;
+  cursor: pointer;
+  font-size: 0.95rem;
+  color: var(--mw-color-text-muted, #666);
+}
+.tab.active {
+  border-bottom-color: var(--mw-color-primary, #6c3);
+  color: var(--mw-color-text, #111);
+  font-weight: 600;
+}
+.foot {
+  margin-top: 3rem;
+  font-size: 0.85rem;
+  color: var(--mw-color-text-muted, #666);
+}
+</style>

package/src/components/MyBlobs.vue ADDED Viewed

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { OwnedBlob } from '@meddleware/walrus-client'
+import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
+import { getSuiClient } from '../wallet.js'
+import type { Executor } from '../wallet.js'
+import { NETWORK } from '../config.js'
+const props = defineProps<{
+  /** Connected wallet address whose owned blobs to list; `null` when no wallet is connected. */
+  address: string | null
+  /** Factory that builds a transaction {@link Executor} bound to the connected wallet (for extend). */
+  buildExecutor: () => Promise<Executor>
+}>()
+const blobs = ref<OwnedBlob[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
+const currentEpoch = ref(0)
+const extending = ref<string | null>(null)
+const extendStatus = ref<Record<string, string>>({})
+const EXPIRY_WARN_EPOCHS = 10
+const EPOCHS_PER_DAY = 1 / 0.038 // ~1 Walrus epoch ≈ 38 minutes on testnet
+function epochsToApproxDays(epochs: number): string {
+  const days = Math.round(epochs * EPOCHS_PER_DAY)
+  if (days <= 0) return 'expired'
+  if (days < 2) return `${days} day`
+  return `${days} days`
+}
+async function loadBlobs(): Promise<void> {
+  if (!props.address) return
+  loading.value = true
+  error.value = null
+  blobs.value = []
+  try {
+    const { createWalrusClient, fetchOwnedWalrusBlobs } = await import('@meddleware/walrus-client')
+    const suiClient = getSuiClient(NETWORK)
+    const walrusClient = createWalrusClient({ network: NETWORK, wasmUrl: walrusWasmUrl })
+    const [sys, fetched] = await Promise.all([
+      suiClient.getLatestSuiSystemState(),
+      fetchOwnedWalrusBlobs(suiClient, walrusClient, props.address),
+    ])
+    currentEpoch.value = Number(sys.epoch)
+    blobs.value = fetched.sort((a, b) => a.endEpoch - b.endEpoch)
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    loading.value = false
+  }
+}
+async function extendBlob(blob: OwnedBlob): Promise<void> {
+  extending.value = blob.objectId
+  extendStatus.value = { ...extendStatus.value, [blob.objectId]: 'Building transaction…' }
+  try {
+    const { createWalrusClient, extendBlobLifetimeTransaction } = await import('@meddleware/walrus-client')
+    const walrusClient = createWalrusClient({ network: NETWORK, wasmUrl: walrusWasmUrl })
+    const tx = await extendBlobLifetimeTransaction(walrusClient, blob.objectId, { epochs: 10 })
+    const executor = await props.buildExecutor()
+    extendStatus.value = { ...extendStatus.value, [blob.objectId]: 'Approve in wallet…' }
+    const { digest } = await executor.signAndExecute(tx)
+    await executor.waitForTransaction(digest)
+    extendStatus.value = { ...extendStatus.value, [blob.objectId]: `Extended ✓ (${digest.slice(0, 8)}…)` }
+    // Refresh the list so the new endEpoch is visible.
+    await loadBlobs()
+  } catch (e) {
+    extendStatus.value = {
+      ...extendStatus.value,
+      [blob.objectId]: `Failed: ${e instanceof Error ? e.message : String(e)}`,
+    }
+  } finally {
+    extending.value = null
+  }
+}
+watch(() => props.address, loadBlobs)
+</script>
+<template>
+  <section class="my-blobs">
+    <div class="toolbar">
+      <h2>My Blobs</h2>
+      <button type="button" :disabled="!address || loading" @click="loadBlobs">
+        {{ loading ? 'Loading…' : 'Refresh' }}
+      </button>
+    </div>
+    <p v-if="!address" class="hint">Connect your wallet to list your Walrus blobs.</p>
+    <p v-else-if="error" class="err">{{ error }}</p>
+    <p v-else-if="!loading && blobs.length === 0" class="hint">No Walrus blobs found for this address.</p>
+    <table v-if="blobs.length" class="blob-table">
+      <thead>
+        <tr>
+          <th>Blob ID</th>
+          <th>Size</th>
+          <th>Expires</th>
+          <th>Certified</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="blob in blobs"
+          :key="blob.objectId"
+          :class="{ warn: blob.endEpoch - currentEpoch < EXPIRY_WARN_EPOCHS }"
+        >
+          <td class="mono">{{ blob.blobId.slice(0, 12) }}…</td>
+          <td>{{ (blob.size / 1024).toFixed(1) }} KB</td>
+          <td>
+            epoch {{ blob.endEpoch }}
+            <span class="approx">(≈{{ epochsToApproxDays(blob.endEpoch - currentEpoch) }})</span>
+          </td>
+          <td>{{ blob.certified ? '✓' : '—' }}</td>
+          <td>
+            <span v-if="extendStatus[blob.objectId]" class="ext-status">
+              {{ extendStatus[blob.objectId] }}
+            </span>
+            <button
+              v-else
+              type="button"
+              :disabled="extending === blob.objectId"
+              @click="extendBlob(blob)"
+            >
+              +10 epochs
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+<style scoped>
+.my-blobs {
+  margin-top: 1.5rem;
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+.toolbar h2 {
+  margin: 0;
+  font-size: 1.2rem;
+}
+.hint {
+  color: var(--mw-color-text-muted, #888);
+  font-size: 0.9rem;
+}
+.err {
+  color: var(--mw-color-danger, #c00);
+  font-size: 0.9rem;
+}
+.blob-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.88rem;
+}
+.blob-table th,
+.blob-table td {
+  text-align: left;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--mw-color-border, #ddd);
+}
+.blob-table th {
+  font-weight: 600;
+  color: var(--mw-color-text-muted, #888);
+}
+.blob-table tr.warn td {
+  background: color-mix(in srgb, var(--mw-color-warning, #f90) 8%, transparent);
+}
+.mono {
+  font-family: monospace;
+}
+.approx {
+  font-size: 0.8em;
+  color: var(--mw-color-text-muted, #888);
+}
+.ext-status {
+  font-size: 0.85rem;
+  color: var(--mw-color-text-muted, #888);
+}
+</style>

package/src/config.ts ADDED Viewed

@@ -0,0 +1,63 @@
+// Build-time configuration (Vite inlines VITE_*). The relay hostnames default to
+// the public Mysten relay; set VITE_WALRUS_RELAY_* to your operator relay to collect
+// the tip. Access-gate config is optional (unset ⇒ ungated).
+import type { WalrusNetwork, RelayGateConfig } from '@meddleware/walrus-relay'
+import {
+  ACCESS_GATE_PACKAGE_ID,
+  ACCESS_GATE_PLATFORM_CONFIG_ID,
+  accessGateNftType,
+} from '@meddleware/walrus-relay'
+const env = (import.meta as unknown as { env?: Record<string, string | undefined> }).env ?? {}
+/** Active Walrus network, from `VITE_NETWORK` (default `testnet`). */
+export const NETWORK: WalrusNetwork = (env.VITE_NETWORK as WalrusNetwork) || 'testnet'
+/** Public Mysten relays — the fallback when no operator relay is configured. */
+export const PUBLIC_WALRUS_RELAY_HOSTS: Record<WalrusNetwork, string> = {
+  testnet: 'https://upload-relay.testnet.walrus.space',
+  mainnet: 'https://upload-relay.mainnet.walrus.space',
+}
+/** Operator relay host per network (env → public fallback). */
+export const OPERATOR_RELAY_HOSTS: Record<WalrusNetwork, string> = {
+  testnet: env.VITE_WALRUS_RELAY_TESTNET || PUBLIC_WALRUS_RELAY_HOSTS.testnet,
+  mainnet: env.VITE_WALRUS_RELAY_MAINNET || PUBLIC_WALRUS_RELAY_HOSTS.mainnet,
+}
+/** The operator/public host pair for `useWalrusRelay`. */
+export function relayHosts(network: WalrusNetwork): { operator: string; public: string } {
+  return { operator: OPERATOR_RELAY_HOSTS[network], public: PUBLIC_WALRUS_RELAY_HOSTS[network] }
+}
+/**
+ * JSON-RPC endpoint used to build + execute the register/certify transactions.
+ * NOTE: this is JSON-RPC (the public testnet fullnode serves gRPC only for JSON-RPC,
+ * so a JSON-RPC-capable endpoint is used for testnet).
+ */
+export const RPC_URLS: Record<WalrusNetwork, string> = {
+  testnet: env.VITE_RPC_TESTNET || 'https://sui-testnet-rpc.publicnode.com',
+  mainnet: env.VITE_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
+}
+/**
+ * Parse the optional NFT access-gate config for a network from env.
+ * packageId and platformConfigId are hardcoded in the library — operators only
+ * need to supply their Gate object ID, soulbound flag, and purchase price.
+ */
+export function accessGate(network: WalrusNetwork): RelayGateConfig | null {
+  const NET = network.toUpperCase()
+  const packageId = ACCESS_GATE_PACKAGE_ID[network]
+  const platformConfigId = ACCESS_GATE_PLATFORM_CONFIG_ID[network]
+  const gateId = env[`VITE_ACCESS_GATE_ID_${NET}`]
+  if (!packageId || !platformConfigId || !gateId) return null
+  const soulbound = env[`VITE_ACCESS_GATE_SOULBOUND_${NET}`] === 'true'
+  return {
+    packageId,
+    gateId,
+    platformConfigId,
+    nftType: accessGateNftType(network, soulbound),
+    soulbound,
+    priceMist: BigInt(env[`VITE_ACCESS_GATE_PRICE_MIST_${NET}`] || '0'),
+  }
+}

package/src/env.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

package/src/main.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import '@meddleware/design-tokens/tokens.css'
+import { createApp } from 'vue'
+import App from './App.vue'
+createApp(App).mount('#app')

package/src/wallet.ts ADDED Viewed

@@ -0,0 +1,160 @@
+// Minimal Sui wallet integration on @mysten/wallet-standard (dapp-kit is React-only).
+// Discovers wallets, connects, signs personal messages (for the NFT-gate proof), and
+// adapts the connected wallet into a transaction executor. Module singleton.
+//
+// NOTE: the signing path can only be exercised with a real wallet extension in a
+// browser; it is intentionally thin and executes via a JSON-RPC client so we control
+// the returned effects.
+import { markRaw, readonly, ref, shallowRef } from 'vue'
+import { getWallets, isWalletWithRequiredFeatureSet } from '@mysten/wallet-standard'
+import type { Wallet, WalletAccount } from '@mysten/wallet-standard'
+import { SuiJsonRpcClient } from '@mysten/sui/jsonRpc'
+import type { Transaction } from '@mysten/sui/transactions'
+import type { WalrusNetwork } from '@meddleware/walrus-relay'
+import { RPC_URLS } from './config.js'
+const REQUIRED_FEATURES = ['standard:connect', 'sui:signTransaction'] as const
+const wallets = shallowRef<Wallet[]>([])
+const currentWallet = shallowRef<Wallet | null>(null)
+const account = shallowRef<WalletAccount | null>(null)
+const connecting = ref(false)
+const error = ref<string | null>(null)
+const clients = new Map<WalrusNetwork, SuiJsonRpcClient>()
+/** Return a memoised {@link SuiJsonRpcClient} for the network (one instance per network). */
+export function getSuiClient(network: WalrusNetwork): SuiJsonRpcClient {
+  let c = clients.get(network)
+  if (!c) {
+    c = new SuiJsonRpcClient({ url: RPC_URLS[network], network })
+    clients.set(network, c)
+  }
+  return c
+}
+function refreshWallets(): void {
+  // markRaw: extension Wallet objects expose name/icon as ES-private-field getters
+  // that throw when accessed through a Vue reactive Proxy.
+  wallets.value = getWallets()
+    .get()
+    .filter((w) => isWalletWithRequiredFeatureSet(w, [...REQUIRED_FEATURES]))
+    .map((w) => markRaw(w))
+}
+let initialised = false
+function init(): void {
+  if (initialised) return
+  initialised = true
+  const api = getWallets()
+  refreshWallets()
+  api.on('register', refreshWallets)
+  api.on('unregister', refreshWallets)
+}
+async function connect(wallet: Wallet): Promise<void> {
+  error.value = null
+  connecting.value = true
+  try {
+    const feature = wallet.features['standard:connect'] as {
+      connect: () => Promise<{ accounts: readonly WalletAccount[] }>
+    }
+    const { accounts } = await feature.connect()
+    if (!accounts.length) throw new Error('Wallet returned no accounts.')
+    currentWallet.value = markRaw(wallet)
+    account.value = markRaw(accounts[0])
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+    throw e
+  } finally {
+    connecting.value = false
+  }
+}
+function disconnect(): void {
+  const disc = currentWallet.value?.features['standard:disconnect'] as
+    | { disconnect?: () => Promise<void> }
+    | undefined
+  void disc?.disconnect?.()
+  currentWallet.value = null
+  account.value = null
+}
+/** Sign `nft-gate:access:<nonce>` to prove address control (returns base64 signature). */
+async function signPersonalMessage(message: Uint8Array): Promise<{ signature: string }> {
+  const wallet = currentWallet.value
+  const acct = account.value
+  if (!wallet || !acct) throw new Error('Connect a wallet first.')
+  const feature = wallet.features['sui:signPersonalMessage'] as
+    | {
+        signPersonalMessage: (input: {
+          message: Uint8Array
+          account: WalletAccount
+        }) => Promise<{ bytes: string; signature: string }>
+      }
+    | undefined
+  if (!feature) throw new Error('This wallet cannot sign personal messages.')
+  const { signature } = await feature.signPersonalMessage({ message, account: acct })
+  return { signature }
+}
+/** Transaction executor bound to the connected wallet: sign+execute a PTB and await finality. */
+export interface Executor {
+  signAndExecute(tx: Transaction): Promise<{ digest: string }>
+  waitForTransaction(digest: string): Promise<unknown>
+}
+/** Build an executor bound to the connected wallet + network. */
+async function buildExecutor(network: WalrusNetwork): Promise<Executor> {
+  const wallet = currentWallet.value
+  const acct = account.value
+  if (!wallet || !acct) throw new Error('Connect a wallet first.')
+  const client = getSuiClient(network)
+  const chain = `sui:${network}` as const
+  const signFeature = wallet.features['sui:signTransaction'] as {
+    signTransaction: (input: {
+      transaction: Transaction
+      account: WalletAccount
+      chain: `sui:${string}`
+    }) => Promise<{ bytes: string; signature: string }>
+  }
+  return {
+    async signAndExecute(tx: Transaction): Promise<{ digest: string }> {
+      const { bytes, signature } = await signFeature.signTransaction({
+        transaction: tx,
+        account: acct,
+        chain,
+      })
+      const res = await client.executeTransactionBlock({
+        transactionBlock: bytes,
+        signature,
+        options: { showEffects: true },
+      })
+      return { digest: res.digest }
+    },
+    async waitForTransaction(digest: string): Promise<unknown> {
+      return client.waitForTransaction({ digest })
+    },
+  }
+}
+/**
+ * Wallet composable: discovers wallets, exposes reactive connection state, and provides
+ * `connect` / `disconnect` / `signPersonalMessage` / `buildExecutor`. Module singleton —
+ * all callers share one wallet/account state.
+ */
+export function useWallet() {
+  init()
+  return {
+    wallets: readonly(wallets),
+    currentWallet: readonly(currentWallet),
+    account: readonly(account),
+    connecting: readonly(connecting),
+    error: readonly(error),
+    connect,
+    disconnect,
+    signPersonalMessage,
+    buildExecutor,
+  }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts", "vite.config.ts"]
+}

package/vite.config.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+// design-tokens and ui resolve from node_modules (published packages).
+// @mysten/walrus is excluded from dep-optimization so its wasm `?url` import resolves.
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    exclude: ['@mysten/walrus', '@mysten/walrus-wasm'],
+  },
+})