Block Explorer

This project is a custom blockchain explorer built with React, Ethers.js, and Hardhat. It allows users to explore blockchain data and interact with smart contracts on a local Hardhat node, making it ideal for development and testing in a controlled environment.

Preview

If you have Hardhat running locally, preview the explorer using your local provider: Preview with Local Provider

Or, try the explorer with sample data here: Preview with Mock Data

Getting Started

Prerequisites

Ensure you have the following installed on your machine:

• Node.js (v14 or higher)
• npm or yarn
• Hardhat (for local blockchain node)

Installation

1. Clone the repository:

   git clone https://github.com/Shaivpidadi/block-explorer
   cd block-explorer

2. Install dependencies:

   npm install

Configuration

The app uses environment variables to configure the connection to the blockchain node. To customize, create a .env file in the project root with the following variables:

REACT_APP_PROVIDER='http://127.0.0.1:8545'   # Fallback for local Hardhat node
REACT_APP_WS_PROVIDER='ws://localhost:8545'  # WebSocket provider for real-time updates

Running the Application

1. Start the Hardhat Node

   Open a terminal, navigate to your Hardhat project directory, and start the Hardhat node:

   npx hardhat node

2. Start the Block Explorer

   In another terminal window, go to the block-explorer project directory and start the React app:

   npm run start

   The app should now be accessible at http://localhost:3000, with full interaction capabilities on the Hardhat node.

Running with Docker

For simplified setup, the project can be run in Docker.

1. Build the Docker image:

   docker build -t block-explorer      --build-arg REACT_APP_PROVIDER='http://127.0.0.1:8545'      --build-arg REACT_APP_WS_PROVIDER='ws://localhost:8545' .

2. Run the Docker container:

   docker run -p 3000:3000 block-explorer

   This will serve the app on http://localhost:3000.

Testing

To run tests, ensure the Hardhat node is running, then execute:

npx hardhat test --network localhost

This setup connects the tests to the running Hardhat node for more realistic testing scenarios.

Dependencies

• React
• Ethers.js
• Tailwind CSS
• Hardhat

_{Created by Shaishav Pidadi.}