mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-26 08:47:56 +00:00
feat(web): add network subpages and subdomains listing page
- Add /subdomains page listing all 20 PezkuwiChain subdomains - Add Back to Home button to Subdomains page - Create NetworkPage reusable component for network details - Add 7 network subpages: /mainnet, /staging, /testnet, /beta, /alfa, /development, /local - Update ChainSpecs network cards to navigate to network subpages - Add i18n translations for chainSpecs section in en.ts - Add SDK docs with rebranding support (rebrand-rustdoc.cjs) - Add generate-docs-structure.cjs for automatic docs generation - Update shared libs: endpoints, polkadot, wallet, xcm-bridge - Add new token logos: TYR, ZGR, pezkuwi_icon - Add new pages: Explorer, Docs, Wallet, Api, Faucet, Developers, Grants, Wiki, Forum, Telemetry
This commit is contained in:
@@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { CheckCircle, Zap, Server, Globe } from 'lucide-react';
|
||||
|
||||
const Telemetry: React.FC = () => {
|
||||
|
||||
const validators = [
|
||||
{ name: 'Validator A', stake: '1.2M HEZ', uptime: 99.98, status: 'Active' },
|
||||
{ name: 'Validator B', stake: '1.1M HEZ', uptime: 99.95, status: 'Active' },
|
||||
{ name: 'Validator C', stake: '1.0M HEZ', uptime: 99.92, status: 'Active' },
|
||||
{ name: 'Validator D', stake: '0.9M HEZ', uptime: 99.80, status: 'Active' },
|
||||
{ name: 'Validator E', stake: '0.8M HEZ', uptime: 100, status: 'Waiting' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="container mx-auto px-4 py-8 text-white">
|
||||
<h1 className="text-4xl font-bold mb-8">Network Telemetry</h1>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-gray-400">Best Finalized Block</h3>
|
||||
<p className="text-2xl font-bold">1,234,567</p>
|
||||
</div>
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-gray-400">Average Block Time</h3>
|
||||
<p className="text-2xl font-bold">6.0s</p>
|
||||
</div>
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-gray-400">Active Nodes</h3>
|
||||
<p className="text-2xl font-bold">1,234</p>
|
||||
</div>
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-gray-400">Validators</h3>
|
||||
<p className="text-2xl font-bold">42</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2 bg-gray-800 p-6 rounded-lg">
|
||||
<h2 className="text-2xl font-bold mb-4 flex items-center">
|
||||
<Server className="mr-3 text-blue-400" />
|
||||
Validators
|
||||
</h2>
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-700">
|
||||
<th className="py-2">Name</th>
|
||||
<th className="py-2 text-right">Total Stake</th>
|
||||
<th className="py-2 text-right">Uptime</th>
|
||||
<th className="py-2 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{validators.map((validator, index) => (
|
||||
<tr key={index} className="border-b border-gray-700">
|
||||
<td className="py-3 font-semibold">{validator.name}</td>
|
||||
<td className="py-3 text-right">{validator.stake}</td>
|
||||
<td className="py-3 text-right">{validator.uptime}%</td>
|
||||
<td className="py-3 text-right">
|
||||
<span className={`px-2 py-1 text-xs font-bold rounded-full ${validator.status === 'Active' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}`}>
|
||||
{validator.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="bg-gray-800 p-6 rounded-lg">
|
||||
<h2 className="text-2xl font-bold mb-4 flex items-center">
|
||||
<Globe className="mr-3 text-green-400" />
|
||||
Node Map
|
||||
</h2>
|
||||
<div className="h-64 bg-gray-700 rounded-lg flex items-center justify-center">
|
||||
<p className="text-gray-500">Node map visualization placeholder</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mt-4">
|
||||
Note: A fully functional telemetry site already exists at <a href="https://telemetry.pezkuwichain.io/" target="_blank" rel="noopener noreferrer" className="text-blue-400 underline">telemetry.pezkuwichain.io</a>.
|
||||
This page is a placeholder for a new, integrated design.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Telemetry;
|
||||
Reference in New Issue
Block a user