@blu1606/create-walrus-app 1.0.0 → 2.1.0

package/presets/react-mysten-gallery/src/lib/walrus/client.ts

@@ -0,0 +1,87 @@
+import { walrus, WalrusClient } from '@mysten/walrus';
+import { getFullnodeUrl, SuiClient } from '@mysten/sui/client';
+import { loadEnv } from '../../utils/env.js';
+
+// Types
+export type WalrusNetwork = 'testnet' | 'mainnet';
+
+export interface MystenWalrusConfig {
+  network: WalrusNetwork;
+  publisherUrl?: string;
+  aggregatorUrl?: string;
+  suiRpcUrl?: string;
+}
+
+type WalrusExtendedClient = SuiClient & { walrus: WalrusClient };
+
+// Network Configurations
+const NETWORK_CONFIGS: Record<WalrusNetwork, MystenWalrusConfig> = {
+  testnet: {
+    network: 'testnet',
+    publisherUrl: 'https://publisher.walrus-testnet.walrus.space',
+    aggregatorUrl: 'https://aggregator.walrus-testnet.walrus.space',
+    suiRpcUrl: 'https://fullnode.testnet.sui.io:443',
+  },
+  mainnet: {
+    network: 'mainnet',
+    publisherUrl: 'https://publisher.walrus.space',
+    aggregatorUrl: 'https://aggregator.walrus.space',
+    suiRpcUrl: 'https://fullnode.mainnet.sui.io:443',
+  },
+};
+
+function getNetworkConfig(network: WalrusNetwork): MystenWalrusConfig {
+  return NETWORK_CONFIGS[network];
+}
+
+// Client Management
+let walrusClient: WalrusExtendedClient | null = null;
+
+export function getWalrusClient(): WalrusExtendedClient {
+  if (walrusClient) {
+    return walrusClient;
+  }
+
+  const env = loadEnv();
+
+  // Validate network value before casting
+  const allowedNetworks: WalrusNetwork[] = ['testnet', 'mainnet'];
+  if (!allowedNetworks.includes(env.walrusNetwork as WalrusNetwork)) {
+    throw new Error(
+      `Invalid WALRUS_NETWORK: ${env.walrusNetwork}. Must be one of: ${allowedNetworks.join(', ')}`
+    );
+  }
+  const network = env.walrusNetwork as WalrusNetwork;
+  const config = getNetworkConfig(network);
+
+  // Use SuiClient (required for Walrus SDK and CoinWithBalance intent)
+  const suiClient = new SuiClient({
+    url:
+      env.suiRpc ||
+      config.suiRpcUrl ||
+      getFullnodeUrl(network === 'testnet' ? 'testnet' : 'mainnet'),
+  });
+
+  // Extend the client with Walrus capabilities and upload relay
+  walrusClient = suiClient.$extend(
+    walrus({
+      network: network, // REQUIRED: Walrus SDK needs to know which network
+      // Use CDN for WASM - more reliable than bundler resolution
+      wasmUrl: 'https://unpkg.com/@mysten/walrus-wasm@latest/web/walrus_wasm_bg.wasm',
+      uploadRelay: {
+        host:
+          env.walrusPublisher ||
+          config.publisherUrl ||
+          `https://upload-relay.${network}.walrus.space`,
+        sendTip: null, // Skip tip config fetch to avoid CORS issues in development
+      },
+      ...(env.walrusAggregator && { aggregatorUrl: env.walrusAggregator }),
+    })
+  );
+
+  return walrusClient;
+}
+
+export function resetWalrusClient(): void {
+  walrusClient = null;
+}

package/presets/react-mysten-gallery/src/lib/walrus/index.ts

@@ -0,0 +1,4 @@
+// Walrus library exports
+export * from './types.js';
+export * from './adapter.js';
+export * from './client.js';

package/presets/react-mysten-gallery/src/lib/walrus/types.ts

