feat(amount): show tx amount on home feed + block page

Home LatestTxList now consumes the /api/transactions feed (which carries the
total-output amount) instead of deriving bare txids from recent blocks. The
block API returns a parallel txValues array (bounded to <=50-tx blocks) and the
block page shows the amount next to each txid.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: NateIsern

server/index.ts

@@ -235,7 +235,31 @@ app.get('/api/block/:hashOrHeight', async (req, res) => {
     const network = parseNetwork(req.query.network)
     const { hashOrHeight } = req.params
     const block = await blockCache.getBlock(hashOrHeight, network, true)
-    res.json({ block, network })
+
+    // Enrich with a parallel array of per-tx total output values (FAIR) so the
+    // block page can show an amount next to each txid. Bounded to reasonably
+    // sized blocks to keep RPC load in check; larger blocks omit txValues.
+    const MAX_TX_VALUE_ENRICH = 50
+    let txValues: Array<number | null> | undefined
+    const txids = Array.isArray((block as { tx?: unknown }).tx)
+      ? ((block as { tx: string[] }).tx)
+      : []
+    if (txids.length > 0 && txids.length <= MAX_TX_VALUE_ENRICH) {
+      txValues = await Promise.all(
+        txids.map(async (txid) => {
+          try {
+            const tx = await blockCache.getTransaction(txid, network, true)
+            const vout = (tx as { vout?: Array<{ value?: number }> }).vout
+            if (!Array.isArray(vout)) return null
+            return vout.reduce((sum, o) => sum + (Number(o.value) || 0), 0)
+          } catch {
+            return null
+          }
+        }),
+      )
+    }
+
+    res.json({ block, txValues, network })
   } catch (error) {
     handleRouteError(res, 'Error fetching block', error)
   }

src/components/block-content.tsx

@@ -216,6 +216,14 @@ export function BlockContent({ hashOrHeight }: { hashOrHeight: string }) {
                   #{index}
                 </span>
                 <HashCell value={txid} to="tx" lead={10} tail={8} className="min-w-0 flex-1" />
+                {typeof block.txValues?.[index] === 'number' ? (
+                  <span className="shrink-0 text-xs font-semibold tabular-nums text-foreground">
+                    {(block.txValues[index] as number).toLocaleString(undefined, {
+                      maximumFractionDigits: 8,
+                    })}{' '}
+                    FAIR
+                  </span>
+                ) : null}
               </li>
             ))}
           </ul>

src/components/home/latest-tx-list.tsx

@@ -1,22 +1,22 @@
 import { Link } from 'react-router-dom'
 import { Receipt } from 'lucide-react'
 import { useTranslations } from '@/lib/i18n'
-import { useLatestTransactions, type RecentBlock } from '@/hooks/use-recent-blocks'
+import { useRecentTransactions } from '@/hooks/use-recent-transactions'
 import { Skeleton } from '@/components/ui/skeleton'
 import { CopyButton } from '@/components/copy-button'
 import { RelativeTime } from '@/components/detail/relative-time'
 import { shortHash } from '@/lib/format'
 
 interface LatestTxListProps {
-  blocks: RecentBlock[] | undefined
-  isLoading: boolean
-  isError: boolean
   max?: number
 }
 
-export function LatestTxList({ blocks, isLoading, isError, max = 20 }: LatestTxListProps) {
+export function LatestTxList({ max = 20 }: LatestTxListProps) {
   const t = useTranslations('home')
-  const transactions = useLatestTransactions(blocks, max)
+  // Use the recent-transactions feed (includes the total output amount) rather
+  // than deriving bare txids from recent blocks, so each row can show a value.
+  const { data, isLoading, isError } = useRecentTransactions(max)
+  const transactions = data?.transactions ?? []
 
   return (
     <div className="flex h-full flex-col rounded-2xl border bg-muted/30">
@@ -43,7 +43,7 @@ export function LatestTxList({ blocks, isLoading, isError, max = 20 }: LatestTxL
           <ul className="divide-y">
             {transactions.map((tx) => (
               <li
-                key={tx.txid}
+                key={`${tx.txid}-${tx.blockHeight ?? 'mempool'}`}
                 className="group flex items-center gap-3 px-4 py-2.5 transition-colors hover:bg-muted/40"
               >
                 <div className="flex min-w-0 flex-1 items-center gap-2">
@@ -60,16 +60,24 @@ export function LatestTxList({ blocks, isLoading, isError, max = 20 }: LatestTxL
                 </div>
 
                 <div className="flex shrink-0 flex-col items-end gap-0.5 text-xs">
-                  <Link
-                    to={`/block/${tx.blockHeight}`}
-                    className="font-medium text-muted-foreground tabular-nums hover:text-foreground"
-                  >
-                    #{tx.blockHeight.toLocaleString()}
-                  </Link>
-                  <RelativeTime
-                    timestamp={tx.blockTime}
-                    className="text-muted-foreground"
-                  />
+                  {typeof tx.amount === 'number' ? (
+                    <span className="font-semibold tabular-nums text-foreground">
+                      {tx.amount.toLocaleString(undefined, { maximumFractionDigits: 8 })} FAIR
+                    </span>
+                  ) : null}
+                  {tx.blockHeight !== null ? (
+                    <Link
+                      to={`/block/${tx.blockHeight}`}
+                      className="font-medium text-muted-foreground tabular-nums hover:text-foreground"
+                    >
+                      #{tx.blockHeight.toLocaleString()}
+                    </Link>
+                  ) : (
+                    <span className="font-medium text-amber-700 dark:text-amber-300">
+                      {t('mempool')}
+                    </span>
+                  )}
+                  <RelativeTime timestamp={tx.time} className="text-muted-foreground" />
                 </div>
               </li>
             ))}

src/hooks/use-block.ts

@@ -17,13 +17,17 @@ export interface Block {
   size: number
   weight?: number
   tx: string[]
+  /** Per-tx total output value (FAIR), parallel to `tx`. From the API's
+   * `txValues`; undefined for oversized blocks that skip enrichment. */
+  txValues?: Array<number | null>
   previousblockhash?: string
   nextblockhash?: string
   confirmations: number
 }
 
 interface BlockResponse {
   block: Block
+  txValues?: Array<number | null>
   network: string
 }
 
@@ -41,7 +45,7 @@ export function useBlock(hashOrHeight: string): UseQueryResult<Block> {
         throw new Error(await readErrorMessage(response, 'block'))
       }
       const data = (await response.json()) as BlockResponse
-      return data.block
+      return { ...data.block, txValues: data.txValues }
     },
     refetchInterval,
     retry: 1,

src/pages/home.tsx

@@ -34,7 +34,7 @@ export default function HomePage() {
 
       <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
         <RecentBlocksList blocks={blocks} isLoading={isLoading} isError={isError} />
-        <LatestTxList blocks={blocks} isLoading={isLoading} isError={isError} max={TX_FEED_LIMIT} />
+        <LatestTxList max={TX_FEED_LIMIT} />
       </div>
     </div>
   )