Search and Footer Adjustment

pwrlabs · Jun 7, 2024 · 1e2568b · 1e2568b
1 parent 21cd302
commit 1e2568b
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 86 deletions.
diff --git a/src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx b/src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx
@@ -75,7 +75,22 @@ export default function SingleBlock({ params }: BlockTransactionsProps) {
 								</div>
 								<h2 className="text-sm">{blockNum}</h2>
 							</div>
-
+							<div className="lg:flex space-y-2">
+								<div className="flex items-center gap-x-2 w-[300px]">
+									<h1 className="text-agrey-500 dark:text-agrey-600 text-sm">
+										Status
+									</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-center dark:bg-gray-800 text-green-500 text-bold border border-green-500 rounded-lg px-3 ">
+									<div className="bg-green-500 rounded-full h-4 w-4 flex items-center justify-center">
+										{/* Placeholder for the check icon */}
+									</div>
+									<span className="ml-2 py-1">Success</span>
+								</div>
+							</div>
 							{/* Timestamp */}
 							<div className="lg:flex space-y-2">
 								<div className="flex items-center gap-x-2 w-[300px]">

diff --git a/src/app/(header-footer-layout)/blocks/page.tsx b/src/app/(header-footer-layout)/blocks/page.tsx
@@ -189,11 +189,10 @@ 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">

diff --git a/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx b/src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
@@ -121,6 +121,22 @@ export default function TransactionDetails({ params }: TransactionDetailsProps)
 								</div>
 								<h2>{txnData.size}</h2>
 							</div>
+							<div className="lg:flex space-y-2">
+								<div className="flex items-center gap-x-2 w-[300px]">
+									<h1 className="text-agrey-500 dark:text-agrey-600 text-sm">
+										Status
+									</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-center dark:bg-gray-800 text-green-500 text-bold border border-green-500 rounded-lg px-3 ">
+									<div className="bg-green-500 rounded-full h-4 w-4 flex items-center justify-center">
+										{/* Placeholder for the check icon */}
+									</div>
+									<span className="ml-2 py-1">Success</span>
+								</div>
+							</div>
 
 							{/* Block */}
 							<div className="lg:flex space-y-2">

diff --git a/src/app/(header-footer-layout)/transactions/page.tsx b/src/app/(header-footer-layout)/transactions/page.tsx
@@ -224,11 +224,10 @@ 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">
@@ -247,6 +246,7 @@ export default function Transactions() {
 															usdFee={txn.txnFeeInUsd}
 															fee={txn.txnFee}
 															nonce={txn.nonceOrValidationHash}
+
 														/>
 													</div>
 												</div>

diff --git a/src/app/(header-footer-layout)/transactions/transactions.scss b/src/app/(header-footer-layout)/transactions/transactions.scss
@@ -11,6 +11,11 @@
 	.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;
@@ -38,4 +43,4 @@
 			// box-shadow: px 0 2px 5px rgba(0, 0, 0, 0.1);
 		}
 	}
