@blu1606/create-walrus-app 0.1.0

package/templates/react/src/index.css

@@ -0,0 +1,50 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  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;
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

package/templates/react/src/index.ts

@@ -0,0 +1,10 @@
+// Re-export storage adapter from SDK layer for use case templates
+export { storageAdapter } from '../../sdk-mysten/src/index.js';
+
+// Re-export base adapter types
+export type {
+  StorageAdapter,
+  BlobMetadata,
+  UploadOptions,
+  DownloadOptions,
+} from '../../base/src/adapters/storage.js';

package/templates/react/src/main.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+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(
+  <React.StrictMode>
+    <QueryProvider>
+      <WalletProvider>
+        <App />
+      </WalletProvider>
+    </QueryProvider>
+  </React.StrictMode>
+);

package/templates/react/src/providers/QueryProvider.tsx

@@ -0,0 +1,18 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 5 * 60 * 1000,
+    },
+  },
+});
+
+export function QueryProvider({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

package/templates/react/src/providers/WalletProvider.tsx

@@ -0,0 +1,37 @@
+import {
+  createNetworkConfig,
+  SuiClientProvider,
+  WalletProvider as SuiWalletProvider,
+} from '@mysten/dapp-kit';
+import { getFullnodeUrl } from '@mysten/sui/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { loadEnv } from '../utils/env.js';
+
+const env = loadEnv();
+
+const validatedNetwork =
+  env.suiNetwork === 'mainnet' || env.suiNetwork === 'testnet'
+    ? env.suiNetwork
+    : 'testnet';
+
+const { networkConfig } = createNetworkConfig({
+  [validatedNetwork]: {
+    url: env.suiRpc || getFullnodeUrl(validatedNetwork),
+  },
+});
+
+const walletQueryClient = new QueryClient();
+
+export function WalletProvider({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={walletQueryClient}>
+      <SuiClientProvider
+        networks={networkConfig}
+        defaultNetwork={validatedNetwork}
+      >
+        <SuiWalletProvider>{children}</SuiWalletProvider>
+      </SuiClientProvider>
+    </QueryClientProvider>
+  );
+}

package/templates/react/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/react/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/react/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,
+  },
+  build: {
+    target: 'esnext',
+    outDir: 'dist',
+  },
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
+});

package/templates/sdk-mysten/README.md

