chore: add extra info

apps/web-namada/src/graphql/general/block_time.graphql

@@ -0,0 +1,5 @@
+query LatestBlockTimestamp($offset: Int = 0) {
+  block: block(order_by: {height: desc}, limit: 1, offset: $offset) {
+    timestamp
+  }
+}

apps/web-namada/src/graphql/types/general_types.ts

@@ -2440,6 +2440,13 @@ export type LatestBlockHeightListenerSubscriptionVariables = Exact<{
 
 export type LatestBlockHeightListenerSubscription = { height: Array<{ __typename?: 'block', height: any }> };
 
+export type LatestBlockTimestampQueryVariables = Exact<{
+  offset?: InputMaybe<Scalars['Int']>;
+}>;
+
+
+export type LatestBlockTimestampQuery = { block: Array<{ __typename?: 'block', timestamp: any }> };
+
 export type BlocksQueryVariables = Exact<{
   limit?: InputMaybe<Scalars['Int']>;
   offset?: InputMaybe<Scalars['Int']>;
@@ -2552,6 +2559,41 @@ export function useLatestBlockHeightListenerSubscription(baseOptions?: Apollo.Su
       }
 export type LatestBlockHeightListenerSubscriptionHookResult = ReturnType<typeof useLatestBlockHeightListenerSubscription>;
 export type LatestBlockHeightListenerSubscriptionResult = Apollo.SubscriptionResult<LatestBlockHeightListenerSubscription>;
+export const LatestBlockTimestampDocument = gql`
+    query LatestBlockTimestamp($offset: Int = 0) {
+  block: block(order_by: {height: desc}, limit: 1, offset: $offset) {
+    timestamp
+  }
+}
+    `;
+
+/**
+ * __useLatestBlockTimestampQuery__
+ *
+ * To run a query within a React component, call `useLatestBlockTimestampQuery` and pass it any options that fit your needs.
+ * When your component renders, `useLatestBlockTimestampQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useLatestBlockTimestampQuery({
+ *   variables: {
+ *      offset: // value for 'offset'
+ *   },
+ * });
+ */
+export function useLatestBlockTimestampQuery(baseOptions?: Apollo.QueryHookOptions<LatestBlockTimestampQuery, LatestBlockTimestampQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<LatestBlockTimestampQuery, LatestBlockTimestampQueryVariables>(LatestBlockTimestampDocument, options);
+      }
+export function useLatestBlockTimestampLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<LatestBlockTimestampQuery, LatestBlockTimestampQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<LatestBlockTimestampQuery, LatestBlockTimestampQueryVariables>(LatestBlockTimestampDocument, options);
+        }
+export type LatestBlockTimestampQueryHookResult = ReturnType<typeof useLatestBlockTimestampQuery>;
+export type LatestBlockTimestampLazyQueryHookResult = ReturnType<typeof useLatestBlockTimestampLazyQuery>;
+export type LatestBlockTimestampQueryResult = Apollo.QueryResult<LatestBlockTimestampQuery, LatestBlockTimestampQueryVariables>;
 export const BlocksDocument = gql`
     query Blocks($limit: Int = 7, $offset: Int = 0) {
   blocks: block(limit: $limit, offset: $offset, order_by: {height: desc}) {

apps/web-namada/src/screens/validators/components/list/components/desktop/index.tsx

@@ -106,8 +106,14 @@ const GridRow: FC<GridRowProps> = ({ column, style, rowIndex, align, item, searc
 
   const status = getValidatorStatus(item.status, item.jailed, item.tombstoned);
   const condition = item.status === 3 ? getValidatorConditionClass(item.condition) : undefined;
-  const percentDisplay =
-    item.status === 3 ? `${numeral(item.votingPowerPercent.toFixed(6)).format('0.[00]')}%` : '0%';
+  const percentDisplay = (() => {
+    if (typeof item.votingPowerPercent !== 'number') return '';
+
+    return item.status === 3
+      ? `${numeral(item.votingPowerPercent.toFixed(6)).format('0.[00]')}%`
+      : '0%';
+  })();
+
   const votingPower = numeral(item.votingPower).format('0,0');
 
   let formatItem: ReactNode = null;

apps/web-namada/src/screens/validators/components/list/hooks.ts

@@ -27,27 +27,30 @@ const formatValidators = (data: ValidatorsQuery): Partial<ValidatorsState> => {
 
   const { signedBlockWindow } = slashingParams;
 
-  const formattedItems: ValidatorType[] = data.validator.map((x) => {
-    const votingPower =
-      (x?.validatorVotingPowers?.[0]?.votingPower ?? 0) / 10 ** (extra.votingPowerExponent ?? 0);
-    const votingPowerPercent = votingPowerOverall
-      ? numeral((votingPower / votingPowerOverall) * 100).value()
-      : 0;
-
-    const missedBlockCounter = x?.validatorSigningInfos?.[0]?.missedBlocksCounter ?? 0;
-    const condition = getValidatorCondition(signedBlockWindow, missedBlockCounter);
-
-    return {
-      validator: x.validatorCommissions?.[0]?.validator_address ?? '',
-      votingPower: votingPower ?? 0,
-      votingPowerPercent: votingPowerPercent ?? 0,
-      commission: (x?.validatorCommissions?.[0]?.commission ?? 0) * 100,
-      condition,
-      status: x?.validatorStatuses?.[0]?.status ?? 0,
-      jailed: x?.validatorStatuses?.[0]?.jailed ?? false,
-      tombstoned: false,
-    };
-  });
+  const formattedItems: ValidatorType[] = data.validator
+    .map((x) => {
+      const votingPower =
+        (x?.validatorVotingPowers?.[0]?.votingPower ?? 0) / 10 ** (extra.votingPowerExponent ?? 0);
+      const votingPowerPercent =
+        votingPowerOverall && votingPower
+          ? numeral((votingPower / votingPowerOverall) * 100).value()
+          : undefined;
+
+      const missedBlockCounter = x?.validatorSigningInfos?.[0]?.missedBlocksCounter ?? 0;
+      const condition = getValidatorCondition(signedBlockWindow, missedBlockCounter);
+
+      return {
+        validator: x.validatorCommissions?.[0]?.validator_address ?? '',
+        votingPower: votingPower ?? 0,
+        votingPowerPercent,
+        commission: (x?.validatorCommissions?.[0]?.commission ?? 0) * 100,
+        condition,
+        status: x?.validatorStatuses?.[0]?.status ?? 0,
+        jailed: x?.validatorStatuses?.[0]?.jailed ?? false,
+        tombstoned: false,
+      };
+    })
+    .filter((x) => x.validator);
 
   // get the top 34% validators
   formattedItems.sort((a, b) => (a.votingPower > b.votingPower ? -1 : 1));
@@ -57,7 +60,7 @@ const formatValidators = (data: ValidatorsQuery): Partial<ValidatorsState> => {
   let reached = false;
   formattedItems.forEach((x) => {
     if (x.status === 3) {
-      const totalVp = cumulativeVotingPower.add(x.votingPowerPercent);
+      const totalVp = cumulativeVotingPower.add(x.votingPowerPercent || 0);
       if (totalVp.lte(34) && !reached) {
         x.topVotingPower = true;
       }

packages/ui/src/screens/validators/components/list/components/voting_power/index.tsx

@@ -22,9 +22,11 @@ const VotingPower: FC<VotingPowerProps> = ({
     <div className={cx(classes.root, className)}>
       <div className={classes.content}>
         <Typography variant="body1">{content}</Typography>
-        <Typography variant="body1" className="percentage">
-          {percentDisplay}
-        </Typography>
+        {!!percentDisplay && (
+          <Typography variant="body1" className="percentage">
+            {percentDisplay}
+          </Typography>
+        )}
       </div>
       <div className={classes.chart}>
         <div className={classes.active} />