@blu1606/create-walrus-app 2.0.0 → 2.2.0

package/presets/react-mysten-simple-upload-enoki/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Walrus application with Enoki zkLogin authentication 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/enoki": "^0.15.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",
+    "zod": "^3.22.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-simple-upload-enoki/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-simple-upload-enoki/src/App.tsx

@@ -0,0 +1,27 @@
+import { AppLayout } from './components/layout/app-layout.js';
+import { UploadForm } from './components/features/upload-form.js';
+import { FilePreview } from './components/features/file-preview.js';
+import './index.css';
+
+function App() {
+  return (
+    <AppLayout>
+      <div className="simple-upload-app">
+        <h2><span className="text-accent">📤</span> Simple Upload</h2>
+        <p className="text-secondary">Upload a file to <span className="text-accent">Walrus</span> and download it by <span className="text-accent">Blob ID</span></p>
+
+        <section className="upload-section">
+          <h3>Upload File</h3>
+          <UploadForm />
+        </section>
+
+        <section className="download-section">
+          <h3>Download File</h3>
+          <FilePreview />
+        </section>
+      </div>
+    </AppLayout>
+  );
+}
+
+export default App;

package/presets/react-mysten-simple-upload-enoki/src/components/features/enoki-auth-button.tsx

@@ -0,0 +1,29 @@
+import { useEnokiAuth } from '../../hooks/use-enoki-auth.js';
+
+/**
+ * Google OAuth login/logout button for zkLogin
+ *
+ * Shows login button when disconnected, logout button when connected
+ */
+export function EnokiAuthButton() {
+  const { isEnokiConnected, enokiAddress, login, logout } = useEnokiAuth();
+
+  if (isEnokiConnected) {
+    return (
+      <div className="enoki-auth">
+        <span className="enoki-address">
+          zkLogin: {enokiAddress?.slice(0, 6)}...{enokiAddress?.slice(-4)}
+        </span>
+        <button onClick={logout} className="logout-btn">
+          Logout
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <button onClick={login} className="google-login-btn">
+      🔐 Login with Google
+    </button>
+  );
+}

package/presets/react-mysten-simple-upload-enoki/src/components/features/file-preview.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { useDownload, useMetadata } from '../../hooks/use-download.js';
+
+export function FilePreview() {
+  const [blobId, setBlobId] = useState('');
+  const { data, isLoading, error } = useDownload(blobId);
+  const { data: metadata } = useMetadata(blobId);
+
+  const handleDownload = () => {
+    if (!data) return;
+
+    // Use original filename from metadata if available
+    let filename = metadata?.fileName || `walrus-${blobId.slice(0, 8)}`;
+
+    // If metadata doesn't have filename, auto-detect from content type
+    if (!metadata?.fileName) {
+      const contentType = metadata?.contentType || 'application/octet-stream';
+
+      if (contentType.startsWith('image/')) {
+        filename += `.${contentType.split('/')[1]}`;
+      } else if (contentType.startsWith('text/')) {
+        filename += '.txt';
+      } else if (contentType.includes('json')) {
+        filename += '.json';
+      } else {
+        filename += '.bin';
+      }
+    }
+
+    const contentType = metadata?.contentType || 'application/octet-stream';
+    const blob = new Blob([data as Uint8Array], { type: contentType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  // Auto-detect if data is text or JSON for preview
+  const canPreview = data && (typeof data === 'string' || data instanceof Uint8Array);
+  const preview = canPreview && typeof data === 'string'
+    ? data.slice(0, 200) // Show first 200 chars for text
+    : null;
+
+  return (
+    <div className="file-preview">
+      <input
+        type="text"
+        placeholder="Enter Blob ID"
+        value={blobId}
+        onChange={(e) => setBlobId(e.target.value)}
+      />
+
+      {isLoading && <p className="text-secondary">Loading...</p>}
+      {error && <p className="error">Error: {error.message}</p>}
+
+      {data && (
+        <div className="preview-content icon-list">
+          <p className="text-success">✓ Blob found <span className="text-secondary">({data.byteLength || data.length} bytes)</span></p>
+          {metadata?.fileName && <p className="text-secondary">File: <span className="text-accent">{metadata.fileName}</span></p>}
+          {metadata?.contentType && <p className="text-secondary">Type: <span className="text-accent">{metadata.contentType}</span></p>}
+          {preview && (
+            <pre>
+              {preview}...
+            </pre>
+          )}
+          <button onClick={handleDownload}>Download File</button>
+        </div>
+      )}
+    </div>
+  );
+}

package/presets/react-mysten-simple-upload-enoki/src/components/features/upload-form.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { useUpload } from '../../hooks/use-upload.js';
+import { useWallet } from '../../hooks/use-wallet.js';
+
+export function UploadForm() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const upload = useUpload();
+  const { isConnected } = useWallet();
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) setSelectedFile(file);
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) return;
+
+    upload.mutate(
+      { file: selectedFile, options: { epochs: 1 } },
+      {
+        onSuccess: (data) => {
+          alert(`Upload successful! Blob ID: ${data.blobId}`);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="upload-form">
+      <input
+        type="file"
+        onChange={handleFileChange}
+        disabled={upload.isPending}
+      />
+
+      {selectedFile && (
+        <div className="file-info">
+          <p className="text-secondary">Selected: <span className="text-accent">{selectedFile.name}</span></p>
+          <p className="text-secondary">Size: <span className="text-accent">{(selectedFile.size / 1024).toFixed(2)} KB</span></p>
+        </div>
+      )}
+
+      {!isConnected && (
+        <p className="warning">⚠️ Please connect your wallet to upload files</p>
+      )}
+
+      <button
+        onClick={handleUpload}
+        disabled={!selectedFile || !isConnected || upload.isPending}
+      >
+        {!isConnected
+          ? 'Connect Wallet First'
+          : upload.isPending
+            ? 'Uploading...'
+            : 'Upload to Walrus'}
+      </button>
+
+      {upload.isError && <p className="error">Error: {upload.error.message}</p>}
+    </div>
+  );
+}

package/presets/react-mysten-simple-upload-enoki/src/components/features/wallet-connect.tsx

@@ -0,0 +1,38 @@
+import { ConnectButton } from '@mysten/dapp-kit';
+import { useWallet } from '../../hooks/use-wallet.js';
+import { useEnokiAuth } from '../../hooks/use-enoki-auth.js';
+import { EnokiAuthButton } from './enoki-auth-button.js';
+
+/**
+ * Dual authentication component
+ *
+ * Supports both zkLogin (Google OAuth) and standard Sui wallets
+ */
+export function WalletConnect() {
+  const { isConnected, address } = useWallet();
+  const { isEnokiConnected } = useEnokiAuth();
+
+  return (
+    <div className="wallet-connect">
+      <EnokiAuthButton />
+
+      {!isEnokiConnected && (
+        <>
+          <div className="auth-divider">
+            <span>OR</span>
+          </div>
+          {isConnected ? (
+            <div className="wallet-info">
+              <span>
+                Wallet: {address?.slice(0, 6)}...{address?.slice(-4)}
+              </span>
+            </div>
+          ) : (
+            <p>Connect standard wallet</p>
+          )}
+          <ConnectButton />
+        </>
+      )}
+    </div>
+  );
+}

package/presets/react-mysten-simple-upload-enoki/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/presets/react-mysten-simple-upload-enoki/src/hooks/use-download.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import { storageAdapter } from '../lib/walrus/index.js';
+
+export function useDownload(blobId: string | null) {
+  return useQuery({
+    queryKey: ['blob', blobId],
+    queryFn: async () => {
+      if (!blobId) throw new Error('No blob ID provided');
+      return await storageAdapter.download(blobId);
+    },
+    enabled: !!blobId,
+  });
+}
+
+export function useMetadata(blobId: string | null) {
+  return useQuery({
+    queryKey: ['metadata', blobId],
+    queryFn: async () => {
+      if (!blobId) throw new Error('No blob ID provided');
+      return await storageAdapter.getMetadata(blobId);
+    },
+    enabled: !!blobId,
+  });
+}

package/presets/react-mysten-simple-upload-enoki/src/hooks/use-enoki-auth.ts

@@ -0,0 +1,52 @@
+import { useEnokiFlow, useZkLogin } from '@mysten/enoki/react';
+import { enokiConfig } from '../lib/enoki/index.js';
+
+/**
+ * Enoki authentication hook
+ *
+ * Provides Google OAuth login/logout, zkLogin state, and unified signer interface
+ */
+export function useEnokiAuth() {
+  const enokiFlow = useEnokiFlow();
+  const { address } = useZkLogin();
+
+  const login = async () => {
+    const protocol = window.location.protocol;
+    const host = window.location.host;
+    const redirectUrl = `${protocol}//${host}/auth`;
+
+    const authUrl = await enokiFlow.createAuthorizationURL({
+      provider: 'google',
+      clientId: enokiConfig.VITE_GOOGLE_CLIENT_ID,
+      redirectUrl,
+    });
+
+    window.location.href = authUrl;
+  };
+
+  const logout = () => {
+    enokiFlow.logout();
+  };
+
+  const getSigner = () => {
+    if (!address || !enokiFlow) return null;
+
+    return {
+      address,
+      signAndExecuteTransaction: async (args: any) => {
+        const result = await enokiFlow.signAndExecuteTransaction({
+          transaction: args.transaction,
+        });
+        return { digest: result.digest };
+      },
+    };
+  };
+
+  return {
+    isEnokiConnected: !!address,
+    enokiAddress: address,
+    login,
+    logout,
+    getSigner,
+  };
+}