This is the frontend codebase for the TX Explain application. It provides a user interface for selecting a network, entering a transaction hash, and displaying the simulation and explanation results for the transaction.
- Select a network (Ethereum, Arbitrum, Optimism, Avalanche)
- Enter a transaction hash
- Display transaction summary, token transfers, and function calls
- Real-time streaming of explanation results
- Next.js
- React
- TypeScript
- Mantine UI library
- Tanstack Query (React Query)
- Zustand (state management)
- Clone the repository:
git clone https://github.com/eden-network/tx-explain-frontend.git- Install the dependencies:
cd tx-explain-frontend
npm install- Set up the environment variables: Create a .env.local file in the root directory and provide the necessary environment variables:
NEXT_PUBLIC_SERVER_URL=http://localhost:3001
Replace http://localhost:3001 with the URL of your backend server.
- Start the development server:
npm run dev- The frontend application will be accessible at http://localhost:3000.
tx-explain-frontend/
│
├── components/: Contains reusable components used in the application.
│
├── pages/: Contains the pages of the application.
│
├── store/: Contains the Zustand store for state management.
│
├── styles/: Contains global styles and CSS files.
│
├── types/: Contains TypeScript type definitions.
│
└── utils/: Contains utility functions.
The frontend application requires a backend server to fetch transaction data and explanation results. A mock server is provided in the root of this repository for testing purposes. To use the mock server, run:
npm run mockThis project is licensed under the MIT License.