112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { Box, Text } from 'ink';
|
|
import { colors, formatSatoshis, formatHex } from '../../../theme.js';
|
|
import { useSatoshisConversion } from '../../../hooks/useSatoshisConversion.js';
|
|
import type { SelectableUTXO, FocusArea } from '../types.js';
|
|
|
|
interface Props {
|
|
availableUtxos: SelectableUTXO[];
|
|
selectedUtxoIndex: number;
|
|
requiredAmount: bigint;
|
|
fee: bigint;
|
|
selectedAmount: bigint;
|
|
changeAmount: bigint;
|
|
focusArea: FocusArea;
|
|
}
|
|
|
|
export function InputsStep({
|
|
availableUtxos,
|
|
selectedUtxoIndex,
|
|
requiredAmount,
|
|
fee,
|
|
selectedAmount,
|
|
changeAmount,
|
|
focusArea,
|
|
}: Props): React.ReactElement {
|
|
const { formatSatoshisToFiat } = useSatoshisConversion();
|
|
|
|
const getFiatSuffix = (satoshis: bigint): string => {
|
|
const fiatValue = formatSatoshisToFiat(satoshis);
|
|
return fiatValue ? ` (~${fiatValue})` : '';
|
|
};
|
|
|
|
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
|
|
{getFiatSuffix(requiredAmount + fee)}
|
|
</Text>
|
|
<Text
|
|
color={
|
|
selectedAmount >= requiredAmount + fee
|
|
? colors.success
|
|
: colors.warning
|
|
}
|
|
>
|
|
Selected: {formatSatoshis(selectedAmount)}
|
|
{getFiatSuffix(selectedAmount)}
|
|
</Text>
|
|
{selectedAmount > requiredAmount + fee && (
|
|
<Text color={colors.info}>
|
|
Change: {formatSatoshis(changeAmount)}
|
|
{getFiatSuffix(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}`}
|
|
flexDirection='column'
|
|
>
|
|
<Text
|
|
color={isCursor ? colors.focus : colors.text}
|
|
bold={isCursor}
|
|
>
|
|
{isCursor ? '▸ ' : ' '}[{utxo.selected ? 'X' : ' '}]{' '}
|
|
{formatSatoshis(utxo.valueSatoshis)} -{' '}
|
|
{formatHex(utxo.outpointTransactionHash, 12)}:
|
|
{utxo.outpointIndex}
|
|
</Text>
|
|
{(() => {
|
|
const fiatValue = formatSatoshisToFiat(utxo.valueSatoshis);
|
|
if (!fiatValue) return null;
|
|
return (
|
|
<Text color={colors.textMuted}>
|
|
{' '}≈ {fiatValue}
|
|
</Text>
|
|
);
|
|
})()}
|
|
</Box>
|
|
);
|
|
})
|
|
)}
|
|
</Box>
|
|
|
|
<Box marginTop={1}>
|
|
<Text color={colors.textMuted} dimColor>
|
|
Space/Enter: Toggle • a: Select all • n: Deselect all
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
} |