create-sia-app 0.1.1

package/template/rust/sia-sdk-rs/sia_sdk/src/types/work.rs

@@ -0,0 +1,59 @@
+use serde::{Deserialize, Serialize};
+use uint::construct_uint;
+
+use crate::encoding::{self, SiaDecodable, SiaEncodable, V1SiaDecodable, V1SiaEncodable};
+
+construct_uint! {
+    /// Work is a 256-bit unsigned integer.
+    pub struct Work(4);
+}
+
+impl From<&[u8; 32]> for Work {
+    fn from(bytes: &[u8; 32]) -> Self {
+        Work::from_big_endian(bytes)
+    }
+}
+
+impl SiaEncodable for Work {
+    fn encode<W: std::io::Write>(&self, w: &mut W) -> encoding::Result<()> {
+        self.to_big_endian().encode(w)
+    }
+}
+
+impl SiaDecodable for Work {
+    fn decode<R: std::io::Read>(r: &mut R) -> encoding::Result<Self> {
+        Ok(Work::from_big_endian(&<[u8; 32]>::decode(r).map_err(
+            |_| encoding::Error::Custom("invalid work".to_string()),
+        )?))
+    }
+}
+
+impl V1SiaEncodable for Work {
+    fn encode_v1<W: std::io::Write>(&self, w: &mut W) -> encoding::Result<()> {
+        self.to_big_endian().encode_v1(w)
+    }
+}
+
+impl V1SiaDecodable for Work {
+    fn decode_v1<R: std::io::Read>(r: &mut R) -> encoding::Result<Self> {
+        Ok(Work::from_big_endian(&<[u8; 32]>::decode_v1(r)?))
+    }
+}
+
+impl Serialize for Work {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: serde::Serializer,
+    {
+        serializer.serialize_str(&self.to_string())
+    }
+}
+
+impl<'de> Deserialize<'de> for Work {
+    fn deserialize<D>(deserializer: D) -> Result<Work, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        Work::from_dec_str(&String::deserialize(deserializer)?).map_err(serde::de::Error::custom)
+    }
+}

package/template/rust/sia-sdk-rs/sia_sdk/src/types.rs

@@ -0,0 +1,16 @@
+mod common;
+mod currency;
+mod specifier;
+mod spendpolicy; // exposed in v2 types
+
+#[allow(clippy::manual_div_ceil)]
+mod work;
+
+pub use common::*;
+pub use currency::*;
+pub use specifier::*;
+pub use work::*;
+
+pub(crate) mod utils;
+pub mod v1;
+pub mod v2;

package/template/scripts/setup-rust.js

@@ -0,0 +1,29 @@
+import { existsSync } from 'fs'
+import { execSync } from 'child_process'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const targetDir = resolve(__dirname, '../rust/sia-sdk-rs')
+
+if (existsSync(targetDir)) {
+  console.log('rust/sia-sdk-rs already exists, skipping clone.')
+  process.exit(0)
+}
+
+const repo = 'https://github.com/alexfreska/sia-sdk-rs.git'
+const branch = 'alex/wasm-experimental'
+
+console.log(`Cloning ${repo} (branch: ${branch})...`)
+
+try {
+  execSync(
+    `git clone --branch ${branch} --single-branch --depth 1 ${repo} ${targetDir}`,
+    { stdio: 'inherit' },
+  )
+  console.log('Rust SDK source cloned successfully.')
+} catch {
+  console.warn(
+    '\nWarning: Failed to clone Rust SDK source. This is optional — the pre-built WASM binary in wasm/ is what the app uses at runtime. The Rust source is only needed if you want to rebuild the WASM module.\n',
+  )
+}

package/template/src/App.tsx

@@ -0,0 +1,13 @@
+import { AuthFlow } from './components/auth/AuthFlow'
+import { UploadZone } from './components/upload/UploadZone'
+import { useAuthStore } from './stores/auth'
+
+export default function App() {
+  const step = useAuthStore((s) => s.step)
+
+  if (step === 'connected') {
+    return <UploadZone />
+  }
+
+  return <AuthFlow />
+}

