From 6b5bc467769e63c2cbdb1ad3a17cf8432e446d98 Mon Sep 17 00:00:00 2001 From: Nicholas Barnett Date: Wed, 30 Oct 2024 13:42:09 -0500 Subject: [PATCH] feat: added tenure height --- src/app/block/[hash]/PageClient.tsx | 15 +-- src/app/microblock/[hash]/PageClient.tsx | 99 ------------------- src/app/microblock/[hash]/layout.tsx | 24 ----- src/app/microblock/[hash]/page.tsx | 10 -- .../[hash]/tx-lists/MicroblockTxsList.tsx | 56 ----------- src/common/queries/useBlockByHash.ts | 27 +++-- 6 files changed, 27 insertions(+), 204 deletions(-) delete mode 100644 src/app/microblock/[hash]/PageClient.tsx delete mode 100644 src/app/microblock/[hash]/layout.tsx delete mode 100644 src/app/microblock/[hash]/page.tsx delete mode 100644 src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx diff --git a/src/app/block/[hash]/PageClient.tsx b/src/app/block/[hash]/PageClient.tsx index 2ef162b21..bd197435b 100644 --- a/src/app/block/[hash]/PageClient.tsx +++ b/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,7 +35,7 @@ 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(); @@ -58,10 +58,13 @@ export default function BlockPage({ params: { hash } }: any) { } /> } /> - {block.txs.length}} - /> + {block.tx_count}} /> + {block.tenure_height !== null && ( + {block.tenure_height}} + /> + )} {!block.canonical ? ( - {title} - - -
- - {hash}} copyValue={hash} /> - {microblock.block_height}} - copyValue={microblock.block_height.toString()} - /> - - - - - {toRelativeTime(block.burn_block_time * 1000)} - - - - } - copyValue={readableTs} - /> - {block.hash}} - copyValue={block.hash} - /> - {microblock.txs.length}} - /> - -
- - {microblock.txs?.length ? ( - - ) : ( -
- - - -
- )} - - - ); -} diff --git a/src/app/microblock/[hash]/layout.tsx b/src/app/microblock/[hash]/layout.tsx deleted file mode 100644 index 2aa6f08d1..000000000 --- a/src/app/microblock/[hash]/layout.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Metadata, ResolvingMetadata } from 'next'; -import { ReactNode } from 'react'; - -import { meta } from '../../../common/constants/meta'; -import { truncateMiddle } from '../../../common/utils/utils'; - -export async function generateMetadata( - { params }: any, - parent: ResolvingMetadata -): Promise { - const title = `STX Microblock - ${truncateMiddle(params?.hash)}`; - return Promise.resolve({ - ...meta, - title, - openGraph: { - ...meta.openGraph, - title, - }, - }); -} - -export default function Layout({ children }: { children: ReactNode }) { - return <>{children}; -} diff --git a/src/app/microblock/[hash]/page.tsx b/src/app/microblock/[hash]/page.tsx deleted file mode 100644 index e76a7aaef..000000000 --- a/src/app/microblock/[hash]/page.tsx +++ /dev/null @@ -1,10 +0,0 @@ -'use client'; - -import dynamic from 'next/dynamic'; - -const Page = dynamic(() => import('./PageClient'), { - loading: () => null, - ssr: false, -}); - -export default Page; diff --git a/src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx b/src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx deleted file mode 100644 index ea06f381d..000000000 --- a/src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx +++ /dev/null @@ -1,56 +0,0 @@ -'use client'; - -import { FC, memo } from 'react'; - -import { TxLink } from '../../../../common/components/ExplorerLinks'; -import { Section } from '../../../../common/components/Section'; -import { TwoColsListItem } from '../../../../common/components/TwoColumnsListItem'; -import { TxIcon } from '../../../../common/components/TxIcon'; -import { SkeletonGenericTransactionList } from '../../../../common/components/loaders/skeleton-transaction'; -import { useSuspenseMicroblockByHash } from '../../../../common/queries/useMicroblockByHash'; -import { truncateMiddle } from '../../../../common/utils/utils'; -import { Box } from '../../../../ui/Box'; -import { Grid } from '../../../../ui/Grid'; -import { Text, Title } from '../../../../ui/typography'; - -interface MicroblockTxsListProps { - microblockHash: string; - limit?: number; -} - -export const MicroblockTxsList: FC = memo(({ microblockHash, limit }) => { - const { isLoading, data } = useSuspenseMicroblockByHash(microblockHash); - - if (isLoading) { - return ; - } - - const txIds = data?.txs || []; - - return ( -
- - {!!txIds.length ? ( - txIds.map((txId: string) => ( - } - leftContent={{ - title: ( - - <TxLink txId={txId}>{truncateMiddle(txId)}</TxLink> - - ), - subtitle: null, - }} - /> - )) - ) : ( - - No transactions yet - - )} - -
- ); -}); diff --git a/src/common/queries/useBlockByHash.ts b/src/common/queries/useBlockByHash.ts index fd8a2771d..b65747d5f 100644 --- a/src/common/queries/useBlockByHash.ts +++ b/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, '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, 'queryKey'> + > = {} ) { - const api = useApi(); - if (!hash) throw new Error('Hash is required'); + const { url: activeNetworkUrl } = useGlobalContext().activeNetwork; + if (!heightOrHash) throw new Error('Height or 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, });