feat: add anchor tx link to btc block page

hirosystems · Feb 21, 2025 · 8e6bf30 · 8e6bf30
1 parent 348a807
commit 8e6bf30
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 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,12 +26,18 @@ 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();
 
   if (!btcBlock) return null;
 
+  console.log('222', btcBlock);
+
   return (
     <StyledSection title="Bitcoin anchor details">
       <KeyValueVertical
@@ -64,21 +72,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 && (
+        <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,10 +7,7 @@ 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 = {}) {
   const apiClient = useApiClient();
   return useQuery({
     queryKey: ['blockByHash', hash],

diff --git a/src/common/queries/useBurnBlock.ts b/src/common/queries/useBurnBlock.ts
@@ -62,7 +62,7 @@ export function useFetchMultipleBurnBlocks(): (
 }
 
 export function useBurnBlock(
-  heightOrHash: number | string,
+  heightOrHash: number | string | undefined,
   options: any = {}
 ): UseQueryResult<BurnBlock> {
   const apiClient = useApiClient();
@@ -79,6 +79,7 @@ export function useBurnBlock(
       );
     },
     staleTime: Infinity,
+    enabled: !!heightOrHash,
     ...options,
   });
 }