block hash or height

db52d2cf · isstuev · ddc68cf9 · db52d2cf · db52d2cf · db52d2cf
Commit db52d2cf authored May 26, 2023 by isstuev
37 changed files
--- a/lib/api/resources.ts
+++ b/lib/api/resources.ts
@@ -164,18 +164,18 @@ export const RESOURCES = {
    filterFields: [ 'type' as const ],
  },
  block: {
-    path: '/api/v2/blocks/:height',
+    path: '/api/v2/blocks/:height_or_hash',
-    pathParams: [ 'height' as const ],
+    pathParams: [ 'height_or_hash' as const ],
  },
  block_txs: {
-    path: '/api/v2/blocks/:height/transactions',
+    path: '/api/v2/blocks/:height_or_hash/transactions',
-    pathParams: [ 'height' as const ],
+    pathParams: [ 'height_or_hash' as const ],
    paginationFields: [ 'block_number' as const, 'items_count' as const, 'index' as const ],
    filterFields: [],
  },
  block_withdrawals: {
-    path: '/api/v2/blocks/:height/withdrawals',
+    path: '/api/v2/blocks/:height_or_hash/withdrawals',
-    pathParams: [ 'height' as const ],
+    pathParams: [ 'height_or_hash' as const ],
    paginationFields: [ 'items_count' as const, 'index' as const ],
    filterFields: [],
  },

--- a/lib/hooks/useNavItems.tsx
+++ b/lib/hooks/useNavItems.tsx
@@ -62,7 +62,7 @@ export default function useNavItems(): ReturnType {
      text: 'Blocks',
      nextRoute: { pathname: '/blocks' as const },
      icon: blocksIcon,
-      isActive: pathname === '/blocks' || pathname === '/block/[height]',
+      isActive: pathname === '/blocks' || pathname === '/block/[height_or_hash]',
    };
    const txs = {
      text: 'Transactions',

--- a/lib/mixpanel/getPageType.ts
+++ b/lib/mixpanel/getPageType.ts
@@ -5,7 +5,7 @@ const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
  '/txs': 'Transactions',
  '/tx/[hash]': 'Transaction details',
  '/blocks': 'Blocks',
-  '/block/[height]': 'Block details',
+  '/block/[height_or_hash]': 'Block details',
  '/accounts': 'Top accounts',
  '/address/[hash]': 'Address details',
  '/verified-contracts': 'Verified contracts',

--- a/lib/next/block/getSeo.ts
+++ b/lib/next/block/getSeo.ts
@@ -2,11 +2,14 @@ import type { RoutedQuery } from 'nextjs-routes';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
-export default function getSeo(params?: RoutedQuery<'/block/[height]'>) {
+export default function getSeo(params?: RoutedQuery<'/block/[height_or_hash]'>) {
  const networkTitle = getNetworkTitle();
+  const isHash = params ? params.height_or_hash.startsWith('0x') : false;
  return {
-    title: params ? `Block ${ params.height } - ${ networkTitle }` : '',
+    title: params ? `Block ${ params.height_or_hash } - ${ networkTitle }` : '',
-    description: params ? `View the transactions, token transfers, and uncles for block number ${ params.height }` : '',
+    description: params ?
+      `View the transactions, token transfers, and uncles for block ${ isHash ? '' : 'number ' }${ params.height_or_hash }` : '',
  };
 }
--- a/lib/next/getServerSideProps.ts
+++ b/lib/next/getServerSideProps.ts
@@ -14,8 +14,8 @@ export const getServerSideProps: GetServerSideProps<Props> = async({ req, query
      cookies: req.headers.cookie || '',
      referrer: req.headers.referer || '',
      id: query.id?.toString() || '',
-      height: query.height?.toString() || '',
      hash: query.hash?.toString() || '',
+      height_or_hash: query.height_or_hash?.toString() || '',
    },
  };
 };
--- a/pages/block/[height].tsx
+++ b/pages/block/[height].tsx
@@ -9,8 +9,8 @@ import Page from 'ui/shared/Page/Page';
 const Block = dynamic(() => import('ui/pages/Block'), { ssr: false });
-const BlockPage: NextPage<RoutedQuery<'/block/[height]'>> = ({ height }: RoutedQuery<'/block/[height]'>) => {
+const BlockPage: NextPage<RoutedQuery<'/block/[height_or_hash]'>> = (params: RoutedQuery<'/block/[height_or_hash]'>) => {
-  const { title, description } = getSeo({ height });
+  const { title, description } = getSeo({ height_or_hash: params.height_or_hash });
  return (
    <>
      <Head>

--- a/types/nextjs-routes.d.ts
+++ b/types/nextjs-routes.d.ts
@@ -23,7 +23,7 @@ declare module "nextjs-routes" {
    | StaticRoute<"/apps">
    | StaticRoute<"/auth/auth0">
    | StaticRoute<"/auth/profile">
-    | DynamicRoute<"/block/[height]", { "height": string }>
+    | DynamicRoute<"/block/[height_or_hash]", { "height_or_hash": string }>
    | StaticRoute<"/blocks">
    | StaticRoute<"/csv-export">
    | StaticRoute<"/graphiql">

--- a/ui/address/AddressDetails.tsx
+++ b/ui/address/AddressDetails.tsx
@@ -210,7 +210,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
            isLoading={ addressQuery.isPlaceholderData }
          >
            <LinkInternal
-              href={ route({ pathname: '/block/[height]', query: { height: String(data.block_number_balance_updated_at) } }) }
+              href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_number_balance_updated_at) } }) }
              display="flex"
              alignItems="center"
            >

