create-sia-app 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sia-app",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
   "bin": {
     "create-sia-app": "./dist/index.js"

package/template/src/components/CopyButton.tsx

@@ -16,7 +16,7 @@ export function CopyButton({
         navigator.clipboard.writeText(value)
         addToast(label)
       }}
-      className="p-1 text-neutral-500 hover:text-neutral-300 transition-colors"
+      className="p-1 text-neutral-400 hover:text-neutral-700 transition-colors"
       title="Copy"
     >
       <svg

package/template/src/components/DevNote.tsx

@@ -8,12 +8,12 @@ export function DevNote({
   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">
+    <div className="border-l-4 border-amber-500 bg-amber-50 rounded-r-lg p-4 space-y-1">
+      <p className="text-amber-700 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">
+      <p className="text-amber-900 text-sm font-medium">{title}</p>
+      <div className="text-amber-900/80 text-xs leading-relaxed">
         {children}
       </div>
     </div>

package/template/src/components/Navbar.tsx

@@ -23,16 +23,16 @@ export function Navbar() {
   }
 
   return (
-    <header className="border-b border-neutral-800/60">
+    <header className="border-b border-neutral-200/80">
       <div className="flex items-center justify-between px-6 py-3 max-w-5xl mx-auto">
-        <h1 className="text-sm font-semibold text-white tracking-tight">
+        <h1 className="text-sm font-semibold text-neutral-900 tracking-tight">
           {APP_NAME}
         </h1>
         {isConnected && publicKey && (
           <div className="flex items-center gap-3">
             <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-600" />
             </span>
             <span
               className="text-[11px] font-mono text-neutral-500"
@@ -44,7 +44,7 @@ export function Navbar() {
             <button
               type="button"
               onClick={handleSignOut}
-              className="text-xs text-neutral-500 hover:text-neutral-300 transition-colors ml-1"
+              className="text-xs text-neutral-500 hover:text-neutral-900 transition-colors ml-1"
             >
               Sign Out
             </button>

package/template/src/components/Toast.tsx

@@ -10,7 +10,7 @@ export function Toasts() {
       {toasts.map((toast) => (
         <div
           key={toast.id}
-          className="animate-fade-in px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-200 shadow-lg"
+          className="animate-fade-in px-4 py-2 bg-white border border-neutral-200 rounded-lg text-sm text-neutral-700 shadow-lg"
         >
           {toast.message}
         </div>

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

@@ -63,10 +63,10 @@ export function ApproveScreen({
     <div className="flex flex-col items-center justify-center flex-1 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">
+          <h1 className="text-2xl font-semibold text-neutral-900">
             Approve Connection
           </h1>
-          <p className="text-neutral-400 text-sm">
+          <p className="text-neutral-600 text-sm">
             Open the link below to approve this app, then return here.
           </p>
         </div>
@@ -76,15 +76,15 @@ export function ApproveScreen({
             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>.
+            <code className="text-amber-700">builder.waitForApproval()</code>.
             Once approved, the flow continues to recovery phrase setup.
           </p>
         </DevNote>
 
         {approvalUrl && (
           <div className="space-y-3">
-            <div className="flex items-center gap-2 p-3 bg-neutral-900 border border-neutral-700 rounded-lg">
-              <span className="flex-1 text-sm font-mono text-neutral-400 truncate">
+            <div className="flex items-center gap-2 p-3 bg-white border border-neutral-300 rounded-lg">
+              <span className="flex-1 text-sm font-mono text-neutral-600 truncate">
                 {approvalUrl}
               </span>
               <CopyButton value={approvalUrl} label="URL copied" />
@@ -104,11 +104,11 @@ export function ApproveScreen({
           type="button"
           onClick={handleManualCheck}
           disabled={manualChecking}
-          className="w-full py-3 bg-neutral-800 hover:bg-neutral-700 disabled:bg-neutral-700 disabled:text-neutral-500 text-white font-medium rounded-lg transition-colors"
+          className="w-full py-3 bg-neutral-100 hover:bg-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400 text-neutral-900 font-medium rounded-lg transition-colors"
         >
           {manualChecking ? (
             <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" />
+              <span className="w-4 h-4 border-2 border-neutral-300 border-t-neutral-900 rounded-full animate-spin" />
               Checking...
             </span>
           ) : (
@@ -116,12 +116,12 @@ export function ApproveScreen({
           )}
         </button>
 
-        <div className="flex items-center justify-center gap-2 text-xs text-neutral-600">
+        <div className="flex items-center justify-center gap-2 text-xs text-neutral-500">
           {polling ? (
             <>
               <span className="relative flex h-1.5 w-1.5">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-600" />
               </span>
               Polling for approval...
             </>

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

@@ -54,12 +54,12 @@ export function AuthFlow() {
   return (
     <div className="flex-1 flex flex-col">
       {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">
+        <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 px-4 py-2 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm max-w-md text-center shadow-sm">
           {error}
           <button
             type="button"
             onClick={() => setError(null)}
-            className="ml-2 text-red-400 hover:text-red-300"
+            className="ml-2 text-red-600 hover:text-red-900"
           >
             Dismiss
           </button>

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

@@ -45,10 +45,10 @@ export function ConnectScreen({
     <div className="flex flex-col items-center justify-center flex-1 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">
+          <h1 className="text-2xl font-semibold text-neutral-900">
             Connect to Indexer
           </h1>
-          <p className="text-neutral-400 text-sm">
+          <p className="text-neutral-600 text-sm">
             Enter your Sia indexer URL to get started
           </p>
         </div>
@@ -56,9 +56,9 @@ export function ConnectScreen({
         <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://sia.storage</code>. Your
+            <code className="text-amber-700">https://sia.storage</code>. Your
             app key (set in{' '}
-            <code className="text-amber-300">src/lib/constants.ts</code>)
+            <code className="text-amber-700">src/lib/constants.ts</code>)
             uniquely identifies your app to the indexer.
           </p>
           <p className="mt-1">
@@ -73,14 +73,14 @@ export function ConnectScreen({
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             placeholder="https://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"
+            className="w-full px-4 py-3 bg-white border border-neutral-300 rounded-lg text-neutral-900 placeholder-neutral-400 focus:outline-none focus:border-green-600"
           />
 
           <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"
+            className="w-full py-3 bg-green-600 hover:bg-green-700 disabled:bg-neutral-200 disabled:text-neutral-400 text-white font-medium rounded-lg transition-colors"
           >
             {loading ? 'Connecting...' : 'Connect'}
           </button>

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

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

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

@@ -71,10 +71,10 @@ export function RecoveryScreen({
       <div className="flex flex-col items-center justify-center flex-1 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">
+            <h1 className="text-2xl font-semibold text-neutral-900">
               Recovery Phrase
             </h1>
-            <p className="text-neutral-400 text-sm">
+            <p className="text-neutral-600 text-sm">
               Generate a new recovery phrase or enter an existing one.
             </p>
           </div>
@@ -100,7 +100,7 @@ export function RecoveryScreen({
             <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"
+              className="w-full py-3 bg-neutral-100 hover:bg-neutral-200 text-neutral-900 font-medium rounded-lg transition-colors"
             >
               Enter Existing Phrase
             </button>
@@ -114,12 +114,12 @@ export function RecoveryScreen({
     <div className="flex flex-col items-center justify-center flex-1 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">
+          <h1 className="text-2xl font-semibold text-neutral-900">
             {mode === 'generate'
               ? 'Save Your Recovery Phrase'
               : 'Enter Recovery Phrase'}
           </h1>
-          <p className="text-neutral-400 text-sm">
+          <p className="text-neutral-600 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.'}
@@ -128,14 +128,14 @@ export function RecoveryScreen({
 
         {mode === 'generate' ? (
           <div className="space-y-2">
-            <div className="grid grid-cols-3 gap-2 p-4 bg-neutral-900 rounded-lg border border-neutral-700">
+            <div className="grid grid-cols-3 gap-2 p-4 bg-white rounded-lg border border-neutral-300">
               {generatedPhrase.split(' ').map((word, i) => (
                 <div
                   key={`${word}-${i}`}
-                  className="text-center py-2 bg-neutral-800 rounded text-sm"
+                  className="text-center py-2 bg-neutral-100 rounded text-sm"
                 >
-                  <span className="text-neutral-500 mr-1">{i + 1}.</span>
-                  <span className="text-white">{word}</span>
+                  <span className="text-neutral-400 mr-1">{i + 1}.</span>
+                  <span className="text-neutral-900">{word}</span>
                 </div>
               ))}
             </div>
@@ -153,10 +153,10 @@ export function RecoveryScreen({
               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"
+              className="w-full px-4 py-3 bg-white border border-neutral-300 rounded-lg text-neutral-900 placeholder-neutral-400 focus:outline-none focus:border-green-600"
             />
             {phraseError && (
-              <p className="text-red-400 text-sm">{phraseError}</p>
+              <p className="text-red-600 text-sm">{phraseError}</p>
             )}
           </div>
         )}
@@ -165,7 +165,7 @@ export function RecoveryScreen({
           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"
+          className="w-full py-3 bg-green-600 hover:bg-green-700 disabled:bg-neutral-200 disabled:text-neutral-400 text-white font-medium rounded-lg transition-colors"
         >
           {loading ? 'Registering...' : 'Complete Setup'}
         </button>
@@ -178,7 +178,7 @@ export function RecoveryScreen({
             setGeneratedPhrase('')
             setPhraseError(null)
           }}
-          className="w-full py-2 text-neutral-400 hover:text-neutral-300 text-sm transition-colors"
+          className="w-full py-2 text-neutral-500 hover:text-neutral-900 text-sm transition-colors"
         >
           Back
         </button>

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { PinnedObject, type ShardProgress } from 'sia-storage'
-import { APP_KEY } from '../../lib/constants'
+import { encodedSize, PinnedObject, type ShardProgress } from 'sia-storage'
+import { APP_KEY, DATA_SHARDS, PARITY_SHARDS } from '../../lib/constants'
 import { useAuthStore } from '../../stores/auth'
 import { DevNote } from '../DevNote'
 
@@ -37,9 +37,10 @@ type UploadedFile = {
 
 type UploadProgress = {
   fileName: string
+  fileSize: number
   shardsDone: number
   bytesUploaded: number
-  totalBytes: number
+  encodedTotal: number
 }
 
 type DownloadProgress = {
@@ -88,11 +89,13 @@ export function UploadZone() {
     if (!sdk) return
     setUploading(true)
     setError(null)
+    const encodedTotal = encodedSize(file.size, DATA_SHARDS, PARITY_SHARDS)
     setActiveUpload({
       fileName: file.name,
+      fileSize: file.size,
       shardsDone: 0,
       bytesUploaded: 0,
-      totalBytes: file.size,
+      encodedTotal,
     })
 
     try {
@@ -107,14 +110,17 @@ export function UploadZone() {
       let bytesUploaded = 0
       const pinnedObject = await sdk.upload(object, file.stream(), {
         maxInflight: 10,
+        dataShards: DATA_SHARDS,
+        parityShards: PARITY_SHARDS,
         onShardUploaded: (progress: ShardProgress) => {
           shardsDone++
           bytesUploaded += progress.shardSize
           setActiveUpload({
             fileName: file.name,
+            fileSize: file.size,
             shardsDone,
             bytesUploaded,
-            totalBytes: file.size,
+            encodedTotal,
           })
         },
       })
@@ -215,7 +221,7 @@ export function UploadZone() {
     ? Math.min(
         100,
         Math.round(
-          (activeUpload.bytesUploaded / activeUpload.totalBytes) * 100,
+          (activeUpload.bytesUploaded / activeUpload.encodedTotal) * 100,
         ),
       )
     : 0
@@ -227,34 +233,34 @@ export function UploadZone() {
         <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
+            <code className="text-amber-700">src/lib/constants.ts</code> or
             scaffold a fresh project with{' '}
-            <code className="text-amber-300">bunx create-sia-app</code>.
+            <code className="text-amber-700">bunx create-sia-app</code>.
           </p>
         </DevNote>
       )}
 
       <DevNote title="Upload & Download">
         <p>
-          <code className="text-amber-300">
+          <code className="text-amber-700">
             sdk.upload(object, file.stream(), opts)
           </code>{' '}
           encrypts, erasure-codes, and streams shards directly to Sia hosts.{' '}
-          <code className="text-amber-300">sdk.download(object, opts)</code>{' '}
-          returns a <code className="text-amber-300">ReadableStream</code> of
+          <code className="text-amber-700">sdk.download(object, opts)</code>{' '}
+          returns a <code className="text-amber-700">ReadableStream</code> of
           decrypted bytes. Per-shard progress is reported via{' '}
-          <code className="text-amber-300">onShardUploaded</code> /{' '}
-          <code className="text-amber-300">onShardDownloaded</code>.
+          <code className="text-amber-700">onShardUploaded</code> /{' '}
+          <code className="text-amber-700">onShardDownloaded</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">
+        <div className="flex items-center justify-between px-4 py-2.5 bg-red-50 border border-red-200 rounded-lg text-red-800 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"
+            className="text-red-600 hover:text-red-900 text-xs ml-4 shrink-0"
           >
             Dismiss
           </button>
@@ -274,10 +280,10 @@ export function UploadZone() {
         }}
         className={`relative block border-2 border-dashed rounded-xl p-16 text-center transition-all duration-150 ${
           uploading
-            ? 'border-neutral-800 cursor-default'
+            ? 'border-neutral-300 cursor-default'
             : dragOver
-              ? 'border-green-500 bg-green-500/5 cursor-pointer'
-              : 'border-neutral-800 hover:border-neutral-600 cursor-pointer'
+              ? 'border-green-600 bg-green-600/5 cursor-pointer'
+              : 'border-neutral-300 hover:border-neutral-400 cursor-pointer'
         }`}
       >
         <input
@@ -294,30 +300,36 @@ export function UploadZone() {
 
         {activeUpload ? (
           <div className="space-y-4">
-            <p className="text-neutral-300 text-sm">
+            <p className="text-neutral-700 text-sm">
               Uploading{' '}
-              <span className="text-white">{activeUpload.fileName}</span>
+              <span className="text-neutral-900">{activeUpload.fileName}</span>{' '}
+              <span className="text-neutral-500">
+                ({formatBytes(activeUpload.fileSize)})
+              </span>
             </p>
-            <div className="w-full max-w-xs mx-auto bg-neutral-800 rounded-full h-1.5 overflow-hidden">
+            <div className="w-full max-w-xs mx-auto bg-neutral-200 rounded-full h-1.5 overflow-hidden">
               {activeUpload.shardsDone === 0 ? (
-                <div className="bg-green-500 h-full rounded-full w-1/4 animate-indeterminate" />
+                <div className="bg-green-600 h-full rounded-full w-1/4 animate-indeterminate" />
               ) : (
                 <div
-                  className="bg-green-500 h-full rounded-full transition-all duration-300"
+                  className="bg-green-600 h-full rounded-full transition-all duration-300"
                   style={{ width: `${uploadPercent}%` }}
                 />
               )}
             </div>
-            <p className="text-neutral-600 text-xs font-mono">
+            <p className="text-neutral-500 text-xs font-mono">
               {activeUpload.shardsDone} shards &middot;{' '}
-              {formatBytes(activeUpload.bytesUploaded)} /{' '}
-              {formatBytes(activeUpload.totalBytes)}
+              {formatBytes(
+                (activeUpload.bytesUploaded / activeUpload.encodedTotal) *
+                  activeUpload.fileSize,
+              )}{' '}
+              / {formatBytes(activeUpload.fileSize)}
             </p>
           </div>
         ) : (
           <div className="space-y-2">
             <svg
-              className="w-8 h-8 mx-auto text-neutral-700"
+              className="w-8 h-8 mx-auto text-neutral-400"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -327,10 +339,10 @@ export function UploadZone() {
               <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">
+            <p className="text-neutral-600 text-sm">
               Drop files here or click to browse
             </p>
-            <p className="text-neutral-600 text-xs">
+            <p className="text-neutral-500 text-xs">
               Encrypted end-to-end and stored on the Sia network
             </p>
           </div>
@@ -343,7 +355,7 @@ export function UploadZone() {
           <h2 className="text-xs font-medium text-neutral-500 uppercase tracking-wider">
             {files.length} file{files.length !== 1 ? 's' : ''}
           </h2>
-          <div className="divide-y divide-neutral-800/60">
+          <div className="divide-y divide-neutral-200/80">
             {files.map((file) => {
               const isDownloading = downloading === file.id
               return (
@@ -352,10 +364,10 @@ export function UploadZone() {
                   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">
+                    <p className="text-sm text-neutral-900 truncate">
                       {file.metadata.name}
                     </p>
-                    <p className="text-xs text-neutral-600 mt-0.5">
+                    <p className="text-xs text-neutral-500 mt-0.5">
                       {formatBytes(file.metadata.size)}
                       {file.metadata.type !== 'application/octet-stream' && (
                         <span> &middot; {file.metadata.type}</span>
@@ -376,7 +388,7 @@ export function UploadZone() {
                       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"
+                      className="text-xs text-neutral-500 hover:text-neutral-900 disabled:opacity-30 disabled:cursor-default transition-colors"
                       title="Download"
                     >
                       {isDownloading ? (
@@ -406,7 +418,7 @@ export function UploadZone() {
                       )}
                     </button>
                     <span
-                      className="text-[11px] text-neutral-700 font-mono group-hover:text-neutral-500 transition-colors"
+                      className="text-[11px] text-neutral-400 font-mono group-hover:text-neutral-700 transition-colors"
                       title={file.metadata.hash}
                     >
                       {file.metadata.hash.slice(0, 8)}...

package/template/src/index.css

@@ -2,8 +2,8 @@
 
 body {
   margin: 0;
-  background-color: #0a0a0a;
-  color: #e5e5e5;
+  background-color: #fafafa;
+  color: #171717;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }

package/template/src/lib/constants.ts

@@ -1,6 +1,6 @@
 import type { AppMetadata } from 'sia-storage'
 
-// biome-ignore format: scaffolder substitutes a 64-char hex string here
+// biome-ignore format: long hex literal
 export const APP_KEY = '{{APP_KEY}}'
 export const APP_NAME = '{{APP_NAME}}'
 export const DEFAULT_INDEXER_URL = '{{INDEXER_URL}}'
@@ -12,3 +12,7 @@ export const APP_META: AppMetadata = {
   logoUrl: undefined,
   callbackUrl: undefined,
 }
+
+// Erasure coding parameters — passed to sdk.upload() and encodedSize().
+export const DATA_SHARDS = 10
+export const PARITY_SHARDS = 20

package/template/src/stores/auth.ts

@@ -1,6 +1,7 @@
 import type { Sdk } from 'sia-storage'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
+import { APP_KEY } from '../lib/constants'
 
 export type AuthStep =
   | 'loading'
@@ -50,7 +51,7 @@ export const useAuthStore = create<AuthState>()(
         }),
     }),
     {
-      name: '{{APP_NAME}}-auth',
+      name: `sia-auth-${APP_KEY.slice(0, 16)}`,
       partialize: (state) => ({
         storedKeyHex: state.storedKeyHex,
         indexerUrl: state.indexerUrl,