MultiContract Highscore Dashboard

A web3 dashboard that displays high scores from multiple smart contracts on the Polygon Amoy testnet. The dashboard fetches minting events from configured contracts and displays them as scores in an elegant horizontal bar chart format.

🎯 Purpose

This project monitors multiple smart contracts for minting events and treats each minting event as a score value. It aggregates these scores across all configured contracts and displays the highest scores in a real-time leaderboard format.

✨ Features

• Multi-Contract Monitoring: Track scores from multiple smart contracts simultaneously
• Real-Time Updates: Automatic refresh of scores from the blockchain
• Horizontal Bar Visualization: Clean, responsive bar chart display
• Polygon Amoy Integration: Built specifically for Polygon's testnet
• Error Handling: Robust error handling for network issues
• Mobile Responsive: Works seamlessly on desktop and mobile devices

🚀 Quick Start

Prerequisites

• A modern web browser with JavaScript enabled
• Internet connection to access Polygon Amoy testnet

Getting Started

1. Fork or Clone the Repository

   git clone <your-repo-url>
   cd MultiContract-Highscore

2. Configure Contract Addresses

   Edit the config.json file to include your contract addresses:

   {
     "contracts": [
       "0x1234567890123456789012345678901234567890",
       "0xabcdefabcdefabcdefabcdefabcdefabcdefabcd",
       "0x9876543210987654321098765432109876543210"
     ]
   }

3. Serve the Files

   Since this is a client-side application that makes blockchain calls, you need to serve it through a web server:

   Option A: Using Python (if installed)

   # Python 3
   python -m http.server 8000
   
   # Python 2
   python -m SimpleHTTPServer 8000

   Option B: Using Node.js (if installed)

   npx serve .

   Option C: Using any local web server

   • Use VS Code Live Server extension
   • Use any other local development server

4. Open in Browser

   Navigate to http://localhost:8000 (or your server's URL) in your web browser.

⚙️ Configuration

Contract Addresses

The config.json file contains an array of contract addresses to monitor:

{
  "contracts": [
    "0x1234567890123456789012345678901234567890",
    "0xabcdefabcdefabcdefabcdefabcdefabcdefabcd"
  ]
}

To add new contracts:

1. Open config.json
2. Add the contract address to the contracts array
3. Save the file
4. Refresh the dashboard

Minting Event Detection

The dashboard automatically detects standard minting events from your contracts. It looks for:

• Transfer events from zero address (0x0000...)
• Standard ERC-721/ERC-1155 minting patterns
• Event values are interpreted as scores

🔧 Technical Details

Architecture

• Frontend: Pure HTML5, CSS3, and JavaScript (ES6+)
• Web3 Library: Web3.js for blockchain interaction
• Network: Polygon Amoy Testnet (Chain ID: 80002)
• RPC Endpoint: https://rpc-amoy.polygon.technology/

How It Works

1. Configuration Loading: Reads contract addresses from config.json
2. Web3 Connection: Connects to Polygon Amoy testnet
3. Event Fetching: Queries minting events from each contract
4. Score Processing: Extracts score values from event data
5. Visualization: Displays scores in horizontal bar format
6. Auto-Refresh: Periodically updates scores

Event Processing

The dashboard processes minting events by:

• Filtering for Transfer events from zero address
• Extracting token IDs or values as scores
• Aggregating scores across all contracts
• Sorting by highest values

🎨 Customization

Styling

Modify style.css to customize:

• Color schemes
• Bar chart appearance
• Layout and typography
• Responsive breakpoints

Refresh Interval

Edit script.js to change the auto-refresh interval:

const REFRESH_INTERVAL = 30000; // 30 seconds

Display Options

Customize the number of top scores displayed:

const MAX_SCORES_DISPLAY = 10; // Show top 10 scores

🐛 Troubleshooting

Common Issues

"Connection Failed" Error

• Check your internet connection
• Verify the RPC endpoint is accessible
• Try refreshing the page

"No Scores Found"

• Verify contract addresses are correct
• Ensure contracts have minting events
• Check if contracts are deployed on Polygon Amoy

Scores Not Updating

• Check browser console for errors
• Verify contract addresses in config.json
• Ensure contracts are active and have recent transactions

Browser Console

Open browser developer tools (F12) and check the console for detailed error messages.

🔗 Useful Links

• Polygon Amoy Testnet
• Web3.js Documentation
• Polygon Amoy Explorer
• Polygon Faucet

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow existing code style
• Test with multiple contract addresses
• Ensure mobile responsiveness
• Add error handling for new features

📄 License

This project is open source and available under the MIT License.

🆘 Support

If you encounter issues or have questions:

1. Check the troubleshooting section above
2. Review browser console errors
3. Open an issue on GitHub
4. Provide contract addresses and error details

---

Happy tracking! 🚀