Web3.0 Project
Build And Deploy Web 3.0 Project, ETHERESCAN Clone Best Web 3.0 Project 2022
Build And Deploy ETHERESCAN Clone, WEB3.0 with React, Infura, Ether js, EthereScan
Web 3.0 project for the beginner, Build And Deploy Web 3.0 Project, ETHERESCAN Clone Web 3.0 Project 2022. Free web3 course with the project, Build Web3 Etherescan clone
Build your first web 3 project
In this web 3.0 Etherescan project you going to learn about the modern technology in web3 like infura, Ether JS, web3model, And react and modern practices for building web 3.0 applications.
In this web 3.0 web application, we going to follow modern react file structure, context API and three different ways to call API like fetch API Etherscan Global API, and Axios
In this, Web 3.0 project we going to cover the following things.
- Creating the next JS application
- Installing all the necessary NPM Package for building this web 3 project
- Creating folder and file structure react
- Building components structure for this entire application
- Learn about Infra with web3.0 provider
- Learn about Ether JS
- Complete tutorial of Etherscan API
- And many more
All the source code for this entire project is provided down below, so if you are stuck anywhere during this web 3.0 project you can refer back to this article copy the code and compare it with your,s and continue building your first ever web 3.0 web applications from scratch.
Once we built the complete application we going to use Netlify for deploying our web 3.0 project.
Resources for this Web 3.0 Etherescan project are provided down below.
- All the page’s source code.
- All the CSS source code.
- All the component files.
- Context API file
- The image which we have used in this complete web 3.0 project
We believe that you love this complete project and learn from it, so if you like my afford for building this web 3.0 application project.
Then do subscribe and like and give your feedback, will try to modify and come up with more web 3.0 projects for all of you so you can start learning and building your dream project
tittle
PACKAGE.JSON FILE
1. Package.Json
{
“name”: “etherscan”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”
},
“dependencies”: {
“axios”: “^0.27.2”,
“ethers”: “^5.6.9”,
“get-eth-price”: “^1.0.0”,
“next”: “12.2.0”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“react-icons”: “^4.4.0”,
“web3modal”: “^1.9.8”
}
}
PAGES FOLDER
App.js Source Code
import “../styles/globals.css”;
import { EtherProvider } from “../context/Ethere”;
import NavBar from “../components/NavBar”;
import Footer from “../components/Footer”;
const MyApp = ({ Component, pageProps }) => (
<EtherProvider>
<div className=”position”>
<NavBar />
<Component {…pageProps} />
<Footer />
</div>
</EtherProvider>
);
export default MyApp;
Account.js Source Code
import React, { useState, useContext } from “react”;
import axios from “axios”;
import Image from “next/image”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//IMTERNAL IMPORT///
import { Etherescan } from “../context/Ethere”;
import Style from “../styles/account.module.css”;
import etherLogo from “../eth.png”;
import loding from “../loding.gif”;
import Table from “../components/Table”;
const account = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const acc = Object.keys(query)[0];
const [account, setAccount] = useState(“”);
const [balance, setBalance] = useState(“”);
const [totalTransaction, setTotalTransaction] = useState(“”);
const [name, setName] = useState(“”);
const [open, setOpen] = useState(true);
const [loading, setLoading] = useState(true);
//ERC TOKENS CONTRACT ADDRESS
//API
const [accountHistory, setAccountHistory] = useState([]);
const [internalByAddrss, setInternalByAddrss] = useState([]);
const [ERC20, setERC20] = useState([]);
const [blockMindedByAddress, setBlockMindedByAddress] = useState([]);
const [blockRangeTransaction, setBlockRangeTransaction] = useState([]);
const [ERC21, setERC21] = useState([]);
const [ERC1155, setERC1155] = useState([]);
const accountData = async () => {
try {
setAccount(acc);
///ACCOUNT NAME///
if (open) {
setOpen(false);
}
/////
const ESN = await provider.lookupAddress(acc);
if (ESN === null) {
console.log(“No Name”);
setName(ESN);
setLoading(false);
} else {
setName(ESN);
setLoading(false);
}
/////////////////////////////
const accountBalanc = await provider.getBalance(acc);
const showBalance = ethers.utils.formatEther(accountBalanc);
setBalance(showBalance);
//ETHERSCAN API Transaction//
const API_ETHER = “WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG”;
await fetch(
`https://api.etherscan.io/api?module=account&action=txlist&address=${acc}&startblock=0&endblock=99999999&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => response.json())
.then((data) => setAccountHistory(data.result));
//ETHERSCAN API INTERNA Transaction BY HASH//
axios
.get(
`https://api.etherscan.io/api?module=account&action=txlistinternal&address=${acc}&startblock=0&endblock=99999999&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const dataInter = response.data.result;
setInternalByAddrss(dataInter);
});
//ETHERSCAN API ERC20 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=tokentx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC20 = response.data.result;
setERC20(tokenERC20);
});
//ETHERSCAN API MINDED BLOCK BY ADDRESS///
axios
.get(
` https://api.etherscan.io/api?module=account&action=getminedblocks&address=${acc}&blocktype=blocks&page=1&offset=10&apikey=${API_ETHER}`
)
.then((response) => {
const blockMindByAddress = response.data.result;
setBlockMindedByAddress(blockMindByAddress);
});
//ETHERSCAN API TRANSACTION BY BLOCK RANGE///
axios
.get(
` https://api.etherscan.io/api?module=account&action=txlistinternal&startblock=13481773&endblock=13491773&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const transactionBlockRange = response.data.result;
setBlockRangeTransaction(transactionBlockRange);
});
//ETHERSCAN API ERC21 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=tokennfttx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC21 = response.data.result;
setERC21(tokenERC21);
});
//ETHERSCAN API ERC1155 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=token1155tx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC1155 = response.data.result;
setERC1155(tokenERC1155);
// console.log(tokenERC1155);
});
//GET TRANSACTION COUNT
const totalTransaction = await provider.getTransactionCount(acc);
setTotalTransaction(totalTransaction);
} catch (error) {
console.log(“something worng”, error);
}
};
return (
<div className={Style.accountDIV}>
{open ? (
<div className={Style.btnContainer}>
<h1>
{open
? `Welcome
To Ether Finance`
: “Please wait we are loading your data”}
</h1>
<button className={Style.openBtn} onClick={() => accountData()}>
Click Me
</button>
</div>
) : (
<div>
{loading ? (
<div className={Style.loading}>
<Image src={loding} alt=”loading” width={100} height={100} />
</div>
) : (
“”
)}
{!loading ? (
<div className={Style.container}>
<div className={Style.box}>
<div className={Style.account}>
<Image src={etherLogo} alt=”logo” width={20} height={30} />
<p>
Address: <span>{acc}</span>
</p>
</div>
<div className={Style.owner}>
<p onClick={() => accountData()}>Owner</p>
{name || “Hello😀”}
</div>
</div>
<div className={Style.overviewBox}>
<div className={Style.overview}>
<div className={Style.overviewTitle}>
<p>Overview</p>
<p className={Style.miner}>
{name || “Miner”}: {account.slice(0, 10)}…
</p>
</div>
<div className={Style.accountBalance}>
<p className={Style.color}>Balance</p>
<p>{balance} ETH</p>
</div>
<div className={Style.accountValue}>
<p className={Style.color}>Value</p>
<p>$ {balance * 1057.28}</p>
</div>
</div>
<div className={Style.branding}>
<h2>
Welcome <br />
Ether Finance Tracter
</h2>
<p>
Hey, welcome to ether finance tracker, find out your
ethereum
{name || account.slice(0, 10)} financial status
</p>
</div>
</div>
</div>
) : (
“”
)}
{!loading ? (
<Table
accountHistory={accountHistory}
totalTransaction={totalTransaction}
internalByAddrss={internalByAddrss}
ERC20={ERC20}
blockMindedByAddress={blockMindedByAddress}
blockRangeTransaction={blockRangeTransaction}
ERC21={ERC21}
ERC1155={ERC1155}
accountData={accountData}
/>
) : (
“”
)}
</div>
)}
</div>
);
};
export default account;
Block.js Source Code
import React, { useEffect, useState, useContext } from “react”;
import Link from “next/link”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//Internal Block
import StyleTransaction from “../styles/block.module.css”;
import { Etherescan } from “../context/Ethere”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Style from “../components/Table.module.css”;
const block = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const blockNumber = Number(Object.keys(query)[0]);
//OPEN
const [open, setOpen] = useState(false);
//BLOCK DATa
const dataBlock = [];
const [blockData, setblockData] = useState([]);
const [transaction, seTtransaction] = useState([]);
//FORMATE VALUE
const [ethGasLimit, setEthGasLimit] = useState(“”);
const [ethDifficulty, setDifficulty] = useState(“”);
const [ethGasUsed, setEthGasUsed] = useState(“”);
//ACTIVE STATE
const [blockNo, setBlockNo] = useState(true);
const [transactioTab, setTransactioTab] = useState(false);
const openTab = () => {
if (blockNo) {
setBlockNo(false);
setTransactioTab(true);
} else if (transactioTab) {
setBlockNo(true);
}
};
const getBlockDetails = async () => {
try {
const getBlock = await provider.getBlock(blockNumber);
dataBlock.push(getBlock);
setblockData(getBlock);
const gasLimit = ethers.utils.formatEther(getBlock.gasLimit);
setEthGasLimit(gasLimit);
const gasUsed = ethers.utils.formatEther(getBlock.gasUsed);
setEthGasUsed(gasUsed);
const difficulty = ethers.utils.formatEther(getBlock._difficulty);
setDifficulty(difficulty);
//TRANSACTION
seTtransaction(getBlock.transactions);
// console.log(getBlock.transactions);
} catch (error) {
console.log(error);
}
};
// const openDateModal = () => {
// if (open) {
// setOpen(false);
// getBlockDetails();
// }
// };/
useEffect(() => {
getBlockDetails();
}, []);
return (
<div className={StyleTransaction.block}>
<div className={StyleTransaction.box}>
<div className={StyleTransaction.box__header}>
<h3>Block Number</h3>
<p>{blockNumber}</p>
</div>
<div className={StyleTransaction.blockTable}>
<div className={StyleTransaction.blockBtn}>
<button onClick={() => openTab()}>Block Details</button>
<button onClick={() => openTab()}>Block Transaction</button>
</div>
{blockNo ? (
<div>
<div className={StyleTransaction.dataRow}>
<p>Number</p>
<p>{blockData.number}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>TimeStamp</p>
<p>{blockData.timestamp}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Miner</p>
<Link href={{ pathname: “/account/”, query: blockData.miner }}>
<p className={StyleTransaction.color}>{blockData.miner}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Hash</p>
{/* ///////////////////// */}
<p>{blockData.hash}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>parentHash</p>
<p>
{blockData.parntHash
? blockData.parntHash
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Nonce</p>
<p>{blockData.nonce}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Extra Data</p>
<p>{blockData.extraData}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Difficulty</p>
<p>
{blockData.difficulty
? blockData.difficulty
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Limit</p>
<p>{ethGasLimit} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Used</p>
<p>{ethGasUsed} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Difficulty</p>
<p>{ethDifficulty} ETH</p>
</div>
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>All Transaction In The Block {transaction.length}</p>
</div>
<div className={Style.tableInfo}>
{transaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<samp>{i + 1}</samp>
<Link
href={{
pathname: “/transaction/”,
query: blockData.hash,
}}
>
<p className={StyleTransaction.color}>{el}</p>
</Link>
</div>
))}
</div>
</div>
</div>
)}
</div>
</div>
</div>
);
};
export default block;
Transaction.js Source Code
import React, { useEffect, useState, useContext } from “react”;
import Link from “next/link”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//Imternal
import StyleTransaction from “../styles/block.module.css”;
import { Etherescan } from “../context/Ethere”;
const transaction = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const hash = Object.keys(query)[0];
const transDetail = [];
const [transactionData, setTransactionData] = useState(transDetail);
//CONVERTED STATE/
const [gasPrice, setGasPrice] = useState(“”);
const [gasLimit, setGasLimit] = useState(“”);
const [value, setValue] = useState(“”);
const getDataOfTransaction = async () => {
try {
const transactionDetails = await provider.getTransaction(hash);
setTransactionData(transactionDetails);
console.log(transactionDetails);
transDetail.push(transactionData);
//CONVERTING TO ETHER
const gasLimitePrice = ethers.utils.formatUnits(
transactionDetails.gasLimit
);
setGasLimit(gasLimitePrice);
const gasPriceCon = ethers.utils.formatUnits(transactionDetails.gasPrice);
setGasPrice(gasPriceCon);
const etherValue = ethers.utils.formatUnits(transactionDetails.value);
setValue(etherValue);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getDataOfTransaction();
});
return (
<div className={StyleTransaction.block}>
<div className={StyleTransaction.box}>
<div className={StyleTransaction.box__header}>
<h3>Transaction Hash</h3>
<p>{hash}</p>
</div>
<div className={StyleTransaction.blockTable}>
<div>
<div className={StyleTransaction.dataRow}>
<p>Number</p>
<Link
href={{
pathname: “/block/”,
query: transactionData.blockNumber,
}}
>
<p className={StyleTransaction.color}>
{transactionData.blockNumber}
</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Block Hash</p>
<p>{transactionData.blockHash}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>From</p>
<Link
href={{ pathname: “/account/”, query: transactionData.from }}
>
<p className={StyleTransaction.color}>{transactionData.from}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>To</p>
<Link
href={{ pathname: “/account/”, query: transactionData.from }}
>
<p className={StyleTransaction.color}>{transactionData.to}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Hash</p>
<p>
{transactionData.hash
? transactionData.hash
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Nonce</p>
<p>{transactionData.nonce}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Transaction Index</p>
<p>
{transactionData.transactionIndex
? transactionData.transactionIndex
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>R</p>
<p>{transactionData.r}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>S</p>
<p>{transactionData.s}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Limit</p>
<p>{gasLimit} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Price</p>
<p> {gasPrice} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Type</p>
<p>{transactionData.type} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>V</p>
<p>{transactionData.v} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Value</p>
<p>{value} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Chain Id</p>
<p>{transactionData.chainId} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Confirmations</p>
<p>{transactionData.confirmations} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Transaction Index</p>
<p>
{transactionData.creates
? transactionData.creates
: “No Data Avaliable”}
</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default transaction;
CONTEXT FOLDER
Ethere.js Source Code
import React, { useState, useEffect } from “react”;
import { ethers } from “ethers”;
const apiKey = “dc23ef4a274446728c89f941fe1a7636”;
const provider = new ethers.providers.JsonRpcProvider(
`https://mainnet.infura.io/v3/${apiKey}`
);
export const Etherescan = React.createContext();
export const EtherProvider = ({ children }) => {
const tenBlockWithDetails = [];
const [yourBlockTrans, setYourBlockTrans] = useState(tenBlockWithDetails);
const [currentBlock, setCurrentBlock] = useState([]);
const [topTenBlock, setTopTenBlock] = useState([]);
const [transaction, setTransaction] = useState([]);
const [gasPrice, setGasPrice] = useState(“”);
const etherData = “Hey checking connection”;
const accountDetails = async () => {
try {
const getCurrentBlock = await provider.getBlockNumber();
setCurrentBlock(getCurrentBlock);
//SINGLE BLOCAK TRANSACTION
const blockTransaction = await provider.getBlock(getCurrentBlock);
setTransaction(blockTransaction.transactions);
//TOP TEN BLOCK//
const previousBlock = getCurrentBlock – 10;
const listTenBlock = [];
for (let i = getCurrentBlock; i > previousBlock; i–) {
listTenBlock.push([i]);
}
//GET BLOCK DETAILS
const getBlockDetails = listTenBlock.flat();
setTopTenBlock(getBlockDetails);
getBlockDetails.map(async (el) => {
const singleBlockData = await provider.getBlock(el);
tenBlockWithDetails.push(singleBlockData);
});
//ETHER PRICE//
const gasPrice = await provider.getGasPrice();
const latestGasPrice = ethers.utils.formatUnits(gasPrice);
setGasPrice(latestGasPrice);
} catch (error) {
console.log(“Something wrong”);
}
};
useEffect(() => {
accountDetails();
}, []);
return (
<Etherescan.Provider
value={{
etherData,
currentBlock,
topTenBlock,
yourBlockTrans,
transaction,
gasPrice,
provider,
}}
>
{children}
</Etherescan.Provider>
);
};
COMPONENTS FOLDER
BlockRange.jsx (BlockRange )
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const BlockRange = ({ blockRangeTransaction, handleClick }) => {
return (
<div>
{blockRangeTransaction.length === 0 ? (
<div className={Style.sorry}>
<Image src={sorry} alt=”No data” />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.from.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.to.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input ? el.input : “No Data”}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Type</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.type}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TraceId</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.traceId}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>IsError</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.isError}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress ? el.contractAddress : “No Data”}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default BlockRange;
ERC20.jsx ( ERC20)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC20Token = ({ ERC20 }) => {
return (
<div>
{ERC20.length === 0 ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC20 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC20Token;
ERC21.jsx (ERC21)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC21Token = ({ ERC21 }) => {
return (
<div>
{ERC21.length === 0 || ERC21 === “Max rate limit reached” ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC21 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC21Token;
ERC1155.jsx (ERC1155)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC1155Token = ({ ERC1155 }) => {
return (
<div>
{ERC1155.length === 0 || ERC1155 === “Max rate limit reached” ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC1155 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC1155Token;
Footer.jsx ( footer)
import React from “react”;
import Image from “next/image”;
import { RiSendPlaneFill } from “react-icons/ri”;
import {
TiSocialTwitter,
TiSocialYoutube,
TiSocialLinkedin,
TiSocialFacebook,
TiSocialInstagram,
} from “react-icons/ti”;
//INTERNAL IMPORT
import Style from “../styles/footer.module.css”;
import footerLogo from “../footerLogo.png”;
const Footer = () => {
return (
<div className={Style.footer}>
<div className={Style.footer__box}>
<Image src={footerLogo} alt=”logo” width={100} height={100} />
</div>
<div className={Style.footer__box}>
<div className={Style.footer__input}>
<input type=”email” placeholder=”Email*” />
<RiSendPlaneFill />
</div>
</div>
<div className={Style.footer__box}>
<div className={Style.social}>
<TiSocialTwitter />
<TiSocialLinkedin />
<TiSocialFacebook />
<TiSocialInstagram />
<TiSocialInstagram />
<TiSocialYoutube />
</div>
</div>
</div>
);
};
export default Footer;
Internal.jsx ( internal)
import React from “react”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
//
const Internal = ({ internalByAddrss, handleClick }) => {
return (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TraceId</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.traceId}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.from.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>isError</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.isError}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
</div>
);
};
export default Internal;
MindedBlock.jsx ( MindedBlock)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const MindedBlock = ({ blockMindedByAddress }) => {
return (
<div>
{blockMindedByAddress.length === 0 ? (
<div className={Style.sorry}>
<Image src={sorry} alt=”No data” />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block Number</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block Reward</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.blockReward.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default MindedBlock;
NavBar.jsx ( NavBar)
import React, { useState, useEffect, useContext } from “react”;
import Image from “next/image”;
import { MdOutlineClose } from “react-icons/md”;
import { TbChartArrowsVertical } from “react-icons/tb”;
import axios from “axios”;
import Link from “next/link”;
//INYERNAL Import
import { Etherescan } from “../context/Ethere”;
import Style from “../styles/NavBar.module.css”;
import { ethers } from “ethers”;
import user from “../avatar.png”;
import etherLogo from “../eth.png”;
import logo from “../logo.png”;
import logoTop from “../footerLogo.png”;
const NavBar = () => {
const { provider } = useContext(Etherescan);
const [userAccount, setUserAccount] = useState(“”);
const [balance, setBalance] = useState();
const [count, setCount] = useState();
const [openModel, setOpenModel] = useState(true);
const [price, setPrice] = useState([]);
const [etherSupply, setEtherSupply] = useState([]);
const [updatedPriceDate, setUpdatedPriceDate] = useState(“”);
const openUserInfo = () => {
if (openModel) {
setOpenModel(false);
console.log(openModel);
} else if (!openModel) {
setOpenModel(true);
}
};
////GET ETHER PRICE UPDATE
const getEtherPrice = async () => {
try {
const API_ETHER = “WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG”;
axios
.get(
` https://api.etherscan.io/api?module=stats&action=ethprice&apikey=${API_ETHER}`
)
.then((response) => {
setPrice(response.data.result);
// console.log(response.data.result);
const timestamp = Number(response.data.result.ethusd_timestamp);
console.log(timestamp);
const date = new Date(timestamp);
setUpdatedPriceDate(
“UpDate: ” +
date.getHours() +
“:” +
date.getMinutes() +
“:” +
date.getSeconds()
);
});
axios
.get(
`https://api.etherscan.io/api?module=stats&action=ethsupply&apikey=WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG`
)
.then((response) => {
setEtherSupply(response.data.result);
console.log(response);
});
} catch (error) {
console.log(error);
}
};
const checkAccountExist = async () => {
if (!window.ethereum) return console.log(“Install MataMask”);
const accounts = await window.ethereum.request({ method: “eth_accounts” });
if (accounts.length) {
setUserAccount(accounts[0]);
//GET AACCOUNT DETAILS
const getBlance = await provider.getBalance(accounts[0]);
const transactionCount = await provider.getTransactionCount(accounts[0]);
setCount(transactionCount);
const showBalance = ethers.utils.formatUnits(getBlance);
setBalance(showBalance);
} else {
console.log(“Sorry you do not have account”);
}
};
useEffect(() => {
getEtherPrice();
}, []);
useEffect(() => {
checkAccountExist();
});
// //console.log(price);
const connectWallet = async () => {
if (!window.ethereum) return console.log(“Install MataMask”);
const accounts = await window.ethereum.request({
method: “eth_requestAccounts”,
});
if (accounts.length) {
setUserAccount(accounts[0]);
} else {
console.log(“Sorry you do not have account”);
}
window.location.reload();
};
return (
<div>
<div className={Style.navbar}>
<div className={Style.navbar__container}>
<div className={Style.left}>
<Link href=”/”>
<div>
<h1 className={Style.desktop}>Ether Finance</h1>
<h1 className={Style.mobile}>
<Image src={logoTop} alt=”logo” width={50} height={50} />
</h1>
</div>
</Link>
</div>
<div className={Style.right}>
{userAccount.length ? (
<div className={Style.connected}>
<button onClick={() => openUserInfo()}>
Acc: {userAccount.slice(0, 10)}..
</button>
{openModel ? (
<div className={Style.userModal}>
<div className={Style.user_box}>
<div className={Style.closeBtn}>
<MdOutlineClose onClick={() => openUserInfo()} />
</div>
<Image
src={user}
alt=”user account”
width={50}
height={50}
/>
<p>Acc: {userAccount.slice(0, 20)}..</p>
<p>Balance: {balance} ETH</p>
<p>Total Trans: {count} </p>
</div>
</div>
) : (
“”
)}
</div>
) : (
<button onClick={() => connectWallet()}>Connect Wallet</button>
)}
</div>
</div>
</div>
<div className={Style.price}>
<div className={Style.price__box}>
<div className={Style.etherPrice}>
<div>
<Image src={etherLogo} alt=”Ether price” width={30} height={50} />
</div>
<div>
<h4>ETHER PRICE</h4>
<p>$ {price.ethusd}</p>
<p>{price.ethusd} BTC ₿</p>
<p>{updatedPriceDate} </p>
</div>
</div>
<div className={Style.supplyEther}>
<div>
<TbChartArrowsVertical className={Style.supplyIcon} />
</div>
<div>
<h4>TOTAL ETHER SUPPLY</h4>
<p>{etherSupply}</p>
<p>Updated Supply data</p>
<p> </p>
</div>
</div>
</div>
<div className={Style.price__box}>
<div className={Style.tokenBox__logo}>
<Image src={logo} alt=”logo” width={200} height={200} />
</div>
<div className={Style.logoWidth}>
<p>ERC20 TOKEN</p>
<p>ERC21 TOKEN</p>
<p>ERC1155 TOKEN</p>
<p>CONTRACT</p>
</div>
</div>
</div>
</div>
);
};
export default NavBar;
Table.jsx ( Table)
import React, { useState, useEffect } from “react”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import Transaction from “./Transaction”;
import Internal from “./Internal”;
import ERC20Token from “./ERC20Token”;
import MindedBlock from “./MindedBlock”;
import BlockRange from “./BlockRange”;
import ERC21Token from “./ERC21Token”;
import ERC1155Token from “./ERC1155Token”;
const Table = ({
accountHistory,
totalTransaction,
internalByAddrss,
ERC20,
blockMindedByAddress,
blockRangeTransaction,
ERC21,
ERC1155,
accountData,
}) => {
const [historyAccount, setHistoryAccount] = useState(true);
const [addressInternalTransaction, setAddressInternalTransaction] =
useState(false);
const [openERC20, setOpenERC20] = useState(false);
const [addressByMinedeBlock, setAddressByMinedeBlock] = useState(false);
const [TransactionRangeBlock, setTransactionRangeBlock] = useState(false);
const [openERC21, setOpenERC21] = useState(false);
const [openERC1155, setOpenERC1155] = useState(false);
const tabs = (e) => {
const buttonText = e.target.innerText;
console.log(buttonText);
if (buttonText === “Transaction”) {
setHistoryAccount(true);
setAddressInternalTransaction(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Internal”) {
setAddressInternalTransaction(true);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Trans”) {
setTransactionRangeBlock(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC-20”) {
setOpenERC20(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC-21”) {
setOpenERC21(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC1155”) {
setOpenERC1155(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Mined”) {
setAddressByMinedeBlock(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
}
};
///////shhshs
return (
<div className={Style.table}>
<div className={Style.table__head}>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Transaction
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Internal
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Trans
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Mined
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC-20
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC-21
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC1155
</button>
</div>
<div className={Style.numberOfTrans}>
<FaFilter />
<p>
latest 10 from a total of <span>{totalTransaction}</span> transaction
</p>
</div>
{historyAccount ? (
<Transaction
handleClick={accountData}
accountHistory={accountHistory}
/>
) : (
“”
)}
{addressInternalTransaction ? (
<Internal
internalByAddrss={internalByAddrss}
handleClick={accountData}
/>
) : (
“”
)}
{openERC20 ? <ERC20Token ERC20={ERC20} /> : “”}
{addressByMinedeBlock ? (
<MindedBlock
blockMindedByAddress={blockMindedByAddress}
handleClick={accountData}
/>
) : (
“”
)}
{TransactionRangeBlock ? (
<BlockRange
blockRangeTransaction={blockRangeTransaction}
handleClick={accountData}
/>
) : (
“”
)}
{openERC21 ? <ERC21Token ERC21={ERC21} handleClick={accountData} /> : “”}
{openERC1155 ? (
<ERC1155Token ERC1155={ERC1155} handleClick={accountData} />
) : (
“”
)}
</div>
);
};
export default Table;
Table.jsx ( Table)
import React from “react”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
const Transaction = ({ accountHistory, handleClick }) => {
return (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Txn Hash</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Method</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>Transfer</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a onClick={handleClick}>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.to }}>
<a onClick={handleClick}>{el.to.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 5)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Price</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasPrice}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>BlockHash</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.blockHash.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>CumulativeGas</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>GasUsed</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Index</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p> Status</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.txreceipt_status}</p>
</div>
))}
</div>
</div>
</div>
);
};
export default Transaction;
CSS FILES
index.module.css (CSS file for index page)
.header{
width: 65%;
margin: 0 auto;
margin-top: 2rem;
margin-bottom: 1rem;
color: #fff;
display: grid;
gap: 1rem;
}
.header__box{
background-color: #1F1A36;
padding: 1rem;
border-radius: .4rem;
}
.header__box{
text-align: center;
font-weight: 700;
}
/* ///////////////////////////////////// */
.container{
width: 65%;
margin: 0 auto;
margin-top: 1rem;
margin-bottom: 2rem;
color: #fff;
line-height: 1.2;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.container__box{
background-color: #1F1A36;
padding: .5rem 1rem;
font-size: 12px;
border-radius: .4rem;
}
.container__box a{
color: #9a02ac;
font-weight: 700;
}
.container__box h3{
color: #fff;
border-bottom: 1px solid #9a02ac;
padding: .5rem;
}
.container__block{
height: 80vh;
overflow: scroll;
}
.container__block::-webkit-scrollbar{
display: none;
}
.oneBlock{
display: flex;
gap: 2rem;
}
.bk{
background-color: #9a02ac;
width: 1.5rem;
color: #fff;
font-weight: bolder;
padding: .2rem;
border-radius: .2rem;
}
.reward{
display: flex;
align-items: center;
gap: 1rem;
position: relative;
justify-content: space-between;
}
.reward span{
color: #9a02ac;
font-weight: bolder;
}
.miner{
line-height: 1;
}
.link a{
margin-left: .9rem;
}
/* ////////////////////////////////////////////// */
.accountAddress{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.accountAddress input{
background-color: transparent;
border: 0;
outline: none;
padding: .5rem;
color: #fff;
width: 100%;
}
/* ////////////////////////// */
@media screen and (max-width: 45em){
.header{
width: 95%;
}
.container{
grid-template-columns: 1fr;
width: 95%;
overflow: hidden;
}
}
account.module.css (CSS file for Account page)
.accountDIV{
width: 95%;
margin: 0 auto;
position: relative;
}
.container{
width: 70%;
margin: 0 auto;
position: relative;
}
.box{
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
margin-block: 2rem;
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem;
overflow: hidden;
}
.account{
display: flex;
gap: 1rem;
align-items: center;
}
.box span{
margin-left: 1rem;
font-weight: 600;
color: #9a02ac;
}
.owner{
display: flex;
align-items: center;
gap: 2rem;
margin-right: .8rem;
}
.owner p{
padding: .5rem 1rem;
background-color: #9a02ac;
align-items: center;
border-radius: .5rem;
font-weight: 700;
display: flex;
}
/* /////////////////////////////////// */
.overviewBox{
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
line-height: 1;
font-size: 14px;
}
.overview{
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem;
}
.overviewTitle{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #9a02ac;
}
.miner{
border: 1px solid #9a02ac;
padding: .5rem;
border-radius: .5rem;
}
.accountBalance{
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 2rem;
}
.accountValue{
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 2rem;
}
/* */
.color{
background-color: #9a02ac;
padding: .5rem;
border-radius: .5rem;
}
.branding{
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem; text-align: center;
line-height: 1.3;
}
.btnContainer{
margin-bottom: 4rem;
position:relative;
text-align: center;
margin-top: 4rem;
}
.btnContainer h1{
font-size: 4rem;
line-height: 1;
color: #fff;
/* ////////////////////// */
}
.openBtn{
background-color: #1F1A36;
border: none;
padding: 1rem 2rem;
border-radius: .2rem;
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
color: #fff;
}
.loading{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* /////////////////////////////////////// */
.tokenBtn{
position: absolute;
top: 7.5rem;
left: -9rem;
display: grid;
gap: 1rem;
place-content: start;
}
.tokenBtn button{
background-color: #1F1A36;
cursor: pointer;
color: #fff;
padding: .5rem 1rem;
border: 0;
border-radius: .3rem;
}
.overlay{
top: -2rem;
left: -13rem;
position: fixed;
background-color: #9a02ac;
height: 120vh;
width: 120vw;
overflow: hidden;
}
.inputModelCloseBtn{
position: absolute;
top: 20%;
left: 0%;
transform: translate(-50%, -50%);
z-index: 222;
background-color: #1F1A36;
border: none;
padding: .5rem 1rem;
color: #fff;
font-size: 16px;
border-radius: .3rem;
cursor: pointer;
}
.inputAddrss{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.formInput{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.formInput input{
background-color: transparent;
border: 0;
outline: none;
padding: .5rem;
color: #fff;
width: 15rem;
}
.formInput button{
background-color: transparent;
color: #fff;
border: 0;
cursor: pointer;
}
@media screen and (max-width: 35em){
.accountDIV{
width: 100%;
}
.container{
width: 95%;
}
.btnContainer h1{
font-size: 2.5rem;
}
.box{
display: grid;
overflow: hidden;
}
.box span{
margin-left: 0rem;
}
.account{
flex-direction: column;
padding-top: 1rem;
gap: 0;
}
.account p{
margin-top: 1rem;
text-align: center;
}
.owner{
padding-inline: 2rem;
}
.overviewBox{
grid-template-columns: 1fr;
}
}
block.module.css (CSS file for Block page)
.block{
width: 80%;
margin: 0 auto;
margin-block: 2rem ;
}
.box__header{
display: flex;
align-items: center;
justify-content: space-between;
}
.box__header h3{
color: #fff;
background-color: #1F1A36;
padding: 1rem;
border-radius: .5rem;
}
.box__header p{
background-color: #1F1A36;
color: #fff;
padding: 1rem;
border-radius: .5rem;
font-weight: 700;
}
.blockBtn{
background-color: #1F1A36;
display: flex;
gap: 1.5rem;
justify-content: start;
margin-left: -.5rem;
border-bottom: 1px solid #9a02ac;
padding-bottom: .5rem;
}
.blockBtn button{
background: transparent;
border: 0;
color: #fff;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
}
.blockTable{
background-color: #1F1A36;
margin-block: 2rem;
color: #fff;
padding: 1rem 2rem;
border-radius: .5rem;
}
.dataRow{
display: grid;
grid-template-columns: 1fr 5fr;
align-items: center;
font-size: 12px;
overflow: hidden;
}
.color{
color: #9a02ac;
cursor: pointer;
}
@media screen and (max-width: 35em){
.block{
width: 95%;
}
.box__header p {
display: none;
}
.dataRow{
grid-template-columns: 2fr 4fr;
}
}
Footer.module.css (CSS file for Footer page)
.footer{
width: 85%;
margin: 0 auto;
padding: 1rem;
background-color: #1F1A36;
margin-bottom: 3rem;
border-radius: .5rem;
display: grid;
grid-template-columns: 12rem repeat(2, 1fr);
align-items: center;
gap: 2rem;
margin-top: 3rem;
}
.footer__box{
/* /////////////////// */
}
.footer__input{
background-color: #9a02ac;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
border-radius: 2rem;
cursor: pointer;
}
.footer__input input{
background: transparent;
outline: none;
border: 0;
width: 90%;
color: #fff;
}
.footer__input input::-webkit-input-placeholder { /* Edge */
color: #1F1A36;
font-weight: 600;
}
.social{
color: #fff;
display: grid;
margin-left: 6rem;
align-items: center;
font-size: 2rem;
grid-template-columns: repeat(6, 1fr);
cursor: pointer;
}
/* /////////////////////////////////////// */
@media screen and (max-width: 45em){
.footer{
grid-template-columns: 1fr;
text-align: center;
gap: 1.5rem;
width: 95%;
}
.social{
margin-left: 0rem;
font-size: 1.5rem;
padding-inline: 2rem;
}
}
global.module.css (CSS file for Global page)
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background-image: linear-gradient(to right top, #2d0036, #4f015b, #730283, #9a02ac, #C400D7);
height: 100vh;
width: 100vw;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
* {
box-sizing: border-box;
}
.position{
position: relative;
}
NavBar.module.css (CSS file for NavBar page)
.navbar{
width: 85%;
margin: 0 auto;
background-color: #1F1A36;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
border-radius: .5rem;
}
.navbar__container{
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1rem;
}
.left h1{
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
transition: all .4s ease-in-out;
}
.left h1:hover{
color: #9a02ac;
}
.mobile{
display: none;
}
.right {
position: relative;
}
.right button{
color: #9a02ac;
background: transparent;
padding: .5rem;
border: 1px solid #9a02ac;
border-radius: .5rem;
font-weight: 700;
cursor: pointer;
}
.connected{
position: relative;
}
.userModal{
position: absolute;
top: 4rem;
right: 0;
padding: 1rem;
border-radius: .5rem;
background-color: #1F1A36;
width: 15rem;
}
.user_box{
text-align: center;
position: relative;
}
.closeBtn{
position: absolute;
right: 0;
cursor: pointer;
color: #fff;
font-size: 1.5rem;
transition: all .2s ease-in-out;
}
.closeBtn:hover{
transform: rotate(-45deg);
}
/* ////////////////////////////////////// */
/* //PRICE */
.price{
width: 85%;
margin: 0 auto;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
overflow: hidden;
}
.price__box{
background-color: #1F1A36;
border-radius: .5rem;
display: flex;
padding-left: 1rem;
line-height: .2;
align-items: center;
gap: 2rem;
}
.etherPrice{
display: flex;
align-items: center;
gap: 2rem;
}
.price__box h4{
font-size: 1.2rem;
color: #fff;
}
.price__box p {
line-height: .5;
font-weight: 600;
font-size: 14px;
}
.supplyEther{
display: flex;
gap: 2rem;
align-items: center;
}
.supplyIcon{
font-size: 3rem;
}
.logoWidth{
width: 80%;
display: grid;
grid-template-columns: repeat(2,1fr);
border-left: 1px solid #9a02ac;
text-align: center;
padding-left: 2.5rem;
}
.logoWidth p{
line-height: 1.3;
margin-right: 1rem;
font-size: 1.1rem;
color: #fff;
background-color: #9a02ac;
padding: 1rem 0;
border-radius: .2rem;
}
/* /////////////////////////////////// */
@media screen and (max-width: 45em){
.navbar{
width: 100%;
margin-block: 0rem;
padding: 0rem;
border-radius: 0rem;
}
.navbar__container{
padding: 1rem 2rem;
}
.desktop{
display: none;
}
.mobile{
display: block;
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
}
.mobile:hover{
color: #9a02ac;
}
.price{
grid-template-columns: 1fr;
padding: 0;
width: 95%;
}
.price__box{
display: grid;
}
.etherPrice{
padding: .5rem;
}
.logoWidth{
width: 100%;
border-left: 0;
padding-left: 0;
}
.logoWidth p{
font-size: .8rem;
}
.tokenBox__logo{
text-align: center;
margin-bottom: -2.6rem;
}
.right button{
width: 100%;
}
.userModal{
right: -6rem;
}
.userModal{
right: .5rem;
}
}
Table.module.css (CSS file for Table)
.navbar{
width: 85%;
margin: 0 auto;
background-color: #1F1A36;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
border-radius: .5rem;
}
.navbar__container{
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1rem;
}
.left h1{
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
transition: all .4s ease-in-out;
}
.left h1:hover{
color: #9a02ac;
}
.mobile{
display: none;
}
.right {
position: relative;
}
.right button{
color: #9a02ac;
background: transparent;
padding: .5rem;
border: 1px solid #9a02ac;
border-radius: .5rem;
font-weight: 700;
cursor: pointer;
}
.connected{
position: relative;
}
.userModal{
position: absolute;
top: 4rem;
right: 0;
padding: 1rem;
border-radius: .5rem;
background-color: #1F1A36;
width: 15rem;
}
.user_box{
text-align: center;
position: relative;
}
.closeBtn{
position: absolute;
right: 0;
cursor: pointer;
color: #fff;
font-size: 1.5rem;
transition: all .2s ease-in-out;
}
.closeBtn:hover{
transform: rotate(-45deg);
}
/* ////////////////////////////////////// */
/* //PRICE */
.price{
width: 85%;
margin: 0 auto;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
overflow: hidden;
}
.price__box{
background-color: #1F1A36;
border-radius: .5rem;
display: flex;
padding-left: 1rem;
line-height: .2;
align-items: center;
gap: 2rem;
}
.etherPrice{
display: flex;
align-items: center;
gap: 2rem;
}
.price__box h4{
font-size: 1.2rem;
color: #fff;
}
.price__box p {
line-height: .5;
font-weight: 600;
font-size: 14px;
}
.supplyEther{
display: flex;
gap: 2rem;
align-items: center;
}
.supplyIcon{
font-size: 3rem;
}
.logoWidth{
width: 80%;
display: grid;
grid-template-columns: repeat(2,1fr);
border-left: 1px solid #9a02ac;
text-align: center;
padding-left: 2.5rem;
}
.logoWidth p{
line-height: 1.3;
margin-right: 1rem;
font-size: 1.1rem;
color: #fff;
background-color: #9a02ac;
padding: 1rem 0;
border-radius: .2rem;
}
/* /////////////////////////////////// */
@media screen and (max-width: 45em){
.navbar{
width: 100%;
margin-block: 0rem;
padding: 0rem;
border-radius: 0rem;
}
.navbar__container{
padding: 1rem 2rem;
}
.desktop{
display: none;
}
.mobile{
display: block;
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
}
.mobile:hover{
color: #9a02ac;
}
.price{
grid-template-columns: 1fr;
padding: 0;
width: 95%;
}
.price__box{
display: grid;
}
.etherPrice{
padding: .5rem;
}
.logoWidth{
width: 100%;
border-left: 0;
padding-left: 0;
}
.logoWidth p{
font-size: .8rem;
}
.tokenBox__logo{
text-align: center;
margin-bottom: -2.6rem;
}
.right button{
width: 100%;
}
.userModal{
right: -6rem;
}
.userModal{
right: .5rem;
}
}
Health Calculator
My Services
Recent Post
Read...
Build And Deploy Web 3.0 Project, ETHERESCAN Clone Best Web 3.0 Project 2022
Build And Deploy ETHERESCAN Clone, WEB3.0 with React, Infura, Ether js, EthereScan
Build your first web 3 project
In this web 3.0 Etherescan project you going to learn about the modern technology in web3 like infura, Ether JS, web3model, And react and modern practices for building web 3.0 applications.
In this web 3.0 web application, we going to follow modern react file structure, context API and three different ways to call API like fetch API Etherscan Global API, and Axios
In this, Web 3.0 project we going to cover the following things.
- Creating the next JS application
- Installing all the necessary NPM Package for building this web 3 project
- Creating folder and file structure react
- Building components structure for this entire application
- Learn about Infra with web3.0 provider
- Learn about Ether JS
- Complete tutorial of Etherscan API
- And many more
All the source code for this entire project is provided down below, so if you are stuck anywhere during this web 3.0 project you can refer back to this article copy the code and compare it with your,s and continue building your first ever web 3.0 web applications from scratch.
Once we built the complete application we going to use Netlify for deploying our web 3.0 project.
Resources for this Web 3.0 Etherescan project are provided down below.
- All the page’s source code.
- All the CSS source code.
- All the component files.
- Context API file
- The image which we have used in this complete web 3.0 project
We believe that you love this complete project and learn from it, so if you like my afford for building this web 3.0 application project.
Then do subscribe and like and give your feedback, will try to modify and come up with more web 3.0 projects for all of you so you can start learning and building your dream project
tittle
PACKAGE.JSON FILE
1. Package.Json
{
“name”: “etherscan”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”
},
“dependencies”: {
“axios”: “^0.27.2”,
“ethers”: “^5.6.9”,
“get-eth-price”: “^1.0.0”,
“next”: “12.2.0”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“react-icons”: “^4.4.0”,
“web3modal”: “^1.9.8”
}
}
PAGES FOLDER
App.js Source Code
import “../styles/globals.css”;
import { EtherProvider } from “../context/Ethere”;
import NavBar from “../components/NavBar”;
import Footer from “../components/Footer”;
const MyApp = ({ Component, pageProps }) => (
<EtherProvider>
<div className=”position”>
<NavBar />
<Component {…pageProps} />
<Footer />
</div>
</EtherProvider>
);
export default MyApp;
Account.js Source Code
import React, { useState, useContext } from “react”;
import axios from “axios”;
import Image from “next/image”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//IMTERNAL IMPORT///
import { Etherescan } from “../context/Ethere”;
import Style from “../styles/account.module.css”;
import etherLogo from “../eth.png”;
import loding from “../loding.gif”;
import Table from “../components/Table”;
const account = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const acc = Object.keys(query)[0];
const [account, setAccount] = useState(“”);
const [balance, setBalance] = useState(“”);
const [totalTransaction, setTotalTransaction] = useState(“”);
const [name, setName] = useState(“”);
const [open, setOpen] = useState(true);
const [loading, setLoading] = useState(true);
//ERC TOKENS CONTRACT ADDRESS
//API
const [accountHistory, setAccountHistory] = useState([]);
const [internalByAddrss, setInternalByAddrss] = useState([]);
const [ERC20, setERC20] = useState([]);
const [blockMindedByAddress, setBlockMindedByAddress] = useState([]);
const [blockRangeTransaction, setBlockRangeTransaction] = useState([]);
const [ERC21, setERC21] = useState([]);
const [ERC1155, setERC1155] = useState([]);
const accountData = async () => {
try {
setAccount(acc);
///ACCOUNT NAME///
if (open) {
setOpen(false);
}
/////
const ESN = await provider.lookupAddress(acc);
if (ESN === null) {
console.log(“No Name”);
setName(ESN);
setLoading(false);
} else {
setName(ESN);
setLoading(false);
}
/////////////////////////////
const accountBalanc = await provider.getBalance(acc);
const showBalance = ethers.utils.formatEther(accountBalanc);
setBalance(showBalance);
//ETHERSCAN API Transaction//
const API_ETHER = “WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG”;
await fetch(
`https://api.etherscan.io/api?module=account&action=txlist&address=${acc}&startblock=0&endblock=99999999&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => response.json())
.then((data) => setAccountHistory(data.result));
//ETHERSCAN API INTERNA Transaction BY HASH//
axios
.get(
`https://api.etherscan.io/api?module=account&action=txlistinternal&address=${acc}&startblock=0&endblock=99999999&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const dataInter = response.data.result;
setInternalByAddrss(dataInter);
});
//ETHERSCAN API ERC20 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=tokentx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC20 = response.data.result;
setERC20(tokenERC20);
});
//ETHERSCAN API MINDED BLOCK BY ADDRESS///
axios
.get(
` https://api.etherscan.io/api?module=account&action=getminedblocks&address=${acc}&blocktype=blocks&page=1&offset=10&apikey=${API_ETHER}`
)
.then((response) => {
const blockMindByAddress = response.data.result;
setBlockMindedByAddress(blockMindByAddress);
});
//ETHERSCAN API TRANSACTION BY BLOCK RANGE///
axios
.get(
` https://api.etherscan.io/api?module=account&action=txlistinternal&startblock=13481773&endblock=13491773&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const transactionBlockRange = response.data.result;
setBlockRangeTransaction(transactionBlockRange);
});
//ETHERSCAN API ERC21 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=tokennfttx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC21 = response.data.result;
setERC21(tokenERC21);
});
//ETHERSCAN API ERC1155 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=token1155tx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC1155 = response.data.result;
setERC1155(tokenERC1155);
// console.log(tokenERC1155);
});
//GET TRANSACTION COUNT
const totalTransaction = await provider.getTransactionCount(acc);
setTotalTransaction(totalTransaction);
} catch (error) {
console.log(“something worng”, error);
}
};
return (
<div className={Style.accountDIV}>
{open ? (
<div className={Style.btnContainer}>
<h1>
{open
? `Welcome
To Ether Finance`
: “Please wait we are loading your data”}
</h1>
<button className={Style.openBtn} onClick={() => accountData()}>
Click Me
</button>
</div>
) : (
<div>
{loading ? (
<div className={Style.loading}>
<Image src={loding} alt=”loading” width={100} height={100} />
</div>
) : (
“”
)}
{!loading ? (
<div className={Style.container}>
<div className={Style.box}>
<div className={Style.account}>
<Image src={etherLogo} alt=”logo” width={20} height={30} />
<p>
Address: <span>{acc}</span>
</p>
</div>
<div className={Style.owner}>
<p onClick={() => accountData()}>Owner</p>
{name || “Hello😀”}
</div>
</div>
<div className={Style.overviewBox}>
<div className={Style.overview}>
<div className={Style.overviewTitle}>
<p>Overview</p>
<p className={Style.miner}>
{name || “Miner”}: {account.slice(0, 10)}…
</p>
</div>
<div className={Style.accountBalance}>
<p className={Style.color}>Balance</p>
<p>{balance} ETH</p>
</div>
<div className={Style.accountValue}>
<p className={Style.color}>Value</p>
<p>$ {balance * 1057.28}</p>
</div>
</div>
<div className={Style.branding}>
<h2>
Welcome <br />
Ether Finance Tracter
</h2>
<p>
Hey, welcome to ether finance tracker, find out your
ethereum
{name || account.slice(0, 10)} financial status
</p>
</div>
</div>
</div>
) : (
“”
)}
{!loading ? (
<Table
accountHistory={accountHistory}
totalTransaction={totalTransaction}
internalByAddrss={internalByAddrss}
ERC20={ERC20}
blockMindedByAddress={blockMindedByAddress}
blockRangeTransaction={blockRangeTransaction}
ERC21={ERC21}
ERC1155={ERC1155}
accountData={accountData}
/>
) : (
“”
)}
</div>
)}
</div>
);
};
export default account;
Block.js Source Code
import React, { useEffect, useState, useContext } from “react”;
import Link from “next/link”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//Internal Block
import StyleTransaction from “../styles/block.module.css”;
import { Etherescan } from “../context/Ethere”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Style from “../components/Table.module.css”;
const block = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const blockNumber = Number(Object.keys(query)[0]);
//OPEN
const [open, setOpen] = useState(false);
//BLOCK DATa
const dataBlock = [];
const [blockData, setblockData] = useState([]);
const [transaction, seTtransaction] = useState([]);
//FORMATE VALUE
const [ethGasLimit, setEthGasLimit] = useState(“”);
const [ethDifficulty, setDifficulty] = useState(“”);
const [ethGasUsed, setEthGasUsed] = useState(“”);
//ACTIVE STATE
const [blockNo, setBlockNo] = useState(true);
const [transactioTab, setTransactioTab] = useState(false);
const openTab = () => {
if (blockNo) {
setBlockNo(false);
setTransactioTab(true);
} else if (transactioTab) {
setBlockNo(true);
}
};
const getBlockDetails = async () => {
try {
const getBlock = await provider.getBlock(blockNumber);
dataBlock.push(getBlock);
setblockData(getBlock);
const gasLimit = ethers.utils.formatEther(getBlock.gasLimit);
setEthGasLimit(gasLimit);
const gasUsed = ethers.utils.formatEther(getBlock.gasUsed);
setEthGasUsed(gasUsed);
const difficulty = ethers.utils.formatEther(getBlock._difficulty);
setDifficulty(difficulty);
//TRANSACTION
seTtransaction(getBlock.transactions);
// console.log(getBlock.transactions);
} catch (error) {
console.log(error);
}
};
// const openDateModal = () => {
// if (open) {
// setOpen(false);
// getBlockDetails();
// }
// };/
useEffect(() => {
getBlockDetails();
}, []);
return (
<div className={StyleTransaction.block}>
<div className={StyleTransaction.box}>
<div className={StyleTransaction.box__header}>
<h3>Block Number</h3>
<p>{blockNumber}</p>
</div>
<div className={StyleTransaction.blockTable}>
<div className={StyleTransaction.blockBtn}>
<button onClick={() => openTab()}>Block Details</button>
<button onClick={() => openTab()}>Block Transaction</button>
</div>
{blockNo ? (
<div>
<div className={StyleTransaction.dataRow}>
<p>Number</p>
<p>{blockData.number}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>TimeStamp</p>
<p>{blockData.timestamp}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Miner</p>
<Link href={{ pathname: “/account/”, query: blockData.miner }}>
<p className={StyleTransaction.color}>{blockData.miner}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Hash</p>
{/* ///////////////////// */}
<p>{blockData.hash}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>parentHash</p>
<p>
{blockData.parntHash
? blockData.parntHash
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Nonce</p>
<p>{blockData.nonce}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Extra Data</p>
<p>{blockData.extraData}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Difficulty</p>
<p>
{blockData.difficulty
? blockData.difficulty
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Limit</p>
<p>{ethGasLimit} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Used</p>
<p>{ethGasUsed} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Difficulty</p>
<p>{ethDifficulty} ETH</p>
</div>
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>All Transaction In The Block {transaction.length}</p>
</div>
<div className={Style.tableInfo}>
{transaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<samp>{i + 1}</samp>
<Link
href={{
pathname: “/transaction/”,
query: blockData.hash,
}}
>
<p className={StyleTransaction.color}>{el}</p>
</Link>
</div>
))}
</div>
</div>
</div>
)}
</div>
</div>
</div>
);
};
export default block;
Transaction.js Source Code
import React, { useEffect, useState, useContext } from “react”;
import Link from “next/link”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//Imternal
import StyleTransaction from “../styles/block.module.css”;
import { Etherescan } from “../context/Ethere”;
const transaction = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const hash = Object.keys(query)[0];
const transDetail = [];
const [transactionData, setTransactionData] = useState(transDetail);
//CONVERTED STATE/
const [gasPrice, setGasPrice] = useState(“”);
const [gasLimit, setGasLimit] = useState(“”);
const [value, setValue] = useState(“”);
const getDataOfTransaction = async () => {
try {
const transactionDetails = await provider.getTransaction(hash);
setTransactionData(transactionDetails);
console.log(transactionDetails);
transDetail.push(transactionData);
//CONVERTING TO ETHER
const gasLimitePrice = ethers.utils.formatUnits(
transactionDetails.gasLimit
);
setGasLimit(gasLimitePrice);
const gasPriceCon = ethers.utils.formatUnits(transactionDetails.gasPrice);
setGasPrice(gasPriceCon);
const etherValue = ethers.utils.formatUnits(transactionDetails.value);
setValue(etherValue);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getDataOfTransaction();
});
return (
<div className={StyleTransaction.block}>
<div className={StyleTransaction.box}>
<div className={StyleTransaction.box__header}>
<h3>Transaction Hash</h3>
<p>{hash}</p>
</div>
<div className={StyleTransaction.blockTable}>
<div>
<div className={StyleTransaction.dataRow}>
<p>Number</p>
<Link
href={{
pathname: “/block/”,
query: transactionData.blockNumber,
}}
>
<p className={StyleTransaction.color}>
{transactionData.blockNumber}
</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Block Hash</p>
<p>{transactionData.blockHash}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>From</p>
<Link
href={{ pathname: “/account/”, query: transactionData.from }}
>
<p className={StyleTransaction.color}>{transactionData.from}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>To</p>
<Link
href={{ pathname: “/account/”, query: transactionData.from }}
>
<p className={StyleTransaction.color}>{transactionData.to}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Hash</p>
<p>
{transactionData.hash
? transactionData.hash
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Nonce</p>
<p>{transactionData.nonce}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Transaction Index</p>
<p>
{transactionData.transactionIndex
? transactionData.transactionIndex
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>R</p>
<p>{transactionData.r}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>S</p>
<p>{transactionData.s}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Limit</p>
<p>{gasLimit} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Price</p>
<p> {gasPrice} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Type</p>
<p>{transactionData.type} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>V</p>
<p>{transactionData.v} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Value</p>
<p>{value} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Chain Id</p>
<p>{transactionData.chainId} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Confirmations</p>
<p>{transactionData.confirmations} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Transaction Index</p>
<p>
{transactionData.creates
? transactionData.creates
: “No Data Avaliable”}
</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default transaction;
CONTEXT FOLDER
Ethere.js Source Code
import React, { useState, useEffect } from “react”;
import { ethers } from “ethers”;
const apiKey = “dc23ef4a274446728c89f941fe1a7636”;
const provider = new ethers.providers.JsonRpcProvider(
`https://mainnet.infura.io/v3/${apiKey}`
);
export const Etherescan = React.createContext();
export const EtherProvider = ({ children }) => {
const tenBlockWithDetails = [];
const [yourBlockTrans, setYourBlockTrans] = useState(tenBlockWithDetails);
const [currentBlock, setCurrentBlock] = useState([]);
const [topTenBlock, setTopTenBlock] = useState([]);
const [transaction, setTransaction] = useState([]);
const [gasPrice, setGasPrice] = useState(“”);
const etherData = “Hey checking connection”;
const accountDetails = async () => {
try {
const getCurrentBlock = await provider.getBlockNumber();
setCurrentBlock(getCurrentBlock);
//SINGLE BLOCAK TRANSACTION
const blockTransaction = await provider.getBlock(getCurrentBlock);
setTransaction(blockTransaction.transactions);
//TOP TEN BLOCK//
const previousBlock = getCurrentBlock – 10;
const listTenBlock = [];
for (let i = getCurrentBlock; i > previousBlock; i–) {
listTenBlock.push([i]);
}
//GET BLOCK DETAILS
const getBlockDetails = listTenBlock.flat();
setTopTenBlock(getBlockDetails);
getBlockDetails.map(async (el) => {
const singleBlockData = await provider.getBlock(el);
tenBlockWithDetails.push(singleBlockData);
});
//ETHER PRICE//
const gasPrice = await provider.getGasPrice();
const latestGasPrice = ethers.utils.formatUnits(gasPrice);
setGasPrice(latestGasPrice);
} catch (error) {
console.log(“Something wrong”);
}
};
useEffect(() => {
accountDetails();
}, []);
return (
<Etherescan.Provider
value={{
etherData,
currentBlock,
topTenBlock,
yourBlockTrans,
transaction,
gasPrice,
provider,
}}
>
{children}
</Etherescan.Provider>
);
};
COMPONENTS FOLDER
BlockRange.jsx (BlockRange )
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const BlockRange = ({ blockRangeTransaction, handleClick }) => {
return (
<div>
{blockRangeTransaction.length === 0 ? (
<div className={Style.sorry}>
<Image src={sorry} alt=”No data” />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.from.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.to.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input ? el.input : “No Data”}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Type</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.type}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TraceId</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.traceId}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>IsError</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.isError}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress ? el.contractAddress : “No Data”}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default BlockRange;
ERC20.jsx ( ERC20)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC20Token = ({ ERC20 }) => {
return (
<div>
{ERC20.length === 0 ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC20 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC20Token;
ERC21.jsx (ERC21)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC21Token = ({ ERC21 }) => {
return (
<div>
{ERC21.length === 0 || ERC21 === “Max rate limit reached” ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC21 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC21Token;
ERC1155.jsx (ERC1155)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC1155Token = ({ ERC1155 }) => {
return (
<div>
{ERC1155.length === 0 || ERC1155 === “Max rate limit reached” ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC1155 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC1155Token;
Footer.jsx ( footer)
import React from “react”;
import Image from “next/image”;
import { RiSendPlaneFill } from “react-icons/ri”;
import {
TiSocialTwitter,
TiSocialYoutube,
TiSocialLinkedin,
TiSocialFacebook,
TiSocialInstagram,
} from “react-icons/ti”;
//INTERNAL IMPORT
import Style from “../styles/footer.module.css”;
import footerLogo from “../footerLogo.png”;
const Footer = () => {
return (
<div className={Style.footer}>
<div className={Style.footer__box}>
<Image src={footerLogo} alt=”logo” width={100} height={100} />
</div>
<div className={Style.footer__box}>
<div className={Style.footer__input}>
<input type=”email” placeholder=”Email*” />
<RiSendPlaneFill />
</div>
</div>
<div className={Style.footer__box}>
<div className={Style.social}>
<TiSocialTwitter />
<TiSocialLinkedin />
<TiSocialFacebook />
<TiSocialInstagram />
<TiSocialInstagram />
<TiSocialYoutube />
</div>
</div>
</div>
);
};
export default Footer;
Internal.jsx ( internal)
import React from “react”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
//
const Internal = ({ internalByAddrss, handleClick }) => {
return (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TraceId</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.traceId}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.from.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>isError</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.isError}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
</div>
);
};
export default Internal;
MindedBlock.jsx ( MindedBlock)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const MindedBlock = ({ blockMindedByAddress }) => {
return (
<div>
{blockMindedByAddress.length === 0 ? (
<div className={Style.sorry}>
<Image src={sorry} alt=”No data” />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block Number</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block Reward</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.blockReward.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default MindedBlock;
NavBar.jsx ( NavBar)
import React, { useState, useEffect, useContext } from “react”;
import Image from “next/image”;
import { MdOutlineClose } from “react-icons/md”;
import { TbChartArrowsVertical } from “react-icons/tb”;
import axios from “axios”;
import Link from “next/link”;
//INYERNAL Import
import { Etherescan } from “../context/Ethere”;
import Style from “../styles/NavBar.module.css”;
import { ethers } from “ethers”;
import user from “../avatar.png”;
import etherLogo from “../eth.png”;
import logo from “../logo.png”;
import logoTop from “../footerLogo.png”;
const NavBar = () => {
const { provider } = useContext(Etherescan);
const [userAccount, setUserAccount] = useState(“”);
const [balance, setBalance] = useState();
const [count, setCount] = useState();
const [openModel, setOpenModel] = useState(true);
const [price, setPrice] = useState([]);
const [etherSupply, setEtherSupply] = useState([]);
const [updatedPriceDate, setUpdatedPriceDate] = useState(“”);
const openUserInfo = () => {
if (openModel) {
setOpenModel(false);
console.log(openModel);
} else if (!openModel) {
setOpenModel(true);
}
};
////GET ETHER PRICE UPDATE
const getEtherPrice = async () => {
try {
const API_ETHER = “WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG”;
axios
.get(
` https://api.etherscan.io/api?module=stats&action=ethprice&apikey=${API_ETHER}`
)
.then((response) => {
setPrice(response.data.result);
// console.log(response.data.result);
const timestamp = Number(response.data.result.ethusd_timestamp);
console.log(timestamp);
const date = new Date(timestamp);
setUpdatedPriceDate(
“UpDate: ” +
date.getHours() +
“:” +
date.getMinutes() +
“:” +
date.getSeconds()
);
});
axios
.get(
`https://api.etherscan.io/api?module=stats&action=ethsupply&apikey=WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG`
)
.then((response) => {
setEtherSupply(response.data.result);
console.log(response);
});
} catch (error) {
console.log(error);
}
};
const checkAccountExist = async () => {
if (!window.ethereum) return console.log(“Install MataMask”);
const accounts = await window.ethereum.request({ method: “eth_accounts” });
if (accounts.length) {
setUserAccount(accounts[0]);
//GET AACCOUNT DETAILS
const getBlance = await provider.getBalance(accounts[0]);
const transactionCount = await provider.getTransactionCount(accounts[0]);
setCount(transactionCount);
const showBalance = ethers.utils.formatUnits(getBlance);
setBalance(showBalance);
} else {
console.log(“Sorry you do not have account”);
}
};
useEffect(() => {
getEtherPrice();
}, []);
useEffect(() => {
checkAccountExist();
});
// //console.log(price);
const connectWallet = async () => {
if (!window.ethereum) return console.log(“Install MataMask”);
const accounts = await window.ethereum.request({
method: “eth_requestAccounts”,
});
if (accounts.length) {
setUserAccount(accounts[0]);
} else {
console.log(“Sorry you do not have account”);
}
window.location.reload();
};
return (
<div>
<div className={Style.navbar}>
<div className={Style.navbar__container}>
<div className={Style.left}>
<Link href=”/”>
<div>
<h1 className={Style.desktop}>Ether Finance</h1>
<h1 className={Style.mobile}>
<Image src={logoTop} alt=”logo” width={50} height={50} />
</h1>
</div>
</Link>
</div>
<div className={Style.right}>
{userAccount.length ? (
<div className={Style.connected}>
<button onClick={() => openUserInfo()}>
Acc: {userAccount.slice(0, 10)}..
</button>
{openModel ? (
<div className={Style.userModal}>
<div className={Style.user_box}>
<div className={Style.closeBtn}>
<MdOutlineClose onClick={() => openUserInfo()} />
</div>
<Image
src={user}
alt=”user account”
width={50}
height={50}
/>
<p>Acc: {userAccount.slice(0, 20)}..</p>
<p>Balance: {balance} ETH</p>
<p>Total Trans: {count} </p>
</div>
</div>
) : (
“”
)}
</div>
) : (
<button onClick={() => connectWallet()}>Connect Wallet</button>
)}
</div>
</div>
</div>
<div className={Style.price}>
<div className={Style.price__box}>
<div className={Style.etherPrice}>
<div>
<Image src={etherLogo} alt=”Ether price” width={30} height={50} />
</div>
<div>
<h4>ETHER PRICE</h4>
<p>$ {price.ethusd}</p>
<p>{price.ethusd} BTC ₿</p>
<p>{updatedPriceDate} </p>
</div>
</div>
<div className={Style.supplyEther}>
<div>
<TbChartArrowsVertical className={Style.supplyIcon} />
</div>
<div>
<h4>TOTAL ETHER SUPPLY</h4>
<p>{etherSupply}</p>
<p>Updated Supply data</p>
<p> </p>
</div>
</div>
</div>
<div className={Style.price__box}>
<div className={Style.tokenBox__logo}>
<Image src={logo} alt=”logo” width={200} height={200} />
</div>
<div className={Style.logoWidth}>
<p>ERC20 TOKEN</p>
<p>ERC21 TOKEN</p>
<p>ERC1155 TOKEN</p>
<p>CONTRACT</p>
</div>
</div>
</div>
</div>
);
};
export default NavBar;
Table.jsx ( Table)
import React, { useState, useEffect } from “react”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import Transaction from “./Transaction”;
import Internal from “./Internal”;
import ERC20Token from “./ERC20Token”;
import MindedBlock from “./MindedBlock”;
import BlockRange from “./BlockRange”;
import ERC21Token from “./ERC21Token”;
import ERC1155Token from “./ERC1155Token”;
const Table = ({
accountHistory,
totalTransaction,
internalByAddrss,
ERC20,
blockMindedByAddress,
blockRangeTransaction,
ERC21,
ERC1155,
accountData,
}) => {
const [historyAccount, setHistoryAccount] = useState(true);
const [addressInternalTransaction, setAddressInternalTransaction] =
useState(false);
const [openERC20, setOpenERC20] = useState(false);
const [addressByMinedeBlock, setAddressByMinedeBlock] = useState(false);
const [TransactionRangeBlock, setTransactionRangeBlock] = useState(false);
const [openERC21, setOpenERC21] = useState(false);
const [openERC1155, setOpenERC1155] = useState(false);
const tabs = (e) => {
const buttonText = e.target.innerText;
console.log(buttonText);
if (buttonText === “Transaction”) {
setHistoryAccount(true);
setAddressInternalTransaction(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Internal”) {
setAddressInternalTransaction(true);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Trans”) {
setTransactionRangeBlock(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC-20”) {
setOpenERC20(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC-21”) {
setOpenERC21(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC1155”) {
setOpenERC1155(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Mined”) {
setAddressByMinedeBlock(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
}
};
///////shhshs
return (
<div className={Style.table}>
<div className={Style.table__head}>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Transaction
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Internal
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Trans
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Mined
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC-20
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC-21
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC1155
</button>
</div>
<div className={Style.numberOfTrans}>
<FaFilter />
<p>
latest 10 from a total of <span>{totalTransaction}</span> transaction
</p>
</div>
{historyAccount ? (
<Transaction
handleClick={accountData}
accountHistory={accountHistory}
/>
) : (
“”
)}
{addressInternalTransaction ? (
<Internal
internalByAddrss={internalByAddrss}
handleClick={accountData}
/>
) : (
“”
)}
{openERC20 ? <ERC20Token ERC20={ERC20} /> : “”}
{addressByMinedeBlock ? (
<MindedBlock
blockMindedByAddress={blockMindedByAddress}
handleClick={accountData}
/>
) : (
“”
)}
{TransactionRangeBlock ? (
<BlockRange
blockRangeTransaction={blockRangeTransaction}
handleClick={accountData}
/>
) : (
“”
)}
{openERC21 ? <ERC21Token ERC21={ERC21} handleClick={accountData} /> : “”}
{openERC1155 ? (
<ERC1155Token ERC1155={ERC1155} handleClick={accountData} />
) : (
“”
)}
</div>
);
};
export default Table;
Table.jsx ( Table)
import React from “react”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
const Transaction = ({ accountHistory, handleClick }) => {
return (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Txn Hash</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Method</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>Transfer</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a onClick={handleClick}>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.to }}>
<a onClick={handleClick}>{el.to.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 5)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Price</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasPrice}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>BlockHash</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.blockHash.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>CumulativeGas</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>GasUsed</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Index</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p> Status</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.txreceipt_status}</p>
</div>
))}
</div>
</div>
</div>
);
};
export default Transaction;
CSS FILES
index.module.css (CSS file for index page)
.header{
width: 65%;
margin: 0 auto;
margin-top: 2rem;
margin-bottom: 1rem;
color: #fff;
display: grid;
gap: 1rem;
}
.header__box{
background-color: #1F1A36;
padding: 1rem;
border-radius: .4rem;
}
.header__box{
text-align: center;
font-weight: 700;
}
/* ///////////////////////////////////// */
.container{
width: 65%;
margin: 0 auto;
margin-top: 1rem;
margin-bottom: 2rem;
color: #fff;
line-height: 1.2;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.container__box{
background-color: #1F1A36;
padding: .5rem 1rem;
font-size: 12px;
border-radius: .4rem;
}
.container__box a{
color: #9a02ac;
font-weight: 700;
}
.container__box h3{
color: #fff;
border-bottom: 1px solid #9a02ac;
padding: .5rem;
}
.container__block{
height: 80vh;
overflow: scroll;
}
.container__block::-webkit-scrollbar{
display: none;
}
.oneBlock{
display: flex;
gap: 2rem;
}
.bk{
background-color: #9a02ac;
width: 1.5rem;
color: #fff;
font-weight: bolder;
padding: .2rem;
border-radius: .2rem;
}
.reward{
display: flex;
align-items: center;
gap: 1rem;
position: relative;
justify-content: space-between;
}
.reward span{
color: #9a02ac;
font-weight: bolder;
}
.miner{
line-height: 1;
}
.link a{
margin-left: .9rem;
}
/* ////////////////////////////////////////////// */
.accountAddress{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.accountAddress input{
background-color: transparent;
border: 0;
outline: none;
padding: .5rem;
color: #fff;
width: 100%;
}
/* ////////////////////////// */
@media screen and (max-width: 45em){
.header{
width: 95%;
}
.container{
grid-template-columns: 1fr;
width: 95%;
overflow: hidden;
}
}
account.module.css (CSS file for Account page)
.accountDIV{
width: 95%;
margin: 0 auto;
position: relative;
}
.container{
width: 70%;
margin: 0 auto;
position: relative;
}
.box{
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
margin-block: 2rem;
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem;
overflow: hidden;
}
.account{
display: flex;
gap: 1rem;
align-items: center;
}
.box span{
margin-left: 1rem;
font-weight: 600;
color: #9a02ac;
}
.owner{
display: flex;
align-items: center;
gap: 2rem;
margin-right: .8rem;
}
.owner p{
padding: .5rem 1rem;
background-color: #9a02ac;
align-items: center;
border-radius: .5rem;
font-weight: 700;
display: flex;
}
/* /////////////////////////////////// */
.overviewBox{
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
line-height: 1;
font-size: 14px;
}
.overview{
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem;
}
.overviewTitle{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #9a02ac;
}
.miner{
border: 1px solid #9a02ac;
padding: .5rem;
border-radius: .5rem;
}
.accountBalance{
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 2rem;
}
.accountValue{
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 2rem;
}
/* */
.color{
background-color: #9a02ac;
padding: .5rem;
border-radius: .5rem;
}
.branding{
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem; text-align: center;
line-height: 1.3;
}
.btnContainer{
margin-bottom: 4rem;
position:relative;
text-align: center;
margin-top: 4rem;
}
.btnContainer h1{
font-size: 4rem;
line-height: 1;
color: #fff;
/* ////////////////////// */
}
.openBtn{
background-color: #1F1A36;
border: none;
padding: 1rem 2rem;
border-radius: .2rem;
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
color: #fff;
}
.loading{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* /////////////////////////////////////// */
.tokenBtn{
position: absolute;
top: 7.5rem;
left: -9rem;
display: grid;
gap: 1rem;
place-content: start;
}
.tokenBtn button{
background-color: #1F1A36;
cursor: pointer;
color: #fff;
padding: .5rem 1rem;
border: 0;
border-radius: .3rem;
}
.overlay{
top: -2rem;
left: -13rem;
position: fixed;
background-color: #9a02ac;
height: 120vh;
width: 120vw;
overflow: hidden;
}
.inputModelCloseBtn{
position: absolute;
top: 20%;
left: 0%;
transform: translate(-50%, -50%);
z-index: 222;
background-color: #1F1A36;
border: none;
padding: .5rem 1rem;
color: #fff;
font-size: 16px;
border-radius: .3rem;
cursor: pointer;
}
.inputAddrss{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.formInput{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.formInput input{
background-color: transparent;
border: 0;
outline: none;
padding: .5rem;
color: #fff;
width: 15rem;
}
.formInput button{
background-color: transparent;
color: #fff;
border: 0;
cursor: pointer;
}
@media screen and (max-width: 35em){
.accountDIV{
width: 100%;
}
.container{
width: 95%;
}
.btnContainer h1{
font-size: 2.5rem;
}
.box{
display: grid;
overflow: hidden;
}
.box span{
margin-left: 0rem;
}
.account{
flex-direction: column;
padding-top: 1rem;
gap: 0;
}
.account p{
margin-top: 1rem;
text-align: center;
}
.owner{
padding-inline: 2rem;
}
.overviewBox{
grid-template-columns: 1fr;
}
}
block.module.css (CSS file for Block page)
.block{
width: 80%;
margin: 0 auto;
margin-block: 2rem ;
}
.box__header{
display: flex;
align-items: center;
justify-content: space-between;
}
.box__header h3{
color: #fff;
background-color: #1F1A36;
padding: 1rem;
border-radius: .5rem;
}
.box__header p{
background-color: #1F1A36;
color: #fff;
padding: 1rem;
border-radius: .5rem;
font-weight: 700;
}
.blockBtn{
background-color: #1F1A36;
display: flex;
gap: 1.5rem;
justify-content: start;
margin-left: -.5rem;
border-bottom: 1px solid #9a02ac;
padding-bottom: .5rem;
}
.blockBtn button{
background: transparent;
border: 0;
color: #fff;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
}
.blockTable{
background-color: #1F1A36;
margin-block: 2rem;
color: #fff;
padding: 1rem 2rem;
border-radius: .5rem;
}
.dataRow{
display: grid;
grid-template-columns: 1fr 5fr;
align-items: center;
font-size: 12px;
overflow: hidden;
}
.color{
color: #9a02ac;
cursor: pointer;
}
@media screen and (max-width: 35em){
.block{
width: 95%;
}
.box__header p {
display: none;
}
.dataRow{
grid-template-columns: 2fr 4fr;
}
}
Footer.module.css (CSS file for Footer page)
.footer{
width: 85%;
margin: 0 auto;
padding: 1rem;
background-color: #1F1A36;
margin-bottom: 3rem;
border-radius: .5rem;
display: grid;
grid-template-columns: 12rem repeat(2, 1fr);
align-items: center;
gap: 2rem;
margin-top: 3rem;
}
.footer__box{
/* /////////////////// */
}
.footer__input{
background-color: #9a02ac;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
border-radius: 2rem;
cursor: pointer;
}
.footer__input input{
background: transparent;
outline: none;
border: 0;
width: 90%;
color: #fff;
}
.footer__input input::-webkit-input-placeholder { /* Edge */
color: #1F1A36;
font-weight: 600;
}
.social{
color: #fff;
display: grid;
margin-left: 6rem;
align-items: center;
font-size: 2rem;
grid-template-columns: repeat(6, 1fr);
cursor: pointer;
}
/* /////////////////////////////////////// */
@media screen and (max-width: 45em){
.footer{
grid-template-columns: 1fr;
text-align: center;
gap: 1.5rem;
width: 95%;
}
.social{
margin-left: 0rem;
font-size: 1.5rem;
padding-inline: 2rem;
}
}
global.module.css (CSS file for Global page)
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background-image: linear-gradient(to right top, #2d0036, #4f015b, #730283, #9a02ac, #C400D7);
height: 100vh;
width: 100vw;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
* {
box-sizing: border-box;
}
.position{
position: relative;
}
NavBar.module.css (CSS file for NavBar page)
.navbar{
width: 85%;
margin: 0 auto;
background-color: #1F1A36;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
border-radius: .5rem;
}
.navbar__container{
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1rem;
}
.left h1{
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
transition: all .4s ease-in-out;
}
.left h1:hover{
color: #9a02ac;
}
.mobile{
display: none;
}
.right {
position: relative;
}
.right button{
color: #9a02ac;
background: transparent;
padding: .5rem;
border: 1px solid #9a02ac;
border-radius: .5rem;
font-weight: 700;
cursor: pointer;
}
.connected{
position: relative;
}
.userModal{
position: absolute;
top: 4rem;
right: 0;
padding: 1rem;
border-radius: .5rem;
background-color: #1F1A36;
width: 15rem;
}
.user_box{
text-align: center;
position: relative;
}
.closeBtn{
position: absolute;
right: 0;
cursor: pointer;
color: #fff;
font-size: 1.5rem;
transition: all .2s ease-in-out;
}
.closeBtn:hover{
transform: rotate(-45deg);
}
/* ////////////////////////////////////// */
/* //PRICE */
.price{
width: 85%;
margin: 0 auto;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
overflow: hidden;
}
.price__box{
background-color: #1F1A36;
border-radius: .5rem;
display: flex;
padding-left: 1rem;
line-height: .2;
align-items: center;
gap: 2rem;
}
.etherPrice{
display: flex;
align-items: center;
gap: 2rem;
}
.price__box h4{
font-size: 1.2rem;
color: #fff;
}
.price__box p {
line-height: .5;
font-weight: 600;
font-size: 14px;
}
.supplyEther{
display: flex;
gap: 2rem;
align-items: center;
}
.supplyIcon{
font-size: 3rem;
}
.logoWidth{
width: 80%;
display: grid;
grid-template-columns: repeat(2,1fr);
border-left: 1px solid #9a02ac;
text-align: center;
padding-left: 2.5rem;
}
.logoWidth p{
line-height: 1.3;
margin-right: 1rem;
font-size: 1.1rem;
color: #fff;
background-color: #9a02ac;
padding: 1rem 0;
border-radius: .2rem;
}
/* /////////////////////////////////// */
@media screen and (max-width: 45em){
.navbar{
width: 100%;
margin-block: 0rem;
padding: 0rem;
border-radius: 0rem;
}
.navbar__container{
padding: 1rem 2rem;
}
.desktop{
display: none;
}
.mobile{
display: block;
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
}
.mobile:hover{
color: #9a02ac;
}
.price{
grid-template-columns: 1fr;
padding: 0;
width: 95%;
}
.price__box{
display: grid;
}
.etherPrice{
padding: .5rem;
}
.logoWidth{
width: 100%;
border-left: 0;
padding-left: 0;
}
.logoWidth p{
font-size: .8rem;
}
.tokenBox__logo{
text-align: center;
margin-bottom: -2.6rem;
}
.right button{
width: 100%;
}
.userModal{
right: -6rem;
}
.userModal{
right: .5rem;
}
}
Table.module.css (CSS file for Table)
.navbar{
width: 85%;
margin: 0 auto;
background-color: #1F1A36;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
border-radius: .5rem;
}
.navbar__container{
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1rem;
}
.left h1{
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
transition: all .4s ease-in-out;
}
.left h1:hover{
color: #9a02ac;
}
.mobile{
display: none;
}
.right {
position: relative;
}
.right button{
color: #9a02ac;
background: transparent;
padding: .5rem;
border: 1px solid #9a02ac;
border-radius: .5rem;
font-weight: 700;
cursor: pointer;
}
.connected{
position: relative;
}
.userModal{
position: absolute;
top: 4rem;
right: 0;
padding: 1rem;
border-radius: .5rem;
background-color: #1F1A36;
width: 15rem;
}
.user_box{
text-align: center;
position: relative;
}
.closeBtn{
position: absolute;
right: 0;
cursor: pointer;
color: #fff;
font-size: 1.5rem;
transition: all .2s ease-in-out;
}
.closeBtn:hover{
transform: rotate(-45deg);
}
/* ////////////////////////////////////// */
/* //PRICE */
.price{
width: 85%;
margin: 0 auto;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
overflow: hidden;
}
.price__box{
background-color: #1F1A36;
border-radius: .5rem;
display: flex;
padding-left: 1rem;
line-height: .2;
align-items: center;
gap: 2rem;
}
.etherPrice{
display: flex;
align-items: center;
gap: 2rem;
}
.price__box h4{
font-size: 1.2rem;
color: #fff;
}
.price__box p {
line-height: .5;
font-weight: 600;
font-size: 14px;
}
.supplyEther{
display: flex;
gap: 2rem;
align-items: center;
}
.supplyIcon{
font-size: 3rem;
}
.logoWidth{
width: 80%;
display: grid;
grid-template-columns: repeat(2,1fr);
border-left: 1px solid #9a02ac;
text-align: center;
padding-left: 2.5rem;
}
.logoWidth p{
line-height: 1.3;
margin-right: 1rem;
font-size: 1.1rem;
color: #fff;
background-color: #9a02ac;
padding: 1rem 0;
border-radius: .2rem;
}
/* /////////////////////////////////// */
@media screen and (max-width: 45em){
.navbar{
width: 100%;
margin-block: 0rem;
padding: 0rem;
border-radius: 0rem;
}
.navbar__container{
padding: 1rem 2rem;
}
.desktop{
display: none;
}
.mobile{
display: block;
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
}
.mobile:hover{
color: #9a02ac;
}
.price{
grid-template-columns: 1fr;
padding: 0;
width: 95%;
}
.price__box{
display: grid;
}
.etherPrice{
padding: .5rem;
}
.logoWidth{
width: 100%;
border-left: 0;
padding-left: 0;
}
.logoWidth p{
font-size: .8rem;
}
.tokenBox__logo{
text-align: center;
margin-bottom: -2.6rem;
}
.right button{
width: 100%;
}
.userModal{
right: -6rem;
}
.userModal{
right: .5rem;
}
}
Health Calculator
My Services
Recent Post
Read...
Build And Deploy Web 3.0 Project, ETHERESCAN Clone Best Web 3.0 Project 2022
Web 3.0 project for the beginner, Build And Deploy Web 3.0 Project, ETHERESCAN Clone Web 3.0 Project 2022. Free web3 course with the project, Build Web3 Etherescan clone
Build your first web 3 project
In this web 3.0 Etherescan project you going to learn about the modern technology in web3 like infura, Ether JS, web3model, And react and modern practices for building web 3.0 applications.
In this web 3.0 web application, we going to follow modern react file structure, context API and three different ways to call API like fetch API Etherscan Global API, and Axios
In this, Web 3.0 project we going to cover the following things.
- Creating the next JS application
- Installing all the necessary NPM Package for building this web 3 project
- Creating folder and file structure react
- Building components structure for this entire application
- Learn about Infra with web3.0 provider
- Learn about Ether JS
- Complete tutorial of Etherscan API
- And many more
All the source code for this entire project is provided down below, so if you are stuck anywhere during this web 3.0 project you can refer back to this article copy the code and compare it with yours and continue building your first ever web 3.0 web application from scratch.
Once we built the complete application we going to use Netlify for deploying our web 3.0 project.
Resources for this Web 3.0 Etherescan project are provided down below.
- All the page’s source code.
- All the CSS source code.
- All the component files.
- Context API file
- The image which we have used in this complete web 3.0 project
We believe that you love this complete project and learn from it, so if you like my afford for building this web 3.0 application project.
Then do subscribe and like and give your feedback, will try to modify and come up with more web 3.0 projects for all of you so you can start learning and building your dream project
HEALTH CALCULATOR
Build And Deploy ETHERESCAN Clone, WEB3.0 with React, Infura, Ether js, EthereScan
PACKAGE.JSON FILE
1. Package.Json
{
“name”: “etherscan”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”
},
“dependencies”: {
“axios”: “^0.27.2”,
“ethers”: “^5.6.9”,
“get-eth-price”: “^1.0.0”,
“next”: “12.2.0”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“react-icons”: “^4.4.0”,
“web3modal”: “^1.9.8”
}
}
PAGES FOLDER
App.js Source Code
import “../styles/globals.css”;
import { EtherProvider } from “../context/Ethere”;
import NavBar from “../components/NavBar”;
import Footer from “../components/Footer”;
const MyApp = ({ Component, pageProps }) => (
<EtherProvider>
<div className=”position”>
<NavBar />
<Component {…pageProps} />
<Footer />
</div>
</EtherProvider>
);
export default MyApp;
Account.js Source Code
import React, { useState, useContext } from “react”;
import axios from “axios”;
import Image from “next/image”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//IMTERNAL IMPORT///
import { Etherescan } from “../context/Ethere”;
import Style from “../styles/account.module.css”;
import etherLogo from “../eth.png”;
import loding from “../loding.gif”;
import Table from “../components/Table”;
const account = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const acc = Object.keys(query)[0];
const [account, setAccount] = useState(“”);
const [balance, setBalance] = useState(“”);
const [totalTransaction, setTotalTransaction] = useState(“”);
const [name, setName] = useState(“”);
const [open, setOpen] = useState(true);
const [loading, setLoading] = useState(true);
//ERC TOKENS CONTRACT ADDRESS
//API
const [accountHistory, setAccountHistory] = useState([]);
const [internalByAddrss, setInternalByAddrss] = useState([]);
const [ERC20, setERC20] = useState([]);
const [blockMindedByAddress, setBlockMindedByAddress] = useState([]);
const [blockRangeTransaction, setBlockRangeTransaction] = useState([]);
const [ERC21, setERC21] = useState([]);
const [ERC1155, setERC1155] = useState([]);
const accountData = async () => {
try {
setAccount(acc);
///ACCOUNT NAME///
if (open) {
setOpen(false);
}
/////
const ESN = await provider.lookupAddress(acc);
if (ESN === null) {
console.log(“No Name”);
setName(ESN);
setLoading(false);
} else {
setName(ESN);
setLoading(false);
}
/////////////////////////////
const accountBalanc = await provider.getBalance(acc);
const showBalance = ethers.utils.formatEther(accountBalanc);
setBalance(showBalance);
//ETHERSCAN API Transaction//
const API_ETHER = “WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG”;
await fetch(
`https://api.etherscan.io/api?module=account&action=txlist&address=${acc}&startblock=0&endblock=99999999&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => response.json())
.then((data) => setAccountHistory(data.result));
//ETHERSCAN API INTERNA Transaction BY HASH//
axios
.get(
`https://api.etherscan.io/api?module=account&action=txlistinternal&address=${acc}&startblock=0&endblock=99999999&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const dataInter = response.data.result;
setInternalByAddrss(dataInter);
});
//ETHERSCAN API ERC20 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=tokentx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC20 = response.data.result;
setERC20(tokenERC20);
});
//ETHERSCAN API MINDED BLOCK BY ADDRESS///
axios
.get(
` https://api.etherscan.io/api?module=account&action=getminedblocks&address=${acc}&blocktype=blocks&page=1&offset=10&apikey=${API_ETHER}`
)
.then((response) => {
const blockMindByAddress = response.data.result;
setBlockMindedByAddress(blockMindByAddress);
});
//ETHERSCAN API TRANSACTION BY BLOCK RANGE///
axios
.get(
` https://api.etherscan.io/api?module=account&action=txlistinternal&startblock=13481773&endblock=13491773&page=1&offset=10&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const transactionBlockRange = response.data.result;
setBlockRangeTransaction(transactionBlockRange);
});
//ETHERSCAN API ERC21 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=tokennfttx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC21 = response.data.result;
setERC21(tokenERC21);
});
//ETHERSCAN API ERC1155 TOKEN//
axios
.get(
` https://api.etherscan.io/api?module=account&action=token1155tx&contractaddress=0xB8c77482e45F1F44dE1745F52C74426C631bDD52&address=0x829BD824B016326A401d083B33D092293333A830&page=1&offset=100&startblock=0&endblock=27025780&sort=asc&apikey=${API_ETHER}`
)
.then((response) => {
const tokenERC1155 = response.data.result;
setERC1155(tokenERC1155);
// console.log(tokenERC1155);
});
//GET TRANSACTION COUNT
const totalTransaction = await provider.getTransactionCount(acc);
setTotalTransaction(totalTransaction);
} catch (error) {
console.log(“something worng”, error);
}
};
return (
<div className={Style.accountDIV}>
{open ? (
<div className={Style.btnContainer}>
<h1>
{open
? `Welcome
To Ether Finance`
: “Please wait we are loading your data”}
</h1>
<button className={Style.openBtn} onClick={() => accountData()}>
Click Me
</button>
</div>
) : (
<div>
{loading ? (
<div className={Style.loading}>
<Image src={loding} alt=”loading” width={100} height={100} />
</div>
) : (
“”
)}
{!loading ? (
<div className={Style.container}>
<div className={Style.box}>
<div className={Style.account}>
<Image src={etherLogo} alt=”logo” width={20} height={30} />
<p>
Address: <span>{acc}</span>
</p>
</div>
<div className={Style.owner}>
<p onClick={() => accountData()}>Owner</p>
{name || “Hello😀”}
</div>
</div>
<div className={Style.overviewBox}>
<div className={Style.overview}>
<div className={Style.overviewTitle}>
<p>Overview</p>
<p className={Style.miner}>
{name || “Miner”}: {account.slice(0, 10)}…
</p>
</div>
<div className={Style.accountBalance}>
<p className={Style.color}>Balance</p>
<p>{balance} ETH</p>
</div>
<div className={Style.accountValue}>
<p className={Style.color}>Value</p>
<p>$ {balance * 1057.28}</p>
</div>
</div>
<div className={Style.branding}>
<h2>
Welcome <br />
Ether Finance Tracter
</h2>
<p>
Hey, welcome to ether finance tracker, find out your
ethereum
{name || account.slice(0, 10)} financial status
</p>
</div>
</div>
</div>
) : (
“”
)}
{!loading ? (
<Table
accountHistory={accountHistory}
totalTransaction={totalTransaction}
internalByAddrss={internalByAddrss}
ERC20={ERC20}
blockMindedByAddress={blockMindedByAddress}
blockRangeTransaction={blockRangeTransaction}
ERC21={ERC21}
ERC1155={ERC1155}
accountData={accountData}
/>
) : (
“”
)}
</div>
)}
</div>
);
};
export default account;
Block.js Source Code
import React, { useEffect, useState, useContext } from “react”;
import Link from “next/link”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//Internal Block
import StyleTransaction from “../styles/block.module.css”;
import { Etherescan } from “../context/Ethere”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Style from “../components/Table.module.css”;
const block = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const blockNumber = Number(Object.keys(query)[0]);
//OPEN
const [open, setOpen] = useState(false);
//BLOCK DATa
const dataBlock = [];
const [blockData, setblockData] = useState([]);
const [transaction, seTtransaction] = useState([]);
//FORMATE VALUE
const [ethGasLimit, setEthGasLimit] = useState(“”);
const [ethDifficulty, setDifficulty] = useState(“”);
const [ethGasUsed, setEthGasUsed] = useState(“”);
//ACTIVE STATE
const [blockNo, setBlockNo] = useState(true);
const [transactioTab, setTransactioTab] = useState(false);
const openTab = () => {
if (blockNo) {
setBlockNo(false);
setTransactioTab(true);
} else if (transactioTab) {
setBlockNo(true);
}
};
const getBlockDetails = async () => {
try {
const getBlock = await provider.getBlock(blockNumber);
dataBlock.push(getBlock);
setblockData(getBlock);
const gasLimit = ethers.utils.formatEther(getBlock.gasLimit);
setEthGasLimit(gasLimit);
const gasUsed = ethers.utils.formatEther(getBlock.gasUsed);
setEthGasUsed(gasUsed);
const difficulty = ethers.utils.formatEther(getBlock._difficulty);
setDifficulty(difficulty);
//TRANSACTION
seTtransaction(getBlock.transactions);
// console.log(getBlock.transactions);
} catch (error) {
console.log(error);
}
};
// const openDateModal = () => {
// if (open) {
// setOpen(false);
// getBlockDetails();
// }
// };/
useEffect(() => {
getBlockDetails();
}, []);
return (
<div className={StyleTransaction.block}>
<div className={StyleTransaction.box}>
<div className={StyleTransaction.box__header}>
<h3>Block Number</h3>
<p>{blockNumber}</p>
</div>
<div className={StyleTransaction.blockTable}>
<div className={StyleTransaction.blockBtn}>
<button onClick={() => openTab()}>Block Details</button>
<button onClick={() => openTab()}>Block Transaction</button>
</div>
{blockNo ? (
<div>
<div className={StyleTransaction.dataRow}>
<p>Number</p>
<p>{blockData.number}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>TimeStamp</p>
<p>{blockData.timestamp}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Miner</p>
<Link href={{ pathname: “/account/”, query: blockData.miner }}>
<p className={StyleTransaction.color}>{blockData.miner}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Hash</p>
{/* ///////////////////// */}
<p>{blockData.hash}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>parentHash</p>
<p>
{blockData.parntHash
? blockData.parntHash
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Nonce</p>
<p>{blockData.nonce}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Extra Data</p>
<p>{blockData.extraData}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Difficulty</p>
<p>
{blockData.difficulty
? blockData.difficulty
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Limit</p>
<p>{ethGasLimit} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Used</p>
<p>{ethGasUsed} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Difficulty</p>
<p>{ethDifficulty} ETH</p>
</div>
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>All Transaction In The Block {transaction.length}</p>
</div>
<div className={Style.tableInfo}>
{transaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<samp>{i + 1}</samp>
<Link
href={{
pathname: “/transaction/”,
query: blockData.hash,
}}
>
<p className={StyleTransaction.color}>{el}</p>
</Link>
</div>
))}
</div>
</div>
</div>
)}
</div>
</div>
</div>
);
};
export default block;
Transaction.js Source Code
import React, { useEffect, useState, useContext } from “react”;
import Link from “next/link”;
import { useRouter } from “next/router”;
import { ethers } from “ethers”;
//Imternal
import StyleTransaction from “../styles/block.module.css”;
import { Etherescan } from “../context/Ethere”;
const transaction = () => {
const { provider } = useContext(Etherescan);
const router = useRouter();
const { query } = router;
const hash = Object.keys(query)[0];
const transDetail = [];
const [transactionData, setTransactionData] = useState(transDetail);
//CONVERTED STATE/
const [gasPrice, setGasPrice] = useState(“”);
const [gasLimit, setGasLimit] = useState(“”);
const [value, setValue] = useState(“”);
const getDataOfTransaction = async () => {
try {
const transactionDetails = await provider.getTransaction(hash);
setTransactionData(transactionDetails);
console.log(transactionDetails);
transDetail.push(transactionData);
//CONVERTING TO ETHER
const gasLimitePrice = ethers.utils.formatUnits(
transactionDetails.gasLimit
);
setGasLimit(gasLimitePrice);
const gasPriceCon = ethers.utils.formatUnits(transactionDetails.gasPrice);
setGasPrice(gasPriceCon);
const etherValue = ethers.utils.formatUnits(transactionDetails.value);
setValue(etherValue);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getDataOfTransaction();
});
return (
<div className={StyleTransaction.block}>
<div className={StyleTransaction.box}>
<div className={StyleTransaction.box__header}>
<h3>Transaction Hash</h3>
<p>{hash}</p>
</div>
<div className={StyleTransaction.blockTable}>
<div>
<div className={StyleTransaction.dataRow}>
<p>Number</p>
<Link
href={{
pathname: “/block/”,
query: transactionData.blockNumber,
}}
>
<p className={StyleTransaction.color}>
{transactionData.blockNumber}
</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Block Hash</p>
<p>{transactionData.blockHash}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>From</p>
<Link
href={{ pathname: “/account/”, query: transactionData.from }}
>
<p className={StyleTransaction.color}>{transactionData.from}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>To</p>
<Link
href={{ pathname: “/account/”, query: transactionData.from }}
>
<p className={StyleTransaction.color}>{transactionData.to}</p>
</Link>
</div>
<div className={StyleTransaction.dataRow}>
<p>Hash</p>
<p>
{transactionData.hash
? transactionData.hash
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Nonce</p>
<p>{transactionData.nonce}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Transaction Index</p>
<p>
{transactionData.transactionIndex
? transactionData.transactionIndex
: “No Data Avaliable”}
</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>R</p>
<p>{transactionData.r}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>S</p>
<p>{transactionData.s}</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Limit</p>
<p>{gasLimit} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Gas Price</p>
<p> {gasPrice} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Type</p>
<p>{transactionData.type} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>V</p>
<p>{transactionData.v} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Value</p>
<p>{value} ETH</p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Chain Id</p>
<p>{transactionData.chainId} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Confirmations</p>
<p>{transactionData.confirmations} </p>
</div>
<div className={StyleTransaction.dataRow}>
<p>Transaction Index</p>
<p>
{transactionData.creates
? transactionData.creates
: “No Data Avaliable”}
</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default transaction;
CONTEXT FOLDER
Ethere.js Source Code
import React, { useState, useEffect } from “react”;
import { ethers } from “ethers”;
const apiKey = “dc23ef4a274446728c89f941fe1a7636”;
const provider = new ethers.providers.JsonRpcProvider(
`https://mainnet.infura.io/v3/${apiKey}`
);
export const Etherescan = React.createContext();
export const EtherProvider = ({ children }) => {
const tenBlockWithDetails = [];
const [yourBlockTrans, setYourBlockTrans] = useState(tenBlockWithDetails);
const [currentBlock, setCurrentBlock] = useState([]);
const [topTenBlock, setTopTenBlock] = useState([]);
const [transaction, setTransaction] = useState([]);
const [gasPrice, setGasPrice] = useState(“”);
const etherData = “Hey checking connection”;
const accountDetails = async () => {
try {
const getCurrentBlock = await provider.getBlockNumber();
setCurrentBlock(getCurrentBlock);
//SINGLE BLOCAK TRANSACTION
const blockTransaction = await provider.getBlock(getCurrentBlock);
setTransaction(blockTransaction.transactions);
//TOP TEN BLOCK//
const previousBlock = getCurrentBlock – 10;
const listTenBlock = [];
for (let i = getCurrentBlock; i > previousBlock; i–) {
listTenBlock.push([i]);
}
//GET BLOCK DETAILS
const getBlockDetails = listTenBlock.flat();
setTopTenBlock(getBlockDetails);
getBlockDetails.map(async (el) => {
const singleBlockData = await provider.getBlock(el);
tenBlockWithDetails.push(singleBlockData);
});
//ETHER PRICE//
const gasPrice = await provider.getGasPrice();
const latestGasPrice = ethers.utils.formatUnits(gasPrice);
setGasPrice(latestGasPrice);
} catch (error) {
console.log(“Something wrong”);
}
};
useEffect(() => {
accountDetails();
}, []);
return (
<Etherescan.Provider
value={{
etherData,
currentBlock,
topTenBlock,
yourBlockTrans,
transaction,
gasPrice,
provider,
}}
>
{children}
</Etherescan.Provider>
);
};
COMPONENTS FOLDER
BlockRange.jsx (BlockRange )
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const BlockRange = ({ blockRangeTransaction, handleClick }) => {
return (
<div>
{blockRangeTransaction.length === 0 ? (
<div className={Style.sorry}>
<Image src={sorry} alt=”No data” />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.from.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.to.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input ? el.input : “No Data”}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Type</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.type}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TraceId</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.traceId}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>IsError</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.isError}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{blockRangeTransaction.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress ? el.contractAddress : “No Data”}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default BlockRange;
ERC20.jsx ( ERC20)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC20Token = ({ ERC20 }) => {
return (
<div>
{ERC20.length === 0 ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC20 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC20.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC20Token;
ERC21.jsx (ERC21)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC21Token = ({ ERC21 }) => {
return (
<div>
{ERC21.length === 0 || ERC21 === “Max rate limit reached” ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC21 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC21.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC21Token;
ERC1155.jsx (ERC1155)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const ERC1155Token = ({ ERC1155 }) => {
return (
<div>
{ERC1155.length === 0 || ERC1155 === “Max rate limit reached” ? (
<div className={Style.sorry}>
<h2>There is no transaction of ERC1155 Token</h2>
<Image src={sorry} alt=”No data” width={200} height={200} />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Name</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenName}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TokenSymbol</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenSymbol}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Token Decimal</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.tokenDecimal}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Trans Index</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Cumulative Gas</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Input</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.input}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Contact Address</p>
</div>
<div className={Style.tableInfo}>
{ERC1155.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.contractAddress}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default ERC1155Token;
Footer.jsx ( footer)
import React from “react”;
import Image from “next/image”;
import { RiSendPlaneFill } from “react-icons/ri”;
import {
TiSocialTwitter,
TiSocialYoutube,
TiSocialLinkedin,
TiSocialFacebook,
TiSocialInstagram,
} from “react-icons/ti”;
//INTERNAL IMPORT
import Style from “../styles/footer.module.css”;
import footerLogo from “../footerLogo.png”;
const Footer = () => {
return (
<div className={Style.footer}>
<div className={Style.footer__box}>
<Image src={footerLogo} alt=”logo” width={100} height={100} />
</div>
<div className={Style.footer__box}>
<div className={Style.footer__input}>
<input type=”email” placeholder=”Email*” />
<RiSendPlaneFill />
</div>
</div>
<div className={Style.footer__box}>
<div className={Style.social}>
<TiSocialTwitter />
<TiSocialLinkedin />
<TiSocialFacebook />
<TiSocialInstagram />
<TiSocialInstagram />
<TiSocialYoutube />
</div>
</div>
</div>
);
};
export default Footer;
Internal.jsx ( internal)
import React from “react”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
//
const Internal = ({ internalByAddrss, handleClick }) => {
return (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Hash</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block No</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TraceId</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.traceId}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.from }}>
<a onClick={handleClick}>{el.from.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.to.slice(0, 10)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 10)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Used</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>isError</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.isError}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{internalByAddrss.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
</div>
);
};
export default Internal;
MindedBlock.jsx ( MindedBlock)
import React from “react”;
import Image from “next/image”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import sorry from “../sorry.gif”;
const MindedBlock = ({ blockMindedByAddress }) => {
return (
<div>
{blockMindedByAddress.length === 0 ? (
<div className={Style.sorry}>
<Image src={sorry} alt=”No data” />
</div>
) : (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block Number</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block Reward</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.blockReward.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{blockMindedByAddress.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
</div>
)}
</div>
);
};
export default MindedBlock;
NavBar.jsx ( NavBar)
import React, { useState, useEffect, useContext } from “react”;
import Image from “next/image”;
import { MdOutlineClose } from “react-icons/md”;
import { TbChartArrowsVertical } from “react-icons/tb”;
import axios from “axios”;
import Link from “next/link”;
//INYERNAL Import
import { Etherescan } from “../context/Ethere”;
import Style from “../styles/NavBar.module.css”;
import { ethers } from “ethers”;
import user from “../avatar.png”;
import etherLogo from “../eth.png”;
import logo from “../logo.png”;
import logoTop from “../footerLogo.png”;
const NavBar = () => {
const { provider } = useContext(Etherescan);
const [userAccount, setUserAccount] = useState(“”);
const [balance, setBalance] = useState();
const [count, setCount] = useState();
const [openModel, setOpenModel] = useState(true);
const [price, setPrice] = useState([]);
const [etherSupply, setEtherSupply] = useState([]);
const [updatedPriceDate, setUpdatedPriceDate] = useState(“”);
const openUserInfo = () => {
if (openModel) {
setOpenModel(false);
console.log(openModel);
} else if (!openModel) {
setOpenModel(true);
}
};
////GET ETHER PRICE UPDATE
const getEtherPrice = async () => {
try {
const API_ETHER = “WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG”;
axios
.get(
` https://api.etherscan.io/api?module=stats&action=ethprice&apikey=${API_ETHER}`
)
.then((response) => {
setPrice(response.data.result);
// console.log(response.data.result);
const timestamp = Number(response.data.result.ethusd_timestamp);
console.log(timestamp);
const date = new Date(timestamp);
setUpdatedPriceDate(
“UpDate: ” +
date.getHours() +
“:” +
date.getMinutes() +
“:” +
date.getSeconds()
);
});
axios
.get(
`https://api.etherscan.io/api?module=stats&action=ethsupply&apikey=WCEZKZEQUBKEFBU32GJYYV7F9YM8G3HJEG`
)
.then((response) => {
setEtherSupply(response.data.result);
console.log(response);
});
} catch (error) {
console.log(error);
}
};
const checkAccountExist = async () => {
if (!window.ethereum) return console.log(“Install MataMask”);
const accounts = await window.ethereum.request({ method: “eth_accounts” });
if (accounts.length) {
setUserAccount(accounts[0]);
//GET AACCOUNT DETAILS
const getBlance = await provider.getBalance(accounts[0]);
const transactionCount = await provider.getTransactionCount(accounts[0]);
setCount(transactionCount);
const showBalance = ethers.utils.formatUnits(getBlance);
setBalance(showBalance);
} else {
console.log(“Sorry you do not have account”);
}
};
useEffect(() => {
getEtherPrice();
}, []);
useEffect(() => {
checkAccountExist();
});
// //console.log(price);
const connectWallet = async () => {
if (!window.ethereum) return console.log(“Install MataMask”);
const accounts = await window.ethereum.request({
method: “eth_requestAccounts”,
});
if (accounts.length) {
setUserAccount(accounts[0]);
} else {
console.log(“Sorry you do not have account”);
}
window.location.reload();
};
return (
<div>
<div className={Style.navbar}>
<div className={Style.navbar__container}>
<div className={Style.left}>
<Link href=”/”>
<div>
<h1 className={Style.desktop}>Ether Finance</h1>
<h1 className={Style.mobile}>
<Image src={logoTop} alt=”logo” width={50} height={50} />
</h1>
</div>
</Link>
</div>
<div className={Style.right}>
{userAccount.length ? (
<div className={Style.connected}>
<button onClick={() => openUserInfo()}>
Acc: {userAccount.slice(0, 10)}..
</button>
{openModel ? (
<div className={Style.userModal}>
<div className={Style.user_box}>
<div className={Style.closeBtn}>
<MdOutlineClose onClick={() => openUserInfo()} />
</div>
<Image
src={user}
alt=”user account”
width={50}
height={50}
/>
<p>Acc: {userAccount.slice(0, 20)}..</p>
<p>Balance: {balance} ETH</p>
<p>Total Trans: {count} </p>
</div>
</div>
) : (
“”
)}
</div>
) : (
<button onClick={() => connectWallet()}>Connect Wallet</button>
)}
</div>
</div>
</div>
<div className={Style.price}>
<div className={Style.price__box}>
<div className={Style.etherPrice}>
<div>
<Image src={etherLogo} alt=”Ether price” width={30} height={50} />
</div>
<div>
<h4>ETHER PRICE</h4>
<p>$ {price.ethusd}</p>
<p>{price.ethusd} BTC ₿</p>
<p>{updatedPriceDate} </p>
</div>
</div>
<div className={Style.supplyEther}>
<div>
<TbChartArrowsVertical className={Style.supplyIcon} />
</div>
<div>
<h4>TOTAL ETHER SUPPLY</h4>
<p>{etherSupply}</p>
<p>Updated Supply data</p>
<p> </p>
</div>
</div>
</div>
<div className={Style.price__box}>
<div className={Style.tokenBox__logo}>
<Image src={logo} alt=”logo” width={200} height={200} />
</div>
<div className={Style.logoWidth}>
<p>ERC20 TOKEN</p>
<p>ERC21 TOKEN</p>
<p>ERC1155 TOKEN</p>
<p>CONTRACT</p>
</div>
</div>
</div>
</div>
);
};
export default NavBar;
Table.jsx ( Table)
import React, { useState, useEffect } from “react”;
import { FaFilter } from “react-icons/fa”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
import Transaction from “./Transaction”;
import Internal from “./Internal”;
import ERC20Token from “./ERC20Token”;
import MindedBlock from “./MindedBlock”;
import BlockRange from “./BlockRange”;
import ERC21Token from “./ERC21Token”;
import ERC1155Token from “./ERC1155Token”;
const Table = ({
accountHistory,
totalTransaction,
internalByAddrss,
ERC20,
blockMindedByAddress,
blockRangeTransaction,
ERC21,
ERC1155,
accountData,
}) => {
const [historyAccount, setHistoryAccount] = useState(true);
const [addressInternalTransaction, setAddressInternalTransaction] =
useState(false);
const [openERC20, setOpenERC20] = useState(false);
const [addressByMinedeBlock, setAddressByMinedeBlock] = useState(false);
const [TransactionRangeBlock, setTransactionRangeBlock] = useState(false);
const [openERC21, setOpenERC21] = useState(false);
const [openERC1155, setOpenERC1155] = useState(false);
const tabs = (e) => {
const buttonText = e.target.innerText;
console.log(buttonText);
if (buttonText === “Transaction”) {
setHistoryAccount(true);
setAddressInternalTransaction(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Internal”) {
setAddressInternalTransaction(true);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Trans”) {
setTransactionRangeBlock(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC-20”) {
setOpenERC20(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC21(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC-21”) {
setOpenERC21(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC1155(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “ERC1155”) {
setOpenERC1155(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setAddressByMinedeBlock(false);
} else if (buttonText === “Mined”) {
setAddressByMinedeBlock(true);
setAddressInternalTransaction(false);
setHistoryAccount(false);
setTransactionRangeBlock(false);
setOpenERC20(false);
setOpenERC21(false);
setOpenERC1155(false);
}
};
///////shhshs
return (
<div className={Style.table}>
<div className={Style.table__head}>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Transaction
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Internal
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Trans
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
Mined
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC-20
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC-21
</button>
<button className={Style.btn} onClick={(e) => tabs(e)}>
ERC1155
</button>
</div>
<div className={Style.numberOfTrans}>
<FaFilter />
<p>
latest 10 from a total of <span>{totalTransaction}</span> transaction
</p>
</div>
{historyAccount ? (
<Transaction
handleClick={accountData}
accountHistory={accountHistory}
/>
) : (
“”
)}
{addressInternalTransaction ? (
<Internal
internalByAddrss={internalByAddrss}
handleClick={accountData}
/>
) : (
“”
)}
{openERC20 ? <ERC20Token ERC20={ERC20} /> : “”}
{addressByMinedeBlock ? (
<MindedBlock
blockMindedByAddress={blockMindedByAddress}
handleClick={accountData}
/>
) : (
“”
)}
{TransactionRangeBlock ? (
<BlockRange
blockRangeTransaction={blockRangeTransaction}
handleClick={accountData}
/>
) : (
“”
)}
{openERC21 ? <ERC21Token ERC21={ERC21} handleClick={accountData} /> : “”}
{openERC1155 ? (
<ERC1155Token ERC1155={ERC1155} handleClick={accountData} />
) : (
“”
)}
</div>
);
};
export default Table;
Transaction.jsx ( Table)
import React from “react”;
import { AiFillEye } from “react-icons/ai”;
import Link from “next/link”;
import Style from “./Table.module.css”;
const Transaction = ({ accountHistory, handleClick }) => {
return (
<div className={Style.dataTable}>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Txn Hash</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<AiFillEye />
<p>{el.hash.slice(0, 35)}…</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Method</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>Transfer</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Block</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/block/”, query: el.blockNumber }}>
<a onClick={handleClick}>{el.blockNumber}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>TimeStamp</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.timeStamp}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>From</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.from.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>To</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p className={Style.toLink}>
<Link href={{ pathname: “/account/”, query: el.to }}>
<a onClick={handleClick}>{el.to.slice(0, 10)}</a>
</Link>
</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Value</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.value.slice(0, 5)}.. ETH</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas Price</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasPrice}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>BlockHash</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.blockHash.slice(0, 10)}..</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Confirmations</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.confirmations}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>CumulativeGas</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.cumulativeGasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Gas</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gas}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>GasUsed</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.gasUsed}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Nonce</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.nonce}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p>Index</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.transactionIndex}</p>
</div>
))}
</div>
</div>
<div className={Style.coloum}>
<div className={Style.tableTitle}>
<p> Status</p>
</div>
<div className={Style.tableInfo}>
{accountHistory.map((el, i) => (
<div key={i + 1} className={Style.transHash}>
<p>{el.txreceipt_status}</p>
</div>
))}
</div>
</div>
</div>
);
};
export default Transaction;
CSS FILES
index.module.css (CSS file for index page)
.header{
width: 65%;
margin: 0 auto;
margin-top: 2rem;
margin-bottom: 1rem;
color: #fff;
display: grid;
gap: 1rem;
}
.header__box{
background-color: #1F1A36;
padding: 1rem;
border-radius: .4rem;
}
.header__box{
text-align: center;
font-weight: 700;
}
/* ///////////////////////////////////// */
.container{
width: 65%;
margin: 0 auto;
margin-top: 1rem;
margin-bottom: 2rem;
color: #fff;
line-height: 1.2;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.container__box{
background-color: #1F1A36;
padding: .5rem 1rem;
font-size: 12px;
border-radius: .4rem;
}
.container__box a{
color: #9a02ac;
font-weight: 700;
}
.container__box h3{
color: #fff;
border-bottom: 1px solid #9a02ac;
padding: .5rem;
}
.container__block{
height: 80vh;
overflow: scroll;
}
.container__block::-webkit-scrollbar{
display: none;
}
.oneBlock{
display: flex;
gap: 2rem;
}
.bk{
background-color: #9a02ac;
width: 1.5rem;
color: #fff;
font-weight: bolder;
padding: .2rem;
border-radius: .2rem;
}
.reward{
display: flex;
align-items: center;
gap: 1rem;
position: relative;
justify-content: space-between;
}
.reward span{
color: #9a02ac;
font-weight: bolder;
}
.miner{
line-height: 1;
}
.link a{
margin-left: .9rem;
}
/* ////////////////////////////////////////////// */
.accountAddress{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.accountAddress input{
background-color: transparent;
border: 0;
outline: none;
padding: .5rem;
color: #fff;
width: 100%;
}
/* ////////////////////////// */
@media screen and (max-width: 45em){
.header{
width: 95%;
}
.container{
grid-template-columns: 1fr;
width: 95%;
overflow: hidden;
}
}
account.module.css (CSS file for Account page)
.accountDIV{
width: 95%;
margin: 0 auto;
position: relative;
}
.container{
width: 70%;
margin: 0 auto;
position: relative;
}
.box{
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
margin-block: 2rem;
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem;
overflow: hidden;
}
.account{
display: flex;
gap: 1rem;
align-items: center;
}
.box span{
margin-left: 1rem;
font-weight: 600;
color: #9a02ac;
}
.owner{
display: flex;
align-items: center;
gap: 2rem;
margin-right: .8rem;
}
.owner p{
padding: .5rem 1rem;
background-color: #9a02ac;
align-items: center;
border-radius: .5rem;
font-weight: 700;
display: flex;
}
/* /////////////////////////////////// */
.overviewBox{
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
line-height: 1;
font-size: 14px;
}
.overview{
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem;
}
.overviewTitle{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #9a02ac;
}
.miner{
border: 1px solid #9a02ac;
padding: .5rem;
border-radius: .5rem;
}
.accountBalance{
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 2rem;
}
.accountValue{
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 2rem;
}
/* */
.color{
background-color: #9a02ac;
padding: .5rem;
border-radius: .5rem;
}
.branding{
background-color: #1F1A36;
color: #fff;
padding: .5rem;
border-radius: .5rem; text-align: center;
line-height: 1.3;
}
.btnContainer{
margin-bottom: 4rem;
position:relative;
text-align: center;
margin-top: 4rem;
}
.btnContainer h1{
font-size: 4rem;
line-height: 1;
color: #fff;
/* ////////////////////// */
}
.openBtn{
background-color: #1F1A36;
border: none;
padding: 1rem 2rem;
border-radius: .2rem;
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
color: #fff;
}
.loading{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* /////////////////////////////////////// */
.tokenBtn{
position: absolute;
top: 7.5rem;
left: -9rem;
display: grid;
gap: 1rem;
place-content: start;
}
.tokenBtn button{
background-color: #1F1A36;
cursor: pointer;
color: #fff;
padding: .5rem 1rem;
border: 0;
border-radius: .3rem;
}
.overlay{
top: -2rem;
left: -13rem;
position: fixed;
background-color: #9a02ac;
height: 120vh;
width: 120vw;
overflow: hidden;
}
.inputModelCloseBtn{
position: absolute;
top: 20%;
left: 0%;
transform: translate(-50%, -50%);
z-index: 222;
background-color: #1F1A36;
border: none;
padding: .5rem 1rem;
color: #fff;
font-size: 16px;
border-radius: .3rem;
cursor: pointer;
}
.inputAddrss{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.formInput{
background-color: #1F1A36;
padding: .5rem;
color: #fff;
border-radius: .5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.formInput input{
background-color: transparent;
border: 0;
outline: none;
padding: .5rem;
color: #fff;
width: 15rem;
}
.formInput button{
background-color: transparent;
color: #fff;
border: 0;
cursor: pointer;
}
@media screen and (max-width: 35em){
.accountDIV{
width: 100%;
}
.container{
width: 95%;
}
.btnContainer h1{
font-size: 2.5rem;
}
.box{
display: grid;
overflow: hidden;
}
.box span{
margin-left: 0rem;
}
.account{
flex-direction: column;
padding-top: 1rem;
gap: 0;
}
.account p{
margin-top: 1rem;
text-align: center;
}
.owner{
padding-inline: 2rem;
}
.overviewBox{
grid-template-columns: 1fr;
}
}
block.module.css (CSS file for Block page)
.block{
width: 80%;
margin: 0 auto;
margin-block: 2rem ;
}
.box__header{
display: flex;
align-items: center;
justify-content: space-between;
}
.box__header h3{
color: #fff;
background-color: #1F1A36;
padding: 1rem;
border-radius: .5rem;
}
.box__header p{
background-color: #1F1A36;
color: #fff;
padding: 1rem;
border-radius: .5rem;
font-weight: 700;
}
.blockBtn{
background-color: #1F1A36;
display: flex;
gap: 1.5rem;
justify-content: start;
margin-left: -.5rem;
border-bottom: 1px solid #9a02ac;
padding-bottom: .5rem;
}
.blockBtn button{
background: transparent;
border: 0;
color: #fff;
font-size: 1rem;
font-weight: 800;
cursor: pointer;
}
.blockTable{
background-color: #1F1A36;
margin-block: 2rem;
color: #fff;
padding: 1rem 2rem;
border-radius: .5rem;
}
.dataRow{
display: grid;
grid-template-columns: 1fr 5fr;
align-items: center;
font-size: 12px;
overflow: hidden;
}
.color{
color: #9a02ac;
cursor: pointer;
}
@media screen and (max-width: 35em){
.block{
width: 95%;
}
.box__header p {
display: none;
}
.dataRow{
grid-template-columns: 2fr 4fr;
}
}
Footer.module.css (CSS file for Footer page)
.footer{
width: 85%;
margin: 0 auto;
padding: 1rem;
background-color: #1F1A36;
margin-bottom: 3rem;
border-radius: .5rem;
display: grid;
grid-template-columns: 12rem repeat(2, 1fr);
align-items: center;
gap: 2rem;
margin-top: 3rem;
}
.footer__box{
/* /////////////////// */
}
.footer__input{
background-color: #9a02ac;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
border-radius: 2rem;
cursor: pointer;
}
.footer__input input{
background: transparent;
outline: none;
border: 0;
width: 90%;
color: #fff;
}
.footer__input input::-webkit-input-placeholder { /* Edge */
color: #1F1A36;
font-weight: 600;
}
.social{
color: #fff;
display: grid;
margin-left: 6rem;
align-items: center;
font-size: 2rem;
grid-template-columns: repeat(6, 1fr);
cursor: pointer;
}
/* /////////////////////////////////////// */
@media screen and (max-width: 45em){
.footer{
grid-template-columns: 1fr;
text-align: center;
gap: 1.5rem;
width: 95%;
}
.social{
margin-left: 0rem;
font-size: 1.5rem;
padding-inline: 2rem;
}
}
global.module.css (CSS file for Global page)
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background-image: linear-gradient(to right top, #2d0036, #4f015b, #730283, #9a02ac, #C400D7);
height: 100vh;
width: 100vw;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
* {
box-sizing: border-box;
}
.position{
position: relative;
}
NavBar.module.css (CSS file for NavBar page)
.navbar{
width: 85%;
margin: 0 auto;
background-color: #1F1A36;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
border-radius: .5rem;
}
.navbar__container{
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 1rem;
}
.left h1{
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
transition: all .4s ease-in-out;
}
.left h1:hover{
color: #9a02ac;
}
.mobile{
display: none;
}
.right {
position: relative;
}
.right button{
color: #9a02ac;
background: transparent;
padding: .5rem;
border: 1px solid #9a02ac;
border-radius: .5rem;
font-weight: 700;
cursor: pointer;
}
.connected{
position: relative;
}
.userModal{
position: absolute;
top: 4rem;
right: 0;
padding: 1rem;
border-radius: .5rem;
background-color: #1F1A36;
width: 15rem;
}
.user_box{
text-align: center;
position: relative;
}
.closeBtn{
position: absolute;
right: 0;
cursor: pointer;
color: #fff;
font-size: 1.5rem;
transition: all .2s ease-in-out;
}
.closeBtn:hover{
transform: rotate(-45deg);
}
/* ////////////////////////////////////// */
/* //PRICE */
.price{
width: 85%;
margin: 0 auto;
color: #9a02ac;
margin-block: 1rem;
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
overflow: hidden;
}
.price__box{
background-color: #1F1A36;
border-radius: .5rem;
display: flex;
padding-left: 1rem;
line-height: .2;
align-items: center;
gap: 2rem;
}
.etherPrice{
display: flex;
align-items: center;
gap: 2rem;
}
.price__box h4{
font-size: 1.2rem;
color: #fff;
}
.price__box p {
line-height: .5;
font-weight: 600;
font-size: 14px;
}
.supplyEther{
display: flex;
gap: 2rem;
align-items: center;
}
.supplyIcon{
font-size: 3rem;
}
.logoWidth{
width: 80%;
display: grid;
grid-template-columns: repeat(2,1fr);
border-left: 1px solid #9a02ac;
text-align: center;
padding-left: 2.5rem;
}
.logoWidth p{
line-height: 1.3;
margin-right: 1rem;
font-size: 1.1rem;
color: #fff;
background-color: #9a02ac;
padding: 1rem 0;
border-radius: .2rem;
}
/* /////////////////////////////////// */
@media screen and (max-width: 45em){
.navbar{
width: 100%;
margin-block: 0rem;
padding: 0rem;
border-radius: 0rem;
}
.navbar__container{
padding: 1rem 2rem;
}
.desktop{
display: none;
}
.mobile{
display: block;
line-height: 0%;
color: #fff;
transform: skewX(-25deg);
text-transform: uppercase;
background-color: #9a02ac;
position: relative;
cursor: pointer;
}
.mobile:hover{
color: #9a02ac;
}
.price{
grid-template-columns: 1fr;
padding: 0;
width: 95%;
}
.price__box{
display: grid;
}
.etherPrice{
padding: .5rem;
}
.logoWidth{
width: 100%;
border-left: 0;
padding-left: 0;
}
.logoWidth p{
font-size: .8rem;
}
.tokenBox__logo{
text-align: center;
margin-bottom: -2.6rem;
}
.right button{
width: 100%;
}
.userModal{
right: -6rem;
}
.userModal{
right: .5rem;
}
}
Table.module.css (CSS file for Table)
.table{
background-color: #1F1A36;
color: #fff;
padding: .5rem 2rem;
border-radius: .5rem;
margin-block: 1rem;
font-size: 12px;
z-index: 2000;
}
.table__head{
display: flex;
gap: 1rem;
align-items: center;
border-bottom: 1px solid #9a02ac;
padding-bottom: .5rem;
}
.btn{
background: transparent;
border: 0;
color: #9a02ac;
font-weight: 700;
cursor: pointer;
transition: all .2s ease;
}
.btn:hover{
color: #fff;
}
.numberOfTrans{
display: flex;
align-items: center;
gap: .5rem;
}
.dataTable{
display: grid;
grid-template-columns: 15rem repeat(16, 5rem);
align-items: center;
gap: 1rem;
font-size: 10px;
overflow-x: auto;
}
.dataTable::-webkit-scrollbar {
width: 1em;
}
.dataTable::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px #9a02ac;
border-radius: 1rem;
cursor: pointer;
}
.dataTable::-webkit-scrollbar-thumb {
background-color: #9a02ac;
outline: 1px solid slategrey;
border-radius: 1rem;
}
.tableTitle p{
font-size: 12px;
font-weight: 700;
color: #9a02ac;
}
.transHash{
display: flex;
align-items: center;
gap: .5rem;
}
.toLink{
cursor: pointer;
color: #9a02ac;
}
.primary{
color: #9a02ac;
cursor: pointer;
}
/* ERC20/////////////////////////// */
.sorry{
text-align: center;
}
@media screen and (max-width: 35em){
.table__head{
display: grid;
grid-template-columns: repeat(3 , 1fr);
justify-content: start;
align-items: center;
}
.dataTable{
overflow-x: auto;
}
}
Recent Post
Read...
Read...
HTML, CSS & JAVASCRIPT
JavaScript is the world’s most popular programming language. JavaScript is the programming language of the Web
Develop Your Understanding While building HTML, CSS & JavaScript Projects. Find All The Project Source Code.
