Fix receive and send

src/tui/components/Dialog.tsx

@@ -4,7 +4,7 @@
 
 import React, { useRef, useState } from 'react';
 import { Box, Text, useInput, measureElement } from 'ink';
-import TextInput from 'ink-text-input';
+import TextInput from './TextInput.js';
 import { colors } from '../theme.js';
 
 /**
@@ -29,6 +29,7 @@ export function DialogWrapper({
   borderColor = colors.primary,
   children,
   width = 60,
+  backgroundColor = colors.bg,
 }: DialogWrapperProps): React.ReactElement {
   const ref = useRef<any>(null);
   const [height, setHeight] = useState<number | null>(null);
@@ -51,9 +52,12 @@ export function DialogWrapper({
           flexDirection="column"
           width={width}
           height={height}
+          backgroundColor={backgroundColor}
         >
           {Array.from({ length: height }).map((_, i) => (
-            <Text key={i}>{' '.repeat(width)}</Text>
+            <Text key={i} backgroundColor={backgroundColor}>
+              {' '.repeat(width)}
+            </Text>
           ))}
         </Box>
       )}
@@ -67,6 +71,7 @@ export function DialogWrapper({
         paddingX={2}
         paddingY={1}
         width={width}
+        backgroundColor={backgroundColor}
       >
         <Text color={borderColor} bold>
           {title}

src/tui/components/Input.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
+import TextInput from './TextInput.js';
 import { colors } from '../theme.js';
 
 /**

src/tui/components/List.tsx

@@ -9,7 +9,7 @@
 
 import React, { useState, useMemo, useCallback } from 'react';
 import { Box, Text, useInput } from 'ink';
-import TextInput from 'ink-text-input';
+import TextInput from './TextInput.js';
 import { colors } from '../theme.js';
 
 // =============================================================================

src/tui/components/ProgressBar.tsx

@@ -116,9 +116,15 @@ interface LoadingProps {
 }
 
 export function Loading({ message = 'Loading...' }: LoadingProps): React.ReactElement {
-  // Simple spinner using Ink's spinner component
-  const Spinner = require('ink-spinner').default;
-  
+
+  // Was using ink-spinner, but its not updated for react 19.
+  // Just putting nothing here for now
+  const Spinner = (props: any) => {
+    return (
+      <></>
+    );
+  };
+
   return (
     <Box>
       <Text color={colors.primary}>

src/tui/components/TextInput.tsx

@@ -0,0 +1,216 @@
+import React, {useState, useEffect} from 'react';
+import {Text, useInput} from 'ink';
+import chalk from 'chalk';
+import type {Except} from 'type-fest';
+
+export type Props = {
+	/**
+	 * Text to display when `value` is empty.
+	 */
+	readonly placeholder?: string;
+
+	/**
+	 * Listen to user's input. Useful in case there are multiple input components
+	 * at the same time and input must be "routed" to a specific component.
+	 */
+	readonly focus?: boolean; // eslint-disable-line react/boolean-prop-naming
+
+	/**
+	 * Replace all chars and mask the value. Useful for password inputs.
+	 */
+	readonly mask?: string;
+
+	/**
+	 * Whether to show cursor and allow navigation inside text input with arrow keys.
+	 */
+	readonly showCursor?: boolean; // eslint-disable-line react/boolean-prop-naming
+
+	/**
+	 * Highlight pasted text
+	 */
+	readonly highlightPastedText?: boolean; // eslint-disable-line react/boolean-prop-naming
+
+	/**
+	 * Value to display in a text input.
+	 */
+	readonly value: string;
+
+	/**
+	 * Function to call when value updates.
+	 */
+	readonly onChange: (value: string) => void;
+
+	/**
+	 * Function to call when `Enter` is pressed, where first argument is a value of the input.
+	 */
+	readonly onSubmit?: (value: string) => void;
+};
+
+function TextInput({
+	value: originalValue,
+	placeholder = '',
+	focus = true,
+	mask,
+	highlightPastedText = false,
+	showCursor = true,
+	onChange,
+	onSubmit,
+}: Props) {
+	const [state, setState] = useState({
+		cursorOffset: (originalValue || '').length,
+		cursorWidth: 0,
+	});
+
+	const {cursorOffset, cursorWidth} = state;
+
+	useEffect(() => {
+		setState(previousState => {
+			if (!focus || !showCursor) {
+				return previousState;
+			}
+
+			const newValue = originalValue || '';
+
+			if (previousState.cursorOffset > newValue.length - 1) {
+				return {
+					cursorOffset: newValue.length,
+					cursorWidth: 0,
+				};
+			}
+
+			return previousState;
+		});
+	}, [originalValue, focus, showCursor]);
+
+	const cursorActualWidth = highlightPastedText ? cursorWidth : 0;
+
+	const value = mask ? mask.repeat(originalValue.length) : originalValue;
+	let renderedValue = value;
+	let renderedPlaceholder = placeholder ? chalk.grey(placeholder) : undefined;
+
+	// Fake mouse cursor, because it's too inconvenient to deal with actual cursor and ansi escapes
+	if (showCursor && focus) {
+		renderedPlaceholder =
+			placeholder.length > 0
+				? chalk.inverse(placeholder[0]) + chalk.grey(placeholder.slice(1))
+				: chalk.inverse(' ');
+
+		renderedValue = value.length > 0 ? '' : chalk.inverse(' ');
+
+		let i = 0;
+
+		for (const char of value) {
+			renderedValue +=
+				i >= cursorOffset - cursorActualWidth && i <= cursorOffset
+					? chalk.inverse(char)
+					: char;
+
+			i++;
+		}
+
+		if (value.length > 0 && cursorOffset === value.length) {
+			renderedValue += chalk.inverse(' ');
+		}
+	}
+
+	useInput(
+		(input, key) => {
+			if (
+				key.upArrow ||
+				key.downArrow ||
+				(key.ctrl && input === 'c') ||
+				key.tab ||
+				(key.shift && key.tab)
+			) {
+				return;
+			}
+
+			if (key.return) {
+				if (onSubmit) {
+					onSubmit(originalValue);
+				}
+
+				return;
+			}
+
+			let nextCursorOffset = cursorOffset;
+			let nextValue = originalValue;
+			let nextCursorWidth = 0;
+
+			if (key.leftArrow) {
+				if (showCursor) {
+					nextCursorOffset--;
+				}
+			} else if (key.rightArrow) {
+				if (showCursor) {
+					nextCursorOffset++;
+				}
+			} else if (key.backspace || key.delete) {
+				if (cursorOffset > 0) {
+					nextValue =
+						originalValue.slice(0, cursorOffset - 1) +
+						originalValue.slice(cursorOffset, originalValue.length);
+
+					nextCursorOffset--;
+				}
+			} else {
+				nextValue =
+					originalValue.slice(0, cursorOffset) +
+					input +
+					originalValue.slice(cursorOffset, originalValue.length);
+
+				nextCursorOffset += input.length;
+
+				if (input.length > 1) {
+					nextCursorWidth = input.length;
+				}
+			}
+
+			if (cursorOffset < 0) {
+				nextCursorOffset = 0;
+			}
+
+			if (cursorOffset > originalValue.length) {
+				nextCursorOffset = originalValue.length;
+			}
+
+			setState({
+				cursorOffset: nextCursorOffset,
+				cursorWidth: nextCursorWidth,
+			});
+
+			if (nextValue !== originalValue) {
+				onChange(nextValue);
+			}
+		},
+		{isActive: focus},
+	);
+
+	return (
+		<Text>
+			{placeholder
+				? value.length > 0
+					? renderedValue
+					: renderedPlaceholder
+				: renderedValue}
+		</Text>
+	);
+}
+
+export default TextInput;
+
+type UncontrolledProps = {
+	/**
+	 * Initial value.
+	 */
+	readonly initialValue?: string;
+} & Except<Props, 'value' | 'onChange'>;
+
+export function UncontrolledTextInput({
+	initialValue = '',
+	...props
+}: UncontrolledProps) {
+	const [value, setValue] = useState(initialValue);
+
+	return <TextInput {...props} value={value} onChange={setValue} />;
+}

src/tui/components/VariableInputField.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Box, Text } from "ink";
-import TextInput from "ink-text-input";
-import { formatSatoshis } from "../theme.js";
+import TextInput from "./TextInput.js";
 
 interface VariableInputFieldProps {
   variable: {