Clean up and fixes

src/tui/components/VariableInputField.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Box, Text } from "ink";
+import TextInput from "ink-text-input";
+import { formatSatoshis } from "../theme.js";
+
+interface VariableInputFieldProps {
+  variable: {
+    id: string;
+    name: string;
+    type: string;
+    hint?: string;
+    value: string;
+  };
+  index: number;
+  isFocused: boolean;
+  onChange: (index: number, value: string) => void;
+  onSubmit: () => void;
+  borderColor: string;
+  focusColor: string;
+}
+
+export function VariableInputField({
+  variable,
+  index,
+  isFocused,
+  onChange,
+  onSubmit,
+  borderColor,
+  focusColor,
+}: VariableInputFieldProps): React.ReactElement {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text color={focusColor}>{variable.name}</Text>
+      {variable.hint && (
+        <Text color={borderColor} dimColor>
+          ({variable.hint})
+        </Text>
+      )}
+      <Box
+        borderStyle="single"
+        borderColor={isFocused ? focusColor : borderColor}
+        paddingX={1}
+        marginTop={1}
+      >
+        <TextInput
+          value={variable.value}
+          onChange={(value) => onChange(index, value)}
+          onSubmit={onSubmit}
+          focus={isFocused}
+          placeholder={`Enter ${variable.name}...`}
+        />
+        
+      </Box>
+      {variable.type === 'integer' && variable.hint === 'satoshis' && (
+        <Box>
+          <Text color={borderColor} dimColor>
+            {/* Convert from sats to bch. NOTE: we can't use the formatSatoshis function because it is too verbose and returns too many values in the string*/}
+            {(Number(variable.value) / 100_000_000).toFixed(8)} BCH
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}