Performance Tool Client

A modern web application for monitoring and analyzing blockchain network performance metrics.

Overview

This tool provides real-time performance monitoring and analysis capabilities for blockchain networks, built with Next.js, TypeScript, and Tailwind CSS.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Modern web browser

Getting Started

1. Clone the repository:

git clone https://github.com/your-username/performance-tool-client.git
cd performance-tool-client

2. Install dependencies:

npm install
# or
yarn install

3. Set up environment variables:

cp .env.example .env.local

Commands

Run the development server on localhost:

npm run dev
# or
yarn dev

Build the application:

npm run build
# or
yarn build

More about deploying options

Deployments:

Deployed on Vercel automatically on PR merge.

How to Add New Method

Navigate to src/app/store/store.js and find the METHODS array:

export const METHODS = entity([
  {
    id: 0,
    method_used: 'eth_getBlockByNumber',
    method_url: process.env.NEXT_PUBLIC_BACKEND_APP_PATH_URL + 'test-get-block',
    perform: true,
    isLoading: true,
    data: {},
  },
  {
    id: 1,
    method_used: 'eth_call',
    method_url: process.env.NEXT_PUBLIC_BACKEND_APP_PATH_URL + 'test-eth-call',
    perform: true,
    isLoading: true,
    data: {},
  },
]);

To add a new method:

1. Add a new object at the end of the array
2. Increment the id field value
3. Set method_used for the card label shown in results UI
4. Update method_url with the new path
5. Keep other fields unchanged

Project Structure

├── src/
│   ├── app/          # Next.js App Router components
│   └── components/   # Reusable React components
└── public/           # Static assets

Key Directories

• /app/compare-double/page.js: Implements side-by-side comparison functionality for two blockchain nodes page
• /app/compare-single/page.js: Implements testing functionality for one blockchain node page
• /app/injection-result-double/page.js: Implements side-by-side comparison functionality for two blockchain nodes for injected page
• /app/store/store.js: Contains global state management and methods configuration
• /app/page.js: Initial page

Core Technologies

• Next.js - React Framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• ESLint - Code linting
• Jest - Testing framework

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Code Quality

• Follows best practices for React and Next.js
• Implements maintainable and scalable code structure
• Includes comprehensive documentation
• Uses TypeScript for type safety
• Adheres to ESLint configuration