Syscoin Sentrynode Registry DApp

A lightweight, client-side web application for viewing, filtering, and verifying the on-chain status of Syscoin Sentrynodes (Masternodes). This tool provides a user-friendly interface to a sentrynode list and enables direct on-chain verification of a node's collateral height against the NEVM registry smart contract.

---

✨ Features

• Network Switching: Seamlessly toggle between Syscoin Mainnet and Tanenbaum Testnet.
• Live Data: Fetches and displays the latest sentrynode list, refreshing automatically every 60 seconds.
• Powerful Filtering:
  • Search by IP address or NEVM address.
  • Toggle visibility for nodes that are not registered on the NEVM chain.
  • Toggle visibility for POSE_BANNED nodes.
• On-Chain Verification:
  • Click "Verify" on any node to open a modal with details.
  • The app connects to the corresponding network's RPC endpoint via ethers.js.
  • It calls the getCollateralHeight function on the NEVM registry smart contract.
  • It compares the on-chain height with the height reported by the API, showing a clear ✅ MATCH or ❌ MISMATCH status.
• Direct Explorer Links: Quickly jump to the Syscoin block explorer to view a node's ProTxHash details.
• Responsive UI: Clean, modern, and usable on various screen sizes.

---

🏗️ How It Works (Architecture)

This project has two main components: a backend data pipeline that prepares the node list and a frontend React application that displays and interacts with it.

1. Backend Data Pipeline (Static JSON API)

The application consumes a simple JSON file, which is served via a standard web server like Nginx. This "API" is generated and updated by a cron job running a shell script. This approach avoids the need for a complex server-side application.

Flow: syscoin-cli -> pull_mnlist.sh -> masternode_list-compact.json -> Nginx -> Frontend App

• pull_mnlist.sh: A POSIX-compliant shell script that:
  1. Executes syscoin-cli masternode_list to get the raw, complete list of nodes.
  2. Uses jq to parse the raw JSON and extract only the necessary fields (proTxHash, address, status, nevmaddress, collateralheight).
  3. Writes the trimmed-down data to masternode_list-compact.json.
  4. Compares a hash of the new data with the old data. It only overwrites the file if changes are detected, which preserves the file's modification time and allows for efficient HTTP caching (ETag, Last-Modified).
• Nginx (or other web server):
  1. Serves the masternode_list-compact.json file at a public API endpoint (e.g., /api/sentrynode).
  2. The provided nginx-example.conf includes important headers for caching (Cache-Control) and cross-origin resource sharing (CORS).

2. Frontend Application (React + Vite)

A standard client-side Single Page Application (SPA) built with React and Vite.

• App.jsx: The main component that fetches the node list from the API endpoint defined in src/config.js. It manages all application state, including filters, search terms, and the currently selected network.
• VerificationModal.jsx: When a user clicks "Verify," this component:
  1. Receives the node data and the current network configuration (RPC URL, contract address).
  2. Uses the ethers library to create a provider connected to the public RPC.
  3. Instantiates the NEVM registry contract using its address and ABI.
  4. Calls the read-only getCollateralHeight view function with the node's NEVM address.
  5. Compares the result from the blockchain with the data from the API and displays the outcome.

---

🚀 Getting Started (Local Development)

Prerequisites

• Node.js: v22.x or later.
• npm or yarn.

Installation & Running

1. Clone the repository:

   git clone https://github.com/your-username/sentrynode-registry-dapp.git
   cd sentrynode-registry-dapp

2. Install dependencies:

   npm install

3. Configure API Endpoints (Optional): By default, the app points to public Syscoin API endpoints. If you are running your own backend pipeline, edit the apiEndpoint values in src/config.js.

4. Run the development server:

   npm run dev

   The application will be available at http://localhost:5173 (or the next available port).

---

📦 Deployment

Deploying this project involves two parts: setting up the backend data pipeline and hosting the static frontend files.

1. Backend API Deployment

This setup requires a server that has syscoin-cli (connected to a running node) and jq installed.

1. Install jq:

   # On Debian/Ubuntu
   sudo apt-get update && sudo apt-get install jq

2. Deploy the Script: Place the pull_mnlist.sh script on your server (e.g., in /home/user/sentrynode-api/). Make sure it is executable: chmod +x pull_mnlist.sh.

3. Configure Cron Job: Set up a cron job to run the script periodically (e.g., every 5 minutes).

   crontab -e

   Add the following line, adjusting the path as needed:

   */5 * * * * /bin/sh -lc "$HOME/sentrynode-api/pull_mnlist.sh" >>/tmp/sentrynode-api.log 2>&1

4. Configure Web Server (Nginx): Configure Nginx to serve the generated masternode_list-compact.json file. Use the provided nginx-example.conf as a template. The key parts are the alias directive to map the URL to the file path and the add_header directives for caching and CORS.

2. Frontend Application Deployment

The frontend is a static site. You can host it on any static hosting provider (Vercel, Netlify, GitHub Pages) or a traditional web server.

1. Build the application:

   npm run build

   This command compiles the React app into a dist directory containing index.html, CSS, and JavaScript assets.

2. Deploy the dist directory: Upload the contents of the dist folder to your web server or static hosting provider. If using Nginx, configure it to serve the index.html file from this directory as the root.