---

Gas Optimizer

Gas Optimizer is a web application designed to help users monitor, analyze, and optimize transaction costs on various blockchain networks. It provides real-time gas fee data, historical trend analysis, a transaction simulator, and customizable alerts to help users save money on transaction fees.

Key Features

• Real-time Dashboard: View current gas fees for low, average, and high-priority transactions.
• Historical Analytics: Analyze gas fee trends over different timeframes with interactive charts and a weekly heatmap.
• Transaction Simulator: Estimate the cost of various transaction types (e.g., ETH Transfer, Uniswap Swap, NFT Mint) before execution.
• Custom Alerts: Set up email and browser notifications for when gas prices cross specific thresholds.
• Multi-Network Support: Easily switch between supported blockchain networks like Ethereum, Polygon, Arbitrum, and more.
• Wallet Integration: Connect your wallet to interact with the application seamlessly.

Technologies Used

This project is built with a modern web development stack:

• Vite: A next-generation frontend build tool.
• React: A JavaScript library for building user interfaces.
• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• shadcn/ui: A collection of re-usable UI components.
• Wagmi: React Hooks for Ethereum, simplifying wallet and blockchain interactions.
• Recharts: A composable charting library built on React components.

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

You need to have Node.js (version 18.x or later) and npm installed on your machine.

Installation

1. Clone the repository:

   git clone https://your-repository-url/gas-optimizer.git
   cd gas-optimizer

2. Install NPM packages:

   npm install

3. Set up environment variables: Create a .env file in the root of the project by copying the example file:

   cp .env.example .env

   You will need to add a WalletConnect Project ID to the .env file. You can get one from WalletConnect Cloud.

   VITE_WALLETCONNECT_PROJECT_ID=your_project_id_here
   

4. Run the development server:

   npm run dev

   The application will be available at http://localhost:8080.

Available Scripts

In the project directory, you can run:

• npm run dev: Runs the app in development mode.
• npm run build: Builds the app for production to the dist folder.
• npm run lint: Lints the project files for code quality and errors.
• npm run preview: Serves the production build locally to preview it.

Project Structure

The project structure is organized as follows:

/src
├── components/   # Reusable components (UI elements, charts, cards)
├── config/       # Configuration files (e.g., wagmi)
├── hooks/        # Custom React hooks
├── lib/          # Utility functions
└── pages/        # Page components corresponding to routes

Deployment

This project is configured to be easily deployed on any static site hosting service like Vercel, Netlify, or GitHub Pages.

1. Run the build command:

   npm run build

2. Deploy the contents of the generated dist directory to your hosting provider.

License

This project is licensed under the MIT License - see the LICENSE file for details.