create-sia-app 0.1.7 → 0.1.9

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

@@ -1,19 +1,41 @@
+import {
+  type DownloadProgress,
+  decodeMetadata,
+  type PinnedObject,
+  toHex,
+  type UploadProgress,
+} from '@siafoundation/sia'
 import { useCallback, useEffect, 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 FileMetadata = {
+  name: string
+  type: string
+  size: number
+  hash: string
+  createdAt?: number
+  updatedAt?: number
+}
+
+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))
+  return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`
+}
+
 type UploadedFile = {
   id: string
   metadata: FileMetadata
+  object: PinnedObject
 }
 
-type UploadProgress = {
+type ActiveUpload = {
   fileName: string
-  current: number
-  total: number
+  progress: UploadProgress
 }
 
 // Detect unconfigured template placeholder. The string is split so the
@@ -21,61 +43,65 @@ type UploadProgress = {
 const isPlaceholderKey = APP_KEY.startsWith('{' + '{')
 
 export function UploadZone() {
-  const sdk = useAuthStore((s) => s.sdk)
+  const client = useAuthStore((s) => s.client)
   const [files, setFiles] = useState<UploadedFile[]>([])
   const [uploading, setUploading] = useState(false)
-  const [progress, setProgress] = useState<UploadProgress | null>(null)
+  const [activeUpload, setActiveUpload] = useState<ActiveUpload | null>(null)
   const [dragOver, setDragOver] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [downloading, setDownloading] = useState<string | null>(null)
+  const [downloadProgress, setDownloadProgress] =
+    useState<DownloadProgress | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const loadFiles = useCallback(async () => {
-    if (!sdk) return
+    if (!client) return
     try {
-      const events = await sdk.objectEvents(null, 100)
+      const events = await client.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
+        const meta = decodeMetadata(event.object.metadata()) as FileMetadata
+        if (meta.name) {
+          loaded.push({ id: event.id, metadata: meta, object: event.object })
         }
       }
       setFiles(loaded)
     } catch (e) {
       console.error('Failed to load files:', e)
     }
-  }, [sdk])
+  }, [client])
 
   useEffect(() => {
     loadFiles()
   }, [loadFiles])
 
   async function uploadFile(file: File) {
-    if (!sdk) return
+    if (!client) return
     setUploading(true)
     setError(null)
-    setProgress({ fileName: file.name, current: 0, total: 0 })
+    setActiveUpload({
+      fileName: file.name,
+      progress: {
+        phase: 'connecting',
+        slabsComplete: 0,
+        slabsTotal: 0,
+        shardsComplete: 0,
+        shardsTotal: 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 hashBuffer = await crypto.subtle.digest(
+        'SHA-256',
+        await file.arrayBuffer(),
+      )
       const hash = toHex(new Uint8Array(hashBuffer))
 
-      const pinnedObject = await sdk.uploadWithProgress(
-        data,
-        (current: number, total: number) => {
-          setProgress({ fileName: file.name, current, total })
-        },
-      )
+      const pinnedObject = await client.upload(file, (p) => {
+        setActiveUpload({ fileName: file.name, progress: p })
+      })
 
       const metadata: FileMetadata = {
         name: file.name,
@@ -88,15 +114,41 @@ export function UploadZone() {
       pinnedObject.updateMetadata(
         new TextEncoder().encode(JSON.stringify(metadata)),
       )
-      await sdk.pinObject(pinnedObject)
-      await sdk.updateObjectMetadata(pinnedObject)
+      await client.pinObject(pinnedObject)
+      await client.updateObjectMetadata(pinnedObject)
 
-      setFiles((prev) => [{ id: pinnedObject.id(), metadata }, ...prev])
+      setFiles((prev) => [
+        { id: pinnedObject.id(), metadata, object: pinnedObject },
+        ...prev,
+      ])
     } catch (e) {
       setError(e instanceof Error ? e.message : 'Upload failed')
     } finally {
       setUploading(false)
-      setProgress(null)
+      setActiveUpload(null)
+    }
+  }
+
+  async function downloadFile(file: UploadedFile) {
+    if (!client) return
+    setDownloading(file.id)
+    setDownloadProgress(null)
+    try {
+      const data = await client.download(file.object, (p) => {
+        setDownloadProgress(p)
+      })
+      const blob = new Blob([data as BlobPart], { type: file.metadata.type })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = file.metadata.name
+      a.click()
+      URL.revokeObjectURL(url)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Download failed')
+    } finally {
+      setDownloading(null)
+      setDownloadProgress(null)
     }
   }
 
@@ -114,12 +166,31 @@ export function UploadZone() {
     }
   }
 
-  const isIndeterminate = progress && progress.total === 0
+  const progress = activeUpload?.progress
+  const isIndeterminate =
+    progress &&
+    (progress.phase === 'connecting' ||
+      progress.phase === 'assembling' ||
+      progress.phase === 'pinning')
   const progressPercent =
-    progress && progress.total > 0
-      ? Math.round((progress.current / progress.total) * 100)
+    progress && progress.slabsTotal > 0
+      ? Math.round((progress.slabsComplete / progress.slabsTotal) * 100)
       : 0
 
+  function progressLabel(): string {
+    if (!progress) return ''
+    switch (progress.phase) {
+      case 'connecting':
+        return 'Connecting to hosts...'
+      case 'uploading':
+        return `${progress.slabsComplete}/${progress.slabsTotal} slabs \u00B7 ${progressPercent}%`
+      case 'assembling':
+        return 'Assembling object...'
+      case 'pinning':
+        return 'Pinning object...'
+    }
+  }
+
   return (
     <div className="flex-1 p-6 space-y-5 max-w-5xl mx-auto w-full">
       {/* Dev notes — remove these when shipping */}
@@ -134,16 +205,17 @@ export function UploadZone() {
         </DevNote>
       )}
 
-      <DevNote title="Upload Flow">
+      <DevNote title="Upload & Download">
         <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()
+            client.upload(file, onProgress)
           </code>{' '}
-          then pinned with{' '}
-          <code className="text-amber-300">sdk.pinObject()</code>.
+          encrypts, erasure-codes, and uploads to Sia hosts using parallel Web
+          Workers.{' '}
+          <code className="text-amber-300">
+            client.download(object, onProgress)
+          </code>{' '}
+          retrieves and decrypts files the same way.
         </p>
       </DevNote>
 
@@ -191,18 +263,18 @@ export function UploadZone() {
           }}
         />
 
-        {progress ? (
+        {activeUpload ? (
           <div className="space-y-4">
             <p className="text-neutral-300 text-sm">
-              {isIndeterminate ? (
+              {progress?.phase === 'connecting' ? (
                 <>
                   Preparing upload for{' '}
-                  <span className="text-white">{progress.fileName}</span>
+                  <span className="text-white">{activeUpload.fileName}</span>
                 </>
               ) : (
                 <>
                   Uploading{' '}
-                  <span className="text-white">{progress.fileName}</span>
+                  <span className="text-white">{activeUpload.fileName}</span>
                 </>
               )}
             </p>
@@ -217,9 +289,7 @@ export function UploadZone() {
               )}
             </div>
             <p className="text-neutral-600 text-xs font-mono">
-              {isIndeterminate
-                ? 'Preparing upload...'
-                : `${progress.current}/${progress.total} shards \u00B7 ${progressPercent}%`}
+              {progressLabel()}
             </p>
           </div>
         ) : (
@@ -252,30 +322,78 @@ export function UploadZone() {
             {files.length} file{files.length !== 1 ? 's' : ''}
           </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}
+            {files.map((file) => {
+              const isDownloading = downloading === file.id
+              return (
+                <div
+                  key={file.id}
+                  className="flex items-center justify-between py-3 group"
                 >
-                  {file.metadata.hash.slice(0, 8)}...
-                </span>
-              </div>
-            ))}
+                  <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>
+                      )}
+                      {isDownloading && downloadProgress && (
+                        <span>
+                          {' &middot; '}
+                          {downloadProgress.phase === 'downloading'
+                            ? `${downloadProgress.slabsComplete}/${downloadProgress.slabsTotal} slabs`
+                            : downloadProgress.phase === 'connecting'
+                              ? 'Connecting...'
+                              : 'Assembling...'}
+                        </span>
+                      )}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-3 shrink-0">
+                    <button
+                      type="button"
+                      onClick={() => downloadFile(file)}
+                      disabled={downloading !== null}
+                      className="text-xs text-neutral-600 hover:text-neutral-300 disabled:opacity-30 disabled:cursor-default transition-colors"
+                      title="Download"
+                    >
+                      {isDownloading ? (
+                        <svg
+                          className="w-4 h-4 animate-spin"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          aria-hidden="true"
+                        >
+                          <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
+                          <path d="M12 2a10 10 0 019.17 6" />
+                        </svg>
+                      ) : (
+                        <svg
+                          className="w-4 h-4"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          aria-hidden="true"
+                        >
+                          <path d="M12 4v12m0 0l-4-4m4 4l4-4" />
+                          <path d="M20 16v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2" />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      className="text-[11px] text-neutral-700 font-mono group-hover:text-neutral-500 transition-colors"
+                      title={file.metadata.hash}
+                    >
+                      {file.metadata.hash.slice(0, 8)}...
+                    </span>
+                  </div>
+                </div>
+              )
+            })}
           </div>
         </div>
       )}

package/template/src/index.css

@@ -9,13 +9,23 @@ body {
 }
 
 @keyframes fade-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes indeterminate {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(400%); }
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
 }
 
 .animate-fade-in {

package/template/src/stores/auth.ts

@@ -1,6 +1,6 @@
+import type { SiaClient } from '@siafoundation/sia'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import type { Builder, SDK } from '../lib/sdk'
 
 export type AuthStep =
   | 'loading'
@@ -9,20 +9,14 @@ export type AuthStep =
   | 'recovery'
   | 'connected'
 
-export function applyBalancedPreset(builder: Builder) {
-  builder.withMaxPriceFetches(5)
-  builder.withMaxDownloads(10)
-  builder.withMaxUploads(8)
-}
-
 type AuthState = {
-  sdk: SDK | null
+  client: SiaClient | null
   storedKeyHex: string | null
   indexerUrl: string
   step: AuthStep
   error: string | null
   approvalUrl: string | null
-  setSdk: (sdk: SDK) => void
+  setClient: (client: SiaClient) => void
   setStep: (step: AuthStep) => void
   setError: (error: string | null) => void
   setStoredKeyHex: (hex: string) => void
@@ -34,13 +28,13 @@ type AuthState = {
 export const useAuthStore = create<AuthState>()(
   persist(
     (set) => ({
-      sdk: null,
+      client: null,
       storedKeyHex: null,
       indexerUrl: '',
       step: 'loading',
       error: null,
       approvalUrl: null,
-      setSdk: (sdk) => set({ sdk, step: 'connected', error: null }),
+      setClient: (client) => set({ client, step: 'connected', error: null }),
       setStep: (step) => set({ step, error: null }),
       setError: (error) => set({ error }),
       setStoredKeyHex: (hex) => set({ storedKeyHex: hex }),
@@ -48,7 +42,7 @@ export const useAuthStore = create<AuthState>()(
       setApprovalUrl: (url) => set({ approvalUrl: url }),
       reset: () =>
         set({
-          sdk: null,
+          client: null,
           storedKeyHex: null,
           step: 'loading',
           error: null,

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

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

package/template/tsconfig.app.json

@@ -16,7 +16,7 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "paths": {
-      "indexd_wasm": ["./wasm/indexd_wasm/indexd_wasm.d.ts"]
+      "sia-wasm": ["./node_modules/@siafoundation/sia/wasm/sia.d.ts"]
     },
 
     /* Linting */

package/template/tsconfig.node.json

@@ -4,7 +4,6 @@
     "target": "ES2023",
     "lib": ["ES2023"],
     "module": "ESNext",
-    "types": ["node"],
     "skipLibCheck": true,
 
     /* Bundler mode */

package/template/vite.config.ts

@@ -7,12 +7,11 @@ import wasm from 'vite-plugin-wasm'
 export default defineConfig({
   plugins: [react(), tailwindcss(), wasm(), topLevelAwait()],
   optimizeDeps: {
-    exclude: ['indexd_wasm'],
+    exclude: ['@siafoundation/sia', 'sia-wasm'],
   },
   resolve: {
     alias: {
-      indexd_wasm: '/wasm/indexd_wasm/indexd_wasm.js',
-      env: '/src/lib/wasm-env.ts',
+      'sia-wasm': '@siafoundation/sia/wasm',
     },
   },
 })

package/template/rust/README.md

@@ -1,16 +0,0 @@
-# Rust SDK Source
-
-The Rust SDK source (`sia-sdk-rs/`) is cloned automatically on `bun install` from [alexfreska/sia-sdk-rs](https://github.com/alexfreska/sia-sdk-rs) (branch `alex/wasm-experimental`).
-
-The pre-built WASM in `../wasm/` is what the app actually uses at runtime. The Rust source is only needed if you want to rebuild the WASM module.
-
-## Rebuilding WASM
-
-```bash
-cd sia-sdk-rs
-cargo install wasm-pack
-wasm-pack build indexd_wasm --target web --out-dir pkg
-cp indexd_wasm/pkg/indexd_wasm_bg.wasm ../../wasm/indexd_wasm/
-cp indexd_wasm/pkg/indexd_wasm.js ../../wasm/indexd_wasm/
-cp indexd_wasm/pkg/indexd_wasm.d.ts ../../wasm/indexd_wasm/
-```

package/template/rust/sia-sdk-rs/.changeset/added_cancel_function_to_cancel_inflight_packed_uploads.md

@@ -1,6 +0,0 @@
----
-indexd: patch
-indexd_ffi: patch
----
-
-# Added cancel function to cancel inflight packed uploads.

package/template/rust/sia-sdk-rs/.changeset/check_if_we_have_enough_hosts_prior_to_encoding_in_upload_slabs.md

@@ -1,16 +0,0 @@
----
-sia_sdk: patch
-indexd: patch
-indexd_ffi: patch
-sia_sdk_derive: patch
----
-
-# Check if we have enough hosts prior to encoding in upload_slabs
-
-#261 by @Alrighttt
-
-Fixes https://github.com/SiaFoundation/sia-sdk-rs/issues/251
-
-- Added an `available_for_upload` method that returns the amount of known hosts marked `good_for_upload`.
-- Added a check in `upload_slabs` that verifies we have enough good hosts prior to encoding any data. 
-- Adds a variant to `QueueError` for `upload_slabs`'s new failure case. This enables testing for this new case specifically.

package/template/rust/sia-sdk-rs/.changeset/fix_slab_length_in_packed_object.md

@@ -1,5 +0,0 @@
----
-indexd_ffi: patch
----
-
-# Fix slab length in packed object

package/template/rust/sia-sdk-rs/.changeset/fix_upload_racing_race_conditon.md

@@ -1,13 +0,0 @@
----
-indexd: patch
----
-
-# Fix upload racing race conditon
-
-#258 by @Alrighttt
-
-This fixes a race condition in the upload logic that could happen when the amount of healthy hosts is nearly the same as the amount of shards. This could happen when the racing mechanism was triggered prior to all of the initial shards being assigned a host. The slow hosts would be consumed from the HostQueue without completing the upload. This would cause a latter shard to hit a QueueError::NoMoreHosts error.
-
-This changes the upload behavior so that each shard has a host assigned before any upload begins.
-
-A `set_slow_hosts` method was added to the `MockRHP4Client` to allow easily testing these conditions. This mimics a similar mechanism from the Go SDK.

package/template/rust/sia-sdk-rs/.changeset/improved_parallelism_of_packed_uploads.md

@@ -1,5 +0,0 @@
----
-indexd_ffi: patch
----
-
-# Improved parallelism of packed uploads.

package/template/rust/sia-sdk-rs/.changeset/progress_callback_will_now_be_called_as_expected_for_packed_uploads.md

@@ -1,5 +0,0 @@
----
-indexd_ffi: patch
----
-
-# Progress callback will now be called as expected for packed uploads.

package/template/rust/sia-sdk-rs/.github/dependabot.yml

@@ -1,10 +0,0 @@
-version: 2
-updates:
-- package-ecosystem: cargo
-  directory: "/"
-  schedule:
-    interval: weekly
-  groups:
-    all-dependencies:
-      patterns:
-        - "*"

package/template/rust/sia-sdk-rs/.github/workflows/main.yml

@@ -1,36 +0,0 @@
-name: Main
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-
-jobs:
-  test:
-    runs-on: tenki-standard-autoscale
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Environment
-        run: |
-          rustup update stable
-          rustup toolchain install nightly
-          rustup target add wasm32-unknown-unknown
-          rustup component add rustfmt --toolchain nightly
-      - name: Build for wasm
-        # Check if the library target compiles. This will still allow for using
-        # non-wasm functionality in tests and benchmarks but guarantees that
-        # consumers of the library can use it to generate wasm bindings.
-        run: cargo check --target wasm32-unknown-unknown --lib --package sia_sdk
-      - name: Rustfmt
-        run: cargo +nightly fmt --all -- --check
-      - name: Clippy
-        run: cargo clippy -- -D warnings
-      - name: Build docs
-        run: cargo doc --all-features --no-deps
-        env:
-          RUSTDOCFLAGS: "-D warnings"
-      - name: Build benches
-        run: cargo build --benches --features=mock
-      - name: Test
-        run: cargo test

package/template/rust/sia-sdk-rs/.github/workflows/prepare-release.yml

@@ -1,34 +0,0 @@
-name: Prepare Release
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - master
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  prepare-release:
-    if: "!contains(github.event.head_commit.message, 'chore: prepare releases')" # Skip merges from releases
-    runs-on: tenki-standard-autoscale
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Setup Knope
-        uses: knope-dev/action@407e9ef7c272d2dd53a4e71e39a7839e29933c48
-      - name: Prepare Release
-        run: knope prepare-release --verbose
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
-        with:
-          delete-branch: true
-          commit-message: "chore: prepare releases"
-          title: Release Versions
-          base: master
-          branch: release
-          body: |
-            This PR was automatically created to prepare the release versions. Close the PR when you are ready to release. See the changelog for more details.