Skip to content

Bug#167 #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

Bug#167 #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3fbc9ab
Fixed table alignment issues across all tables in the explorer
NIKHILNAIR21 Aug 23, 2024
d92f54c
Fixed table alignment issues across all tables in the explorer
NIKHILNAIR21 Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/common/Token.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function Token({ icon, text, copyIcon, type, onTokenClicked, value, eyes }: Toke
const renderString = showText ? text : shortenString(text, eyes);

return (
<div className="flex items-center gap-2.5">
<div className="flex items-center justify-center gap-2.5">
{icon && <img src={icon} alt="" style={{ width: '20px', height: '20px' }} />}
{onTokenClicked ? (
<a onClick={() => onTokenClicked(value ? value : 0)} className="text-blue-200 cursor-pointer">
Expand Down
10 changes: 5 additions & 5 deletions src/components/common/status/Status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ export default function Status({ type, status, ago }: { type?: boolean; status?:
return (
<div>
{type === true && (
<span className="flex items-center px-3 py-px gap-2 rounded-full border border-[#4CAF50]">
<span className="flex items-center px-3 py-px gap-2 rounded-full border border-[#4CAF50]">
<img src="/images/Success.svg" alt="" />
<span className="font-normal text-[12px] leading-5 text-dark-600">Success</span>
</span>
)}
{type === false && (status == 'failed' || status == 'FAILED') && (
<span className="flex items-center px-3 py-px gap-2 rounded-full border border-[#d81a14]">
<span className="flex items-center px-3 py-px gap-2 rounded-full border border-[#d81a14]">
<img src="/images/failed.svg" alt="" />
<span className="font-normal text-[12px] leading-5 text-dark-600">Failed</span>
</span>
)}
{status === 'pending' && (
<span className="flex items-center px-3 py-px gap-2 rounded-full border border-[#d81a14]">
<span className="flex items-center px-3 py-px gap-2 rounded-full border border-[#d81a14]">
<img src="/images/pending.svg" alt="" />
<span className="font-normal text-[12px] leading-5 text-dark-600">Failed</span>
</span>
Expand All @@ -34,12 +34,12 @@ export default function Status({ type, status, ago }: { type?: boolean; status?:
</span>
)}
{status === 'success' && (
<span className="flex items-cente gap-2 rounded-full">
<span className="flex justify-center items-center gap-2 rounded-full">
<img src="/images/Success.svg" alt="" /> <span className="tracking-normal whitespace-nowrap">{ago}</span>
</span>
)}
{status === 'failure' && (
<span className="flex items-center gap-2 rounded-full">
<span className="flex justify-center items-center gap-2 rounded-full">
<img src="/images/failed.svg" alt="" /> <span className="tracking-normal whitespace-nowrap">{ago}</span>
</span>
)}
Expand Down
195 changes: 102 additions & 93 deletions src/components/common/table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 (
<div className="">
{!hideHeader && caption?.text && <Caption icon={caption?.icon!} text={caption?.text}>
{caption?.children}
</Caption>}
{!hideHeader && caption?.text && (
<Caption icon={caption?.icon!} text={caption?.text}>
{caption?.children}
</Caption>
)}
<ScrollContainer>
<div style={width < 768 ? { minWidth: columns?.length * 160 } : {}}>
<table className="w-full bg-white border text-md shadow-200 border-dark-100">
Expand All @@ -95,14 +97,14 @@ function Table(props: tableDataT) {
return (
<th
key={key}
className={`py-3.5 px-4 border-b border-dark-100 group ${
className={`py-3.5 px-4 border-b border-dark-100 text-center group ${
columns.length <= 3 ? 'md:first:wx-[55%]' : ''
}`}
>
<div
role={sort ? 'button' : undefined}
className={`flex items-center gap-2.5 ${
columns.length <= 3 ? 'group-last:justify-end' : ''
className={`flex items-center justify-center gap-2.5 ${
columns.length <= 3 ? 'group-last:justify-center' : ''
}`}
onClick={() => sort && handleSort()}
>
Expand Down Expand Up @@ -130,85 +132,92 @@ function Table(props: tableDataT) {
</tbody>
) : (
<tbody>
{sortedRows?.map(({ ago, fee, sender, target, token, userOps, status, count, poweredBy, created, keys }, index) => {
return (
<tr
key={index}
className="[&_td]:border-b User_Operations_table [&_td]:border-dark-100 [&_td]:py-3.5 [&_td]:px-4 odd:bg-dark-25 hover:bg-dark-25"
>
{token && (
<td className="">
<Token {...token} />
</td>
)}
{sortedRows?.map(
({ ago, fee, sender, target, token, userOps, status, count, poweredBy, created, keys }, index) => {
return (
<tr
key={index}
className="[&_td]:border-b User_Operations_table [&_td]:border-dark-100 [&_td]:py-3.5 [&_td]:px-4 odd:bg-dark-25 hover:bg-dark-25"
>
{token && (
<td className="flex justify-center">
<Token {...token} />
</td>
)}

{ago && (
<td className="">
{status === true ? (
<Status status="success" ago={ago} />
) : (
<>
{status === false ? (
<Status status="failure" ago={ago} />
) : (
<span className="tracking-normal">{ago}</span>
)}
</>
)}
</td>
)}

{ago && (
<td className="">
{status === true ? (
<Status status="success" ago={ago} />
) : (
<>
{status === false ? (
<Status status="failure" ago={ago} />
) : (
<span className="tracking-normal">{ago}</span>
)}
</>
)}
</td>
)}

{userOps && (
<td className="">
<span className="block text-center">{userOps}</span>
</td>
)}
{keys && (
<td className="">
<Token text={keys} type="address" eyes/>
</td>
)}
{sender && (
<td className="">
<Token text={sender} type="address" />
</td>
)}
{userOps && (
<td className="">
<span className="block text-center">{userOps}</span>
</td>
)}
{keys && (
<td className="">
<Token text={keys} type="address" eyes />
</td>
)}
{sender && (
<td className="">
<Token text={sender} type="address" />
</td>
)}

{target && (
<td className="">

{ target.length > 0 && target.map((item, index) => {
return (
<Token key={index} text={item} type="address" />
)
})}
</td>
)}
{target && (
<td className="flex items-center justify-center">
{target.length > 0 &&
target.map((item, index) => {
return <Token key={index} text={item} type="address" />;
})}
</td>
)}

{fee && (
<td className="">
<div className="flex items-center justify-end gap-2 text-right">
{fee.value ? <span>{typeof fee.value == "string" ? fee.value : parseInt(fee.value.hex)}</span> : "Unavailable" }
{fee.gas && fee.value && (
<Chip variant="outlined" color={fee.gas.color as ChipProps['color']} className='cursor-default'>
{fee.gas.children}
</Chip>
)}
{fee.component && fee.component}
</div>
</td>
)}
{created && (
<td className="">
<div className="flex items-center justify-end gap-2 text-right">
{created}
</div>
</td>
)}
</tr>
);
})}
{fee && (
<td className="">
<div className="flex items-center justify-center gap-2.5 ">
{fee.value ? (
<span>
{typeof fee.value == 'string' ? fee.value : parseInt(fee.value.hex)}
</span>
) : (
'Unavailable'
)}
{fee.gas && fee.value && (
<Chip
variant="outlined"
color={fee.gas.color as ChipProps['color']}
className="cursor-default"
>
{fee.gas.children}
</Chip>
)}
{fee.component && fee.component}
</div>
</td>
)}
{created && (
<td className="">
<div className="flex items-center justify-end gap-2 text-right">{created}</div>
</td>
)}
</tr>
);
},
)}
</tbody>
)}
</table>
Expand Down