Ethereum Transaction Web App

This web app enables users to send Ethereum along with a message and a GIF to any wallet address globally. It's built with a Solidity smart contract and uses the latest technologies—Hardhat for contract development and Ethers.js v6 for seamless integration with the React.js frontend.

Table of Contents

• About the Project
• Built With
• Getting Started
  • Prerequisites
  • Installation
• Smart Contract Development
  • Project Setup
  • Deploying the Contract
• Frontend Development
  • Setting Up Ethers.js
  • Integrating with the Smart Contract
  • Testing the Transaction Flow
• Usage
• Features
• Project Structure
• License

About the Project

This project is a decentralized web application where users can:

• Connect their MetaMask wallet.
• Send Ethereum to another wallet address along with a message and GIF.
• View their transactions with metadata like sender, receiver, amount, timestamp, and message.

The project uses Hardhat for local Ethereum development, Ethers.js v6 for contract interactions, and React.js for a responsive, user-friendly frontend.

Built With

• Solidity - For writing the Ethereum smart contract.
• Hardhat - For local blockchain development and contract deployment.
• Ethers.js v6 - For interacting with the Ethereum network.
• React.js - For building the frontend interface.
• MetaMask - For wallet integration.

Getting Started

Prerequisites

• Node.js & npm - Required to run the frontend and development server.
• MetaMask - Browser extension for interacting with the Ethereum blockchain.
• Hardhat - For running a local Ethereum network and deploying the smart contract.

Installation

Clone the repo and install dependencies:

git clone https://github.com/xwaynex/ethereum-transaction-app.git
cd ethereum-transaction-app
npm install

Smart Contract Development

Project Setup

In the project root, you'll find a contracts folder with the Solidity contract that handles Ethereum transactions. The contract code is written in Solidity and enables sending Ethereum from one address to another, with a message and timestamp.

Deploying the Contract

1. Ensure Hardhat is installed:

   npm install --save-dev hardhat

2. Start a local blockchain in a new terminal:

   npx hardhat node

3. Deploy the contract:

   npx hardhat run scripts/deploy.js --network localhost

After deployment, take note of the contract address, which you’ll use to connect the frontend to the smart contract.

Frontend Development

Setting Up Ethers.js

We use Ethers.js v6 for handling Ethereum interactions in the frontend. In this project, Ethers.js is used to connect to MetaMask, read the contract, and call functions.

Install Ethers.js:

npm install ethers

Integrating with the Smart Contract

In TransactionContext.jsx, we set up our Ethereum provider, connect to MetaMask, and instantiate the contract to interact with its functions. Key methods in this integration include:

• connectWallet: Connects MetaMask to the dApp.
• sendTransaction: Sends Ethereum along with a message and keyword to generate a GIF.
• getAllTransactions: Retrieves all transactions from the contract.

Update the contract address in the frontend with the address from your deployment.

Testing the Transaction Flow

1. Connect MetaMask to the local blockchain (default Hardhat network).
2. Use the frontend interface to send transactions. You should see the Ethereum transaction, message, and GIF reflected on the blockchain.
3. View transaction history.

Usage

1. Connect Wallet: Click on "Connect Wallet" to authenticate with MetaMask.
2. Send Transaction: Enter the recipient's address, amount, a keyword for the GIF, and a message.
3. View Transactions: All transactions with details like sender, receiver, amount, and timestamp will be displayed on the page.

Features

• Decentralized Transactions: Direct Ethereum transfers from sender to receiver.
• GIF Messaging: Enter a keyword to send a GIF along with your transaction.
• MetaMask Integration: Securely connect your wallet and interact with the dApp.
• Transaction History: View your transaction details for better traceability.

Project Structure

frontend/                         # React frontend application
├── Client/                   # React frontend application
│   ├── src/
│   │   ├── context/            # Context provider for transaction state management
│   │   ├── hooks/              # Custom React hooks
│   │   ├── components/         # Reusable React components (TransactionCard, etc.)
│   │   └── utils/              # Utility functions and helper files (e.g., shortenAddress, dummyData)
│   └── public/

smart_contract/
├── contracts/                  # Solidity smart contracts
│   └── Transaction.sol         # Main smart contract for Ethereum transactions
├── scripts/                    # Hardhat deployment scripts
│   └── deploy.js               # Deployment script for the smart contract
├── hardhat.config.js           # Hardhat configuration
├── package.json                # Project dependencies
└── README.md                   # Project documentation