Skip to content

feat: add Stellar Consensus Protocol (SCP) Visualizer - Issue #723#784

Open
Danielobito009 wants to merge 1 commit into
StellarDevHub:mainfrom
Danielobito009:feat/scp-visualizer-723
Open

feat: add Stellar Consensus Protocol (SCP) Visualizer - Issue #723#784
Danielobito009 wants to merge 1 commit into
StellarDevHub:mainfrom
Danielobito009:feat/scp-visualizer-723

Conversation

@Danielobito009

Copy link
Copy Markdown

Summary

Implements Issue #723 — Interactive Stellar Consensus Protocol
(SCP) Visualizer demonstrating Nomination and Ballot phases.

What Was Built

A production-ready interactive node network map showing how SCP
achieves consensus through Nomination and Ballot phases.

Files Added

  • src/components/stellar-scp/SCPVisualizer.tsx — main component
  • src/components/stellar-scp/SCPVisualizer.test.tsx — 18 tests
  • src/components/stellar-scp/index.ts — exports
  • src/components/stellar-scp/README.md — documentation
  • src/app/stellar-consensus-protocol/page.tsx — demo page

Features

Visualization

  • 7 validator nodes in circular layout
  • D3.js SVG rendering with 300ms smooth transitions
  • Animated edges showing message passing
    (nominate → vote → accept → confirm)
  • Quorum set connections (3-node quorum per validator)

Simulation

  • Nomination Phase — 3 steps
  • Ballot Phase — 4 steps
  • 6 node states: idle, nominating, voting, accepted,
    confirmed, failed
  • Node failure simulation (click any node to toggle)
  • 66% Byzantine fault tolerance threshold

Controls

  • Start / Pause / Step / Reset buttons
  • Speed adjustment (0.2x — 6x)
  • Phase indicator and round counter
  • Consensus reached/failed status

Acceptance Criteria

  • ✅ Visual diagram showing nodes voting and reaching agreement
  • ✅ Node failure/split simulation demonstrating consensus safety
  • ✅ Real-time ballot transitions when nodes cast consensus votes
  • ✅ React + D3.js rendering

Quality

  • ✅ WCAG 2.1 Level AA accessibility
  • ✅ Tailwind CSS dark theme
  • ✅ Responsive layout
  • ✅ Zero TypeScript errors
  • ✅ 18/18 unit tests passing
  • ✅ Zero new dependencies added

Demo

Visit: /stellar-consensus-protocol

import { SCPVisualizer } from '@/components/stellar-scp';

<SCPVisualizer />

Closes #723

…DevHub#723

- Interactive D3.js-powered visualization of Nomination and Ballot phases
- 7 validator nodes in circular layout with quorum sets
- Node failure simulation (click to toggle)
- Real-time state transitions with color coding
- Complete controls panel: Start/Pause/Step/Reset/Speed adjustment
- Phase descriptions and consensus status display
- WCAG 2.1 Level AA accessibility compliance
- 18 comprehensive unit tests (100% pass rate)
- Demo page at /stellar-consensus-protocol
- Tailwind CSS dark theme styling
- Zero new dependencies (uses D3.js already installed)
@vercel

vercel Bot commented Jun 26, 2026

Copy link
Copy Markdown

@Alu-card19 is attempting to deploy a commit to the Ayomide Adeniran's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jun 26, 2026

Copy link
Copy Markdown

@Danielobito009 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Design Stellar Consensus Protocol (SCP) Visualizer

2 participants