Skip to content

Commit

Permalink
dev -> main (#136)
Browse files Browse the repository at this point in the history 
* Fix overflow table (#134)

* Change log

---------

Co-authored-by: Denis Dinkov <[email protected]>
  • Loading branch information
@DimitarTAtanasov @Denis-Dinkov
DimitarTAtanasov and Denis-Dinkov authored Nov 8, 2024
1 parent 998a5a1 commit 0b71209
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 135 deletions.
2 changes: 1 addition & 1 deletion src/utils/rpc/getBlockDetails.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ export const getBlockDetailsWithRawClient = async ({
try {
events = storageCodec.dec(storageValue) as Awaited<ReturnType<typeof getSystemEvents>>;
} catch (error) {
console.log('Could not decode storage value');
console.log('Could not decode storage value!');
}

// Initialize timestamp variable
Expand Down
271 changes: 138 additions & 133 deletions src/views/blockDetails/blockBody/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {

import { Icon } from '@components/icon';
import { ModalJSONViewer } from '@components/modals/modalJSONViewer';
import { PDScrollArea } from '@components/pdScrollArea';
import { Tabs } from '@components/tabs';
import { ToolTip } from '@components/tooltTip';
import { cn } from '@utils/helpers';
Expand Down Expand Up @@ -85,7 +86,7 @@ export const BlockBody = (props: BlockBodyProps) => {
]);

return (
<div className="grid gap-4 overflow-auto">
<div className="grid gap-4">
<Tabs
initialTab={initialTab}
onChange={setInitialTab}
Expand All @@ -96,67 +97,149 @@ export const BlockBody = (props: BlockBodyProps) => {
<div
data-title="Extrinsics"
>
<table className="w-full">
<colgroup>
<col className="min-w-28" />
<col className="min-w-24" />
<col className="min-w-24" />
<col className="min-w-20" />
<col className="min-w-24" />
<col className="min-w-12" />
</colgroup>
<thead>
<tr className={cn(
'bg-dev-purple-100 text-left',
'dark:bg-dev-black-900',
)}
>
<th className="py-4 pl-2 font-geist font-body2-bold">Extrinsic ID</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Height</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Time</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Result</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Action</th>
<th className="py-4 pl-2 font-geist font-body2-bold" />
</tr>
</thead>
<tbody>
{
visibleExtrinsics.map((extrinsic: IMappedBlockExtrinsic, extrinsicIndex: number) => {
const extrinsicTimestamp = extrinsic.timestamp || blockTimestamp;
const timeAgo = extrinsicTimestamp && formatDistanceToNowStrict(
new Date(extrinsicTimestamp),
{ addSuffix: true },
);
return (
<PDScrollArea className="w-80">
<table className="w-full">
<colgroup>
<col className="min-w-28" />
<col className="min-w-24" />
<col className="min-w-24" />
<col className="min-w-20" />
<col className="min-w-24" />
<col className="min-w-12" />
</colgroup>
<thead>
<tr className={cn(
'bg-dev-purple-100 text-left',
'dark:bg-dev-black-900',
)}
>
<th className="py-4 pl-2 font-geist font-body2-bold">Extrinsic ID</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Height</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Time</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Result</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Action</th>
<th className="py-4 pl-2 font-geist font-body2-bold" />
</tr>
</thead>
<tbody>
{
visibleExtrinsics.map((extrinsic: IMappedBlockExtrinsic, extrinsicIndex: number) => {
const extrinsicTimestamp = extrinsic.timestamp || blockTimestamp;
const timeAgo = extrinsicTimestamp && formatDistanceToNowStrict(
new Date(extrinsicTimestamp),
{ addSuffix: true },
);
return (
<tr
key={extrinsic.id}
data-index={extrinsicIndex}
data-type="extrinsic"
onClick={handleOpenModal}
className={cn(
'pd-table-row',
' text-dev-purple-600 dark:text-dev-purple-550',
)}
>
<td>{extrinsic.id}</td>
<td>{blockNumber}</td>
<td>{timeAgo}</td>
<td>
<Icon
name={extrinsic.isSuccess ? 'icon-checked' : 'icon-failed'}
size={[16]}
className={cn(
extrinsic.isSuccess ? 'text-dev-green-600' : 'text-dev-red-800',
)}
/>
</td>
<td>
{extrinsic.extrinsicData.method.section}
{' '}
(
{extrinsic.extrinsicData.method.method}
)
</td>
<td>
<ToolTip text="Expand the view">
<span className="inline-flex">
<Icon
className="text-dev-black-1000 dark:text-dev-purple-50"
name="icon-expand"
size={[18]}
/>
</span>
</ToolTip>
</td>
</tr>
);
})
}
</tbody>
</table>
</PDScrollArea>
{
bodyData.extrinsics.length > 3 && (
<div className="flex justify-center">
<button
className="mt-4 font-geist font-body2-bold"
data-type="extrinsic"
onClick={handleShowMore}
>
{showMoreExtrinsics ? 'Show Less' : 'Show More'}
</button>
</div>
)
}
</div>
<div
data-title="Events"
>
<PDScrollArea className="w-80">
<table className="w-full">
<colgroup>
<col className="min-w-28" />
<col className="min-w-36" />
<col className="min-w-36" />
<col className="min-w-10" />
</colgroup>
<thead>
<tr className={cn(
'bg-dev-purple-100 text-left',
'dark:bg-dev-black-900',
)}
>
<th className="py-4 pl-2 font-geist font-body2-bold">Event ID</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Action</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Type</th>
<th className="py-4 pl-2 font-geist font-body2-bold" />
</tr>
</thead>
<tbody>
{
visibleEvents.map((event: IMappedBlockEvent, eventIndex: number) => (
<tr
key={extrinsic.id}
data-index={extrinsicIndex}
data-type="extrinsic"
key={eventIndex}
data-index={eventIndex}
data-type="event"
onClick={handleOpenModal}
className={cn(
'pd-table-row',
' text-dev-purple-600 dark:text-dev-purple-550',
)}
>
<td>{extrinsic.id}</td>
<td>{blockNumber}</td>
<td>{timeAgo}</td>
<td>
<Icon
name={extrinsic.isSuccess ? 'icon-checked' : 'icon-failed'}
size={[16]}
className={cn(
extrinsic.isSuccess ? 'text-dev-green-600' : 'text-dev-red-800',
)}
/>
{blockNumber}
-
{eventIndex}
</td>
<td>
{extrinsic.extrinsicData.method.section}
{event.event.type}
{' '}
(
{extrinsic.extrinsicData.method.method}
{event.event.value.type}
)
</td>
<td>{event.phase.type}</td>
<td>
<ToolTip text="Expand the view">
<span className="inline-flex">
Expand All @@ -169,89 +252,11 @@ export const BlockBody = (props: BlockBodyProps) => {
</ToolTip>
</td>
</tr>
);
})
}
</tbody>
</table>
{
bodyData.extrinsics.length > 3 && (
<div className="flex justify-center">
<button
className="mt-4 font-geist font-body2-bold"
data-type="extrinsic"
onClick={handleShowMore}
>
{showMoreExtrinsics ? 'Show Less' : 'Show More'}
</button>
</div>
)
}
</div>
<div
data-title="Events"
>
<table className="w-full">
<colgroup>
<col className="min-w-28" />
<col className="min-w-36" />
<col className="min-w-36" />
<col className="min-w-10" />
</colgroup>
<thead>
<tr className={cn(
'bg-dev-purple-100 text-left',
'dark:bg-dev-black-900',
)}
>
<th className="py-4 pl-2 font-geist font-body2-bold">Event ID</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Action</th>
<th className="py-4 pl-2 font-geist font-body2-bold">Type</th>
<th className="py-4 pl-2 font-geist font-body2-bold" />
</tr>
</thead>
<tbody>
{
visibleEvents.map((event: IMappedBlockEvent, eventIndex: number) => (
<tr
key={eventIndex}
data-index={eventIndex}
data-type="event"
onClick={handleOpenModal}
className={cn(
'pd-table-row',
' text-dev-purple-600 dark:text-dev-purple-550',
)}
>
<td>
{blockNumber}
-
{eventIndex}
</td>
<td>
{event.event.type}
{' '}
(
{event.event.value.type}
)
</td>
<td>{event.phase.type}</td>
<td>
<ToolTip text="Expand the view">
<span className="inline-flex">
<Icon
className="text-dev-black-1000 dark:text-dev-purple-50"
name="icon-expand"
size={[18]}
/>
</span>
</ToolTip>
</td>
</tr>
))
}
</tbody>
</table>
))
}
</tbody>
</table>
</PDScrollArea>
{bodyData.events.length > 3 && (
<div className="flex justify-center">
<button
Expand All @@ -264,11 +269,11 @@ export const BlockBody = (props: BlockBodyProps) => {
</div>
)}
</div>
</Tabs>
</Tabs >
<JSONViewerModal
jsonData={modalData}
onClose={toggleVisibility}
/>
</div>
</div >
);
};
3 changes: 2 additions & 1 deletion src/views/blockDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
import { useParams } from 'react-router-dom';

import { Icon } from '@components/icon';
import { Loader } from '@components/loader';
import { PageHeader } from '@components/pageHeader';
import { PDLink } from '@components/pdLink';
import { useStoreChain } from '@stores';
Expand Down Expand Up @@ -85,7 +86,7 @@ const BlockDetails = () => {
]);

if (!blockData) {
return 'Loading...';
return <Loader />;
}

return (
Expand Down

0 comments on commit 0b71209

Please sign in to comment.