@meddleware/walrus-storage-ui 0.1.64 → 0.1.66

package/src/config.ts

@@ -6,9 +6,10 @@
 // purchase price and payees are read from the chain, never configured.
 import { computed } from 'vue'
 import type { WalrusNetwork, RelayGateConfig } from '@meddleware/walrus-storage-kit'
-import { relayGateConfig } from '@meddleware/walrus-storage-kit'
+import { PUBLIC_WALRUS_RELAY_HOSTS, relayGateConfig } from '@meddleware/walrus-storage-kit'
 import { useNetwork } from '@meddleware/wallet-adapter'
 import { withRuntimeEnv } from '@meddleware/ui'
+import { errorMessage } from '@meddleware/web-utils'
 
 /** Build-time env bag. Injectable on the env-reading helpers below purely so unit tests can exercise
  *  each branch without depending on Vite's (frozen) `import.meta.env` inlining. */
@@ -25,12 +26,6 @@ export const walrusNetwork = computed<WalrusNetwork | null>(() =>
   network.value === 'testnet' || network.value === 'mainnet' ? network.value : null,
 )
 
-/** 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,
@@ -42,14 +37,6 @@ export function relayHosts(network: WalrusNetwork): { operator: string; public:
   return { operator: OPERATOR_RELAY_HOSTS[network], public: PUBLIC_WALRUS_RELAY_HOSTS[network] }
 }
 
-/**
- * Walruscan explorer URL for a blob. A Walrus blob id is not a Sui object, so it links to the
- * Walrus-native explorer rather than a Sui explorer (SuiVision handles Sui entities elsewhere).
- */
-export function walruscanBlobUrl(network: WalrusNetwork, blobId: string): string {
-  return `https://walruscan.com/${network}/blob/${blobId}`
-}
-
 /**
  * Default relay tip ceiling (MIST) when `VITE_UPLOAD_RELAY_MAX_TIP_MIST` is unset: 0.005 SUI, the
  * workspace-wide ceiling (~8× the operator relay's worst-case tip at the 100 MiB edge cap).
@@ -83,7 +70,7 @@ export function accessGate(network: WalrusNetwork, envSource: EnvSource = env):
       soulbound: envSource[`VITE_ACCESS_GATE_SOULBOUND_${NET}`] === 'true',
     })
   } catch (e) {
-    console.warn(`[walrus-storage-ui] access gate for ${network} disabled: ${e instanceof Error ? e.message : String(e)}`)
+    console.warn(`[walrus-storage-ui] access gate for ${network} disabled: ${errorMessage(e)}`)
     return null
   }
 }

package/src/e2e-data.ts

@@ -0,0 +1,11 @@
+// What the end-to-end build's prepared blob list is made of, apart from the code that installs it (`e2e.ts` pulls in the mock wallet, which
+// a Playwright spec, running in Node, cannot load): the specs import these to look for the right rows.
+export const E2E_EPOCH = 560
+
+/** Blob ids as the aggregator spells them (URL-safe base64, 43 characters). */
+export const E2E_BLOBS = {
+  duplicated: 'Qm9yZWRPZkR1cGxpY2F0ZXNfQm9yZWRPZkR1cGxpY2F0ZXM',
+  steady: 'U3RlYWR5U3RhdGVTdG9yYWdlX1N0ZWFkeVN0YXRlU3RvcmE',
+  pending: 'UGVuZGluZ0NlcnRpZmljYXRpb25fUGVuZGluZ0NlcnRpZmk',
+  maxed: 'TWF4aW11bUxpZmV0aW1lX01heGltdW1MaWZldGltZV9NYXg',
+} as const

package/src/e2e.ts

