reorg fixes

mocks/blocks/block.ts

@@ -49,7 +49,7 @@ export const base: Block = {
   uncles_hashes: [],
 };
 
-export const genesis = {
+export const genesis: Block = {
   base_fee_per_gas: null,
   burnt_fees: null,
   burnt_fees_percentage: null,

ui/block/BlockDetails.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
+import type { Block } from 'types/api/block';
+
+import type { ResourceError } from 'lib/api/resources';
 import * as blockMock from 'mocks/blocks/block';
 import TestApp from 'playwright/TestApp';
-import buildApiUrl from 'playwright/utils/buildApiUrl';
 
 import BlockDetails from './BlockDetails';
 
-const API_URL = buildApiUrl('block', { height: '1' });
 const hooksConfig = {
   router: {
     query: { height: '1' },
@@ -15,14 +17,14 @@ const hooksConfig = {
 };
 
 test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blockMock.base),
-  }));
+  const query = {
+    data: blockMock.base,
+    isLoading: false,
+  } as UseQueryResult<Block, ResourceError>;
 
   const component = await mount(
     <TestApp>
-      <BlockDetails/>
+      <BlockDetails query={ query }/>
     </TestApp>,
     { hooksConfig },
   );
@@ -33,14 +35,14 @@ test('regular block +@mobile +@dark-mode', async({ mount, page }) => {
 });
 
 test('genesis block', async({ mount, page }) => {
-  await page.route(API_URL, (route) => route.fulfill({
-    status: 200,
-    body: JSON.stringify(blockMock.genesis),
-  }));
+  const query = {
+    data: blockMock.genesis,
+    isLoading: false,
+  } as UseQueryResult<Block, ResourceError>;
 
   const component = await mount(
     <TestApp>
-      <BlockDetails/>
+      <BlockDetails query={ query }/>
     </TestApp>,
     { hooksConfig },
   );

ui/block/BlockDetails.tsx

 import { Grid, GridItem, Text, Icon, Link, Box, Tooltip } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
@@ -6,10 +7,12 @@ import { route } from 'nextjs-routes';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
+import type { Block } from 'types/api/block';
+
 import appConfig from 'configs/app/config';
 import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
-import useApiQuery from 'lib/api/useApiQuery';
+import type { ResourceError } from 'lib/api/resources';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI, WEI_IN_GWEI, ZERO } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
@@ -28,15 +31,16 @@ import PrevNext from 'ui/shared/PrevNext';
 import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
-const BlockDetails = () => {
+interface Props {
+  query: UseQueryResult<Block, ResourceError>;
+}
+
+const BlockDetails = ({ query }: Props) => {
   const [ isExpanded, setIsExpanded ] = React.useState(false);
   const router = useRouter();
-  const height = getQueryParamString(router.query.height);
+  const heightOrHash = getQueryParamString(router.query.height);
 
-  const { data, isLoading, isError, error } = useApiQuery('block', {
-    pathParams: { height },
-    queryOptions: { enabled: Boolean(height) },
-  });
+  const { data, isLoading, isError, error } = query;
 
   const handleCutClick = React.useCallback(() => {
     setIsExpanded((flag) => !flag);
@@ -47,11 +51,15 @@ const BlockDetails = () => {
   }, []);
 
   const handlePrevNextClick = React.useCallback((direction: 'prev' | 'next') => {
+    if (!data) {
+      return;
+    }
+
     const increment = direction === 'next' ? +1 : -1;
-    const nextId = String(Number(height) + increment);
+    const nextId = String(data.height + increment);
 
     router.push({ pathname: '/block/[height]', query: { height: nextId } }, undefined);
-  }, [ height, router ]);
+  }, [ data, router ]);
 
   if (isLoading) {
     return <BlockDetailsSkeleton/>;
@@ -85,7 +93,7 @@ const BlockDetails = () => {
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden">
       <DetailsInfoItem
-        title="Block height"
+        title={ `${ data.type === 'reorg' ? 'Reorg' : 'Block' } height` }
         hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain"
       >
         { data.height }
@@ -117,7 +125,7 @@ const BlockDetails = () => {
         title="Transactions"
         hint="The number of transactions in the block"
       >
-        <LinkInternal href={ route({ pathname: '/block/[height]', query: { height, tab: 'txs' } }) }>
+        <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: heightOrHash, tab: 'txs' } }) }>
           { data.tx_count } transaction{ data.tx_count === 1 ? '' : 's' }
         </LinkInternal>
       </DetailsInfoItem>

ui/blocks/BlocksListItem.tsx

@@ -36,7 +36,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
           { isPending && <Spinner size="sm"/> }
           <LinkInternal
             fontWeight={ 600 }
-            href={ route({ pathname: '/block/[height]', query: { height: String(data.height) } }) }
+            href={ route({ pathname: '/block/[height]', query: { height: data.type === 'reorg' ? String(data.hash) : String(data.height) } }) }
           >
             { data.height }
           </LinkInternal>

ui/blocks/BlocksTableItem.tsx

@@ -41,7 +41,7 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
           <Tooltip isDisabled={ data.type !== 'reorg' } label="Chain reorganizations">
             <LinkInternal
               fontWeight={ 600 }
-              href={ route({ pathname: '/block/[height]', query: { height: String(data.height) } }) }
+              href={ route({ pathname: '/block/[height]', query: { height: data.type === 'reorg' ? String(data.hash) : String(data.height) } }) }
             >
               { data.height }
             </LinkInternal>

ui/pages/Block.tsx

+import { Skeleton } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
@@ -28,6 +30,11 @@ const BlockPageContent = () => {
   const height = getQueryParamString(router.query.height);
   const tab = getQueryParamString(router.query.tab);
 
+  const blockQuery = useApiQuery('block', {
+    pathParams: { height },
+    queryOptions: { enabled: Boolean(height) },
+  });
+
   const blockTxsQuery = useQueryWithPages({
     resourceName: 'block_txs',
     pathParams: { height },
@@ -40,10 +47,10 @@ const BlockPageContent = () => {
     throw new Error('Block not found', { cause: { status: 404 } });
   }
 
-  const tabs: Array<RoutedTab> = [
-    { id: 'index', title: 'Details', component: <BlockDetails/> },
+  const tabs: Array<RoutedTab> = React.useMemo(() => ([
+    { id: 'index', title: 'Details', component: <BlockDetails query={ blockQuery }/> },
     { id: 'txs', title: 'Transactions', component: <TxsContent query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/> },
-  ];
+  ]), [ blockQuery, blockTxsQuery ]);
 
   const hasPagination = !isMobile && tab === 'txs' && blockTxsQuery.isPaginationVisible;
 
@@ -51,12 +58,16 @@ const BlockPageContent = () => {
 
   return (
     <Page>
-      <TextAd mb={ 6 }/>
-      <PageTitle
-        text={ `Block #${ height }` }
-        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-        backLinkLabel="Back to blocks list"
-      />
+      { blockQuery.isLoading ? <Skeleton h={{ base: 12, lg: 6 }} mb={ 6 } w="100%" maxW="680px"/> : <TextAd mb={ 6 }/> }
+      { blockQuery.isLoading ? (
+        <Skeleton h={ 10 } w="300px" mb={ 6 }/>
+      ) : (
+        <PageTitle
+          text={ `Block #${ blockQuery.data?.height }` }
+          backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
+          backLinkLabel="Back to blocks list"
+        />
+      ) }
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }