diff --git a/src/App.tsx b/src/App.tsx index 840cb59..43a8e16 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -42,6 +42,7 @@ const NotFound = lazy(() => import('./pages/NotFound')); const Contributors = lazy(() => import('./pages/Contributors')); const Blog = lazy(() => import('./pages/Blog')); const Ecosystem = lazy(() => import('./pages/Ecosystem')); +const ChainsPage = lazy(() => import('./pages/Chains')); function Home() { return ( @@ -205,6 +206,14 @@ export default function App() { } /> + + + + } + /> } /> diff --git a/src/data/README.md b/src/data/README.md index 01480fe..b32d87d 100644 --- a/src/data/README.md +++ b/src/data/README.md @@ -117,3 +117,54 @@ Opted-out authors (those in `authors-optout.json` or with `optIn: false`) collap ## `authors-optout.json` A flat array of author ids that should never get a public author page and collapse to "Wraith Team" in bylines. + +## `chains.json` + +Powers the /chains comparison matrix page. + +### Schema + +```typescript +interface ChainsData { + /** Page heading */ + title: string; + /** Introductory paragraph */ + description: string; + /** Column definitions for the matrix table */ + columns: Array<{ + /** Internal key matching chain object properties */ + key: string; + /** Display header label */ + label: string; + /** Whether the column is sortable (numeric values) */ + sortable: boolean; + /** Optional unit suffix displayed after the value */ + unit?: string; + }>; + /** Chain entries displayed as matrix rows */ + chains: Array<{ + /** URL-safe identifier */ + id: string; + /** Display name */ + name: string; + /** Average block time in seconds */ + blockTime: number; + /** Median transaction fee in USD */ + medianFee: number; + /** Finality description (e.g. consensus mechanism) */ + finality: string; + /** Supported wallet names */ + wallets: string; + /** Integration status: live | testnet | devnet | planned */ + status: string; + /** Audit information */ + audit: string; + /** Link to chain-specific Wraith docs */ + docs: string; + /** Expanded description shown in row detail */ + description: string; + }>; +} +``` + +Each chain entry must include a documented `description` explaining the chain's role in the Wraith ecosystem and a `docs` link pointing to the relevant integration guide. diff --git a/src/data/chains.json b/src/data/chains.json new file mode 100644 index 0000000..98a0760 --- /dev/null +++ b/src/data/chains.json @@ -0,0 +1,100 @@ +{ + "title": "Chain Comparison Matrix", + "description": "A side-by-side comparison of blockchain networks supported or planned for Wraith Protocol, covering finality, fees, wallet support, and integration status.", + "columns": [ + { "key": "name", "label": "Chain", "sortable": false }, + { "key": "blockTime", "label": "Block Time", "sortable": true, "unit": "s" }, + { "key": "medianFee", "label": "Median TX Fee", "sortable": true, "unit": "USD" }, + { "key": "finality", "label": "Finality", "sortable": false }, + { "key": "wallets", "label": "Wallet Ecosystem", "sortable": false }, + { "key": "status", "label": "Wraith Status", "sortable": false }, + { "key": "audit", "label": "Audit Posture", "sortable": false }, + { "key": "docs", "label": "Docs", "sortable": false } + ], + "chains": [ + { + "id": "horizen", + "name": "Horizen", + "blockTime": 2.5, + "medianFee": 0.001, + "finality": "PoW + zk-SNARK sidechains", + "wallets": "Horizen Wallet, MetaMask (EON)", + "status": "live", + "audit": "In-house + third-party", + "docs": "https://docs.usewraith.xyz/chains/horizen", + "description": "Horizen EON is an EVM-compatible sidechain with low fees and fast block times. Wraith stealth addresses are fully operational on EON mainnet with SDK support for send and scan flows." + }, + { + "id": "stellar", + "name": "Stellar", + "blockTime": 5.5, + "medianFee": 0.0001, + "finality": "SCP (federated Byzantine agreement)", + "wallets": "Freighter,LOBSTR,Rabet", + "status": "live", + "audit": "Stellar Development Foundation audits", + "docs": "https://docs.usewraith.xyz/chains/stellar", + "description": "Stellar offers sub-cent transaction fees and deterministic finality. Wraith stealth addresses on Stellar use the Soroban smart contract layer for on-chain scanning and withdrawal." + }, + { + "id": "solana", + "name": "Solana", + "blockTime": 0.4, + "medianFee": 0.00025, + "finality": "Tower BFT + PoH", + "wallets": "Phantom, Solflare, Backpack", + "status": "devnet", + "audit": "In progress", + "docs": "https://docs.usewraith.xyz/chains/solana", + "description": "Solana provides high throughput with sub-second block times. Wraith stealth addresses on Solana are in active development on devnet, targeting low-latency privacy transfers." + }, + { + "id": "nervos-ckb", + "name": "Nervos CKB", + "blockTime": 8, + "medianFee": 0.001, + "finality": "Nakamoto (probabilistic, ~3 blocks)", + "wallets": "Neuron, JoyID", + "status": "testnet", + "audit": "Nervos Foundation audits", + "docs": "https://docs.usewraith.xyz/chains/nervos", + "description": "Nervos CKB uses a UTXO model with RISC-V smart contracts. Wraith stealth addresses leverage CKB's cell model for on-chain lock ownership verification." + }, + { + "id": "ethereum", + "name": "Ethereum", + "blockTime": 12, + "medianFee": 2.5, + "finality": "Gasper (PoS, ~15 min)", + "wallets": "MetaMask, Ledger, Rainbow, Coinbase Wallet", + "status": "planned", + "audit": "Pending", + "docs": "https://docs.usewraith.xyz/chains/ethereum", + "description": "Ethereum mainnet support is planned for a future release. Higher fees are offset by the deepest wallet ecosystem and largest DeFi surface." + }, + { + "id": "polygon", + "name": "Polygon PoS", + "blockTime": 2, + "medianFee": 0.01, + "finality": "Bor (PoS, checkpointing to L1)", + "wallets": "MetaMask, Ledger, Rainbow", + "status": "planned", + "audit": "Pending", + "docs": "https://docs.usewraith.xyz/chains/polygon", + "description": "Polygon PoS offers EVM compatibility with low fees. Wraith support is planned to extend stealth payments to Polygon's growing DeFi ecosystem." + }, + { + "id": "base", + "name": "Base", + "blockTime": 2, + "medianFee": 0.05, + "finality": "Optimistic rollup (L1 finality ~7 days)", + "wallets": "MetaMask, Coinbase Wallet, Rainbow", + "status": "planned", + "audit": "Pending", + "docs": "https://docs.usewraith.xyz/chains/base", + "description": "Base is an Optimism-powered L2 with Coinbase distribution. Planned Wraith integration targets the L2's growing developer and consumer app ecosystem." + } + ] +} diff --git a/src/pages/Chains.tsx b/src/pages/Chains.tsx new file mode 100644 index 0000000..3425b6d --- /dev/null +++ b/src/pages/Chains.tsx @@ -0,0 +1,249 @@ +import { useState, useMemo } from 'react'; +import { Helmet } from 'react-helmet-async'; +import chainsData from '../data/chains.json'; +import { track } from '../utils/track'; + +type SortDirection = 'asc' | 'desc'; + +interface SortState { + key: string; + direction: SortDirection; +} + +const STATUS_COLORS: Record = { + live: 'text-[#22c55e] bg-[#22c55e]/10', + testnet: 'text-primary bg-surface-bright', + devnet: 'text-primary bg-surface-bright', + planned: 'text-outline bg-surface-bright', +}; + +const STATUS_LABELS: Record = { + live: 'Live', + testnet: 'Testnet', + devnet: 'Devnet', + planned: 'Planned', +}; + +function SortIcon({ direction }: { direction?: SortDirection }) { + if (!direction) return null; + return ( + + {direction === 'asc' ? '\u25B2' : '\u25BC'} + + ); +} + +export default function Chains() { + const [sort, setSort] = useState(null); + const [filter, setFilter] = useState('all'); + const [expandedRow, setExpandedRow] = useState(null); + + const filteredChains = useMemo(() => { + let chains = [...chainsData.chains]; + if (filter !== 'all') { + chains = chains.filter((c) => c.status === filter); + } + if (sort) { + chains.sort((a, b) => { + const aVal = a[sort.key as keyof typeof a]; + const bVal = b[sort.key as keyof typeof b]; + if (typeof aVal === 'number' && typeof bVal === 'number') { + return sort.direction === 'asc' ? aVal - bVal : bVal - aVal; + } + return 0; + }); + } + return chains; + }, [sort, filter]); + + const handleSort = (key: string) => { + setSort((prev) => { + if (prev?.key === key) { + if (prev.direction === 'asc') return { key, direction: 'desc' }; + return null; + } + return { key, direction: 'asc' }; + }); + track('chain_matrix_sort', { + column: key, + direction: sort?.key === key && sort.direction === 'asc' ? 'desc' : 'asc', + }); + }; + + const toggleRow = (id: string) => { + setExpandedRow((prev) => (prev === id ? null : id)); + }; + + return ( + <> + + Chain Comparison Matrix — Wraith Protocol + + + +
+
+