@@ -0,0 +1,65 @@
+# Mysten Walrus SDK Layer
+
+Official [Mysten Labs](https://mystenlabs.com/) SDK implementation for Walrus storage.
+
+## Features
+
+✅ **Relay Upload** - Browser-optimized uploads via relay nodes  
+✅ **Direct Download** - Fast blob retrieval  
+✅ **Metadata Queries** - Size, type, creation date  
+✅ **Network Support** - Testnet, Mainnet, Devnet  
+✅ **Type Safety** - Full TypeScript support
+
+## Usage
+
+```typescript
+import { storageAdapter } from './sdk-mysten';
+
+// Upload file
+const blobId = await storageAdapter.upload(fileData, { epochs: 1 });
+
+// Download file
+const data = await storageAdapter.download(blobId);
+
+// Get metadata
+const metadata = await storageAdapter.getMetadata(blobId);
+console.log(`Blob size: ${metadata.size} bytes`);
+```
+
+## Configuration
+
+Set environment variables:
+
+```bash
+VITE_WALRUS_NETWORK=testnet
+VITE_WALRUS_PUBLISHER=https://publisher.walrus-testnet.walrus.space
+VITE_WALRUS_AGGREGATOR=https://aggregator.walrus-testnet.walrus.space
+VITE_SUI_RPC=https://fullnode.testnet.sui.io:443
+```
+
+## API Reference
+
+### `storageAdapter`
+
+Singleton instance implementing `StorageAdapter` interface.
+
+### `getWalrusClient()`
+
+Get WalrusClient singleton (lazy initialization).
+
+### `getNetworkConfig(network)`
+
+Get network-specific configuration.
+
+## Network Defaults
+
+| Network | Publisher                                       | Aggregator                                       |
+| ------- | ----------------------------------------------- | ------------------------------------------------ |
+| testnet | `https://publisher.walrus-testnet.walrus.space` | `https://aggregator.walrus-testnet.walrus.space` |
+| mainnet | `https://publisher.walrus.space`                | `https://aggregator.walrus.space`                |
+
+## Resources
+
+- [Walrus SDK Docs](https://sdk.mystenlabs.com/walrus)
+- [Walrus Documentation](https://docs.walrus.site)
+- [npm: @mysten/walrus](https://www.npmjs.com/package/@mysten/walrus)

package/templates/sdk-mysten/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "Mysten Walrus SDK layer for walrus-starter-kit",
+  "dependencies": {
+    "@mysten/walrus": "^1.0.0",
+    "@mysten/sui": "^1.10.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5.3.0"
+  }
+}

package/templates/sdk-mysten/src/adapter.ts

@@ -0,0 +1,80 @@
+import type {
+  StorageAdapter,
+  BlobMetadata,
+  UploadOptions,
+  DownloadOptions,
+} from '../../base/src/adapters/storage.js';
+import { getWalrusClient } from './client.js';
+
+export class MystenStorageAdapter implements StorageAdapter {
+  async upload(
+    data: File | Uint8Array,
+    options?: UploadOptions
+  ): Promise<string> {
+    const client = getWalrusClient();
+
+    const bytes =
+      data instanceof File ? new Uint8Array(await data.arrayBuffer()) : data;
+
+    try {
+      const result = await client.writeBlobToUploadRelay(bytes, {
+        nEpochs: options?.epochs || 1,
+      });
+
+      const blobId = result.newlyCreated.blobObject.blobId;
+
+      return blobId;
+    } catch (error) {
+      throw new Error(
+        `Upload failed: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
+    }
+  }
+
+  async download(
+    blobId: string,
+    options?: DownloadOptions
+  ): Promise<Uint8Array> {
+    const client = getWalrusClient();
+
+    try {
+      const data = await client.readBlob(blobId);
+
+      return data;
+    } catch (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 {
+      const metadata = await client.getBlobMetadata(blobId);
+
+      return {
+        blobId,
+        size: metadata.size,
+        contentType: metadata.contentType,
+        createdAt: metadata.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/templates/sdk-mysten/src/client.ts

@@ -0,0 +1,45 @@
+import { WalrusClient } from '@mysten/walrus';
+import { SuiClient, getFullnodeUrl } from '@mysten/sui/client';
+import { loadEnv } from '../../base/src/utils/env.js';
+import { getNetworkConfig } from './config.js';
+import type { WalrusNetwork } from '../../base/src/types/walrus.js';
+
+let walrusClient: WalrusClient | null = null;
+
+export function getWalrusClient(): WalrusClient {
+  if (walrusClient) {
+    return walrusClient;
+  }
+
+  const env = loadEnv();
+
+  // Validate network value before casting
+  const allowedNetworks: WalrusNetwork[] = ['testnet', 'mainnet', 'devnet'];
+  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);
+
+  const suiClient = new SuiClient({
+    url:
+      env.suiRpc ||
+      config.suiRpcUrl ||
+      getFullnodeUrl(network === 'testnet' ? 'testnet' : 'mainnet'),
+  });
+
+  walrusClient = new WalrusClient({
+    network,
+    suiClient,
+    ...(env.walrusPublisher && { publisherUrl: env.walrusPublisher }),
+    ...(env.walrusAggregator && { aggregatorUrl: env.walrusAggregator }),
+  });
+
+  return walrusClient;
+}
+
+export function resetWalrusClient(): void {
+  walrusClient = null;
+}

package/templates/sdk-mysten/src/config.ts

@@ -0,0 +1,33 @@
+import type { WalrusNetwork } from '../../base/src/types/walrus.js';
+
+export interface MystenWalrusConfig {
+  network: WalrusNetwork;
+  publisherUrl?: string;
+  aggregatorUrl?: string;
+  suiRpcUrl?: string;
+}
+
+export 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',
+  },
+  devnet: {
+    network: 'devnet',
+    publisherUrl: 'http://localhost:8080',
+    aggregatorUrl: 'http://localhost:8081',
+    suiRpcUrl: 'http://localhost:9000',
+  },
+};
+
+export function getNetworkConfig(network: WalrusNetwork): MystenWalrusConfig {
+  return NETWORK_CONFIGS[network];
+}

package/templates/sdk-mysten/src/index.ts

@@ -0,0 +1,11 @@
+export { getWalrusClient, resetWalrusClient } from './client.js';
+export { MystenStorageAdapter, storageAdapter } from './adapter.js';
+export { getNetworkConfig, NETWORK_CONFIGS } from './config.js';
+export type { MystenUploadResult, MystenBlobMetadata } from './types.js';
+
+export type {
+  StorageAdapter,
+  BlobMetadata,
+  UploadOptions,
+  DownloadOptions,
+} from '../../base/src/adapters/storage.js';

package/templates/sdk-mysten/src/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Mysten-specific type extensions
+ */
+
+export interface MystenUploadResult {
+  newlyCreated: {
+    blobObject: {
+      blobId: string;
+      size: number;
+    };
+  };
+}
+
+export interface MystenBlobMetadata {
+  size: number;
+  encodingType: string;
+  contentType?: string;
+  createdAt?: number;
+}

package/templates/sdk-mysten/test/adapter.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { MystenStorageAdapter } from '../src/adapter.js';
+
+describe('MystenStorageAdapter', () => {
+  it('should implement StorageAdapter interface', () => {
+    const adapter = new MystenStorageAdapter();
+
+    expect(adapter).toHaveProperty('upload');
+    expect(adapter).toHaveProperty('download');
+    expect(adapter).toHaveProperty('getMetadata');
+    expect(adapter).toHaveProperty('exists');
+  });
+
+  it('should handle upload errors gracefully', async () => {
+    const adapter = new MystenStorageAdapter();
+    const invalidData = new Uint8Array(0);
+
+    await expect(adapter.upload(invalidData)).rejects.toThrow('Upload failed');
+  });
+});

package/templates/simple-upload/README.md

@@ -0,0 +1,24 @@
+# {{projectName}}
+
+This is a Simple Upload Walrus application.
+
+## Features
+
+- Upload any file to Walrus
+- Get Blob ID after upload
+- Download file by Blob ID
+- File size display
+
+## Usage
+
+1. Click "Choose File" and select a file
+2. Click "Upload to Walrus"
+3. Copy the Blob ID from the success message
+4. Paste Blob ID in the download section
+5. Click "Download File"
+
+## Code Structure
+
+- `UploadForm.tsx` - File upload UI
+- `FilePreview.tsx` - Download UI
+- `App.tsx` - Main app layout

package/templates/simple-upload/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {}
+}

package/templates/simple-upload/src/App.tsx

@@ -0,0 +1,27 @@
+import { Layout } from '../../react/src/components/Layout.js';
+import { UploadForm } from './components/UploadForm.js';
+import { FilePreview } from './components/FilePreview.js';
+import './styles.css';
+
+function App() {
+  return (
+    <Layout>
+      <div className="simple-upload-app">
+        <h2>📤 Simple Upload</h2>
+        <p>Upload a file to Walrus and download it by Blob ID</p>
+
+        <section className="upload-section">
+          <h3>Upload File</h3>
+          <UploadForm />
+        </section>
+
+        <section className="download-section">
+          <h3>Download File</h3>
+          <FilePreview />
+        </section>
+      </div>
+    </Layout>
+  );
+}
+
+export default App;

package/templates/simple-upload/src/components/FilePreview.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { useDownload } from '../../../react/src/hooks/useStorage.js';
+
+export function FilePreview() {
+  const [blobId, setBlobId] = useState('');
+  const { data, isLoading, error } = useDownload(blobId);
+
+  const handleDownload = () => {
+    if (!data) return;
+
+    const blob = new Blob([data]);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `walrus-${blobId.slice(0, 8)}.bin`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="file-preview">
+      <input
+        type="text"
+        placeholder="Enter Blob ID"
+        value={blobId}
+        onChange={(e) => setBlobId(e.target.value)}
+      />
+
+      {isLoading && <p>Loading...</p>}
+      {error && <p className="error">Error: {error.message}</p>}
+
+      {data && (
+        <div className="preview-content">
+          <p>✓ Blob found ({data.byteLength} bytes)</p>
+          <button onClick={handleDownload}>Download File</button>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/simple-upload/src/components/UploadForm.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { useUpload } from '../../../react/src/hooks/useStorage.js';
+
+export function UploadForm() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const upload = useUpload();
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) setSelectedFile(file);
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) return;
+
+    upload.mutate(
+      { file: selectedFile, options: { epochs: 1 } },
+      {
+        onSuccess: (data) => {
+          alert(`Upload successful! Blob ID: ${data.blobId}`);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="upload-form">
+      <input
+        type="file"
+        onChange={handleFileChange}
+        disabled={upload.isPending}
+      />
+
+      {selectedFile && (
+        <div className="file-info">
+          <p>Selected: {selectedFile.name}</p>
+          <p>Size: {(selectedFile.size / 1024).toFixed(2)} KB</p>
+        </div>
+      )}
+
+      <button
+        onClick={handleUpload}
+        disabled={!selectedFile || upload.isPending}
+      >
+        {upload.isPending ? 'Uploading...' : 'Upload to Walrus'}
+      </button>
+
+      {upload.isError && <p className="error">Error: {upload.error.message}</p>}
+    </div>
+  );
+}

package/templates/simple-upload/src/styles.css

@@ -0,0 +1,33 @@
+.simple-upload-app {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+section {
+  margin: 2rem 0;
+  padding: 1.5rem;
+  border: 1px solid #333;
+  border-radius: 8px;
+}
+
+.upload-form,
+.file-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.file-info {
+  background: #1a1a1a;
+  padding: 1rem;
+  border-radius: 4px;
+}
+
+.error {
+  color: #ff4444;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}