0% found this document useful (0 votes)
31 views49 pages

Ethereum Explorer: Real-Time Blockchain Insights

The project report details the development of an Ethereum Explorer, a web-based tool that provides real-time and historical insights into the Ethereum blockchain, allowing users to view blocks, transactions, and wallet information. It aims to enhance transparency and accessibility for developers and users while supporting educational purposes. The report includes acknowledgments, an abstract, requirements, system design, and features of the application.

Uploaded by

ms664545666
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
31 views49 pages

Ethereum Explorer: Real-Time Blockchain Insights

The project report details the development of an Ethereum Explorer, a web-based tool that provides real-time and historical insights into the Ethereum blockchain, allowing users to view blocks, transactions, and wallet information. It aims to enhance transparency and accessibility for developers and users while supporting educational purposes. The report includes acknowledgments, an abstract, requirements, system design, and features of the application.

Uploaded by

ms664545666
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 49

A PROJECT REPORT

ON
Crypto Wallet Mwallet

Design and Developed by:


VARMA SUDHIR PURAN

(Seat No: )

Guided by:
Asst.Prof: Ganesh Kumar R. Narayankar

SUBMITTED IN PARTIAL FULFILMENT OF


ACADEMIC PROJECT

(Bachelors of Science Computer Science)

University of Mumbai

SHANKAR NARAYAN COLLEGE OF ARTS & COMMERCE

Academic Year 2024-25


ACKNOWLEDGEMENT

I extend my deepest gratitude to Dr. V N Yadav, our esteemed Principal, for


his unwavering support and guidance throughout my academic journey. His
vision and leadership have been instrumental in fostering a conducive learning
environment.

I am also immensely thankful to Prof. Vaishali Kadam, our dedicated


Coordinator, for her invaluable mentorship and constant encouragement. Her
expertise and guidance have been instrumental in navigating the challenges and
complexities of this project.

A special thanks goes to Asst.Prof: Ganesh Kumar R. Narayankar, our


insightful Project Guide and Mentor. His unwavering support, expert advice,
and invaluable insights have been instrumental in the successful completion of
this project. His guidance has not only enriched my understanding of the
"Ethereum Explorer" but has also equipped me with the skills necessary for
future research endeavours.
ABSTRACT
ABSTRACT

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

analytical use cases in the decentralized ecosystem.


Name: - Varma Sudhir Puran
Class: - T.Y. Computer Science
Roll No.: - 31
Seat No: -
ProjectName: - Crypto Wallet (Mwallet)

Activity Sheet

Planned Date Actual Date

Sr.No. Content Start Date End Date Start Date End Date Sign

Introduction And 01-12-24 10-12-24 02-12-24 12-12-24


1.
Propose System

2. System Requirement 11-12-24 20-12-24 13-12-24 22-12-24

3. Fact Finding And 21-12-24 10-01-25 23-12-24 15-01-25


UML Diagram

4. System 11-01-25 10-03-25 16-01-25 25-03-25


Implementation
And Code

5. Screen Layouts And 11-03-25 31-03-25 21-03-25 05-04-25


Report Layouts

6. Future Scope And 01-04-25 15-04-25 06-04-25 25-04-25


Conclusion
Index

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 global prosperity index has following features:

1. Block Information Viewer


2. Transaction Lookup
3. Wallet Address Lookup
4. Real- Time Ether Price
5. User Friendly Interface
6. Web3 Integration
7. API-Based Data Fetching
8. Lightweight & Fast
Propose System

Application The purpose of a Ethereum Explore system is to provide a secure, convenient,


and user-friendly platform for Tracking digital Transactions on Ethereum blockchain. Here’s
a detailed breakdown of its key purposes:

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.

Developers, blockchain learners, crypto enthusiasts,


Who are the target users?
and investors.

What data should the explorer Block number, hash, timestamp, transaction details,
display? wallet balances, and Ether price.

Using Web3.js/Ethers.js to connect with the Ethereum


How will the data be accessed?
mainnet through Infura or similar APIs.

Via third-party APIs such as CoinGecko or


How is Ether price retrieved?
CoinMarketCap.

Optional – used for caching or managing rate-limited


Is a backend necessary?
API calls.

Yes, the frontend is built to be responsive and mobile-


Will it support mobile devices?
friendly.

API rate limits, data rendering delays, and ensuring


What challenges were anticipated?
blockchain sync accuracy.

Advantages & Disadvantages


Advantages:

1. User-Friendly Interface

 Simplifies complex blockchain data into easy-to-understand visuals and text.

2. Real-Time Data Access

 Provides up-to-date information about blocks, transactions, and Ether price.

3. Transparency

 Enables users to independently verify on-chain data, improving trust in blockchain


technology.

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

 Can be accessed from any device with a browser; no installation required.

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

 Limited to read-only operations; users cannot send transactions or interact with


