@blu1606/create-walrus-app 1.0.0 → 2.1.0

package/presets/react-mysten-gallery/README.md

@@ -0,0 +1,107 @@
+# gallery-demo
+
+This is a File Gallery Walrus application.
+
+## Features
+
+- Upload multiple files to Walrus
+- Grid view of all uploaded files
+- Persistent index (localStorage)
+- Delete files from gallery
+- File metadata display (name, size, upload date)
+
+## Usage
+
+1. Click "Choose File" and select a file
+2. Click "Add to Gallery" to upload
+3. Files appear in the grid below
+4. Click "Delete" to remove files from gallery
+5. Gallery index persists in localStorage
+
+## Code Structure
+
+- `GalleryGrid.tsx` - Grid layout for files
+- `FileCard.tsx` - Individual file display
+- `UploadModal.tsx` - Upload UI
+- `index-manager.ts` - localStorage persistence
+- `App.tsx` - Main app layout
+
+## Gallery Index Format
+
+The gallery maintains a local index in localStorage:
+
+```json
+{
+  "version": "1.0",
+  "items": [
+    {
+      "blobId": "abc123...",
+      "name": "photo.jpg",
+      "size": 102400,
+      "contentType": "image/jpeg",
+      "uploadedAt": 1705449600000
+    }
+  ],
+  "lastModified": 1705449600000
+}
+```
+
+## Deploy to Walrus Sites
+
+### First-time Setup
+
+```bash
+pnpm setup-walrus-deploy
+```
+
+This will automatically:
+- Install Bun (if not already installed)
+- Download site-builder binary for your OS
+- Clone Walrus Sites portal to `~/.walrus/portal`
+- Add deployment scripts to package.json
+
+### Configure SUI Private Key
+
+Edit the portal configuration:
+
+**Linux/macOS:**
+```bash
+nano ~/.walrus/portal/.env
+```
+
+**Windows:**
+```bash
+notepad %USERPROFILE%\.walrus\portal\.env
+```
+
+Add your private key:
+```env
+SUI_PRIVATE_KEY=0x...
+WALRUS_NETWORK=testnet
+```
+
+### Build & Deploy
+
+```bash
+# Build production bundle
+pnpm build
+
+# Deploy to Walrus Sites (testnet, 10 epochs)
+pnpm deploy:walrus
+```
+
+### Preview Locally
+
+```bash
+pnpm walrus:portal
+```
+
+This starts the local portal server to preview your deployed site.
+
+## Available Scripts
+
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm setup-walrus-deploy` - One-time deployment setup
+- `pnpm deploy:walrus` - Deploy to Walrus Sites
+- `pnpm walrus:portal` - Start local portal preview

package/presets/react-mysten-gallery/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "gallery-demo",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Walrus application scaffolded with create-walrus-app",
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "lint": "eslint . --ext .ts,.tsx",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "setup-walrus-deploy": "bash scripts/setup-walrus-deploy.sh"
+  },
+  "dependencies": {
+    "@mysten/dapp-kit": "^0.14.0",
+    "@mysten/sui": "^1.10.0",
+    "@mysten/walrus": "^0.9.0",
+    "@tanstack/react-query": "^5.17.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  }
+}

package/presets/react-mysten-gallery/scripts/setup-walrus-deploy.sh

@@ -0,0 +1,286 @@
+#!/bin/bash
+# setup-walrus-deploy.sh - Zero-config Walrus Sites deployment setup (testnet)
+# Auto-installs dependencies, downloads tools, clones portal
+# Supports: Linux, macOS, Windows (Git Bash/WSL)
+
+set -e  # Exit on error
+
+echo "🦭 Walrus Sites Zero-Config Setup (testnet)"
+echo ""
+
+# ============================================================================
+# 1. Detect OS & Architecture
+# ============================================================================
+detect_os() {
+    OS=$(uname -s | tr '[:upper:]' '[:lower:]')
+    ARCH=$(uname -m)
+
+    case "$OS" in
+        linux*)   OS_TYPE="linux" ;;
+        darwin*)  OS_TYPE="macos" ;;
+        mingw*|msys*|cygwin*) OS_TYPE="windows" ;;
+        *)
+            echo "❌ Unsupported OS: $OS"
+            exit 1
+            ;;
+    esac
+
+    echo "✅ Detected: $OS_TYPE ($ARCH)"
+}
+
+# ============================================================================
+# 2. Auto-install Bun (if not exists)
+# ============================================================================
+setup_bun() {
+    if command -v bun &>/dev/null; then
+        echo "✅ Bun already installed: $(bun --version)"
+        return 0
+    fi
+
+    echo "📥 Installing Bun..."
+    if [ "$OS_TYPE" = "windows" ]; then
+        # Windows (PowerShell install via Git Bash)
+        powershell -c "irm bun.sh/install.ps1 | iex"
+    else
+        # Linux/macOS
+        curl -fsSL https://bun.sh/install | bash
+    fi
+
+    # Add to PATH for current session
+    if [ "$OS_TYPE" = "windows" ]; then
+        export PATH="$USERPROFILE/.bun/bin:$PATH"
+    else
+        export BUN_INSTALL="$HOME/.bun"
+        export PATH="$BUN_INSTALL/bin:$PATH"
+    fi
+
+    # Verify installation
+    if command -v bun &>/dev/null; then
+        echo "✅ Bun installed: $(bun --version)"
+    else
+        echo "⚠️  Bun installed but not in PATH. Restart terminal or run:"
+        echo "   export PATH=\"\$HOME/.bun/bin:\$PATH\""
+    fi
+}
+
+# ============================================================================
+# 3. Download site-builder binary (if not exists)
+# ============================================================================
+setup_site_builder() {
+    # Set install directory based on OS
+    if [ "$OS_TYPE" = "windows" ]; then
+        WALRUS_BIN="$USERPROFILE/.walrus/bin"
+        SITE_BUILDER="$WALRUS_BIN/site-builder.exe"
+    else
+        WALRUS_BIN="$HOME/.walrus/bin"
+        SITE_BUILDER="$WALRUS_BIN/site-builder"
+    fi
+
+    # Check if already exists
+    if [ -f "$SITE_BUILDER" ]; then
+        echo "✅ site-builder already exists: $SITE_BUILDER"
+        chmod +x "$SITE_BUILDER" 2>/dev/null || true
+        return 0
+    fi
+
+    echo "📥 Downloading site-builder for $OS_TYPE..."
+    mkdir -p "$WALRUS_BIN"
+
+    # Select binary based on OS
+    case "$OS_TYPE" in
+        linux)   BINARY_NAME="site-builder-linux" ;;
+        macos)   BINARY_NAME="site-builder-macos" ;;
+        windows) BINARY_NAME="site-builder-windows.exe" ;;
+    esac
+
+    DOWNLOAD_URL="https://github.com/MystenLabs/walrus-sites/releases/latest/download/$BINARY_NAME"
+
+    # Download with retry
+    if ! curl -fsSL -o "$SITE_BUILDER" "$DOWNLOAD_URL"; then
+        echo "❌ Failed to download site-builder from: $DOWNLOAD_URL"
+        exit 1
+    fi
+
+    chmod +x "$SITE_BUILDER"
+    echo "✅ site-builder installed: $SITE_BUILDER"
+
+    # Add to PATH hint (won't persist after script)
+    if [ "$OS_TYPE" = "windows" ]; then
+        export PATH="$USERPROFILE/.walrus/bin:$PATH"
+    else
+        export PATH="$HOME/.walrus/bin:$PATH"
+    fi
+}
+
+# ============================================================================
+# 4. Clone Walrus Portal (if not exists)
+# ============================================================================
+setup_portal() {
+    if [ "$OS_TYPE" = "windows" ]; then
+        PORTAL_DIR="$USERPROFILE/.walrus/portal"
+    else
+        PORTAL_DIR="$HOME/.walrus/portal"
+    fi
+
+    if [ -d "$PORTAL_DIR" ]; then
+        echo "✅ Portal already exists: $PORTAL_DIR"
+        echo "   Updating..."
+        cd "$PORTAL_DIR"
+        git pull --quiet || echo "⚠️  Git pull failed (may be offline)"
+    else
+        echo "📂 Cloning Walrus Sites portal..."
+        mkdir -p "$(dirname "$PORTAL_DIR")"
+
+        # Clone with depth=1 for faster download
+        if ! git clone --depth=1 https://github.com/MystenLabs/walrus-sites.git "$PORTAL_DIR"; then
+            echo "❌ Failed to clone portal repository"
+            exit 1
+        fi
+
+        cd "$PORTAL_DIR"
+        echo "✅ Portal cloned to: $PORTAL_DIR"
+    fi
+
+    # Setup .env if not exists
+    if [ ! -f ".env" ]; then
+        if [ -f ".env.example" ]; then
+            cp .env.example .env
+            echo "✅ Created .env from .env.example"
+        else
+            # Create minimal .env
+            cat > .env << 'EOF'
+# Walrus Portal Configuration (Testnet)
+WALRUS_NETWORK=testnet
+SUI_PRIVATE_KEY=
+
+# Optional: Uncomment to customize
+# PORTAL_PORT=3000
+EOF
+            echo "✅ Created .env template"
+        fi
+
+        echo ""
+        echo "⚠️  ACTION REQUIRED:"
+        echo "   Edit $PORTAL_DIR/.env"
+        echo "   Add your SUI_PRIVATE_KEY=0x..."
+        echo ""
+    else
+        echo "✅ .env already configured"
+    fi
+
+    # Install portal dependencies
+    echo "📦 Installing portal dependencies..."
+    if ! bun install --silent; then
+        echo "❌ Bun install failed"
+        exit 1
+    fi
+
+    echo "✅ Portal dependencies installed"
+}
+
+# ============================================================================
+# 5. Add npm scripts to project package.json
+# ============================================================================
+add_project_scripts() {
+    PROJECT_DIR="${1:-.}"  # Default to current directory
+    cd "$PROJECT_DIR" || { echo "❌ Invalid project directory"; exit 1; }
+
+    if [ ! -f "package.json" ]; then
+        echo "❌ No package.json found in $PROJECT_DIR"
+        exit 1
+    fi
+
+    echo "📝 Adding Walrus deploy scripts to package.json..."
+
+    # Use Node.js to safely modify package.json (guaranteed to exist in Node projects)
+    node -e "
+        const fs = require('fs');
+        const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+
+        pkg.scripts = pkg.scripts || {};
+
+        // Add scripts (only if not already exists)
+        if (!pkg.scripts['setup-walrus-deploy']) {
+            pkg.scripts['setup-walrus-deploy'] = 'bash scripts/setup-walrus-deploy.sh';
+        }
+
+        if (!pkg.scripts['deploy:walrus']) {
+            const siteBuilderPath = process.platform === 'win32'
+                ? '%USERPROFILE%/.walrus/bin/site-builder.exe'
+                : '~/.walrus/bin/site-builder';
+            pkg.scripts['deploy:walrus'] = siteBuilderPath + ' --context=testnet deploy ./dist --epochs 10';
+        }
+
+        if (!pkg.scripts['walrus:portal']) {
+            const portalPath = process.platform === 'win32'
+                ? 'cd %USERPROFILE%/.walrus/portal'
+                : 'cd ~/.walrus/portal';
+            pkg.scripts['walrus:portal'] = portalPath + ' && bun run server';
+        }
+
+        fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\\n');
+    " || {
+        echo "❌ Failed to update package.json"
+        exit 1
+    }
+
+    echo "✅ Scripts added to package.json:"
+    echo "   - setup-walrus-deploy"
+    echo "   - deploy:walrus"
+    echo "   - walrus:portal"
+}
+
+# ============================================================================
+# Main Execution
+# ============================================================================
+main() {
+    echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+    # Trap errors
+    trap 'echo "❌ Setup failed at line $LINENO"' ERR
+
+    # Prerequisites check
+    if ! command -v git &>/dev/null; then
+        echo "❌ Git not found. Install: https://git-scm.com"
+        exit 1
+    fi
+
+    if ! command -v node &>/dev/null; then
+        echo "❌ Node.js not found. Install: https://nodejs.org"
+        exit 1
+    fi
+
+    # Run setup steps
+    detect_os
+    setup_bun
+    setup_site_builder
+    setup_portal
+    add_project_scripts "$@"
+
+    echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+    echo ""
+    echo "🎉 Setup Complete!"
+    echo ""
+    echo "Next Steps:"
+    echo "  1. Configure your SUI private key:"
+    if [ "$OS_TYPE" = "windows" ]; then
+        echo "     notepad %USERPROFILE%\\.walrus\\portal\\.env"
+    else
+        echo "     nano ~/.walrus/portal/.env"
+    fi
+    echo "     Add: SUI_PRIVATE_KEY=0x..."
+    echo ""
+    echo "  2. Build your project:"
+    echo "     pnpm build"
+    echo ""
+    echo "  3. Deploy to Walrus Sites:"
+    echo "     pnpm deploy:walrus"
+    echo ""
+    echo "  4. (Optional) Preview locally:"
+    echo "     pnpm walrus:portal"
+    echo ""
+    echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+}
+
+# Run main with all script arguments
+main "$@"

package/presets/react-mysten-gallery/src/App.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { AppLayout } from './components/layout/app-layout.js';
+import { GalleryGrid } from './components/features/gallery-grid.js';
+import { UploadModal } from './components/features/upload-modal.js';
+import './index.css';
+
+function App() {
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  return (
+    <AppLayout>
+      <div className="gallery-app">
+        <h2><span className="text-accent">🖼️</span> File Gallery</h2>
+        <p className="text-secondary">Upload and manage multiple files on <span className="text-accent">Walrus</span></p>
+
+        <UploadModal onSuccess={() => setRefreshKey((k) => k + 1)} />
+        <GalleryGrid key={refreshKey} />
+      </div>
+    </AppLayout>
+  );
+}
+
+export default App;

package/presets/react-mysten-gallery/src/components/features/file-card.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react';
+import { removeItem } from '../../utils/index-manager.js';
+import type { GalleryItem } from '../../lib/walrus/types.js';
+import {
+  generatePreviewUrl,
+  isImageType,
+  revokePreviewUrl,
+} from '../../utils/preview-generator.js';
+
+interface FileCardProps {
+  item: GalleryItem;
+  onDelete: () => void;
+}
+
+export function FileCard({ item, onDelete }: FileCardProps) {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(
+    item.previewUrl || null
+  );
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false);
+
+  // Load preview if it's an image and we don't have a preview URL yet
+  useEffect(() => {
+    if (!previewUrl && isImageType(item.contentType)) {
+      setIsLoadingPreview(true);
+      generatePreviewUrl(item.blobId, item.contentType)
+        .then((url) => setPreviewUrl(url))
+        .catch((error) => {
+          console.error('Failed to load preview:', error);
+        })
+        .finally(() => setIsLoadingPreview(false));
+    }
+
+    // Cleanup: revoke object URL when component unmounts
+    return () => {
+      if (previewUrl) {
+        revokePreviewUrl(previewUrl);
+      }
+    };
+  }, [item.blobId, item.contentType, previewUrl]);
+
+  const handleDelete = () => {
+    if (confirm(`Delete ${item.name}?`)) {
+      // Revoke preview URL before deleting
+      if (previewUrl) {
+        revokePreviewUrl(previewUrl);
+      }
+      removeItem(item.blobId);
+      onDelete();
+    }
+  };
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  const formatDate = (timestamp: number): string => {
+    return new Date(timestamp).toLocaleString();
+  };
+
+  return (
+    <div className="file-card">
+      {/* Image Preview */}
+      {isImageType(item.contentType) && (
+        <div className="image-preview">
+          {isLoadingPreview ? (
+            <div className="loading-placeholder">Loading preview...</div>
+          ) : previewUrl ? (
+            <img src={previewUrl} alt={item.name} />
+          ) : (
+            <div className="error-placeholder">Preview not available</div>
+          )}
+        </div>
+      )}
+
+      {/* File Info */}
+      <h4>{item.name}</h4>
+      <p className="text-secondary">Size: {formatBytes(item.size)}</p>
+      <p className="text-secondary">Uploaded: {formatDate(item.uploadedAt)}</p>
+      <p className="blob-id text-accent">{item.blobId.slice(0, 16)}...</p>
+      <button onClick={handleDelete} className="btn-danger">
+        Delete
+      </button>
+    </div>
+  );
+}

package/{templates/gallery/src/components/GalleryGrid.tsx → presets/react-mysten-gallery/src/components/features/gallery-grid.tsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
-import { FileCard } from './FileCard.js';
-import { loadIndex } from '../utils/index-manager.js';
-import type { GalleryItem } from '../types/gallery.js';
+import { FileCard } from './file-card.js';
+import { loadIndex } from '../../utils/index-manager.js';
+import type { GalleryItem } from '../../lib/walrus/types.js';
 
 export function GalleryGrid() {
   const [items, setItems] = useState<GalleryItem[]>([]);
@@ -19,7 +19,7 @@ export function GalleryGrid() {
   return (
     <div className="gallery-grid">
       {items.length === 0 ? (
-        <p>No files yet. Upload your first file!</p>
+        <p className="text-secondary">No files yet. Upload your first file!</p>
       ) : (
         items.map((item) => (
           <FileCard key={item.blobId} item={item} onDelete={refreshGallery} />
@@ -27,4 +27,4 @@ export function GalleryGrid() {
       )}
     </div>
   );
-}
+}

package/presets/react-mysten-gallery/src/components/features/upload-modal.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { useUpload } from '../../hooks/use-upload.js';
+import { addItem } from '../../utils/index-manager.js';
+import { generatePreviewUrl, isImageType } from '../../utils/preview-generator.js';
+
+interface UploadModalProps {
+  onSuccess: () => void;
+}
+
+export function UploadModal({ onSuccess }: UploadModalProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const upload = useUpload();
+
+  const handleUpload = async () => {
+    if (!file) return;
+
+    upload.mutate(
+      { file, options: { epochs: 1 } },
+      {
+        onSuccess: async (data) => {
+          // Generate preview URL for images
+          let previewUrl: string | undefined;
+          if (isImageType(file.type)) {
+            try {
+              previewUrl = await generatePreviewUrl(data.blobId, file.type);
+              console.log('Preview URL generated:', previewUrl);
+            } catch (error) {
+              console.error('Failed to generate preview URL:', error);
+              // Continue without preview - FileCard will try to load it later
+            }
+          }
+
+          // Add item to gallery with preview URL
+          addItem({
+            blobId: data.blobId,
+            name: file.name,
+            size: file.size,
+            contentType: file.type,
+            uploadedAt: Date.now(),
+            previewUrl,
+          });
+
+          setFile(null);
+          onSuccess();
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="upload-modal">
+      <input
+        type="file"
+        onChange={(e) => setFile(e.target.files?.[0] || null)}
+        className="file-input"
+      />
+      <button
+        onClick={handleUpload}
+        disabled={!file || upload.isPending}
+        className="btn-primary"
+      >
+        {upload.isPending ? 'Uploading...' : 'Add to Gallery'}
+      </button>
+      {upload.error && (
+        <p className="text-error">Error: {upload.error.message}</p>
+      )}
+    </div>
+  );
+}

package/{templates/react/src/components/WalletConnect.tsx → presets/react-mysten-gallery/src/components/features/wallet-connect.tsx}

@@ -1,5 +1,5 @@
 import { ConnectButton } from '@mysten/dapp-kit';
-import { useWallet } from '../hooks/useWallet.js';
+import { useWallet } from '../../hooks/use-wallet.js';
 
 export function WalletConnect() {
   const { isConnected, address } = useWallet();

package/presets/react-mysten-gallery/src/components/layout/app-layout.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { WalletConnect } from '../features/wallet-connect.js';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export function AppLayout({ children }: LayoutProps) {
+  return (
+    <div className="app-layout">
+      <header className="app-header">
+        <h1><span className="text-secondary">🌊</span> <span className="text-accent">Walrus</span> App</h1>
+        <WalletConnect />
+      </header>
+      <main className="app-main">{children}</main>
+      <footer className="app-footer">
+        <p className="text-secondary">Powered by <span className="text-accent">Walrus</span> & <span style={{ color: 'var(--walrus-accent-blue)' }}>Sui</span></p>
+      </footer>
+    </div>
+  );
+}

package/{templates/react/src/hooks/useStorage.ts → presets/react-mysten-gallery/src/hooks/use-download.ts}

@@ -1,21 +1,5 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { storageAdapter } from '../index.js';
-import type { UploadOptions } from '../adapters/storage.js';
-
-export function useUpload() {
-  return useMutation({
-    mutationFn: async ({
-      file,
-      options,
-    }: {
-      file: File;
-      options?: UploadOptions;
-    }) => {
-      const blobId = await storageAdapter.upload(file, options);
-      return { blobId, file };
-    },
-  });
-}
+import { useQuery } from '@tanstack/react-query';
+import { storageAdapter } from '../lib/walrus/index.js';
 
 export function useDownload(blobId: string | null) {
   return useQuery({