create-sia-app 0.1.1

package/template/src/components/auth/RecoveryScreen.tsx

@@ -0,0 +1,182 @@
+import { useState } from 'react'
+import { toHex } from '../../lib/hex'
+import {
+  type Builder,
+  generateRecoveryPhrase,
+  validateRecoveryPhrase,
+} from '../../lib/sdk'
+import { useAuthStore } from '../../stores/auth'
+import { DevNote } from '../DevNote'
+
+export function RecoveryScreen({
+  builder,
+}: {
+  builder: React.RefObject<Builder | null>
+}) {
+  const { setSdk, setStoredKeyHex, setError } = useAuthStore()
+  const [mode, setMode] = useState<'choose' | 'generate' | 'import'>('choose')
+  const [phrase, setPhrase] = useState('')
+  const [generatedPhrase, setGeneratedPhrase] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [phraseError, setPhraseError] = useState<string | null>(null)
+
+  function handleGenerate() {
+    const mnemonic = generateRecoveryPhrase()
+    setGeneratedPhrase(mnemonic)
+    setPhrase(mnemonic)
+    setMode('generate')
+  }
+
+  function handleValidatePhrase(value: string) {
+    setPhrase(value)
+    setPhraseError(null)
+    if (value.trim()) {
+      try {
+        validateRecoveryPhrase(value.trim())
+      } catch {
+        setPhraseError('Invalid recovery phrase')
+      }
+    }
+  }
+
+  async function handleRegister() {
+    const b = builder.current
+    if (!b) {
+      setError('No builder instance')
+      return
+    }
+
+    const mnemonic = phrase.trim()
+    try {
+      validateRecoveryPhrase(mnemonic)
+    } catch {
+      setPhraseError('Invalid recovery phrase')
+      return
+    }
+
+    setLoading(true)
+    try {
+      const sdk = await b.register(mnemonic)
+      const appKey = sdk.appKey()
+      const exported = appKey.export()
+      setStoredKeyHex(toHex(exported))
+      setSdk(sdk)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Registration failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (mode === 'choose') {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen px-4">
+        <div className="w-full max-w-md space-y-6">
+          <div className="text-center space-y-2">
+            <h1 className="text-2xl font-semibold text-white">
+              Recovery Phrase
+            </h1>
+            <p className="text-neutral-400 text-sm">
+              Generate a new recovery phrase or enter an existing one.
+            </p>
+          </div>
+
+          <DevNote title="Recovery Phrases & Key Derivation">
+            <p>
+              The 12-word BIP-39 recovery phrase deterministically derives the
+              user&apos;s cryptographic keys. The same phrase always produces
+              the same keys, enabling account recovery. The derived app key is
+              exported and stored in localStorage (via Zustand persist) so users
+              don&apos;t need to re-enter it.
+            </p>
+          </DevNote>
+
+          <div className="space-y-3">
+            <button
+              type="button"
+              onClick={handleGenerate}
+              className="w-full py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors"
+            >
+              Generate New Phrase
+            </button>
+            <button
+              type="button"
+              onClick={() => setMode('import')}
+              className="w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-white font-medium rounded-lg transition-colors"
+            >
+              Enter Existing Phrase
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen px-4">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center space-y-2">
+          <h1 className="text-2xl font-semibold text-white">
+            {mode === 'generate'
+              ? 'Save Your Recovery Phrase'
+              : 'Enter Recovery Phrase'}
+          </h1>
+          <p className="text-neutral-400 text-sm">
+            {mode === 'generate'
+              ? 'Write down these 12 words in order. You will need them to recover your account.'
+              : 'Enter your 12-word recovery phrase.'}
+          </p>
+        </div>
+
+        {mode === 'generate' ? (
+          <div className="grid grid-cols-3 gap-2 p-4 bg-neutral-900 rounded-lg border border-neutral-700">
+            {generatedPhrase.split(' ').map((word, i) => (
+              <div
+                key={`${word}-${i}`}
+                className="text-center py-2 bg-neutral-800 rounded text-sm"
+              >
+                <span className="text-neutral-500 mr-1">{i + 1}.</span>
+                <span className="text-white">{word}</span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <textarea
+              value={phrase}
+              onChange={(e) => handleValidatePhrase(e.target.value)}
+              placeholder="Enter your 12-word recovery phrase..."
+              rows={3}
+              className="w-full px-4 py-3 bg-neutral-900 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:border-green-500"
+            />
+            {phraseError && (
+              <p className="text-red-400 text-sm">{phraseError}</p>
+            )}
+          </div>
+        )}
+
+        <button
+          type="button"
+          onClick={handleRegister}
+          disabled={loading || !phrase.trim()}
+          className="w-full py-3 bg-green-600 hover:bg-green-700 disabled:bg-neutral-700 disabled:text-neutral-500 text-white font-medium rounded-lg transition-colors"
+        >
+          {loading ? 'Registering...' : 'Complete Setup'}
+        </button>
+
+        <button
+          type="button"
+          onClick={() => {
+            setMode('choose')
+            setPhrase('')
+            setGeneratedPhrase('')
+            setPhraseError(null)
+          }}
+          className="w-full py-2 text-neutral-400 hover:text-neutral-300 text-sm transition-colors"
+        >
+          Back
+        </button>
+      </div>
+    </div>
+  )
+}

package/template/src/components/upload/UploadZone.tsx

@@ -0,0 +1,314 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { APP_KEY } from '../../lib/constants'
+import { type FileMetadata, formatBytes } from '../../lib/format'
+import { toHex } from '../../lib/hex'
+import { useAuthStore } from '../../stores/auth'
+import { DevNote } from '../DevNote'
+
+type UploadedFile = {
+  id: string
+  metadata: FileMetadata
+}
+
+type UploadProgress = {
+  fileName: string
+  current: number
+  total: number
+}
+
+// Detect unconfigured template placeholder. The string is split so the
+// scaffolder's {{APP_KEY}} replacement doesn't rewrite this check.
+const isPlaceholderKey = APP_KEY.startsWith('{' + '{')
+
+export function UploadZone() {
+  const sdk = useAuthStore((s) => s.sdk)
+  const reset = useAuthStore((s) => s.reset)
+  const [files, setFiles] = useState<UploadedFile[]>([])
+  const [uploading, setUploading] = useState(false)
+  const [progress, setProgress] = useState<UploadProgress | null>(null)
+  const [dragOver, setDragOver] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const publicKey = useMemo(() => {
+    try {
+      return sdk?.appKey().publicKey() ?? null
+    } catch {
+      return null
+    }
+  }, [sdk])
+
+  const loadFiles = useCallback(async () => {
+    if (!sdk) return
+    try {
+      const events = await sdk.objectEvents(null, 100)
+      const loaded: UploadedFile[] = []
+      for (const event of events) {
+        if (event.deleted || !event.object) continue
+        try {
+          const metaBytes = event.object.metadata()
+          const meta = JSON.parse(
+            new TextDecoder().decode(metaBytes),
+          ) as FileMetadata
+          loaded.push({ id: event.id, metadata: meta })
+        } catch {
+          // skip objects with invalid metadata
+        }
+      }
+      setFiles(loaded)
+    } catch (e) {
+      console.error('Failed to load files:', e)
+    }
+  }, [sdk])
+
+  useEffect(() => {
+    loadFiles()
+  }, [loadFiles])
+
+  async function uploadFile(file: File) {
+    if (!sdk) return
+    setUploading(true)
+    setError(null)
+    setProgress({ fileName: file.name, current: 0, total: 0 })
+
+    try {
+      const arrayBuffer = await file.arrayBuffer()
+      const data = new Uint8Array(arrayBuffer)
+
+      // Compute SHA-256 hash for metadata
+      const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+      const hash = toHex(new Uint8Array(hashBuffer))
+
+      const pinnedObject = await sdk.uploadWithProgress(
+        data,
+        (current: number, total: number) => {
+          setProgress({ fileName: file.name, current, total })
+        },
+      )
+
+      const metadata: FileMetadata = {
+        name: file.name,
+        type: file.type || 'application/octet-stream',
+        size: file.size,
+        hash,
+        createdAt: Date.now(),
+      }
+
+      pinnedObject.updateMetadata(
+        new TextEncoder().encode(JSON.stringify(metadata)),
+      )
+      await sdk.pinObject(pinnedObject)
+      await sdk.updateObjectMetadata(pinnedObject)
+
+      setFiles((prev) => [{ id: pinnedObject.id(), metadata }, ...prev])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Upload failed')
+    } finally {
+      setUploading(false)
+      setProgress(null)
+    }
+  }
+
+  async function handleFiles(fileList: FileList) {
+    for (const file of Array.from(fileList)) {
+      await uploadFile(file)
+    }
+  }
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault()
+    setDragOver(false)
+    if (e.dataTransfer.files.length > 0) {
+      handleFiles(e.dataTransfer.files)
+    }
+  }
+
+  function handleDisconnect() {
+    reset()
+    window.location.reload()
+  }
+
+  const progressPercent =
+    progress && progress.total > 0
+      ? Math.round((progress.current / progress.total) * 100)
+      : 0
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      {/* Nav */}
+      <header className="flex items-center justify-between px-6 py-4 border-b border-neutral-800/60">
+        <div className="flex items-center gap-3">
+          <h1 className="text-sm font-semibold text-white tracking-tight">
+            Sia Storage
+          </h1>
+          <span className="text-xs text-neutral-600">
+            {files.length} file{files.length !== 1 ? 's' : ''}
+          </span>
+        </div>
+        <div className="flex items-center gap-4">
+          {publicKey && (
+            <span
+              className="text-[11px] font-mono text-neutral-500 bg-neutral-900 border border-neutral-800 rounded px-2 py-1 cursor-default"
+              title={publicKey}
+            >
+              {publicKey.slice(0, 8)}...{publicKey.slice(-6)}
+            </span>
+          )}
+          <button
+            type="button"
+            onClick={handleDisconnect}
+            className="text-xs text-neutral-500 hover:text-neutral-300 transition-colors"
+          >
+            Disconnect
+          </button>
+        </div>
+      </header>
+
+      <div className="flex-1 p-6 space-y-5 max-w-2xl mx-auto w-full">
+        {/* Dev notes — remove these when shipping */}
+        {isPlaceholderKey && (
+          <DevNote title="Replace Your App Key">
+            <p>
+              You&apos;re using the template placeholder. Set your own key in{' '}
+              <code className="text-amber-300">src/lib/constants.ts</code> or
+              scaffold a fresh project with{' '}
+              <code className="text-amber-300">bunx create-sia-app</code>.
+            </p>
+          </DevNote>
+        )}
+
+        <DevNote title="Upload Flow">
+          <p>
+            <code className="text-amber-300">sdk.uploadWithProgress()</code>{' '}
+            encrypts, erasure-codes, and uploads directly to Sia hosts. Metadata
+            is attached via{' '}
+            <code className="text-amber-300">
+              pinnedObject.updateMetadata()
+            </code>{' '}
+            then pinned with{' '}
+            <code className="text-amber-300">sdk.pinObject()</code>.
+          </p>
+        </DevNote>
+
+        {error && (
+          <div className="flex items-center justify-between px-4 py-2.5 bg-red-950/80 border border-red-900 rounded-lg text-red-300 text-sm">
+            <span>{error}</span>
+            <button
+              type="button"
+              onClick={() => setError(null)}
+              className="text-red-500 hover:text-red-300 text-xs ml-4 shrink-0"
+            >
+              Dismiss
+            </button>
+          </div>
+        )}
+
+        {/* Dropzone */}
+        <label
+          onDrop={handleDrop}
+          onDragOver={(e) => {
+            e.preventDefault()
+            setDragOver(true)
+          }}
+          onDragLeave={(e) => {
+            e.preventDefault()
+            setDragOver(false)
+          }}
+          className={`relative block border-2 border-dashed rounded-xl p-16 text-center transition-all duration-150 ${
+            uploading
+              ? 'border-neutral-800 cursor-default'
+              : dragOver
+                ? 'border-green-500 bg-green-500/5 cursor-pointer'
+                : 'border-neutral-800 hover:border-neutral-600 cursor-pointer'
+          }`}
+        >
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            className="hidden"
+            disabled={uploading}
+            onChange={(e) => {
+              if (e.target.files) handleFiles(e.target.files)
+              e.target.value = ''
+            }}
+          />
+
+          {progress ? (
+            <div className="space-y-4">
+              <p className="text-neutral-300 text-sm">
+                Uploading{' '}
+                <span className="text-white">{progress.fileName}</span>
+              </p>
+              <div className="w-full max-w-xs mx-auto bg-neutral-800 rounded-full h-1.5 overflow-hidden">
+                <div
+                  className="bg-green-500 h-full rounded-full transition-all duration-300"
+                  style={{ width: `${progressPercent}%` }}
+                />
+              </div>
+              <p className="text-neutral-600 text-xs font-mono">
+                {progress.current}/{progress.total} shards &middot;{' '}
+                {progressPercent}%
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              <svg
+                className="w-8 h-8 mx-auto text-neutral-700"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                aria-hidden="true"
+              >
+                <path d="M12 16V4m0 0l-4 4m4-4l4 4" />
+                <path d="M20 16v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2" />
+              </svg>
+              <p className="text-neutral-400 text-sm">
+                Drop files here or click to browse
+              </p>
+              <p className="text-neutral-600 text-xs">
+                Encrypted end-to-end and stored on the Sia network
+              </p>
+            </div>
+          )}
+        </label>
+
+        {/* File list */}
+        {files.length > 0 && (
+          <div className="space-y-2">
+            <h2 className="text-xs font-medium text-neutral-500 uppercase tracking-wider">
+              Files
+            </h2>
+            <div className="divide-y divide-neutral-800/60">
+              {files.map((file) => (
+                <div
+                  key={file.id}
+                  className="flex items-center justify-between py-3 group"
+                >
+                  <div className="flex-1 min-w-0 mr-4">
+                    <p className="text-sm text-neutral-200 truncate">
+                      {file.metadata.name}
+                    </p>
+                    <p className="text-xs text-neutral-600 mt-0.5">
+                      {formatBytes(file.metadata.size)}
+                      {file.metadata.type !== 'application/octet-stream' && (
+                        <span> &middot; {file.metadata.type}</span>
+                      )}
+                    </p>
+                  </div>
+                  <span
+                    className="text-[11px] text-neutral-700 font-mono shrink-0 group-hover:text-neutral-500 transition-colors"
+                    title={file.metadata.hash}
+                  >
+                    {file.metadata.hash.slice(0, 8)}...
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/template/src/index.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+
+body {
+  margin: 0;
+  background-color: #0a0a0a;
+  color: #e5e5e5;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}

package/template/src/lib/constants.ts

@@ -0,0 +1,8 @@
+export const APP_KEY = '{{APP_KEY}}'
+export const DEFAULT_INDEXER_URL = '{{INDEXER_URL}}'
+export const APP_META = JSON.stringify({
+  appID: APP_KEY,
+  name: '{{APP_NAME}}',
+  description: '{{APP_DESCRIPTION}}',
+  serviceURL: '{{INDEXER_URL}}',
+})

package/template/src/lib/format.ts

@@ -0,0 +1,35 @@
+export type FileMetadata = {
+  name: string
+  type: string
+  size: number
+  hash: string
+  createdAt?: number
+  updatedAt?: number
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const value = bytes / k ** i
+  return `${value.toFixed(i === 0 ? 0 : 1)} ${sizes[i]}`
+}
+
+export function formatDate(epochMs: number): string {
+  return new Date(epochMs).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+export function decodeMetadata(
+  metadataBytes: Uint8Array,
+): Record<string, unknown> {
+  try {
+    return JSON.parse(new TextDecoder().decode(metadataBytes))
+  } catch {
+    return {}
+  }
+}

package/template/src/lib/hex.ts

@@ -0,0 +1,13 @@
+export function toHex(bytes: Uint8Array): string {
+  return Array.from(bytes)
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+}
+
+export function fromHex(hex: string): Uint8Array {
+  const bytes = new Uint8Array(hex.length / 2)
+  for (let i = 0; i < hex.length; i += 2) {
+    bytes[i / 2] = Number.parseInt(hex.substring(i, i + 2), 16)
+  }
+  return bytes
+}

package/template/src/lib/sdk.ts

@@ -0,0 +1,25 @@
+import init, {
+  AppKey,
+  Builder,
+  generateRecoveryPhrase,
+  PinnedObject,
+  type SDK,
+  validateRecoveryPhrase,
+} from 'indexd_wasm'
+
+let initialized = false
+
+export async function initWasm(): Promise<void> {
+  if (initialized) return
+  await init()
+  initialized = true
+}
+
+export {
+  AppKey,
+  Builder,
+  PinnedObject,
+  type SDK,
+  generateRecoveryPhrase,
+  validateRecoveryPhrase,
+}

package/template/src/lib/wasm-env.ts

@@ -0,0 +1,5 @@
+// WASM environment stub — provides `env.now` required by the WASM binary
+// (used by Rust's std::time / chrono for timestamps in the browser).
+export function now(): number {
+  return Date.now()
+}

package/template/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+const root = document.getElementById('root')
+if (!root) throw new Error('Root element not found')
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/template/src/stores/auth.ts

@@ -0,0 +1,86 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { Builder, SDK } from '../lib/sdk'
+
+export type AuthStep =
+  | 'loading'
+  | 'connect'
+  | 'approve'
+  | 'recovery'
+  | 'connected'
+
+export type PerformancePreset = 'conservative' | 'balanced' | 'fast'
+
+export const PRESETS: Record<
+  PerformancePreset,
+  { priceFetches: number; downloads: number; uploads: number }
+> = {
+  conservative: { priceFetches: 1, downloads: 2, uploads: 2 },
+  balanced: { priceFetches: 5, downloads: 10, uploads: 8 },
+  fast: { priceFetches: 10, downloads: 20, uploads: 16 },
+}
+
+export function applyPresetToBuilder(
+  builder: Builder,
+  preset: PerformancePreset,
+) {
+  const p = PRESETS[preset]
+  builder.withMaxPriceFetches(p.priceFetches)
+  builder.withMaxDownloads(p.downloads)
+  builder.withMaxUploads(p.uploads)
+}
+
+type AuthState = {
+  sdk: SDK | null
+  storedKeyHex: string | null
+  indexerUrl: string
+  step: AuthStep
+  error: string | null
+  approvalUrl: string | null
+  performancePreset: PerformancePreset
+  setSdk: (sdk: SDK) => void
+  setStep: (step: AuthStep) => void
+  setError: (error: string | null) => void
+  setStoredKeyHex: (hex: string) => void
+  setIndexerUrl: (url: string) => void
+  setApprovalUrl: (url: string | null) => void
+  setPerformancePreset: (preset: PerformancePreset) => void
+  reset: () => void
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      sdk: null,
+      storedKeyHex: null,
+      indexerUrl: '',
+      step: 'loading',
+      error: null,
+      approvalUrl: null,
+      performancePreset: 'balanced',
+      setSdk: (sdk) => set({ sdk, step: 'connected', error: null }),
+      setStep: (step) => set({ step, error: null }),
+      setError: (error) => set({ error }),
+      setStoredKeyHex: (hex) => set({ storedKeyHex: hex }),
+      setIndexerUrl: (url) => set({ indexerUrl: url }),
+      setApprovalUrl: (url) => set({ approvalUrl: url }),
+      setPerformancePreset: (preset) => set({ performancePreset: preset }),
+      reset: () =>
+        set({
+          sdk: null,
+          storedKeyHex: null,
+          step: 'loading',
+          error: null,
+          approvalUrl: null,
+        }),
+    }),
+    {
+      name: '{{APP_NAME}}-auth',
+      partialize: (state) => ({
+        storedKeyHex: state.storedKeyHex,
+        indexerUrl: state.indexerUrl,
+        performancePreset: state.performancePreset,
+      }),
+    },
+  ),
+)