--- a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
+++ b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
@@ -18,7 +18,7 @@ type Props = Block & {
 };
 const AddressBlocksValidatedListItem = (props: Props) => {
-  const blockUrl = route({ pathname: '/block/[height]', query: { height: props.height.toString() } });
+  const blockUrl = route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: props.height.toString() } });
  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
  const totalReward = getBlockTotalReward(props);

--- a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
+++ b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
@@ -16,7 +16,7 @@ type Props = Block & {
 };
 const AddressBlocksValidatedTableItem = (props: Props) => {
-  const blockUrl = route({ pathname: '/block/[height]', query: { height: String(props.height) } });
+  const blockUrl = route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(props.height) } });
  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
  const totalReward = getBlockTotalReward(props);

--- a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
@@ -19,7 +19,7 @@ type Props = AddressCoinBalanceHistoryItem & {
 };
 const AddressCoinBalanceListItem = (props: Props) => {
-  const blockUrl = route({ pathname: '/block/[height]', query: { height: String(props.block_number) } });
+  const blockUrl = route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(props.block_number) } });
  const deltaBn = BigNumber(props.delta).div(WEI);
  const isPositiveDelta = deltaBn.gte(ZERO);
  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);

--- a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
+++ b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
@@ -17,7 +17,7 @@ type Props = AddressCoinBalanceHistoryItem & {
 };
 const AddressCoinBalanceTableItem = (props: Props) => {
-  const blockUrl = route({ pathname: '/block/[height]', query: { height: String(props.block_number) } });
+  const blockUrl = route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(props.block_number) } });
  const deltaBn = BigNumber(props.delta).div(WEI);
  const isPositiveDelta = deltaBn.gte(ZERO);
  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);

--- a/ui/address/internals/AddressIntTxsListItem.tsx
+++ b/ui/address/internals/AddressIntTxsListItem.tsx
@@ -57,7 +57,7 @@ const TxInternalsListItem = ({
      <HStack spacing={ 1 }>
        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Block</Skeleton>
        <Skeleton isLoaded={ !isLoading }>
-          <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: block.toString() } }) }>{ block }</LinkInternal>
+          <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: block.toString() } }) }>{ block }</LinkInternal>
        </Skeleton>
      </HStack>
      <Box w="100%" display="flex" columnGap={ 3 }>

--- a/ui/address/internals/AddressIntTxsTableItem.tsx
+++ b/ui/address/internals/AddressIntTxsTableItem.tsx
@@ -67,7 +67,7 @@ const AddressIntTxsTableItem = ({
      </Td>
      <Td verticalAlign="middle">
        <Skeleton isLoaded={ !isLoading } display="inline-block">
-          <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: block.toString() } }) }>
+          <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: block.toString() } }) }>
            { block }
          </LinkInternal>
        </Skeleton>