package/template/src/components/DevNote.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+export function DevNote({
+  title,
+  children,
+}: {
+  title: string
+  children: ReactNode
+}) {
+  return (
+    <div className="border-l-4 border-amber-500 bg-amber-950/50 rounded-r-lg p-4 space-y-1">
+      <p className="text-amber-400 text-xs font-semibold uppercase tracking-wider">
+        Developer Note
+      </p>
+      <p className="text-amber-200 text-sm font-medium">{title}</p>
+      <div className="text-amber-200/80 text-xs leading-relaxed">
+        {children}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import type { Builder } from '../../lib/sdk'
+import { useAuthStore } from '../../stores/auth'
+import { DevNote } from '../DevNote'
+
+export function ApproveScreen({
+  builder,
+}: {
+  builder: React.RefObject<Builder | null>
+}) {
+  const { approvalUrl, setStep, setError } = useAuthStore()
+  const [waiting, setWaiting] = useState(false)
+
+  async function handleWaitForApproval() {
+    const b = builder.current
+    if (!b) {
+      setError('No builder instance')
+      return
+    }
+
+    setWaiting(true)
+    try {
+      await b.waitForApproval()
+      setStep('recovery')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Approval failed')
+    } finally {
+      setWaiting(false)
+    }
+  }
+
+  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">
+            Approve Connection
+          </h1>
+          <p className="text-neutral-400 text-sm">
+            Open the link below in a new tab to approve the connection, then
+            click &quot;Check Approval&quot;.
+          </p>
+        </div>
+
+        <DevNote title="Out-of-Band Approval">
+          <p>
+            The user must visit the approval URL in another tab (or on the
+            indexer&apos;s dashboard) to authorize your app. This is an
+            out-of-band step — your app polls for approval via{' '}
+            <code className="text-amber-300">builder.waitForApproval()</code>.
+            Once approved, the flow continues to recovery phrase setup.
+          </p>
+        </DevNote>
+
+        {approvalUrl && (
+          <a
+            href={approvalUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block w-full text-center py-3 bg-neutral-800 hover:bg-neutral-700 text-green-400 font-mono text-sm rounded-lg transition-colors break-all px-4"
+          >
+            {approvalUrl}
+          </a>
+        )}
+
+        <button
+          type="button"
+          onClick={handleWaitForApproval}
+          disabled={waiting}
+          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"
+        >
+          {waiting ? (
+            <span className="flex items-center justify-center gap-2">
+              <span className="w-4 h-4 border-2 border-neutral-400 border-t-white rounded-full animate-spin" />
+              Waiting for approval...
+            </span>
+          ) : (
+            'Check Approval'
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react'
+import { fromHex } from '../../lib/hex'
+import { AppKey, Builder, initWasm, type SDK } from '../../lib/sdk'
+import { applyPresetToBuilder, useAuthStore } from '../../stores/auth'
+import { ApproveScreen } from './ApproveScreen'
+import { ConnectScreen } from './ConnectScreen'
+import { LoadingScreen } from './LoadingScreen'
+import { RecoveryScreen } from './RecoveryScreen'
+
+export function AuthFlow() {
+  const step = useAuthStore((s) => s.step)
+  const error = useAuthStore((s) => s.error)
+  const setError = useAuthStore((s) => s.setError)
+  const builderRef = useRef<Builder | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function init() {
+      const { storedKeyHex, indexerUrl, performancePreset, setSdk, setStep } =
+        useAuthStore.getState()
+      try {
+        await initWasm()
+
+        if (storedKeyHex && indexerUrl) {
+          const keyBytes = fromHex(storedKeyHex)
+          const appKey = new AppKey(keyBytes)
+          const builder = new Builder(indexerUrl)
+          applyPresetToBuilder(builder, performancePreset)
+          const result: SDK | null = await builder.connected(appKey)
+
+          if (cancelled) return
+          if (result) {
+            setSdk(result)
+            return
+          }
+        }
+
+        if (!cancelled) {
+          setStep('connect')
+        }
+      } catch (e) {
+        if (!cancelled) {
+          console.error('Init error:', e)
+          setStep('connect')
+        }
+      }
+    }
+
+    init()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return (
+    <>
+      {error && (
+        <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 px-4 py-2 bg-red-900/90 border border-red-700 rounded-lg text-red-200 text-sm max-w-md text-center">
+          {error}
+          <button
+            type="button"
+            onClick={() => setError(null)}
+            className="ml-2 text-red-400 hover:text-red-300"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
+      {step === 'loading' && <LoadingScreen />}
+      {step === 'connect' && <ConnectScreen builder={builderRef} />}
+      {step === 'approve' && <ApproveScreen builder={builderRef} />}
+      {step === 'recovery' && <RecoveryScreen builder={builderRef} />}
+    </>
+  )
+}

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

@@ -0,0 +1,214 @@
+import { useState } from 'react'
+import { APP_KEY, APP_META, DEFAULT_INDEXER_URL } from '../../lib/constants'
+import { Builder } from '../../lib/sdk'
+import {
+  applyPresetToBuilder,
+  type PerformancePreset,
+  PRESETS,
+  useAuthStore,
+} from '../../stores/auth'
+import { DevNote } from '../DevNote'
+
+const PRESET_OPTIONS: {
+  key: PerformancePreset
+  label: string
+  sublabel: string
+  color: string
+}[] = [
+  {
+    key: 'conservative',
+    label: 'Conservative',
+    sublabel: 'Most Stable',
+    color: 'bg-green-600 border-green-500',
+  },
+  {
+    key: 'balanced',
+    label: 'Balanced',
+    sublabel: 'Recommended',
+    color: 'bg-blue-600 border-blue-500',
+  },
+  {
+    key: 'fast',
+    label: 'Fast',
+    sublabel: 'May Be Unstable',
+    color: 'bg-amber-600 border-amber-500',
+  },
+]
+
+export function ConnectScreen({
+  builder,
+}: {
+  builder: React.RefObject<Builder | null>
+}) {
+  const {
+    indexerUrl,
+    performancePreset,
+    setIndexerUrl,
+    setPerformancePreset,
+    setStep,
+    setError,
+    setApprovalUrl,
+  } = useAuthStore()
+  const [url, setUrl] = useState(indexerUrl || DEFAULT_INDEXER_URL)
+  const [loading, setLoading] = useState(false)
+  const [showCurl, setShowCurl] = useState(false)
+  const [curlResponse, setCurlResponse] = useState('')
+
+  async function handleConnect() {
+    setLoading(true)
+    setError(null)
+    try {
+      const b = new Builder(url)
+      applyPresetToBuilder(b, performancePreset)
+      builder.current = b
+      setIndexerUrl(url)
+
+      try {
+        await b.requestConnection(APP_META)
+        const approvalUrl = b.responseUrl()
+        setApprovalUrl(approvalUrl)
+        setStep('approve')
+      } catch {
+        setShowCurl(true)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to connect')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function handleCurlSubmit() {
+    try {
+      const b = builder.current
+      if (!b) {
+        setError('No builder instance')
+        return
+      }
+      b.setConnectionResponse(APP_KEY, curlResponse)
+      const approvalUrl = b.responseUrl()
+      setApprovalUrl(approvalUrl)
+      setStep('approve')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Invalid response')
+    }
+  }
+
+  const currentPreset = PRESETS[performancePreset]
+
+  const curlCommand = `curl -X POST ${url}/auth/connect \\
+  -H "Content-Type: application/json" \\
+  -d '${APP_META}'`
+
+  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">
+            Connect to Indexer
+          </h1>
+          <p className="text-neutral-400 text-sm">
+            Enter your Sia indexer URL to get started
+          </p>
+        </div>
+
+        <DevNote title="Indexer URL & App Key">
+          <p>
+            The indexer URL points to your Sia storage provider. The default is{' '}
+            <code className="text-amber-300">https://app.sia.storage</code>.
+            Your app key (set in{' '}
+            <code className="text-amber-300">src/lib/constants.ts</code>)
+            uniquely identifies your app to the indexer.
+          </p>
+          <p className="mt-1">
+            If the direct connection fails (CORS), the app falls back to a
+            manual curl flow where the user pastes the response.
+          </p>
+        </DevNote>
+
+        <div className="space-y-4">
+          <input
+            type="url"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://app.sia.storage"
+            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"
+          />
+
+          <button
+            type="button"
+            onClick={handleConnect}
+            disabled={loading || !url}
+            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 ? 'Connecting...' : 'Connect'}
+          </button>
+        </div>
+
+        <div className="space-y-3">
+          <p className="text-sm text-neutral-400">Performance</p>
+          <div className="grid grid-cols-3 gap-2">
+            {PRESET_OPTIONS.map((opt) => (
+              <button
+                key={opt.key}
+                type="button"
+                onClick={() => setPerformancePreset(opt.key)}
+                className={`py-3 px-2 rounded-lg text-center transition-all border-2 ${
+                  performancePreset === opt.key
+                    ? `${opt.color} text-white`
+                    : 'bg-neutral-900 border-neutral-700 text-neutral-400 hover:border-neutral-500'
+                }`}
+              >
+                <div className="text-sm font-medium">{opt.label}</div>
+                <div className="text-xs opacity-80">{opt.sublabel}</div>
+              </button>
+            ))}
+          </div>
+          <DevNote title="Performance Presets">
+            <p>
+              These control how many concurrent operations the SDK performs.
+              Conservative is safest, Fast uses more connections but may hit
+              rate limits. See{' '}
+              <code className="text-amber-300">src/stores/auth.ts</code> to
+              customize values.
+            </p>
+          </DevNote>
+          <div className="text-xs text-neutral-500 space-y-1">
+            <p>
+              Price fetches: {currentPreset.priceFetches} &middot; Downloads:{' '}
+              {currentPreset.downloads} &middot; Uploads:{' '}
+              {currentPreset.uploads}
+            </p>
+          </div>
+        </div>
+
+        {showCurl && (
+          <div className="space-y-4 p-4 bg-neutral-900 rounded-lg border border-neutral-700">
+            <p className="text-sm text-neutral-300">
+              Direct connection failed (CORS). Run this command and paste the
+              response:
+            </p>
+            <pre className="text-xs bg-neutral-950 p-3 rounded overflow-x-auto text-green-400">
+              {curlCommand}
+            </pre>
+            <textarea
+              value={curlResponse}
+              onChange={(e) => setCurlResponse(e.target.value)}
+              placeholder="Paste the JSON response here..."
+              rows={4}
+              className="w-full px-3 py-2 bg-neutral-950 border border-neutral-700 rounded text-sm text-white placeholder-neutral-500 focus:outline-none focus:border-green-500 font-mono"
+            />
+            <button
+              type="button"
+              onClick={handleCurlSubmit}
+              disabled={!curlResponse}
+              className="w-full py-2 bg-green-600 hover:bg-green-700 disabled:bg-neutral-700 disabled:text-neutral-500 text-white text-sm font-medium rounded-lg transition-colors"
+            >
+              Submit Response
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,8 @@
+export function LoadingScreen({ message }: { message?: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen gap-4">
+      <div className="w-8 h-8 border-2 border-neutral-600 border-t-green-500 rounded-full animate-spin" />
+      <p className="text-neutral-400 text-sm">{message || 'Initializing...'}</p>
+    </div>
+  )
+}