contracts directly.

3. Latency Issues

 May face slight delays in data rendering depending on network response time or API
rate limits.

4. Limited Offline Use

 Requires an internet connection to fetch and display live blockchain data.

5. Security Considerations

 While it does not store sensitive data, misuse of API keys or lack of HTTPS could
expose the app to risks.

6. Backend Optionality May Limit Features

 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

o HTML5: For structuring the content of web pages.


o CSS3: For styling the layout and making the interface visually appealing.
o JavaScript: For dynamic content updates and interactions.
o Web3.js or Ethers.js: Libraries to interact with the Ethereum blockchain via
JavaScript.
o Node.js : For server-side operations and API requests.
o API Integration:
 Infura or Alchemy: For connecting to the Ethereum network.
 CoinGecko API or CoinMarketCap API: For fetching real-time
Ether price.

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 & Compliance Teams

 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.

5. Support and Operations Teams

 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

 Blockchain Networks: The platforms (e.g., Ethereum, Binance Smart Chain) on


which the wallet operates. Interaction with these networks is essential for transactions,
smart contracts, and staking functionalities.
 Decentralized Applications (dApps): The wallet may integrate with various dApps,
allowing users to interact with DeFi platforms, NFT marketplaces, and other
decentralized services.
 Payment Processors: If the wallet includes fiat on-ramps/off-ramps, partnerships
with payment processors or banks may be necessary.
 Security Auditors: Third-party services that audit the wallet’s code and smart
contracts for security vulnerabilities.

7. Investors/Stakeholders

 Venture Capitalists/Angel Investors: Provide funding for the development and


scaling of the wallet.
 Token Holders (if applicable): If the wallet has an associated token, token holders
might have a stake in the project’s success and influence its development through
governance mechanisms.

8. Regulatory Bodies

 Government Agencies: Oversee compliance with financial regulations, especially in


areas related to anti-money laundering (AML) and know-your-customer (KYC)
practices.
 Financial Regulators: Monitor and regulate the use of cryptocurrencies within legal
frameworks, ensuring the wallet operates within the bounds of the law.

9. Community & Open Source Contributors

 Open Source Developers: Contribute to the wallet’s development if it’s an open-


source project, providing code, bug fixes, and new features.
 User Community: Active users who provide feedback, suggest improvements, report
bugs, and help in the wallet’s promotion and growth.
Event Table

Event Name Trigger Source Activity / Use Case System Response


User enters a
Search Block block number Fetches and displays
User View block details
by Number and clicks block info via Web3 API
"Search"
User enters a
Search
transaction View transaction Retrieves and displays
Transaction User
hash and details transaction data
Hash
submits
Lookup
User enters a View wallet balance Displays balance and list
Wallet User
wallet address and history of recent transactions
Address
Website is
System Show Loads basic interface and
Page Load opened or
(Browser) dashboard/homepage fetches latest Ether price
refreshed
Interval-based
Get Real- Retrieves price from
fetch or Display current Ether
Time Ether System/API CoinGecko (or similar)
triggered on price
Price and updates UI
page load
Connect to
App initializes Prepare for blockchain Connects to Ethereum via
Ethereum System
Web3 instance data fetch Infura/Alchemy
Node
Error API call fails
Displays error message
Fetching or invalid input System Error handling
and requests correct input
Data entered
User accesses
Renders UI elements
Responsive on mobile or Browser
Adjust layout accordingly for
Display Load different (Device)
mobile/tablet/desktop
screen size
UNIFIED MODELING
LANGUAGE DIAGRAM
(UML Diagram)
Use Case Diagram

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

An entity relationship diagram (ER diagram or ERD) is a pictorial or visual representation of


a taxonomy of groups or entities of common interest and a definition of the relationships
between these groups. Therefore, we create structures with various symbols of different
shapes and sizes that can be used as models to show internal structures and relationships. An
entity-relationship model (ER model) is a high- level data model or graphical approach to
database design that defines the data elements and their relationships within a particular
system or software.
Entity Relationship Diagrams (ERDs) were a solution to the lack of a standard way to model
databases and business processes. So it's a kind of flowchart that helps you understand how
different entities, objects, or concepts are related to each other in your system. ER diagrams
are used in fields such as business informatics, software development, education, and
research.

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

Test Test Case


