@blu1606/create-walrus-app 1.0.0 → 2.0.0

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.

package/presets/react-mysten-simple-upload/index.html

@@ -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

@@ -2,31 +2,33 @@
   "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",
+    "preview": "vite preview",
     "type-check": "tsc --noEmit"
   },
   "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/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/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/{templates/simple-upload/src/components/UploadForm.tsx → presets/react-mysten-simple-upload/src/components/features/upload-form.tsx}

@@ -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

@@ -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

@@ -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

@@ -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/src/hooks/use-upload.ts

@@ -0,0 +1,49 @@
+import { useMutation } from '@tanstack/react-query';
+import { storageAdapter } from '../lib/walrus/index.js';
+import type { UploadOptions, SignAndExecuteTransactionArgs } from '../lib/walrus/types.js';
+import { useCurrentAccount, useSignAndExecuteTransaction, useSuiClient } from '@mysten/dapp-kit';
+
+export function useUpload() {
+  const currentAccount = useCurrentAccount();
+  const { mutate: signAndExecute } = useSignAndExecuteTransaction();
+  const suiClient = useSuiClient();
+
+  return useMutation({
+    mutationFn: async ({
+      file,
+      options,
+    }: {
+      file: File;
+      options?: UploadOptions;
+    }) => {
+      if (!currentAccount) {
+        throw new Error('Wallet not connected. Please connect your wallet to upload files.');
+      }
+
+      // Wrap signAndExecute to return Promise
+      const signTransaction = (args: SignAndExecuteTransactionArgs) => {
+        return new Promise<{ digest: string }>((resolve, reject) => {
+          signAndExecute(
+            {
+              transaction: args.transaction,
+            },
+            {
+              onSuccess: (result) => resolve({ digest: result.digest }),
+              onError: (error) => reject(error),
+            }
+          );
+        });
+      };
+
+      const blobId = await storageAdapter.upload(file, {
+        ...options,
+        client: suiClient,
+        signer: {
+          address: currentAccount.address,
+          signAndExecuteTransaction: signTransaction,
+        },
+      });
+      return { blobId, file };
+    },
+  });
+}

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

@@ -0,0 +1,11 @@
+import { useCurrentAccount } from '@mysten/dapp-kit';
+
+export function useWallet() {
+  const currentAccount = useCurrentAccount();
+
+  return {
+    isConnected: !!currentAccount,
+    address: currentAccount?.address,
+    account: currentAccount,
+  };
+}