feat: support more data in the overview

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

@@ -0,0 +1,17 @@
+query ActiveValidatorCount {
+  activeTotal: validator_status_aggregate(where: {status: {_eq: 3}}) {
+    aggregate {
+      count
+    }
+  }
+  inactiveTotal: validator_status_aggregate(where: {status: {_neq: 3}}) {
+    aggregate {
+      count
+    }
+  }
+  total: validator_status_aggregate {
+    aggregate {
+      count
+    }
+  }
+}

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

@@ -1,3 +1,14 @@
+subscription BlocksListener($limit: Int = 7, $offset: Int = 0) {
+  blocks: block(limit: $limit, offset: $offset, order_by: {height: desc}) {
+    height
+    txs: num_txs
+    hash
+    timestamp
+    proposerAddress: proposer_address
+  }
+}
+
+
 query Blocks($limit: Int = 7, $offset: Int = 0) {
   blocks: block(limit: $limit, offset: $offset, order_by: {height: desc}) {
     height

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

@@ -2426,6 +2426,11 @@ export type Validator_Voting_Power_Variance_Order_By = {
   voting_power?: InputMaybe<Order_By>;
 };
 
+export type ActiveValidatorCountQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ActiveValidatorCountQuery = { activeTotal: { __typename?: 'validator_status_aggregate', aggregate?: { __typename?: 'validator_status_aggregate_fields', count: number } | null }, inactiveTotal: { __typename?: 'validator_status_aggregate', aggregate?: { __typename?: 'validator_status_aggregate_fields', count: number } | null }, total: { __typename?: 'validator_status_aggregate', aggregate?: { __typename?: 'validator_status_aggregate_fields', count: number } | null } };
+
 export type BlockDetailsQueryVariables = Exact<{
   height?: InputMaybe<Scalars['bigint']>;
 }>;
@@ -2447,6 +2452,14 @@ export type LatestBlockTimestampQueryVariables = Exact<{
 
 export type LatestBlockTimestampQuery = { block: Array<{ __typename?: 'block', timestamp: any }> };
 
+export type BlocksListenerSubscriptionVariables = Exact<{
+  limit?: InputMaybe<Scalars['Int']>;
+  offset?: InputMaybe<Scalars['Int']>;
+}>;
+
+
+export type BlocksListenerSubscription = { blocks: Array<{ __typename?: 'block', height: any, hash: string, timestamp: any, txs?: number | null, proposerAddress?: string | null }> };
+
 export type BlocksQueryVariables = Exact<{
   limit?: InputMaybe<Scalars['Int']>;
   offset?: InputMaybe<Scalars['Int']>;
@@ -2484,6 +2497,52 @@ export type ValidatorsQueryVariables = Exact<{ [key: string]: never; }>;
 export type ValidatorsQuery = { validator: Array<{ __typename?: 'validator', validatorStatuses: Array<{ __typename?: 'validator_status', status: number, jailed: boolean, height: any }>, validatorVotingPowers: Array<{ __typename?: 'validator_voting_power', votingPower: any }>, validatorCommissions: Array<{ __typename?: 'validator_commission', validator_address: string, commission: any }> }> };
 
 
+export const ActiveValidatorCountDocument = gql`
+    query ActiveValidatorCount {
+  activeTotal: validator_status_aggregate(where: {status: {_eq: 3}}) {
+    aggregate {
+      count
+    }
+  }
+  inactiveTotal: validator_status_aggregate(where: {status: {_neq: 3}}) {
+    aggregate {
+      count
+    }
+  }
+  total: validator_status_aggregate {
+    aggregate {
+      count
+    }
+  }
+}
+    `;
+
+/**
+ * __useActiveValidatorCountQuery__
+ *
+ * To run a query within a React component, call `useActiveValidatorCountQuery` and pass it any options that fit your needs.
+ * When your component renders, `useActiveValidatorCountQuery` 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 } = useActiveValidatorCountQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useActiveValidatorCountQuery(baseOptions?: Apollo.QueryHookOptions<ActiveValidatorCountQuery, ActiveValidatorCountQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ActiveValidatorCountQuery, ActiveValidatorCountQueryVariables>(ActiveValidatorCountDocument, options);
+      }
+export function useActiveValidatorCountLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ActiveValidatorCountQuery, ActiveValidatorCountQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ActiveValidatorCountQuery, ActiveValidatorCountQueryVariables>(ActiveValidatorCountDocument, options);
+        }
+export type ActiveValidatorCountQueryHookResult = ReturnType<typeof useActiveValidatorCountQuery>;
+export type ActiveValidatorCountLazyQueryHookResult = ReturnType<typeof useActiveValidatorCountLazyQuery>;
+export type ActiveValidatorCountQueryResult = Apollo.QueryResult<ActiveValidatorCountQuery, ActiveValidatorCountQueryVariables>;
 export const BlockDetailsDocument = gql`
     query BlockDetails($height: bigint) {
   transaction(where: {height: {_eq: $height}}) {
@@ -2594,6 +2653,41 @@ export function useLatestBlockTimestampLazyQuery(baseOptions?: Apollo.LazyQueryH
 export type LatestBlockTimestampQueryHookResult = ReturnType<typeof useLatestBlockTimestampQuery>;
 export type LatestBlockTimestampLazyQueryHookResult = ReturnType<typeof useLatestBlockTimestampLazyQuery>;
 export type LatestBlockTimestampQueryResult = Apollo.QueryResult<LatestBlockTimestampQuery, LatestBlockTimestampQueryVariables>;
+export const BlocksListenerDocument = gql`
+    subscription BlocksListener($limit: Int = 7, $offset: Int = 0) {
+  blocks: block(limit: $limit, offset: $offset, order_by: {height: desc}) {
+    height
+    txs: num_txs
+    hash
+    timestamp
+    proposerAddress: proposer_address
+  }
+}
+    `;
+
+/**
+ * __useBlocksListenerSubscription__
+ *
+ * To run a query within a React component, call `useBlocksListenerSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useBlocksListenerSubscription` 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 subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useBlocksListenerSubscription({
+ *   variables: {
+ *      limit: // value for 'limit'
+ *      offset: // value for 'offset'
+ *   },
+ * });
+ */
+export function useBlocksListenerSubscription(baseOptions?: Apollo.SubscriptionHookOptions<BlocksListenerSubscription, BlocksListenerSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<BlocksListenerSubscription, BlocksListenerSubscriptionVariables>(BlocksListenerDocument, options);
+      }
+export type BlocksListenerSubscriptionHookResult = ReturnType<typeof useBlocksListenerSubscription>;
+export type BlocksListenerSubscriptionResult = Apollo.SubscriptionResult<BlocksListenerSubscription>;
 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/home/index.tsx

@@ -1,8 +1,7 @@
 import Layout from '@/components/layout';
 import Blocks from '@/screens/home/components/blocks';
 import DataBlocks from '@/screens/home/components/data_blocks';
-import Hero from '@/screens/home/components/hero';
-import Tokenomics from '@/screens/home/components/tokenomics';
+import Transactions from '@/screens/home/components/transactions';
 import useStyles from '@/screens/home/styles';
 
 const Home = () => {
@@ -11,11 +10,8 @@ const Home = () => {
   return (
     <Layout className={classes.root}>
       <DataBlocks className={classes.dataBlocks} />
-      <Hero className={classes.hero} />
-      <Tokenomics className={classes.tokenomics} />
       <Blocks className={classes.blocks} />
-      {/* @TODO : enable back when wss is available */}
-      {/*<Transactions className={classes.transactions} />*/}
+      <Transactions className={classes.transactions} />
     </Layout>
   );
 };

packages/ui/src/screens/home/components/blocks/hooks.ts

@@ -8,7 +8,8 @@ import type { BlocksState } from '@/screens/home/components/blocks/types';
 
 const formatBlocks = (data: BlocksListenerSubscription) =>
   data.blocks.map((x) => {
-    const proposerAddress = x?.validator?.validatorInfo?.operatorAddress ?? '';
+    const proposerAddress = x?.proposerAddress ?? '';
+
     return {
       height: x.height,
       txs: x.txs ?? 0,

packages/ui/src/screens/home/components/hero/index.tsx

@@ -6,6 +6,7 @@ import { useHero } from '@/screens/home/components/hero/hooks';
 import { FC } from 'react';
 
 const Hero: FC<ComponentDefault> = (props) => {
+  return null;
   const { state } = useHero();
   let component = null;
   if (!state.loading) {

packages/ui/src/screens/home/index.tsx

@@ -14,8 +14,6 @@ const Home = () => {
     <Layout className={classes.root}>
       <DataBlocks className={classes.dataBlocks} />
       <Hero className={classes.hero} />
-      <Tokenomics className={classes.tokenomics} />
-      <Consensus className={classes.consensus} />
       <Blocks className={classes.blocks} />
       <Transactions className={classes.transactions} />
     </Layout>