+ {chainsData.title} +

+

+ {chainsData.description} +

+
+ +
+ {['all', 'live', 'testnet', 'devnet', 'planned'].map((status) => ( + + ))} +
+ +
+ + + + {chainsData.columns.map((col) => ( + + ))} + + + + {filteredChains.map((chain) => ( + <> + toggleRow(chain.id)} + > + + + + + + + + + + {expandedRow === chain.id && ( + + + + )} + + ))} + {filteredChains.length === 0 && ( + + + + )} + +
handleSort(col.key) : undefined} + > + + {col.label} + {col.sortable && sort?.key === col.key && ( + + )} + +
+ + {chain.name} + + + {chain.blockTime}s + + + ${chain.medianFee.toLocaleString('en-US', { minimumFractionDigits: 3 })} + + + + {chain.finality} + + + + {chain.wallets} + + + + {STATUS_LABELS[chain.status] || chain.status} + + + + {chain.audit} + + + e.stopPropagation()} + > + Docs + +
+

+ {chain.description} +

+
+ No chains match the current filter. +
+
+ +
+

Data Sources

+

+ Block times, fees, and finality data are sourced from each chain's public + documentation and block explorers. Fee values represent approximate median USD cost at + time of writing and may vary with network congestion. Audit posture reflects the latest + publicly available information from each project. +

+
+ +
+

+ Looking to integrate? Check the{' '} + + SDK documentation + {' '} + for getting started guides per chain. +

+
+
+ + ); +}