npm - @blu1606/create-walrus-app - Versions diffs - 1.0.0 → 2.1.0 - Mend

@blu1606/create-walrus-app 1.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/presets/react-mysten-simple-upload/README.md ADDED Viewed

@@ -0,0 +1,84 @@
+# {{projectName}}
+This is a Simple Upload Walrus application.
+## Features
+- Upload any file to Walrus
+- Get Blob ID after upload
+- Download file by Blob ID
+- File size display
+## Usage
+1. Click "Choose File" and select a file
+2. Click "Upload to Walrus"
+3. Copy the Blob ID from the success message
+4. Paste Blob ID in the download section
+5. Click "Download File"
+## Code Structure
+- `UploadForm.tsx` - File upload UI
+- `FilePreview.tsx` - Download UI
+- `App.tsx` - Main app layout
+## 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-simple-upload/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Walrus App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/{templates/react → presets/react-mysten-simple-upload}/package.json RENAMED Viewed

@@ -2,31 +2,34 @@
   "name": "{{projectName}}",
   "version": "0.1.0",
   "private": true,
+  "description": "Walrus application scaffolded with create-walrus-app",
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
+    "dev": "vite",
     "lint": "eslint . --ext .ts,.tsx",
-    "type-check": "tsc --noEmit"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "setup-walrus-deploy": "bash scripts/setup-walrus-deploy.sh"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@tanstack/react-query": "^5.17.0",
     "@mysten/dapp-kit": "^0.14.0",
-    "@mysten/sui": "^1.10.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",
-    "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^5.0.11",
-    "typescript": "^5.3.3",
-    "eslint": "^8.56.0",
     "@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"
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
   }
 }

package/presets/react-mysten-simple-upload/scripts/setup-walrus-deploy.sh ADDED Viewed

@@ -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/src/App.tsx ADDED Viewed

@@ -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/src/components/features/file-preview.tsx ADDED Viewed

@@ -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/{templates/simple-upload/src/components/UploadForm.tsx → presets/react-mysten-simple-upload/src/components/features/upload-form.tsx} RENAMED Viewed

@@ -1,9 +1,11 @@
 import { useState } from 'react';
-import { useUpload } from '../hooks/useStorage.js';
+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];
@@ -33,16 +35,24 @@ export function UploadForm() {
       {selectedFile && (
         <div className="file-info">
-          <p>Selected: {selectedFile.name}</p>
-          <p>Size: {(selectedFile.size / 1024).toFixed(2)} KB</p>
+          <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 || upload.isPending}
+        disabled={!selectedFile || !isConnected || upload.isPending}
       >
-        {upload.isPending ? 'Uploading...' : 'Upload to Walrus'}
+        {!isConnected
+          ? 'Connect Wallet First'
+          : upload.isPending
+            ? 'Uploading...'
+            : 'Upload to Walrus'}
       </button>
       {upload.isError && <p className="error">Error: {upload.error.message}</p>}

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

@@ -0,0 +1,21 @@
+import { ConnectButton } from '@mysten/dapp-kit';
+import { useWallet } from '../../hooks/use-wallet.js';
+export function WalletConnect() {
+  const { isConnected, address } = useWallet();
+  return (
+    <div className="wallet-connect">
+      {isConnected ? (
+        <div className="wallet-info">
+          <span>
+            Connected: {address?.slice(0, 6)}...{address?.slice(-4)}
+          </span>
+        </div>
+      ) : (
+        <p>Please connect your wallet</p>
+      )}
+      <ConnectButton />
+    </div>
+  );
+}

package/presets/react-mysten-simple-upload/src/components/layout/app-layout.tsx ADDED Viewed

@@ -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/src/hooks/use-download.ts ADDED Viewed

@@ -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,
+  });
+}