@blu1606/create-walrus-app 0.1.4 → 2.0.0

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

package/presets/react-mysten-simple-upload/src/index.css

@@ -0,0 +1,252 @@
+/* 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;
+}

package/presets/react-mysten-simple-upload/src/index.ts

@@ -0,0 +1,16 @@
+// Re-export Walrus library
+export * from './lib/walrus/index.js';
+
+// Re-export features
+export { UploadForm } from './components/features/upload-form.js';
+export { FilePreview } from './components/features/file-preview.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';
+