--- a/ui/block/BlockDetails.tsx
+++ b/ui/block/BlockDetails.tsx
@@ -38,7 +38,7 @@ interface Props {
 const BlockDetails = ({ query }: Props) => {
  const [ isExpanded, setIsExpanded ] = React.useState(false);
  const router = useRouter();
-  const heightOrHash = getQueryParamString(router.query.height);
+  const heightOrHash = getQueryParamString(router.query.height_or_hash);
  const separatorColor = useColorModeValue('gray.200', 'gray.700');
@@ -60,7 +60,7 @@ const BlockDetails = ({ query }: Props) => {
    const increment = direction === 'next' ? +1 : -1;
    const nextId = String(data.height + increment);
-    router.push({ pathname: '/block/[height]', query: { height: nextId } }, undefined);
+    router.push({ pathname: '/block/[height_or_hash]', query: { height_or_hash: nextId } }, undefined);
  }, [ data, router ]);
  if (isError) {
@@ -175,7 +175,7 @@ const BlockDetails = ({ query }: Props) => {
        isLoading={ isPlaceholderData }
      >
        <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: heightOrHash, tab: 'txs' } }) }>
+          <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'txs' } }) }>
            { data.tx_count } transaction{ data.tx_count === 1 ? '' : 's' }
          </LinkInternal>
        </Skeleton>

--- a/ui/blocks/BlocksListItem.tsx
+++ b/ui/blocks/BlocksListItem.tsx
@@ -40,7 +40,10 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
          <Skeleton isLoaded={ !isLoading } display="inline-block">
            <LinkInternal
              fontWeight={ 600 }
-              href={ route({ pathname: '/block/[height]', query: { height: data.type === 'reorg' ? String(data.hash) : String(data.height) } }) }
+              href={ route({
+                pathname: '/block/[height_or_hash]',
+                query: { height_or_hash: data.type === 'reorg' ? String(data.hash) : String(data.height) },
+              }) }
            >
              { data.height }
            </LinkInternal>
@@ -62,7 +65,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
        <Text fontWeight={ 500 }>Txn</Text>
        { data.tx_count > 0 ? (
          <Skeleton isLoaded={ !isLoading } display="inline-block">
-            <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: String(data.height), tab: 'txs' } }) }>
+            <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.height), tab: 'txs' } }) }>
              { data.tx_count }
            </LinkInternal>
          </Skeleton>

--- a/ui/blocks/BlocksTableItem.tsx
+++ b/ui/blocks/BlocksTableItem.tsx
@@ -47,7 +47,10 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
            <Skeleton isLoaded={ !isLoading } display="inline-block">
              <LinkInternal
                fontWeight={ 600 }
-                href={ route({ pathname: '/block/[height]', query: { height: data.type === 'reorg' ? String(data.hash) : String(data.height) } }) }
+                href={ route({
+                  pathname: '/block/[height_or_hash]',
+                  query: { height_or_hash: data.type === 'reorg' ? String(data.hash) : String(data.height) },
+                }) }
              >
                { data.height }
              </LinkInternal>
@@ -75,7 +78,10 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
      <Td isNumeric fontSize="sm">
        { data.tx_count > 0 ? (
          <Skeleton isLoaded={ !isLoading } display="inline-block">
-            <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: String(data.height), tab: 'txs' } }) }>
+            <LinkInternal href={ route({
+              pathname: '/block/[height_or_hash]',
+              query: { height_or_hash: String(data.height), tab: 'txs' },
+            }) }>
              { data.tx_count }
            </LinkInternal>
          </Skeleton>

--- a/ui/home/LatestBlocksItem.tsx
+++ b/ui/home/LatestBlocksItem.tsx
@@ -45,7 +45,7 @@ const LatestBlocksItem = ({ block, h }: Props) => {
        <HStack spacing={ 2 }>
          <Icon as={ blockIcon } boxSize="30px" color="link"/>
          <LinkInternal
-            href={ route({ pathname: '/block/[height]', query: { height: String(block.height) } }) }
+            href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(block.height) } }) }
            fontSize="xl"
            fontWeight="500"
          >

--- a/ui/home/LatestDepositsItem.tsx
+++ b/ui/home/LatestDepositsItem.tsx
@@ -29,7 +29,9 @@ const LatestTxsItem = ({ item }: Props) => {
  const l1BlockLink = (
    <LinkExternal
-      href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.l1_block_number.toString() } }) }
+      href={ appConfig.L2.L1BaseUrl +
+        route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l1_block_number.toString() } })
+      }
      fontWeight={ 700 }
      display="inline-flex"
      mr={ 2 }

