From 0b712099aff8874549509e1cadf5ee037992fe75 Mon Sep 17 00:00:00 2001
From: DimitarTAtanasov <86364535+DimitarTAtanasov@users.noreply.github.com>
Date: Fri, 8 Nov 2024 18:25:53 +0200
Subject: [PATCH] dev -> main (#136)

* Fix overflow table (#134)

* Change log

---------

Co-authored-by: Denis Dinkov <denisdinkov7@gmail.com>
---
 src/utils/rpc/getBlockDetails.ts           |   2 +-
 src/views/blockDetails/blockBody/index.tsx | 271 +++++++++++----------
 src/views/blockDetails/index.tsx           |   3 +-
 3 files changed, 141 insertions(+), 135 deletions(-)

diff --git a/src/utils/rpc/getBlockDetails.ts b/src/utils/rpc/getBlockDetails.ts
index 351f37ae..d0985602 100644
--- a/src/utils/rpc/getBlockDetails.ts
+++ b/src/utils/rpc/getBlockDetails.ts
@@ -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
diff --git a/src/views/blockDetails/blockBody/index.tsx b/src/views/blockDetails/blockBody/index.tsx
index 5300c7b3..ffa9e2d6 100644
--- a/src/views/blockDetails/blockBody/index.tsx
+++ b/src/views/blockDetails/blockBody/index.tsx
@@ -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';
@@ -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}
@@ -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">
@@ -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
@@ -264,11 +269,11 @@ export const BlockBody = (props: BlockBodyProps) => {
             </div>
           )}
         </div>
-      </Tabs>
+      </Tabs >
       <JSONViewerModal
         jsonData={modalData}
         onClose={toggleVisibility}
       />
-    </div>
+    </div >
   );
 };
diff --git a/src/views/blockDetails/index.tsx b/src/views/blockDetails/index.tsx
index 7743734c..f561a40a 100644
--- a/src/views/blockDetails/index.tsx
+++ b/src/views/blockDetails/index.tsx
@@ -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';
@@ -85,7 +86,7 @@ const BlockDetails = () => {
   ]);
 
   if (!blockData) {
-    return 'Loading...';
+    return <Loader />;
   }
 
   return (