Realtime Crypto Dashboard Block using React

An enterprise-grade, high-performance Gutenberg block that bridges WordPress and WebSockets to render real-time data visualizations.

By default, this block connects to the Binance WebSocket API to stream live cryptocurrency trades, but it can be configured in the editor to accept any public wss:// endpoint.

🚀 Features

• Zero Server Load: Establishes direct client-to-server WebSockets. Your WordPress server simply delivers the initial JS payload, the user's browser handles the live data stream.
• Hardware Network Bridging: Aggressive memory management. The block listens to native browser network events and instantly clears "zombie" sockets if the user loses Wi-Fi, auto-healing the connection with a DNS-stable delay when the network returns.
• Performance Throttling: Built-in React state throttling. Users can configure the chart to repaint anywhere from every 100ms (Hyper-Active) to 3000ms (Relaxed) to optimize CPU and battery life.
• Strict Architecture: 100% strongly typed with TypeScript, utilizing modular SCSS with CSS Custom Properties for seamless theming and dark mode support.

🛠️ Tech Stack

• Core: WordPress Block API (Gutenberg)
• Frontend: React (@wordpress/element)
• Visualization: Recharts (D3.js)
• Language: TypeScript (Strict Mode)
• Testing: Jest & React Testing Library
• Build Tool: Webpack (@wordpress/scripts)

🧩 Developer Extensibility (Hooks & Filters)

Built with a "Plug-and-Play" mindset, this block exposes both PHP and JavaScript filters, allowing theme developers to customize default behavior and extend UI controls.

1. JavaScript Filters (Editor UI)

Extend the block sidebar dropdowns using the WordPress Hooks API:

javascript
import { addFilter } from '@wordpress/hooks';

addFilter('uvRealtimeCryptoDashboard.streamOptions', 'my-theme', (options) => [
    ...options,
    { label: 'Cardano (ADA/USDT)', value: 'wss://stream.binance.com:9443/ws/adausdt@trade' }
]);

addFilter('uvRealtimeCryptoDashboard.refreshRateOptions', 'my-theme', (options) => [
    ...options,
    { label: 'Ultra Slow (5s)', value: 5000 }
]);

2. PHP Filters (Server-Side Defaults)

Override global fallback settings via your themes functions.php:

// Override the default global WebSocket stream
add_filter('uv_realtime_crypto_dashboard_default_stream', function() {
    return 'wss://stream.binance.com:9443/ws/ethusdt@trade';
});

// Override the default global refresh rate
add_filter('uv_realtime_crypto_dashboard_default_refresh', function() {
    return 2000;
});

📸 Screenshots

1. Live Dashboard Rendering (Default Bitcoin Stream)

2. Custom WebSocket Configuration

3. Active Custom Stream (Binance Coin)

4. CPU Performance Throttling Controls

5. Graceful Error Handling & Silent Failure Detection

6. CI/CD: Passing Jest Test Suite

🔒 Security & Data Integrity

• Read-Only Pipeline: The connection to WebSocket endpoints is strictly read-only. No user data, site credentials, or sensitive headers are ever transmitted to external servers.
• External Service: This plugin connects to the Binance WebSocket API (stream.binance.com) entirely on the client-side.
• Compliance: No cookies, no telemetry, and no tracking.
• Protocol Enforcement: Utilizing strict WordPress escaping, the block only permits secure wss:// and ws:// protocols, preventing XSS injections.

✨ Accessibility (WCAG 2.2)

Inclusive design is a core requirement of this project:

• ARIA Live Regions: Real-time price updates utilize aria-live="polite" regions to ensure screen readers announce value changes without interrupting the user's flow.
• Keyboard Operability: All interactive elements, including custom URL inputs and refresh rate selectors, are fully navigable via keyboard with high-visibility focus states.
• Reduced Motion: The charting engine respects the prefers-reduced-motion system preference, disabling transitions for users with vestibular sensitivities.

📦 Installation

For Site Owners (Production)

1. Download the latest compiled release .zip from the Releases tab.
2. Upload to your WordPress installation via Plugins > Add New.
3. Activate the plugin.
4. Add the UV Realtime Crypto Dashboard block to any post or page.

For Developers (Local Setup)

1. Clone the repository into your local WordPress wp-content/plugins/ directory:

   git clone [https://github.com/your-username/uv-realtime-crypto-dashboard.git](https://github.com/your-username/uv-realtime-crypto-dashboard.git)

2. Navigate into the directory and install dependencies:

   cd uv-realtime-crypto-dashboard
   npm install

3. Start the Webpack watch process for local development:

   npm run start

💻 Available Commands

• npm run start - Compiles development assets and watches for changes.
• npm run build - Compiles, minifies, and tree-shakes production assets.
• npm run test - Runs the Jest test suite.
• npm run format - Formats TypeScript and SCSS files using Prettier.
• npm run lint:js - Lints JavaScript/TypeScript files via ESLint.

🧪 Testing & QA

This project is built using Test-Driven Development (TDD) to ensure architectural stability. The test suite isolates the React hooks and mocks the browser's native WebSocket API and JSDOM network events.

To run the test suite:

npm run test

Test Coverage Includes:

• WebSocket connection and JSON payload parsing.
• Hardware disconnect event listeners (Socket assassination).
• Auto-healing intervals (3-second reconnect loops).

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please ensure you run npm run format and npm run test before submitting a PR to maintain the strict wordpress coding standards of this repository.

📄 License

This project is licensed under the GPL-2.0-or-later License.