@blu1606/create-walrus-app 0.1.4 → 2.0.0

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';
+

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

@@ -0,0 +1,197 @@
+import type {
+  StorageAdapter,
+  BlobMetadata,
+  UploadOptions,
+  DownloadOptions,
+} from './types.js';
+import { getWalrusClient, resetWalrusClient } from './client.js';
+import { WalrusFile, RetryableWalrusClientError } from '@mysten/walrus';
+import { getContentType } from '../../utils/mime-type.js';
+
+export class MystenStorageAdapter implements StorageAdapter {
+  async upload(
+    data: File | Uint8Array,
+    options?: UploadOptions
+  ): Promise<string> {
+    const bytes =
+      data instanceof File ? new Uint8Array(await data.arrayBuffer()) : data;
+    const fileName = data instanceof File ? data.name : 'upload.bin';
+
+    try {
+      // Check if signer and client are provided
+      if (!options?.signer) {
+        throw new Error('Wallet signer is required for upload. Please connect your wallet.');
+      }
+      if (!options?.client) {
+        throw new Error('Sui client is required for upload.');
+      }
+
+      const client = options.client;
+
+      console.log('[Upload] Starting upload flow...');
+
+      // Detect content type with fallback logic
+      const contentType = getContentType(
+        data,
+        options?.contentType
+      );
+
+      console.log(`[Upload] Detected content-type: ${contentType} for file: ${fileName}`);
+
+      // Create upload flow with full metadata (identifier + tags)
+      const flow = client.walrus.writeFilesFlow({
+        files: [
+          WalrusFile.from({
+            contents: bytes,
+            identifier: fileName, // Original filename with extension
+            tags: {
+              'content-type': contentType,
+              'original-name': fileName,
+            },
+          }),
+        ],
+      });
+
+      // Step 1: Encode the file
+      console.log('[Upload] Step 1: Encoding file...');
+      await flow.encode();
+      console.log('[Upload] Step 1: Encode complete');
+
+      // Step 2: Register the blob on-chain (requires wallet signature)
+      console.log('[Upload] Step 2: Creating register transaction...');
+      const registerTx = flow.register({
+        epochs: options?.epochs || 1,
+        owner: options.signer.address,
+        deletable: true,
+      });
+
+      // Sign and execute the register transaction (dapp-kit will handle wrapping)
+      console.log('[Upload] Step 2: Signing register transaction...');
+      const registerResult = await options.signer.signAndExecuteTransaction({
+        transaction: registerTx,
+      });
+      console.log('[Upload] Step 2: Register complete, digest:', registerResult.digest);
+
+      // Step 3: Upload the data to storage nodes
+      console.log('[Upload] Step 3: Uploading to storage nodes...');
+      await flow.upload({ digest: registerResult.digest });
+      console.log('[Upload] Step 3: Upload complete');
+
+      // Step 4: Certify the blob (requires wallet signature)
+      console.log('[Upload] Step 4: Creating certify transaction...');
+      const certifyTx = flow.certify();
+
+      // Sign and execute the certify transaction (dapp-kit will handle wrapping)
+      console.log('[Upload] Step 4: Signing certify transaction...');
+      await options.signer.signAndExecuteTransaction({
+        transaction: certifyTx,
+      });
+      console.log('[Upload] Step 4: Certify complete');
+
+      // Step 5: Get the uploaded files
+      console.log('[Upload] Step 5: Getting file list...');
+      const files = await flow.listFiles();
+
+      if (!files || files.length === 0) {
+        throw new Error('Upload completed but no files were returned');
+      }
+
+      const blobId = files[0].blobId;
+      console.log('[Upload] Success! Blob ID:', blobId);
+      return blobId;
+    } catch (error) {
+      console.error('[Upload] Error details:', error);
+      throw new Error(
+        `Upload failed: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
+    }
+  }
+
+  async download(
+    blobId: string,
+    options?: DownloadOptions
+  ): Promise<Uint8Array | string | unknown> {
+    const client = getWalrusClient();
+
+    try {
+      // Use getFiles for better API - supports future batch downloads
+      const [file] = await client.walrus.getFiles({ ids: [blobId] });
+
+      // Handle different output formats
+      switch (options?.format) {
+        case 'text':
+          return await file.text();
+        case 'json':
+          return await file.json();
+        default:
+          return await file.bytes();
+      }
+    } catch (error) {
+      // Handle retryable errors by resetting client and retrying once
+      if (error instanceof RetryableWalrusClientError) {
+        console.warn(`[Download] Retryable error detected, resetting client and retrying...`);
+        resetWalrusClient();
+
+        try {
+          const retryClient = getWalrusClient();
+          const [file] = await retryClient.walrus.getFiles({ ids: [blobId] });
+
+          switch (options?.format) {
+            case 'text':
+              return await file.text();
+            case 'json':
+              return await file.json();
+            default:
+              return await file.bytes();
+          }
+        } catch (retryError) {
+          throw new Error(
+            `Download retry failed for blob ${blobId}: ${retryError instanceof Error ? retryError.message : 'Unknown error'}`
+          );
+        }
+      }
+
+      throw new Error(
+        `Download failed for blob ${blobId}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
+    }
+  }
+
+  async getMetadata(blobId: string): Promise<BlobMetadata> {
+    const client = getWalrusClient();
+
+    try {
+      // Get metadata from Walrus
+      const metadata = await client.walrus.getBlobMetadata({ blobId });
+
+      // Get WalrusFile to extract identifier and tags
+      const [file] = await client.walrus.getFiles({ ids: [blobId] });
+      const identifier = await file.getIdentifier();
+      const tags = await file.getTags();
+
+      return {
+        blobId,
+        size: Number(metadata.metadata.V1.unencoded_length),
+        contentType: tags['content-type'] || 'application/octet-stream',
+        fileName: tags['original-name'] || identifier || `blob-${blobId.slice(0, 8)}`,
+        tags,
+        createdAt: (metadata as unknown as { createdAt?: number }).createdAt || Date.now(),
+      };
+    } catch (error) {
+      throw new Error(
+        `Failed to get metadata for blob ${blobId}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
+    }
+  }
+
+  async exists(blobId: string): Promise<boolean> {
+    try {
+      await this.getMetadata(blobId);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}
+
+export const storageAdapter = new MystenStorageAdapter();

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';