A React application providing a user interface for analyzing smart contracts with AI-powered explanations.

The web package implements the frontend for the TinyExplorer, allowing users to submit contract addresses and view AI-generated explanations of their functionality.

• Overview
• Installation
• Usage
  • Environment Setup
  • Development
  • Building for Production
• Features
  • Contract Analysis
  • Blockchain Support
  • Real-time Streaming
  • User Interface
• Structure
• Contributing
• License

The web package provides a React-based user interface for interacting with the TinyExplorer. It allows users to enter contract addresses, select blockchain networks, and receive AI-generated analyses of smart contracts including their functionality, events, and other details.

This package is part of the TinyExplorer monorepo. To install it:

# From the repository root
pnpm install

Create a .env file in the root directory with the following variables:

# Server connection
EXPOSED_SERVER_PROD_URL=http://localhost:8888 # only required for production

To run the development server:

pnpm dev

This will start a Vite development server with hot module replacement (HMR).

To build the application for production:

pnpm build

To preview the production build:

pnpm preview

The application fetches and displays detailed contract information:

• Contract name and description
• Functions and their descriptions
• Events and their parameters
• State variables
• Inheritance structure

Support for multiple EVM-compatible blockchains:

• Ethereum Mainnet (with more chains coming soon)
• Configurable RPC endpoints through the core package
• Blockchain explorer integration for verification

Real-time updates as contract analysis is generated:

• WebSocket subscription for streaming data
• Live updates as the LLM analyzes the contract
• Progress indicators during analysis

Modern, responsive UI components:

• Clean, intuitive interface built with React
• Form validation for contract addresses
• Responsive design for various screen sizes
• Component library with consistent styling

src/
├── assets/           # Static assets
├── components/       # UI components
│   ├── config.tsx    # Chain and contract selection
│   ├── contract-details.tsx # Contract analysis display
│   ├── ui/           # Reusable UI components
│   └── wrapper.tsx   # Authentication wrapper
├── hooks/            # Custom React hooks
│   └── use-server.ts # Server connection hook
├── lib/              # Utilities and helpers
│   ├── store.ts      # State management
│   └── utils.ts      # Helper functions
├── providers/        # React context providers
│   └── server-provider.tsx # tRPC client provider
├── App.tsx           # Main application component
└── main.tsx          # Application entry point

If you wish to contribute to this package, please follow the contribution guidelines in the root repository README.

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