← Back to home

ChainScan

React

Create and manage attestations with a user-friendly form and view attested items in a dedicated tab.

Screenshots

ChainScan screenshot 1
ChainScan screenshot 2
ChainScan screenshot 3
ChainScan screenshot 4

Problem Statement

This project is an advanced blockchain interface designed to manage and interact with cryptocurrency gratuities and digital attestations. It offers users a comprehensive view and control over their blockchain activities, including managing gratuities, creating attestations, and monitoring network and account statistics.Key Features:Gratuity Management:Send Gratuities: Users can send cryptocurrency gratuities with personalized messages to specified addresses.View Gratuity Stats: Displays overall donation statistics, including total amount donated and number of transactions.View Gratuity Messages: Lists messages associated with past gratuity transactions, providing details on sender and amount.Attestation Management:Create Attestations: Users can create attestations by filling out a form with details such as name, email, and address. This information is recorded on the blockchain.View Attested Items: A dedicated tab for viewing all created attestations with detailed information about each one.Network and Account Statistics:Network Stats: Provides insights into the current blockchain network, including total transactions, active users, and network health metrics.Account Stats: Shows detailed information about the user's blockchain account, including balance, transaction history, and recent activities.NFT Details:NFT Overview: Displays details of any NFTs (Non-Fungible Tokens) associated with the user's account, including ownership information, metadata, and transaction history.Technical Details:Blockchain Integration: Connects to Ethereum-based smart contracts for managing gratuities and attestations, and provides real-time updates on network and account statistics.Smart Contracts: Utilizes pre-deployed contracts to handle gratuity transactions and attestations. Interactions with these contracts are managed through Web3.User Interface: Developed using React, the interface is organized into distinct sections for managing gratuities, attestations, network stats, account stats, and NFTs.Error Handling: Includes robust mechanisms for error handling and user notifications to ensure a seamless experience during interactions.Usage:Send Gratuity: Enter the amount and message, then complete the transaction.View Gratuity Stats and Messages: Monitor total donations and read associated messages.Create Attestation: Submit attestation details using the provided form.View Attested Items: Review all created attestations with their details.Network Stats: Access metrics related to the blockchain network.Account Stats: Check account balance, transaction history, and recent activities.NFT Details: Explore details and history of NFTs owned by the user.

Solution

This project leverages React for a dynamic frontend, styled with Tailwind CSS for a modern look. It uses Ethers.js and Wagmi to interact with Ethereum smart contracts deployed on the Sepolia testnet, handling transactions and state updates efficiently. The integration includes real-time notifications via React Hot Toast and employs custom hooks for streamlined contract interactions and error handling, ensuring a seamless and secure user experience for managing blockchain-based gratuities and attestations.

Hackathon

ETHOnline 2024

2024

Prizes

  • 🏆

    Sign Everything Pool Prize

    Sign Protocol

Contributors