A transparency dashboard for the Klever Bridge, providing real-time verification that wrapped tokens on Klever Blockchain are fully backed by assets locked on source chains.
The Klever Bridge enables cross-chain asset transfers between Klever Blockchain and other blockchain networks. This dashboard provides transparent, real-time proof that all wrapped tokens are 100% backed by locked collateral.
- Real-time Balance Verification - Live data from bridge contracts and Klever Blockchain
- Multi-chain Support - Ethereum (live), BSC, Polygon, Arbitrum, Tron (coming soon)
- Backing Ratio Display - Visual indicators showing locked vs minted amounts
- On-chain Verification Links - Direct links to block explorers for independent verification
- Responsive Design - Optimized for desktop and mobile devices
| Network | Status | Explorer |
|---|---|---|
| Ethereum | Live | Etherscan |
| BNB Smart Chain | Coming Soon | BscScan |
| Polygon | Coming Soon | PolygonScan |
| Arbitrum | Coming Soon | Arbiscan |
| Tron | Coming Soon | Tronscan |
| Klever Blockchain | Live | KleverScan |
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4
- Web3: wagmi + viem
- Data Fetching: TanStack Query
- Animations: Framer Motion
- Validation: Zod
- Node.js 20+
- pnpm 9+
# Clone the repository
git clone https://github.com/klever-io/klv-bridge-assets.git
cd klv-bridge-assets
# Install dependencies
pnpm install
# Copy environment variables
cp .env.example .env.local
# Start development server
pnpm devOpen http://localhost:3000 to view the dashboard.
| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_KLEVER_API_URL |
Klever Blockchain API endpoint | https://api.mainnet.klever.org |
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm lint:fix # Fix ESLint issues
pnpm type-check # Run TypeScript type checkingsrc/
├── app/ # Next.js App Router pages
├── components/
│ ├── dashboard/ # Dashboard-specific components
│ ├── token/ # Token display components
│ └── ui/ # Reusable UI primitives
├── config/
│ ├── bridge-assets.json # Token registry configuration
│ └── wagmi.ts # Web3 configuration
├── hooks/ # React hooks for data fetching
├── services/ # API service clients
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
public/assets/
├── chains/ # Chain logo images
└── *.png # Token logo images
- Edit
src/config/bridge-assets.json - Add token configuration with:
- Symbol, name, decimals
- Klever Blockchain base token ID
- Liquidity tokens for each chain
- Source chain configurations (bridge/token contracts)
- Add token logo to
public/assets/
See CONTRIBUTING.md for detailed instructions.
The Klever Bridge uses a multi-token model:
- Base Token: Universal wrapped token on Klever Blockchain (e.g.,
USDT-XXXX) - Liquidity Tokens: Per-chain tracking tokens (e.g.,
ETHUSDT-XXXX,BSCUSDT-XXXX)
- Token configuration loaded from JSON registry
- EVM balances fetched via wagmi multicall
- Klever Blockchain data fetched from Klever API
- Data aggregated and backing ratio calculated
- UI displays real-time verification status
This application is a read-only dashboard with no authentication or sensitive operations. Security measures include:
- HTTPS-only API communication
- Input validation with Zod schemas
- Security headers (X-Frame-Options, CSP, etc.)
- No hardcoded secrets
- Regular dependency updates
See SECURITY.md for our security policy.
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.