feat: add unconfirmed transaction badge

.changeset/dark-jobs-rescue.md

@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+Unconfirmed transactions are now searchable and denoted by a badge. Closes https://github.com/SiaFoundation/explored/issues/291.

apps/explorer/app/(main)/tx/[id]/page.tsx

@@ -57,20 +57,26 @@ export default async function Page({ params }: ExplorerPageProps) {
       throw transactionError
     }
 
-    const { data: parentBlock } = await explored.blockByID({
-      params: { id: transactionChainIndices[0].id },
-    })
+    // Unconfirmed transactions don't have a block, so we need to
+    // be able to succeed without it.
+    const { data: parentBlock } = transactionChainIndices?.[0]
+      ? await explored.blockByID({
+          params: { id: transactionChainIndices[0].id },
+        })
+      : { data: undefined }
     return (
       <Transaction
         txType={getV1TransactionType(transaction)}
         transaction={transaction}
         transactionHeaderData={{
           id: stripPrefix(transaction.id),
-          blockHeight: transactionChainIndices[0].height,
-          confirmations:
-            currentTip.height - transactionChainIndices[0].height + 1,
-          timestamp: parentBlock.timestamp,
+          blockHeight: transactionChainIndices?.[0]?.height,
+          confirmations: transactionChainIndices?.[0]
+            ? currentTip.height - transactionChainIndices[0].height + 1
+            : undefined,
+          timestamp: parentBlock?.timestamp,
           version: 'v1',
+          unconfirmed: transaction.unconfirmed,
         }}
       />
     )
@@ -90,9 +96,11 @@ export default async function Page({ params }: ExplorerPageProps) {
       throw transactionError
     }
 
-    const { data: parentBlock } = await explored.blockByID({
-      params: { id: transactionChainIndices[0].id },
-    })
+    const { data: parentBlock } = transactionChainIndices?.[0]
+      ? await explored.blockByID({
+          params: { id: transactionChainIndices[0].id },
+        })
+      : { data: undefined }
     return (
       <Transaction
         txType={getV2TransactionType(
@@ -101,11 +109,13 @@ export default async function Page({ params }: ExplorerPageProps) {
         transaction={transaction}
         transactionHeaderData={{
           id: stripPrefix(transaction.id),
-          blockHeight: transactionChainIndices[0].height,
-          confirmations:
-            currentTip.height - transactionChainIndices[0].height + 1,
-          timestamp: parentBlock.timestamp,
+          blockHeight: transactionChainIndices?.[0]?.height,
+          confirmations: transactionChainIndices?.[0]
+            ? currentTip.height - transactionChainIndices[0].height + 1
+            : undefined,
+          timestamp: parentBlock?.timestamp,
           version: 'v2',
+          unconfirmed: transaction.unconfirmed,
         }}
       />
     )

apps/explorer/components/Transaction/TransactionHeader.tsx

@@ -6,10 +6,11 @@ import LoadingTimestamp from '../LoadingTimestamp'
 
 export type TransactionHeaderData = {
   id: string
-  blockHeight: number
-  confirmations: number
-  timestamp: string
+  blockHeight?: number
+  confirmations?: number
+  timestamp?: string
   version: 'v1' | 'v2'
+  unconfirmed?: boolean
 }
 
 type Props = {
@@ -23,7 +24,7 @@ export function TransactionHeader({
   transactionHeaderData,
   txType,
 }: Props) {
-  const { id, timestamp, blockHeight, confirmations, version } =
+  const { id, timestamp, blockHeight, confirmations, version, unconfirmed } =
     transactionHeaderData
   return (
     <div className="flex flex-col gap-4">
@@ -49,6 +50,7 @@ export function TransactionHeader({
       </div>
       <div className="flex flex-wrap justify-between gap-2">
         <div className="flex flex-wrap gap-2">
+          {unconfirmed && <Badge variant="amber">Unconfirmed</Badge>}
           {txType && <Badge variant="accent">{getTxTypeLabel(txType)}</Badge>}
         </div>
         <div className="flex flex-wrap gap-2">
@@ -60,7 +62,8 @@ export function TransactionHeader({
                 </Tooltip>
                 <div className="">|</div>
                 <div className="">
-                  {confirmations >= 72 ? '72+' : confirmations} confirmations
+                  {confirmations && confirmations >= 72 ? '72+' : confirmations}{' '}
+                  confirmations
                 </div>
               </div>
             </Badge>