@blu1606/create-walrus-app 2.1.0 → 2.2.1

package/presets/react-mysten-simple-upload-enoki/src/hooks/use-enoki-auth.ts

@@ -0,0 +1,52 @@
+import { useEnokiFlow, useZkLogin } from '@mysten/enoki/react';
+import { enokiConfig } from '../lib/enoki/index.js';
+
+/**
+ * Enoki authentication hook
+ *
+ * Provides Google OAuth login/logout, zkLogin state, and unified signer interface
+ */
+export function useEnokiAuth() {
+  const enokiFlow = useEnokiFlow();
+  const { address } = useZkLogin();
+
+  const login = async () => {
+    const protocol = window.location.protocol;
+    const host = window.location.host;
+    const redirectUrl = `${protocol}//${host}/auth`;
+
+    const authUrl = await enokiFlow.createAuthorizationURL({
+      provider: 'google',
+      clientId: enokiConfig.VITE_GOOGLE_CLIENT_ID,
+      redirectUrl,
+    });
+
+    window.location.href = authUrl;
+  };
+
+  const logout = () => {
+    enokiFlow.logout();
+  };
+
+  const getSigner = () => {
+    if (!address || !enokiFlow) return null;
+
+    return {
+      address,
+      signAndExecuteTransaction: async (args: any) => {
+        const result = await enokiFlow.signAndExecuteTransaction({
+          transaction: args.transaction,
+        });
+        return { digest: result.digest };
+      },
+    };
+  };
+
+  return {
+    isEnokiConnected: !!address,
+    enokiAddress: address,
+    login,
+    logout,
+    getSigner,
+  };
+}

package/presets/react-mysten-simple-upload-enoki/src/hooks/use-upload.ts

@@ -0,0 +1,45 @@
+import { useMutation } from '@tanstack/react-query';
+import { useSuiClient } from '@mysten/dapp-kit';
+import { storageAdapter } from '../lib/walrus/index.js';
+import type { UploadOptions } from '../lib/walrus/types.js';
+import { useEnokiAuth } from './use-enoki-auth.js';
+import { useWallet } from './use-wallet.js';
+
+/**
+ * Upload hook with dual auth support
+ *
+ * Supports both zkLogin (Enoki) and standard wallet authentication
+ * Prioritizes zkLogin if both are available
+ */
+export function useUpload() {
+  const suiClient = useSuiClient();
+  const { getSigner: getEnokiSigner } = useEnokiAuth();
+  const { getSigner: getWalletSigner } = useWallet();
+
+  return useMutation({
+    mutationFn: async ({
+      file,
+      options,
+    }: {
+      file: File;
+      options?: UploadOptions;
+    }) => {
+      // Prioritize zkLogin, fallback to standard wallet
+      const signer = getEnokiSigner() || getWalletSigner();
+
+      if (!signer) {
+        throw new Error(
+          'No wallet connected. Please login with Google or connect a wallet.'
+        );
+      }
+
+      const blobId = await storageAdapter.upload(file, {
+        ...options,
+        client: suiClient,
+        signer,
+      });
+
+      return { blobId, file };
+    },
+  });
+}

package/presets/react-mysten-simple-upload-enoki/src/hooks/use-wallet.ts

@@ -0,0 +1,32 @@
+import { useCurrentAccount, useSignAndExecuteTransaction } from '@mysten/dapp-kit';
+
+/**
+ * Standard Sui wallet hook
+ *
+ * Provides wallet connection state and unified signer interface
+ */
+export function useWallet() {
+  const currentAccount = useCurrentAccount();
+  const { mutateAsync: signAndExecute } = useSignAndExecuteTransaction();
+
+  const getSigner = () => {
+    if (!currentAccount) return null;
+
+    return {
+      address: currentAccount.address,
+      signAndExecuteTransaction: async (args: any) => {
+        const result = await signAndExecute({
+          transaction: args.transaction,
+        });
+        return { digest: result.digest };
+      },
+    };
+  };
+
+  return {
+    isConnected: !!currentAccount,
+    address: currentAccount?.address,
+    account: currentAccount,
+    getSigner,
+  };
+}

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