@@ -0,0 +1,101 @@
+/**
+ * Universal storage adapter interface for Walrus
+ *
+ * This interface abstracts SDK-specific implementations,
+ * allowing use case layers to work with any Walrus SDK.
+ */
+
+import type { SuiClient } from '@mysten/sui/client';
+import type { Transaction } from '@mysten/sui/transactions';
+
+export interface BlobMetadata {
+  blobId: string;
+  size: number;
+  contentType?: string;
+  createdAt: number;
+  expiresAt?: number;
+  /** Original filename with extension */
+  fileName?: string;
+  /** All tags from WalrusFile */
+  tags?: Record<string, string>;
+}
+
+export interface SignAndExecuteTransactionArgs {
+  transaction: Transaction;
+}
+
+export interface SignAndExecuteTransactionResult {
+  digest: string;
+  effects?: unknown;
+}
+
+export interface UploadOptions {
+  /** Number of epochs to store (Walrus-specific) */
+  epochs?: number;
+  /** MIME type of the content */
+  contentType?: string;
+  /** Sui client with Walrus extension (from useSuiClient hook) */
+  client?: SuiClient;
+  /** Wallet signer for authenticated uploads with address and transaction signing */
+  signer?: {
+    address: string;
+    signAndExecuteTransaction: (args: SignAndExecuteTransactionArgs) => Promise<SignAndExecuteTransactionResult>;
+  };
+}
+
+export interface DownloadOptions {
+  /** Byte range (for large files) */
+  range?: { start: number; end: number };
+  /** Output format - auto-detects if not specified */
+  format?: 'bytes' | 'text' | 'json';
+}
+
+export interface StorageAdapter {
+  /**
+   * Upload data to Walrus storage
+   * @param data - File or raw bytes to upload
+   * @param options - Upload configuration
+   * @returns Blob ID (permanent reference)
+   */
+  upload(data: File | Uint8Array, options?: UploadOptions): Promise<string>;
+
+  /**
+   * Download blob data by ID
+   * @param blobId - Unique blob identifier
+   * @param options - Download configuration
+   * @returns Blob data in requested format (Uint8Array, string, or JSON)
+   */
+  download(blobId: string, options?: DownloadOptions): Promise<Uint8Array | string | unknown>;
+
+  /**
+   * Get blob metadata without downloading content
+   * @param blobId - Unique blob identifier
+   * @returns Metadata object
+   */
+  getMetadata(blobId: string): Promise<BlobMetadata>;
+
+  /**
+   * Check if blob exists
+   * @param blobId - Unique blob identifier
+   * @returns True if blob is accessible
+   */
+  exists(blobId: string): Promise<boolean>;
+}
+
+// Gallery-specific types
+
+export interface GalleryItem {
+  blobId: string;
+  name: string;
+  size: number;
+  contentType: string;
+  uploadedAt: number;
+  /** Preview URL for displaying images/media - created from blob data */
+  previewUrl?: string;
+}
+
+export interface GalleryIndex {
+  version: '1.0';
+  items: GalleryItem[];
+  lastModified: number;
+}

package/{templates/react → presets/react-mysten-gallery}/src/main.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import { QueryProvider } from './providers/QueryProvider.js';
 import { WalletProvider } from './providers/WalletProvider.js';
 import App from './App.js';
-import './dapp-kit.css';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

package/{templates/react → presets/react-mysten-gallery}/src/providers/WalletProvider.tsx

@@ -3,7 +3,8 @@ import {
   SuiClientProvider,
   WalletProvider as SuiWalletProvider,
 } from '@mysten/dapp-kit';
-import { getFullnodeUrl } from '@mysten/sui/client';
+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';
@@ -29,6 +30,20 @@ export function WalletProvider({ children }: { children: ReactNode }) {
       <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>

package/{templates/base → presets/react-mysten-gallery}/src/utils/env.ts

@@ -1,41 +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');
-  }
-}
+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/{templates/gallery → presets/react-mysten-gallery}/src/utils/index-manager.ts

@@ -1,4 +1,4 @@
-import type { GalleryIndex, GalleryItem } from '../types/gallery.js';
+import type { GalleryIndex, GalleryItem } from '../lib/walrus/types.js';
 
 const INDEX_KEY = 'gallery-index';
 
@@ -34,4 +34,4 @@ export function removeItem(blobId: string): void {
   const index = loadIndex();
   index.items = index.items.filter((item) => item.blobId !== blobId);
   saveIndex(index);
-}
+}

package/presets/react-mysten-gallery/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-gallery/src/utils/preview-generator.ts