--- a/ui/l2Deposits/DepositsListItem.tsx
+++ b/ui/l2Deposits/DepositsListItem.tsx
@@ -26,7 +26,7 @@ const DepositsListItem = ({ item }: Props) => {
      <ListItemMobileGrid.Label>L1 block No</ListItemMobileGrid.Label>
      <ListItemMobileGrid.Value>
        <LinkExternal
-          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.l1_block_number.toString() } }) }
+          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l1_block_number.toString() } }) }
          fontWeight={ 600 }
          display="inline-flex"
        >

--- a/ui/l2Deposits/DepositsTableItem.tsx
+++ b/ui/l2Deposits/DepositsTableItem.tsx
@@ -23,7 +23,7 @@ const WithdrawalsTableItem = ({ item }: Props) => {
    <Tr>
      <Td verticalAlign="middle" fontWeight={ 600 }>
        <LinkExternal
-          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.l1_block_number.toString() } }) }
+          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l1_block_number.toString() } }) }
          fontWeight={ 600 }
          display="inline-flex"
        >

--- a/ui/l2OutputRoots/OutputRootsListItem.tsx
+++ b/ui/l2OutputRoots/OutputRootsListItem.tsx
@@ -35,7 +35,7 @@ const OutputRootsListItem = ({ item }: Props) => {
          display="flex"
          width="fit-content"
          alignItems="center"
-          href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString() } }) }
+          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString() } }) }
        >
          { item.l2_block_number }
        </LinkInternal>

--- a/ui/l2OutputRoots/OutputRootsTableItem.tsx
+++ b/ui/l2OutputRoots/OutputRootsTableItem.tsx
@@ -32,7 +32,7 @@ const OutputRootsTableItem = ({ item }: Props) => {
          display="flex"
          width="fit-content"
          alignItems="center"
-          href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString() } }) }
+          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString() } }) }
        >
          <Icon as={ txBatchIcon } boxSize={ 6 } mr={ 1 }/>
          { item.l2_block_number }

--- a/ui/l2TxnBatches/TxnBatchesListItem.tsx
+++ b/ui/l2TxnBatches/TxnBatchesListItem.tsx
@@ -28,7 +28,7 @@ const TxnBatchesListItem = ({ item }: Props) => {
          display="flex"
          width="fit-content"
          alignItems="center"
-          href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString() } }) }
+          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString() } }) }
        >
          <Icon as={ txBatchIcon } boxSize={ 6 } mr={ 1 }/>
          { item.l2_block_number }
@@ -37,7 +37,7 @@ const TxnBatchesListItem = ({ item }: Props) => {
      <ListItemMobileGrid.Label>L2 block txn count</ListItemMobileGrid.Label>
      <ListItemMobileGrid.Value>
-        <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString(), tab: 'txs' } }) }>
+        <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString(), tab: 'txs' } }) }>
          { item.tx_count }
        </LinkInternal>
      </ListItemMobileGrid.Value>
@@ -47,7 +47,7 @@ const TxnBatchesListItem = ({ item }: Props) => {
        <LinkExternal
          fontWeight={ 600 }
          display="inline-flex"
-          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.epoch_number.toString() } }) }
+          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.epoch_number.toString() } }) }
        >
          { item.epoch_number }
        </LinkExternal>

--- a/ui/l2TxnBatches/TxnBatchesTableItem.tsx
+++ b/ui/l2TxnBatches/TxnBatchesTableItem.tsx
@@ -25,7 +25,7 @@ const TxnBatchesTableItem = ({ item }: Props) => {
          display="flex"
          width="fit-content"
          alignItems="center"
-          href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString() } }) }
+          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString() } }) }
        >
          <Icon as={ txBatchIcon } boxSize={ 6 } mr={ 1 }/>
          { item.l2_block_number }
@@ -33,7 +33,7 @@ const TxnBatchesTableItem = ({ item }: Props) => {
      </Td>
      <Td>
        <LinkInternal
-          href={ route({ pathname: '/block/[height]', query: { height: item.l2_block_number.toString(), tab: 'txs' } }) }
+          href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.l2_block_number.toString(), tab: 'txs' } }) }
          lineHeight="24px"
        >
          { item.tx_count }
@@ -41,7 +41,7 @@ const TxnBatchesTableItem = ({ item }: Props) => {
      </Td>
      <Td>
        <LinkExternal
-          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height]', query: { height: item.epoch_number.toString() } }) }
+          href={ appConfig.L2.L1BaseUrl + route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.epoch_number.toString() } }) }
          fontWeight={ 600 }
          lineHeight="24px"
          display="inline-flex"

