feat(explorer): display only the top 10 validators in homepage (#4575)

* feat(explorer): display only the top 10 validators in homepage * fix(explorer): format * fix(explorer): move View all button to the top in Top Validators
iotaledger · Dec 20, 2024 · 37fdde5 · 37fdde5
1 parent 78f337f
commit 37fdde5
Showing 1 changed file with 39 additions and 20 deletions.
diff --git a/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx b/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -3,9 +3,18 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useIotaClientQuery } from '@iota/dapp-kit';
-import { PlaceholderTable, TableCard } from '~/components/ui';
+import { Link, PlaceholderTable, TableCard } from '~/components/ui';
 import { generateValidatorsTableColumns } from '~/lib/ui';
-import { InfoBox, InfoBoxStyle, InfoBoxType, Panel, Title } from '@iota/apps-ui-kit';
+import {
+    Button,
+    ButtonSize,
+    ButtonType,
+    InfoBox,
+    InfoBoxStyle,
+    InfoBoxType,
+    Panel,
+    Title,
+} from '@iota/apps-ui-kit';
 import { ErrorBoundary } from '../error-boundary/ErrorBoundary';
 import { Warning } from '@iota/ui-icons';
 
@@ -19,6 +28,9 @@ type TopValidatorsCardProps = {
 export function TopValidatorsCard({ limit, showIcon }: TopValidatorsCardProps): JSX.Element {
     const { data, isPending, isSuccess, isError } = useIotaClientQuery('getLatestIotaSystemState');
 
+    const topActiveValidators =
+        data?.activeValidators.slice(0, limit || NUMBER_OF_VALIDATORS) ?? [];
+
     const tableColumns = generateValidatorsTableColumns({
         atRiskValidators: [],
         validatorEvents: [],
@@ -42,26 +54,33 @@ export function TopValidatorsCard({ limit, showIcon }: TopValidatorsCardProps):
 
     return (
         <Panel>
-            <Title title="Top Validators" />
-
-            <div className="p-md">
-                {isPending && (
-                    <PlaceholderTable
-                        rowCount={limit || NUMBER_OF_VALIDATORS}
-                        rowHeight="13px"
-                        colHeadings={['Name', 'Address', 'Stake']}
-                    />
-                )}
+            <div className="relative">
+                <div className="absolute right-0 mr-4 mt-2">
+                    <Link to="/validators">
+                        <Button
+                            type={ButtonType.Secondary}
+                            size={ButtonSize.Small}
+                            text="View All"
+                        />
+                    </Link>
+                </div>
+                <Title title="Top Validators" />
 
-                {isSuccess && (
-                    <ErrorBoundary>
-                        <TableCard
-                            data={data.activeValidators}
-                            columns={tableColumns}
-                            viewAll="/validators"
+                <div className="p-md">
+                    {isPending && (
+                        <PlaceholderTable
+                            rowCount={limit || NUMBER_OF_VALIDATORS}
+                            rowHeight="13px"
+                            colHeadings={['Name', 'Address', 'Stake']}
                         />
-                    </ErrorBoundary>
-                )}
+                    )}
+
+                    {isSuccess && (
+                        <ErrorBoundary>
+                            <TableCard data={topActiveValidators} columns={tableColumns} />
+                        </ErrorBoundary>
+                    )}
+                </div>
             </div>
         </Panel>
     );