Steps to Execute Expected Result
ID Description
Search by Enter a valid ETH Shows balance,
TC-
Ethereum address and transaction history,
001
Address search. and tokens held.
Displays sender,
Search by
TC- Enter a valid receiver, value, status,
Transaction
002 transaction hash. gas used, and
Hash
timestamp.
Displays block info:
Enter a valid
TC- Search by Block hash, miner, gas used,
block number in
003 Number timestamp, list of
the search bar.
transactions.
Display Verified Search for a Shows readable,
TC-
Smart Contract known verified syntax-highlighted
004
Source Code smart contract. source code and ABI.
Compare
Shows updated, real-
TC- Gas Tracker explorer’s gas fee
time gas fees matching
005 Accuracy data with actual
network conditions.
gas usage.
Open the explorer UI adjusts without
TC- Responsive
on desktop, tablet, broken layouts or
006 Design
and mobile. overlapping elements.
Click the theme Switches between light
TC- Dark/Light
toggle switch in and dark themes
007 Theme Toggle
the header. smoothly.
Set an alert for a Notification is saved
TC- Wallet Activity
wallet’s incoming and user gets alerts on
008 Alerts
transactions. relevant activity.
TC- Invalid Enter a fake or Displays an error:
Test Test Case
Steps to Execute Expected Result
ID Description
Ethereum
malformed "Invalid Ethereum
009 Address
address. address."
Handling
Shows a warning and
Unverified Search an
TC- restricts full access to
Smart Contract unverified smart
010 contract
Handling contract address.
functions/code.
Codes
Result.js

import '../css/index.css';
import './Resultpage'
import metamasklogo from '../css/MetamaskIcon.png'
import { Link } from 'react-router-dom';

const Result = (props) => {


const confirmMeta = props.confirmMeta
const account = props.account;
const balance = props.balance;
const etherprice = props.etherprice;

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'>

<table style={{ fontSize: '1em' }}>


<thead>
<tr>
<th >Transaction Hash</th>
<th >Block Number</th>
<th >Time</th>
<th >Value(Ether)</th>
<th >Gas Used(Gwei)</th>
</tr>
</thead>

<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>
)
}

export default Result;

App.js

import React from "react";


import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Landingpage from "./components/Landingpage";
import Resultpage from './components/Resultpage'
import Blockpage from "./components/Blockpage";
import Transhashpage from "./components/Transhashpage";
import Addresspage from "./components/Addresspage";

import Test from "./components/Test"

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>
);
}

export default App;

index.js

import { INFURA } from "../server/keys";


import "../components/Landingpage";

const { ethers } = require("ethers");

//num.toExponential(0)

let infura = INFURA;


let accounts;
let balance;

const provider = new ethers.providers.JsonRpcProvider(`https://mainnet.infura.io/v3/$


{infura}`)
const loader = document.getElementById('loader');
//const connectBtn = document.getElementById('connectBtn')
//const metamaskBtn = document.getElementById('MetamaskBtn')
const input = document.getElementById('input');
const container = document.getElementById('container');

const manualconnect = async () => {


console.log(`${input.value}`.trim())

balance = await provider.getBalance(`${input.value}`.trim());


balance = ethers.utils.formatEther(balance);
const gasprice = await provider.getGasPrice(`${input.value}`.trim());
console.log(ethers.utils.formatUnits(gasprice, "gwei"));
console.log(balance);

};

const metaconnect = async () => {

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';

alert('Your connection is pending. Please open metamask to continue.')


console.log('worse than we imagined')
}
else if (err.code == '4001') {
alert('You rejected the request to connect Metamask.');
container.style.opacity = '';
loader.style.opacity = '0';

}
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);

export { metaconnect, manualconnect, accounts, balance};

test.js

import '../css/index.css'
//import { useEffect } from 'react';

const Test = () =>{


return(
<div className='testdiv'>
<p>Today</p>
<input className='testInput' type='text' />
</div>
);
};

export default Test;


const Alphabet =
['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','
Y','Z'];

(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

🔍 1. Advanced Search Capabilities


 Search by ENS names, smart contract function names, or token IDs.
 Natural language queries (e.g., “show all transactions from Vitalik’s
wallet last month”).

📈 2. Real-Time Analytics and Visualizations


 Live transaction heatmaps.
 Gas usage trends and predictive charts.
 Network congestion visualizations.

🧠 3. AI-Powered Smart Contract Insights


 Natural language summaries of verified smart contracts.
 Risk analysis and vulnerability detection (e.g., detect potential
reentrancy risks).
 Auto-generated contract documentation and method trees.

🔔 4. Custom Alerts and Notifications


 Set alerts for wallet activity, gas fee changes, or whale movements.
 Push/email notifications for specific contract events.

💼 5. Wallet and Portfolio Tracking


 Connect wallets to view token/NFT holdings.
 Portfolio performance analytics over time.
 Wallet health score (based on activity, diversity, security).

🧩 6. Cross-Chain and Layer 2 Integration


 Explore activity across Ethereum mainnet, Arbitrum, Optimism,
zkSync, Base, etc.
 Unified address tracking across layers.

🧬 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

2. "Blockchain Revolution" by Don Tapscott and Alex Tapscott"Blockchain


Revolution" by Don Tapscott and Alex Tapscott

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

You might also like