feat: add anchor tx link to btc block page

hirosystems · Feb 21, 2025 · 343e753 · 343e753
1 parent 348a807
commit 343e753
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/src/app/btcblock/[hash]/BitcoinAnchorDetails.tsx b/src/app/btcblock/[hash]/BitcoinAnchorDetails.tsx
@@ -7,10 +7,12 @@ import { useParamsBlockHash } from '../../../app/block/[hash]/useParamsBlockHash
 import { KeyValueVertical } from '../../../common/components/KeyValueVertical';
 import { Section } from '../../../common/components/Section';
 import { useGlobalContext } from '../../../common/context/useGlobalContext';
+import { useBlockByHash } from '../../../common/queries/useBlockByHash';
 import { useSuspenseBurnBlock } from '../../../common/queries/useBurnBlock';
 import { toRelativeTime, truncateMiddle } from '../../../common/utils/utils';
 import { Link } from '../../../ui/Link';
 import { Text } from '../../../ui/Text';
+import { TextLink } from '../../../ui/TextLink';
 import BitcoinIcon from '../../../ui/icons/BitcoinIcon';
 import { ExplorerErrorBoundary } from '../../_components/ErrorBoundary';
 
@@ -24,6 +26,10 @@ export function BitcoinAnchorDetailsBase() {
   const { data: btcBlock } = useSuspenseBurnBlock(useParamsBlockHash(), {
     refetchOnWindowFocus: true,
   });
+  const stxBlockHash = btcBlock?.stacks_blocks?.[0];
+  const { data: stxBlock } = useBlockByHash(stxBlockHash, {
+    enabled: !!stxBlockHash,
+  });
 
   const { btcBlockBaseUrl, btcTxBaseUrl } = useGlobalContext().activeNetwork;
   const btcBlockBlockTimeUTC = new Date(btcBlock.burn_block_time_iso).toUTCString();
@@ -64,21 +70,23 @@ export function BitcoinAnchorDetailsBase() {
         }
         copyValue={btcBlock.burn_block_hash}
       />
-      <KeyValueVertical
-        className="key-value-vertical"
-        label={'Anchor transaction ID'}
-        value={
-          <Link
-            target="_blank"
-            href={`${btcTxBaseUrl}/${btcBlock.burn_block_hash.replace('0x', '')}`}
-          >
-            <Text fontSize="sm" fontWeight="medium">
-              {truncateMiddle(btcBlock.burn_block_hash, 8)}
-            </Text>
-          </Link>
-        }
-        copyValue={btcBlock.burn_block_hash}
-      />
+      {!!stxBlock?.miner_txid && (
+        <KeyValueVertical
+          label={'Anchor transaction ID'}
+          value={
+            <TextLink
+              as="a"
+              target="_blank"
+              href={`${btcTxBaseUrl}/${stxBlock.miner_txid.replace('0x', '')}`}
+            >
+              <Text fontSize={'sm'} fontWeight={'medium'}>
+                {truncateMiddle(stxBlock.miner_txid, 8)}
+              </Text>
+            </TextLink>
+          }
+          copyValue={stxBlock.miner_txid}
+        />
+      )}
       <KeyValueVertical
         className="key-value-vertical"
         label={'Timestamp'}

diff --git a/src/common/queries/useBlockByHash.ts b/src/common/queries/useBlockByHash.ts
@@ -7,18 +7,15 @@ import { useApiClient } from '../../api/useApiClient';
 
 const BLOCK_QUERY_KEY = 'block';
 
-export function useBlockByHash(
-  hash?: string,
-  options: Partial<Omit<UseSuspenseQueryOptions<any, any, Block, any>, 'queryKey'>> = {}
-) {
+export function useBlockByHash(hash?: string, options: any = {}) {
   const apiClient = useApiClient();
-  return useQuery({
+  return useQuery<Block>({
     queryKey: ['blockByHash', hash],
     queryFn: async () => {
       if (!hash) return undefined;
-      return await callApiWithErrorHandling(apiClient, '/extended/v2/blocks/{height_or_hash}', {
+      return (await callApiWithErrorHandling(apiClient, '/extended/v2/blocks/{height_or_hash}', {
         params: { path: { height_or_hash: hash } },
-      });
+      })) as unknown as Block;
     },
     staleTime: Infinity,
     enabled: !!hash,