From 121c076c1d1dfb2def8b48af1c4b417142ac34f3 Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Tue, 23 Jan 2024 15:09:46 +0200
Subject: [PATCH 01/14] updating new navbar

---
 example.env                                   |   2 -
 src/app/(header-footer-layout)/layout.tsx     |   4 +-
 src/layout/header/header.component.tsx        |  64 +--
 src/layout/header/header.scss                 |   2 +-
 .../header/searchbar-header.component.tsx     | 390 ++++++++++++++++++
 tailwind.config.ts                            |   6 +-
 6 files changed, 404 insertions(+), 64 deletions(-)
 delete mode 100644 example.env
 create mode 100644 src/layout/header/searchbar-header.component.tsx

diff --git a/example.env b/example.env
deleted file mode 100644
index 3877f86..0000000
--- a/example.env
+++ /dev/null
@@ -1,2 +0,0 @@
-NEXT_PUBLIC_FONTAWESOME_KEY=
-NEXT_PUBLIC_API_URL=
\ No newline at end of file
diff --git a/src/app/(header-footer-layout)/layout.tsx b/src/app/(header-footer-layout)/layout.tsx
index 92e37d3..a751de0 100644
--- a/src/app/(header-footer-layout)/layout.tsx
+++ b/src/app/(header-footer-layout)/layout.tsx
@@ -1,11 +1,11 @@
-import HeaderComponent from 'src/layout/header/header.component';
 import FooterComponent from 'src/layout/footer/footer.component';
