Ethereum Explorer: Real-Time Blockchain Insights
Ethereum Explorer: Real-Time Blockchain Insights
ON
Crypto Wallet Mwallet
(Seat No: )
Guided by:
Asst.Prof: Ganesh Kumar R. Narayankar
University of Mumbai
This project presents an Ethereum Explorer, a web-based tool designed to provide real-time
and historical insights into the Ethereum blockchain. The explorer enables users to search
and view detailed information about blocks, transactions, wallet addresses, and smart
contracts. It offers a user-friendly interface that displays crucial metrics such as block
number, hash, timestamp, transaction count, and current Ether price. By integrating with
public Ethereum APIs and using web3 technologies, the explorer ensures accurate and up-
to-date blockchain data retrieval. The project aims to enhance transparency, improve
accessibility to blockchain data for developers and users, and support educational and
Activity Sheet
Sr.No. Content Start Date End Date Start Date End Date Sign
1 Preliminary Investigation
1.1 Introduction 1
1.2 Features 2
1.3 Propose System 2
1.4 Fact finding and Question Answer 3
1.5 Advantages & Disadvantages 4
2 Requirements
2.1 Requirements 7
3 System Design
3.1 Stake Holder 8
3.2 Event Table 9
3.3 UML 10 – 21
4 System Implementation & Code
4.1 Modules 22
4.2 Test Case 23 – 24
4.3 System Code 25 – 46
5 Screenshots and Repot Layout 47 – 50
6 Conclusion 51
7 Future Enhancement 52
8 References 53
Preliminary Investigation
Introduction
The Ethereum Explorer is a web-based tool designed to provide users with real-time access
to Ethereum blockchain data. It allows users to view block details, transactions, wallet
balances, and Ether prices through a simple and interactive interface. Built using Web3
technologies and public APIs, the explorer supports transparency and accessibility, helping
both developers and general users better understand and interact with the Ethereum
network.
Implementation
The Ethereum Explorer project is web application that can be accessed from any web browser
on any platform. First there will be landing page on which it should detailed presentation of
topic and then via using action button and there is connect wallet button where user can
connect there wallet and see their past records and explore the transactions and feature
provided in the project.
Features
The primary purpose of the Ethereum Explorer system is to provide users with a transparent,
accessible, and real-time interface to interact with and monitor the Ethereum blockchain. It
serves as a bridge between complex blockchain data and end users by simplifying the
process of retrieving and understanding on-chain information.
Key Objectives:
Transparency: To make Ethereum network activity openly visible, ensuring trust and
verification of blockchain data.
Accessibility: To allow developers, researchers, and general users to explore
blocks, transactions, and wallet addresses without needing deep technical
knowledge.
Learning & Analysis: To help students and blockchain enthusiasts understand how
the Ethereum network operates by visualizing and interacting with real blockchain
data.
Monitoring: To offer an easy way to track specific transactions, monitor wallet
activity, or check block confirmations.
Market Awareness: To provide up-to-date Ether price information for users
interested in market movements.
Outcome: The development of the Ethereum Explorer successfully achieved its core
objectives of simplifying blockchain data access and improving user interaction with the
Ethereum network. The system provides a streamlined and informative interface that allows
users to:
Retrieve and view detailed block information, including timestamps, miners, and gas
usage.
Inspect transaction details, such as sender, receiver, value transferred, and
transaction status.
Check wallet balances and transaction histories with minimal input.
Access real-time Ether prices, enhancing both user awareness and market
monitoring.
Gain hands-on experience with Web3 technologies and API integration, making the
tool useful for both educational and analytical purposes.
.
Fact finding & Question Answer
Question Answer
What is the main purpose of the To allow users to explore Ethereum blockchain data in
system? a simple, user-friendly manner.
What data should the explorer Block number, hash, timestamp, transaction details,
display? wallet balances, and Ether price.
1. User-Friendly Interface
3. Transparency
4. Educational Tool
Helps learners and developers understand Ethereum architecture and smart contract
behavior.
5. Open-Source APIs
Utilizes widely available APIs like Infura and CoinGecko, ensuring easy integration
and flexibility.
6. Platform Independence
7. Scalable Foundation
Easily extendable to include advanced features like smart contract interaction and
token tracking.
Disadvantages:
1. API Dependency
Relies on third-party APIs (e.g., Infura, CoinGecko) which may have rate limits or
downtime.
2. No Write Functionality
3. Latency Issues
May face slight delays in data rendering depending on network response time or API
rate limits.
5. Security Considerations
While it does not store sensitive data, misuse of API keys or lack of HTTPS could
expose the app to risks.
Without a backend, complex caching, analytics, and user-specific services are harder
to implement.
Requirements
System & Hardware Requirement
Hardware Requirements
1. For Development
o Processor: Modern multi-core processor (Intel i5 or better).
o RAM: 8GB or more for smooth development experience.
o Network: Stable internet connection for interacting with blockchain APIs and
hosting services.
2. For Deployment
o Server (for backend): Basic cloud instance (e.g., 1 vCPU, 1GB RAM, 20GB
SSD).
o For Real-Time Data: Ensure low-latency connection to Ethereum nodes
through services like Infura or Alchemy.
Software Requirements
Frontend Development
Backend
o Node.js with Express.js: For handling backend services such as caching and
managing API requests.
.
System Design
Stakeholder
1. End Users
Individuals: The primary users who use the wallet to manage their cryptocurrency,
conduct transactions, and interact with decentralized applications (dApps).
Developers: Developers may use the wallet to interact with blockchain platforms, test
smart contracts, and engage with other decentralized applications.
Investors/Traders: These users use the wallet for trading, investing in
cryptocurrencies, and managing their digital assets.
2. Development Team
Frontend Developers: Build the user interface and ensure a seamless user
experience.
Backend Developers: (If applicable) Manage server-side operations, databases, and
API integrations.
Blockchain Developers: Write and deploy smart contracts, ensure proper blockchain
integration, and handle wallet functionalities like key management and transaction
signing.
Security Experts: Ensure the wallet is secure, handle encryption, and protect against
vulnerabilities.
UX/UI Designers: Design the wallet’s interface, ensuring it is intuitive and user-
friendly.
Testers/QA Engineers: Test the wallet for bugs, security flaws, and usability issues
before it goes live.
Legal Advisors: Ensure the wallet complies with relevant regulations, including
KYC/AML requirements, especially if 8the wallet handles fiat-crypto conversions.
Compliance Officers: Monitor the wallet's operations to ensure ongoing compliance
with legal standards, particularly in different jurisdictions.
Customer Support: Provide assistance to users, handling issues like lost private
keys, transaction errors, or general inquiries.
Community Managers: Engage with the wallet's user community, gathering
feedback, providing updates, and fostering a loyal user base.
Operations Team: Manages day-to-day operations, ensuring the wallet is functional,
up-to-date, and that any issues are quickly resolved.
6. Partners
7. Investors/Stakeholders
8. Regulatory Bodies
UML use case diagrams are the primary form of system/software requirements for new and
undeveloped software programs. A use case specifies the expected behavior (what) rather
than the exact way (how) to achieve it. Once a use case is specified, it can be referenced in
both textual and visual representations (use case diagrams). A key concept of use case
modeling is that it helps you design your system from the end user's perspective. This is an
effective technique for communicating system behavior in user terms by specifying all
externally visible system behavior.
Sequence Diagram
Sequence diagrams are a popular dynamic modeling solution in UML. This is because it
focuses specifically on lifelines, or processes and objects that coexist at the same time, and
the messages exchanged between them to perform a function before the lifeline terminates.
Use this guide along with your UML diagramming tool to learn everything you need to know
about UML sequence diagrams.
A sequence diagram is a type of interaction diagram because it describes how a group of
objects work together and in what order. These diagrams are used by software developers and
business professionals to understand new system requirements and to document existing
processes. Sequence diagrams are sometimes called event diagrams or event scenarios.
System Sequence Diagram
A system diagram is a simple and very general description of an existing system or a system
that needs to be built. It is a simple diagram that can be created in a short time. It helps teams
to share and understand their systems clearly and completely.
The main enemy of system architects and software engineers is complexity. Complexity leads
to a lack of understanding of the system and can make it very difficult to modify or use the
system. The complexity of the system is reflected in its description and documentation. The
task of explaining a system to a non-technical audience can be a daunting task. A system
diagram provides an easy way to solve this problem
Class Diagram
A class is a blueprint for an object. Objects and classes are closely related. You can't talk
about the other without talking about the other. Also, object-oriented design is about classes,
not objects. Because you use classes to create objects. So a class describes what an object will
be, but it's not the object itself.
A class actually describes a type of object, but an object is a usable instance of a class. Each
object is created from the same blueprint and therefore contains the same components
(properties and methods). In the traditional sense, objects are instances of classes and objects.
Objects have state and behavior.
Collaboration Diagram
Collaboration diagrams are used to show the relationships between objects in the system.
Both sequence diagrams and collaboration diagrams show the same information, but they are
different. Based on object-oriented programming, it shows the architecture of the objects that
reside in the system rather than showing message flow. An object consists of several
properties. Several objects in the system are connected to each other. A collaboration
diagram, also called a communication diagram, serves to represent the architecture of the
objects in the system.
Flow chart Diagram
A flowchart is a diagram that depicts a process, system or computer algorithm. They are
widely used in multiple fields to document, study, plan, improve and communicate often
complex processes in clear, easy-to-understand diagrams. Flowcharts, sometimes spelled as
flow charts, use rectangles, ovals, diamonds and potentially numerous other shapes to define
the type of step, along with connecting arrows to define flow and sequence. They can range
from simple, hand-drawn charts to comprehensive computer-drawn diagrams depicting
14
multiple steps and routes. If we consider all the various forms of flowcharts, they are one of
the most common diagrams on the planet, used by both technical and non-technical people in
numerous fields. Flowcharts are sometimes called by more specialized names such as Process
Flowchart, Process Map, Functional Flowchart, Business Process Mapping, Business Process
Modeling and Notation (BPMN), or Process Flow Diagram (PFD). They are related to other
popular diagrams, such as Data Flow Diagrams (DFDs) and Unified Modeling Language
(UML) Activity Diagrams.
ER Diagram
17
System Coding & Implementation
21
Modules
A module is a collection of source files and build settings that allow you to divide your
project into discrete units of functionality. Your project can have one or many modules, and
one module may use another module as a dependency. we can independently build, test, and
debug each module.
Frontend:
html: Handles building the user interface and ensures a smooth user experience.
CSS: Offers a utility-first approach for rapid and consistent styling of the application.
Javascript: to make website more productive.
Backend:
Ether.js: Powers the server-side logic and handles communication between the
database and the user interface.
22
Test Case
import '../css/index.css';
import './Resultpage'
import metamasklogo from '../css/MetamaskIcon.png'
import { Link } from 'react-router-dom';
return (
<div id='container' className='container'>
<div className='navDiv'>
<nav>
<div className='navDiv_logoDiv'><i className="fa-brands fa-
ethereum"></i><Link to="/"
className='linkHome'><span>ETHEXPLORER</span></Link></div>
<div className='navDiv_HomeDiv'><span
className='navDiv_logoDiv'>Result</span><div
className='homeBorderBottom'></div></div>
<div className='navDiv_optionsDiv'>
<ul>
<li>Blockchain <i class="fa-solid fa-angle-down"></i></li>
<li>About Us <i class="fa-solid fa-angle-down"></i></li>
<li>More <i class="fa-solid fa-angle-down"></i></li>
</ul>
</div>
<div className='navDiv_buttonDiv'>
<div>
<button onClick={confirmMeta}><img src={metamasklogo}
id='metamasklogomobile' alt='metamask logo' /></button>
<i class="fa-solid fa-bars"></i>
</div>
<button onClick={confirmMeta} className='MetamaskBtn'
id='MetamaskBtn'>Connect Wallet <img src={metamasklogo} id='metamasklogo'
alt='metemask logo' /></button>
</div>
</nav>
</div>
<div className='body'>
<div className='body1'>
<caption>Address Details</caption>
<hr />
<div className='body11'>
<div>
<p><strong>Address : </strong>{account}</p>
</div>
<div>
<p><strong>Balance : </strong><span
className='balanceSpan'>{balance}</span></p>
</div>
<div>
<p><strong>Ether value : </strong><span style={{color: 'rgba(31, 199,
212, 1)'}}>$ {etherprice}</span></p>
</div>
</div>
</div>
<div className='body2'>
<caption>Recent Transactions</caption>
<hr />
<div className='body22'>
<tbody id='resultList'>
</tbody>
</table>
<div className='recentTransDiv'>
<div className='recentTrans'>
<p>Recent Transactions</p>
</div>
<div className='recentTrans1'>
<div id='transStamp'>
</div>
</div>
</div>
</div>
</div>
</div>
<section>
<div className='footer'>
<div className='footer1'>
<div className='navDiv_logoDiv'><i className="fa-brands fa-
ethereum"></i><span className='footerEth'>ETHEXPLORER</span></div>
<div><p><strong>ETHExplorer</strong> is a Blockchain platform for
Ethereum.</p></div>
<div></div>
</div>
<div className='footer2'>
<div
className='footer2Div'><span><strong>Blockchain</strong></span><i class="fa-solid
fa-plus"></i></div>
<div>
<ul className='footer2Ul'>
<li>Transactions</li>
<li>Blocks</li>
</ul>
</div>
</div>
<div className='footer3'>
<div className='footer3Div'><span><strong>About</strong></span><i
class="fa-solid fa-plus"></i></div>
<div>
<ul className='footer3Ul'>
<li>About Ethexplorer</li>
<li>Terms of service</li>
<li>Privacy Policy</li>
<li>FAQS</li>
</ul>
</div>
</div>
<div className='footer4'>
<div
className='footer4Div'><span><strong>Languages</strong></span><i class="fa-solid
fa-plus"></i></div>
<div>
<ul className='footer4Ul'>
<li>English</li>
<li>Arabic</li>
<li>French</li>
<li>German</li>
</ul>
</div>
</div>
</div>
<div className='lastSection'>
<div className='lastSection1'>
<p>Ethexplorer</p>
<i class="fa-regular fa-registered"></i>
<p>2022</p>
</div>
<div className='lastSection2'>
<p><i class="fa-brands fa-facebook"></i></p>
<p><i class="fa-brands fa-github"></i></p>
<p><i class="fa-brands fa-linkedin"></i></p>
<p><i class="fa-brands fa-instagram"></i></p>
</div>
</div>
</section>
</div>
)
}
App.js
function App() {
return (
<Router>
<div className="App">
<Switch>
<Route exact path='/'>
<Landingpage />
</Route>
<Route path='/test'>
<Test />
</Route>
<Route path='/result'>
<Resultpage />
</Route>
<Route path='/blockresult'>
<Blockpage />
</Route>
<Route path='/hashresult'>
<Transhashpage />
</Route>
<Route path='/addressresult'>
<Addresspage />
</Route>
</Switch>
</div>
</Router>
);
}
index.js
//num.toExponential(0)
};
if(window.ethereum) {
console.log('metamask present');
accounts = await window.ethereum.request({
method: 'eth_requestAccounts'
}).catch((err) => {
if (err.code == '-32002') {
const button = document.querySelectorAll('#button');
button.disabled = true;
container.style.opacity = '0.4';
loader.style.opacity = '1';
}
console.log(err.code)
})
if (accounts[0] !== 'null') {
window.location.href = '/result'
//accounts = accounts[0];
//console.log(accounts);
}
}
else {
alert('You do not have Metamask.');
}
return(balance, accounts);
test.js
import '../css/index.css'
//import { useEffect } from 'react';
(function generateRandomAlphabet(){
const number = Math.floor(Math.random()*27);
return Alphabet[number];
})();
<div className='footer'>
<div className='footer1'>
<div className='navDiv_logoDiv'><i className="fa-brands
fa-ethereum"></i><span>ETHEXPLORER</span></div>
<div><p><strong>ETHExplorer</strong> is a Blockchain platform for
Ethereum</p></div>
<div></div>
</div>
<div className='footer2'>
<div><span><strong>Blockchain</strong></span></div>
<div>
<ul>
<li>Transactions</li>
<li>Blocks</li>
</ul>
</div>
</div>
<div className='footer3'>
<div><span><strong>About</strong></span></div>
<div>
<ul>
<li>About Ethexplorer</li>
<li>Terms of service</li>
<li>Privacy Policy</li>
<li>FAQS</li>
</ul>
</div>
</div>
<div className='footer4'>
<div><span><strong>Languages</strong></span></div>
<div>
<ul>
<li>English</li>
<li>Arabic</li>
<li>French</li>
<li>German</li>
</ul>
</div>
</div>
</div>
Screenshots and Report Layout
Index Page:
47
Explorer Page:
:
Conclusion
A crypto wallet is a digital tool essential for anyone dealing with cryptocurrencies. Think of it
as the digital equivalent of your physical wallet, but for cryptocurrencies instead of cash and
cards. It allows you to store, send, and receive different types of cryptocurrencies securely.
There are two main types of crypto wallets: hot wallets and cold wallets. Hot wallets are
connected to the internet, making them convenient for transactions but potentially more
vulnerable to hacks. Cold wallets, on the other hand, are offline and thus provide a higher
level of security, suitable for long-term storage of crypto assets. Using a crypto wallet
involves generating a unique set of cryptographic keys: a public key for receiving funds and a
private key for accessing and managing them. Ensuring the security of your private key is
crucial as losing it means losing access to your assets.
Future Enhancement
Future Enhancement
🧬 7. Token Intelligence
Automatic token scam detection.
Show legitimacy badges for verified tokens.
References
Books:
1. "The Bitcoin Standard: The Decentralized Alternative to Central Banking" by
Saifedean Ammous
Google Links:
1. https://www.cloudwards.net/best-crypto-wallet/
2. https://www.blockchain.com/explorer
3. https://www.youtube.com/watch?v=t7cyzfknu3w
4. https://rsf.org/en/index?year=2023
5. https://www.youtube.com/watch?v=V3jpAQmzHew
6. Some Artificial Intelligence tools
Video Links:
1. https://www.youtube.com/watch?v=V3jpAQmzHewhttps://youtu.be/
J6mDkcqU_ZE?si=ITJQ7gWCGrIjykIb
2. https://www.youtube.com/watch?v=4qgZYgsE8TQ
3. https://www.askpython.com/resources/build-crypto-wallet-python
4.
53