@blu1606/create-walrus-app 1.0.0 → 2.0.0

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,
   };
 }

package/presets/react-mysten-gallery/src/index.css

@@ -0,0 +1,384 @@
+/* Dapp Kit styles */
+@import '@mysten/dapp-kit/dist/index.css';
+
+/* Google Fonts Import */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap');
+
+/* Global styles */
+:root {
+  /* Pallette */
+  --walrus-bg-primary: #020617;
+  /* Deep Trench */
+  --walrus-bg-secondary: #0f172a;
+  /* Card/Section bg */
+  --walrus-surface: #1e293b;
+  /* Input, button bg */
+  --walrus-surface-hover: #334155;
+  /* Hover states */
+  --walrus-accent-cyan: #06b6d4;
+  /* Arctic Cyan - Primary Highlight */
+  --walrus-accent-blue: #4da2ff;
+  /* Sui Blue */
+  --walrus-accent-purple: #c084fc;
+  /* Secondary Accent */
+  --walrus-text-primary: #f8fafc;
+  /* Main Text */
+  --walrus-text-secondary: #94a3b8;
+  /* Muted Text */
+  --walrus-border: #334155;
+  /* Border Color */
+  --walrus-warning: #ef4444;
+  --walrus-success: #10b981;
+  --walrus-error: #ef4444;
+
+  /* Base Settings */
+  font-family: 'Inter', system-ui, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: dark;
+  color: var(--walrus-text-primary);
+  background-color: var(--walrus-bg-primary);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: var(--walrus-bg-primary);
+  color: var(--walrus-text-primary);
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+  width: 100%;
+}
+
+/* Typography Overrides */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--walrus-text-primary);
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+h2 {
+  font-size: 2.5em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+a {
+  font-weight: 500;
+  color: var(--walrus-accent-blue);
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: var(--walrus-accent-cyan);
+}
+
+/* Button Styling */
+button {
+  border-radius: 8px;
+  border: 1px solid var(--walrus-border);
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 600;
+  font-family: inherit;
+  background-color: var(--walrus-surface);
+  color: var(--walrus-text-primary);
+  cursor: pointer;
+  transition: all 0.25s;
+}
+
+button:hover:not(:disabled) {
+  border-color: var(--walrus-accent-cyan);
+  background-color: var(--walrus-surface-hover);
+  box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto var(--walrus-accent-cyan);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--walrus-bg-secondary);
+}
+
+/* Form Elements */
+input {
+  background-color: var(--walrus-surface);
+  border: 1px solid var(--walrus-border);
+  color: var(--walrus-text-primary);
+  padding: 0.6em;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 1em;
+  transition: border-color 0.2s;
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--walrus-accent-cyan);
+}
+
+/* Utilities / Components */
+.card {
+  background-color: var(--walrus-bg-secondary);
+  border: 1px solid var(--walrus-border);
+  border-radius: 12px;
+  padding: 2rem;
+  transition: all 0.2s;
+}
+
+.card:hover {
+  border-color: var(--walrus-accent-cyan);
+  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.2em 0.6em;
+  font-size: 0.85em;
+  font-weight: 500;
+  border-radius: 999px;
+  background-color: rgba(192, 132, 252, 0.15);
+  color: var(--walrus-accent-purple);
+  border: 1px solid rgba(192, 132, 252, 0.3);
+}
+
+.text-accent {
+  color: var(--walrus-accent-cyan);
+}
+
+.text-secondary {
+  color: var(--walrus-text-secondary);
+}
+
+.text-error {
+  color: var(--walrus-error);
+}
+
+.text-warning {
+  color: var(--walrus-warning);
+}
+
+/* App Specific Containers */
+.simple-upload-app {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Overriding section to look like cards */
+section {
+  margin: 0;
+  padding: 2rem;
+  border: 1px solid var(--walrus-border);
+  background-color: var(--walrus-bg-secondary);
+  border-radius: 12px;
+  transition: border-color 0.2s;
+}
+
+section:hover {
+  border-color: var(--walrus-surface-hover);
+}
+
+section h3 {
+  margin-top: 0;
+  color: var(--walrus-accent-cyan);
+}
+
+.upload-form,
+.file-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: stretch;
+}
+
+.file-info {
+  background: var(--walrus-bg-primary);
+  padding: 1rem;
+  border-radius: 8px;
+  border: 1px dashed var(--walrus-border);
+  text-align: left;
+}
+
+.error {
+  color: var(--walrus-error);
+  background: rgba(239, 68, 68, 0.1);
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+
+.warning {
+  color: var(--walrus-warning);
+}
+
+/* Code/Pre blocks */
+pre {
+  background: var(--walrus-bg-primary) !important;
+  color: var(--walrus-text-primary);
+  border: 1px solid var(--walrus-border);
+  border-radius: 8px;
+  font-family: 'JetBrains Mono', monospace;
+}
+/* Gallery-specific styles */
+.gallery-app {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.file-card {
+  background: var(--walrus-bg-secondary);
+  border: 1px solid var(--walrus-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-card:hover {
+  border-color: var(--walrus-accent-cyan);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1);
+}
+
+/* Image Preview Styles */
+.file-card .image-preview {
+  width: 100%;
+  height: 200px;
+  margin-bottom: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--walrus-bg-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-card .image-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.file-card .image-preview .loading-placeholder,
+.file-card .image-preview .error-placeholder {
+  color: var(--walrus-text-secondary);
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 1rem;
+}
+
+.file-card .image-preview .loading-placeholder {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.file-card h4 {
+  margin: 0 0 0.75rem 0;
+  color: var(--walrus-text-primary);
+  font-size: 1.1rem;
+}
+
+.file-card p {
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+}
+
+.file-card .blob-id {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.85rem;
+  padding: 0.5rem;
+  background: var(--walrus-bg-primary);
+  border-radius: 4px;
+  margin-top: 1rem;
+}
+
+.upload-modal {
+  background: var(--walrus-bg-secondary);
+  border: 1px solid var(--walrus-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.file-input {
+  flex: 1;
+  padding: 0.75rem;
+  background: var(--walrus-surface);
+  border: 1px solid var(--walrus-border);
+  border-radius: 8px;
+  color: var(--walrus-text-primary);
+  font-family: inherit;
+}
+
+.btn-danger {
+  background: var(--walrus-error);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.btn-danger:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.text-error {
+  color: var(--walrus-error);
+  margin-top: 0.5rem;
+}

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

@@ -0,0 +1,17 @@
+// Re-export Walrus library
+export * from './lib/walrus/index.js';
+
+// Re-export features
+export { UploadModal } from './components/features/upload-modal.js';
+export { GalleryGrid } from './components/features/gallery-grid.js';
+export { FileCard } from './components/features/file-card.js';
+export { WalletConnect } from './components/features/wallet-connect.js';
+
+// Re-export hooks
+export { useUpload } from './hooks/use-upload.js';
+export { useDownload, useMetadata } from './hooks/use-download.js';
+export { useWallet } from './hooks/use-wallet.js';
+
+// Re-export layout
+export { AppLayout } from './components/layout/app-layout.js';
+