Skip to content

Commit ff4d934

Browse files
ftheirsftheirs
committed
demo app
1 parent f895c0a commit ff4d934

30 files changed

+4105
-0
lines changed

‎sdk/examples/demo-app/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎sdk/examples/demo-app/IMPLEMENTATION_SUMMARY.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# StorageHub SDK Demo App - Implementation Summary
2+
3+
## ✅ Phase 0 & Phase 1 - COMPLETED
4+
5+
### 🔧 Environment Setup (Phase 0)
6+
**Status: COMPLETED** ✅
7+
8+
Added convenient build and environment management scripts to the demo app's `package.json`:
9+
10+
```bash
11+
# Build required Docker images (StorageHub node + MSP backend)
12+
pnpm env:build
13+
14+
# Start complete StorageHub environment (blockchain + MSP + database)
15+
pnpm env:start
16+
17+
# Stop the environment
18+
pnpm env:stop
19+
20+
# Run the demo app
21+
pnpm dev
22+
```
23+
24+
**What it sets up:**
25+
- StorageHub blockchain node with EVM support (ws://127.0.0.1:9888)
26+
- MSP backend REST API (http://127.0.0.1:8080)
27+
- PostgreSQL database for indexing
28+
- Pre-initialized network with MSP/BSP providers
29+
- Auto-sealing blocks every 6 seconds
30+
31+
### 🏗️ NextJS Demo App Foundation (Phase 1)
32+
**Status: COMPLETED** ✅
33+
34+
Created a comprehensive demo application in `sdk/examples/demo-app` with:
35+
36+
#### **Project Structure**
37+
- **Next.js 15** with App Router and TypeScript
38+
- **Tailwind CSS** for modern styling
39+
- **Radix UI** components for accessibility
40+
- **StorageHub SDK** integration (`@storagehub-sdk/core` + `@storagehub-sdk/msp-client`)
41+
- **Viem** for Ethereum interactions
42+
- **Port 3001** to avoid conflicts
43+
44+
#### **Core Components Implemented**
45+
46+
1. **EnvironmentSetup Component** 🐳
47+
- Real-time Docker service monitoring
48+
- Connection testing for all services
49+
- Setup instructions and status indicators
50+
- Auto-refresh every 30 seconds
51+
52+
2. **ConfigurationPanel Component** ⚙️
53+
- MSP Backend configuration (URL, timeout, headers)
54+
- Blockchain configuration (RPC, chain ID, currency)
55+
- Live connection testing
56+
- MetaMask network helper
57+
58+
3. **WalletConnection Component** 🔗
59+
- **MetaMask-only integration** (no LocalWallet as requested)
60+
- EIP-1193 wallet support using StorageHub SDK
61+
- Automatic network detection and switching
62+
- Balance display and address management
63+
- Network addition helper for StorageHub chain
64+
65+
4. **Main Dashboard** 📊
66+
- Tabbed interface with progressive enablement
67+
- Status cards showing environment/config/wallet state
68+
- Responsive design for desktop and mobile
69+
- Placeholder tabs for upcoming features
70+
71+
#### **Features Implemented**
72+
73+
✅ **Environment Status Monitoring**
74+
- Docker container health checks
75+
- Service connectivity testing
76+
- Real-time status updates
77+
78+
✅ **SDK Configuration Management**
79+
- MSP backend connection setup
80+
- Blockchain RPC configuration
81+
- Connection validation
82+
83+
✅ **Viem + MetaMask Wallet Integration**
84+
- Direct Viem `WalletClient` and `PublicClient` integration
85+
- MetaMask connection via Viem custom transport
86+
- StorageHub chain configuration (Chain ID: 181222)
87+
- Automatic network addition and switching
88+
- Real-time balance display using `formatEther`
89+
- Full TypeScript support and type safety
90+
- Ready for StorageHub SDK operations
91+
92+
✅ **Developer Experience**
93+
- TypeScript type safety throughout
94+
- Comprehensive error handling
95+
- User-friendly status messages
96+
- Progressive UI enablement
97+
98+
## 🎯 What's Working Now
99+
100+
Users can:
101+
102+
1. **Check Environment Status** - See if Docker services are running
103+
2. **Configure SDK Connections** - Set up MSP and blockchain endpoints
104+
3. **Connect MetaMask** - Link wallet and switch to StorageHub network
105+
4. **Monitor Service Health** - Real-time connection status
106+
5. **Get Setup Guidance** - Step-by-step instructions and helpers
107+
108+
## 🚀 Next Steps (Phase 2 & 3)
109+
110+
The foundation is complete and ready for:
111+
112+
### **Phase 2 - Core SDK Features**
113+
- File Management (upload/download/fingerprint calculation)
114+
- MSP Authentication (SIWE-style nonce/verify flow)
115+
- Basic file operations using FileManager
116+
117+
### **Phase 3 - Advanced Features**
118+
- Bucket management (create, browse, manage)
119+
- Blockchain operations (storage requests, precompiles)
120+
- Service monitoring dashboard
121+
- Advanced file operations
122+
123+
## 🎉 Key Achievements
124+
125+
1. **Zero Build Errors** - All TypeScript compilation passes
126+
2. **Modern UI/UX** - Clean, responsive interface with proper accessibility
127+
3. **Real-time Monitoring** - Live service status and connection health
128+
4. **MetaMask Integration** - Seamless wallet connection with network management
129+
5. **Developer Ready** - Comprehensive documentation and setup scripts
130+
6. **Production Quality** - Type-safe, error-handled, and well-structured code
131+
132+
## 📋 Quick Start
133+
134+
```bash
135+
# Navigate to demo app
136+
cd sdk/examples/demo-app
137+
138+
# 1. Install dependencies
139+
pnpm install
140+
141+
# 2. Build environment
142+
pnpm env:build
143+
144+
# 3. Start services (in separate terminal)
145+
pnpm env:start
146+
147+
# 4. Run demo app (in another terminal)
148+
pnpm dev
149+
150+
# 5. Visit http://localhost:3001
151+
```
152+
153+
The demo is now ready for user feedback and Phase 2 development!

‎sdk/examples/demo-app/LAUNCH.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# StorageHub SDK Demo - Quick Launch
2+
3+
## Prerequisites
4+
- Docker installed and running
5+
- Node.js and pnpm installed
6+
- MetaMask browser extension
7+
8+
## Launch Commands
9+
10+
```bash
11+
# Navigate to demo app
12+
cd sdk/examples/demo-app
13+
14+
# Install dependencies
15+
pnpm install
16+
17+
# 1. Build StorageHub environment (first time only)
18+
pnpm env:build
19+
20+
# 2. Start StorageHub services (in separate terminal)
21+
pnpm env:start
22+
23+
# 3. Run the demo app (in another terminal)
24+
pnpm dev
25+
```
26+
27+
## Access
28+
- **Demo App**: http://localhost:3001
29+
- **Blockchain RPC**: ws://127.0.0.1:9888
30+
- **MSP Backend**: http://127.0.0.1:8080
31+
32+
## Stop Environment
33+
```bash
34+
pnpm env:stop
35+
```
36+
Or press `Ctrl+C` in the terminal running `pnpm env:start`
37+
38+
## MetaMask Network Setup
39+
The demo will automatically add and switch to the StorageHub network when you connect your wallet.
40+
41+
**Network Details** (added automatically):
42+
- **Network Name**: StorageHub Solochain EVM
43+
- **RPC URL**: http://127.0.0.1:9888
44+
- **Chain ID**: 181222
45+
- **Currency Symbol**: SH
46+
47+
**Manual Setup** (optional): You can also add the network manually in MetaMask if preferred.

‎sdk/examples/demo-app/README.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# StorageHub SDK Demo App
2+
3+
A comprehensive demonstration of all StorageHub SDK features including MSP client operations, blockchain interactions, and file management.
4+
5+
## Features
6+
7+
### Phase 1 (Completed)
8+
- ✅ **Environment Setup**: Check and manage Docker services
9+
- ✅ **Configuration Panel**: Configure MSP backend and blockchain connections
10+
- ✅ **MetaMask Integration**: Connect wallet and manage network switching
11+
- ✅ **Status Monitoring**: Real-time service health monitoring
12+
13+
### Phase 2 (Coming Soon)
14+
- 🔄 **File Management**: Upload, download, and file operations
15+
- 🔄 **MSP Operations**: Authentication, bucket browsing, file info
16+
17+
### Phase 3 (Coming Soon)
18+
- 🔄 **Bucket Operations**: Create, manage, and explore buckets
19+
- 🔄 **Blockchain Operations**: On-chain transactions and precompile calls
20+
- 🔄 **Advanced Features**: Gas optimization, transaction monitoring
21+
22+
## Prerequisites
23+
24+
### 1. Environment Setup
25+
26+
Build the required Docker images:
27+
```bash
28+
pnpm env:build
29+
```
30+
31+
Start the StorageHub environment:
32+
33+
**Recommended: Clean Environment (Matches SDK precompiles tests):**
34+
```bash
35+
pnpm env:start
36+
```
37+
38+
**Alternative: Pre-initialized Environment (with demo data):**
39+
```bash
40+
pnpm env:start:initialized
41+
```
42+
43+
This will start:
44+
- StorageHub blockchain node (ws://127.0.0.1:9888)
45+
- MSP backend service (http://127.0.0.1:8080)
46+
- PostgreSQL database for indexing
47+
48+
**Environment Differences:**
49+
- **Clean Environment**: Fresh state, ALITH account properly funded, matches sdk-precompiles test setup
50+
- **Pre-initialized Environment**: Contains demo bucket and storage request, may have balance/value proposition issues
51+
- Auto-sealing blocks every 6 seconds
52+
53+
### 2. MetaMask Setup
54+
55+
Install MetaMask browser extension and add the StorageHub network:
56+
57+
- **Network Name**: StorageHub Solochain EVM
58+
- **RPC URL**: http://127.0.0.1:9888
59+
- **Chain ID**: 181222
60+
- **Currency Symbol**: SH
61+
62+
## Development
63+
64+
Install dependencies:
65+
```bash
66+
pnpm install
67+
```
68+
69+
Run the development server:
70+
```bash
71+
pnpm dev
72+
```
73+
74+
The demo will be available at [http://localhost:3001](http://localhost:3001).
75+
76+
## Usage
77+
78+
1. **Environment**: Verify all services are running
79+
2. **Configuration**: Test MSP and blockchain connections
80+
3. **Wallet**: Connect MetaMask and switch to StorageHub network
81+
4. **Features**: Use the SDK features (file operations, buckets, blockchain)
82+
83+
## Architecture
84+
85+
- **Next.js 15** with App Router and TypeScript
86+
- **Tailwind CSS** for styling
87+
- **Radix UI** components for accessibility
88+
- **StorageHub SDK** packages:
89+
- `@storagehub-sdk/core` - Core utilities and blockchain operations
90+
- `@storagehub-sdk/msp-client` - MSP backend operations
91+
- **Viem** for Ethereum interactions
92+
93+
## Development Notes
94+
95+
- Uses port 3001 to avoid conflicts with other Next.js apps
96+
- MetaMask-only wallet integration (no LocalWallet)
97+
- Real-time service monitoring with auto-refresh
98+
- Responsive design for desktop and mobile
99+
- Type-safe with comprehensive TypeScript coverage
100+
101+
## Stopping the Environment
102+
103+
To stop the StorageHub environment:
104+
```bash
105+
pnpm env:stop
106+
```
107+
108+
Or press Ctrl+C in the terminal where `pnpm env:start` is running.

‎sdk/examples/demo-app/eslint.config.mjs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { dirname } from "path";
2+
import { fileURLToPath } from "url";
3+
import { FlatCompat } from "@eslint/eslintrc";
4+
5+
const __filename = fileURLToPath(import.meta.url);
6+
const __dirname = dirname(__filename);
7+
8+
const compat = new FlatCompat({
9+
baseDirectory: __dirname,
10+
});
11+
12+
const eslintConfig = [
13+
...compat.extends("next/core-web-vitals", "next/typescript"),
14+
{
15+
ignores: [
16+
"node_modules/**",
17+
".next/**",
18+
"out/**",
19+
"build/**",
20+
"next-env.d.ts",
21+
],
22+
},
23+
];
24+
25+
export default eslintConfig;

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const path = require('path');
2+
3+
/** @type {import('next').NextConfig} */
4+
const nextConfig = {
5+
reactStrictMode: true,
6+
// Silence workspace root warning and align Turbopack root to monorepo root
7+
turbopack: {
8+
root: path.join(__dirname, '../../..'),
9+
},
10+
};
11+
12+
module.exports = nextConfig;

0 commit comments

Comments
 (0)