From 35468bfa7dc43efc2d7e82e620ec53dd38682e12 Mon Sep 17 00:00:00 2001
From: Jordan Gensler <jordan@mystenlabs.com>
Date: Wed, 10 Aug 2022 13:49:11 -0700
Subject: [PATCH] [explorer] Implement updated designs for validator table
 (#3904)

* Implement updated designs for validator table

* Remove unused imports

* Prettier
---
 .../top-validators-card/TopValidatorsCard.tsx | 23 +++++++++++++------
 .../components/validator-map/ValidatorMap.tsx |  4 ++++
 .../src/pages/validators/Validators.tsx       | 16 ++++++++++++-
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx b/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
index dc3695cff8e2a..5c16c26ae2e9b 100644
--- a/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
+++ b/explorer/client/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -5,11 +5,9 @@ import { useContext, useEffect, useState } from 'react';
 
 import Longtext from '../../components/longtext/Longtext';
 import TableCard from '../../components/table/TableCard';
-import TabFooter from '../../components/tabs/TabFooter';
 import Tabs from '../../components/tabs/Tabs';
 import { NetworkContext } from '../../context';
 import {
-    getTabFooter,
     getValidatorState,
     processValidators,
     ValidatorLoadFail,
@@ -100,6 +98,16 @@ function TopValidatorsCard({ state }: { state: ValidatorState }): JSX.Element {
                     alttext={truncate(validator.address, 14)}
                     category={'addresses'}
                     isLink={true}
+                    isCopyButton={false}
+                />
+            ),
+            pubkeyBytes: (
+                <Longtext
+                    text={validator.pubkeyBytes}
+                    alttext={truncate(validator.pubkeyBytes, 14)}
+                    category={'addresses'}
+                    isLink={false}
+                    isCopyButton={false}
                 />
             ),
         })),
@@ -116,26 +124,27 @@ function TopValidatorsCard({ state }: { state: ValidatorState }): JSX.Element {
                 headerLabel: 'Address',
                 accessorKey: 'address',
             },
+            {
+                headerLabel: 'Pubkey Bytes',
+                accessorKey: 'pubkeyBytes',
+            },
         ],
     };
 
-    const tabsFooter = getTabFooter(validatorsData.length);
-
     return (
         <div className={styles.validators}>
             <Tabs selected={0}>
                 <div title="Top Validators">
                     <TableCard tabledata={tableData} />
-                    <TabFooter stats={tabsFooter.stats}>
+                    {/* <TabFooter stats={tabsFooter.stats}>
                         <Longtext
                             text=""
                             category="validators"
                             isLink={true}
                             isCopyButton={false}
-                            /*showIconButton={true}*/
                             alttext="More Validators"
                         />
-                    </TabFooter>
+                    </TabFooter> */}
                 </div>
             </Tabs>
         </div>
diff --git a/explorer/client/src/components/validator-map/ValidatorMap.tsx b/explorer/client/src/components/validator-map/ValidatorMap.tsx
index 37db491b975ae..dd866306b4326 100644
--- a/explorer/client/src/components/validator-map/ValidatorMap.tsx
+++ b/explorer/client/src/components/validator-map/ValidatorMap.tsx
@@ -32,6 +32,10 @@ export default function ValidatorMap() {
             method: 'GET',
         });
 
+        if (!res.ok) {
+            return [];
+        }
+
         return res.json() as Promise<NodeList>;
     });
 
diff --git a/explorer/client/src/pages/validators/Validators.tsx b/explorer/client/src/pages/validators/Validators.tsx
index 6a1389da5a500..225d2043325e5 100644
--- a/explorer/client/src/pages/validators/Validators.tsx
+++ b/explorer/client/src/pages/validators/Validators.tsx
@@ -146,6 +146,7 @@ export function processValidators(set: Validator[]) {
         return {
             name: name,
             address: av.fields.metadata.fields.sui_address,
+            pubkeyBytes: av.fields.metadata.fields.pubkey_bytes,
             position: i + 1,
         };
     });
@@ -169,6 +170,7 @@ function ValidatorsPage({ state }: { state: ValidatorState }): JSX.Element {
         data: validatorsData.map((validator) => {
             return {
                 name: validator.name,
+                position: validator.position,
                 address: (
                     <Longtext
                         text={validator.address}
@@ -177,7 +179,15 @@ function ValidatorsPage({ state }: { state: ValidatorState }): JSX.Element {
                         isLink={true}
                     />
                 ),
-                position: validator.position,
+                pubkeyBytes: (
+                    <Longtext
+                        text={validator.pubkeyBytes}
+                        alttext={truncate(validator.pubkeyBytes, 14)}
+                        category={'addresses'}
+                        isLink={false}
+                        isCopyButton={false}
+                    />
+                ),
             };
         }),
         columns: [
@@ -193,6 +203,10 @@ function ValidatorsPage({ state }: { state: ValidatorState }): JSX.Element {
                 headerLabel: 'Address',
                 accessorKey: 'address',
             },
+            {
+                headerLabel: 'Pubkey Bytes',
+                accessorKey: 'pubkeyBytes',
+            },
         ],
     };