Skip to content

Commit

Permalink
main from dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@RawadKadi
RawadKadi committed Jun 7, 2024
2 parents 6b85af6 + 1e2568b commit 22aa685
Show file tree
Hide file tree
Showing 13 changed files with 200 additions and 110 deletions.
17 changes: 16 additions & 1 deletion src/app/(header-footer-layout)/blocks/[blocknumber]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand Down
8 changes: 5 additions & 3 deletions src/app/(header-footer-layout)/blocks/[blocknumber]/transactions/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default function BlockTransactions({ params }: BlockTransactionsProps) {
isLoading: blocktxns_loading,
isError: blocktxns_error,
} = useQuery(
[QUERY_KEYS.block_txns, blockNum],
[QUERY_KEYS.block_txns, blockNum, page, count], // Include page and count in the query key
() => QueryApi.blocks.allTxn(blockNum, page, count),
{
staleTime: 1000 * 60 * 5,
Expand All @@ -96,8 +96,10 @@ export default function BlockTransactions({ params }: BlockTransactionsProps) {
}
);

function handlePageChange(page: number) {
setPage(page);
function handlePageChange(newPage: number) {
setPage(newPage);
// Optionally, log to ensure this function is called correctly
console.log("Changing to page:", newPage);
}

if (blocktxns_error || (!blocktxns_loading && !blocktxns_data)) return <ErrorComponent />;
Expand Down
9 changes: 4 additions & 5 deletions src/app/(header-footer-layout)/blocks/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
16 changes: 16 additions & 0 deletions src/app/(header-footer-layout)/transactions/[txnhash]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
12 changes: 6 additions & 6 deletions src/app/(header-footer-layout)/transactions/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -247,6 +246,7 @@ export default function Transactions() {
usdFee={txn.txnFeeInUsd}
fee={txn.txnFee}
nonce={txn.nonceOrValidationHash}

/>
</div>
</div>
Expand Down Expand Up @@ -281,7 +281,7 @@ export default function Transactions() {
<td className="xl:pl-8 pl-2 pr-2 py-8">
<div className="flex gap-x-2 justify-center">
<Link
href="/"
href={`${ROUTES.address}/${txn.from}`}
className="dark:text-ablue-100 text-ablue-500 font-medium"
>
{shortenAddress(txn.from, 4)}
Expand Down
7 changes: 6 additions & 1 deletion src/app/(header-footer-layout)/transactions/transactions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -38,4 +43,4 @@
// box-shadow: px 0 2px 5px rgba(0, 0, 0, 0.1);
}
}
}
}
46 changes: 25 additions & 21 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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="">
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/internal/pagination/pagination.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export default function Pagination({ metadata, onPageChange }: PaginationProps)
: '2px solid transparent',
transition: 'border 0.7s ease', // Add a transition for the border
}}
className="rounded-lg bg-abrandc-light-grey dark:bg-abrandc-dark-grey focus:outline-none text-agray-900 dark:text-white pl-4 h-8 w-[50px]"
className="rounded-lg bg-abrandc-light-grey dark:bg-abrandc-dark-grey focus:outline-none text-black dark:text-white pl-4 h-8 w-[50px]"
type="number"
onFocus={(e) => (e.target as HTMLInputElement).select()} // Select the entire text on input focus
onChange={(e) => setInputValue(parseInt(e.target.value, 10))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/internal/tooltip/tooltip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,4 +112,4 @@
to {
opacity: 0;
}
}
}
18 changes: 9 additions & 9 deletions src/components/internal/transaction-tooltip-details/transaction-tooltip-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
51 changes: 35 additions & 16 deletions src/layout/footer/footer.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,22 +58,42 @@ export default function FooterComponent() {
];

// *~~*~~*~~ Formik ~~*~~*~~* //
const { handleSubmit, values, handleChange } = useFormik({
initialValues: {
email: '',
},
const formik = useFormik({
initialValues: { email: '' },
validationSchema: yup.object({
email: yup.string().email('Invalid email address').required('Required'),
email: yup.string().email('Invalid email address').required('Input is empty, fill your email'),
}),
onSubmit: (values) => {
// Show notification and set a timer to hide it after 3 seconds
// Intentionally left empty for custom handling outside Formik
},
});

// 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);
setInputError(false); // Reset input error to 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);
}
};


const [email, setEmail] = useState('');
const [notification, setNotification] = useState({ message: '', type: '' });
Expand Down Expand Up @@ -115,7 +135,7 @@ export default function FooterComponent() {

{/* Newsletter */}

<form onSubmit={handleSubmit} className="flex flex-col gap-y-2 mt-2">
<form onSubmit={handleFormSubmit} className="flex flex-col gap-y-2 mt-2">
<h2 className="text-sm dark:text-white text-abrandc-dark-black font-medium">
Join our newsletter
</h2>
Expand All @@ -124,9 +144,9 @@ export default function FooterComponent() {
<input
className={`text-field ${inputError ? 'invalid' : ''}`}
placeholder="Enter your email"
value={values.email}
value={formik.values.email}
name="email"
onChange={handleChange}
onChange={formik.handleChange}
/>
</div>
<Button className="blue medium w-[116px]" type="submit">
Expand All @@ -135,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>
Expand Down Expand Up @@ -166,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>
Expand Down
Loading

0 comments on commit 22aa685

Please sign in to comment.