refactor(explorer): Update Placeholder table with the new ui kit Ta…

…ble API (#2238) * refactor(explorer): Update `Placeholder` table with the new ui kit Table API * fmt * chore: Remove unnecessary import --------- Co-authored-by: cpl121 <[email protected]>
iotaledger · Sep 5, 2024 · d08f5de · d08f5de
1 parent 1a72993
commit d08f5de
Show file tree

Hide file tree

Showing 10 changed files with 5 additions and 14 deletions.
diff --git a/apps/explorer/src/components/activity/EpochsActivityTable.tsx b/apps/explorer/src/components/activity/EpochsActivityTable.tsx
@@ -67,7 +67,6 @@ export function EpochsActivityTable({
                         'Storage Net Inflow',
                         'Epoch End',
                     ]}
-                    colWidths={['100px', '120px', '40px', '204px', '90px', '38px']}
                 />
             ) : (
                 <div>

diff --git a/apps/explorer/src/components/activity/TransactionsActivityTable.tsx b/apps/explorer/src/components/activity/TransactionsActivityTable.tsx
@@ -70,7 +70,6 @@ export function TransactionsActivityTable({
                         rowCount={limit}
                         rowHeight="16px"
                         colHeadings={['Digest', 'Sender', 'Txns', 'Gas', 'Time']}
-                        colWidths={['30%', '30%', '10%', '20%', '10%']}
                     />
                 ) : (
                     <div>

diff --git a/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx b/apps/explorer/src/components/checkpoints/CheckpointsTable.tsx
@@ -67,7 +67,6 @@ export function CheckpointsTable({
                     rowCount={Number(limit)}
                     rowHeight="16px"
                     colHeadings={['Digest', 'Sequence Number', 'Time', 'Transaction Count']}
-                    colWidths={['100px', '120px', '204px', '90px', '38px']}
                 />
             ) : (
                 <div>

diff --git a/apps/explorer/src/components/top-packages/TopPackagesTable.tsx b/apps/explorer/src/components/top-packages/TopPackagesTable.tsx
@@ -69,7 +69,6 @@ export function TopPackagesTable({ data, isLoading }: TopPackagesTableProps) {
                 colHeadings={['Module', 'Function', 'Package ID', 'Count']}
                 rowCount={10}
                 rowHeight="15px"
-                colWidths={['100px', '120px', '40px', '204px']}
             />
         );
     }

diff --git a/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx b/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -146,7 +146,6 @@ export function TopValidatorsCard({ limit, showIcon }: TopValidatorsCardProps):
                     rowCount={limit || NUMBER_OF_VALIDATORS}
                     rowHeight="13px"
                     colHeadings={['Name', 'Address', 'Stake']}
-                    colWidths={['220px', '220px', '220px']}
                 />
             )}
 

diff --git a/apps/explorer/src/components/transaction-blocks-for-address/TransactionBlocksForAddress.tsx b/apps/explorer/src/components/transaction-blocks-for-address/TransactionBlocksForAddress.tsx
@@ -126,7 +126,6 @@ export function TransactionBlocksForAddress({
                         rowCount={DEFAULT_TRANSACTIONS_LIMIT}
                         rowHeight="16px"
                         colHeadings={['Digest', 'Sender', 'Txns', 'Gas', 'Time']}
-                        colWidths={['30%', '30%', '10%', '20%', '10%']}
                     />
                 ) : (
                     <div>

diff --git a/apps/explorer/src/components/ui/PlaceholderTable.tsx b/apps/explorer/src/components/ui/PlaceholderTable.tsx
@@ -2,33 +2,33 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Placeholder } from '@iota/ui';
 import { useMemo } from 'react';
 
 import { TableCard } from './TableCard';
+import { TableCellType } from '@iota/apps-ui-kit';
 
 export interface PlaceholderTableProps {
     rowCount: number;
     rowHeight: string;
     colHeadings: string[];
-    colWidths: string[];
 }
 
 export function PlaceholderTable({
     rowCount,
     rowHeight,
     colHeadings,
-    colWidths,
 }: PlaceholderTableProps): JSX.Element {
     const rowEntry = useMemo(
         () =>
             Object.fromEntries(
                 colHeadings.map((header, index) => [
                     `a${index}`,
-                    <Placeholder key={index} width={colWidths[index]} height={rowHeight} />,
+                    {
+                        type: TableCellType.Placeholder,
+                    },
                 ]),
             ),
-        [colHeadings, colWidths, rowHeight],
+        [colHeadings, rowHeight],
     );
 
     const loadingTable = useMemo(

diff --git a/apps/explorer/src/components/ui/stories/PlaceholderTable.stories.tsx b/apps/explorer/src/components/ui/stories/PlaceholderTable.stories.tsx
@@ -16,7 +16,6 @@ export const VaryingWidth: StoryObj<PlaceholderTableProps> = {
             rowCount={5}
             rowHeight="16px"
             colHeadings={['Sardine', 'Herring', 'Salmon', 'Barracuda']}
-            colWidths={['38px', '90px', '120px', '204px']}
         />
     ),
 };
diff --git a/apps/explorer/src/pages/checkpoints/CheckpointTransactionBlocks.tsx b/apps/explorer/src/pages/checkpoints/CheckpointTransactionBlocks.tsx
@@ -31,7 +31,6 @@ export function CheckpointTransactionBlocks({ id }: { id: string }): JSX.Element
                     rowCount={20}
                     rowHeight="16px"
                     colHeadings={['Digest', 'Sender', 'Txns', 'Gas', 'Time']}
-                    colWidths={['30%', '30%', '10%', '20%', '10%']}
                 />
             ) : (
                 <div>

diff --git a/apps/explorer/src/pages/validators/Validators.tsx b/apps/explorer/src/pages/validators/Validators.tsx
@@ -377,7 +377,6 @@ function ValidatorPageResult(): JSX.Element {
                                         rowCount={20}
                                         rowHeight="13px"
                                         colHeadings={['Name', 'Address', 'Stake']}
-                                        colWidths={['220px', '220px', '220px']}
                                     />
                                 )}
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,7 +67,6 @@ export function EpochsActivityTable({ @@
                             'Storage Net Inflow',
                             'Epoch End',
                         ]}
-                        colWidths={['100px', '120px', '40px', '204px', '90px', '38px']}
                     />
                 ) : (
                     <div>
@@ Expand Down @@