@blu1606/create-walrus-app 0.1.4 → 2.0.0

package/presets/react-mysten-gallery/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "gallery-demo",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Walrus application 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"
+  },
+  "dependencies": {
+    "@mysten/dapp-kit": "^0.14.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",
+    "@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-gallery/src/App.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { AppLayout } from './components/layout/app-layout.js';
+import { GalleryGrid } from './components/features/gallery-grid.js';
+import { UploadModal } from './components/features/upload-modal.js';
+import './index.css';
+
+function App() {
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  return (
+    <AppLayout>
+      <div className="gallery-app">
+        <h2><span className="text-accent">🖼️</span> File Gallery</h2>
+        <p className="text-secondary">Upload and manage multiple files on <span className="text-accent">Walrus</span></p>
+
+        <UploadModal onSuccess={() => setRefreshKey((k) => k + 1)} />
+        <GalleryGrid key={refreshKey} />
+      </div>
+    </AppLayout>
+  );
+}
+
+export default App;

package/presets/react-mysten-gallery/src/components/features/file-card.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react';
+import { removeItem } from '../../utils/index-manager.js';
+import type { GalleryItem } from '../../lib/walrus/types.js';
+import {
+  generatePreviewUrl,
+  isImageType,
+  revokePreviewUrl,
+} from '../../utils/preview-generator.js';
+
+interface FileCardProps {
+  item: GalleryItem;
+  onDelete: () => void;
+}
+
+export function FileCard({ item, onDelete }: FileCardProps) {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(
+    item.previewUrl || null
+  );
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false);
+
+  // Load preview if it's an image and we don't have a preview URL yet
+  useEffect(() => {
+    if (!previewUrl && isImageType(item.contentType)) {
+      setIsLoadingPreview(true);
+      generatePreviewUrl(item.blobId, item.contentType)
+        .then((url) => setPreviewUrl(url))
+        .catch((error) => {
+          console.error('Failed to load preview:', error);
+        })
+        .finally(() => setIsLoadingPreview(false));
+    }
+
+    // Cleanup: revoke object URL when component unmounts
+    return () => {
+      if (previewUrl) {
+        revokePreviewUrl(previewUrl);
+      }
+    };
+  }, [item.blobId, item.contentType, previewUrl]);
+
+  const handleDelete = () => {
+    if (confirm(`Delete ${item.name}?`)) {
+      // Revoke preview URL before deleting
+      if (previewUrl) {
+        revokePreviewUrl(previewUrl);
+      }
+      removeItem(item.blobId);
+      onDelete();
+    }
+  };
+
+  const 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 Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  };
+
+  const formatDate = (timestamp: number): string => {
+    return new Date(timestamp).toLocaleString();
+  };
+
+  return (
+    <div className="file-card">
+      {/* Image Preview */}
+      {isImageType(item.contentType) && (
+        <div className="image-preview">
+          {isLoadingPreview ? (
+            <div className="loading-placeholder">Loading preview...</div>
+          ) : previewUrl ? (
+            <img src={previewUrl} alt={item.name} />
+          ) : (
+            <div className="error-placeholder">Preview not available</div>
+          )}
+        </div>
+      )}
+
+      {/* File Info */}
+      <h4>{item.name}</h4>
+      <p className="text-secondary">Size: {formatBytes(item.size)}</p>
+      <p className="text-secondary">Uploaded: {formatDate(item.uploadedAt)}</p>
+      <p className="blob-id text-accent">{item.blobId.slice(0, 16)}...</p>
+      <button onClick={handleDelete} className="btn-danger">
+        Delete
+      </button>
+    </div>
+  );
+}

package/{templates/gallery/src/components/GalleryGrid.tsx → presets/react-mysten-gallery/src/components/features/gallery-grid.tsx}

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
-import { FileCard } from './FileCard.js';
-import { loadIndex } from '../utils/index-manager.js';
-import type { GalleryItem } from '../types/gallery.js';
+import { FileCard } from './file-card.js';
+import { loadIndex } from '../../utils/index-manager.js';
+import type { GalleryItem } from '../../lib/walrus/types.js';
 
 export function GalleryGrid() {
   const [items, setItems] = useState<GalleryItem[]>([]);
@@ -19,7 +19,7 @@ export function GalleryGrid() {
   return (
     <div className="gallery-grid">
       {items.length === 0 ? (
-        <p>No files yet. Upload your first file!</p>
+        <p className="text-secondary">No files yet. Upload your first file!</p>
       ) : (
         items.map((item) => (
           <FileCard key={item.blobId} item={item} onDelete={refreshGallery} />
@@ -27,4 +27,4 @@ export function GalleryGrid() {
       )}
     </div>
   );
-}
+}

package/presets/react-mysten-gallery/src/components/features/upload-modal.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { useUpload } from '../../hooks/use-upload.js';
+import { addItem } from '../../utils/index-manager.js';
+import { generatePreviewUrl, isImageType } from '../../utils/preview-generator.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) => {
+          // Generate preview URL for images
+          let previewUrl: string | undefined;
+          if (isImageType(file.type)) {
+            try {
+              previewUrl = await generatePreviewUrl(data.blobId, file.type);
+              console.log('Preview URL generated:', previewUrl);
+            } catch (error) {
+              console.error('Failed to generate preview URL:', error);
+              // Continue without preview - FileCard will try to load it later
+            }
+          }
+
+          // Add item to gallery with preview URL
+          addItem({
+            blobId: data.blobId,
+            name: file.name,
+            size: file.size,
+            contentType: file.type,
+            uploadedAt: Date.now(),
+            previewUrl,
+          });
+
+          setFile(null);
+          onSuccess();
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="upload-modal">
+      <input
+        type="file"
+        onChange={(e) => setFile(e.target.files?.[0] || null)}
+        className="file-input"
+      />
+      <button
+        onClick={handleUpload}
+        disabled={!file || upload.isPending}
+        className="btn-primary"
+      >
+        {upload.isPending ? 'Uploading...' : 'Add to Gallery'}
+      </button>
+      {upload.error && (
+        <p className="text-error">Error: {upload.error.message}</p>
+      )}
+    </div>
+  );
+}

package/{templates/react/src/components/WalletConnect.tsx → presets/react-mysten-gallery/src/components/features/wallet-connect.tsx}

@@ -1,5 +1,5 @@
 import { ConnectButton } from '@mysten/dapp-kit';
-import { useWallet } from '../hooks/useWallet.js';
+import { useWallet } from '../../hooks/use-wallet.js';
 
 export function WalletConnect() {
   const { isConnected, address } = useWallet();

package/presets/react-mysten-gallery/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/{templates/react/src/hooks/useStorage.ts → presets/react-mysten-gallery/src/hooks/use-download.ts}

@@ -1,21 +1,5 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { storageAdapter } from '../index.js';
-import type { UploadOptions } from '../adapters/storage.js';
-
-export function useUpload() {
-  return useMutation({
-    mutationFn: async ({
-      file,
-      options,
-    }: {
-      file: File;
-      options?: UploadOptions;
-    }) => {
-      const blobId = await storageAdapter.upload(file, options);
-      return { blobId, file };
-    },
-  });
-}
+import { useQuery } from '@tanstack/react-query';
+import { storageAdapter } from '../lib/walrus/index.js';
 
 export function useDownload(blobId: string | null) {
   return useQuery({

package/presets/react-mysten-gallery/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/{templates/react/src/hooks/useWallet.ts → presets/react-mysten-gallery/src/hooks/use-wallet.ts}

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