Solidity Contract Interface

A web interface for interacting with any Solidity smart contract via its ABI. This tool allows you to:

• Connect to any Ethereum-compatible wallet (MetaMask, WalletConnect, etc.)
• Input any Solidity contract ABI and address
• Read data from the contract's view/pure functions
• Execute state-changing functions (write operations)
• View transaction results and function outputs

Features

• Wallet Connection: Easily connect to your preferred Web3 wallet
• Multi-chain Support: Works with any EVM-compatible blockchain
• Dynamic Interface: Automatically generates UI based on contract ABI
• Real-time Interaction: Direct interaction with blockchain contracts
• Type Safety: Built with TypeScript for robustness
• Responsive Design: Works on desktop and mobile devices

Getting Started

Prerequisites

• Node.js (v16 or higher)
• NPM or Yarn
• A Web3 wallet browser extension (like MetaMask)

Installation

1. Clone the repository:

   git clone https://github.com/FWangZil/contracts-abi-fornt.git
   cd contracts-abi-fornt
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:3000

Usage

1. Connect Your Wallet:

   • Click the "Connect Wallet" button in the top right
   • Approve the connection in your wallet

2. Set Up Contract:

   • Paste the contract address in the "Contract Address" field
   • Paste the contract ABI in the JSON format (or use the sample ABI)
   • Click "Load Contract"

3. Interact with Contract:

   • Use the "Read Contract" tab to call view/pure functions
   • Use the "Write Contract" tab to execute state-changing functions
   • Results will appear in the "Results" section

Built With

• React - UI framework
• TypeScript - Type-safe JavaScript
• ethers.js - Ethereum library
• Material-UI - UI component library
• Vite - Fast build tool

License

This project is licensed under the ISC License

Acknowledgments

• Ethereum Development Community
• React and Material-UI Teams