Fix receive and send

src/tui/screens/WalletState.tsx

@@ -19,9 +19,10 @@ import { generateTemplateIdentifier } from '@xo-cash/engine';
 
 // Import utility functions
 import {
-  formatHistoryListItem,
+  buildHistoryDisplayRows,
   getHistoryItemColorName,
   formatHistoryDate,
+  type HistoryDisplayRow,
   type HistoryColorName,
 } from '../../utils/history-utils.js';
 
@@ -58,9 +59,9 @@ const menuItems: ListItemData<string>[] = [
 ];
 
 /**
- * History list item with HistoryItem value.
+ * History list item with display row value.
  */
-type HistoryListItem = ListItemData<HistoryItem>;
+type HistoryListItem = ListItemData<HistoryDisplayRow>;
 
 /**
  * Wallet State Screen Component.
@@ -196,15 +197,14 @@ export function WalletStateScreen(): React.ReactElement {
    * Build history list items for ScrollableList.
    */
   const historyListItems = useMemo((): HistoryListItem[] => {
-    return history.map(item => {
-      const formatted = formatHistoryListItem(item, false);
+    return buildHistoryDisplayRows(history).map(row => {
       return {
-        key: item.id,
-        label: formatted.label,
-        description: formatted.description,
-        value: item,
-        color: formatted.color,
-        hidden: !formatted.isValid,
+        key: row.id,
+        label: row.label,
+        description: row.description,
+        value: row,
+        color: getHistoryItemColorName(row, false),
+        hidden: false,
       };
     });
   }, [history]);
@@ -224,49 +224,63 @@ export function WalletStateScreen(): React.ReactElement {
     isSelected: boolean,
     isFocused: boolean
   ): React.ReactNode => {
-    const historyItem = item.value;
-    if (!historyItem) return null;
+    const row = item.value;
+    if (!row) return null;
 
-    const colorName = getHistoryItemColorName(historyItem.type, isFocused);
+    const colorName = getHistoryItemColorName(row, isFocused);
     const itemColor = isFocused ? colors.focus : getHistoryColor(colorName);
-    const dateStr = formatHistoryDate(historyItem.timestamp);
+    const dateStr = formatHistoryDate(row.timestamp);
     const indicator = isFocused ? '▸ ' : '  ';
+    const groupingPrefix = row.isNested ? '  -> ' : '';
 
-    // Format based on type
-    if (historyItem.type === 'invitation_created') {
+    if (row.type === 'invitation') {
       return (
         <Box flexDirection="row" justifyContent="space-between">
           <Text color={itemColor}>
-            {indicator}[Invitation] {historyItem.description}
+            {indicator}[Invitation] {row.label}
           </Text>
           {dateStr && <Text color={colors.textMuted}>{dateStr}</Text>}
         </Box>
       );
-    } else if (historyItem.type === 'utxo_reserved') {
-      const sats = historyItem.valueSatoshis ?? 0n;
+    }
+
+    if (row.type === 'invitation_input') {
       return (
         <Box flexDirection="row" justifyContent="space-between">
           <Box>
             <Text color={itemColor}>
-              {indicator}[Reserved] {formatSatoshis(sats)}
+              {indicator}{groupingPrefix}[Input] {row.label}
             </Text>
-            <Text color={colors.textMuted}> {historyItem.description}</Text>
+            {row.description && <Text color={colors.textMuted}> {row.description}</Text>}
           </Box>
           {dateStr && <Text color={colors.textMuted}>{dateStr}</Text>}
         </Box>
       );
-    } else if (historyItem.type === 'utxo_received') {
-      const sats = historyItem.valueSatoshis ?? 0n;
-      const reservedTag = historyItem.reserved ? ' [Reserved]' : '';
+    }
+
+    if (row.type === 'invitation_output') {
+      const sats = row.utxo?.valueSatoshis ?? 0n;
       return (
         <Box flexDirection="row" justifyContent="space-between">
           <Box flexDirection="row">
             <Text color={itemColor}>
-              {indicator}{formatSatoshis(sats)}
-            </Text>
-            <Text color={colors.textMuted}>
-              {' '}{historyItem.description}{reservedTag}
+              {indicator}{groupingPrefix}[Output] {formatSatoshis(sats)}
             </Text>
+            {row.description && <Text color={colors.textMuted}> {row.description}</Text>}
+          </Box>
+          {dateStr && <Text color={colors.textMuted}>{dateStr}</Text>}
+        </Box>
+      );
+    }
+
+    if (row.type === 'utxo') {
+      const sats = row.utxo?.valueSatoshis ?? 0n;
+      const reservedTag = row.utxo?.reserved ? ' [Reserved]' : '';
+      return (
+        <Box flexDirection="row" justifyContent="space-between">
+          <Box flexDirection="row">
+            <Text color={itemColor}>{indicator}{formatSatoshis(sats)}</Text>
+            {row.description && <Text color={colors.textMuted}> {row.description}{reservedTag}</Text>}
           </Box>
           {dateStr && <Text color={colors.textMuted}>{dateStr}</Text>}
         </Box>
@@ -277,7 +291,7 @@ export function WalletStateScreen(): React.ReactElement {
     return (
       <Box flexDirection="row" justifyContent="space-between">
         <Text color={itemColor}>
-          {indicator}{historyItem.type}: {historyItem.description}
+          {indicator}{row.label}
         </Text>
         {dateStr && <Text color={colors.textMuted}>{dateStr}</Text>}
       </Box>