Add more features to the testnet app, as a crypto developer - Follow Up Deployment

index.html

@@ -46,9 +46,26 @@
                     <h1 class="text-2xl md:text-3xl font-bold">FlameBorn Testnet Suite</h1>
                 </div>
                 <div class="flex items-center space-x-4">
-                    <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium">ERC20</span>
-                    <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium">African Identity</span>
-                    <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium">AccessControl</span>
+                    <button id="connectWallet" class="px-3 py-1 bg-white text-orange-600 rounded-full text-sm font-medium hover:bg-opacity-100 transition-all">
+                        <i class="fas fa-wallet mr-1"></i> Connect Wallet
+                    </button>
+                    <div class="relative group">
+                        <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm font-medium flex items-center">
+                            <span class="w-2 h-2 rounded-full bg-green-400 mr-2 animate-pulse"></span>
+                            Testnet LIVE
+                        </span>
+                        <div class="absolute hidden group-hover:block bg-gray-800 text-xs p-2 rounded shadow-lg z-10 w-48">
+                            ChainID: 9818 (FlameBorn Testnet)<br>
+                            RPC: https://rpc.flameborn.io<br>
+                            Faucet: /faucet
+                        </div>
+                    </div>
+                    <a href="#deploy" class="px-3 py-1 bg-white text-orange-600 rounded-full text-sm font-medium hover:bg-opacity-100 transition-all">
+                        <i class="fas fa-rocket mr-1"></i> Quick Deploy
+                    </a>
+                    <a href="https://github.com/flameborn/testnet" target="_blank" class="px-3 py-1 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full text-sm font-medium transition-all">
+                        <i class="fab fa-github mr-1"></i> GitHub
+                    </a>
                 </div>
             </div>
         </div>
@@ -56,6 +73,34 @@
 
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
+        <!-- Network Status Section -->
+        <section class="mb-6 bg-white rounded-xl shadow-md p-6">
+            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
+                <i class="fas fa-network-wired mr-2 text-blue-500"></i> Network Status
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <p class="text-gray-500 text-sm">Current Block</p>
+                    <p class="font-bold text-gray-800" id="currentBlock">Loading...</p>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <p class="text-gray-500 text-sm">Gas Price</p>
+                    <p class="font-bold text-gray-800" id="gasPrice">Loading...</p>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <p class="text-gray-500 text-sm">Chain ID</p>
+                    <p class="font-bold text-gray-800">9818</p>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <p class="text-gray-500 text-sm">Node Status</p>
+                    <p class="font-bold text-gray-800 flex items-center">
+                        <span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span>
+                        Synced
+                    </p>
+                </div>
+            </div>
+        </section>
+
         <!-- Overview Section -->
         <section class="mb-12 bg-white rounded-xl shadow-md p-6">
             <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
@@ -112,6 +157,28 @@
                 </div>
             </div>
             
+            <!-- Network Selector -->
+            <div class="bg-white rounded-xl shadow-md p-4 mb-6 flex flex-wrap items-center justify-between">
+                <div class="mb-4 md:mb-0">
+                    <h3 class="font-semibold text-gray-800">Select Test Network</h3>
+                    <p class="text-sm text-gray-600">Run tests across multiple EVM chains</p>
+                </div>
+                <div class="flex flex-wrap gap-2">
+                    <button class="px-3 py-1 bg-orange-500 text-white rounded-full text-sm flex items-center">
+                        <i class="fas fa-fire mr-1"></i> FlameBorn
+                    </button>
+                    <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm flex items-center">
+                        <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-4 h-4 mr-1"> Sepolia
+                    </button>
+                    <button class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm flex items-center">
+                        <img src="https://cryptologos.cc/logos/polygon-matic-logo.png" class="w-4 h-4 mr-1"> Mumbai
+                    </button>
+                    <button class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm flex items-center">
+                        <img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" class="w-4 h-4 mr-1"> BSC Testnet
+                    </button>
+                </div>
+            </div>
+
             <!-- Test Cards -->
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Contract Metadata -->
@@ -302,6 +369,104 @@
             </div>
         </section>
         
