From 3fbc9ab16f4203b92c6fea5b52e3a090d980c7fa Mon Sep 17 00:00:00 2001 From: NiKHIL NAIR Date: Fri, 23 Aug 2024 11:38:27 +0530 Subject: [PATCH 1/2] Fixed table alignment issues across all tables in the explorer --- src/components/common/Token.tsx | 2 +- src/components/common/status/Status.tsx | 10 +- src/components/common/table/Table.tsx | 195 +++++++++++++----------- 3 files changed, 108 insertions(+), 99 deletions(-) diff --git a/src/components/common/Token.tsx b/src/components/common/Token.tsx index 41b61384..6ff5f956 100644 --- a/src/components/common/Token.tsx +++ b/src/components/common/Token.tsx @@ -43,7 +43,7 @@ function Token({ icon, text, copyIcon, type, onTokenClicked, value, eyes }: Toke const renderString = showText ? text : shortenString(text, eyes); return ( -
+
{icon && } {onTokenClicked ? ( onTokenClicked(value ? value : 0)} className="text-blue-200 cursor-pointer"> diff --git a/src/components/common/status/Status.tsx b/src/components/common/status/Status.tsx index df0d2b09..53ff17da 100644 --- a/src/components/common/status/Status.tsx +++ b/src/components/common/status/Status.tsx @@ -4,19 +4,19 @@ export default function Status({ type, status, ago }: { type?: boolean; status?: return (
{type === true && ( - + Success )} {type === false && (status == 'failed' || status == 'FAILED') && ( - + Failed )} {status === 'pending' && ( - + Failed @@ -34,12 +34,12 @@ export default function Status({ type, status, ago }: { type?: boolean; status?: )} {status === 'success' && ( - + {ago} )} {status === 'failure' && ( - + {ago} )} diff --git a/src/components/common/table/Table.tsx b/src/components/common/table/Table.tsx index 83c1845b..139898d0 100644 --- a/src/components/common/table/Table.tsx +++ b/src/components/common/table/Table.tsx @@ -40,7 +40,7 @@ export interface tableDataT { } export interface fee { - value: string | { hex: string, type: string }; + value: string | { hex: string; type: string }; gas?: { children: string; color: string; @@ -51,41 +51,43 @@ export interface fee { function Table(props: tableDataT) { const { rows, columns, caption, onRowClick, hideHeader } = props; const [sortedRows, setSortedRows] = useState(rows); - const [sortOrder, setSortOrder] = useState("asc"); + const [sortOrder, setSortOrder] = useState('asc'); const width = useWidth(); let skeletonCards = Array(5).fill(0); const convertAgoToNumber = (ago: string): number => { - if (ago.includes("an")) return 1; - const [value, unit] = ago.split(" "); + if (ago.includes('an')) return 1; + const [value, unit] = ago.split(' '); switch (unit) { - case "hour": - case "hours": + case 'hour': + case 'hours': return parseInt(value); default: return Number.MAX_SAFE_INTEGER; } - } + }; const sortRowsAscending = (rows: tableDataT['rows']): typeof rows => { return [...rows].sort((a, b) => convertAgoToNumber(a.ago!) - convertAgoToNumber(b.ago!)); - } + }; const sortRowsDescending = (rows: tableDataT['rows']): typeof rows => { return [...rows].sort((a, b) => convertAgoToNumber(b.ago!) - convertAgoToNumber(a.ago!)); - } + }; const handleSort = () => { - const data = sortOrder === "asc" ? sortRowsAscending(sortedRows) : sortRowsDescending(sortedRows); + const data = sortOrder === 'asc' ? sortRowsAscending(sortedRows) : sortRowsDescending(sortedRows); setSortedRows(data); - setSortOrder(prevOrder => prevOrder === "asc" ? "desc" : "asc"); + setSortOrder((prevOrder) => (prevOrder === 'asc' ? 'desc' : 'asc')); }; - useEffect(() => { + useEffect(() => { setSortedRows(rows); }, [rows]); return (
- {!hideHeader && caption?.text && - {caption?.children} - } + {!hideHeader && caption?.text && ( + + {caption?.children} + + )}
@@ -95,14 +97,14 @@ function Table(props: tableDataT) { return ( ) : ( - {sortedRows?.map(({ ago, fee, sender, target, token, userOps, status, count, poweredBy, created, keys }, index) => { - return ( - - {token && ( - - )} + {sortedRows?.map( + ({ ago, fee, sender, target, token, userOps, status, count, poweredBy, created, keys }, index) => { + return ( + + {token && ( + + )} + {ago && ( + + )} - {ago && ( - - )} - - {userOps && ( - - )} - {keys && ( - - )} - {sender && ( - - )} + {userOps && ( + + )} + {keys && ( + + )} + {sender && ( + + )} - {target && ( - - )} + {target && ( + + )} - {fee && ( - - )} - {created && ( - - )} - - ); - })} + {fee && ( + + )} + {created && ( + + )} + + ); + }, + )} )}
sort && handleSort()} > @@ -130,85 +132,92 @@ function Table(props: tableDataT) {
- -
+ + + {status === true ? ( + + ) : ( + <> + {status === false ? ( + + ) : ( + {ago} + )} + + )} + - {status === true ? ( - - ) : ( - <> - {status === false ? ( - - ) : ( - {ago} - )} - - )} - - {userOps} - - - - - + {userOps} + + + + + - - { target.length > 0 && target.map((item, index) => { - return ( - - ) - })} - + {target.length > 0 && + target.map((item, index) => { + return ; + })} + -
- {fee.value ? {typeof fee.value == "string" ? fee.value : parseInt(fee.value.hex)} : "Unavailable" } - {fee.gas && fee.value && ( - - {fee.gas.children} - - )} - {fee.component && fee.component} -
- 		-
- {created} -
-
+
+ {fee.value ? ( + + {typeof fee.value == 'string' ? fee.value : parseInt(fee.value.hex)} + + ) : ( + 'Unavailable' + )} + {fee.gas && fee.value && ( + + {fee.gas.children} + + )} + {fee.component && fee.component} +
+ 		+
{created}
+
From d92f54c3c8ddc141186e2fc21e20c5139a1f5140 Mon Sep 17 00:00:00 2001 From: NiKHIL NAIR Date: Fri, 23 Aug 2024 12:47:21 +0530 Subject: [PATCH 2/2] Fixed table alignment issues across all tables in the explorer --- src/components/common/table/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/table/Table.tsx b/src/components/common/table/Table.tsx index 139898d0..2fdc8ad0 100644 --- a/src/components/common/table/Table.tsx +++ b/src/components/common/table/Table.tsx @@ -188,7 +188,7 @@ function Table(props: tableDataT) { {fee && ( -
+
{fee.value ? ( {typeof fee.value == 'string' ? fee.value : parseInt(fee.value.hex)}