A demo dApp for interacting with DataHaven through the StorageHub SDK. This implementation showcases connecting to wallet, connecting and authenticating with a Storage Provider, bucket management, and file operations.
A build of this demo is currently available at: https://demosdk.datahaven.xyz/
- Wallet Connection - EVM Wallet interaction with automatic network switching to DataHaven testnet
- Connection and SIWE Authentication with Main Storage Provider - Prerequisite for bucket and file operations
- Bucket Management - Create, list, and delete storage buckets
- File Operations - Upload, download, and manage files within buckets
- Storage Provider Monitoring - View MSP connection status and health
- React 19 with TypeScript
- Vite - Build tool and dev server
- Tailwind CSS - Styling
- viem - EVM wallet interaction
- @polkadot/api - Polkadot chain interaction
- @storagehub-sdk - StorageHub SDK for storage operations (@storagehub-sdk/core and @storagehub-sdk/msp-client)
- Node.js 18+
- pnpm
- MetaMask or compatible EVM wallet
pnpm installpnpm devThe app will be available at http://localhost:5173
pnpm buildpnpm lintsrc/
├── pages/ # Dashboard, Buckets, Files pages
├── components/ # Reusable UI components
├── context/ # React Context for global state
├── hooks/ # Custom React hooks
├── services/ # Wallet & MSP client services
├── operations/ # Bucket and file operation logic
├── config/ # Network configuration
└── types/ # TypeScript type definitions
The app connects to the DataHaven Testnet:
| Property | Value |
|---|---|
| Network | DataHaven Testnet |
| Chain ID | 55931 (0xda7b) |
| RPC URL | https://services.datahaven-testnet.network/testnet |
| Currency | MOCK (18 decimals) |
- Connect Wallet - Connect your MetaMask wallet (auto-switches to DataHaven testnet)
- Connect to MSP - Establish connection to the storage provider
- Authenticate - Sign a message to authenticate with the network
- Manage Storage - Create buckets and upload/download files
MIT