@blu1606/create-walrus-app 1.0.0 → 2.0.0

package/presets/react-mysten-simple-upload/src/main.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryProvider } from './providers/QueryProvider.js';
+import { WalletProvider } from './providers/WalletProvider.js';
+import App from './App.js';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryProvider>
+      <WalletProvider>
+        <App />
+      </WalletProvider>
+    </QueryProvider>
+  </React.StrictMode>
+);

package/presets/react-mysten-simple-upload/src/providers/QueryProvider.tsx

@@ -0,0 +1,18 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 5 * 60 * 1000,
+    },
+  },
+});
+
+export function QueryProvider({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

package/presets/react-mysten-simple-upload/src/providers/WalletProvider.tsx

@@ -0,0 +1,52 @@
+import {
+  createNetworkConfig,
+  SuiClientProvider,
+  WalletProvider as SuiWalletProvider,
+} from '@mysten/dapp-kit';
+import { getFullnodeUrl, SuiClient } from '@mysten/sui/client';
+import { walrus } from '@mysten/walrus';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { loadEnv } from '../utils/env.js';
+
+const env = loadEnv();
+
+const validatedNetwork =
+  env.suiNetwork === 'mainnet' || env.suiNetwork === 'testnet'
+    ? env.suiNetwork
+    : 'testnet';
+
+const { networkConfig } = createNetworkConfig({
+  [validatedNetwork]: {
+    url: env.suiRpc || getFullnodeUrl(validatedNetwork),
+  },
+});
+
+const walletQueryClient = new QueryClient();
+
+export function WalletProvider({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={walletQueryClient}>
+      <SuiClientProvider
+        networks={networkConfig}
+        defaultNetwork={validatedNetwork}
+        createClient={(network: string | number, config: { readonly url: string }) => {
+          // Create SuiClient with Walrus extension
+          const client = new SuiClient({
+            url: config.url,
+          }).$extend(
+            walrus({
+              network: network as 'testnet' | 'mainnet',
+              wasmUrl: 'https://unpkg.com/@mysten/walrus-wasm@latest/web/walrus_wasm_bg.wasm',
+              // No uploadRelay - upload directly to storage nodes
+              // This avoids tip payment requirements but uses ~2200 requests
+            })
+          );
+          return client;
+        }}
+      >
+        <SuiWalletProvider>{children}</SuiWalletProvider>
+      </SuiClientProvider>
+    </QueryClientProvider>
+  );
+}

package/presets/react-mysten-simple-upload/src/utils/env.ts

@@ -0,0 +1,41 @@
+export interface EnvConfig {
+  walrusNetwork: string;
+  walrusAggregator: string;
+  walrusPublisher: string;
+  suiNetwork: string;
+  suiRpc: string;
+  blockberryKey?: string;
+}
+
+export function loadEnv(): EnvConfig {
+  const getEnv = (key: string, required = true): string => {
+    const value = import.meta.env[key];
+    if (required && !value) {
+      throw new Error(`Missing required environment variable: ${key}`);
+    }
+    return value || '';
+  };
+
+  return {
+    walrusNetwork: getEnv('VITE_WALRUS_NETWORK'),
+    walrusAggregator: getEnv('VITE_WALRUS_AGGREGATOR'),
+    walrusPublisher: getEnv('VITE_WALRUS_PUBLISHER'),
+    suiNetwork: getEnv('VITE_SUI_NETWORK'),
+    suiRpc: getEnv('VITE_SUI_RPC'),
+    blockberryKey: getEnv('VITE_BLOCKBERRY_KEY', false),
+  };
+}
+
+export function validateEnv(config: EnvConfig): void {
+  if (!['testnet', 'mainnet', 'devnet'].includes(config.walrusNetwork)) {
+    throw new Error(`Invalid WALRUS_NETWORK: ${config.walrusNetwork}`);
+  }
+
+  if (!config.walrusAggregator.startsWith('http')) {
+    throw new Error('WALRUS_AGGREGATOR must be a valid HTTP URL');
+  }
+
+  if (!config.walrusPublisher.startsWith('http')) {
+    throw new Error('WALRUS_PUBLISHER must be a valid HTTP URL');
+  }
+}

package/presets/react-mysten-simple-upload/src/utils/mime-type.ts

@@ -0,0 +1,97 @@
+/**
+ * MIME type detection from file extensions
+ * Handles common file types that browsers may not auto-detect
+ */
+
+const MIME_TYPES: Record<string, string> = {
+  // Text formats
+  '.txt': 'text/plain',
+  '.md': 'text/markdown',
+  '.markdown': 'text/markdown',
+  '.csv': 'text/csv',
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'text/javascript',
+  '.ts': 'text/typescript',
+  '.json': 'application/json',
+  '.xml': 'application/xml',
+
+  // Images
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.png': 'image/png',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.ico': 'image/x-icon',
+
+  // Documents
+  '.pdf': 'application/pdf',
+  '.doc': 'application/msword',
+  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  '.xls': 'application/vnd.ms-excel',
+  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  '.ppt': 'application/vnd.ms-powerpoint',
+  '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+
+  // Archives
+  '.zip': 'application/zip',
+  '.rar': 'application/x-rar-compressed',
+  '.tar': 'application/x-tar',
+  '.gz': 'application/gzip',
+  '.7z': 'application/x-7z-compressed',
+
+  // Audio
+  '.mp3': 'audio/mpeg',
+  '.wav': 'audio/wav',
+  '.ogg': 'audio/ogg',
+  '.m4a': 'audio/mp4',
+
+  // Video
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm',
+  '.avi': 'video/x-msvideo',
+  '.mov': 'video/quicktime',
+};
+
+/**
+ * Detect MIME type from filename
+ * @param fileName - File name with extension
+ * @returns MIME type or null if not found
+ */
+export function getMimeTypeFromFileName(fileName: string): string | null {
+  const extension = fileName.toLowerCase().match(/\.[^.]+$/)?.[0];
+  if (!extension) return null;
+
+  return MIME_TYPES[extension] || null;
+}
+
+/**
+ * Get content type with fallback logic
+ * Priority: explicit contentType > File.type > extension detection > fallback
+ * @param file - File object, Uint8Array, or filename
+ * @param explicitType - Explicitly provided content type
+ * @returns Best-match content type
+ */
+export function getContentType(
+  file: File | Uint8Array | string,
+  explicitType?: string
+): string {
+  // Priority 1: Explicit content type
+  if (explicitType) return explicitType;
+
+  // Priority 2: File.type (if not empty and not generic)
+  if (file instanceof File && file.type && file.type !== 'application/octet-stream') {
+    return file.type;
+  }
+
+  // Priority 3: Detect from filename extension
+  const fileName = typeof file === 'string' ? file : file instanceof File ? file.name : '';
+  if (fileName) {
+    const detectedType = getMimeTypeFromFileName(fileName);
+    if (detectedType) return detectedType;
+  }
+
+  // Fallback: Generic binary
+  return 'application/octet-stream';
+}

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

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": [
+      "vite/client"
+    ],
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/presets/react-mysten-simple-upload/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/presets/react-mysten-simple-upload/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,
+  },
+  build: {
+    target: 'esnext',
+    outDir: 'dist',
+  },
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
+});

