Clean up and fixes

src/tui/screens/action-wizard/steps/InputsStep.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors, formatSatoshis, formatHex } from '../../../theme.js';
+import type { WizardStepProps } from '../types.js';
+
+type Props = Pick<
+  WizardStepProps,
+  | 'availableUtxos'
+  | 'selectedUtxoIndex'
+  | 'requiredAmount'
+  | 'fee'
+  | 'selectedAmount'
+  | 'changeAmount'
+  | 'focusArea'
+>;
+
+export function InputsStep({
+  availableUtxos,
+  selectedUtxoIndex,
+  requiredAmount,
+  fee,
+  selectedAmount,
+  changeAmount,
+  focusArea,
+}: Props): React.ReactElement {
+  return (
+    <Box flexDirection='column'>
+      <Text color={colors.text} bold>
+        Select UTXOs to fund the transaction:
+      </Text>
+
+      <Box marginTop={1} flexDirection='column'>
+        <Text color={colors.textMuted}>
+          Required: {formatSatoshis(requiredAmount)} +{' '}
+          {formatSatoshis(fee)} fee
+        </Text>
+        <Text
+          color={
+            selectedAmount >= requiredAmount + fee
+              ? colors.success
+              : colors.warning
+          }
+        >
+          Selected: {formatSatoshis(selectedAmount)}
+        </Text>
+        {selectedAmount > requiredAmount + fee && (
+          <Text color={colors.info}>
+            Change: {formatSatoshis(changeAmount)}
+          </Text>
+        )}
+      </Box>
+
+      <Box
+        marginTop={1}
+        flexDirection='column'
+        borderStyle='single'
+        borderColor={colors.border}
+        paddingX={1}
+      >
+        {availableUtxos.length === 0 ? (
+          <Text color={colors.textMuted}>No UTXOs available</Text>
+        ) : (
+          availableUtxos.map((utxo, index) => {
+            const isCursor =
+              selectedUtxoIndex === index && focusArea === 'content';
+            return (
+              <Box
+                key={`${utxo.outpointTransactionHash}:${utxo.outpointIndex}`}
+              >
+                <Text
+                  color={isCursor ? colors.focus : colors.text}
+                  bold={isCursor}
+                >
+                  {isCursor ? '▸ ' : '  '}[{utxo.selected ? 'X' : ' '}]{' '}
+                  {formatSatoshis(utxo.valueSatoshis)} -{' '}
+                  {formatHex(utxo.outpointTransactionHash, 12)}:
+                  {utxo.outpointIndex}
+                </Text>
+              </Box>
+            );
+          })
+        )}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textMuted} dimColor>
+          Space/Enter: Toggle • a: Select all • n: Deselect all
+        </Text>
+      </Box>
+    </Box>
+  );
+}