+        <!-- Contract Verification -->
+        <section class="mb-12 bg-white rounded-xl shadow-md p-6">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
+                <i class="fas fa-check-circle mr-2 text-green-500"></i> Contract Verification
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="bg-gray-50 p-6 rounded-lg">
+                    <h3 class="font-semibold text-gray-700 mb-4">Verify Contract</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Contract Address</label>
+                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Compiler Version</label>
+                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500">
+                                <option>0.8.19</option>
+                                <option>0.8.20</option>
+                                <option>0.8.21</option>
+                            </select>
+                        </div>
+                        <button class="w-full py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-md font-medium">
+                            Verify & Publish
+                        </button>
+                    </div>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-lg">
+                    <h3 class="font-semibold text-gray-700 mb-4">Verified Contracts</h3>
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead>
+                                <tr>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Address</th>
+                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Date</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-200">
+                                <tr>
+                                    <td class="px-4 py-2 text-sm text-gray-500">0x8f7a...3e4b</td>
+                                    <td class="px-4 py-2 text-sm text-gray-500">2023-11-15</td>
+                                </tr>
+                                <tr>
+                                    <td class="px-4 py-2 text-sm text-gray-500">0x5b32...9d1f</td>
+                                    <td class="px-4 py-2 text-sm text-gray-500">2023-11-14</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Faucet Section -->
+        <section class="mb-12 bg-white rounded-xl shadow-md p-6" id="faucet">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
+                <i class="fas fa-faucet mr-2 text-blue-500"></i> Testnet Faucet
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-lg">
+                    <h3 class="font-semibold text-gray-700 mb-4">Request Test Tokens</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Wallet Address</label>
+                            <input type="text" id="faucetAddress" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Token Type</label>
+                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option>FLB (Native Token)</option>
+                                <option>Test USDT</option>
+                                <option>Test USDC</option>
+                            </select>
+                        </div>
+                        <button id="requestFaucet" class="w-full py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md font-medium">
+                            Request 1000 FLB
+                        </button>
+                    </div>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-lg">
+                    <h3 class="font-semibold text-gray-700 mb-4">Faucet Stats</h3>
+                    <div class="space-y-4">
+                        <div class="flex justify-between">
+                            <span class="text-sm text-gray-600">Total Distributed</span>
+                            <span class="font-medium">5,420,000 FLB</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-sm text-gray-600">Requests Today</span>
+                            <span class="font-medium">142</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-sm text-gray-600">Your Daily Limit</span>
+                            <span class="font-medium">5,000 FLB</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <!-- Code Snippets -->
         <section class="mb-12 bg-white rounded-xl shadow-md p-6">
             <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
@@ -386,6 +551,66 @@
             </div>
         </section>
         