@@ -0,0 +1,134 @@
+import { storageAdapter } from '../lib/walrus/adapter.js';
+import { loadEnv } from './env.js';
+
+// Walrus aggregator URLs for direct HTTP access
+const AGGREGATOR_URLS = {
+  testnet: 'https://aggregator.walrus-testnet.walrus.space',
+  mainnet: 'https://aggregator.walrus.space',
+};
+
+/**
+ * Get the aggregator URL based on current network configuration
+ */
+function getAggregatorUrl(): string {
+  const env = loadEnv();
+  // Use environment override if available
+  if (env.walrusAggregator) {
+    return env.walrusAggregator;
+  }
+  // Default to testnet
+  const network = env.walrusNetwork === 'mainnet' ? 'mainnet' : 'testnet';
+  return AGGREGATOR_URLS[network];
+}
+
+/**
+ * Generate a preview URL by fetching directly from Walrus aggregator HTTP API
+ * This is faster than using the SDK as it makes a direct HTTP request
+ *
+ * @param blobId - The Walrus blob ID
+ * @param contentType - MIME type of the content (e.g., 'image/jpeg')
+ * @returns Object URL that can be used in <img> src
+ */
+async function generatePreviewUrlDirect(
+  blobId: string,
+  contentType: string
+): Promise<string> {
+  const aggregatorUrl = getAggregatorUrl();
+
+  // Fetch blob data directly from aggregator
+  // Using the /v1/blobs/{blobId} endpoint which returns the full blob
+  const response = await fetch(`${aggregatorUrl}/v1/blobs/${blobId}`, {
+    headers: {
+      'Accept': 'application/octet-stream',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+  }
+
+  // Get blob data and create object URL
+  const blobData = await response.blob();
+
+  // Create a new blob with correct content type
+  const typedBlob = new Blob([blobData], { type: contentType });
+  const objectUrl = URL.createObjectURL(typedBlob);
+
+  return objectUrl;
+}
+
+/**
+ * Fallback: Generate preview using SDK download method
+ */
+async function generatePreviewUrlFallback(
+  blobId: string,
+  contentType: string
+): Promise<string> {
+  // Download blob data as bytes via SDK
+  const bytes = await storageAdapter.download(blobId);
+
+  if (!(bytes instanceof Uint8Array)) {
+    throw new Error('Expected Uint8Array from download');
+  }
+
+  // Create a Blob from the bytes with correct content type
+  const buffer = new ArrayBuffer(bytes.length);
+  const view = new Uint8Array(buffer);
+  view.set(bytes);
+  const blob = new Blob([buffer], { type: contentType });
+
+  // Create and return object URL
+  const objectUrl = URL.createObjectURL(blob);
+
+  return objectUrl;
+}
+
+/**
+ * Generate a preview URL from blob ID
+ * Tries direct HTTP fetch first (faster), falls back to SDK if it fails
+ *
+ * @param blobId - The Walrus blob ID
+ * @param contentType - MIME type of the content (e.g., 'image/jpeg')
+ * @returns Object URL that can be used in <img> src
+ */
+export async function generatePreviewUrl(
+  blobId: string,
+  contentType: string
+): Promise<string> {
+  try {
+    // Try direct HTTP fetch first (faster)
+    console.log(`[Preview] Attempting direct fetch for ${blobId.slice(0, 16)}...`);
+    const url = await generatePreviewUrlDirect(blobId, contentType);
+    console.log(`[Preview] Direct fetch successful`);
+    return url;
+  } catch (directError) {
+    console.warn(`[Preview] Direct fetch failed, falling back to SDK:`, directError);
+
+    try {
+      // Fallback to SDK method
+      const url = await generatePreviewUrlFallback(blobId, contentType);
+      console.log(`[Preview] SDK fallback successful`);
+      return url;
+    } catch (fallbackError) {
+      console.error(`[Preview] Both methods failed for ${blobId}:`, fallbackError);
+      throw fallbackError;
+    }
+  }
+}
+
+/**
+ * Check if content type is an image that can be displayed
+ */
+export function isImageType(contentType: string): boolean {
+  return contentType.startsWith('image/');
+}
+
+/**
+ * Revoke object URL to free memory
+ * Call this when the component unmounts or the URL is no longer needed
+ */
+export function revokePreviewUrl(url: string): void {
+  if (url.startsWith('blob:')) {
+    URL.revokeObjectURL(url);
+  }
+}

package/{templates/react → presets/react-mysten-gallery}/tsconfig.json

@@ -2,26 +2,38 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "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/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/presets/react-mysten-simple-upload/.env.example

@@ -0,0 +1,31 @@
+## ==============================================
+## Walrus Application - Environment Configuration
+## ==============================================
+
+## WALRUS NETWORK SETTINGS
+## Network: testnet | mainnet | devnet
+VITE_WALRUS_NETWORK=testnet
+
+## Walrus Aggregator URL (for downloads)
+VITE_WALRUS_AGGREGATOR=https://aggregator.walrus-testnet.walrus.space
+
+## Walrus Publisher URL (for uploads)
+VITE_WALRUS_PUBLISHER=https://publisher.walrus-testnet.walrus.space
+
+## SUI BLOCKCHAIN SETTINGS
+## Sui Network: testnet | mainnet | devnet
+VITE_SUI_NETWORK=testnet
+
+## Sui RPC URL (for wallet interactions)
+VITE_SUI_RPC=https://fullnode.testnet.sui.io:443
+
+## OPTIONAL FEATURES
+## Blockberry Analytics API Key (leave empty to disable)
+VITE_BLOCKBERRY_KEY=
+
+## ==============================================
+## PREREQUISITES
+## ==============================================
+## 1. Install Sui Wallet browser extension
+## 2. Get testnet SUI from faucet: https://faucet.testnet.sui.io/
+## 3. Copy this file to .env and fill in any optional values

package/presets/react-mysten-simple-upload/.gitkeep

@@ -0,0 +1,4 @@
+# Preset: react-mysten-simple-upload
+
+Structure created based on 2025/2026 React standards.
+Populate with code from layer merging or manual upload.