demo-app lint

Author: ftheirs

sdk/examples/demo-app/next.config.js

@@ -1,4 +1,7 @@
-const path = require('path');
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -9,4 +12,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

sdk/examples/demo-app/package.json

@@ -2,6 +2,7 @@
   "name": "demo-app",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbopack --port 3001",
     "build": "next build --turbopack",

sdk/examples/demo-app/src/components/ConfigurationPanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { CheckCircle, AlertCircle, Settings, Globe, Database } from 'lucide-react';
 
 interface ConfigurationPanelProps {
@@ -53,7 +53,7 @@ export function ConfigurationPanel({
   const [customHeaders, setCustomHeaders] = useState('');
 
   // Test MSP connection
-  const testMspConnection = async () => {
+  const testMspConnection = useCallback(async () => {
     if (!environmentReady) {
       setMspStatus('error');
       return false;
@@ -68,7 +68,7 @@ export function ConfigurationPanel({
       } as RequestInit);
 
       if (response.ok) {
-        const health = await response.json();
+        await response.json(); // Verify response is valid JSON
         setMspStatus('connected');
         return true;
       } else {
@@ -80,10 +80,10 @@ export function ConfigurationPanel({
       setMspStatus('error');
       return false;
     }
-  };
+  }, [mspConfig, environmentReady]);
 
   // Test blockchain connection
-  const testBlockchainConnection = async () => {
+  const testBlockchainConnection = useCallback(async () => {
     if (!environmentReady) {
       setBlockchainStatus('error');
       return false;
@@ -135,18 +135,18 @@ export function ConfigurationPanel({
       setBlockchainStatus('error');
       return false;
     }
-  };
+  }, [blockchainConfig, environmentReady]);
 
   // Test all connections
-  const testConnections = async () => {
+  const testConnections = useCallback(async () => {
     const [mspOk, blockchainOk] = await Promise.all([
       testMspConnection(),
       testBlockchainConnection()
     ]);
 
     const allValid = mspOk && blockchainOk;
     onConfigurationValid(allValid);
-  };
+  }, [onConfigurationValid, testMspConnection, testBlockchainConnection]);
 
   // Parse custom headers
   const parseCustomHeaders = (headersString: string): Record<string, string> => {
@@ -171,7 +171,7 @@ export function ConfigurationPanel({
       const timeoutId = setTimeout(testConnections, 1000);
       return () => clearTimeout(timeoutId);
     }
-  }, [mspConfig, blockchainConfig, environmentReady]);
+  }, [mspConfig, blockchainConfig, environmentReady, testConnections]);
 
   const getStatusIcon = (status: 'checking' | 'connected' | 'error') => {
     switch (status) {

sdk/examples/demo-app/src/components/EnvironmentSetup.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Play, Square, RefreshCcw } from 'lucide-react';
 
 interface EnvironmentSetupProps {
@@ -109,7 +109,7 @@ export function EnvironmentSetup({ onEnvironmentReady, environmentReady }: Envir
     return { ...service, status: 'error' };
   };
 
-  const checkAllServices = async () => {
+  const checkAllServices = useCallback(async () => {
     setIsChecking(true);
 
     const updatedServices = await Promise.all(
@@ -122,14 +122,14 @@ export function EnvironmentSetup({ onEnvironmentReady, environmentReady }: Envir
     onEnvironmentReady(allRunning);
 
     setIsChecking(false);
-  };
+  }, [services, onEnvironmentReady]);
 
   useEffect(() => {
     checkAllServices();
     // Check services every 30 seconds
     const interval = setInterval(checkAllServices, 30000);
     return () => clearInterval(interval);
-  }, []);
+  }, [checkAllServices]);
 
   const getStatusColor = (status: ServiceStatus['status']) => {
     switch (status) {

sdk/examples/demo-app/src/components/FileManager.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { Upload, Download, File, Folder, Hash, Info, X, CheckCircle, AlertCircle, Plus, Database, ArrowLeft } from 'lucide-react';
-import { type WalletClient, type PublicClient, formatEther } from 'viem';
+import { useState, useRef, useCallback } from 'react';
+import { Upload, Download, File, Folder, Hash, X, CheckCircle, AlertCircle, Plus, Database, ArrowLeft } from 'lucide-react';
+import { type WalletClient, type PublicClient } from 'viem';
 import { FileManager as StorageHubFileManager, initWasm, StorageHubClient, ReplicationLevel } from '@storagehub-sdk/core';
-import { MspClient, type UploadReceipt, type DownloadResult, type Bucket, type FileListResponse, type FileTree, type DownloadOptions } from '@storagehub-sdk/msp-client';
+import { MspClient, type UploadReceipt, type Bucket, type FileTree } from '@storagehub-sdk/msp-client';
 import { TypeRegistry } from '@polkadot/types';
 import type { AccountId20, H256 } from '@polkadot/types/interfaces';
 
@@ -59,7 +59,7 @@ interface FileDownloadState {
   downloadError: string | null;
 }
 
-export function FileManager({ walletClient, publicClient, walletAddress, mspClient, storageHubClient }: FileManagerProps) {
+export function FileManager({ publicClient, walletAddress, mspClient, storageHubClient }: FileManagerProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [uploadState, setUploadState] = useState<FileUploadState>({
@@ -93,7 +93,6 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
 
   const [buckets, setBuckets] = useState<Bucket[]>([]);
   const [selectedBucketId, setSelectedBucketId] = useState<string>('');
-  const [walletBalance, setWalletBalance] = useState<string | null>(null);
   const [isLoadingBuckets, setIsLoadingBuckets] = useState<boolean>(false);
 
   // File Browser State
@@ -112,21 +111,6 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
     downloadError: null,
   });
 
-  // Get wallet balance
-  useEffect(() => {
-    const getBalance = async () => {
-      if (publicClient && walletAddress) {
-        try {
-          const balance = await publicClient.getBalance({ address: walletAddress as `0x${string}` });
-          setWalletBalance(formatEther(balance));
-        } catch (error) {
-          console.error('Failed to get balance:', error);
-        }
-      }
-    };
-    getBalance();
-  }, [publicClient, walletAddress]);
-
   // File selection handler
   const handleFileSelect = useCallback(async (file: File) => {
     setUploadState(prev => ({
@@ -224,7 +208,7 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
       } else {
         throw new Error('Bucket creation transaction failed');
       }
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('Bucket creation failed:', error);
       setBucketState(prev => ({
         ...prev,
@@ -245,20 +229,20 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
 
     try {
 
-      let bucketList: any[] = [];
+      let bucketList: Bucket[] = [];
       try {
         bucketList = await mspClient.buckets.listBuckets();
-      } catch (sdkError: any) {
-        console.error('❌ Failed to load buckets:', sdkError?.message || sdkError);
+      } catch (sdkError: unknown) {
+        console.error('❌ Failed to load buckets:', sdkError instanceof Error ? sdkError.message : sdkError);
         bucketList = []; // Fallback to empty array
       }
 
       // Replace all buckets with the fresh list from MSP backend
       const freshBuckets = bucketList || [];
       setBuckets(freshBuckets);
 
-    } catch (error: any) {
-      console.error('❌ Failed to refresh buckets:', error?.message || error);
+    } catch (error: unknown) {
+      console.error('❌ Failed to refresh buckets:', error instanceof Error ? error.message : error);
     } finally {
       setIsLoadingBuckets(false);
     }
@@ -308,7 +292,7 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
 
       console.log(`📁 Loaded ${extractedFiles.length} files`);
 
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('❌ Failed to load files:', error);
       setFileBrowserState(prev => ({
         ...prev,
@@ -385,9 +369,8 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
       }
 
       const bucketIdH256 = registry.createType("H256", bucketIdForH256) as H256;
-      const fileKey = await fileManager.computeFileKey(owner, bucketIdH256, fileLocation);
-
-
+      // File key is computed by the MSP backend during upload
+      await fileManager.computeFileKey(owner, bucketIdH256, fileLocation);
 
       setUploadState(prev => ({ ...prev, uploadProgress: 25 }));
 
@@ -413,8 +396,8 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
           0 // replicas (used only when ReplicationLevel = Custom, like sdk-precompiles)
           // No gas options - let it estimate naturally like sdk-precompiles
         );
-      } catch (error: any) {
-        console.error('❌ Storage request failed:', error?.message || error);
+      } catch (error: unknown) {
+        console.error('❌ Storage request failed:', error instanceof Error ? error.message : error);
         throw error;
       }
 
@@ -451,8 +434,8 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
           fileLocation // location parameter like sdk-precompiles
         );
 
-      } catch (error: any) {
-        console.error('❌ MSP upload failed:', error?.message || error);
+      } catch (error: unknown) {
+        console.error('❌ MSP upload failed:', error instanceof Error ? error.message : error);
         throw error;
       }
 
@@ -465,7 +448,7 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
         uploadProgress: 100
       }));
 
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('Upload failed:', error);
       setUploadState(prev => ({
         ...prev,
@@ -803,7 +786,7 @@ export function FileManager({ walletClient, publicClient, walletAddress, mspClie
 
       console.log('✅ File download completed:', file.name);
 
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('❌ Download failed:', error);
       setDownloadState(prev => ({
         ...prev,

sdk/examples/demo-app/src/components/OnePageDemo.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { Settings, Wallet, Database, CheckCircle, AlertCircle, ExternalLink } from 'lucide-react';
 import { createWalletClient, createPublicClient, custom, formatEther, getAddress, type WalletClient, type PublicClient } from 'viem';
 import { StorageHubClient } from '@storagehub-sdk/core';
@@ -31,12 +31,12 @@ export function OnePageDemo() {
   const [mspError, setMspError] = useState<string | null>(null);
 
   // Define the StorageHub chain configuration
-  const storageHubChain = {
+  const storageHubChain = useMemo(() => ({
     id: config.chainId,
     name: 'StorageHub Solochain EVM',
     nativeCurrency: { name: 'StorageHub', symbol: 'SH', decimals: 18 },
     rpcUrls: { default: { http: [config.rpcUrl] } },
-  };
+  }), [config.chainId, config.rpcUrl]);
 
   // Check if MetaMask is available (client-side only to avoid hydration mismatch)
   const [isMetaMaskAvailable, setIsMetaMaskAvailable] = useState<boolean | null>(null);
@@ -90,9 +90,9 @@ export function OnePageDemo() {
             params: [{ chainId: `0x${config.chainId.toString(16)}` }],
           });
           console.log('✅ Network switched successfully');
-        } catch (switchError: any) {
+        } catch (switchError: unknown) {
           // If chain doesn't exist, add it
-          if (switchError.code === 4902) {
+          if (switchError && typeof switchError === 'object' && 'code' in switchError && (switchError as { code: number }).code === 4902) {
             console.log('🔄 Network not found, adding StorageHub network...');
             await window.ethereum!.request({
               method: 'wallet_addEthereumChain',
@@ -156,19 +156,20 @@ export function OnePageDemo() {
         balance: formattedBalance
       });
 
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('❌ Wallet connection failed:', error);
 
       // Provide more specific error messages
       let errorMessage = 'Failed to connect wallet';
-      if (error.message?.includes('User rejected')) {
+      const errorMsg = error && typeof error === 'object' && 'message' in error ? (error as { message: string }).message : '';
+      if (errorMsg.includes('User rejected')) {
         errorMessage = 'Connection cancelled by user';
-      } else if (error.message?.includes('network')) {
+      } else if (errorMsg.includes('network')) {
         errorMessage = 'Network configuration error. Please check your MetaMask settings.';
-      } else if (error.message?.includes('JSON-RPC')) {
+      } else if (errorMsg.includes('JSON-RPC')) {
         errorMessage = 'RPC connection error. Please ensure the StorageHub node is running.';
-      } else if (error.message) {
-        errorMessage = error.message;
+      } else if (errorMsg) {
+        errorMessage = errorMsg;
       }
 
       setWalletError(errorMessage);
@@ -188,8 +189,6 @@ export function OnePageDemo() {
       // Create MSP client
       const mspClient = await MspClient.connect({ baseUrl: config.mspUrl });
 
-      let authToken: string;
-
       if (config.mockAuth) {
         // MOCK AUTHENTICATION PATH
         const mockAddress = '0xf24FF3a9CF04c71Dbc94D0b566f7A27B94566cac'; // Address that has buckets
@@ -198,7 +197,8 @@ export function OnePageDemo() {
         console.log('- Mock Address (with buckets):', mockAddress);
         console.log('- Mock mode enabled, skipping SIWE flow');
 
-        authToken = generateMockJWT(mockAddress); // Use mock address instead of wallet address
+        const mockToken = generateMockJWT(mockAddress); // Use mock address instead of wallet address
+        mspClient.setToken(mockToken);
         console.log('✅ Mock JWT generated for address with existing buckets');
 
       } else {
@@ -216,13 +216,9 @@ export function OnePageDemo() {
 
         // Note: authenticateSIWE handles token management internally
         // No need to extract token manually
-        authToken = 'authenticated'; // Placeholder since token is managed internally
       }
 
-      // Set the token (only needed for mock auth, real auth handles it internally)
-      if (config.mockAuth) {
-        // mspClient.setToken(authToken);
-      }
+      // Token management is handled internally by the SDK
       console.log(`✅ MSP client authenticated successfully (${config.mockAuth ? 'Mock' : 'Real'} auth)`);
 
       // Create StorageHub client

sdk/examples/demo-app/src/components/StorageHubDemo.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { type WalletClient, type PublicClient } from 'viem';
-import { Upload, Download, Info, Settings } from 'lucide-react';
+import { Upload, Info, Settings } from 'lucide-react';
 import { MspClient } from '@storagehub-sdk/msp-client';
 import { StorageHubClient } from '@storagehub-sdk/core';
 import { FileManager } from './FileManager';
@@ -195,7 +195,7 @@ export function StorageHubDemo({ walletClient, publicClient, walletAddress }: St
                   <li>• Viem clients connected to StorageHub blockchain</li>
                   <li>• MSP backend authenticated and ready</li>
                   <li>• File upload/download functionality available</li>
-                  <li>• Switch to "File Management" tab to start</li>
+                  <li>• Switch to &quot;File Management&quot; tab to start</li>
                 </ul>
               </div>
             )}