+import SearchBarHeaderComponent from 'src/layout/header/searchbar-header.component';
 
 export default function HeaderFooterLayout({ children }: { children: React.ReactNode }) {
 	return (
 		<>
 			{/* *~~*~~*~~ LAYOUT ~~*~~*~~* */}
-			<HeaderComponent />
+			<SearchBarHeaderComponent />
 
 			<div className="dark:bg-abrandc-dark-blackish bg-white min-h-screen-2 py-header">
 				{children}
diff --git a/src/layout/header/header.component.tsx b/src/layout/header/header.component.tsx
index d455a01..62ce36b 100644
--- a/src/layout/header/header.component.tsx
+++ b/src/layout/header/header.component.tsx
@@ -151,7 +151,7 @@ export default function HeaderComponent() {
 	const { values, touched, dirty, errors, handleChange, handleBlur, handleSubmit } = formik;
 
 	return (
-		<nav className="dark:bg-abrandc-dark-blackish bg-white  shadow ">
+		<nav className="dark:bg-abrandc-dark-blackish bg-white dark:drop-shadow-white drop-shadow">
 			<div className="container-2 mx-auto flex items-center justify-between h-[80px]">
 				{/* brand */}
 				<Link href={ROUTES.root} className="brand">
@@ -159,7 +159,7 @@ export default function HeaderComponent() {
 				</Link>
 
 				{/* desktop menu */}
-				<div className="hidden md:flex items-center gap-x-6  h-full">
+				<div className="hidden md:flex items-center gap-x-14	  h-full">
 					<div className="h-full grid place-items-center">
 						<Link
 							href={ROUTES.root}
@@ -171,9 +171,9 @@ export default function HeaderComponent() {
 
 					{/* dropdown */}
 					<div className="navbar-dropdown relative  h-full grid place-items-center cursor-pointer">
-						<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 ">
-							<div>Blockchain</div>
-							<i className="fa-lg far fa-angle-down"></i>
+						<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center justify-center gap-x-2 ">
+							<h1>Blockchain</h1>
+							<i className="fa-lg far fa-angle-down mt-2"></i>
 						</button>
 						<div
 							id="dropdown"
@@ -197,57 +197,7 @@ export default function HeaderComponent() {
 						</div>
 					</div>
 
-					<div>
-						<form onSubmit={handleSubmit} className="w-full lg:w-[250px]">
-							<div className="field">
-								{/* input contianer */}
-								<div
-									className={`search-bar-nav-container  ${
-										errors.search ? ' !border-ared-500' : ''
-									}`}
-								>
-									{/* Filter */}
-									{/* <div className="">
-									<button className="flex items-center gap-x-2 dark:bg-agrey-900 bg-abrandc-light-grey rounded-[8px] px-2 py-1 dark:text-white text-xl font-medium">
-										<span>All Filters</span>
-										<Image
-											className="w-auto h-auto"
-											src="/icons/arrow-down.svg"
-											width={20}
-											height={20}
-											alt=""
-										/>
-									</button>
-								</div> */}
-									<input
-										className="search-bar-nav-input"
-										placeholder="Search by Address | Txn Hash | Block "
-										// placeholder="Search by Address / Txn Hash / Block / Token / Domain Name"
-										name="search"
-										value={values.search}
-										onChange={handleChange}
-										onBlur={handleBlur}
-									/>
-
-									<button
-										className="flex items-center gap-x-2"
-										disabled={!dirty || !touched || !formik.isValid}
-										type="submit"
-									>
-										<Image
-											src="/media/icons/enter-arrow.svg"
-											width={24}
-											height={24}
-											alt=""
-										/>
-										<div className="text-agrey-500 font-bold text-sm">
-											Enter
-										</div>
-									</button>
-								</div>
-							</div>
-						</form>
-					</div>
+					
 
 					{/* <Button className="secondary medium w-[106px]">Connect</Button> */}
 					<Button
@@ -293,7 +243,7 @@ export default function HeaderComponent() {
 
 				{/* Mobile navigation menu */}
 				{mobileNavOpen && (
-					<div className="fixed top-0 left-0 w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-50 p-4 mt-header space-y-6">
+					<div className="fixed top-0 left-0  w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-72 p-4 mt-header space-y-6">
 						{/* Search */}
 						<form onSubmit={handleSubmit} className="w-full lg:w-[800px]">
 							<div className="field">
diff --git a/src/layout/header/header.scss b/src/layout/header/header.scss
index bfcdfe5..129d2e7 100644
--- a/src/layout/header/header.scss
+++ b/src/layout/header/header.scss
@@ -1,6 +1,6 @@
 .shadows {
 	background: var(--color-surfaces-bg-primary, #0000);
-	box-shadow: 8px 8px 56px 0px rgba(174, 174, 192, 0.16);
+    box-shadow:0 4px 6px rgba(255, 255, 255, 0.5)
 }
 
 .navbar-link {
diff --git a/src/layout/header/searchbar-header.component.tsx b/src/layout/header/searchbar-header.component.tsx
new file mode 100644
index 0000000..9207d11
--- /dev/null
+++ b/src/layout/header/searchbar-header.component.tsx
@@ -0,0 +1,390 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import React, { useContext, useState } from 'react';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+
+import ThemeSvcContext from 'src/shared/services/theme/theme.context';
+import ThemeService from 'src/shared/services/theme/theme.service';
+import { Theme } from 'src/shared/services/theme/theme.type';
+
+import Button from 'src/components/internal/button/button.component';
+
+import { isAddress, isHash } from 'src/shared/utils/functions';
+
+import ROUTES from 'src/static/router.data';
+import './header.scss';
+
+function PwrLogo() {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="126"
+			height="22"
+			viewBox="0 0 126 22"
+			fill="none"
+			className="fill-current dark:text-white text-abrancd-dark-blackish"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M22.1719 21.4986V4.94469H24.5907V6.64069H24.9739C25.2773 6.11517 25.7323 5.64538 26.339 5.23133C26.9617 4.81729 27.8478 4.61026 28.9973 4.61026C29.9872 4.61026 30.8893 4.84914 31.7035 5.32688C32.5338 5.80463 33.1964 6.49736 33.6913 7.40509C34.2022 8.29688 34.4577 9.37978 34.4577 10.6538V11.0121C34.4577 12.2861 34.2102 13.3769 33.7153 14.2846C33.2203 15.1764 32.5577 15.8612 31.7275 16.339C30.8973 16.8167 29.9872 17.0556 28.9973 17.0556C28.231 17.0556 27.5843 16.96 27.0575 16.7689C26.5306 16.5778 26.1075 16.339 25.7882 16.0523C25.4688 15.7497 25.2134 15.4392 25.0218 15.1207H24.6386V21.4986H22.1719ZM28.2789 14.9057C29.3645 14.9057 30.2506 14.5633 30.9372 13.8786C31.6237 13.1938 31.967 12.2144 31.967 10.9404V10.7254C31.967 9.46736 31.6157 8.49594 30.9132 7.81117C30.2267 7.1264 29.3486 6.78401 28.2789 6.78401C27.2251 6.78401 26.347 7.1264 25.6445 7.81117C24.9579 8.49594 24.6147 9.46736 24.6147 10.7254V10.9404C24.6147 12.2144 24.9579 13.1938 25.6445 13.8786C26.347 14.5633 27.2251 14.9057 28.2789 14.9057ZM37.9486 16.7212L35.9369 4.94469H38.4036L39.8885 15.0729H40.2716L42.3313 4.94469H46.3307L48.3664 15.0729H48.7496L50.2344 4.94469H52.7011L50.6894 16.7212H46.5463L44.5106 6.6168H44.1274L42.0918 16.7212H37.9486ZM54.9043 16.7212V4.94469H57.3231V6.33015H57.7063C57.8979 5.83648 58.2012 5.47817 58.6163 5.25522C59.0474 5.01635 59.5743 4.89691 60.197 4.89691H61.61V7.11844H60.1012C59.3029 7.11844 58.6483 7.34139 58.1374 7.78728C57.6264 8.21726 57.371 8.8861 57.371 9.79382V16.7212H54.9043ZM74.3173 17.0556C73.1837 17.0556 72.1539 16.8167 71.2279 16.339C70.3178 15.8612 69.5914 15.1685 69.0485 14.2608C68.5216 13.353 68.2582 12.2622 68.2582 10.9882V10.6777C68.2582 9.40366 68.5216 8.32077 69.0485 7.42897C69.5914 6.52125 70.3178 5.82852 71.2279 5.35077C72.1539 4.8571 73.1837 4.61026 74.3173 4.61026C75.4509 4.61026 76.4168 4.81729 77.2151 5.23133C78.0134 5.64538 78.652 6.19479 79.131 6.87956C79.626 7.56433 79.9453 8.32077 80.089 9.14886L77.6941 9.6505C77.6143 9.12498 77.4466 8.64723 77.1912 8.21726C76.9357 7.78728 76.5765 7.4449 76.1135 7.1901C75.6505 6.9353 75.0677 6.8079 74.3652 6.8079C73.6787 6.8079 73.056 6.96715 72.4972 7.28565C71.9543 7.58822 71.5233 8.03412 71.2039 8.62334C70.8846 9.19664 70.7249 9.89734 70.7249 10.7254V10.9404C70.7249 11.7685 70.8846 12.4772 71.2039 13.0664C71.5233 13.6556 71.9543 14.1015 72.4972 14.4041C73.056 14.7067 73.6787 14.8579 74.3652 14.8579C75.403 14.8579 76.1933 14.5952 76.7361 14.0697C77.279 13.5282 77.6222 12.8434 77.7659 12.0153L80.1608 12.5648C79.9692 13.3769 79.626 14.1254 79.131 14.8102C78.652 15.4949 78.0134 16.0443 77.2151 16.4584C76.4168 16.8565 75.4509 17.0556 74.3173 17.0556ZM82.2874 16.7212V0H84.7542V6.6168H85.1373C85.297 6.31423 85.5205 6.01962 85.8079 5.73297C86.1113 5.44632 86.5024 5.21541 86.9814 5.04024C87.4764 4.84914 88.099 4.75359 88.8494 4.75359C89.7435 4.75359 90.5338 4.95265 91.2204 5.35077C91.9229 5.74889 92.4737 6.31423 92.8728 7.04677C93.272 7.76339 93.4716 8.6313 93.4716 9.6505V16.7212H91.0048V9.8416C91.0048 8.8224 90.7494 8.07393 90.2385 7.59618C89.7276 7.10251 89.025 6.85568 88.131 6.85568C87.1091 6.85568 86.2869 7.1901 85.6642 7.85894C85.0575 8.52779 84.7542 9.49921 84.7542 10.7732V16.7212H82.2874ZM99.9673 17.0556C99.1211 17.0556 98.3628 16.9123 97.6922 16.6256C97.0376 16.339 96.5107 15.917 96.1116 15.3596C95.7284 14.8022 95.5368 14.1254 95.5368 13.3292C95.5368 12.517 95.7284 11.8481 96.1116 11.3226C96.5107 10.7812 97.0456 10.3751 97.7161 10.1044C98.4027 9.83363 99.177 9.69827 100.039 9.69827H103.632V8.93388C103.632 8.24911 103.424 7.6997 103.009 7.28565C102.594 6.8716 101.955 6.66458 101.093 6.66458C100.247 6.66458 99.6001 6.86364 99.1531 7.26176C98.706 7.65988 98.4106 8.17744 98.267 8.81444L95.9679 8.07393C96.1595 7.43693 96.4628 6.86364 96.8779 6.35404C97.309 5.82852 97.8758 5.40651 98.5783 5.08801C99.2808 4.76951 100.127 4.61026 101.117 4.61026C102.65 4.61026 103.855 5.00042 104.733 5.78074C105.611 6.56106 106.05 7.66785 106.05 9.10109V13.9502C106.05 14.428 106.274 14.6668 106.721 14.6668H107.727V16.7212H105.883C105.324 16.7212 104.869 16.5778 104.518 16.2912C104.166 16.0045 103.991 15.6144 103.991 15.1207V15.049H103.632C103.504 15.2879 103.312 15.5666 103.057 15.8851C102.801 16.2036 102.426 16.4823 101.931 16.7212C101.436 16.9441 100.782 17.0556 99.9673 17.0556ZM100.327 15.0252C101.316 15.0252 102.115 14.7465 102.721 14.1891C103.328 13.6158 103.632 12.8355 103.632 11.8481V11.6093H100.183C99.5283 11.6093 99.0014 11.7526 98.6022 12.0392C98.2031 12.31 98.0035 12.716 98.0035 13.2575C98.0035 13.7989 98.2111 14.2289 98.6262 14.5474C99.0413 14.8659 99.6081 15.0252 100.327 15.0252ZM109.407 16.7212V4.94469H111.874V16.7212H109.407ZM110.652 3.34423C110.173 3.34423 109.766 3.19295 109.431 2.89037C109.111 2.57187 108.952 2.16579 108.952 1.67212C108.952 1.17844 109.111 0.780322 109.431 0.477748C109.766 0.159249 110.173 0 110.652 0C111.147 0 111.554 0.159249 111.874 0.477748C112.193 0.780322 112.352 1.17844 112.352 1.67212C112.352 2.16579 112.193 2.57187 111.874 2.89037C111.554 3.19295 111.147 3.34423 110.652 3.34423ZM114.816 16.7212V4.94469H117.235V6.71235H117.618C117.841 6.2346 118.241 5.78871 118.815 5.37466C119.39 4.96061 120.244 4.75359 121.378 4.75359C122.272 4.75359 123.062 4.95265 123.749 5.35077C124.451 5.74889 125.002 6.31423 125.401 7.04677C125.8 7.76339 126 8.6313 126 9.6505V16.7212H123.533V9.8416C123.533 8.8224 123.278 8.07393 122.767 7.59618C122.256 7.10251 121.553 6.85568 120.659 6.85568C119.638 6.85568 118.815 7.1901 118.193 7.85894C117.586 8.52779 117.283 9.49921 117.283 10.7732V16.7212H114.816ZM0.731707 5H12.8293L16 10.0232L12.8293 15.982H6.87805L10 10.0232H3.47317L6.87805 15.982L3.45366 22L0 16.0214L3.46341 10.0133L0.731707 5Z"
+			/>
+		</svg>
+	);
+}
+
+export default function SearchBarHeaderComponent() {
+	const pathname = usePathname();
+
+	const [mobileNavOpen, setMobileNavOpen] = useState(false);
+
+	const blockchainLinks = [
+		{
+			id: 0,
+			label: 'Transactions',
+			href: ROUTES.transactions,
+		},
+		{
+			id: 1,
+			label: 'Blocks',
+			href: ROUTES.blocks,
+		},
+		// {
+		// 	id: 2,
+		// 	label: 'Nodes',
+		// 	href: ROUTES.nodes,
+		// },
+	];
+
+	const navigation = [
+		{
+			label: 'Explore',
+			href: '#',
+		},
+		{
+			label: 'Blockchain',
+			href: '#',
+		},
+		// {
+		// 	label: 'Tokens',
+		// 	href: '#',
+		// },
+		// {
+		// 	label: 'NFTs',
+		// 	href: '#',
+		// },
+	];
+
+	const [blockchainOpened, setBlockchainOpened] = useState<boolean>(false);
+
+	function toggleBlockchain() {
+		setBlockchainOpened(!blockchainOpened);
+	}
+
+	const toggleMobileNav = () => {
+		setMobileNavOpen(!mobileNavOpen);
+
+		const html = document.querySelector('html');
+
+		if (mobileNavOpen) {
+			html?.classList.remove('overflow-hidden');
+		} else {
+			html?.classList.add('overflow-hidden');
+		}
+	};
+
+	// *~~*~~*~~ Theme ~~*~~*~~* //
+	const themeSvc = useContext<ThemeService>(ThemeSvcContext);
+
+	const [currentTheme, setCurrentTheme] = useState<Theme>(themeSvc.theme);
+
+	function toggleTheme() {
+		themeSvc.toggleTheme();
+		setCurrentTheme(themeSvc.theme);
+	}
+
+	// *~~*~~*~~ Search bar logic ~~*~~*~~* //
+
+	const { push } = useRouter();
+
+	const formik = useFormik({
+		initialValues: {
+			search: '',
+		},
+		validationSchema: yup.object({
+			search: yup
+				.string()
+				.test(
+					'is-address-hash-or-number',
+					'Search term must be an address, a hash, or a number',
+					(value) =>
+						isAddress(value || '') || isHash(value || '') || !isNaN(Number(value))
+				),
+		}),
+		onSubmit: (values) => {
+			const { search } = values;
+			const address = isAddress(search);
+			const hash = isHash(search);
+			const number = !isNaN(Number(search));
+
+			if (address) {
+				// Navigate to the address page for 42-character input
+				push(`${ROUTES.address}/${search}`);
+			} else if (hash) {
+				// Navigate to the transaction page for 66-character input
+				push(`${ROUTES.transactions}/${search}`);
+			} else if (number) {
+				// Navigate to the block page for number input
+				push(`${ROUTES.blocks}/${search}`);
+			}
+
+			setMobileNavOpen(false);
+		},
+	});
+
+	const { values, touched, dirty, errors, handleChange, handleBlur, handleSubmit } = formik;
+
+	return (
+		<nav className="dark:bg-abrandc-dark-blackish bg-white  shadow ">
+			<div className="container-2 mx-auto flex items-center justify-between h-[80px]">
+				{/* brand */}
+				<Link href={ROUTES.root} className="brand">
+					<PwrLogo />
+				</Link>
+
+				{/* desktop menu */}
+				<div className="hidden md:flex items-center gap-x-6  h-full">
+					<div className="h-full grid place-items-center">
+						<Link
+							href={ROUTES.root}
+							className={`navbar-link ${pathname === ROUTES.root ? 'active' : ''}`}
+						>
+							Explore
+						</Link>
+					</div>
+
+					{/* dropdown */}
+					<div className="navbar-dropdown relative  h-full grid place-items-center cursor-pointer">
+						<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 ">
+							<div>Blockchain</div>
+							<i className="fa-lg far fa-angle-down"></i>
+						</button>
+						<div
+							id="dropdown"
+							className="nav-dropdown-menu absolute top-full left-0 z-10  bg-white divide-y divide-gray-100 rounded-lg shadow-lg dark:bg-abrandc-dark-grey"
+						>
+							<ul
+								className="py-2 text-sm text-gray-700 dark:text-gray-200"
+								aria-labelledby="dropdownDefaultButton"
+							>
+								{blockchainLinks.map((a, idx) => (
+									<li key={idx}>
+										<Link
+											href={a.href}
+											className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-agrey-800 dark:hover:text-white"
+										>
+											{a.label}
+										</Link>
+									</li>
+								))}
+							</ul>
+						</div>
+					</div>
+
+					<div>
+						<form onSubmit={handleSubmit} className="w-full lg:w-[325px]">
+							<div className="field">
+								{/* input contianer */}
+								<div
+									className={`search-bar-nav-container  ${
+										errors.search ? ' !border-ared-500' : ''
+									}`}
+								>
+									<button
+										className="flex items-center gap-x-2"
+										disabled={!dirty || !touched || !formik.isValid}
+										type="submit"
+									>
+										<i className="fa-xs fas fa-search text-agrey-500"></i>
+									</button>
+									<input
+										className="search-bar-nav-input"
+										// placeholder="Search by Address | Txn Hash | Block "
+										placeholder="Search by Address / Txn Hash / Block / Token / Domain Name"
+										name="search"
+										value={values.search}
+										onChange={handleChange}
+										onBlur={handleBlur}
+									/>
+								</div>
+							</div>
+						</form>
+					</div>
+
+					{/* <Button className="secondary medium w-[106px]">Connect</Button> */}
+					<Button
+						className="blue medium w-[117px]"
+						tag_type="link"
+						href="https://chrome.google.com/webstore/category/extensions"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						Get Wallet
+					</Button>
+
+					<button
+						className="theme_btn text-agrey-500 dark:text-white"
+						onClick={toggleTheme}
+					>
+						<div className="dark:text-white">
+							<i
+								className={`fa-lg fa-solid fa-${
+									currentTheme === 'light' ? 'sun-bright' : 'moon'
+								}`}
+							></i>
+						</div>
+					</button>
+				</div>
+
+				{/* Mobile burger icon */}
+				<div className="md:hidden">
+					{/* This is a simple burger icon. You can replace this with any SVG or icon library you prefer. */}
+					<button
+						data-collapse-toggle="navbar-sticky"
+						type="button"
+						className={`burger ${mobileNavOpen ? 'active' : ''}`}
+						aria-controls="navbar-sticky"
+						aria-expanded="true"
+						onClick={toggleMobileNav}
+					>
+						<div className="h-line h-line1"></div>
+						<div className="h-line h-line2"></div>
+						<div className="h-line h-line3"></div>
+					</button>
+				</div>
+
+				{/* Mobile navigation menu */}
+				{mobileNavOpen && (
+					<div className="fixed top-0 left-0 w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-50 p-4 mt-header space-y-6">
+						{/* Search */}
+						<form onSubmit={handleSubmit} className="w-full lg:w-[800px]">
+							<div className="field">
+								{/* input contianer */}
+								<div
+									className={`search-bar-nav-container  ${
+										errors.search ? ' !border-ared-500' : ''
+									}`}
+								>
+									<button
+										className="flex items-center gap-x-2"
+										disabled={!dirty || !touched || !formik.isValid}
+										type="submit"
+									>
+										<i className="fa-xs fas fa-search text-agrey-500"></i>
+									</button>
+									<input
+										className="search-bar-nav-input"
+										// placeholder="Search by Address | Txn Hash | Block "
+										placeholder="Search by Address / Txn Hash / Block / Token / Domain Name"
+										name="search"
+										value={values.search}
+										onChange={handleChange}
+										onBlur={handleBlur}
+									/>
+								</div>
+							</div>
+						</form>
+
+						{/* links */}
+						<div className="space-y-2">
+							<Link
+								href={ROUTES.root}
+								className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
+							>
+								<div>Explore</div>
+							</Link>
+
+							<div>
+								<button
+									className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2  justify-between w-full"
+									onClick={toggleBlockchain}
+								>
+									<div>Blockchain</div>
+
+									<div>
+										<i
+											className={`fa-lg far fa-angle-${
+												blockchainOpened ? 'up' : 'down'
+											}`}
+										></i>
+									</div>
+								</button>
+
+								{blockchainOpened && (
+									<ul
+										className="py-2 text-sm text-gray-700 dark:text-gray-200"
+										aria-labelledby="dropdownDefaultButton"
+									>
+										{blockchainLinks.map((a, idx) => (
+											<li key={idx}>
+												<Link href={a.href} className="block px-4 py-2 ">
+													{a.label}
+												</Link>
+											</li>
+										))}
+									</ul>
+								)}
+							</div>
+						</div>
+
+						{/* buttons */}
+						<div className="flex justify-between gap-4">
+							{/* <Button className="secondary medium w-2/4">Connect</Button> */}
+							<Button
+								className="blue medium w-full"
+								tag_type="link"
+								href="https://chrome.google.com/webstore/category/extensions"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Get Wallet
+							</Button>
+						</div>
+
+						{/* theme */}
+						<div className="space-y-2">
+							<h1 className="text-agrey-500 dark:text-agrey-600">Interface</h1>
+							<div className="w-full bg-agrey-50 dark:bg-agrey-900 flex justify-between h-[52px] px-4 py-2 rounded-lg  items-center ">
+								<div className=" text-agrey-500 dark:text-white">
+									<i
+										className={`fa-lg fas ${
+											currentTheme === 'light' ? 'fa-sun' : 'fa-moon'
+										}`}
+									></i>
+								</div>
+
+								<div className="relative inline-block w-10 align-middle select-none transition duration-200 ease-in">
+									<label className="relative items-center cursor-pointer">
+										<input
+											type="checkbox"
+											checked={currentTheme === 'dark'}
+											className="sr-only peer"
+											onChange={toggleTheme}
+										/>
+										<div className="w-11 h-6 bg-gray-200  dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+									</label>
+								</div>
+							</div>
+						</div>
+					</div>
+				)}
+			</div>
+		</nav>
+	);
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 29b514a..057d514 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -90,8 +90,10 @@ const config: Config = {
 			fontFamily: {
 				space_grotesk: ['var(--font-grotesk)'],
 			},
-			boxShadow: {
-				'3xl': '8px 8px 56px 0px rgba(174, 174, 192, 0.16)', // Custom boxShadow
+			dropShadow: {
+				'white': '0 20px 20px rgba(255, 255, 255, 0.05)',
+				'black': '0 4px 6px rgba(150, 150, 150, 0.5)',
+			
 			},
 		},
 	},

From 57e0c06904b9a021adee872cb81506940f032c12 Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Tue, 23 Jan 2024 15:29:22 +0200
Subject: [PATCH 02/14] update the navbar

---
 src/layout/header/header.component.tsx        | 45 +++++++++++++------
 .../header/searchbar-header.component.tsx     | 40 ++++++++++++-----
 2 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/src/layout/header/header.component.tsx b/src/layout/header/header.component.tsx
index 62ce36b..4783ed3 100644
--- a/src/layout/header/header.component.tsx
+++ b/src/layout/header/header.component.tsx
@@ -64,7 +64,11 @@ export default function HeaderComponent() {
 
 	const navigation = [
 		{
-			label: 'Explore',
+			label: 'Transactions',
+			href: '#',
+		},
+		{
+			label: 'Blocks',
 			href: '#',
 		},
 		{
@@ -162,15 +166,26 @@ export default function HeaderComponent() {
 				<div className="hidden md:flex items-center gap-x-14	  h-full">
 					<div className="h-full grid place-items-center">
 						<Link
-							href={ROUTES.root}
-							className={`navbar-link ${pathname === ROUTES.root ? 'active' : ''}`}
+							href={ROUTES.transactions}
+							className={`navbar-link ${
+								pathname === ROUTES.transactions ? 'active' : ''
+							}`}
+						>
+							Transactions
+						</Link>
+					</div>
+
+					<div className="h-full grid place-items-center">
+						<Link
+							href={ROUTES.blocks}
+							className={`navbar-link ${pathname === ROUTES.blocks ? 'active' : ''}`}
 						>
-							Explore
+							Blocks
 						</Link>
 					</div>
 
 					{/* dropdown */}
-					<div className="navbar-dropdown relative  h-full grid place-items-center cursor-pointer">
+					{/* <div className="navbar-dropdown relative  h-full grid place-items-center cursor-pointer">
 						<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center justify-center gap-x-2 ">
 							<h1>Blockchain</h1>
 							<i className="fa-lg far fa-angle-down mt-2"></i>
@@ -195,9 +210,7 @@ export default function HeaderComponent() {
 								))}
 							</ul>
 						</div>
-					</div>
-
-					
+					</div> */}
 
 					{/* <Button className="secondary medium w-[106px]">Connect</Button> */}
 					<Button
@@ -243,7 +256,7 @@ export default function HeaderComponent() {
 
 				{/* Mobile navigation menu */}
 				{mobileNavOpen && (
-					<div className="fixed top-0 left-0  w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-72 p-4 mt-header space-y-6">
+					<div className="fixed top-0 left-0  w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-auto p-4 mt-header space-y-6">
 						{/* Search */}
 						<form onSubmit={handleSubmit} className="w-full lg:w-[800px]">
 							<div className="field">
@@ -298,13 +311,19 @@ export default function HeaderComponent() {
 						{/* links */}
 						<div className="space-y-2">
 							<Link
-								href={ROUTES.root}
+								href={ROUTES.transactions}
 								className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
 							>
-								<div>Explore</div>
+								<div>Transactions</div>
+							</Link>
+							<Link
+								href={ROUTES.blocks}
+								className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
+							>
+								<div>Blocks</div>
 							</Link>
 
-							<div>
+							{/* <div>
 								<button
 									className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2  justify-between w-full"
 									onClick={toggleBlockchain}
@@ -334,7 +353,7 @@ export default function HeaderComponent() {
 										))}
 									</ul>
 								)}
-							</div>
+							</div> */}
 						</div>
 
 						{/* buttons */}
diff --git a/src/layout/header/searchbar-header.component.tsx b/src/layout/header/searchbar-header.component.tsx
index 9207d11..13502e2 100644
--- a/src/layout/header/searchbar-header.component.tsx
+++ b/src/layout/header/searchbar-header.component.tsx
@@ -151,7 +151,7 @@ export default function SearchBarHeaderComponent() {
 	const { values, touched, dirty, errors, handleChange, handleBlur, handleSubmit } = formik;
 
 	return (
-		<nav className="dark:bg-abrandc-dark-blackish bg-white  shadow ">
+		<nav className="dark:bg-abrandc-dark-blackish bg-white dark:drop-shadow-white drop-shadow">
 			<div className="container-2 mx-auto flex items-center justify-between h-[80px]">
 				{/* brand */}
 				<Link href={ROUTES.root} className="brand">
@@ -160,17 +160,27 @@ export default function SearchBarHeaderComponent() {
 
 				{/* desktop menu */}
 				<div className="hidden md:flex items-center gap-x-6  h-full">
+                <div className="h-full grid place-items-center">
+						<Link
+							href={ROUTES.transactions}
+							className={`navbar-link ${pathname === ROUTES.transactions ? 'active' : ''}`}
+						>
+							Transactions
+						</Link>
+					</div>
+
 					<div className="h-full grid place-items-center">
 						<Link
-							href={ROUTES.root}
-							className={`navbar-link ${pathname === ROUTES.root ? 'active' : ''}`}
+							href={ROUTES.blocks}
+							className={`navbar-link ${pathname === ROUTES.blocks ? 'active' : ''}`}
 						>
-							Explore
+							Blocks
 						</Link>
 					</div>
 
+
 					{/* dropdown */}
-					<div className="navbar-dropdown relative  h-full grid place-items-center cursor-pointer">
+					{/* <div className="navbar-dropdown relative  h-full grid place-items-center cursor-pointer">
 						<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 ">
 							<div>Blockchain</div>
 							<i className="fa-lg far fa-angle-down"></i>
@@ -195,7 +205,7 @@ export default function SearchBarHeaderComponent() {
 								))}
 							</ul>
 						</div>
-					</div>
+					</div> */}
 
 					<div>
 						<form onSubmit={handleSubmit} className="w-full lg:w-[325px]">
@@ -271,7 +281,7 @@ export default function SearchBarHeaderComponent() {
 
 				{/* Mobile navigation menu */}
 				{mobileNavOpen && (
-					<div className="fixed top-0 left-0 w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-50 p-4 mt-header space-y-6">
+					<div className="fixed top-0 left-0 w-full h-full dark:bg-abrandc-dark-blackish bg-white md:hidden z-72 p-4 mt-header space-y-6">
 						{/* Search */}
 						<form onSubmit={handleSubmit} className="w-full lg:w-[800px]">
 							<div className="field">
@@ -304,13 +314,19 @@ export default function SearchBarHeaderComponent() {
 						{/* links */}
 						<div className="space-y-2">
 							<Link
-								href={ROUTES.root}
+								href={ROUTES.transactions}
 								className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
 							>
-								<div>Explore</div>
+								<div>Transactions</div>
 							</Link>
-
-							<div>
+                            <Link
+								href={ROUTES.blocks}
+								className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
+							>
+								<div>Blocks</div>
+							</Link>
+                            
+							{/* <div>
 								<button
 									className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2  justify-between w-full"
 									onClick={toggleBlockchain}
@@ -340,7 +356,7 @@ export default function SearchBarHeaderComponent() {
 										))}
 									</ul>
 								)}
-							</div>
+							</div> */}
 						</div>
 
 						{/* buttons */}

From 6b85af6c66fe9c1291f17e19f5e862afb27a2917 Mon Sep 17 00:00:00 2001
From: Rawad Kadi <82026446+RawadKadi@users.noreply.github.com>
Date: Mon, 20 May 2024 11:08:35 +0300
Subject: [PATCH 03/14] Temp Commit

---
 src/layout/header/header.component.tsx | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/layout/header/header.component.tsx b/src/layout/header/header.component.tsx
index 4783ed3..2e89b73 100644
--- a/src/layout/header/header.component.tsx
+++ b/src/layout/header/header.component.tsx
@@ -167,9 +167,8 @@ export default function HeaderComponent() {
 					<div className="h-full grid place-items-center">
 						<Link
 							href={ROUTES.transactions}
-							className={`navbar-link ${
-								pathname === ROUTES.transactions ? 'active' : ''
-							}`}
+							className={`navbar-link ${pathname === ROUTES.transactions ? 'active' : ''
+								}`}
 						>
 							Transactions
 						</Link>
@@ -216,7 +215,7 @@ export default function HeaderComponent() {
 					<Button
 						className="blue medium w-[117px]"
 						tag_type="link"
-						href="https://chrome.google.com/webstore/category/extensions"
+						href="https://chromewebstore.google.com/detail/pwr-wallet/kennjipeijpeengjlogfdjkiiadhbmjl"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
@@ -229,9 +228,8 @@ export default function HeaderComponent() {
 					>
 						<div className="dark:text-white">
 							<i
-								className={`fa-lg fa-solid fa-${
-									currentTheme === 'light' ? 'sun-bright' : 'moon'
-								}`}
+								className={`fa-lg fa-solid fa-${currentTheme === 'light' ? 'sun-bright' : 'moon'
+									}`}
 							></i>
 						</div>
 					</button>
@@ -262,9 +260,8 @@ export default function HeaderComponent() {
 							<div className="field">
 								{/* input contianer */}
 								<div
-									className={`search-bar-nav-container  ${
-										errors.search ? ' !border-ared-500' : ''
-									}`}
+									className={`search-bar-nav-container  ${errors.search ? ' !border-ared-500' : ''
+										}`}
 								>
 									{/* Filter */}
 									{/* <div className="">
@@ -362,7 +359,7 @@ export default function HeaderComponent() {
 							<Button
 								className="blue medium w-full"
 								tag_type="link"
-								href="https://chrome.google.com/webstore/category/extensions"
+								href="https://chromewebstore.google.com/detail/pwr-wallet/kennjipeijpeengjlogfdjkiiadhbmjl"
 								target="_blank"
 								rel="noopener noreferrer"
 							>
@@ -376,9 +373,8 @@ export default function HeaderComponent() {
 							<div className="w-full bg-agrey-50 dark:bg-agrey-900 flex justify-between h-[52px] px-4 py-2 rounded-lg  items-center ">
 								<div className=" text-agrey-500 dark:text-white">
 									<i
-										className={`fa-lg fas ${
-											currentTheme === 'light' ? 'fa-sun' : 'fa-moon'
-										}`}
+										className={`fa-lg fas ${currentTheme === 'light' ? 'fa-sun' : 'fa-moon'
+											}`}
 									></i>
 								</div>
 

From 798a31a7630cb90c57a0e142a38821a8b2baaf16 Mon Sep 17 00:00:00 2001
From: Rawad Kadi <82026446+RawadKadi@users.noreply.github.com>
Date: Fri, 7 Jun 2024 13:13:16 +0300
Subject: [PATCH 04/14] Blocks clickable - Block Details

---
 .../transactions/[txnhash]/page.tsx                   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
index 56a96fd..324da4b 100644
--- a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
+++ b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
@@ -153,10 +153,15 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 								<div className="flex gap-x-2">
 									<div className="flex items-center gap-x-2 ">
 										<i className="fas fa-check-circle text-ablue-500 dark:text-ablue-100 fa-lg" />
-
-										<h2 className="dark:text-ablue-100 text-ablue-500 font-medium text-sm">
+										<Link
+											href={`${ROUTES.blocks}/${txnData.blockNumber}`}
+											className="dark:text-ablue-100 text-ablue-500 font-medium text-sm"
+										>
+											{txnData.blockNumber}
+										</Link>
+										{/* <h2 className="dark:text-ablue-100 text-ablue-500 font-medium text-sm">
 											{txnData.blockNumber}
-										</h2>
+										</h2> */}
 									</div>
 									{/* <Tags>1153 Block Confirmations</Tags> */}
 								</div>

From 581cf1059c3bc6f05530fe3428c5f9822a52c92d Mon Sep 17 00:00:00 2001
From: Rawad Kadi <82026446+RawadKadi@users.noreply.github.com>
Date: Fri, 7 Jun 2024 17:03:18 +0300
Subject: [PATCH 05/14] Removed Buy & Exchange buttons from the transaction
 details page

---
 .../(header-footer-layout)/transactions/[txnhash]/page.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
index 324da4b..79698dc 100644
--- a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
+++ b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
@@ -68,10 +68,10 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 						<Tags className="capitalize">{txnData.txnType}</Tags>
 					)}
 				</div>
-				<div className="flex-1 items-center gap-x-2 w-full xl:justify-end justify-center hidden lg:flex">
+				{/* <div className="flex-1 items-center gap-x-2 w-full xl:justify-end justify-center hidden lg:flex">
 					<Button className="blue !h-[36px] xl:w-[120px] w-[40%]">Buy</Button>
 					<Button className="blue !h-[36px] xl:w-[120px] w-[40%]">Exchange</Button>
-				</div>
+				</div> */}
 			</div>
 
 			<br />

From 9ae908fa370ab6c2b8a458bb6baae3a85ac2371e Mon Sep 17 00:00:00 2001
From: Rawad Kadi <82026446+RawadKadi@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:36:37 +0300
Subject: [PATCH 06/14] Changed Discord Link

---
 src/layout/footer/footer.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/footer/footer.component.tsx b/src/layout/footer/footer.component.tsx
index 7d1f315..c313a13 100644
--- a/src/layout/footer/footer.component.tsx
+++ b/src/layout/footer/footer.component.tsx
@@ -53,7 +53,7 @@ export default function FooterComponent() {
 		{
 			icon: <i className="fab fa-discord" />,
 			label: 'Join our Discord',
-			href: 'https://discord.gg/wtnvquRpuV',
+			href: 'https://discord.com/invite/Q27n6K9ZBV',
 		},
 	];
 

From 3329e965f2f2df0a65e467bae5a7c7e0a2cd3693 Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Thu, 5 Sep 2024 10:55:10 +0300
Subject: [PATCH 07/14] update nodes tracker

---
 public/icons/check.svg                        |   4 +
 .../address/[address]/blocks.component.tsx    | 255 ++++++++++++
 .../address/[address]/page.tsx                | 392 +++++-------------
 .../[address]/transcations.component.tsx      | 336 +++++++++++++++
 .../(header-footer-layout)/nodes/layout.tsx   |  11 +
 .../(header-footer-layout)/nodes/nodes.scss   |  46 ++
 src/app/(header-footer-layout)/nodes/page.tsx | 288 +++++++++++++
 .../transactions/[txnhash]/page.tsx           | 134 +++++-
 src/app/page.tsx                              |  57 ++-
 .../internal/chart/chart.component.tsx        | 126 ++++++
 .../internal/stat-box/stat-box.component.tsx  |  17 +-
 .../header/searchbar-header.component.tsx     |  13 +-
 src/shared/api/api.ts                         |   7 +-
 src/shared/api/query-api.ts                   |  28 ++
 .../addresss/txn-history.response.ts          |  32 ++
 .../api/responses/explorer-info.response.ts   |   4 +
 .../api/responses/nodes/nodes-responses.ts    |  30 ++
 .../api/responses/txn/txn-details.response.ts |   3 +
 src/shared/utils/formatters.ts                |   5 +-
 src/static/query.keys.ts                      |   4 +
 20 files changed, 1453 insertions(+), 339 deletions(-)
 create mode 100644 public/icons/check.svg
 create mode 100644 src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
 create mode 100644 src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
 create mode 100644 src/app/(header-footer-layout)/nodes/layout.tsx
 create mode 100644 src/app/(header-footer-layout)/nodes/nodes.scss
 create mode 100644 src/app/(header-footer-layout)/nodes/page.tsx
 create mode 100644 src/components/internal/chart/chart.component.tsx
 create mode 100644 src/shared/api/responses/nodes/nodes-responses.ts

diff --git a/public/icons/check.svg b/public/icons/check.svg
new file mode 100644
index 0000000..f8929ca
--- /dev/null
+++ b/public/icons/check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+<path d="M10.2116 2.21143C11.6826 0.596189 14.2241 0.596189 15.6952 2.21143C16.4387 3.02788 17.5073 3.47048 18.6103 3.41891C20.7926 3.31691 22.5898 5.11415 22.4878 7.29646C22.4362 8.39942 22.8789 9.46799 23.6953 10.2116C25.3105 11.6826 25.3105 14.2241 23.6953 15.6952C22.8789 16.4387 22.4362 17.5073 22.4878 18.6103C22.5898 20.7926 20.7926 22.5898 18.6103 22.4878C17.5073 22.4362 16.4387 22.8789 15.6952 23.6953C14.2241 25.3105 11.6826 25.3105 10.2116 23.6953C9.46799 22.8789 8.39942 22.4362 7.29646 22.4878C5.11415 22.5898 3.31691 20.7926 3.41891 18.6103C3.47048 17.5073 3.02788 16.4387 2.21143 15.6952C0.596189 14.2241 0.596189 11.6826 2.21143 10.2116C3.02788 9.46799 3.47048 8.39942 3.41891 7.29646C3.31691 5.11415 5.11415 3.31691 7.29646 3.41891C8.39942 3.47048 9.46799 3.02788 10.2116 2.21143Z" stroke="#9C9BB3" stroke-width="1.77778"/>
+<path d="M9.20312 12.9536L11.7038 15.454L16.7047 10.4531" stroke="#9C9BB3" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx b/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
new file mode 100644
index 0000000..90c012d
--- /dev/null
+++ b/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
@@ -0,0 +1,255 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import { useState } from 'react';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+import { useQuery } from 'react-query';
+import { useRouter } from 'next/navigation';
+
+import TableSkeleton from 'src/components/internal/table-skeleton/table-skeleton.component';
+import Tooltip from 'src/components/internal/tooltip/tooltip.component';
+import Pagination from 'src/components/internal/pagination/pagination.component';
+import QuickPagination from 'src/components/internal/quick-pagination/quick-pagination.component';
+import ErrorComponent from 'src/components/error/error.component';
+
+import { BnToDec, shortenAddress, timeAgo } from 'src/shared/utils/formatters';
+import { copyToClipboard, isAddress, isHash } from 'src/shared/utils/functions';
+import QueryApi from 'src/shared/api/query-api';
+
+import QUERY_KEYS from 'src/static/query.keys';
+import ROUTES from 'src/static/router.data';
+
+const headers = [
+	{
+		id: 0,
+		name: 'Block',
+		thClass: 'xl:px-8 px-2',
+	},
+	{
+		id: 1,
+		name: 'Age',
+		thClass: 'xl:px-8 px-2',
+	},
+	{
+		id: 2,
+		name: 'Txns',
+		thClass: 'xl:px-8 px-2',
+	},
+	{
+		id: 3,
+		name: 'Fee Recipient',
+		thClass: 'xl:px-8 px-2',
+	},
+	{
+		id: 4,
+		name: 'Reward', // Direction
+		thClass: 'xl:px-8 px-2',
+	},
+];
+
+type BlockComponentProps = {
+	address: string;
+};
+
+export default function BlockComponent({ address }: BlockComponentProps) {
+	// *~~*~~*~~ Txn history ~~*~~*~~* //
+
+	const [page, setPage] = useState<number>(1);
+	const [count, setCount] = useState<number>(10);
+
+	
+	const [paginationMetadata, setPaginationMetadata] = useState({
+		currentPage: 1,
+		totalPages: 1,
+		startIndex: 0,
+		endIndex: 0,
+		totalItems: 0,
+		itemsPerPage: 0,
+		nextPage: 0,
+		previousPage: 0,
+	});
+
+	// txnHistory
+
+	const {
+		data: blockData,
+		isLoading: blockLoading,
+		isError: blockError,
+	} = useQuery(
+		[QUERY_KEYS.blocks_Created, address, page, count],
+		() => QueryApi.user.blocksCreated(address, page, count),
+		{
+			staleTime: 1000 * 60 * 5,
+			cacheTime: 0,
+			onSuccess: (data) => {
+				setPaginationMetadata(data.metadata);
+			},
+		}
+	);
+
+	function handlePageChange(page: number) {
+		setPage(page);
+	}
+
+	if (blockError || (!blockLoading && !blockData)) return <ErrorComponent />;
+
+	if (blockData?.blocks.length === 0) {
+		return (
+			<section className="overflow-x-auto mt-12">
+				<div className="text-center">
+					<h1 className="text-agrey-900 dark:text-white">
+						This address never participated in the creation of blocks on PWR Chain.
+					</h1>
+				</div>
+			</section>
+		);
+	}
+
+	return (
+		<section className="overflow-x-auto mt-12">
+			{/* Title */}
+			<div className="flex flex-col lg:flex-row lg:justify-between  lg:items-center gap-y-4">
+				{blockLoading ? (
+					<div className="skeleton-container space-y-4">
+						<div className="skeleton-title w-[300px]"></div>
+						<div className="skeleton-line w-[200px]"></div>
+					</div>
+				) : blockData?.blocks.length === 0 ? null : (
+					<>
+						<div>
+							<h1 className="leading-[26px] px-2 py-1 dark:text-white text-abrandc-dark-grey font-medium">
+								More than {blockData?.metadata.totalItems} Blocks found
+							</h1>
+							<h2 className="text-xs px-2 py-1 dark:text-white text-abrandc-dark-grey font-medium">
+								(Showing the latest records)
+							</h2>
+						</div>
+						<div className="flex items-center justify-center gap-x-2 text-white">
+							<QuickPagination
+								metadata={paginationMetadata}
+								onPageChange={handlePageChange}
+							/>
+						</div>
+					</>
+				)}
+			</div>
+			{/* Table */}
+			<div className="w-full mt-5 overflow-x-auto scroll-sm">
+				{blockLoading ? (
+					<TableSkeleton />
+				) : (
+					<table className="table-auto bg-awhite w-full min-w-[900px]">
+						{/* table header */}
+						<thead className="sticky top-0">
+							<tr>
+								{headers.map((header, idx) => (
+									<th
+										className={`dark:text-white text-abrandc-dark-grey ${header.thClass} py-1`}
+										key={idx}
+									>
+										{header.name.length > 0 && (
+											<div className="flex justify-center items-center gap-x-2">
+												<div className="text-abrandc-dark-grey dark:text-white text-sm font-bold">
+													{header.name}
+												</div>
+												{/* <div className="text-agrey-500 dark:text-agrey-600">
+														<i className="fa-sm far fa-info-circle" />
+													</div> */}
+											</div>
+										)}
+									</th>
+								))}
+							</tr>
+						</thead>
+
+						{/* table body */}
+						<tbody>
+							{blockData?.blocks.map((block, idx) => (
+								<tr
+									key={idx}
+									className={` ${
+										idx % 2 === 0
+											? 'dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
+											: 'bg-transparent'
+									}`}
+								>
+									{/* Block */}
+									<td className="xl:px-8 px-2 py-8">
+										<Link
+											href={`${ROUTES.blocks}/${block.blockHeight}`}
+											className="dark:text-ablue-300 text-ablue-200 font-medium text-center block"
+										>
+											{block.blockHeight}
+										</Link>
+									</td>
+
+									{/* Age */}
+									<td className="xl:px-8 px-2 py-8">
+										<div className="dark:text-white text-abrandc-dark-grey font-normal text-center">
+											{timeAgo(block.timeStamp)}
+										</div>
+									</td>
+
+									{/* txns */}
+									<td className="xl:px-8 px-2 py-8">
+										<div className="dark:text-white text-abrandc-dark-grey font-normal text-center">
+											<Link
+												href={ROUTES.blockTxns(block.blockHeight)}
+												className="dark:text-ablue-300 text-ablue-200 font-medium"
+											>
+												{block.txnsCount}
+											</Link>
+										</div>
+									</td>
+
+									{/* fee recipient */}
+									<td className="xl:px-8 px-2 py-8">
+										<div className="flex gap-x-2 justify-center">
+											<Link
+												href={`${ROUTES.address}/${block.blockSubmitter}`}
+												className="dark-text-ablue-100 text-ablue-100 font-medium"
+											>
+												{shortenAddress(block.blockSubmitter, 4)}
+											</Link>
+
+											<Tooltip
+												text="Copied to clipboard"
+												position="up"
+												trigger="click"
+											>
+												<button
+													className="text-agrey-500 dark:text-agrey-600"
+													onClick={() =>
+														copyToClipboard(block.blockSubmitter)
+													}
+												>
+													<i className="far fa-clone" />
+												</button>
+											</Tooltip>
+										</div>
+									</td>
+
+									{/* Reward */}
+									<td className="xl:px-8 px-2 py-8">
+										<div className="dark:text-white text-abrandc-dark-grey font-normal text-center">
+											{BnToDec(block.blockReward.toString(), 9, 9)} PWR
+										</div>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				)}
+			</div>
+
+			<div>
+				<Pagination
+					metadata={paginationMetadata} // Pass updated metadata
+					onPageChange={(page: number) => setPage(page)}
+				/>
+			</div>
+		</section>
+	);
+}
diff --git a/src/app/(header-footer-layout)/address/[address]/page.tsx b/src/app/(header-footer-layout)/address/[address]/page.tsx
index 974ea80..60736fc 100644
--- a/src/app/(header-footer-layout)/address/[address]/page.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/page.tsx
@@ -3,8 +3,10 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { useState } from 'react';
-
+import { useFormik } from 'formik';
+import * as yup from 'yup';
 import { useQuery } from 'react-query';
+import { useRouter } from 'next/navigation';
 
 import TableSkeleton from 'src/components/internal/table-skeleton/table-skeleton.component';
 import Tooltip from 'src/components/internal/tooltip/tooltip.component';
@@ -14,54 +16,14 @@ import ErrorComponent from 'src/components/error/error.component';
 import OverviewBoxSkeleton from 'src/components/skeletons/address/overview-box.skeleton';
 
 import { BnToDec, shortenAddress, timeAgo } from 'src/shared/utils/formatters';
-import { copyToClipboard, isAddress } from 'src/shared/utils/functions';
+import { copyToClipboard, isAddress, isHash } from 'src/shared/utils/functions';
 import QueryApi from 'src/shared/api/query-api';
 
 import QUERY_KEYS from 'src/static/query.keys';
 import ROUTES from 'src/static/router.data';
-
-const headers = [
-	{
-		id: 0,
-		name: 'Txn Hash',
-		thClass: 'xl:px-8 px-2',
-	},
-	{
-		id: 1,
-		name: 'Type',
-		thClass: 'xl:px-8 px-2',
-	},
-	{
-		id: 2,
-		name: 'Block',
-		thClass: 'xl:px-8 px-2',
-	},
-	{
-		id: 3,
-		name: 'Timestamp',
-		thClass: 'xl:px-8 px-2',
-	},
-	{
-		id: 4,
-		name: 'From',
-		thClass: 'xl:pl-8 pl-2 pr-2',
-	},
-	{
-		id: 5,
-		name: '', // Direction
-		thClass: ' px-2',
-	},
-	{
-		id: 6,
-		name: 'To',
-		thClass: 'xl:pr-8 pr-2 pl-2',
-	},
-	{
-		id: 7,
-		name: 'Value',
-		thClass: 'xl:px-8 px-2',
-	},
-];
+import TextButton from 'src/components/internal/text-button/text-button.component';
+import TransactionComponent from './transcations.component';
+import BlockComponent from './blocks.component';
 
 type AddressPageProps = {
 	params: {
@@ -71,6 +33,13 @@ type AddressPageProps = {
 
 export default function AddressPage({ params }: AddressPageProps) {
 	const address = params.address;
+	const { push } = useRouter();
+
+	const [activeTab, setActiveTab] = useState('transactions'); // Manage active tab state
+
+	const handleTabChange = (tab: string) => {
+		setActiveTab(tab);
+	};
 
 	// *~~*~~*~~ account balance ~~*~~*~~* //
 	const {
@@ -82,22 +51,44 @@ export default function AddressPage({ params }: AddressPageProps) {
 		cacheTime: 0,
 	});
 
+	const formik = useFormik({
+		initialValues: {
+			search: '',
+		},
+		validationSchema: yup.object({
+			search: yup
+				.string()
+				.test(
+					'is-address-hash-or-number',
+					'Search term must be an address, a hash, or a number',
+					(value) =>
+						isAddress(value || '') || isHash(value || '') || !isNaN(Number(value))
+				),
+		}),
+		onSubmit: (values) => {
+			const { search } = values;
+			const address = isAddress(search);
+			const hash = isHash(search);
+			const number = !isNaN(Number(search));
+
+			if (address) {
+				// Navigate to the address page for 42-character input
+				push(`${ROUTES.address}/${search}`);
+			} else if (hash) {
+				// Navigate to the transaction page for 66-character input
+				push(`${ROUTES.transactions}/${search}`);
+			} else if (number) {
+				// Navigate to the block page for number input
+				push(`${ROUTES.blocks}/${search}`);
+			}
+		},
+	});
+
 	// *~~*~~*~~ Txn history ~~*~~*~~* //
 
 	const [page, setPage] = useState<number>(1);
 	const [count, setCount] = useState<number>(10);
 
-	const [paginationMetadata, setPaginationMetadata] = useState({
-		currentPage: 1,
-		totalPages: 1,
-		startIndex: 0,
-		endIndex: 0,
-		totalItems: 0,
-		itemsPerPage: 0,
-		nextPage: 0,
-		previousPage: 0,
-	});
-
 	// txnHistory
 
 	const {
@@ -110,30 +101,9 @@ export default function AddressPage({ params }: AddressPageProps) {
 		{
 			staleTime: 1000 * 60 * 5,
 			cacheTime: 0,
-			onSuccess: (data) => {
-				setPaginationMetadata(data.metadata);
-			},
 		}
 	);
 
-	function handlePageChange(page: number) {
-		setPage(page);
-	}
-
-	function SkeletonStatBox() {
-		return (
-			<div className=" bg-abrandc-light-grey dark:bg-agrey-900 w-full h-[88px] rounded-xl p-4">
-				<div className="flex items-center gap-x-4 skeleton-container h-full">
-					<div className="flex-grow">
-						<div className="skeleton-title max-w-[150px]"></div>
-						<div className="skeleton-line max-w-[100px]"></div>
-						<span className="sr-only">Loading...</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
 	if (
 		balanceError ||
 		(!balanceLoading && !balanceData) ||
@@ -142,8 +112,9 @@ export default function AddressPage({ params }: AddressPageProps) {
 	)
 		return <ErrorComponent />;
 
+	const { values, touched, dirty, errors, handleChange, handleBlur, handleSubmit } = formik;
 	return (
-		<main className="container-2 mx-auto">
+		<main className="container-2 mx-auto space-y-12">
 			<section className="space-y-4">
 				{/* Title */}
 				<h1 className="text-4xl font-bold dark:text-white text-abrandc-dark-grey">
@@ -302,218 +273,69 @@ export default function AddressPage({ params }: AddressPageProps) {
 				</div>
 			</section>
 
-			{/* Table */}
-			<section className="overflow-x-auto mt-12">
-				{/* Title */}
-				<div className="flex flex-col lg:flex-row lg:justify-between  lg:items-center gap-y-4">
-					{txnHistoryLoading ? (
-						<div className="skeleton-container space-y-4">
-							<div className="skeleton-title w-[300px]"></div>
-							<div className="skeleton-line w-[200px]"></div>
-						</div>
-					) : txnHistoryData.transactions.length === 0 ? null : (
-						<>
-							<div>
-								<h1 className="leading-[26px] px-2 py-1 dark:text-white text-abrandc-dark-grey font-medium">
-									More than {txnHistoryData.metadata.totalItems} transactions
-									found
-								</h1>
-								<h2 className="text-xs px-2 py-1 dark:text-white text-abrandc-dark-grey font-medium">
-									(Showing the latest records)
-								</h2>
-							</div>
-							<div className="flex items-center justify-center gap-x-2 text-white">
-								<QuickPagination
-									metadata={paginationMetadata}
-									onPageChange={handlePageChange}
-								/>
-							</div>
-						</>
-					)}
+			<section className="flex justify-between items-center">
+				{/* Tab navigation */}
+				<div className="flex ">
+					<button
+						onClick={() => handleTabChange('transactions')}
+						className={`py-2 px-4 text-sm ${
+							activeTab === 'transactions'
+								? 'border-b-2 font-bold dark:border-white border-ablue-500 text-ablue-500 dark:text-white'
+								: 'text-agrey-500'
+						}`}
+					>
+						Transactions
+					</button>
+					<button
+						onClick={() => handleTabChange('blocks')}
+						className={`py-2 px-4 text-sm ${
+							activeTab === 'blocks'
+								? 'border-b-2 font-bold dark:border-white border-ablue-500 text-ablue-500 dark:text-white'
+								: 'text-agrey-500'
+						}`}
+					>
+						Blocks
+					</button>
 				</div>
-				{/* Table */}
-				<div className="w-full mt-5 overflow-x-auto scroll-sm">
-					{txnHistoryLoading ? (
-						<TableSkeleton />
-					) : txnHistoryData.transactions.length === 0 ? (
-						<div className="text-center">
-							<h1 className=" text-agrey-900 dark:text-white ">
-								No transactions found
-							</h1>
-						</div>
-					) : (
-						<>
-							<table className="table-auto bg-awhite w-full min-w-[950px]">
-								{/* table header */}
-								<thead className="sticky top-0">
-									<tr>
-										{headers.map((header, idx) => (
-											<th
-												className={`dark:text-white text-abrandc-dark-grey ${header.thClass} py-1`}
-												key={idx}
-											>
-												{header.name.length > 0 && (
-													<div className="flex justify-center items-center gap-x-2">
-														<div className="text-abrandc-dark-grey dark:text-white text-sm font-bold">
-															{header.name}
-														</div>
-														{/* <div className="text-agrey-500 dark:text-agrey-600">
-                                                                                                        <i className="fa-sm far fa-info-circle" />
-                          </div> */}
-													</div>
-												)}
-											</th>
-										))}
-									</tr>
-								</thead>
-
-								{/* table body */}
-								<tbody>
-									{txnHistoryData.transactions.map((txn, idx) => (
-										<tr
-											key={txn.txnHash}
-											className={` ${
-												idx % 2 == 0
-													? ' dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
-													: 'bg-transparent'
-											}`}
-										>
-											{/* txn hash */}
-											<td className="xl:px-8 px-2 py-8">
-												<div className="flex gap-x-2 justify-start">
-													<div>
-														<Image
-															className="w-auto h-auto"
-															src="/icons/eye.svg"
-															width={20}
-															height={20}
-															alt=""
-														/>
-													</div>
-
-													<Link
-														href={`${ROUTES.transactions}/${txn.txnHash}`}
-														className="dark:text-ablue-300 text-ablue-200 font-medium"
-													>
-														{shortenAddress(txn.txnHash)}
-													</Link>
-												</div>
-											</td>
-
-											{/* type */}
-											<td className="px-2 py-8">
-												<div className="dark:text-ablue-300 text-ablue-200 font-medium text-center block">
-													{txn.txnType}
-												</div>
-											</td>
-
-											{/* block */}
-											<td className="xl:px-8 px-2 py-8">
-												<Link
-													href={`${ROUTES.blocks}/${txn.block}`}
-													className="dark:text-ablue-300 text-ablue-200 font-medium text-center block"
-												>
-													{txn.block}
-												</Link>
-											</td>
-
-											{/* time ago */}
-											<td className="xl:px-8 px-2 py-8">
-												<div className="dark:text-white text-abrandc-dark-grey font-normal text-center whitespace-nowrap">
-													{timeAgo(txn.timeStamp)}
-												</div>
-											</td>
-
-											{/* from */}
-											<td className="xl:pl-8 pl-2 pr-2 py-8">
-												<div className="flex gap-x-2 justify-center">
-													<Link
-														href="/"
-														className="dark:text-ablue-100 text-ablue-500 font-medium"
-													>
-														{shortenAddress(txn.from, 4)}
-													</Link>
-
-													<Tooltip
-														text="Copied to clipboard"
-														position="up"
-														trigger="click"
-													>
-														<button
-															className="text-agrey-500 dark:text-agrey-600"
-															onClick={() =>
-																copyToClipboard(txn.from)
-															}
-														>
-															<i className="far fa-clone" />
-														</button>
-													</Tooltip>
-												</div>
-											</td>
-
-											{/* direction */}
-											<td className="px-2 py-8 flex justify-center">
-												<div className="w-6 h-6 bg-violet-100 dark:bg-agrey-800 rounded-full grid place-items-center">
-													<div className="text-agrey-500 dark:text-agrey-600">
-														<i className="fas fa-arrow-right fa-sm" />
-													</div>
-												</div>
-											</td>
-
-											{/* To */}
-											<td className="xl:pl-8 pl-2 pr-2 py-8">
-												<div className="flex gap-x-2 justify-center">
-													{isAddress(txn.to) ? (
-														<Link
-															href={`${ROUTES.address}/${txn.to}`}
-															className="dark:text-ablue-100 text-ablue-500 font-medium"
-														>
-															{shortenAddress(txn.to, 4)}
-														</Link>
-													) : (
-														<span className="dark:text-ablue-100 text-ablue-500 font-medium">
-															{txn.to}
-														</span>
-													)}
-
-													<Tooltip
-														text="Copied to clipboard"
-														position="up"
-														trigger="click"
-													>
-														<button
-															className="text-agrey-500 dark:text-agrey-600"
-															onClick={() => copyToClipboard(txn.to)}
-														>
-															<i className="far fa-clone" />
-														</button>
-													</Tooltip>
-												</div>
-											</td>
-
-											{/* value */}
-											<td className="xl:px-8 px-2 py-8">
-												<div className="dark:text-white text-abrandc-dark-grey font-normal text-center whitespace-nowrap">
-													{BnToDec(txn.value, 9)} PWR
-												</div>
-											</td>
-										</tr>
-									))}
-								</tbody>
-							</table>
-
-							<br />
-
-							<div>
-								<Pagination
-									metadata={paginationMetadata}
-									onPageChange={handlePageChange}
+				<div>
+					<form onSubmit={handleSubmit} className="w-full lg:w-[325px]">
+						<div className="field">
+							{/* input contianer */}
+							<div
+								className={`search-bar-nav-container  ${
+									errors.search ? ' !border-ared-500' : ''
+								}`}
+							>
+								<button
+									className="flex items-center gap-x-2"
+									disabled={!dirty || !touched || !formik.isValid}
+									type="submit"
+								>
+									<i className="fa-regular fa-magnifying-glass text-agrey-500"></i>
+								</button>
+								<input
+									className="search-bar-nav-input"
+									// placeholder="Search by Address | Txn Hash | Block "
+									placeholder="Search by Address / Txn Hash / Block / Token / Domain Name"
+									name="search"
+									value={values.search}
+									onChange={handleChange}
+									onBlur={handleBlur}
 								/>
 							</div>
-						</>
-					)}
+						</div>
+					</form>
 				</div>
 			</section>
+
+			{/* Tab content */}
+			<div className="mt-4">
+				{activeTab === 'transactions' ? (
+					<TransactionComponent address={address} /> // Render transactions component
+				) : (
+					<BlockComponent address={address} /> // Render blocks component
+				)}
+			</div>
 		</main>
 	);
 }
diff --git a/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx b/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
new file mode 100644
index 0000000..8dc90d6
--- /dev/null
+++ b/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
@@ -0,0 +1,336 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import { useState } from 'react';
+import { useFormik } from 'formik';
+import * as yup from 'yup';
+import { useQuery } from 'react-query';
+import { useRouter } from 'next/navigation';
+
+import TableSkeleton from 'src/components/internal/table-skeleton/table-skeleton.component';
+import Tooltip from 'src/components/internal/tooltip/tooltip.component';
+import Pagination from 'src/components/internal/pagination/pagination.component';
+import QuickPagination from 'src/components/internal/quick-pagination/quick-pagination.component';
+import ErrorComponent from 'src/components/error/error.component';
+
+import { BnToDec, shortenAddress, timeAgo } from 'src/shared/utils/formatters';
+import { copyToClipboard, isAddress, isHash } from 'src/shared/utils/functions';
+import QueryApi from 'src/shared/api/query-api';
+
+import QUERY_KEYS from 'src/static/query.keys';
+import ROUTES from 'src/static/router.data';
+
+const headers = [
+	{
+		id: 0,
+		name: 'Txn Hash',
+		thClass: 'xl:px-8 px-2',
+	},
+	{
+		id: 1,
+		name: 'Type',
+		thClass: 'xl:px-8 px-2',
+	},
+	{
+		id: 2,
+		name: 'Block',
+		thClass: 'xl:px-8 px-2',
+	},
+	{
+		id: 3,
+		name: 'Timestamp',
+		thClass: 'xl:px-8 px-2',
+	},
+	{
+		id: 4,
+		name: 'From',
+		thClass: 'xl:pl-8 pl-2 pr-2',
+	},
+	{
+		id: 5,
+		name: '', // Direction
+		thClass: ' px-2',
+	},
+	{
+		id: 6,
+		name: 'To',
+		thClass: 'xl:pr-8 pr-2 pl-2',
+	},
+	{
+		id: 7,
+		name: 'Value',
+		thClass: 'xl:px-8 px-2',
+	},
+];
+
+type TransactionComponentProps = {
+	address: string;
+};
+
+export default function TransactionComponent({ address }: TransactionComponentProps) {
+	// *~~*~~*~~ account balance ~~*~~*~~* //
+	const {
+		data: balanceData,
+		isLoading: balanceLoading,
+		isError: balanceError,
+	} = useQuery([QUERY_KEYS.balance, address], () => QueryApi.user.balance(address), {
+		staleTime: 1000 * 60 * 5,
+		cacheTime: 0,
+	});
+
+	// *~~*~~*~~ Txn history ~~*~~*~~* //
+
+	const [page, setPage] = useState<number>(1);
+	const [count, setCount] = useState<number>(10);
+
+	const [paginationMetadata, setPaginationMetadata] = useState({
+		currentPage: 1,
+		totalPages: 1,
+		startIndex: 0,
+		endIndex: 0,
+		totalItems: 0,
+		itemsPerPage: 0,
+		nextPage: 0,
+		previousPage: 0,
+	});
+
+	// txnHistory
+
+	const {
+		data: txnHistoryData,
+		isLoading: txnHistoryLoading,
+		isError: txnHistoryError,
+	} = useQuery(
+		[QUERY_KEYS.txn_history, address, page, count],
+		() => QueryApi.user.txnHistory(address, page, count),
+		{
+			staleTime: 1000 * 60 * 5,
+			cacheTime: 0,
+			onSuccess: (data) => {
+				setPaginationMetadata(data.metadata);
+			},
+		}
+	);
+
+	function handlePageChange(page: number) {
+		setPage(page);
+	}
+
+	if (
+		balanceError ||
+		(!balanceLoading && !balanceData) ||
+		txnHistoryError ||
+		(!txnHistoryLoading && !txnHistoryData)
+	)
+		return <ErrorComponent />;
+
+	return (
+		<section className="overflow-x-auto mt-12">
+			{/* Title */}
+			<div className="flex flex-col lg:flex-row lg:justify-between  lg:items-center gap-y-4">
+				{txnHistoryLoading ? (
+					<div className="skeleton-container space-y-4">
+						<div className="skeleton-title w-[300px]"></div>
+						<div className="skeleton-line w-[200px]"></div>
+					</div>
+				) : txnHistoryData.transactions.length === 0 ? null : (
+					<>
+						<div>
+							<h1 className="leading-[26px] px-2 py-1 dark:text-white text-abrandc-dark-grey font-medium">
+								More than {txnHistoryData.metadata.totalItems} transactions found
+							</h1>
+							<h2 className="text-xs px-2 py-1 dark:text-white text-abrandc-dark-grey font-medium">
+								(Showing the latest records)
+							</h2>
+						</div>
+						<div className="flex items-center justify-center gap-x-2 text-white">
+							<QuickPagination
+								metadata={paginationMetadata}
+								onPageChange={handlePageChange}
+							/>
+						</div>
+					</>
+				)}
+			</div>
+			{/* Table */}
+			<div className="w-full mt-5 overflow-x-auto scroll-sm">
+				{txnHistoryLoading ? (
+					<TableSkeleton />
+				) : txnHistoryData.transactions.length === 0 ? (
+					<div className="text-center">
+						<h1 className=" text-agrey-900 dark:text-white ">No transactions found</h1>
+					</div>
+				) : (
+					<>
+						<table className="table-auto bg-awhite w-full min-w-[950px]">
+							{/* table header */}
+							<thead className="sticky top-0">
+								<tr>
+									{headers.map((header, idx) => (
+										<th
+											className={`dark:text-white text-abrandc-dark-grey ${header.thClass} py-1`}
+											key={idx}
+										>
+											{header.name.length > 0 && (
+												<div className="flex justify-center items-center gap-x-2">
+													<div className="text-abrandc-dark-grey dark:text-white text-sm font-bold">
+														{header.name}
+													</div>
+													{/* <div className="text-agrey-500 dark:text-agrey-600">
+                                                                                                <i className="fa-sm far fa-info-circle" />
+                  </div> */}
+												</div>
+											)}
+										</th>
+									))}
+								</tr>
+							</thead>
+
+							{/* table body */}
+							<tbody>
+								{txnHistoryData.transactions.map((txn, idx) => (
+									<tr
+										key={txn.txnHash}
+										className={` ${
+											idx % 2 == 0
+												? ' dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
+												: 'bg-transparent'
+										}`}
+									>
+										{/* txn hash */}
+										<td className="xl:px-8 px-2 py-8">
+											<div className="flex gap-x-2 justify-start">
+												<div>
+													<Image
+														className="w-auto h-auto"
+														src="/icons/eye.svg"
+														width={20}
+														height={20}
+														alt=""
+													/>
+												</div>
+
+												<Link
+													href={`${ROUTES.transactions}/${txn.txnHash}`}
+													className="dark:text-ablue-300 text-ablue-200 font-medium"
+												>
+													{shortenAddress(txn.txnHash)}
+												</Link>
+											</div>
+										</td>
+
+										{/* type */}
+										<td className="px-2 py-8">
+											<div className="dark:text-ablue-300 text-ablue-200 font-medium text-center block">
+												{txn.txnType}
+											</div>
+										</td>
+
+										{/* block */}
+										<td className="xl:px-8 px-2 py-8">
+											<Link
+												href={`${ROUTES.blocks}/${txn.block}`}
+												className="dark:text-ablue-300 text-ablue-200 font-medium text-center block"
+											>
+												{txn.block}
+											</Link>
+										</td>
+
+										{/* time ago */}
+										<td className="xl:px-8 px-2 py-8">
+											<div className="dark:text-white text-abrandc-dark-grey font-normal text-center whitespace-nowrap">
+												{timeAgo(txn.timeStamp)}
+											</div>
+										</td>
+
+										{/* from */}
+										<td className="xl:pl-8 pl-2 pr-2 py-8">
+											<div className="flex gap-x-2 justify-center">
+												<Link
+													href="/"
+													className="dark:text-ablue-100 text-ablue-500 font-medium"
+												>
+													{shortenAddress(txn.from, 4)}
+												</Link>
+
+												<Tooltip
+													text="Copied to clipboard"
+													position="up"
+													trigger="click"
+												>
+													<button
+														className="text-agrey-500 dark:text-agrey-600"
+														onClick={() => copyToClipboard(txn.from)}
+													>
+														<i className="far fa-clone" />
+													</button>
+												</Tooltip>
+											</div>
+										</td>
+
+										{/* direction */}
+										<td className="px-2 py-8 flex justify-center">
+											<div className="w-6 h-6 bg-violet-100 dark:bg-agrey-800 rounded-full grid place-items-center">
+												<div className="text-agrey-500 dark:text-agrey-600">
+													<i className="fas fa-arrow-right fa-sm" />
+												</div>
+											</div>
+										</td>
+
+										{/* To */}
+										<td className="xl:pl-8 pl-2 pr-2 py-8">
+											<div className="flex gap-x-2 justify-center">
+												{isAddress(txn.to) ? (
+													<Link
+														href={`${ROUTES.address}/${txn.to}`}
+														className="dark:text-ablue-100 text-ablue-500 font-medium"
+													>
+														{shortenAddress(txn.to, 4)}
+													</Link>
+												) : (
+													<span className="dark:text-ablue-100 text-ablue-500 font-medium">
+														{txn.to}
+													</span>
+												)}
+
+												<Tooltip
+													text="Copied to clipboard"
+													position="up"
+													trigger="click"
+												>
+													<button
+														className="text-agrey-500 dark:text-agrey-600"
+														onClick={() => copyToClipboard(txn.to)}
+													>
+														<i className="far fa-clone" />
+													</button>
+												</Tooltip>
+											</div>
+										</td>
+
+										{/* value */}
+										<td className="xl:px-8 px-2 py-8">
+											<div className="dark:text-white text-abrandc-dark-grey font-normal text-center whitespace-nowrap">
+												{BnToDec(txn.value, 9)} PWR
+											</div>
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+
+						<br />
+
+						<div>
+							<Pagination
+								metadata={paginationMetadata}
+								onPageChange={handlePageChange}
+							/>
+						</div>
+					</>
+				)}
+			</div>
+		</section>
+	);
+}
diff --git a/src/app/(header-footer-layout)/nodes/layout.tsx b/src/app/(header-footer-layout)/nodes/layout.tsx
new file mode 100644
index 0000000..4f0cd17
--- /dev/null
+++ b/src/app/(header-footer-layout)/nodes/layout.tsx
@@ -0,0 +1,11 @@
+import { Metadata } from 'next';
+
+import AppConfig from 'src/static/app.config';
+
+export const metadata: Metadata = {
+	title: `Blocks | ${AppConfig.name} `,
+};
+
+export default function AccLayout({ children }: any) {
+	return children;
+}
diff --git a/src/app/(header-footer-layout)/nodes/nodes.scss b/src/app/(header-footer-layout)/nodes/nodes.scss
new file mode 100644
index 0000000..561290e
--- /dev/null
+++ b/src/app/(header-footer-layout)/nodes/nodes.scss
@@ -0,0 +1,46 @@
+.eye_tooltip_container {
+	@apply relative;
+	@apply cursor-pointer;
+
+	&:hover {
+		.tooltip {
+			@apply block;
+		}
+	}
+
+	.tooltip {
+		@apply hidden;
+		@apply absolute;
+		@apply bg-white;
+		@apply dark:bg-abrandc-dark-blackish;
+		@apply dark:shadow-white-lg-y-axis;
+
+
+
+		@apply top-1/2;
+		@apply -translate-y-1/2;
+		left: calc(100% + 8px);
+
+		// arrow
+		&::before {
+			content: '';
+			@apply absolute;
+			@apply border-solid;
+			@apply border-transparent;
+			@apply border-r-8;
+			@apply border-l-0;
+			@apply border-t-8;
+			@apply border-b-8;
+
+			@apply top-1/2;
+			@apply -translate-y-1/2;
+			@apply right-full;
+
+			@apply border-r-white;
+			@apply dark:border-r-abrandc-dark-blackish;
+
+			// border-right-color: ; // match the background color of the tooltip
+			// box-shadow: px 0 2px 5px rgba(0, 0, 0, 0.1);
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/app/(header-footer-layout)/nodes/page.tsx b/src/app/(header-footer-layout)/nodes/page.tsx
new file mode 100644
index 0000000..71e8227
--- /dev/null
+++ b/src/app/(header-footer-layout)/nodes/page.tsx
@@ -0,0 +1,288 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useQuery } from 'react-query';
+
+import TableSkeleton from 'src/components/internal/table-skeleton/table-skeleton.component';
+import QueryApi from 'src/shared/api/query-api';
+import QUERY_KEYS from 'src/static/query.keys';
+
+import Tooltip from 'src/components/internal/tooltip/tooltip.component';
+import StatBox from 'src/components/internal/stat-box/stat-box.component';
+import Pagination from 'src/components/internal/pagination/pagination.component';
+import QuickPagination from 'src/components/internal/quick-pagination/quick-pagination.component';
+import TransactionTooltipDetails from 'src/components/internal/transaction-tooltip-details/transaction-tooltip-details';
+import StatBoxSkeleton from 'src/components/skeletons/root/stat-box.skeleton';
+import ErrorComponent from 'src/components/error/error.component';
+
+import { BnToDec, shortenAddress, timeAgo } from 'src/shared/utils/formatters';
+
+import ROUTES from 'src/static/router.data';
+import { copyToClipboard, isAddress } from 'src/shared/utils/functions';
+
+import './nodes.scss';
+
+const headers = [
+	{
+		id: 0,
+		name: 'Node ID',
+		thClass: 'xl:px-8 px-2 ',
+		containerClass: 'justify-start pl-8',
+	},
+	{
+		id: 1,
+		name: 'Host',
+		thClass: 'xl:px-8 px-2',
+		containerClass: 'justify-center',
+	},
+	{
+		id: 2,
+		name: 'Total Voting Power',
+		thClass: 'xl:px-8 px-2',
+		containerClass: 'justify-center',
+	},
+	{
+		id: 3,
+		name: 'Earnings (PWR)',
+		thClass: 'xl:px-8 px-2',
+		containerClass: 'justify-center',
+	},
+	{
+		id: 4,
+		name: 'Blocks Submitted',
+		thClass: ' px-2',
+		containerClass: 'justify-center',
+	},
+];
+
+export default function Nodes() {
+	const [page, setPage] = useState<number>(1);
+	const [count, setCount] = useState<number>(10);
+
+	const [paginationMetadata, setPaginationMetadata] = useState({
+		currentPage: 1,
+		totalPages: 1,
+		startIndex: 0,
+		endIndex: 0,
+		totalItems: 0,
+		itemsPerPage: 0,
+		nextPage: 0,
+		previousPage: 0,
+	});
+
+	const {
+		data: nodesData,
+		isLoading: nodesLoading,
+		isError: nodesError,
+	} = useQuery(
+		[QUERY_KEYS.nodes_info, page, count],
+		() => QueryApi.nodes.nodesInfo(page, count),
+		{
+			staleTime: 1000 * 60 * 5,
+			cacheTime: 0,
+			onSuccess: (data) => {
+				setPaginationMetadata(data.metadata);
+			},
+		}
+	);
+
+	function handlePageChange(page: number) {
+		setPage(page);
+	}
+
+	if (nodesError || (!nodesLoading && !nodesData)) return <ErrorComponent />;
+
+	return (
+		<main className="container-2 mx-auto space-y-20">
+			<section className="space-y-4">
+				{/* Title */}
+				<h1 className="text-4xl font-bold dark:text-white text-abrandc-dark-grey px-2 py-1">
+					Nodes Tracker
+				</h1>
+
+				{/* stats */}
+				<div className="grid xl:grid-cols-3 grid-cols1 gap-4">
+					{/* Transactions */}
+					{nodesLoading ? (
+						<>
+							<StatBoxSkeleton />
+							<StatBoxSkeleton />
+							<StatBoxSkeleton />
+						</>
+					) : (
+						<>
+							<StatBox
+								title="TOTAL ACTIVE NODES"
+								valueComp={() => (
+									<>
+										<span>{nodesData.totalActiveNodes}</span>
+									</>
+								)}
+								icon="/icons/check.svg"
+							/>
+							<StatBox
+								title="TOTAL STANDBY NODES"
+								valueComp={() => <span>{nodesData.totalStandbyNodes}</span>}
+								icon="/icons/nodes.svg"
+							/>
+
+							<StatBox
+								title="TOTAL VOTING POWER"
+								valueComp={() => (
+									<span>
+										{BnToDec(nodesData.totalVotingPower.toString(), 9, 9)} PWR
+									</span>
+								)}
+								icon="/icons/pwr.svg"
+							/>
+						</>
+					)}
+				</div>
+			</section>
+
+			{/* Table */}
+			<section>
+				{/* Title */}
+				<div className="flex flex-col lg:flex-row lg:justify-between  lg:items-center gap-y-4">
+					{nodesLoading ? (
+						<div className="skeleton-container space-y-4">
+							<div className="skeleton-title w-[300px]"></div>
+							<div className="skeleton-line w-[200px]"></div>
+						</div>
+					) : (
+						<div>
+							<h1 className="leading-[26px] px-2 py-1 dark:text-white text-abrandc-dark-grey font-medium">
+								More than {nodesData.metadata.totalItems} Nodes found
+							</h1>
+							<h2 className="text-xs px-2 py-1 dark:text-white text-abrandc-dark-grey font-medium">
+								(Showing the latest records)
+							</h2>
+						</div>
+					)}
+
+					<div className="flex items-center justify-center gap-x-2 text-white">
+						<QuickPagination
+							metadata={paginationMetadata}
+							onPageChange={handlePageChange}
+						/>
+					</div>
+				</div>
+
+				{/* Table */}
+				<div className="w-full mt-5 overflow-x-auto scroll-sm">
+					{nodesLoading ? (
+						<TableSkeleton />
+					) : (
+						<table className="table-auto bg-awhite w-full min-w-[900px] ">
+							{/* table header */}
+							<thead className="sticky top-0 ">
+								<tr>
+									{headers.map((header, idx) => (
+										<th
+											className={`dark:text-white text-abrandc-dark-grey ${header.thClass} py-1`}
+											key={idx}
+										>
+											{header.name.length > 0 && (
+												<div
+													className={`flex  items-center gap-x-2 ${header.containerClass}`}
+												>
+													<h1 className="text-abrandc-dark-grey dark:text-white text-sm font-bold">
+														{header.name}
+													</h1>
+													{/* <div className="text-agrey-500 dark:text-agrey-600">
+													<i className="fa-sm far fa-info-circle" />
+												</div> */}
+												</div>
+											)}
+										</th>
+									))}
+								</tr>
+							</thead>
+
+							{/* table body */}
+							<tbody>
+								{nodesData.nodes.map((node, idx) => (
+									<tr
+										key={node.address}
+										className={` ${
+											idx % 2 == 0
+												? ' dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
+												: 'bg-transparent'
+										}`}
+									>
+										{/* txn hash */}
+										<td className="xl:px-8 px-2 py-8">
+											<div className="flex gap-x-2 justify-start">
+												<Link
+													href={`${ROUTES.transactions}/${node.address}`}
+													className="dark:text-ablue-100 text-ablue-500 font-medium"
+												>
+													{shortenAddress(node.address)}
+												</Link>
+												<Tooltip
+													text="Copied to clipbloard"
+													position="up"
+													trigger="click"
+												>
+													<button
+														className="text-agrey-500 dark:text-agrey-600"
+														onClick={() =>
+															copyToClipboard(node.address)
+														}
+													>
+														<i className="far fa-clone" />
+													</button>
+												</Tooltip>
+											</div>
+										</td>
+
+										{/* block */}
+										<td className="xl:px-8 px-2 py-8">
+											<Link	
+												href={`${ROUTES.blocks}/${node.host}`}
+												className="dark:text-white  text-abrandc-dark-grey font-medium text-center block"
+											>
+												{node.host}
+											</Link>
+										</td>
+
+										{/* time ago */}
+										<td className="xl:px-8 px-2 py-8">
+											<div className="flex justify-center items-center">
+												<h1 className="dark:bg-agrey-800 bg-ghostly_grey-50 rounded-lg dark:text-white  text-abrandc-dark-grey text-sm py-1 px-2 text-center w-auto">
+													{node.votingPower}%
+												</h1>
+											</div>
+										</td>
+
+										{/* from */}
+										<td className="xl:px-8 px-2 py-8">
+											<div className="flex justify-center items-center">
+												<h1 className="dark:bg-agrey-800 bg-ghostly_grey-50 rounded-lg dark:text-white  text-abrandc-dark-grey text-sm py-1 px-2 text-center w-auto">
+													{node.earnings}
+												</h1>
+											</div>
+										</td>
+
+										{/* direction */}
+										<td className="px-2 py-8 flex justify-center">
+											<div className="dark:text-white  text-abrandc-dark-grey">
+												{node.blocksSubmitted}
+											</div>
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					)}
+				</div>
+
+				<div>
+					<Pagination metadata={paginationMetadata} onPageChange={handlePageChange} />
+				</div>
+			</section>
+		</main>
+	);
+}
diff --git a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
index 79698dc..2653085 100644
--- a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
+++ b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
@@ -19,6 +19,7 @@ import QUERY_KEYS from 'src/static/query.keys';
 import ROUTES from 'src/static/router.data';
 
 import 'src/components/internal/checkbox/checkbox.scss';
+import test from 'node:test';
 
 type TransactionDetailsProps = {
 	params: {
@@ -51,7 +52,15 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 	}
 
 	if (txnError || (!txnLoading && !txnData)) return <ErrorComponent />;
-
+	const object = {
+		ip: '12121321312',
+		port: 123,
+		username: 'admin',
+		password: 'admin',
+		test: 'test',
+		test2: 'test',
+		test3: 'test',
+	};
 	return (
 		<div className="container-2 mx-auto dark:text-white text-abrandc-dark-grey">
 			{/* Title */}
@@ -130,14 +139,57 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 									<i className="fa-sm far fa-info-circle text-agrey-500 dark:text-agrey-600" />
 								</Tooltip> */}
 								</div>
-								<div className="flex items-center dark:bg-gray-800 text-green-500 text-bold border border-green-500 rounded-lg px-2 ">
-									<svg width="22" height="22" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<circle cx="9" cy="9" r="6.75" fill="#00B85B" />
-										<path d="M6 9.34517L7.95126 11.2206C7.99202 11.2598 8.05807 11.2598 8.09884 11.2206L12.75 6.75" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
-									</svg>
-
-									<span className="ml-2 py-1">Success</span>
-								</div>
+								{txnData.success ? (
+									// Success Status
+									<div className="flex items-center dark:bg-gray-800 text-green-500 text-bold border border-green-500 rounded-lg px-2">
+										<svg
+											width="22"
+											height="22"
+											viewBox="0 0 18 18"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<circle cx="9" cy="9" r="6.75" fill="#00B85B" />
+											<path
+												d="M6 9.34517L7.95126 11.2206C7.99202 11.2598 8.05807 11.2598 8.09884 11.2206L12.75 6.75"
+												stroke="white"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											/>
+										</svg>
+										<span className="ml-2 py-1 font-medium">Success</span>
+									</div>
+								) : (
+									// Fail Status with Error Message
+									<div className="flex items-center justify-center gap-4">
+										<div className="flex items-center dark:bg-gray-800 text-ared-400 text-bold border border-ared-400 rounded-lg px-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="22"
+												height="22"
+												viewBox="0 0 18 18"
+												fill="none"
+											>
+												<circle cx="9" cy="9" r="6.75" fill="#F65251" />
+												<path
+													fill-rule="evenodd"
+													clip-rule="evenodd"
+													d="M6.11461 6.11461C6.26742 5.9618 6.51518 5.9618 6.668 6.11461L9 8.44661L11.332 6.11461C11.4848 5.9618 11.7326 5.9618 11.8854 6.11461C12.0382 6.26742 12.0382 6.51518 11.8854 6.668L9.55339 9L11.8854 11.332C12.0382 11.4848 12.0382 11.7326 11.8854 11.8854C11.7326 12.0382 11.4848 12.0382 11.332 11.8854L9 9.55339L6.668 11.8854C6.51518 12.0382 6.26742 12.0382 6.11461 11.8854C5.9618 11.7326 5.9618 11.4848 6.11461 11.332L8.44661 9L6.11461 6.668C5.9618 6.51518 5.9618 6.26742 6.11461 6.11461Z"
+													fill="white"
+												/>
+											</svg>
+											<span className="ml-2 py-1 font-medium">Fail</span>
+										</div>
+										{/* Error message if it exists */}
+										{txnData.errorMessage && (
+											<div className="">
+												<p className="text-ared-400 font-medium">
+													{txnData.errorMessage}
+												</p>
+											</div>
+										)}
+									</div>
+								)}
 							</div>
 
 							{/* Block */}
@@ -152,7 +204,22 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 								</div>
 								<div className="flex gap-x-2">
 									<div className="flex items-center gap-x-2 ">
-										<i className="fas fa-check-circle text-ablue-500 dark:text-ablue-100 fa-lg" />
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="24"
+											height="24"
+											viewBox="0 0 24 24"
+											fill="none"
+										>
+											<circle cx="12" cy="12" r="9" fill="#112FF8" />
+											<path
+												d="M8 12.4602L10.6017 14.9608C10.656 15.013 10.7441 15.0131 10.7985 14.9608L17 9"
+												stroke="white"
+												stroke-width="1.5"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											/>
+										</svg>{' '}
 										<Link
 											href={`${ROUTES.blocks}/${txnData.blockNumber}`}
 											className="dark:text-ablue-100 text-ablue-500 font-medium text-sm"
@@ -318,7 +385,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 
 							{/* Data (Hex) */}
 							<div className="lg:flex space-y-2">
-								<div className="flex items-center gap-x-2 min-w-[300px]">
+								<div className="flex items-start gap-x-2 min-w-[300px]">
 									<h1 className="text-agrey-500 dark:text-agrey-600 text-sm">
 										Data (Hex)
 									</h1>
@@ -326,21 +393,60 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 									<i className="fa-sm far fa-info-circle text-agrey-500 dark:text-agrey-600" />
 								</Tooltip> */}
 								</div>
-								<div className="flex items-center gap-x-2 flex-grow min-w-0">
+								<div className="flex items-center justify-between gap-x-2 flex-grow min-w-0">
 									<h1 className="leading-[24px] break-all text-sm">
-										{txnData.data}
+										{txnData.data || '0x'}
 									</h1>
 									<Tooltip
 										text="Copied to clipboard!"
 										position="up"
 										trigger="click"
 									>
-										<button onClick={() => copyToClipboard(txnData.data)}>
+										<button
+											onClick={() => copyToClipboard(txnData.data || '0x')}
+										>
 											<i className="far fa-clone text-agrey-500 dark:text-agrey-600" />
 										</button>
 									</Tooltip>
 								</div>
 							</div>
+
+							{/* Extra Data */}
+
+							{txnData.extraData ? (
+								<div className="lg:flex space-y-2">
+									<div className="flex items-start gap-x-2 min-w-[300px]">
+										<h1 className="text-agrey-500 dark:text-agrey-600 text-sm">
+											Extra Data (JSON)
+										</h1>
+										{/* <Tooltip text="text" large position="right">
+										<i className="fa-sm far fa-info-circle text-agrey-500 dark:text-agrey-600" />
+									</Tooltip> */}
+									</div>
+									<div className="flex items-start justify-between gap-x-2 flex-grow min-w-0">
+										<pre className="leading-[24px] text-sm">
+											<code>
+												{JSON.stringify(txnData.extraData, null, 2)}
+											</code>
+										</pre>
+									</div>
+									<Tooltip
+										text="Copied to clipboard!"
+										position="up"
+										trigger="click"
+									>
+										<button
+											onClick={() => {
+												copyToClipboard(
+													JSON.stringify(txnData.extraData, null, 2)
+												);
+											}}
+										>
+											<i className="far fa-clone text-agrey-500 dark:text-agrey-600" />
+										</button>
+									</Tooltip>
+								</div>
+							) : null}
 						</section>
 					)}
 				</div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d5b458d..5d16d60 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,13 +23,14 @@ import { isAddress, isHash } from 'src/shared/utils/functions';
 import QueryApi from 'src/shared/api/query-api';
 import QUERY_KEYS from 'src/static/query.keys';
 import ROUTES from 'src/static/router.data';
+import TransactionChart from 'src/components/internal/chart/chart.component';
 
 function StatBox({ title, valueComp, icon }: { title: string; valueComp: any; icon: any }) {
 	return (
 		<div className="flex items-center gap-x-4 bg-abrandc-light-grey dark:bg-agrey-900 rounded-xl p-4 w-full">
 			<Image src={icon} width={28} height={28} alt="PWR Icon" />
 			<div className="flex flex-col gap-y-2">
-				<h1 className="text-agrey-600 text-sm font-medium leading-[24px]">{title}</h1>
+				<h1 className="text-agrey-600 text-sm font-medium	 leading-[24px]">{title}</h1>
 				<h2 className="text-base font-bold dark:text-white text-abrandc-dark-grey">
 					{valueComp()}
 				</h2>
@@ -88,6 +89,8 @@ export default function Home() {
 
 	if (infoError || (!infoLoading && !infoData)) return <ErrorComponent />;
 
+	console.log('sevenDaysTxn', infoData?.sevenDaysTxn);
+
 	return (
 		<>
 			<HeaderComponent />
@@ -105,8 +108,9 @@ export default function Home() {
 								<div className="field">
 									{/* input contianer */}
 									<div
-										className={`search-bar-container  ${formik.errors.search ? ' !border-ared-500' : ''
-											}`}
+										className={`search-bar-container  ${
+											formik.errors.search ? ' !border-ared-500' : ''
+										}`}
 									>
 										{/* Filter */}
 										{/* <div className="">
@@ -177,10 +181,11 @@ export default function Home() {
 												<>
 													<span>${infoData.price / 100}</span>
 													<span
-														className={`font-medium  pl-2 pr-2 ${infoData.priceChange > 0
-															? 'text-green-500'
-															: 'text-ared-400'
-															}`}
+														className={`font-medium  pl-2 pr-2 ${
+															infoData.priceChange > 0
+																? 'text-green-500'
+																: 'text-ared-400'
+														}`}
 													>
 														{infoData.priceChange}%
 													</span>
@@ -263,20 +268,12 @@ export default function Home() {
 								)}
 							</div>
 
-							{/* Graph */}
-							<div className="xl:col-span-3">
-								<div className="w-9/10 h-[192px] bg-abrandc-light-grey dark:bg-agrey-900 rounded-xl p-4 space-y-2">
-									<h1 className="text-agrey-600 text-sm font-medium ">
-										TRANSACTION HISTORY IN 14 DAYS
-									</h1>
-
-									<div className="p-4 w-full h-full  rounded-xl  flex items-center justify-center">
-										{/* <Chart /> */}
-										<img src="/graph.svg" alt="" />
-
-										{/* <Image className="" src="/graph.svg" alt="" layout="fill" /> */}
-									</div>
-								</div>
+							<div className="xl:col-span-3 ">
+								{infoData?.sevenDaysTxn ? (
+									<TransactionChart data={infoData?.sevenDaysTxn} />
+								) : (
+									<p>Loading transaction history...</p>
+								)}
 							</div>
 						</div>
 
@@ -293,10 +290,11 @@ export default function Home() {
 										[1, 1, 1, 1, 1].map((item, idx) => (
 											<div
 												key={idx}
-												className={`block_box flex justify-between items-center gap-x-2 lg:gap-x-6 p-4 ${idx % 2 === 0
-													? 'dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
-													: ''
-													}`}
+												className={`block_box flex justify-between items-center gap-x-2 lg:gap-x-6 p-4 ${
+													idx % 2 === 0
+														? 'dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
+														: ''
+												}`}
 											>
 												<LatestSkeleton key={idx} />
 											</div>
@@ -327,10 +325,11 @@ export default function Home() {
 										[1, 2, 3, 4, 5].map((_, idx) => (
 											<div
 												key={idx}
-												className={`txn_box flex justify-between items-center gap-x-2 lg:gap-x-6 p-4 ${idx % 2 === 0
-													? 'dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
-													: ''
-													}`}
+												className={`txn_box flex justify-between items-center gap-x-2 lg:gap-x-6 p-4 ${
+													idx % 2 === 0
+														? 'dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
+														: ''
+												}`}
 											>
 												<LatestSkeleton key={idx} />
 											</div>
diff --git a/src/components/internal/chart/chart.component.tsx b/src/components/internal/chart/chart.component.tsx
new file mode 100644
index 0000000..54c2196
--- /dev/null
+++ b/src/components/internal/chart/chart.component.tsx
@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { ApexOptions } from 'apexcharts';
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
+type TransactionData = {
+	[key: number]: number;
+};
+
+type TransactionChartProps = {
+	data: TransactionData;
+};
+
+const TransactionChart = ({ data }: TransactionChartProps) => {
+	const [seriesData, setSeriesData] = useState<number[]>([]);
+	const [categories, setCategories] = useState<string[]>([]);
+
+	console.log('data', data);
+
+	useEffect(() => {
+		if (data && Object.keys(data).length > 0) {
+			const dates = Object.keys(data).map((timestamp) => {
+				const date = new Date(parseInt(timestamp) * 1000);
+				return date.toLocaleDateString('en-US', {
+					month: 'short', // Only display month
+					day: 'numeric', // Only display day number
+				});
+			});
+			const values = Object.values(data);
+
+			setCategories(dates);
+			setSeriesData(values);
+		}
+	}, [data]);
+
+	const options: ApexOptions = {
+		chart: {
+			type: 'area',
+			toolbar: { show: false },
+			zoom: { enabled: false },
+		},
+		dataLabels: { enabled: false },
+		stroke: { curve: 'smooth', width: 2, colors: ['#112FF8'] }, // Updated line color to #112FF8
+		grid: { show: false },
+		xaxis: {
+			type: 'category',
+			categories,
+			labels: {
+				show: true,
+				style: {
+					colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
+					fontSize: '12px', // Adjust font size if necessary
+					fontWeight: 'bold',
+				},
+			}, // Show x-axis labels
+			axisBorder: { show: false },
+			axisTicks: { show: false },
+		},
+		yaxis: {
+			show: true, // Show y-axis labels
+			labels: {
+				formatter: (value) => (value ? `${value / 1000}k` : '0k'), // Ensure value is valid
+				style: {
+					colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
+					fontSize: '12px', // Adjust font size if necessary
+					fontWeight: 'bold',
+				},
+			},
+		},
+		tooltip: {
+			enabled: true,
+			x: {
+				formatter: (value) => (value ? value.toString() : 'N/A'), // Fallback if value is undefined
+			},
+		},
+		markers: {
+			size: 0, // No visible points on the chart
+		},
+		fill: {
+			type: 'gradient',
+			gradient: {
+				shade: 'light',
+				type: 'vertical',
+				shadeIntensity: 1,
+				gradientToColors: ['rgba(224, 223, 234, 0)'], // Transparent part of the gradient
+				inverseColors: false,
+				opacityFrom: 1, // Full opacity at the start
+				opacityTo: 0, // Fully transparent at the end
+				stops: [0, 100],
+				colorStops: [
+					{
+						offset: 0,
+						color: '#CCCCFE', // Start color (matching #CCCCFE)
+						opacity: 1,
+					},
+					{
+						offset: 100,
+						color: 'rgba(224, 223, 234, 0)', // End color
+						opacity: 0,
+					},
+				],
+			},
+		},
+		colors: ['#112FF8'], // Line color to #112FF8
+	};
+
+	const series = [
+		{
+			name: 'Transactions',
+			data: seriesData.length ? seriesData : [0], // Ensure the seriesData is not empty
+		},
+	];
+
+	return (
+		<div className="w-[400px] h-48 bg-agrey-50 dark:bg-agrey-900 p-4 rounded-md">
+			<h1 className="text-agrey-600 text-sm font-medium leading-normal uppercase">
+				Transaction History in 14 Days
+			</h1>
+			<div className="">
+				<Chart options={options} series={series} type="area" height={150} />
+			</div>
+		</div>
+	);
+};
+
+export default TransactionChart;
diff --git a/src/components/internal/stat-box/stat-box.component.tsx b/src/components/internal/stat-box/stat-box.component.tsx
index 48f5199..7675956 100644
--- a/src/components/internal/stat-box/stat-box.component.tsx
+++ b/src/components/internal/stat-box/stat-box.component.tsx
@@ -1,18 +1,29 @@
 import Image from 'next/image';
+import Tooltip from '../tooltip/tooltip.component';
 
 type StatBoxProps = {
 	title: string;
 	valueComp: any;
-	icon?: string ;
+	icon?: string;
+	tooltipText?: string;
 };
 
-function StatBox({ title, valueComp, icon }: StatBoxProps) {
+function StatBox({ title, valueComp, icon, tooltipText }: StatBoxProps) {
 	return (
 		<div className="flex items-center gap-x-4 bg-abrandc-light-grey dark:bg-agrey-900 rounded-xl p-4 w-full">
 			{icon && <Image src={icon} width={28} height={28} alt="" />}
 
 			<div className="flex flex-col gap-y-2">
-				<h1 className="text-agrey-600 text-sm font-medium leading-[24px]">{title}</h1>
+				<div className="">
+					<h1 className="text-agrey-600 text-sm font-medium leading-[24px]">{title}</h1>
+					{tooltipText && (
+						<Tooltip text={tooltipText} position="up" trigger="hover">
+							<button className="text-agrey-500 dark:text-agrey-600">
+								<i className="fa-sm far fa-info-circle" />
+							</button>
+						</Tooltip>
+					)}
+				</div>
 				<h2 className="text-base font-bold dark:text-white text-abrandc-dark-grey">
 					{valueComp()}
 				</h2>
diff --git a/src/layout/header/searchbar-header.component.tsx b/src/layout/header/searchbar-header.component.tsx
index 13502e2..ed3f1cd 100644
--- a/src/layout/header/searchbar-header.component.tsx
+++ b/src/layout/header/searchbar-header.component.tsx
@@ -160,10 +160,12 @@ export default function SearchBarHeaderComponent() {
 
 				{/* desktop menu */}
 				<div className="hidden md:flex items-center gap-x-6  h-full">
-                <div className="h-full grid place-items-center">
+					<div className="h-full grid place-items-center">
 						<Link
 							href={ROUTES.transactions}
-							className={`navbar-link ${pathname === ROUTES.transactions ? 'active' : ''}`}
+							className={`navbar-link ${
+								pathname === ROUTES.transactions ? 'active' : ''
+							}`}
 						>
 							Transactions
 						</Link>
@@ -178,7 +180,6 @@ export default function SearchBarHeaderComponent() {
 						</Link>
 					</div>
 
-
 					{/* dropdown */}
 					{/* <div className="navbar-dropdown relative  h-full grid place-items-center cursor-pointer">
 						<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 ">
@@ -221,7 +222,7 @@ export default function SearchBarHeaderComponent() {
 										disabled={!dirty || !touched || !formik.isValid}
 										type="submit"
 									>
-										<i className="fa-xs fas fa-search text-agrey-500"></i>
+										<i className="fa-regular fa-magnifying-glass text-agrey-500"></i>
 									</button>
 									<input
 										className="search-bar-nav-input"
@@ -319,13 +320,13 @@ export default function SearchBarHeaderComponent() {
 							>
 								<div>Transactions</div>
 							</Link>
-                            <Link
+							<Link
 								href={ROUTES.blocks}
 								className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
 							>
 								<div>Blocks</div>
 							</Link>
-                            
+
 							{/* <div>
 								<button
 									className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2  justify-between w-full"
diff --git a/src/shared/api/api.ts b/src/shared/api/api.ts
index 3593212..a59e7f1 100644
--- a/src/shared/api/api.ts
+++ b/src/shared/api/api.ts
@@ -1,5 +1,4 @@
 const _baseUrl = process.env.NEXT_PUBLIC_API_URL;
-
 const api = {
 	baseUrl: _baseUrl,
 
@@ -23,6 +22,12 @@ const api = {
 			`${_baseUrl}/transactionHistory/?address=${address}&count=${count}&page=${page}`,
 
 		balance: (address: string) => `${_baseUrl}/balanceOf/?userAddress=${address}`,
+		blocksCreated: (address: string, page: number, count: number) =>
+			`${_baseUrl}/blocksCreated/?validatorAddress=${address}&page=${page}&count=${count}`,
+	},
+	nodes: {
+		nodesInfo: (page: number, count: number) =>
+			`${_baseUrl}/nodesInfo/?page=${page}&count=${count}`,
 	},
 };
 
diff --git a/src/shared/api/query-api.ts b/src/shared/api/query-api.ts
index c0a13e7..d7db5ef 100644
--- a/src/shared/api/query-api.ts
+++ b/src/shared/api/query-api.ts
@@ -23,10 +23,13 @@ import {
 	BlockDetailsSuccessResponse,
 } from './responses/blocks/block-details.response';
 import {
+	AddressBlocksCreatedHistoryResponse,
+	AddressBlocksCreatedHistorySuccessResponse,
 	AddressTxnHistoryResponse,
 	AddressTxnHistorySuccessResponse,
 } from './responses/addresss/txn-history.response';
 import { BalanceResponse, BalanceSuccessResponse } from './responses/addresss/balance.response';
+import { NodesSuccessResponse } from './responses/nodes/nodes-responses';
 
 const QueryApi = {
 	blocks: {
@@ -120,6 +123,31 @@ const QueryApi = {
 
 			return res.data;
 		},
+
+		blocksCreated: async (
+			address: string,
+			count: number,
+			page: number
+		): Promise<AddressBlocksCreatedHistorySuccessResponse> => {
+			const url = api.user.blocksCreated(address, count, page);
+			const res = await axios<AddressBlocksCreatedHistorySuccessResponse>({
+				method: 'get',
+				url,
+			});
+
+			return res.data;
+		},
+	},
+	nodes: {
+		nodesInfo: async (page: number, count: number): Promise<NodesSuccessResponse> => {
+			const url = api.nodes.nodesInfo(page, count);
+			const res = await axios<NodesSuccessResponse>({
+				method: 'get',
+				url,
+			});
+
+			return res.data;
+		},
 	},
 };
 
diff --git a/src/shared/api/responses/addresss/txn-history.response.ts b/src/shared/api/responses/addresss/txn-history.response.ts
index 5f96b90..d200729 100644
--- a/src/shared/api/responses/addresss/txn-history.response.ts
+++ b/src/shared/api/responses/addresss/txn-history.response.ts
@@ -43,3 +43,35 @@ type AddressTxnHistoryFailureResponse = {
 export type AddressTxnHistoryResponse =
 	| AddressTxnHistorySuccessResponse
 	| AddressTxnHistoryFailureResponse;
+
+type Block = {
+	timeStamp: number;
+	blockHeight: number;
+	txnsCount: number;
+	blockReward: number;
+	error: boolean;
+	blockSubmitter: string;
+};
+export type AddressBlocksCreatedHistorySuccessResponse = {
+	//
+	metadata: {
+		previousPage: number;
+		currentPage: number;
+		nextPage: number;
+		totalPages: number;
+		totalItems: number;
+		itemsPerPage: number;
+		startIndex: number;
+		endIndex: number;
+	};
+
+	//
+	blocks: Block[];
+};
+type AddressBlocksCreatedHistoryFailureResponse = {
+	message: string;
+};
+
+export type AddressBlocksCreatedHistoryResponse =
+	| AddressBlocksCreatedHistorySuccessResponse
+	| AddressBlocksCreatedHistoryFailureResponse;
diff --git a/src/shared/api/responses/explorer-info.response.ts b/src/shared/api/responses/explorer-info.response.ts
index e98dbe9..ce0359e 100644
--- a/src/shared/api/responses/explorer-info.response.ts
+++ b/src/shared/api/responses/explorer-info.response.ts
@@ -19,6 +19,10 @@ export type ExplorerSuccessResponse = {
 
 	blocks: Block[];
 
+	sevenDaysTxn: {
+		[key: string]: number;
+	};
+
 	txns: Txn[];
 };
 
diff --git a/src/shared/api/responses/nodes/nodes-responses.ts b/src/shared/api/responses/nodes/nodes-responses.ts
new file mode 100644
index 0000000..9fc6868
--- /dev/null
+++ b/src/shared/api/responses/nodes/nodes-responses.ts
@@ -0,0 +1,30 @@
+type Node = {
+	votingPower: number;
+	earnings: number;
+	address: string;
+	blocksSubmitted: number;
+	host: string;
+};
+
+export type NodesSuccessResponse = {
+	totalStandbyNodes: number;
+	totalVotingPower: number;
+	totalActiveNodes: number;
+	nodes: Node[];
+	metadata: {
+		currentPage: number;
+		endIndex: number;
+		itemsPerPage: number;
+		nextPage: number;
+		previousPage: number;
+		startIndex: number;
+		totalItems: number;
+		totalPages: number;
+	};
+};
+
+type NodesFailureResponse = {
+	message: string;
+};
+
+export type LatestBlocksResponse = NodesSuccessResponse | NodesFailureResponse;
diff --git a/src/shared/api/responses/txn/txn-details.response.ts b/src/shared/api/responses/txn/txn-details.response.ts
index 61e8b10..400bd7c 100644
--- a/src/shared/api/responses/txn/txn-details.response.ts
+++ b/src/shared/api/responses/txn/txn-details.response.ts
@@ -13,6 +13,9 @@ export type TransactionDetailsSuccessResponse = {
 	txnFeeInUsd: string;
 	txnFee: string;
 	value: string;
+	success: boolean;
+	errorMessage: string;
+	extraData: Object;
 };
 
 type TransactionDetailFailureResponse = {
diff --git a/src/shared/utils/formatters.ts b/src/shared/utils/formatters.ts
index 29b265f..976fd20 100644
--- a/src/shared/utils/formatters.ts
+++ b/src/shared/utils/formatters.ts
@@ -36,7 +36,10 @@ export default function dateToText(timestamp: number) {
 	return formattedTimestamp;
 }
 
-export function shortenAddress(address: string, chars = 4): string {
+export function shortenAddress(address: string | undefined, chars = 4): string {
+	if (!address || address.length < chars) {
+		return address || '';
+	}
 	return `${address.substring(0, chars + 2)}...${address.substring(address.length - chars)}`;
 }
 
diff --git a/src/static/query.keys.ts b/src/static/query.keys.ts
index 5f5f85f..367f230 100644
--- a/src/static/query.keys.ts
+++ b/src/static/query.keys.ts
@@ -10,9 +10,13 @@ const QUERY_KEYS = {
 	block_txns: 'block_txns',
 	block_details: 'block_details',
 
+	// NODES
+	nodes_info: 'nodes_info',
+	
 	//USER
 	txn_history: 'txn_history',
 	balance: 'balance',
+	blocks_Created: 'blocks_Created',
 };
 
 export default QUERY_KEYS;

From c4394b06ce5adc0ba8b6a0b941f2c7cb0ef5f5b1 Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Thu, 5 Sep 2024 19:18:43 +0300
Subject: [PATCH 08/14] finish nodes tracker

---
 .../address/[address]/address.scss            | 46 +++++++++++++++
 .../address/[address]/blocks.component.tsx    | 24 ++++----
 .../address/[address]/page.tsx                | 27 ++++++---
 .../[address]/transcations.component.tsx      | 58 +++++++++++++------
 src/app/(header-footer-layout)/nodes/page.tsx | 13 +++--
 src/app/page.tsx                              |  9 ++-
 .../internal/chart/chart.component.tsx        | 18 +++---
 .../internal/stat-box/stat-box.component.tsx  |  4 +-
 .../skeletons/root/chart-skeleton.tsx         | 16 +++++
 9 files changed, 161 insertions(+), 54 deletions(-)
 create mode 100644 src/app/(header-footer-layout)/address/[address]/address.scss
 create mode 100644 src/components/skeletons/root/chart-skeleton.tsx

diff --git a/src/app/(header-footer-layout)/address/[address]/address.scss b/src/app/(header-footer-layout)/address/[address]/address.scss
new file mode 100644
index 0000000..561290e
--- /dev/null
+++ b/src/app/(header-footer-layout)/address/[address]/address.scss
@@ -0,0 +1,46 @@
+.eye_tooltip_container {
+	@apply relative;
+	@apply cursor-pointer;
+
+	&:hover {
+		.tooltip {
+			@apply block;
+		}
+	}
+
+	.tooltip {
+		@apply hidden;
+		@apply absolute;
+		@apply bg-white;
+		@apply dark:bg-abrandc-dark-blackish;
+		@apply dark:shadow-white-lg-y-axis;
+
+
+
+		@apply top-1/2;
+		@apply -translate-y-1/2;
+		left: calc(100% + 8px);
+
+		// arrow
+		&::before {
+			content: '';
+			@apply absolute;
+			@apply border-solid;
+			@apply border-transparent;
+			@apply border-r-8;
+			@apply border-l-0;
+			@apply border-t-8;
+			@apply border-b-8;
+
+			@apply top-1/2;
+			@apply -translate-y-1/2;
+			@apply right-full;
+
+			@apply border-r-white;
+			@apply dark:border-r-abrandc-dark-blackish;
+
+			// border-right-color: ; // match the background color of the tooltip
+			// box-shadow: px 0 2px 5px rgba(0, 0, 0, 0.1);
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx b/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
index 90c012d..cbaab99 100644
--- a/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
@@ -51,15 +51,21 @@ const headers = [
 
 type BlockComponentProps = {
 	address: string;
+	page: number;
+	setPage: (page: number) => void;
+	count: number;
+	setCount: (count: number) => void;
 };
 
-export default function BlockComponent({ address }: BlockComponentProps) {
+export default function BlockComponent({
+	address,
+	page,
+	setPage,
+	count,
+	setCount,
+}: BlockComponentProps) {
 	// *~~*~~*~~ Txn history ~~*~~*~~* //
 
-	const [page, setPage] = useState<number>(1);
-	const [count, setCount] = useState<number>(10);
-
-	
 	const [paginationMetadata, setPaginationMetadata] = useState({
 		currentPage: 1,
 		totalPages: 1,
@@ -81,7 +87,6 @@ export default function BlockComponent({ address }: BlockComponentProps) {
 		[QUERY_KEYS.blocks_Created, address, page, count],
 		() => QueryApi.user.blocksCreated(address, page, count),
 		{
-			staleTime: 1000 * 60 * 5,
 			cacheTime: 0,
 			onSuccess: (data) => {
 				setPaginationMetadata(data.metadata);
@@ -89,6 +94,8 @@ export default function BlockComponent({ address }: BlockComponentProps) {
 		}
 	);
 
+	console.log('BlockComponentProps', blockData?.metadata);
+
 	function handlePageChange(page: number) {
 		setPage(page);
 	}
@@ -245,10 +252,7 @@ export default function BlockComponent({ address }: BlockComponentProps) {
 			</div>
 
 			<div>
-				<Pagination
-					metadata={paginationMetadata} // Pass updated metadata
-					onPageChange={(page: number) => setPage(page)}
-				/>
+				<Pagination metadata={paginationMetadata} onPageChange={handlePageChange} />
 			</div>
 		</section>
 	);
diff --git a/src/app/(header-footer-layout)/address/[address]/page.tsx b/src/app/(header-footer-layout)/address/[address]/page.tsx
index 60736fc..e5abbcc 100644
--- a/src/app/(header-footer-layout)/address/[address]/page.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/page.tsx
@@ -35,7 +35,9 @@ export default function AddressPage({ params }: AddressPageProps) {
 	const address = params.address;
 	const { push } = useRouter();
 
-	const [activeTab, setActiveTab] = useState('transactions'); // Manage active tab state
+	const [activeTab, setActiveTab] = useState('transactions');
+	const [page, setPage] = useState<number>(1);
+	const [count, setCount] = useState<number>(10);
 
 	const handleTabChange = (tab: string) => {
 		setActiveTab(tab);
@@ -86,11 +88,6 @@ export default function AddressPage({ params }: AddressPageProps) {
 
 	// *~~*~~*~~ Txn history ~~*~~*~~* //
 
-	const [page, setPage] = useState<number>(1);
-	const [count, setCount] = useState<number>(10);
-
-	// txnHistory
-
 	const {
 		data: txnHistoryData,
 		isLoading: txnHistoryLoading,
@@ -331,9 +328,23 @@ export default function AddressPage({ params }: AddressPageProps) {
 			{/* Tab content */}
 			<div className="mt-4">
 				{activeTab === 'transactions' ? (
-					<TransactionComponent address={address} /> // Render transactions component
+					<TransactionComponent
+						key="transactions"
+						address={address}
+						page={page}
+						setPage={setPage}
+						count={count}
+						setCount={setCount}
+					/>
 				) : (
-					<BlockComponent address={address} /> // Render blocks component
+					<BlockComponent
+						key="blocks"
+						address={address}
+						page={page}
+						setPage={setPage}
+						count={count}
+						setCount={setCount}
+					/>
 				)}
 			</div>
 		</main>
diff --git a/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx b/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
index 8dc90d6..e48a7f6 100644
--- a/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
@@ -20,6 +20,8 @@ import QueryApi from 'src/shared/api/query-api';
 
 import QUERY_KEYS from 'src/static/query.keys';
 import ROUTES from 'src/static/router.data';
+import TransactionTooltipDetails from 'src/components/internal/transaction-tooltip-details/transaction-tooltip-details';
+import './address.scss';
 
 const headers = [
 	{
@@ -66,9 +68,21 @@ const headers = [
 
 type TransactionComponentProps = {
 	address: string;
+	page: number;
+	setPage: (page: number) => void;
+	count: number;
+	setCount: (count: number) => void;
 };
 
-export default function TransactionComponent({ address }: TransactionComponentProps) {
+let met: any = null;
+
+export default function TransactionComponent({
+	address,
+	page,
+	setPage,
+	count,
+	setCount,
+}: TransactionComponentProps) {
 	// *~~*~~*~~ account balance ~~*~~*~~* //
 	const {
 		data: balanceData,
@@ -81,19 +95,18 @@ export default function TransactionComponent({ address }: TransactionComponentPr
 
 	// *~~*~~*~~ Txn history ~~*~~*~~* //
 
-	const [page, setPage] = useState<number>(1);
-	const [count, setCount] = useState<number>(10);
-
-	const [paginationMetadata, setPaginationMetadata] = useState({
-		currentPage: 1,
-		totalPages: 1,
-		startIndex: 0,
-		endIndex: 0,
-		totalItems: 0,
-		itemsPerPage: 0,
-		nextPage: 0,
-		previousPage: 0,
-	});
+	const [paginationMetadata, setPaginationMetadata] = useState(
+		met || {
+			currentPage: 1,
+			totalPages: 1,
+			startIndex: 0,
+			endIndex: 0,
+			totalItems: 0,
+			itemsPerPage: 0,
+			nextPage: 0,
+			previousPage: 0,
+		}
+	);
 
 	// txnHistory
 
@@ -105,16 +118,17 @@ export default function TransactionComponent({ address }: TransactionComponentPr
 		[QUERY_KEYS.txn_history, address, page, count],
 		() => QueryApi.user.txnHistory(address, page, count),
 		{
-			staleTime: 1000 * 60 * 5,
 			cacheTime: 0,
 			onSuccess: (data) => {
 				setPaginationMetadata(data.metadata);
+				met = data.metadata;
 			},
 		}
 	);
+	console.log('TransactionComponentProps', txnHistoryData?.metadata);
 
-	function handlePageChange(page: number) {
-		setPage(page);
+	function handlePageChange(newPage: number) {
+		setPage(newPage);
 	}
 
 	if (
@@ -201,7 +215,7 @@ export default function TransactionComponent({ address }: TransactionComponentPr
 										{/* txn hash */}
 										<td className="xl:px-8 px-2 py-8">
 											<div className="flex gap-x-2 justify-start">
-												<div>
+												<div className="eye_tooltip_container">
 													<Image
 														className="w-auto h-auto"
 														src="/icons/eye.svg"
@@ -209,6 +223,14 @@ export default function TransactionComponent({ address }: TransactionComponentPr
 														height={20}
 														alt=""
 													/>
+
+													<div className="tooltip">
+														<TransactionTooltipDetails
+															usdFee={txn.txnFeeInUsd}
+															fee={txn.txnFee}
+															nonce={txn.nonceOrValidationHash}
+														/>
+													</div>
 												</div>
 
 												<Link
diff --git a/src/app/(header-footer-layout)/nodes/page.tsx b/src/app/(header-footer-layout)/nodes/page.tsx
index 71e8227..f9adb2b 100644
--- a/src/app/(header-footer-layout)/nodes/page.tsx
+++ b/src/app/(header-footer-layout)/nodes/page.tsx
@@ -121,21 +121,24 @@ export default function Nodes() {
 									</>
 								)}
 								icon="/icons/check.svg"
+								tooltipText="Total number of active nodes on the network"
 							/>
 							<StatBox
 								title="TOTAL STANDBY NODES"
 								valueComp={() => <span>{nodesData.totalStandbyNodes}</span>}
 								icon="/icons/nodes.svg"
+								tooltipText="Total number of standby nodes on the network"
 							/>
 
 							<StatBox
 								title="TOTAL VOTING POWER"
 								valueComp={() => (
 									<span>
-										{BnToDec(nodesData.totalVotingPower.toString(), 9, 9)} PWR
+										{BnToDec(nodesData.totalVotingPower.toString(), 9, 0)} PWR
 									</span>
 								)}
 								icon="/icons/pwr.svg"
+								tooltipText="Total voting power of all nodes on the network"
 							/>
 						</>
 					)}
@@ -215,12 +218,12 @@ export default function Nodes() {
 										{/* txn hash */}
 										<td className="xl:px-8 px-2 py-8">
 											<div className="flex gap-x-2 justify-start">
-												<Link
-													href={`${ROUTES.transactions}/${node.address}`}
+												<h1
+													// href={`${ROUTES.transactions}/${node.address}`}
 													className="dark:text-ablue-100 text-ablue-500 font-medium"
 												>
 													{shortenAddress(node.address)}
-												</Link>
+												</h1>
 												<Tooltip
 													text="Copied to clipbloard"
 													position="up"
@@ -240,7 +243,7 @@ export default function Nodes() {
 
 										{/* block */}
 										<td className="xl:px-8 px-2 py-8">
-											<Link	
+											<Link
 												href={`${ROUTES.blocks}/${node.host}`}
 												className="dark:text-white  text-abrandc-dark-grey font-medium text-center block"
 											>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5d16d60..1e3a678 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -24,6 +24,7 @@ import QueryApi from 'src/shared/api/query-api';
 import QUERY_KEYS from 'src/static/query.keys';
 import ROUTES from 'src/static/router.data';
 import TransactionChart from 'src/components/internal/chart/chart.component';
+import ChartSkeleton from 'src/components/skeletons/root/chart-skeleton';
 
 function StatBox({ title, valueComp, icon }: { title: string; valueComp: any; icon: any }) {
 	return (
@@ -208,7 +209,7 @@ export default function Home() {
 							</div>
 
 							{/* Transactions, blocks, nodes */}
-							<div className="xl:col-span-5 space-y-4">
+							<div className="xl:col-span-4 space-y-4">
 								{infoLoading ? (
 									<>
 										<StatBoxSkeleton />
@@ -268,8 +269,10 @@ export default function Home() {
 								)}
 							</div>
 
-							<div className="xl:col-span-3 ">
-								{infoData?.sevenDaysTxn ? (
+							<div className="xl:col-span-4">
+								{infoLoading ? (
+									<ChartSkeleton />
+								) : infoData?.sevenDaysTxn ? (
 									<TransactionChart data={infoData?.sevenDaysTxn} />
 								) : (
 									<p>Loading transaction history...</p>
diff --git a/src/components/internal/chart/chart.component.tsx b/src/components/internal/chart/chart.component.tsx
index 54c2196..fa554a2 100644
--- a/src/components/internal/chart/chart.component.tsx
+++ b/src/components/internal/chart/chart.component.tsx
@@ -13,17 +13,17 @@ type TransactionChartProps = {
 
 const TransactionChart = ({ data }: TransactionChartProps) => {
 	const [seriesData, setSeriesData] = useState<number[]>([]);
-	const [categories, setCategories] = useState<string[]>([]);
-
-	console.log('data', data);
+	const [categories, setCategories] = useState<string[]>(['192']);
 
 	useEffect(() => {
+		console.log('data before the if statment', data);
+
 		if (data && Object.keys(data).length > 0) {
 			const dates = Object.keys(data).map((timestamp) => {
 				const date = new Date(parseInt(timestamp) * 1000);
 				return date.toLocaleDateString('en-US', {
-					month: 'short', // Only display month
-					day: 'numeric', // Only display day number
+					month: 'short',
+					day: 'numeric',
 				});
 			});
 			const values = Object.values(data);
@@ -31,6 +31,8 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 			setCategories(dates);
 			setSeriesData(values);
 		}
+		console.log('seriesData', seriesData);
+		console.log('data', data);
 	}, [data]);
 
 	const options: ApexOptions = {
@@ -107,17 +109,17 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 	const series = [
 		{
 			name: 'Transactions',
-			data: seriesData.length ? seriesData : [0], // Ensure the seriesData is not empty
+			data: seriesData.length ? seriesData : [0],
 		},
 	];
 
 	return (
-		<div className="w-[400px] h-48 bg-agrey-50 dark:bg-agrey-900 p-4 rounded-md">
+		<div className="w-full h-48 bg-agrey-50 dark:bg-agrey-900 p-4 rounded-md">
 			<h1 className="text-agrey-600 text-sm font-medium leading-normal uppercase">
 				Transaction History in 14 Days
 			</h1>
 			<div className="">
-				<Chart options={options} series={series} type="area" height={150} />
+				<Chart options={options} series={series} type="area" width="100%" height={150} />{' '}
 			</div>
 		</div>
 	);
diff --git a/src/components/internal/stat-box/stat-box.component.tsx b/src/components/internal/stat-box/stat-box.component.tsx
index 7675956..1ac3767 100644
--- a/src/components/internal/stat-box/stat-box.component.tsx
+++ b/src/components/internal/stat-box/stat-box.component.tsx
@@ -14,14 +14,14 @@ function StatBox({ title, valueComp, icon, tooltipText }: StatBoxProps) {
 			{icon && <Image src={icon} width={28} height={28} alt="" />}
 
 			<div className="flex flex-col gap-y-2">
-				<div className="">
+				<div className="flex items-center justify-center gap-4">
 					<h1 className="text-agrey-600 text-sm font-medium leading-[24px]">{title}</h1>
 					{tooltipText && (
 						<Tooltip text={tooltipText} position="up" trigger="hover">
 							<button className="text-agrey-500 dark:text-agrey-600">
 								<i className="fa-sm far fa-info-circle" />
 							</button>
-						</Tooltip>
+						</Tooltip>	
 					)}
 				</div>
 				<h2 className="text-base font-bold dark:text-white text-abrandc-dark-grey">
diff --git a/src/components/skeletons/root/chart-skeleton.tsx b/src/components/skeletons/root/chart-skeleton.tsx
new file mode 100644
index 0000000..7564c2d
--- /dev/null
+++ b/src/components/skeletons/root/chart-skeleton.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function ChartSkeleton() {
+	return (
+		<div className="w-[400px] h-48 bg-agrey-50 dark:bg-agrey-900 p-4 rounded-md">
+			{/* Skeleton for the title */}
+			<div className="skeleton-title w-[200px] h-[20px] mb-4"></div>
+
+			{/* Skeleton for the chart area */}
+			<div className="skeleton-chart w-full h-[150px] rounded-md"></div>
+
+			{/* Accessible loading text */}
+			<span className="sr-only">Loading chart...</span>
+		</div>
+	);
+}

From 45dbc6d6e9ebf6e939ea3a04a3b26b69a6b6a664 Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Fri, 6 Sep 2024 14:40:55 +0300
Subject: [PATCH 09/14] push changes

---
 .../address/[address]/blocks.component.tsx    |  8 ++--
 .../address/[address]/page.tsx                |  8 ++--
 .../[address]/transcations.component.tsx      | 14 +++----
 .../blocks/[blocknumber]/page.tsx             |  6 +--
 .../[blocknumber]/transactions/page.tsx       | 12 +++---
 .../(header-footer-layout)/blocks/page.tsx    | 17 ++++----
 src/app/(header-footer-layout)/nodes/page.tsx |  2 +-
 .../transactions/[txnhash]/page.tsx           | 26 ++++--------
 .../transactions/page.tsx                     | 22 +++++-----
 src/app/page.tsx                              | 12 +++---
 .../internal/chart/chart.component.tsx        | 42 ++++++++++++-------
 .../root-page/latest-blocks-table.tsx         |  8 ++--
 .../internal/root-page/latest-txns-table.tsx  |  8 ++--
 src/layout/header/header.component.tsx        | 14 ++++---
 .../header/searchbar-header.component.tsx     | 26 +++++++++---
 .../api/responses/explorer-info.response.ts   |  2 +-
 src/static/router.data.ts                     |  2 +-
 17 files changed, 123 insertions(+), 106 deletions(-)

diff --git a/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx b/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
index cbaab99..400bd5a 100644
--- a/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/blocks.component.tsx
@@ -186,7 +186,7 @@ export default function BlockComponent({
 									<td className="xl:px-8 px-2 py-8">
 										<Link
 											href={`${ROUTES.blocks}/${block.blockHeight}`}
-											className="dark:text-ablue-300 text-ablue-200 font-medium text-center block"
+											className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-center block"
 										>
 											{block.blockHeight}
 										</Link>
@@ -204,7 +204,7 @@ export default function BlockComponent({
 										<div className="dark:text-white text-abrandc-dark-grey font-normal text-center">
 											<Link
 												href={ROUTES.blockTxns(block.blockHeight)}
-												className="dark:text-ablue-300 text-ablue-200 font-medium"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 											>
 												{block.txnsCount}
 											</Link>
@@ -216,7 +216,7 @@ export default function BlockComponent({
 										<div className="flex gap-x-2 justify-center">
 											<Link
 												href={`${ROUTES.address}/${block.blockSubmitter}`}
-												className="dark-text-ablue-100 text-ablue-100 font-medium"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 											>
 												{shortenAddress(block.blockSubmitter, 4)}
 											</Link>
@@ -227,7 +227,7 @@ export default function BlockComponent({
 												trigger="click"
 											>
 												<button
-													className="text-agrey-500 dark:text-agrey-600"
+													className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 													onClick={() =>
 														copyToClipboard(block.blockSubmitter)
 													}
diff --git a/src/app/(header-footer-layout)/address/[address]/page.tsx b/src/app/(header-footer-layout)/address/[address]/page.tsx
index e5abbcc..4e94f2c 100644
--- a/src/app/(header-footer-layout)/address/[address]/page.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/page.tsx
@@ -201,7 +201,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 									<div className="flex gap-x-2">
 										<Link
 											href={`${ROUTES.transactions}/${txnHistoryData.hashOfLastTxnSent}`}
-											className="text-medium text-ablue-800 dark:text-ablue-100"
+											className="text-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 										>
 											{shortenAddress(txnHistoryData.hashOfLastTxnSent)}
 										</Link>
@@ -212,7 +212,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 											text="copied to clipboard"
 										>
 											<button
-												className="text-agrey-500 dark:text-agrey-600"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 												onClick={() =>
 													copyToClipboard(
 														txnHistoryData.hashOfLastTxnSent
@@ -237,7 +237,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 									<div className="flex gap-x-2">
 										<Link
 											href={`${ROUTES.transactions}/${txnHistoryData.hashOfFirstTxnSent}`}
-											className="text-medium text-ablue-800 dark:text-ablue-100"
+											className="text-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 										>
 											{shortenAddress(txnHistoryData.hashOfFirstTxnSent)}
 										</Link>
@@ -248,7 +248,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 											text="copied to clipboard"
 										>
 											<button
-												className="text-agrey-500 dark:text-agrey-600"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 												onClick={() =>
 													copyToClipboard(
 														txnHistoryData.hashOfFirstTxnSent
diff --git a/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx b/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
index e48a7f6..62abca7 100644
--- a/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/transcations.component.tsx
@@ -235,7 +235,7 @@ export default function TransactionComponent({
 
 												<Link
 													href={`${ROUTES.transactions}/${txn.txnHash}`}
-													className="dark:text-ablue-300 text-ablue-200 font-medium"
+													className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 												>
 													{shortenAddress(txn.txnHash)}
 												</Link>
@@ -244,7 +244,7 @@ export default function TransactionComponent({
 
 										{/* type */}
 										<td className="px-2 py-8">
-											<div className="dark:text-ablue-300 text-ablue-200 font-medium text-center block">
+											<div className="dark:text-ablue-100 text-ablue-500 font-medium text-center block">
 												{txn.txnType}
 											</div>
 										</td>
@@ -253,7 +253,7 @@ export default function TransactionComponent({
 										<td className="xl:px-8 px-2 py-8">
 											<Link
 												href={`${ROUTES.blocks}/${txn.block}`}
-												className="dark:text-ablue-300 text-ablue-200 font-medium text-center block"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-center block"
 											>
 												{txn.block}
 											</Link>
@@ -271,7 +271,7 @@ export default function TransactionComponent({
 											<div className="flex gap-x-2 justify-center">
 												<Link
 													href="/"
-													className="dark:text-ablue-100 text-ablue-500 font-medium"
+													className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 												>
 													{shortenAddress(txn.from, 4)}
 												</Link>
@@ -282,7 +282,7 @@ export default function TransactionComponent({
 													trigger="click"
 												>
 													<button
-														className="text-agrey-500 dark:text-agrey-600"
+														className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 														onClick={() => copyToClipboard(txn.from)}
 													>
 														<i className="far fa-clone" />
@@ -306,7 +306,7 @@ export default function TransactionComponent({
 												{isAddress(txn.to) ? (
 													<Link
 														href={`${ROUTES.address}/${txn.to}`}
-														className="dark:text-ablue-100 text-ablue-500 font-medium"
+														className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 													>
 														{shortenAddress(txn.to, 4)}
 													</Link>
@@ -322,7 +322,7 @@ export default function TransactionComponent({
 													trigger="click"
 												>
 													<button
-														className="text-agrey-500 dark:text-agrey-600"
+														className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200    "
 														onClick={() => copyToClipboard(txn.to)}
 													>
 														<i className="far fa-clone" />
diff --git a/src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx b/src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx
index 5ea57ce..bb4782b 100644
--- a/src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx
+++ b/src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx
@@ -152,7 +152,7 @@ export default function SingleBlock({ params }: BlockTransactionsProps) {
 									<h2 className="leading-[24px] break-all text-sm">
 										<Link
 											href={ROUTES.blockTxns(blockNum)}
-											className="dark:text-ablue-100 text-ablue-500 font-medium"
+											className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 										>
 											{block_data.txnsCount} transactions
 										</Link>{' '}
@@ -179,7 +179,7 @@ export default function SingleBlock({ params }: BlockTransactionsProps) {
 								<div className="flex gap-x-2  gap-y-2">
 									<Link
 										href={`${ROUTES.address}/${block_data.blockSubmitter}`}
-										className="dark:text-ablue-100 text-ablue-500 font-medium text-ellipsis  overflow-hidden"
+										className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-ellipsis  overflow-hidden"
 									>
 										{block_data.blockSubmitter}
 									</Link>
@@ -193,7 +193,7 @@ export default function SingleBlock({ params }: BlockTransactionsProps) {
 												copyToClipboard(block_data.blockSubmitter)
 											}
 										>
-											<i className="far fa-clone text-agrey-500 dark:text-agrey-600" />
+											<i className="far fa-clone dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200" />
 										</button>
 									</Tooltip>
 								</div>
diff --git a/src/app/(header-footer-layout)/blocks/[blocknumber]/transactions/page.tsx b/src/app/(header-footer-layout)/blocks/[blocknumber]/transactions/page.tsx
index d2b2f57..722ac2f 100644
--- a/src/app/(header-footer-layout)/blocks/[blocknumber]/transactions/page.tsx
+++ b/src/app/(header-footer-layout)/blocks/[blocknumber]/transactions/page.tsx
@@ -195,7 +195,7 @@ export default function BlockTransactions({ params }: BlockTransactionsProps) {
 
 											<Link
 												href={`${ROUTES.transactions}/${txn.txnHash}`}
-												className="dark:text-ablue-300 text-ablue-200 font-medium"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 											>
 												{shortenAddress(txn.txnHash)}
 											</Link>
@@ -206,7 +206,7 @@ export default function BlockTransactions({ params }: BlockTransactionsProps) {
 									<td className="xl:px-8 px-2 py-8">
 										<Link
 											href={`${ROUTES.blocks}/${txn.blockNumber}`}
-											className="dark:text-ablue-300 text-ablue-200 font-medium text-center block"
+											className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-center block"
 										>
 											{txn.blockNumber}
 										</Link>
@@ -224,7 +224,7 @@ export default function BlockTransactions({ params }: BlockTransactionsProps) {
 										<div className="flex gap-x-2 justify-center">
 											<Link
 												href={`${ROUTES.address}/${txn.from}`}
-												className="dark:text-ablue-100 text-ablue-500 font-medium"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 											>
 												{shortenAddress(txn.from, 4)}
 											</Link>
@@ -235,7 +235,7 @@ export default function BlockTransactions({ params }: BlockTransactionsProps) {
 												trigger="click"
 											>
 												<button
-													className="text-agrey-500 dark:text-agrey-600"
+													className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 													onClick={() => copyToClipboard(txn.from)}
 												>
 													<i className="far fa-clone" />
@@ -259,7 +259,7 @@ export default function BlockTransactions({ params }: BlockTransactionsProps) {
 											{isAddress(txn.to) ? (
 												<Link
 													href="/"
-													className="dark:text-ablue-100 text-ablue-500 font-medium"
+													className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 												>
 													{shortenAddress(txn.to, 4)}
 												</Link>
@@ -275,7 +275,7 @@ export default function BlockTransactions({ params }: BlockTransactionsProps) {
 												trigger="click"
 											>
 												<button
-													className="text-agrey-500 dark:text-agrey-600"
+													className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 													onClick={() => copyToClipboard(txn.to)}
 												>
 													<i className="far fa-clone" />
diff --git a/src/app/(header-footer-layout)/blocks/page.tsx b/src/app/(header-footer-layout)/blocks/page.tsx
index 61e91cf..e266b54 100644
--- a/src/app/(header-footer-layout)/blocks/page.tsx
+++ b/src/app/(header-footer-layout)/blocks/page.tsx
@@ -189,16 +189,17 @@ export default function Blocks() {
 									{blocks_data.blocks.map((block, idx) => (
 										<tr
 											key={idx}
-											className={` ${idx % 2 === 0
-												? 'dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
-												: 'bg-transparent'
-												}`}
+											className={` ${
+												idx % 2 === 0
+													? 'dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
+													: 'bg-transparent'
+											}`}
 										>
 											{/* Block */}
 											<td className="xl:px-8 px-2 py-8">
 												<Link
 													href={`${ROUTES.blocks}/${block.blockHeight}`}
-													className="dark:text-ablue-300 text-ablue-200 font-medium text-center block"
+													className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-center block"
 												>
 													{block.blockHeight}
 												</Link>
@@ -216,7 +217,7 @@ export default function Blocks() {
 												<div className="dark:text-white text-abrandc-dark-grey font-normal text-center">
 													<Link
 														href={ROUTES.blockTxns(block.blockHeight)}
-														className="dark:text-ablue-300 text-ablue-200 font-medium"
+														className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 													>
 														{block.txnsCount}
 													</Link>
@@ -228,7 +229,7 @@ export default function Blocks() {
 												<div className="flex gap-x-2 justify-center">
 													<Link
 														href={`${ROUTES.address}/${block.blockSubmitter}`}
-														className="dark-text-ablue-100 text-ablue-100 font-medium"
+														className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium"
 													>
 														{shortenAddress(block.blockSubmitter, 4)}
 													</Link>
@@ -239,7 +240,7 @@ export default function Blocks() {
 														trigger="click"
 													>
 														<button
-															className="text-agrey-500 dark:text-agrey-600"
+															className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 															onClick={() =>
 																copyToClipboard(
 																	block.blockSubmitter
diff --git a/src/app/(header-footer-layout)/nodes/page.tsx b/src/app/(header-footer-layout)/nodes/page.tsx
index f9adb2b..d3401c9 100644
--- a/src/app/(header-footer-layout)/nodes/page.tsx
+++ b/src/app/(header-footer-layout)/nodes/page.tsx
@@ -230,7 +230,7 @@ export default function Nodes() {
 													trigger="click"
 												>
 													<button
-														className="text-agrey-500 dark:text-agrey-600"
+														className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 														onClick={() =>
 															copyToClipboard(node.address)
 														}
diff --git a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
index 2653085..993df83 100644
--- a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
+++ b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
@@ -5,7 +5,6 @@ import Link from 'next/link';
 
 import { useQuery } from 'react-query';
 
-import Button from 'src/components/internal/button/button.component';
 import Tags from 'src/components/internal/tags/tags.component';
 import Tooltip from 'src/components/internal/tooltip/tooltip.component';
 import ErrorComponent from 'src/components/error/error.component';
@@ -19,7 +18,6 @@ import QUERY_KEYS from 'src/static/query.keys';
 import ROUTES from 'src/static/router.data';
 
 import 'src/components/internal/checkbox/checkbox.scss';
-import test from 'node:test';
 
 type TransactionDetailsProps = {
 	params: {
@@ -52,15 +50,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 	}
 
 	if (txnError || (!txnLoading && !txnData)) return <ErrorComponent />;
-	const object = {
-		ip: '12121321312',
-		port: 123,
-		username: 'admin',
-		password: 'admin',
-		test: 'test',
-		test2: 'test',
-		test3: 'test',
-	};
+
 	return (
 		<div className="container-2 mx-auto dark:text-white text-abrandc-dark-grey">
 			{/* Title */}
@@ -222,7 +212,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 										</svg>{' '}
 										<Link
 											href={`${ROUTES.blocks}/${txnData.blockNumber}`}
-											className="dark:text-ablue-100 text-ablue-500 font-medium text-sm"
+											className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-sm"
 										>
 											{txnData.blockNumber}
 										</Link>
@@ -277,7 +267,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 								<div className="flex items-center gap-x-2">
 									<Link
 										href={`${ROUTES.address}/${txnData.from}`}
-										className="dark:text-ablue-100 text-ablue-500 font-medium text-sm"
+										className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-sm"
 									>
 										{txnData.from}
 									</Link>
@@ -287,7 +277,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 										trigger="click"
 									>
 										<button onClick={() => copyToClipboard(txnData.from)}>
-											<i className="far fa-clone text-agrey-500 dark:text-agrey-600" />
+											<i className="far fa-clone dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200" />
 										</button>
 									</Tooltip>
 								</div>
@@ -308,7 +298,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 										<>
 											<Link
 												href={`${ROUTES.address}/${txnData.to}`}
-												className="dark:text-ablue-100 text-ablue-500 font-medium text-sm"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-sm"
 											>
 												{/* {item.value} */}
 												{txnData.to}
@@ -319,7 +309,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 												trigger="click"
 											>
 												<button onClick={() => copyToClipboard(txnData.to)}>
-													<i className="far fa-clone text-agrey-500 dark:text-agrey-600" />
+													<i className="far fa-clone dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200" />
 												</button>
 											</Tooltip>
 										</>
@@ -405,7 +395,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 										<button
 											onClick={() => copyToClipboard(txnData.data || '0x')}
 										>
-											<i className="far fa-clone text-agrey-500 dark:text-agrey-600" />
+											<i className="far fa-clone dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200" />
 										</button>
 									</Tooltip>
 								</div>
@@ -442,7 +432,7 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 												);
 											}}
 										>
-											<i className="far fa-clone text-agrey-500 dark:text-agrey-600" />
+											<i className="far fa-clone dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200" />
 										</button>
 									</Tooltip>
 								</div>
diff --git a/src/app/(header-footer-layout)/transactions/page.tsx b/src/app/(header-footer-layout)/transactions/page.tsx
index 69253f3..5237991 100644
--- a/src/app/(header-footer-layout)/transactions/page.tsx
+++ b/src/app/(header-footer-layout)/transactions/page.tsx
@@ -224,10 +224,11 @@ export default function Transactions() {
 								{txnsData.transactions.map((txn, idx) => (
 									<tr
 										key={txn.txnHash}
-										className={` ${idx % 2 == 0
-											? ' dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
-											: 'bg-transparent'
-											}`}
+										className={` ${
+											idx % 2 == 0
+												? ' dark:bg-abrandc-dark-grey bg-abrandc-light-grey'
+												: 'bg-transparent'
+										}`}
 									>
 										{/* txn hash */}
 										<td className="xl:px-8 px-2 py-8">
@@ -246,14 +247,13 @@ export default function Transactions() {
 															usdFee={txn.txnFeeInUsd}
 															fee={txn.txnFee}
 															nonce={txn.nonceOrValidationHash}
-
 														/>
 													</div>
 												</div>
 
 												<Link
 													href={`${ROUTES.transactions}/${txn.txnHash}`}
-													className="dark:text-ablue-300 text-ablue-200 font-medium"
+													className="font-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 												>
 													{shortenAddress(txn.txnHash)}
 												</Link>
@@ -264,7 +264,7 @@ export default function Transactions() {
 										<td className="xl:px-8 px-2 py-8">
 											<Link
 												href={`${ROUTES.blocks}/${txn.block}`}
-												className="dark:text-ablue-300 text-ablue-200 font-medium text-center block"
+												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium text-center block"
 											>
 												{txn.block}
 											</Link>
@@ -282,7 +282,7 @@ export default function Transactions() {
 											<div className="flex gap-x-2 justify-center">
 												<Link
 													href={`${ROUTES.address}/${txn.from}`}
-													className="dark:text-ablue-100 text-ablue-500 font-medium"
+													className="font-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 												>
 													{shortenAddress(txn.from, 4)}
 												</Link>
@@ -293,7 +293,7 @@ export default function Transactions() {
 													trigger="click"
 												>
 													<button
-														className="text-agrey-500 dark:text-agrey-600"
+														className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 														onClick={() => copyToClipboard(txn.from)}
 													>
 														<i className="far fa-clone" />
@@ -317,7 +317,7 @@ export default function Transactions() {
 												{isAddress(txn.to) ? (
 													<Link
 														href="/"
-														className="dark:text-ablue-100 text-ablue-500 font-medium"
+														className="font-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 													>
 														{shortenAddress(txn.to, 4)}
 													</Link>
@@ -333,7 +333,7 @@ export default function Transactions() {
 													trigger="click"
 												>
 													<button
-														className="text-agrey-500 dark:text-agrey-600"
+														className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 														onClick={() => copyToClipboard(txn.to)}
 													>
 														<i className="far fa-clone" />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1e3a678..4755ec2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -90,8 +90,6 @@ export default function Home() {
 
 	if (infoError || (!infoLoading && !infoData)) return <ErrorComponent />;
 
-	console.log('sevenDaysTxn', infoData?.sevenDaysTxn);
-
 	return (
 		<>
 			<HeaderComponent />
@@ -272,8 +270,8 @@ export default function Home() {
 							<div className="xl:col-span-4">
 								{infoLoading ? (
 									<ChartSkeleton />
-								) : infoData?.sevenDaysTxn ? (
-									<TransactionChart data={infoData?.sevenDaysTxn} />
+								) : infoData?.fourteenDaysTxn ? (
+									<TransactionChart data={infoData?.fourteenDaysTxn} />
 								) : (
 									<p>Loading transaction history...</p>
 								)}
@@ -308,9 +306,9 @@ export default function Home() {
 								</div>
 								<Link
 									href={ROUTES.blocks}
-									className="flex items-center justify-center gap-x-2 font-medium dark:text-white text-abrandc-dark-grey leading-[26px] mt-3.5"
+									className="flex items-center justify-center gap-x-2 font-medium dark:text-white dark:hover:text-ablue-300 hover:text-ablue-200 text-abrandc-dark-grey leading-[26px] mt-3.5"
 								>
-									<span>VIEW ALL BLOCKS</span>
+									<span>VIEW ALL BLOCKS</span>	
 									<span>
 										<i className="fas fa-arrow-right"></i>
 									</span>
@@ -344,7 +342,7 @@ export default function Home() {
 
 								<Link
 									href={ROUTES.transactions}
-									className="flex items-center justify-center gap-x-2 font-medium dark:text-white text-abrandc-dark-grey leading-[26px] mt-3.5"
+									className="flex items-center justify-center gap-x-2 font-medium dark:text-white text-abrandc-dark-grey dark:hover:text-ablue-300 hover:text-ablue-200 leading-[26px] mt-3.5"
 								>
 									<span>VIEW ALL TRANSACTIONS</span>
 
diff --git a/src/components/internal/chart/chart.component.tsx b/src/components/internal/chart/chart.component.tsx
index fa554a2..bd3733d 100644
--- a/src/components/internal/chart/chart.component.tsx
+++ b/src/components/internal/chart/chart.component.tsx
@@ -15,9 +15,9 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 	const [seriesData, setSeriesData] = useState<number[]>([]);
 	const [categories, setCategories] = useState<string[]>(['192']);
 
-	useEffect(() => {
-		console.log('data before the if statment', data);
+	console.log('data', data);
 
+	useEffect(() => {
 		if (data && Object.keys(data).length > 0) {
 			const dates = Object.keys(data).map((timestamp) => {
 				const date = new Date(parseInt(timestamp) * 1000);
@@ -31,10 +31,11 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 			setCategories(dates);
 			setSeriesData(values);
 		}
-		console.log('seriesData', seriesData);
-		console.log('data', data);
 	}, [data]);
 
+	const minValue = Math.min(...seriesData);
+    const maxValue = Math.max(...seriesData);
+	
 	const options: ApexOptions = {
 		chart: {
 			type: 'area',
@@ -59,20 +60,29 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 			axisTicks: { show: false },
 		},
 		yaxis: {
-			show: true, // Show y-axis labels
-			labels: {
-				formatter: (value) => (value ? `${value / 1000}k` : '0k'), // Ensure value is valid
-				style: {
-					colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
-					fontSize: '12px', // Adjust font size if necessary
-					fontWeight: 'bold',
-				},
-			},
-		},
+            show: true, // Show y-axis labels
+            labels: {
+                formatter: (value) => {
+                    if (value === minValue || value === maxValue) {
+                        return `${value / 1000}k`;
+                    }
+                    return '';
+                },
+                style: {
+                    colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
+                    fontSize: '12px', // Adjust font size if necessary
+                    fontWeight: 'bold',
+                },
+            },
+            min: minValue,
+            max: maxValue,
+        },
 		tooltip: {
 			enabled: true,
 			x: {
-				formatter: (value) => (value ? value.toString() : 'N/A'), // Fallback if value is undefined
+				formatter: (value, { dataPointIndex }) => {
+					return categories[dataPointIndex] ? categories[dataPointIndex] : 'N/A';
+				},
 			},
 		},
 		markers: {
@@ -119,7 +129,7 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 				Transaction History in 14 Days
 			</h1>
 			<div className="">
-				<Chart options={options} series={series} type="area" width="100%" height={150} />{' '}
+				<Chart options={options} series={series} type="area" width="100%" height={170} />{' '}
 			</div>
 		</div>
 	);
diff --git a/src/components/internal/root-page/latest-blocks-table.tsx b/src/components/internal/root-page/latest-blocks-table.tsx
index 2ba0f19..ade56b5 100644
--- a/src/components/internal/root-page/latest-blocks-table.tsx
+++ b/src/components/internal/root-page/latest-blocks-table.tsx
@@ -45,7 +45,7 @@ export default function LatestBlocksTable({ blocks }: LatestBlocksProps) {
 									{/* block number */}
 									<Link
 										href={`${ROUTES.blocks}/${block.blockHeight}`}
-										className="font-medium pr-2 dark:text-ablue-300 text-ablue-200"
+										className="font-medium pr-2 dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 									>
 										{block.blockHeight}
 									</Link>
@@ -65,7 +65,7 @@ export default function LatestBlocksTable({ blocks }: LatestBlocksProps) {
 									</span>
 									<Link
 										href={`${ROUTES.address}/${block.blockSubmitter}`}
-										className="dark:text-ablue-300 text-ablue-200 font-medium "
+										className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 font-medium "
 									>
 										{shortenAddress(block.blockSubmitter, 4)}
 									</Link>
@@ -76,9 +76,9 @@ export default function LatestBlocksTable({ blocks }: LatestBlocksProps) {
 								<div className="flex gap-x-2">
 									<Link
 										href={`${ROUTES.blockTxns(block.blockHeight)}`}
-										className="font-medium dark:text-ablue-300 text-ablue-200"
+										className="font-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 									>
-										{block.txnsCount} txns
+										{block.txnsCount} txns	
 									</Link>
 
 									<div className="sm:hidden">
diff --git a/src/components/internal/root-page/latest-txns-table.tsx b/src/components/internal/root-page/latest-txns-table.tsx
index ca369f4..cdcf276 100644
--- a/src/components/internal/root-page/latest-txns-table.tsx
+++ b/src/components/internal/root-page/latest-txns-table.tsx
@@ -46,7 +46,7 @@ export default function LatestTxnsTable({ transactions }: LatestTransactionsProp
 									{/* block number */}
 									<Link
 										href={`${ROUTES.transactions}/${txn.txnHash}`}
-										className="font-medium pr-2 dark:text-ablue-300 text-ablue-200"
+										className="font-medium pr-2 dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 									>
 										{shortenAddress(txn.txnHash, 4)}
 									</Link>
@@ -66,7 +66,7 @@ export default function LatestTxnsTable({ transactions }: LatestTransactionsProp
 									</div>
 									<Link
 										href={`${ROUTES.address}/${txn.from}`}
-										className="font-medium dark:text-ablue-300 text-ablue-200 pl-1"
+										className="font-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200 pl-1"
 									>
 										{shortenAddress(txn.from, 4)}
 									</Link>
@@ -79,12 +79,12 @@ export default function LatestTxnsTable({ transactions }: LatestTransactionsProp
 									{isAddress(txn.to) ? (
 										<Link
 											href={`${ROUTES.address}/${txn.to}`}
-											className="dark:text-ablue-100 text-ablue-500 font-medium"
+											className="dark:text-ablue-100 text-ablue-500 font-medium dark:hover:text-ablue-300 hover:text-ablue-200"
 										>
 											{shortenAddress(txn.to, 4)}
 										</Link>
 									) : (
-										<span className="dark:text-ablue-100 text-ablue-500 font-medium">
+										<span className="dark:text-ablue-100 text-ablue-500 	">
 											{txn.to}
 										</span>
 									)}
diff --git a/src/layout/header/header.component.tsx b/src/layout/header/header.component.tsx
index 4a6a583..90f54d5 100644
--- a/src/layout/header/header.component.tsx
+++ b/src/layout/header/header.component.tsx
@@ -55,11 +55,11 @@ export default function HeaderComponent() {
 			label: 'Blocks',
 			href: ROUTES.blocks,
 		},
-		// {
-		// 	id: 2,
-		// 	label: 'Nodes',
-		// 	href: ROUTES.nodes,
-		// },
+		{
+			id: 2,
+			label: 'Nodes',
+			href: ROUTES.nodes,
+		},
 	];
 
 	const navigation = [
@@ -76,6 +76,10 @@ export default function HeaderComponent() {
 		// 	href: '#',
 		// },
 		// {
+		// 	label: 'Tokens',
+		// 	href: '#',
+		// },
+		// {
 		// 	label: 'NFTs',
 		// 	href: '#',
 		// },
diff --git a/src/layout/header/searchbar-header.component.tsx b/src/layout/header/searchbar-header.component.tsx
index ed3f1cd..a27d5bf 100644
--- a/src/layout/header/searchbar-header.component.tsx
+++ b/src/layout/header/searchbar-header.component.tsx
@@ -55,11 +55,11 @@ export default function SearchBarHeaderComponent() {
 			label: 'Blocks',
 			href: ROUTES.blocks,
 		},
-		// {
-		// 	id: 2,
-		// 	label: 'Nodes',
-		// 	href: ROUTES.nodes,
-		// },
+		{
+			id: 2,
+			label: 'Nodes',
+			href: ROUTES.nodes,
+		},
 	];
 
 	const navigation = [
@@ -180,6 +180,15 @@ export default function SearchBarHeaderComponent() {
 						</Link>
 					</div>
 
+					<div className="h-full grid place-items-center">
+						<Link
+							href={ROUTES.nodes}
+							className={`navbar-link ${pathname === ROUTES.nodes ? 'active' : ''}`}
+						>
+							Nodes
+						</Link>
+					</div>
+
 					{/* dropdown */}
 					{/* <div className="navbar-dropdown relative  h-full grid place-items-center cursor-pointer">
 						<button className="text-sm font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 ">
@@ -326,7 +335,12 @@ export default function SearchBarHeaderComponent() {
 							>
 								<div>Blocks</div>
 							</Link>
-
+							<Link
+								href={ROUTES.nodes}
+								className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2 "
+							>
+								<div>Nodes</div>
+							</Link>
 							{/* <div>
 								<button
 									className=" font-medium text-agrey-900 dark:text-white flex items-center gap-x-2  justify-between w-full"
diff --git a/src/shared/api/responses/explorer-info.response.ts b/src/shared/api/responses/explorer-info.response.ts
index ce0359e..33f1d7a 100644
--- a/src/shared/api/responses/explorer-info.response.ts
+++ b/src/shared/api/responses/explorer-info.response.ts
@@ -19,7 +19,7 @@ export type ExplorerSuccessResponse = {
 
 	blocks: Block[];
 
-	sevenDaysTxn: {
+	fourteenDaysTxn: {
 		[key: string]: number;
 	};
 
diff --git a/src/static/router.data.ts b/src/static/router.data.ts
index 7a5ab61..f9b2283 100644
--- a/src/static/router.data.ts
+++ b/src/static/router.data.ts
@@ -6,7 +6,7 @@ const ROUTES = {
 	blocks: '/blocks',
 	blockTxns: (blockNumber: number) => `/blocks/${blockNumber}/transactions`,
 
-	nodes: '/blockchain/nodes',
+	nodes: '/nodes',
 	address: '/address',
 
 	external: {

From 3afcc770385b19a6468bd7a343be302c4e556fab Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Fri, 6 Sep 2024 15:57:45 +0300
Subject: [PATCH 10/14] add last txns

---
 .../address/[address]/page.tsx                | 32 +++++++++---
 .../internal/chart/chart.component.tsx        | 52 +++++++++++--------
 .../addresss/txn-history.response.ts          | 31 +++++++++--
 3 files changed, 80 insertions(+), 35 deletions(-)

diff --git a/src/app/(header-footer-layout)/address/[address]/page.tsx b/src/app/(header-footer-layout)/address/[address]/page.tsx
index 4e94f2c..5c600a7 100644
--- a/src/app/(header-footer-layout)/address/[address]/page.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/page.tsx
@@ -100,6 +100,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 			cacheTime: 0,
 		}
 	);
+	console.log('txnHistoryData', txnHistoryData);
 
 	if (
 		balanceError ||
@@ -110,6 +111,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 		return <ErrorComponent />;
 
 	const { values, touched, dirty, errors, handleChange, handleBlur, handleSubmit } = formik;
+
 	return (
 		<main className="container-2 mx-auto space-y-12">
 			<section className="space-y-4">
@@ -200,10 +202,13 @@ export default function AddressPage({ params }: AddressPageProps) {
 									</div>
 									<div className="flex gap-x-2">
 										<Link
-											href={`${ROUTES.transactions}/${txnHistoryData.hashOfLastTxnSent}`}
+											href={`${ROUTES.transactions}/${txnHistoryData.fistLastTransactions.lastTransaction.txnHash}`}
 											className="text-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 										>
-											{shortenAddress(txnHistoryData.hashOfLastTxnSent)}
+											{shortenAddress(
+												txnHistoryData.fistLastTransactions.lastTransaction
+													.txnHash
+											)}
 										</Link>
 
 										<Tooltip
@@ -215,7 +220,8 @@ export default function AddressPage({ params }: AddressPageProps) {
 												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 												onClick={() =>
 													copyToClipboard(
-														txnHistoryData.hashOfLastTxnSent
+														txnHistoryData.fistLastTransactions
+															.lastTransaction.txnHash
 													)
 												}
 											>
@@ -224,7 +230,10 @@ export default function AddressPage({ params }: AddressPageProps) {
 										</Tooltip>
 
 										<div className="text-agrey-500 dark:text-agrey-600 text-sm font-medium">
-											{timeAgo(txnHistoryData.timeOfLastTxnSent)}
+											{timeAgo(
+												txnHistoryData.fistLastTransactions.lastTransaction
+													.timeStamp
+											)}
 										</div>
 									</div>
 								</div>
@@ -236,10 +245,13 @@ export default function AddressPage({ params }: AddressPageProps) {
 									</span>
 									<div className="flex gap-x-2">
 										<Link
-											href={`${ROUTES.transactions}/${txnHistoryData.hashOfFirstTxnSent}`}
+											href={`${ROUTES.transactions}/${txnHistoryData.fistLastTransactions.firstTransaction.txnHash}`}
 											className="text-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 										>
-											{shortenAddress(txnHistoryData.hashOfFirstTxnSent)}
+											{shortenAddress(
+												txnHistoryData.fistLastTransactions.firstTransaction
+													.txnHash
+											)}
 										</Link>
 
 										<Tooltip
@@ -251,7 +263,8 @@ export default function AddressPage({ params }: AddressPageProps) {
 												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 												onClick={() =>
 													copyToClipboard(
-														txnHistoryData.hashOfFirstTxnSent
+														txnHistoryData.fistLastTransactions
+															.firstTransaction.txnHash
 													)
 												}
 											>
@@ -260,7 +273,10 @@ export default function AddressPage({ params }: AddressPageProps) {
 										</Tooltip>
 
 										<div className="text-agrey-500 dark:text-agrey-600 text-sm font-medium">
-											{timeAgo(txnHistoryData.timeOfFirstTxnSent)}
+											{timeAgo(
+												txnHistoryData.fistLastTransactions.firstTransaction
+													.timeStamp
+											)}
 										</div>
 									</div>
 								</div>
diff --git a/src/components/internal/chart/chart.component.tsx b/src/components/internal/chart/chart.component.tsx
index bd3733d..37b7666 100644
--- a/src/components/internal/chart/chart.component.tsx
+++ b/src/components/internal/chart/chart.component.tsx
@@ -15,8 +15,6 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 	const [seriesData, setSeriesData] = useState<number[]>([]);
 	const [categories, setCategories] = useState<string[]>(['192']);
 
-	console.log('data', data);
-
 	useEffect(() => {
 		if (data && Object.keys(data).length > 0) {
 			const dates = Object.keys(data).map((timestamp) => {
@@ -34,8 +32,8 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 	}, [data]);
 
 	const minValue = Math.min(...seriesData);
-    const maxValue = Math.max(...seriesData);
-	
+	const maxValue = Math.max(...seriesData);
+
 	const options: ApexOptions = {
 		chart: {
 			type: 'area',
@@ -55,28 +53,38 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 					fontSize: '12px', // Adjust font size if necessary
 					fontWeight: 'bold',
 				},
+				rotate: 0, // Prevents diagonal rotation
+				formatter: function (value: any, arg2: any) {
+					// Show only the first day, middle day, and last day
+					const idx = categories.indexOf(value);
+
+					if (idx === 0 || idx === 6 || idx === 13) {
+						return value;
+					}
+					return '';
+				},
 			}, // Show x-axis labels
 			axisBorder: { show: false },
 			axisTicks: { show: false },
 		},
 		yaxis: {
-            show: true, // Show y-axis labels
-            labels: {
-                formatter: (value) => {
-                    if (value === minValue || value === maxValue) {
-                        return `${value / 1000}k`;
-                    }
-                    return '';
-                },
-                style: {
-                    colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
-                    fontSize: '12px', // Adjust font size if necessary
-                    fontWeight: 'bold',
-                },
-            },
-            min: minValue,
-            max: maxValue,
-        },
+			show: true, // Show y-axis labels
+			labels: {
+				formatter: (value, ops) => {
+					if (value === minValue || value === maxValue) {
+						return `${value / 1000}k`;
+					}
+					return '';
+				},
+				style: {
+					colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
+					fontSize: '12px', // Adjust font size if necessary
+					fontWeight: 'bold',
+				},
+			},
+			min: minValue,
+			max: maxValue,
+		},
 		tooltip: {
 			enabled: true,
 			x: {
@@ -135,4 +143,4 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 	);
 };
 
-export default TransactionChart;
+export default TransactionChart;
\ No newline at end of file
diff --git a/src/shared/api/responses/addresss/txn-history.response.ts b/src/shared/api/responses/addresss/txn-history.response.ts
index d200729..ca95638 100644
--- a/src/shared/api/responses/addresss/txn-history.response.ts
+++ b/src/shared/api/responses/addresss/txn-history.response.ts
@@ -1,3 +1,28 @@
+// "firstLastTransactions": {
+//         "lastTransaction": {
+//             "txnHash": "0xf622416334cd23d4568e6dd9071cef3254aecf6f7c5453c3700f39a384bf4fd7",
+//             "timeStamp": 1725626118,
+//             "block": 536073
+//         },
+//         "firstTransaction": {
+//             "txnHash": "0x765d3afc94bf2357743bff04386b69fb93cdf1a4044ec163ce73e60d9afa5627",
+//             "timeStamp": 1723717590,
+//             "block": 53
+//         }
+//     },
+type firstLastTransactions = {
+	lastTransaction: {
+		txnHash: string;
+		timeStamp: number;
+		block: number;
+	};
+	firstTransaction: {
+		txnHash: string;
+		timeStamp: number;
+		block: number;
+	};
+};
+
 type Transaction = {
 	txnHash: string;
 	timeStamp: number;
@@ -29,11 +54,7 @@ export type AddressTxnHistorySuccessResponse = {
 	};
 
 	//
-	hashOfFirstTxnSent: string;
-	hashOfLastTxnSent: string;
-
-	timeOfFirstTxnSent: number;
-	timeOfLastTxnSent: number;
+	fistLastTransactions: firstLastTransactions;
 };
 
 type AddressTxnHistoryFailureResponse = {

From fe9d835db9080209c0d55b4801382e517d7d7314 Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Fri, 6 Sep 2024 16:38:26 +0300
Subject: [PATCH 11/14] finishing all issues

---
 .../address/[address]/page.tsx                   | 16 ++++++++--------
 src/app/page.tsx                                 | 14 ++++++++------
 .../internal/chart/chart.component.tsx           |  2 +-
 .../internal/search-bar/search-bar.scss          | 16 +++++++++++++---
 .../responses/addresss/txn-history.response.ts   |  2 +-
 5 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/app/(header-footer-layout)/address/[address]/page.tsx b/src/app/(header-footer-layout)/address/[address]/page.tsx
index 5c600a7..1a7afab 100644
--- a/src/app/(header-footer-layout)/address/[address]/page.tsx
+++ b/src/app/(header-footer-layout)/address/[address]/page.tsx
@@ -202,11 +202,11 @@ export default function AddressPage({ params }: AddressPageProps) {
 									</div>
 									<div className="flex gap-x-2">
 										<Link
-											href={`${ROUTES.transactions}/${txnHistoryData.fistLastTransactions.lastTransaction.txnHash}`}
+											href={`${ROUTES.transactions}/${txnHistoryData.firstLastTransactions.lastTransaction.txnHash}`}
 											className="text-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 										>
 											{shortenAddress(
-												txnHistoryData.fistLastTransactions.lastTransaction
+												txnHistoryData.firstLastTransactions.lastTransaction
 													.txnHash
 											)}
 										</Link>
@@ -220,7 +220,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 												onClick={() =>
 													copyToClipboard(
-														txnHistoryData.fistLastTransactions
+														txnHistoryData.firstLastTransactions
 															.lastTransaction.txnHash
 													)
 												}
@@ -231,7 +231,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 
 										<div className="text-agrey-500 dark:text-agrey-600 text-sm font-medium">
 											{timeAgo(
-												txnHistoryData.fistLastTransactions.lastTransaction
+												txnHistoryData.firstLastTransactions.lastTransaction
 													.timeStamp
 											)}
 										</div>
@@ -245,11 +245,11 @@ export default function AddressPage({ params }: AddressPageProps) {
 									</span>
 									<div className="flex gap-x-2">
 										<Link
-											href={`${ROUTES.transactions}/${txnHistoryData.fistLastTransactions.firstTransaction.txnHash}`}
+											href={`${ROUTES.transactions}/${txnHistoryData.firstLastTransactions.firstTransaction.txnHash}`}
 											className="text-medium dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 										>
 											{shortenAddress(
-												txnHistoryData.fistLastTransactions.firstTransaction
+												txnHistoryData.firstLastTransactions.firstTransaction
 													.txnHash
 											)}
 										</Link>
@@ -263,7 +263,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 												className="dark:text-ablue-100 text-ablue-500 dark:hover:text-ablue-300 hover:text-ablue-200"
 												onClick={() =>
 													copyToClipboard(
-														txnHistoryData.fistLastTransactions
+														txnHistoryData.firstLastTransactions
 															.firstTransaction.txnHash
 													)
 												}
@@ -274,7 +274,7 @@ export default function AddressPage({ params }: AddressPageProps) {
 
 										<div className="text-agrey-500 dark:text-agrey-600 text-sm font-medium">
 											{timeAgo(
-												txnHistoryData.fistLastTransactions.firstTransaction
+												txnHistoryData.firstLastTransactions.firstTransaction
 													.timeStamp
 											)}
 										</div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4755ec2..d21fd5b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -107,8 +107,12 @@ export default function Home() {
 								<div className="field">
 									{/* input contianer */}
 									<div
-										className={`search-bar-container  ${
-											formik.errors.search ? ' !border-ared-500' : ''
+										className={`search-bar-container ${
+											formik.errors.search &&
+											formik.touched.search &&
+											values.search
+												? ' !border-ared-500'
+												: ''
 										}`}
 									>
 										{/* Filter */}
@@ -126,8 +130,7 @@ export default function Home() {
 								</div> */}
 										<input
 											className="search-bar-input"
-											placeholder="Search by Address | Txn Hash | Block "
-											// placeholder="Search by Address / Txn Hash / Block / Token / Domain Name"
+											placeholder="Search by Address | Txn Hash | Block"
 											name="search"
 											value={values.search}
 											onChange={(e) => {
@@ -141,7 +144,6 @@ export default function Home() {
 												formik.handleBlur(e);
 											}}
 										/>
-
 										<button
 											className="flex items-center gap-x-2"
 											disabled={!dirty || !touched || !formik.isValid}
@@ -308,7 +310,7 @@ export default function Home() {
 									href={ROUTES.blocks}
 									className="flex items-center justify-center gap-x-2 font-medium dark:text-white dark:hover:text-ablue-300 hover:text-ablue-200 text-abrandc-dark-grey leading-[26px] mt-3.5"
 								>
-									<span>VIEW ALL BLOCKS</span>	
+									<span>VIEW ALL BLOCKS</span>
 									<span>
 										<i className="fas fa-arrow-right"></i>
 									</span>
diff --git a/src/components/internal/chart/chart.component.tsx b/src/components/internal/chart/chart.component.tsx
index 37b7666..b94b271 100644
--- a/src/components/internal/chart/chart.component.tsx
+++ b/src/components/internal/chart/chart.component.tsx
@@ -137,7 +137,7 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
 				Transaction History in 14 Days
 			</h1>
 			<div className="">
-				<Chart options={options} series={series} type="area" width="100%" height={170} />{' '}
+				<Chart options={options} series={series} type="area" width="100%" height={150} />{' '}
 			</div>
 		</div>
 	);
diff --git a/src/components/internal/search-bar/search-bar.scss b/src/components/internal/search-bar/search-bar.scss
index d46a334..23ac21e 100644
--- a/src/components/internal/search-bar/search-bar.scss
+++ b/src/components/internal/search-bar/search-bar.scss
@@ -1,32 +1,42 @@
 .search-bar-container {
+	@apply cursor-pointer;
+
 	@apply w-full;
 	@apply px-6;
 	@apply py-2;
-
 	@apply flex;
 	@apply gap-x-4;
 
 	@apply border;
 	@apply border-agrey-300;
+	@apply hover:border-ablue-200;
+	@apply focus:border-abrandc-dark-black;
+	@apply focus-within:border-abrandc-dark-black;
+
+	@apply dark:focus-within:border-white;
+	@apply dark:focus:border-white;
+	@apply dark:hover:border-ablue-300;
 	@apply dark:border-agrey-800;
 	@apply rounded-2xl;
 }
-
 .search-bar-input {
 	@apply flex-grow;
 	@apply min-w-0;
 	@apply h-12;
 	@apply py-2;
+	@apply cursor-pointer;
+	@apply focus:outline-none;
 
 	@apply bg-transparent;
 
 	@apply text-agrey-600;
 
 	// focus
-	@apply focus:outline-none;
 }
 
 .search-bar-nav-container {
+	@apply cursor-pointer;
+
 	@apply w-full;
 	@apply px-6;
 	@apply py-2;
diff --git a/src/shared/api/responses/addresss/txn-history.response.ts b/src/shared/api/responses/addresss/txn-history.response.ts
index ca95638..1052f12 100644
--- a/src/shared/api/responses/addresss/txn-history.response.ts
+++ b/src/shared/api/responses/addresss/txn-history.response.ts
@@ -54,7 +54,7 @@ export type AddressTxnHistorySuccessResponse = {
 	};
 
 	//
-	fistLastTransactions: firstLastTransactions;
+	firstLastTransactions: firstLastTransactions;
 };
 
 type AddressTxnHistoryFailureResponse = {

From ad612daa9d441beb34cb81b9f1f8efc9942bad6b Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Fri, 6 Sep 2024 17:14:23 +0300
Subject: [PATCH 12/14] fix chart

---
 .../internal/chart/chart.component.tsx        | 253 +++++++++---------
 1 file changed, 129 insertions(+), 124 deletions(-)

diff --git a/src/components/internal/chart/chart.component.tsx b/src/components/internal/chart/chart.component.tsx
index b94b271..6c65da5 100644
--- a/src/components/internal/chart/chart.component.tsx
+++ b/src/components/internal/chart/chart.component.tsx
@@ -4,143 +4,148 @@ import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 type TransactionData = {
-	[key: number]: number;
+    [key: number]: number;
 };
 
 type TransactionChartProps = {
-	data: TransactionData;
+    data: TransactionData;
 };
 
 const TransactionChart = ({ data }: TransactionChartProps) => {
-	const [seriesData, setSeriesData] = useState<number[]>([]);
-	const [categories, setCategories] = useState<string[]>(['192']);
+    const [seriesData, setSeriesData] = useState<number[]>([]);
+    const [categories, setCategories] = useState<string[]>(['192']);
 
-	useEffect(() => {
-		if (data && Object.keys(data).length > 0) {
-			const dates = Object.keys(data).map((timestamp) => {
-				const date = new Date(parseInt(timestamp) * 1000);
-				return date.toLocaleDateString('en-US', {
-					month: 'short',
-					day: 'numeric',
-				});
-			});
-			const values = Object.values(data);
+    useEffect(() => {
+        if (data && Object.keys(data).length > 0) {
+            const dates = Object.keys(data).map((timestamp) => {
+                const date = new Date(parseInt(timestamp) * 1000);
+                return date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                });
+            });
+            const values = Object.values(data);
 
-			setCategories(dates);
-			setSeriesData(values);
-		}
-	}, [data]);
+            setCategories(dates);
+            setSeriesData(values);
+        }
+    }, [data]);
 
-	const minValue = Math.min(...seriesData);
-	const maxValue = Math.max(...seriesData);
+    const minValue = Math.min(...seriesData);
+    const maxValue = Math.max(...seriesData);
 
-	const options: ApexOptions = {
-		chart: {
-			type: 'area',
-			toolbar: { show: false },
-			zoom: { enabled: false },
-		},
-		dataLabels: { enabled: false },
-		stroke: { curve: 'smooth', width: 2, colors: ['#112FF8'] }, // Updated line color to #112FF8
-		grid: { show: false },
-		xaxis: {
-			type: 'category',
-			categories,
-			labels: {
-				show: true,
-				style: {
-					colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
-					fontSize: '12px', // Adjust font size if necessary
-					fontWeight: 'bold',
-				},
-				rotate: 0, // Prevents diagonal rotation
-				formatter: function (value: any, arg2: any) {
-					// Show only the first day, middle day, and last day
-					const idx = categories.indexOf(value);
+    const options: ApexOptions = {
+        chart: {
+            type: 'area',
+            toolbar: { show: false },
+            zoom: { enabled: false },
+        },
+        dataLabels: { enabled: false },
+        stroke: { curve: 'smooth', width: 2, colors: ['#112FF8'] }, // Updated line color to #112FF8
+        grid: { show: false },
+        xaxis: {
+            type: 'category',
+            categories,
+            labels: {
+                show: true,
+                style: {
+                    colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
+                    fontSize: '12px', // Adjust font size if necessary
+                    fontWeight: 'bold',
+                },
+                rotate: 0, // Prevents diagonal rotation
+                formatter: function (value: any, timestamp: any) {
+                    // Show only the first day, middle day, and last day
+                    const idx = categories.indexOf(value);
 
-					if (idx === 0 || idx === 6 || idx === 13) {
-						return value;
-					}
-					return '';
-				},
-			}, // Show x-axis labels
-			axisBorder: { show: false },
-			axisTicks: { show: false },
-		},
-		yaxis: {
-			show: true, // Show y-axis labels
-			labels: {
-				formatter: (value, ops) => {
-					if (value === minValue || value === maxValue) {
-						return `${value / 1000}k`;
-					}
-					return '';
-				},
-				style: {
-					colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
-					fontSize: '12px', // Adjust font size if necessary
-					fontWeight: 'bold',
-				},
-			},
-			min: minValue,
-			max: maxValue,
-		},
-		tooltip: {
-			enabled: true,
-			x: {
-				formatter: (value, { dataPointIndex }) => {
-					return categories[dataPointIndex] ? categories[dataPointIndex] : 'N/A';
-				},
-			},
-		},
-		markers: {
-			size: 0, // No visible points on the chart
-		},
-		fill: {
-			type: 'gradient',
-			gradient: {
-				shade: 'light',
-				type: 'vertical',
-				shadeIntensity: 1,
-				gradientToColors: ['rgba(224, 223, 234, 0)'], // Transparent part of the gradient
-				inverseColors: false,
-				opacityFrom: 1, // Full opacity at the start
-				opacityTo: 0, // Fully transparent at the end
-				stops: [0, 100],
-				colorStops: [
-					{
-						offset: 0,
-						color: '#CCCCFE', // Start color (matching #CCCCFE)
-						opacity: 1,
-					},
-					{
-						offset: 100,
-						color: 'rgba(224, 223, 234, 0)', // End color
-						opacity: 0,
-					},
-				],
-			},
-		},
-		colors: ['#112FF8'], // Line color to #112FF8
-	};
+                    if (idx === 0 || idx === 6 || idx === 13) {
+                        return value;
+                    }
+                    return '';
+                },
+            }, // Show x-axis labels
+            axisBorder: { show: false },
+            axisTicks: { show: false },
+        },
+        yaxis: {
+            show: true, // Show y-axis labels
+            labels: {
+                formatter: (value) => {
+                    if (value === minValue || value === maxValue) {
+                        return `${value / 1000}k`;
+                    }
+                    return '';
+                },
+                style: {
+                    colors: '#737289', // Custom color for Y-axis labels (change to your desired color)
+                    fontSize: '12px', // Adjust font size if necessary
+                    fontWeight: 'bold',
+                },
+            },
+            min: minValue,
+            max: maxValue,
+        },
+        tooltip: {
+            enabled: true,
+            x: {
+                formatter: (value, { dataPointIndex }) => {
+                    return categories[dataPointIndex] ? categories[dataPointIndex] : 'N/A';
+                },
+            },
+            y: {
+                formatter: (value) => {
+                    return value.toString();
+                },
+            },
+        },
+        markers: {
+            size: 0, // No visible points on the chart
+        },
+        fill: {
+            type: 'gradient',
+            gradient: {
+                shade: 'light',
+                type: 'vertical',
+                shadeIntensity: 1,
+                gradientToColors: ['rgba(224, 223, 234, 0)'], // Transparent part of the gradient
+                inverseColors: false,
+                opacityFrom: 1, // Full opacity at the start
+                opacityTo: 0, // Fully transparent at the end
+                stops: [0, 100],
+                colorStops: [
+                    {
+                        offset: 0,
+                        color: '#CCCCFE', // Start color (matching #CCCCFE)
+                        opacity: 1,
+                    },
+                    {
+                        offset: 100,
+                        color: 'rgba(224, 223, 234, 0)', // End color
+                        opacity: 0,
+                    },
+                ],
+            },
+        },
+        colors: ['#112FF8'], // Line color to #112FF8
+    };
 
-	const series = [
-		{
-			name: 'Transactions',
-			data: seriesData.length ? seriesData : [0],
-		},
-	];
+    const series = [
+        {
+            name: 'Transactions',
+            data: seriesData.length ? seriesData : [0],
+        },
+    ];
 
-	return (
-		<div className="w-full h-48 bg-agrey-50 dark:bg-agrey-900 p-4 rounded-md">
-			<h1 className="text-agrey-600 text-sm font-medium leading-normal uppercase">
-				Transaction History in 14 Days
-			</h1>
-			<div className="">
-				<Chart options={options} series={series} type="area" width="100%" height={150} />{' '}
-			</div>
-		</div>
-	);
+    return (
+        <div className="w-full h-48 bg-agrey-50 dark:bg-agrey-900 p-4 rounded-md">
+            <h1 className="text-agrey-600 text-sm font-medium leading-normal uppercase">
+                Transaction History in 14 Days
+            </h1>
+            <div className="">
+                <Chart options={options} series={series} type="area" width="100%" height={150} />{' '}
+            </div>
+        </div>
+    );
 };
 
 export default TransactionChart;
\ No newline at end of file

From ccbd36d74d3d3b5292bc799e9798de2662c5f4f5 Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Fri, 6 Sep 2024 17:52:58 +0300
Subject: [PATCH 13/14]  fix voting pwr

---
 src/app/(header-footer-layout)/nodes/page.tsx     | 5 +++--
 src/shared/api/responses/nodes/nodes-responses.ts | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/(header-footer-layout)/nodes/page.tsx b/src/app/(header-footer-layout)/nodes/page.tsx
index d3401c9..6c3ff54 100644
--- a/src/app/(header-footer-layout)/nodes/page.tsx
+++ b/src/app/(header-footer-layout)/nodes/page.tsx
@@ -255,8 +255,9 @@ export default function Nodes() {
 										<td className="xl:px-8 px-2 py-8">
 											<div className="flex justify-center items-center">
 												<h1 className="dark:bg-agrey-800 bg-ghostly_grey-50 rounded-lg dark:text-white  text-abrandc-dark-grey text-sm py-1 px-2 text-center w-auto">
-													{node.votingPower}%
-												</h1>
+													{node.votingPowerInPwr} /{' '}
+													{node.votingPowerInPercentage}%
+												</h1>	
 											</div>
 										</td>
 
diff --git a/src/shared/api/responses/nodes/nodes-responses.ts b/src/shared/api/responses/nodes/nodes-responses.ts
index 9fc6868..8ac1849 100644
--- a/src/shared/api/responses/nodes/nodes-responses.ts
+++ b/src/shared/api/responses/nodes/nodes-responses.ts
@@ -1,9 +1,10 @@
 type Node = {
-	votingPower: number;
+	votingPowerInPwr: number;
 	earnings: number;
 	address: string;
 	blocksSubmitted: number;
 	host: string;
+	votingPowerInPercentage: number;
 };
 
 export type NodesSuccessResponse = {

From fdd39e58b751e27028c349fc313cd141fe3f2636 Mon Sep 17 00:00:00 2001
From: ahmadhss366 <ahmadhss366@gmail.com>
Date: Mon, 9 Sep 2024 10:48:39 +0300
Subject: [PATCH 14/14] fix chart issues

---
 src/components/internal/chart/chart.component.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/internal/chart/chart.component.tsx b/src/components/internal/chart/chart.component.tsx
index 6c65da5..272e773 100644
--- a/src/components/internal/chart/chart.component.tsx
+++ b/src/components/internal/chart/chart.component.tsx
@@ -69,10 +69,14 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
         },
         yaxis: {
             show: true, // Show y-axis labels
+            min: Math.floor(minValue / 1000) * 1000,
+            max: Math.ceil(maxValue / 1000) * 1000,
             labels: {
                 formatter: (value) => {
-                    if (value === minValue || value === maxValue) {
-                        return `${value / 1000}k`;
+                    if (value === Math.floor(minValue / 1000) * 1000) {
+                        return `${Math.floor(value / 1000)}k`;
+                    } else if (value === Math.ceil(maxValue / 1000) * 1000) {
+                        return `${Math.ceil(value / 1000)}k`;
                     }
                     return '';
                 },
@@ -82,8 +86,6 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
                     fontWeight: 'bold',
                 },
             },
-            min: minValue,
-            max: maxValue,
         },
         tooltip: {
             enabled: true,
@@ -94,7 +96,7 @@ const TransactionChart = ({ data }: TransactionChartProps) => {
             },
             y: {
                 formatter: (value) => {
-                    return value.toString();
+                    return Math.round(value).toString();
                 },
             },
         },