package/templates/base/README.md

@@ -1,54 +0,0 @@
-# {{projectName}}
-
-This is a Walrus application generated by `create-walrus-app`.
-
-## What's Included
-
-### Adapter Interface
-
-- `src/adapters/storage.ts` - Universal SDK-agnostic interface
-- Allows use case code to work with any Walrus SDK
-
-### Type Definitions
-
-- `src/types/walrus.ts` - Walrus-specific types
-- `src/types/index.ts` - Common utility types
-
-### Utilities
-
-- `src/utils/env.ts` - Environment validation
-- `src/utils/format.ts` - Formatting helpers
-
-### Configuration
-
-- `.env.example` - Environment template
-- `tsconfig.json` - TypeScript strict mode config
-- `package.json` - Base dependencies
-
-## Layer Composition
-
-This base layer is **always included** and combined with:
-
-1. **SDK Layer** (e.g., `sdk-mysten/`) - Implements `StorageAdapter`
-2. **Framework Layer** (e.g., `react/`) - UI framework setup
-3. **Use Case Layer** (e.g., `simple-upload/`) - Application logic
-
-```
-Base + SDK + Framework + UseCase = Your App
-```
-
-## Environment Setup
-
-1. Copy `.env.example` to `.env`
-2. Fill in required values:
-   - Walrus network URLs
-   - Sui RPC endpoint
-3. Optional: Add Blockberry API key
-
-## Next Steps
-
-This base layer is completed by:
-
-- **Phase 4**: SDK implementation
-- **Phase 5**: Framework setup
-- **Phase 6**: Use case logic

package/templates/base/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "{{projectName}}",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "echo 'Override by framework layer'",
-    "build": "echo 'Override by framework layer'",
-    "preview": "echo 'Override by framework layer'",
-    "lint": "eslint . --ext .ts,.tsx",
-    "type-check": "tsc --noEmit"
-  },
-  "devDependencies": {
-    "typescript": "^5.3.3",
-    "eslint": "^8.56.0",
-    "@typescript-eslint/parser": "^6.19.1",
-    "@typescript-eslint/eslint-plugin": "^6.19.1"
-  }
-}

package/templates/base/src/types/index.ts

@@ -1,9 +0,0 @@
-export * from './walrus.js';
-
-export interface Result<T, E = Error> {
-  success: boolean;
-  data?: T;
-  error?: E;
-}
-
-export type AsyncResult<T, E = Error> = Promise<Result<T, E>>;

package/templates/base/src/types/walrus.ts

@@ -1,22 +0,0 @@
-export type WalrusNetwork = 'testnet' | 'mainnet' | 'devnet';
-
-export interface WalrusConfig {
-  network: WalrusNetwork;
-  publisherUrl: string;
-  aggregatorUrl: string;
-  suiRpcUrl: string;
-}
-
-export interface BlobInfo {
-  blobId: string;
-  name?: string;
-  size: number;
-  contentType?: string;
-  uploadedAt: number;
-}
-
-export interface StorageStats {
-  totalBlobs: number;
-  totalSize: number;
-  usedEpochs: number;
-}