@@ -0,0 +1,322 @@
+/* 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;
+}
+
+/* Enoki zkLogin Auth Styles */
+.enoki-auth {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--walrus-surface);
+  border-radius: 8px;
+  border: 1px solid var(--walrus-accent-purple);
+}
+
+.enoki-address {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.875rem;
+  color: var(--walrus-accent-purple);
+}
+
+.google-login-btn {
+  padding: 0.75rem 1.5rem;
+  background: linear-gradient(135deg, var(--walrus-accent-blue), var(--walrus-accent-purple));
+  border: none;
+  border-radius: 8px;
+  color: var(--walrus-text-primary);
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.google-login-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(64, 162, 255, 0.3);
+}
+
+.logout-btn {
+  padding: 0.5rem 1rem;
+  background-color: var(--walrus-surface-hover);
+  border: 1px solid var(--walrus-border);
+  border-radius: 6px;
+  color: var(--walrus-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.logout-btn:hover {
+  background-color: var(--walrus-warning);
+  color: var(--walrus-text-primary);
+  border-color: var(--walrus-warning);
+}
+
+.auth-divider {
+  display: flex;
+  align-items: center;
+  margin: 1rem 0;
+  color: var(--walrus-text-secondary);
+  font-size: 0.875rem;
+  gap: 1rem;
+}
+
+.auth-divider::before,
+.auth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background-color: var(--walrus-border);
+}
+
+.auth-divider span {
+  padding: 0 0.5rem;
+}

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

@@ -0,0 +1,24 @@
+// Re-export Walrus library
+export * from './lib/walrus/index.js';
+
+// Re-export Enoki library
+export * from './lib/enoki/index.js';
+
+// Re-export providers
+export { QueryProvider, WalletProvider, EnokiProvider } from './providers/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';
+export { EnokiAuthButton } from './components/features/enoki-auth-button.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';
+export { useEnokiAuth } from './hooks/use-enoki-auth.js';
+
+// Re-export layout
+export { AppLayout } from './components/layout/app-layout.js';
+

package/presets/react-mysten-simple-upload-enoki/src/lib/enoki/constants.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+/**
+ * Enoki configuration constants with Zod validation
+ */
+
+// Environment variable schema
+export const enokiConfigSchema = z.object({
+  VITE_ENOKI_API_KEY: z.string().min(1, 'Enoki API key is required'),
+  VITE_GOOGLE_CLIENT_ID: z.string().min(1, 'Google Client ID is required'),
+  VITE_SUI_NETWORK: z.enum(['mainnet', 'testnet', 'devnet', 'localnet']).default('testnet'),
+  VITE_SUI_RPC: z.string().url().optional(),
+});
+
+export type EnokiConfig = z.infer<typeof enokiConfigSchema>;
+
+// Validate and export config
+export const enokiConfig: EnokiConfig = enokiConfigSchema.parse({
+  VITE_ENOKI_API_KEY: import.meta.env.VITE_ENOKI_API_KEY,
+  VITE_GOOGLE_CLIENT_ID: import.meta.env.VITE_GOOGLE_CLIENT_ID,
+  VITE_SUI_NETWORK: import.meta.env.VITE_SUI_NETWORK || 'testnet',
+  VITE_SUI_RPC: import.meta.env.VITE_SUI_RPC,
+});

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

@@ -0,0 +1,6 @@
+/**
+ * Enoki library barrel export
+ */
+
+export { sessionStorageAdapter, type StorageAdapter } from './storage-adapter.js';
+export { enokiConfig, enokiConfigSchema, type EnokiConfig } from './constants.js';

package/presets/react-mysten-simple-upload-enoki/src/lib/enoki/storage-adapter.ts

@@ -0,0 +1,31 @@
+/**
+ * SessionStorage adapter for Enoki zkLogin wallet persistence
+ *
+ * Benefits:
+ * - Tab-isolated sessions (auto-cleanup on tab close)
+ * - Enhanced security vs localStorage
+ * - SSR-safe with browser detection
+ */
+
+export interface StorageAdapter {
+  getItem(key: string): Promise<string | null>;
+  setItem(key: string, value: string): Promise<void>;
+  removeItem(key: string): Promise<void>;
+}
+
+export const sessionStorageAdapter: StorageAdapter = {
+  async getItem(key: string): Promise<string | null> {
+    if (typeof window === 'undefined') return null;
+    return sessionStorage.getItem(key);
+  },
+
+  async setItem(key: string, value: string): Promise<void> {
+    if (typeof window === 'undefined') return;
+    sessionStorage.setItem(key, value);
+  },
+
+  async removeItem(key: string): Promise<void> {
+    if (typeof window === 'undefined') return;
+    sessionStorage.removeItem(key);
+  },
+};