@@ -0,0 +1,46 @@
+// End-to-end build only (`vite build --mode e2e`; main.ts loads this when MODE is `e2e` and VITE_E2E is `1`, both static, so every other
+// build drops it). A mock wallet is registered like an extension, and the owned-blob list is filled in advance (a session cache the app
+// reads through `useOwnedBlobs`), so the connected screens can be shown and checked without a network or a funded key. The upload itself
+// needs a relay and storage nodes: it is exercised by the localnet spec, not here.
+import { MOCK_ADDRESS, installE2eWallet } from '@meddleware/wallet-adapter/testing'
+import { browserStorage, pendingCertifyKey, savePendingCertify } from '@meddleware/walrus-storage-client/flow'
+import type { OwnedBlob } from '@meddleware/walrus-storage-client'
+import { useOwnedBlobs } from './composables/useOwnedBlobs.js'
+import { E2E_BLOBS, E2E_EPOCH } from './e2e-data.js'
+
+const hex = (byte: string) => `0x${byte.repeat(32)}`
+
+const blob = (n: number, blobId: string, over: Partial<OwnedBlob>): OwnedBlob => ({
+  objectId: hex(n.toString(16).padStart(2, '0')),
+  blobId,
+  size: 48 * 1024,
+  startEpoch: 540,
+  endEpoch: 600,
+  certified: true,
+  deletable: false,
+  ...over,
+})
+
+export function installE2e(): void {
+  installE2eWallet()
+  const owned = [
+    // Re-uploads of the same content collapse into one row with two copies; the nearer one is about to expire.
+    blob(1, E2E_BLOBS.duplicated, { endEpoch: 565 }),
+    blob(2, E2E_BLOBS.duplicated, { endEpoch: 566, size: 48 * 1024 }),
+    blob(3, E2E_BLOBS.steady, { endEpoch: 600, size: 3 * 1024 * 1024 }),
+    // Uploaded but not certified, with the certificate still stored: Certify is offered.
+    blob(4, E2E_BLOBS.pending, { endEpoch: 580, certified: false, deletable: true }),
+    // Already as far ahead as the chain allows: nothing to extend.
+    blob(5, E2E_BLOBS.maxed, { endEpoch: 613, size: 512 }),
+  ]
+  savePendingCertify(browserStorage(), pendingCertifyKey('testnet', MOCK_ADDRESS), {
+    blobId: E2E_BLOBS.pending,
+    blobObjectId: owned[3].objectId,
+    certificate: 'ZTJlLWNlcnRpZmljYXRl',
+    deletable: true,
+  })
+  const state = useOwnedBlobs()
+  state.blobs.value = owned.sort((a, b) => a.endEpoch - b.endEpoch)
+  state.currentEpoch.value = E2E_EPOCH
+  state.loadedFor.value = `testnet|${MOCK_ADDRESS}`
+}

package/src/main.ts

@@ -1,6 +1,6 @@
 import '@meddleware/design-tokens/tokens.css'
 import '@meddleware/design-tokens/seasons.css'
-import '@meddleware/ui/base.css'
+import '@meddleware/ui/reset.css'
 import { createApp } from 'vue'
 import { loadRuntimeConfig, useSeason } from '@meddleware/ui'
 import { useNetwork } from '@meddleware/wallet-adapter'
@@ -15,6 +15,8 @@ useSeason()
 // Machine-zone endpoints (the indexer, the Walrus relays) come from /runtime-config.json when the deployment
 // serves one (ADR-0005); load it before any module that reads them is imported.
 void loadRuntimeConfig().then(async () => {
+  // End-to-end builds only: a mock wallet and a stub chain (`src/e2e.ts`). Both conditions are static, so no other build contains it.
+  if (import.meta.env.MODE === 'e2e' && import.meta.env.VITE_E2E === '1') (await import('./e2e.js')).installE2e()
   const { default: App } = await import('./App.vue')
   createApp(App).mount('#app')
 })

package/src/wallet.ts

@@ -1,47 +1,8 @@
-// Thin walrus-storage-ui shim over the shared @meddleware/wallet-adapter singleton.
-//
-// RPC URL is resolved from the runtime useNetwork() singleton so network switching
-// in the dashboard propagates immediately to all tool views. Because the adapter is a
-// module singleton, the wallet connection is shared with any other tool view rendered
-// in the same window (e.g. the dashboard).
-import {
-  useWallet as useWalletBase,
-  getSuiClient as getSuiClientBase,
-  buildExecutor as buildExecutorBase,
-  useNetwork,
-} from '@meddleware/wallet-adapter'
+// walrus-storage-ui's wallet: the shared @meddleware/wallet-adapter singleton, bound to the selected network. Walrus needs
+// `sui:signTransaction` (register, certify, extend), so only wallets that can sign transactions are offered. Because the adapter is a
+// module singleton, the connection is shared with any other tool view in the same window (e.g. the dashboard).
+import { createToolWallet } from '@meddleware/wallet-adapter'
 import type { Executor } from '@meddleware/wallet-adapter'
 
 export type { Executor }