--- a/ui/pages/Block.tsx
+++ b/ui/pages/Block.tsx
@@ -34,20 +34,20 @@ const BlockPageContent = () => {
  const router = useRouter();
  const isMobile = useIsMobile();
  const appProps = useAppContext();
-  const height = getQueryParamString(router.query.height);
+  const heightOrHash = getQueryParamString(router.query.height_or_hash);
  const tab = getQueryParamString(router.query.tab);
  const blockQuery = useApiQuery('block', {
-    pathParams: { height },
+    pathParams: { height_or_hash: heightOrHash },
    queryOptions: {
-      enabled: Boolean(height),
+      enabled: Boolean(heightOrHash),
      placeholderData: BLOCK,
    },
  });
  const blockTxsQuery = useQueryWithPages({
    resourceName: 'block_txs',
-    pathParams: { height },
+    pathParams: { height_or_hash: heightOrHash },
    options: {
      enabled: Boolean(!blockQuery.isPlaceholderData && blockQuery.data?.height && tab === 'txs'),
      placeholderData: generateListStub<'block_txs'>(TX, 50, { next_page_params: {
@@ -60,7 +60,7 @@ const BlockPageContent = () => {
  const blockWithdrawalsQuery = useQueryWithPages({
    resourceName: 'block_withdrawals',
-    pathParams: { height },
+    pathParams: { height_or_hash: heightOrHash },
    options: {
      enabled: Boolean(!blockQuery.isPlaceholderData && blockQuery.data?.height && appConfig.beaconChain.hasBeaconChain && tab === 'withdrawals'),
      placeholderData: generateListStub<'block_withdrawals'>(WITHDRAWAL, 50, { next_page_params: {
@@ -70,7 +70,7 @@ const BlockPageContent = () => {
    },
  });
-  if (!height) {
+  if (!heightOrHash) {
    throw new Error('Block not found', { cause: { status: 404 } });
  }
@@ -117,7 +117,7 @@ const BlockPageContent = () => {
      <PageTitle
        title={ `Block #${ blockQuery.data?.height }` }
        backLink={ backLink }
-        contentAfter={ <NetworkExplorers type="block" pathParam={ height } ml={{ base: 'initial', lg: 'auto' }}/> }
+        contentAfter={ <NetworkExplorers type="block" pathParam={ heightOrHash } ml={{ base: 'initial', lg: 'auto' }}/> }
        isLoading={ blockQuery.isPlaceholderData }
      />
      { blockQuery.isPlaceholderData ? <SkeletonTabs tabs={ tabs }/> : (

--- a/ui/pages/SearchResults.tsx
+++ b/ui/pages/SearchResults.tsx
@@ -26,7 +26,7 @@ const SearchResultsPageContent = () => {
    if (redirectCheckQuery.data?.redirect && redirectCheckQuery.data.parameter) {
      switch (redirectCheckQuery.data.type) {
        case 'block': {
-          router.push({ pathname: '/block/[height]', query: { height: redirectCheckQuery.data.parameter } });
+          router.push({ pathname: '/block/[height_or_hash]', query: { height_or_hash: redirectCheckQuery.data.parameter } });
          return;
        }
        case 'address': {

--- a/ui/searchResults/SearchResultListItem.tsx
+++ b/ui/searchResults/SearchResultListItem.tsx
@@ -56,7 +56,7 @@ const SearchResultListItem = ({ data, searchTerm }: Props) => {
        return (
          <Flex alignItems="center">
            <Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
-            <LinkInternal fontWeight={ 700 } href={ route({ pathname: '/block/[height]', query: { height: String(data.block_number) } }) }>
+            <LinkInternal fontWeight={ 700 } href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } }) }>
              <Box as={ shouldHighlightHash ? 'span' : 'mark' }>{ data.block_number }</Box>
            </LinkInternal>
          </Flex>

--- a/ui/searchResults/SearchResultTableItem.tsx
+++ b/ui/searchResults/SearchResultTableItem.tsx
@@ -93,7 +93,7 @@ const SearchResultTableItem = ({ data, searchTerm }: Props) => {
            <Td fontSize="sm">
              <Flex alignItems="center">
                <Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
-                <LinkInternal fontWeight={ 700 } href={ route({ pathname: '/block/[height]', query: { height: String(data.block_number) } }) }>
+                <LinkInternal fontWeight={ 700 } href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } }) }>
                  <Box as={ shouldHighlightHash ? 'span' : 'mark' }>{ data.block_number }</Box>
                </LinkInternal>
              </Flex>

--- a/ui/shared/AppError/AppErrorBlockConsensus.tsx
+++ b/ui/shared/AppError/AppErrorBlockConsensus.tsx
@@ -19,7 +19,7 @@ const AppErrorBlockConsensus = ({ hash, className }: Props) => {
        size="lg"
        variant="outline"
        as="a"
-        href={ hash ? route({ pathname: '/block/[height]', query: { height: hash } }) : route({ pathname: '/' }) }
+        href={ hash ? route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: hash } }) : route({ pathname: '/' }) }
      >
        { hash ? 'View reorg' : 'Back to home' }
      </Button>

--- a/ui/shared/address/AddressLink.tsx
+++ b/ui/shared/address/AddressLink.tsx
@@ -49,7 +49,7 @@ const AddressLink = (props: Props) => {
  } else if (type === 'token') {
    url = route({ pathname: '/token/[hash]', query: { hash } });
  } else if (type === 'block') {
-    url = route({ pathname: '/block/[height]', query: { height: props.blockHeight } });
+    url = route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: props.blockHeight } });
  } else if (type === 'address_token') {
    url = route({ pathname: '/address/[hash]', query: { hash, tab: 'token_transfers', token: props.tokenHash, scroll_to_tabs: 'true' } });
  } else {

--- a/ui/snippets/searchBar/SearchBarSuggestItem.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggestItem.tsx
@@ -35,7 +35,7 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
        return route({ pathname: '/tx/[hash]', query: { hash: data.tx_hash } });
      }
      case 'block': {
-        return route({ pathname: '/block/[height]', query: { height: String(data.block_number) } });
+        return route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block_hash) } });
      }
    }
  })();

--- a/ui/tx/TxDetails.tsx
+++ b/ui/tx/TxDetails.tsx
@@ -163,7 +163,7 @@ const TxDetails = () => {
        { data.block === null ?
          <Text>Pending</Text> : (
            <Skeleton isLoaded={ !isPlaceholderData }>
-              <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: String(data.block) } }) }>
+              <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: String(data.block) } }) }>
                { data.block }
              </LinkInternal>
            </Skeleton>

