From 37fdde5f059b38af1875367d62b352a6951aa189 Mon Sep 17 00:00:00 2001
From: cpl121 <100352899+cpl121@users.noreply.github.com>
Date: Fri, 20 Dec 2024 14:05:21 +0100
Subject: [PATCH] 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
---
 .../top-validators-card/TopValidatorsCard.tsx | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx b/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
index 2f4f653a9cc..bd777c19e41 100644
--- 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>
     );