-
-const { network, rpcUrl } = useNetwork()
-
-/** Memoised Sui gRPC client for the currently selected network. */
-export function getSuiClient() {
-  return getSuiClientBase(network.value, rpcUrl.value)
-}
-
-/** Build a transaction executor bound to the connected wallet and current network RPC URL. */
-export function buildExecutor(): Promise<Executor> {
-  return buildExecutorBase(network.value, rpcUrl.value)
-}
-
-/**
- * Wallet composable bound to walrus-storage-ui's network config. Delegates to the shared adapter
- * singleton; walrus needs `sui:signTransaction` (upload certify) so it's requested for discovery.
- */
-export function useWallet() {
-  const base = useWalletBase({ requiredFeatures: ['sui:signTransaction'] })
-  return {
-    wallets: base.wallets,
-    currentWallet: base.currentWallet,
-    account: base.account,
-    connecting: base.connecting,
-    error: base.error,
-    connect: base.connect,
-    disconnect: base.disconnect,
-    signPersonalMessage: base.signPersonalMessage,
-    getSuiClient,
-    buildExecutor,
-  }
-}
+export const { useWallet, getSuiClient, buildExecutor } = createToolWallet({ requiredFeatures: ['sui:signTransaction'] })

package/src/walrus.ts

@@ -0,0 +1,29 @@
+// The Walrus client, loaded and created on first use. `@mysten/walrus` and its wasm are heavy, so nothing here is imported at module
+// top level: the first caller pays for the dynamic import, everyone after shares it. One client per network (a client holds no
+// wallet state), so the upload, the owned-blob list and the extend quotes all read through the same one.
+import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
+import type { WalrusNetwork } from '@meddleware/walrus-storage-kit'
+
+type WalrusLib = typeof import('@meddleware/walrus-storage-client')
+type WalrusClient = ReturnType<WalrusLib['createWalrusClient']>
+
+let lib: Promise<WalrusLib> | null = null
+const clients = new Map<WalrusNetwork, WalrusClient>()
+
+/** The `@meddleware/walrus-storage-client` root, imported once. */
+export function walrusLib(): Promise<WalrusLib> {
+  return (lib ??= import('@meddleware/walrus-storage-client'))
+}
+
+/** The shared Walrus client for `network`. */
+export async function walrusClient(network: WalrusNetwork): Promise<WalrusClient> {
+  const { createWalrusClient } = await walrusLib()
+  let client = clients.get(network)
+  if (!client) {
+    client = createWalrusClient({ network, wasmUrl: walrusWasmUrl })
+    clients.set(network, client)
+  }
+  return client
+}
+
+export { walrusWasmUrl }

package/vite.config.ts

@@ -1,13 +1,19 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { assertE2eOnlyInE2eMode, themeInit, viteTarget } from '@meddleware/frontend-config/vite'
 
 // 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: {
-    // @meddleware/wallet-adapter ships TS + .vue source and holds the shared wallet singleton; if it
-    // were pre-bundled, its .vue files (served raw) would load a second copy of the singleton in dev.
-    exclude: ['@mysten/walrus', '@mysten/walrus-wasm', '@meddleware/wallet-adapter'],
-  },
+export default defineConfig(({ mode }) => {
+  // The end-to-end build (`--mode e2e`) includes a mock wallet; nothing else may.
+  assertE2eOnlyInE2eMode(mode)
+  return {
+    build: { target: viteTarget() },
+    plugins: [vue(), themeInit({ default: 'dark' })],
+    optimizeDeps: {
+      // @meddleware/wallet-adapter ships TS + .vue source and holds the shared wallet singleton; if it
+      // were pre-bundled, its .vue files (served raw) would load a second copy of the singleton in dev.
+      exclude: ['@mysten/walrus', '@mysten/walrus-wasm', '@meddleware/wallet-adapter'],
+    },
+  }
 })