--- a/ui/txs/TxsListItem.tsx
+++ b/ui/txs/TxsListItem.tsx
@@ -96,7 +96,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
        <Box mt={ 2 }>
          <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Block </Skeleton>
          <Skeleton isLoaded={ !isLoading } display="inline-block">
-            <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: tx.block.toString() } }) }>{ tx.block }</LinkInternal>
+            <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: tx.block.toString() } }) }>{ tx.block }</LinkInternal>
          </Skeleton>
        </Box>
      ) }

--- a/ui/txs/TxsTableItem.tsx
+++ b/ui/txs/TxsTableItem.tsx
@@ -120,7 +120,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
        <Td>
          { tx.block && (
            <Skeleton isLoaded={ !isLoading } display="inline-block">
-              <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: tx.block.toString() } }) }>
+              <LinkInternal href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: tx.block.toString() } }) }>
                { tx.block }
              </LinkInternal>
            </Skeleton>

--- a/ui/withdrawals/WithdrawalsListItem.tsx
+++ b/ui/withdrawals/WithdrawalsListItem.tsx
@@ -52,7 +52,7 @@ const WithdrawalsListItem = ({ item, isLoading, view }: Props) => {
              </Flex>
            ) : (
              <LinkInternal
-                href={ route({ pathname: '/block/[height]', query: { height: item.block_number.toString() } }) }
+                href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.block_number.toString() } }) }
                display="flex"
                width="fit-content"
                alignItems="center"

--- a/ui/withdrawals/WithdrawalsTableItem.tsx
+++ b/ui/withdrawals/WithdrawalsTableItem.tsx
@@ -43,7 +43,7 @@ const WithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
            </Flex>
          ) : (
            <LinkInternal
-              href={ route({ pathname: '/block/[height]', query: { height: item.block_number.toString() } }) }
+              href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: item.block_number.toString() } }) }
              display="flex"
              width="fit-content"
              alignItems="center"