feat(leaderboard): Show Validator Identity, Use Timestamp (#2947)

Author: AtelyPham

apps/leaderboard/src/constants/query.ts

@@ -1,3 +1,4 @@
 export const INDEXING_PROGRESS_QUERY_KEY = 'indexingProgress';
 export const LEADERBOARD_QUERY_KEY = 'leaderboard';
 export const LATEST_FINALIZED_BLOCK_QUERY_KEY = 'latestFinalizedBlock';
+export const ACCOUNT_IDENTITIES_QUERY_KEY = 'accountIdentities';

apps/leaderboard/src/features/indexingProgress/components/SyncProgressIndicator.tsx

@@ -55,8 +55,8 @@ export const SyncProgressIndicator = () => {
           animated={!isSynced}
         />
         {isSynced
-          ? `Indexing ${lastProcessedBlock} of ${targetBlock}`
-          : 'Syncing...'}{' '}
+          ? `Synced ${lastProcessedBlock} of ${targetBlock} `
+          : `Indexing ${lastProcessedBlock} of ${targetBlock} `}
         ({progress.toFixed(2)}%)
       </>
     );

apps/leaderboard/src/features/indexingProgress/queries/indexingProgressQuery.ts

@@ -8,9 +8,7 @@ const IndexingProgressQueryDocument = graphql(/* GraphQL */ `
   query IndexingProgress {
     _metadata {
       lastProcessedHeight
-      lastProcessedTimestamp
       targetHeight
-      indexerHealthy
     }
   }
 `);

apps/leaderboard/src/features/leaderboard/components/BadgesCell.tsx

@@ -1,17 +1,16 @@
-import capitalize from 'lodash/capitalize';
-import cx from 'classnames';
 import {
   Tooltip,
   TooltipBody,
   TooltipTrigger,
 } from '@tangle-network/ui-components/components/Tooltip';
-import type { FC } from 'react';
 import { Typography } from '@tangle-network/ui-components/typography/Typography';
+import capitalize from 'lodash/capitalize';
+import type { FC } from 'react';
 import { BADGE_ICON_RECORD, BadgeEnum } from '../constants';
 
 export const BadgesCell: FC<{ badges: BadgeEnum[] }> = ({ badges }) => {
   return (
-    <div className="flex flex-wrap gap-[2px]">
+    <div className="flex items-center gap-0.5">
       {badges.length === 0 ? (
         <Typography variant="body1">No badges</Typography>
       ) : (
@@ -35,15 +34,8 @@ type Props = {
 const BadgeWithTooltip: FC<Props> = ({ badge, emoji }) => {
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className={cx(
-            'size-6 aspect-square rounded-full cursor-pointer',
-            'flex items-center justify-center',
-          )}
-        >
-          <Typography variant="body1">{emoji}</Typography>
-        </div>
+      <TooltipTrigger className="size-6 aspect-square flex-initial">
+        {emoji}
       </TooltipTrigger>
 
       <TooltipBody>{badge.split('_').map(capitalize).join(' ')}</TooltipBody>

apps/leaderboard/src/features/leaderboard/components/ExpandedInfo.tsx

@@ -2,27 +2,25 @@ import { CircleIcon } from '@radix-ui/react-icons';
 import { CheckboxCircleFill } from '@tangle-network/icons';
 import {
   Card,
+  isSubstrateAddress,
   KeyValueWithButton,
   Typography,
+  ValidatorIdentity,
 } from '@tangle-network/ui-components';
 import { Row } from '@tanstack/react-table';
 import React from 'react';
 import { Account } from '../types';
+import { createAccountExplorerUrl } from '../utils/createAccountExplorerUrl';
 import { formatDisplayBlockNumber } from '../utils/formatDisplayBlockNumber';
 
 interface ExpandedInfoProps {
   row: Row<Account>;
-  latestBlockNumber?: number | null;
-  latestBlockTimestamp?: Date | null;
 }
 
-export const ExpandedInfo: React.FC<ExpandedInfoProps> = ({
-  row,
-  latestBlockNumber,
-  latestBlockTimestamp,
-}) => {
+export const ExpandedInfo: React.FC<ExpandedInfoProps> = ({ row }) => {
   const account = row.original;
   const address = account.id;
+  const accountNetwork = account.network;
 
   // Helper function to render a detail row with label and value
   const DetailRow = ({
@@ -80,22 +78,32 @@ export const ExpandedInfo: React.FC<ExpandedInfoProps> = ({
         <Section title="Account Details">
           <DetailRow
             label="Account ID"
-            value={<KeyValueWithButton size="sm" keyValue={address} />}
+            value={
+              isSubstrateAddress(address) ? (
+                <ValidatorIdentity
+                  address={address}
+                  accountExplorerUrl={createAccountExplorerUrl(
+                    address,
+                    accountNetwork,
+                  )}
+                />
+              ) : (
+                <KeyValueWithButton size="sm" keyValue={address} />
+              )
+            }
           />
           <DetailRow
             label="Created"
             value={formatDisplayBlockNumber(
               account.createdAt,
-              latestBlockNumber,
-              latestBlockTimestamp,
+              account.createdAtTimestamp,
             )}
           />
           <DetailRow
             label="Last Updated"
             value={formatDisplayBlockNumber(
               account.lastUpdatedAt,
-              latestBlockNumber,
-              latestBlockTimestamp,
+              account.lastUpdatedAtTimestamp,
             )}
           />
         </Section>