+        <!-- Leaderboard Section -->
+        <section class="bg-white rounded-xl shadow-md p-6 mb-8">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
+                <i class="fas fa-trophy mr-2 text-yellow-500"></i> Testnet Leaderboard
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-gradient-to-br from-orange-50 to-red-50 p-4 rounded-lg">
+                    <h3 class="font-semibold text-gray-800 mb-2">Top Developers</h3>
+                    <ol class="space-y-2 text-sm">
+                        <li class="flex justify-between">
+                            <span>0x8f7a...3e4b</span>
+                            <span class="font-medium">142 tests</span>
+                        </li>
+                        <li class="flex justify-between">
+                            <span>0x5b32...9d1f</span>
+                            <span class="font-medium">118 tests</span>
+                        </li>
+                        <li class="flex justify-between">
+                            <span>0x1c7d...4a2e</span>
+                            <span class="font-medium">97 tests</span>
+                        </li>
+                    </ol>
+                </div>
+                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg">
+                    <h3 class="font-semibold text-gray-800 mb-2">Bug Bounties</h3>
+                    <ol class="space-y-2 text-sm">
+                        <li class="flex justify-between">
+                            <span>Critical</span>
+                            <span class="font-medium">5,000 FLB</span>
+                        </li>
+                        <li class="flex justify-between">
+                            <span>High</span>
+                            <span class="font-medium">2,500 FLB</span>
+                        </li>
+                        <li class="flex justify-between">
+                            <span>Medium</span>
+                            <span class="font-medium">1,000 FLB</span>
+                        </li>
+                    </ol>
+                </div>
+                <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-4 rounded-lg">
+                    <h3 class="font-semibold text-gray-800 mb-2">Network Stats</h3>
+                    <ul class="space-y-2 text-sm">
+                        <li class="flex justify-between">
+                            <span>Total Tests</span>
+                            <span class="font-medium">1,842</span>
+                        </li>
+                        <li class="flex justify-between">
+                            <span>Contracts Deployed</span>
+                            <span class="font-medium">317</span>
+                        </li>
+                        <li class="flex justify-between">
+                            <span>Unique Users</span>
+                            <span class="font-medium">189</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
         <!-- Manual QA Section -->
         <section class="bg-white rounded-xl shadow-md p-6 mb-12">
             <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
@@ -486,12 +711,65 @@
                 </div>
             </div>
             <div class="border-t border-white border-opacity-20 mt-6 pt-6 text-sm text-center md:text-left">
-                <p>© 2023 FlameBorn Project. All rights reserved.</p>
+                <div class="flex flex-col md:flex-row justify-between">
+                    <div class="mb-4 md:mb-0">
+                        <p>© 2023 FlameBorn Project. All rights reserved.</p>
+                        <p class="text-xs opacity-70 mt-1">Testnet tokens have no monetary value</p>
+                    </div>
+                    <div class="flex flex-wrap gap-x-4 gap-y-2 justify-center md:justify-end">
+                        <a href="#" class="hover:underline">Terms</a>
+                        <a href="#" class="hover:underline">Privacy</a>
+                        <a href="#" class="hover:underline">Bug Bounty</a>
+                        <a href="#" class="hover:underline">Documentation</a>
+                        <a href="#" class="hover:underline">Audit Reports</a>
+                    </div>
+                </div>
             </div>
         </div>
     </footer>
 
     <script>
+        // Wallet connection
+        document.getElementById('connectWallet').addEventListener('click', async () => {
+            if (window.ethereum) {
+                try {
+                    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
+                    console.log('Connected:', accounts[0]);
+                    document.getElementById('connectWallet').innerHTML = 
+                        `<i class="fas fa-check-circle mr-1"></i> ${accounts[0].slice(0, 6)}...${accounts[0].slice(-4)}`;
+                    document.getElementById('faucetAddress').value = accounts[0];
+                } catch (error) {
+                    console.error('User rejected request:', error);
+                }
+            } else {
+                alert('Please install MetaMask!');
+            }
+        });
+
+        // Faucet request
+        document.getElementById('requestFaucet').addEventListener('click', () => {
+            const address = document.getElementById('faucetAddress').value;
+            if (!address) {
+                alert('Please enter a wallet address');
+                return;
+            }
+            if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
+                alert('Invalid Ethereum address');
+                return;
+            }
+            alert(`1000 FLB requested for ${address}. This is a simulation - on a real testnet, tokens would be sent.`);
+        });
+
+        // Simulate network status updates
+        function updateNetworkStatus() {
+            document.getElementById('currentBlock').textContent = 
+                Math.floor(Math.random() * 1000000).toLocaleString();
+            document.getElementById('gasPrice').textContent = 
+                `${(Math.random() * 50).toFixed(2)} Gwei`;
+        }
+        setInterval(updateNetworkStatus, 5000);
+        updateNetworkStatus();
+
         // Simulate progress bar animation
         document.addEventListener('DOMContentLoaded', function() {
             const progressBar = document.querySelector('.progress-bar');