package/templates/base/src/utils/format.ts

@@ -1,29 +0,0 @@
-/**
- * Format bytes to human-readable size
- */
-export function 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 `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-}
-
-/**
- * Format blob ID for display (truncate middle)
- */
-export function formatBlobId(blobId: string, length = 12): string {
-  if (blobId.length <= length) return blobId;
-
-  const part = Math.floor((length - 3) / 2);
-  return `${blobId.slice(0, part)}...${blobId.slice(-part)}`;
-}
-
-/**
- * Format timestamp to locale string
- */
-export function formatDate(timestamp: number): string {
-  return new Date(timestamp).toLocaleString();
-}

package/templates/base/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "allowImportingTsExtensions": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "types": ["vite/client"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

package/templates/gallery/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "{{projectName}}",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {}
-}

package/templates/gallery/src/App.tsx

@@ -1,21 +0,0 @@
-import { useState } from 'react';
-import { Layout } from './components/Layout.js';
-import { GalleryGrid } from './components/GalleryGrid.js';
-import { UploadModal } from './components/UploadModal.js';
-import './styles.css';
-
-function App() {
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  return (
-    <Layout>
-      <div className="gallery-app">
-        <h2>🖼️ File Gallery</h2>
-        <UploadModal onSuccess={() => setRefreshKey((k) => k + 1)} />
-        <GalleryGrid key={refreshKey} />
-      </div>
-    </Layout>
-  );
-}
-
-export default App;

package/templates/gallery/src/components/FileCard.tsx

@@ -1,27 +0,0 @@
-import { formatBytes, formatDate } from '../utils/format.js';
-import { removeItem } from '../utils/index-manager.js';
-import type { GalleryItem } from '../types/gallery.js';
-
-interface FileCardProps {
-  item: GalleryItem;
-  onDelete: () => void;
-}
-
-export function FileCard({ item, onDelete }: FileCardProps) {
-  const handleDelete = () => {
-    if (confirm(`Delete ${item.name}?`)) {
-      removeItem(item.blobId);
-      onDelete();
-    }
-  };
-
-  return (
-    <div className="file-card">
-      <h4>{item.name}</h4>
-      <p>Size: {formatBytes(item.size)}</p>
-      <p>Uploaded: {formatDate(item.uploadedAt)}</p>
-      <p className="blob-id">Blob ID: {item.blobId.slice(0, 12)}...</p>
-      <button onClick={handleDelete}>Delete</button>
-    </div>
-  );
-}

package/templates/gallery/src/components/UploadModal.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import { useUpload } from '../hooks/useStorage.js';
-import { addItem } from '../utils/index-manager.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) => {
-          addItem({
-            blobId: data.blobId,
-            name: file.name,
-            size: file.size,
-            contentType: file.type,
-            uploadedAt: Date.now(),
-          });
-          setFile(null);
-          onSuccess();
-        },
-      }
-    );
-  };
-
-  return (
-    <div className="upload-modal">
-      <input
-        type="file"
-        onChange={(e) => setFile(e.target.files?.[0] || null)}
-      />
-      <button onClick={handleUpload} disabled={!file || upload.isPending}>
-        {upload.isPending ? 'Uploading...' : 'Add to Gallery'}
-      </button>
-    </div>
-  );
-}

package/templates/gallery/src/styles.css

@@ -1,58 +0,0 @@
-.gallery-app {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.upload-modal {
-  margin: 2rem 0;
-  padding: 1.5rem;
-  border: 1px solid #333;
-  border-radius: 8px;
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-}
-
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin: 2rem 0;
-}
-
-.file-card {
-  padding: 1.5rem;
-  border: 1px solid #333;
-  border-radius: 8px;
-  background: #1a1a1a;
-}
-
-.file-card h4 {
-  margin: 0 0 1rem 0;
-  color: #fff;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-card p {
-  margin: 0.5rem 0;
-  font-size: 0.9rem;
-  color: #aaa;
-}
-
-.file-card .blob-id {
-  font-family: monospace;
-  font-size: 0.8rem;
-  color: #888;
-}
-
-.file-card button {
-  margin-top: 1rem;
-  width: 100%;
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/templates/gallery/src/types/gallery.ts

@@ -1,13 +0,0 @@
-export interface GalleryItem {
-  blobId: string;
-  name: string;
-  size: number;
-  contentType: string;
-  uploadedAt: number;
-}
-
-export interface GalleryIndex {
-  version: '1.0';
-  items: GalleryItem[];
-  lastModified: number;
-}

package/templates/react/.eslintrc.json

@@ -1,26 +0,0 @@
-{
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "plugins": ["@typescript-eslint", "react", "react-hooks"],
-  "rules": {
-    "no-console": "warn",
-    "react/react-in-jsx-scope": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}