feat: why did my tx fail

src/app/txid/[txId]/Alert.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { ReactNode } from 'react';
 
 import { Alert, AlertProps } from '../../../ui/Alert';
 import { AlertDescription } from '../../../ui/AlertDescription';
@@ -11,9 +12,15 @@ interface AlertError {
   message?: string;
 }
 
-export function AlertBase({ status, message }: { status: AlertProps['status']; message: string }) {
+export function AlertBase({
+  status,
+  message,
+}: {
+  status: AlertProps['status'];
+  message: string | ReactNode;
+}) {
   return (
-    <Alert status={status} rounded={'lg'}>
+    <Alert status={status} rounded={'lg'} alignItems={'flexStart'}>
       <AlertIcon />
       <AlertDescription fontSize={'sm'}>{message}</AlertDescription>
     </Alert>

src/app/txid/[txId]/TxAlerts.tsx

@@ -7,12 +7,17 @@ import { MempoolTransaction, Transaction } from '@stacks/stacks-blockchain-api-t
 import { TransactionStatus } from '../../../common/constants/constants';
 import { useGlobalContext } from '../../../common/context/useGlobalContext';
 import { getTransactionStatus } from '../../../common/utils/transactions';
+import { ListItem } from '../../../ui/ListItem';
+import { Text } from '../../../ui/Text';
+import { UnorderedList } from '../../../ui/UnorderedList';
 import { ExplorerErrorBoundary } from '../../_components/ErrorBoundary';
 import { AlertBase } from './Alert';
+import { useWhyDidMyTxFail } from './useWhyDidMyTxFail';
 
 interface TxAlertsBaseProps {
   tx: Transaction | MempoolTransaction;
 }
+
 function TxAlertsBase({ tx }: TxAlertsBaseProps) {
   const networkMode = useGlobalContext().activeNetwork.mode;
   // for testnet, show after 4 hours. for mainnet, show after 24 hours
@@ -26,16 +31,39 @@ function TxAlertsBase({ tx }: TxAlertsBaseProps) {
     (networkMode === 'testnet' ? HOURS_NOTICE_TESTNET : HOURS_NOTICE_MAINNET);
   const isNonCanonical = txStatus === TransactionStatus.NON_CANONICAL;
 
+  const { data } = useWhyDidMyTxFail(tx.tx_id);
+  const messages = (
+    data?.results?.map((result: { message?: string }) => result.message) || []
+  )?.filter((message: string) => !!message);
+
   const failedMessage =
     tx.tx_status === 'abort_by_response'
-      ? 'This transaction did not succeed because the transaction was aborted during its execution.'
-      : 'This transaction would have succeeded, but was rolled back by a supplied post-condition.';
+      ? 'This transaction did not succeed because the transaction was aborted during its execution'
+      : 'This transaction would have succeeded, but was rolled back by a supplied post-condition';
 
   const longPendingMessage =
-    'Transactions that cannot be confirmed within 256 blocks are eventually canceled automatically.';
+    'Transactions that cannot be confirmed within 256 blocks are eventually canceled automatically';
 
   const nonCanonicalMessage =
-    'This transaction is in a non-canonical fork. It is not in the canonical Stacks chain.';
+    'This transaction is in a non-canonical fork. It is not in the canonical Stacks chain';
+
+  if (messages?.length) {
+    return (
+      <AlertBase
+        status={'warning'}
+        message={
+          <>
+            <Text>{failedMessage}:</Text>
+            <UnorderedList mt={2}>
+              {messages.map((message: string) => (
+                <ListItem>{message}</ListItem>
+              ))}
+            </UnorderedList>
+          </>
+        }
+      />
+    );
+  }
 
   return (
     <>

src/app/txid/[txId]/useWhyDidMyTxFail.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useGlobalContext } from '../../../common/context/useGlobalContext';
+
+export function useWhyDidMyTxFail(txId: string) {
+  const { url: activeNetworkUrl } = useGlobalContext().activeNetwork;
+  const txIdWithoutPrefix = txId.replace('0x', '');
+  return useQuery({
+    queryKey: ['whyDidMyTxFail', txIdWithoutPrefix],
+    queryFn: () =>
+      fetch(`${activeNetworkUrl}/whydidmytxfail/tx/${txIdWithoutPrefix}/logs`).then(res =>
+        res.json()
+      ),
+  });
+}