feat: added tenure height

src/app/block/[hash]/PageClient.tsx

@@ -10,7 +10,7 @@ import { Section } from '../../../common/components/Section';
 import { Timestamp } from '../../../common/components/Timestamp';
 import { Value } from '../../../common/components/Value';
 import '../../../common/components/loaders/skeleton-text';
-import { useSuspenseBlockByHash } from '../../../common/queries/useBlockByHash';
+import { useSuspenseBlockByHeightOrHash } from '../../../common/queries/useBlockByHash';
 import { SkeletonTxsList } from '../../../features/txs-list/SkeletonTxsList';
 import { Box } from '../../../ui/Box';
 import { Flex } from '../../../ui/Flex';
@@ -35,10 +35,11 @@ const BlockTxsList = dynamic(
 );
 
 export default function BlockPage({ params: { hash } }: any) {
-  const { data: block } = useSuspenseBlockByHash(hash, { refetchOnWindowFocus: true });
+  const { data: block } = useSuspenseBlockByHeightOrHash(hash, { refetchOnWindowFocus: true });
   const title = (block && `STX Block #${block.height.toLocaleString()}`) || '';
   const { isOpen, onToggle, onClose } = useDisclosure();
 
+  console.log(block);
   return (
     <>
       <PageTitle>{title}</PageTitle>
@@ -58,10 +59,13 @@ export default function BlockPage({ params: { hash } }: any) {
                 }
               />
               <KeyValueHorizontal label={'Mined'} value={<Timestamp ts={block.block_time} />} />
-              <KeyValueHorizontal
-                label={'Transactions'}
-                value={<Value>{block.txs.length}</Value>}
-              />
+              <KeyValueHorizontal label={'Transactions'} value={<Value>{block.tx_count}</Value>} />
+              {block.tenure_height !== null && (
+                <KeyValueHorizontal
+                  label={'Tenure Height'}
+                  value={<Value>{block.tenure_height}</Value>}
+                />
+              )}
               {!block.canonical ? (
                 <KeyValueHorizontal
                   label={'Canonical'}

src/common/queries/useBlockByHash.ts

@@ -3,6 +3,9 @@ import { UseSuspenseQueryOptions, useQuery, useSuspenseQuery } from '@tanstack/r
 import { Block } from '@stacks/stacks-blockchain-api-types';
 
 import { useApi } from '../api/useApi';
+import { useGlobalContext } from '../context/useGlobalContext';
+
+const BLOCK_QUERY_KEY = 'block';
 
 export function useBlockByHash(
   hash?: string,
@@ -21,18 +24,24 @@ export function useBlockByHash(
   });
 }
 
-export function useSuspenseBlockByHash(
-  hash?: string,
-  options: Partial<Omit<UseSuspenseQueryOptions<any, any, Block, any>, 'queryKey'>> = {}
+// TODO: Use this until we update @stacks.stacks-blockchain-client
+interface BlockWithTenureHeight extends Block {
+  tenure_height: number | null;
+  tx_count: number;
+}
+
+export function useSuspenseBlockByHeightOrHash(
+  heightOrHash?: string,
+  options: Partial<
+    Omit<UseSuspenseQueryOptions<any, any, BlockWithTenureHeight, any>, 'queryKey'>
+  > = {}
 ) {
-  const api = useApi();
-  if (!hash) throw new Error('Hash is required');
+  const { url: activeNetworkUrl } = useGlobalContext().activeNetwork;
+  if (!heightOrHash) throw new Error('Hash is required');
   return useSuspenseQuery({
-    queryKey: ['blockByHash', hash],
+    queryKey: [BLOCK_QUERY_KEY, heightOrHash],
     queryFn: () =>
-      api.blocksApi.getBlockByHash({
-        hash,
-      }),
+      fetch(`${activeNetworkUrl}/extended/v2/blocks/${heightOrHash}`).then(res => res.json()),
     staleTime: Infinity,
     ...options,
   });