-}
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -101,13 +101,12 @@ export default function Home() {
 								The PWR Chain Explorer
 							</h1>
 							{/* Search */}
-							<form onSubmit={handleSubmit} className="w-full lg:w-[800px]">
+							<form onSubmit={formik.handleSubmit} className="w-full lg:w-[800px]">
 								<div className="field">
 									{/* input contianer */}
 									<div
-										className={`search-bar-container  ${
-											errors.search ? ' !border-ared-500' : ''
-										}`}
+										className={`search-bar-container  ${formik.errors.search ? ' !border-ared-500' : ''
+											}`}
 									>
 										{/* Filter */}
 										{/* <div className="">
@@ -128,8 +127,16 @@ export default function Home() {
 											// placeholder="Search by Address / Txn Hash / Block / Token / Domain Name"
 											name="search"
 											value={values.search}
-											onChange={handleChange}
-											onBlur={handleBlur}
+											onChange={(e) => {
+												const trimmedValue = e.target.value.trim();
+												formik.setFieldValue('search', trimmedValue);
+												formik.handleChange(e);
+											}}
+											onBlur={(e) => {
+												const trimmedValue = e.target.value.trim();
+												formik.setFieldValue('search', trimmedValue);
+												formik.handleBlur(e);
+											}}
 										/>
 
 										<button
@@ -170,11 +177,10 @@ 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>
@@ -287,11 +293,10 @@ 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>
@@ -322,11 +327,10 @@ 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/tooltip/tooltip.scss b/src/components/internal/tooltip/tooltip.scss
@@ -112,4 +112,4 @@
 	to {
 		opacity: 0;
 	}
-}
+}
diff --git a/src/components/internal/transaction-tooltip-details/transaction-tooltip-details.tsx b/src/components/internal/transaction-tooltip-details/transaction-tooltip-details.tsx
@@ -5,41 +5,41 @@ import Image from 'next/image';
 import { BnToDec } from 'src/shared/utils/formatters';
 
 type TransactionTooltipDetailsProps = {
+
 	fee: string;
 	usdFee: number;
 	nonce: string;
 };
 
 const TransactionTooltipDetails = ({ fee, usdFee, nonce }: TransactionTooltipDetailsProps) => {
 	return (
-		<div className=" flex flex-col gap-3 p-3  dark:bg-abrandc-dark-blackish bg-white text-agrey-900 dark:text-white    rounded-2xl z-10 shadow-3xl  w-80 z-index-3">
-			<div>
+		<div className="flex flex-col gap-3 p-3 dark:bg-abrandc-dark-blackish bg-white text-agrey-900 dark:text-white rounded-2xl   w-60 z-index-3">
+			<div className="text-left p-1">
 				<h1>Additional Info</h1>
 			</div>
-			<div className="border-b border-agrey-800 p-1">
+			<div className="border-b border-agrey-800 p-1 text-left">
 				<p className="text-agrey-600">Block</p>
-				<div className="flex item-center gap-1">
+				<div className="flex items-center gap-1">
 					<Image
-						src="/icons/verification.png "
+						src="/icons/verification.png"
 						width={25}
 						height={25}
 						className="inline-block"
 						alt=""
 					/>
 					<p className="text-abrandc-dark-green">success</p>
-					{/* <p className="text-agrey-600"> (1 block confirmation)</p> */}
 				</div>
 			</div>
-			<div className="border-b border-agrey-800 p-1">
+			<div className="border-b border-agrey-800 p-1 text-left">
 				<p className="text-agrey-600">Transaction Fee:</p>
 				<p>
 					{BnToDec(fee, 9, 9)} <span>(${usdFee})</span>
 				</p>
 			</div>
-			<div>
+			<div className="text-left p-1">
 				<p className="text-agrey-600">Nonce</p>
 				<p>
-					{nonce}{' '}
+					{nonce}
 					{/* <span className="font-normal text-agrey-600">(in the position 149)</span> */}
 				</p>
 			</div>

diff --git a/src/layout/footer/footer.component.tsx b/src/layout/footer/footer.component.tsx
@@ -61,39 +61,39 @@ export default function FooterComponent() {
 	const formik = useFormik({
 		initialValues: { email: '' },
 		validationSchema: yup.object({
-		  email: yup.string().email('Invalid email address').required('Input is empty, fill your email'),
+			email: yup.string().email('Invalid email address').required('Input is empty, fill your email'),
 		}),
 		onSubmit: (values) => {
-		  // Intentionally left empty for custom handling outside Formik
+			// Intentionally left empty for custom handling outside Formik
 		},
-	  });
-	  
-	  // Custom submission handler
-	  const handleFormSubmit = async (e:any) => {
+	});
+
+	// Custom submission handler
+	const handleFormSubmit = async (e: any) => {
 		e.preventDefault();
 		await formik.validateForm();
 		formik.setTouched({ email: true });
-	  
+
 		if (!formik.isValidating && !formik.errors.email) {
-		  // Simulate API call or some operation with the email
-		  console.log("Form submitted with email:", formik.values.email);
-		  setNotification({ message: 'You have successfully subscribed to our newsletter!', type: 'success' });
-		  setShowNotification(true);
-		  setTimeout(() => {
-			setShowNotification(false);
-		  }, 3000);
-		  
-		  // Reset the form (optional)
-		  formik.resetForm();
+			// Simulate API call or some operation with the email
+			console.log("Form submitted with email:", formik.values.email);
+			setNotification({ message: 'You have successfully subscribed to our newsletter!', type: 'success' });
+			setShowNotification(true);
+			setTimeout(() => {
+				setShowNotification(false);
+			}, 3000);
+
+			// Reset the form (optional)
+			formik.resetForm();
 		} else if (formik.errors.email) {
-		  setNotification({ message: formik.errors.email, type: 'error' });
-		  setShowNotification(true);
-		  setTimeout(() => {
-			setShowNotification(false);
-		  }, 3000);
+			setNotification({ message: formik.errors.email, type: 'error' });
+			setShowNotification(true);
+			setTimeout(() => {
+				setShowNotification(false);
+			}, 3000);
 		}
-	  };
-	
+	};
+
 
 	const [email, setEmail] = useState('');
 	const [notification, setNotification] = useState({ message: '', type: '' });
@@ -155,9 +155,8 @@ export default function FooterComponent() {
 						</div>
 						{showNotification && (
 							<div
-								className={`mt-4 text-center text-white px-6 py-2 rounded-md notification ${
-									notification.type === 'success' ? 'success' : 'error'
-								} ${showNotification ? 'show' : ''}`}
+								className={`mt-4 text-center text-white px-6 py-2 rounded-md notification ${notification.type === 'success' ? 'success' : 'error'
+									} ${showNotification ? 'show' : ''}`}
 							>
 								{notification.message}
 							</div>
@@ -186,7 +185,7 @@ export default function FooterComponent() {
 
 				<div className="flex flex-col md:flex-row justify-between gap-y-5">
 					<h1 className="text-sm font-medium mt-[30px] dark:text-white text-abrandc-dark-black">
-						@WOM Protocol Pte. Ltd. All Rights reserved
+						@PWR Labs. Ltd. All Rights reserved
 					</h1>
 					<div className="flex gap-x-12 md:px-8 text-sm font-medium text-agrey-600 items-start md:items-center">
 						<Link href="#">Terms</Link>

diff --git a/src/layout/header/header.component.tsx b/src/layout/header/header.component.tsx
@@ -202,9 +202,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="">
@@ -266,9 +265,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>
@@ -299,9 +297,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="">
@@ -363,9 +360,8 @@ export default function HeaderComponent() {
 
 									<div>
 										<i
-											className={`fa-lg far fa-angle-${
-												blockchainOpened ? 'up' : 'down'
-											}`}
+											className={`fa-lg far fa-angle-${blockchainOpened ? 'up' : 'down'
+												}`}
 										></i>
 									</div>
 								</button>
@@ -407,9 +403,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>