refactor: replace obsolete array of values in InputRange with single input value

src/app/components/Input/InputRange.tsx

@@ -25,23 +25,22 @@ type Props = {
 	onChange?: any;
 };
 
-// TODO: tidy up storage of amount (why array of values?)
 export const InputRange = React.forwardRef<HTMLInputElement, Props>(
 	({ min, max, step, avg, magnitude, onChange, value, disabled }: Props, ref) => {
 		const { formatRange, convertToCurrency } = useCurrencyDisplay();
 		const fieldContext = useFormField();
-		const [values, setValues] = React.useState<CurrencyInput[]>([convertToCurrency(avg)]);
+		const [inputValue, setInputValue] = React.useState<CurrencyInput>(convertToCurrency(avg));
 
-		const rangeValues = useMemo(() => formatRange(values, max), [formatRange, max, values]);
-		const trackBackgroundMinValue = Number(values[0].display);
+		const rangeValues = useMemo(() => formatRange(inputValue, max), [formatRange, max, inputValue]);
+		const trackBackgroundMinValue = Number(inputValue.display);
 		const minValue = Math.min(Number(min), trackBackgroundMinValue);
 
 		useEffect(() => {
-			setValues([convertToCurrency(value)]);
+			setInputValue(convertToCurrency(value));
 		}, [value, convertToCurrency]);
 
 		const handleInput = (currency: CurrencyInput) => {
-			setValues([currency]);
+			setInputValue(currency);
 			onChange?.(currency);
 		};
 
@@ -67,7 +66,7 @@ export const InputRange = React.forwardRef<HTMLInputElement, Props>(
 				}
 				className={cn({ "pr-12": fieldContext?.isInvalid })}
 				magnitude={magnitude}
-				value={values[0].display}
+				value={inputValue.display}
 				ref={ref}
 				onChange={handleInput}
 			>

src/app/hooks/use-currency-display.test.tsx

@@ -9,16 +9,16 @@ describe("useCurrencyDisplay hook", () => {
 		} = renderHook(() => useCurrencyDisplay());
 
 		const max = "30000";
-		const fromCurrency = current.formatRange([{ display: "25", value: "2500000000" }], max);
+		const fromCurrency = current.formatRange({ display: "25", value: "2500000000" }, max);
 		expect(fromCurrency).toEqual([25]);
 
-		const fromNumber = current.formatRange([10], max);
+		const fromNumber = current.formatRange(10, max);
 		expect(fromNumber).toEqual([10]);
 
-		const fromString = current.formatRange(["10"], max);
+		const fromString = current.formatRange("10", max);
 		expect(fromString).toEqual([10]);
 
-		const limitToMax = current.formatRange(["10"], "1");
+		const limitToMax = current.formatRange("10", "1");
 		expect(limitToMax).toEqual([1]);
 	});
 

src/app/hooks/use-currency-display.ts

@@ -9,10 +9,10 @@ type CurrencyInput = {
 };
 
 export const useCurrencyDisplay = () => {
-	const formatRange = useCallback((inputValues: any, maxNumber: string | number): number[] => {
-		const sanitized = !isNil(inputValues[0]?.display)
-			? BigNumber.make(inputValues[0]?.display)
-			: BigNumber.make(inputValues[0]);
+	const formatRange = useCallback((inputValue: any, maxNumber: string | number): number[] => {
+		const sanitized = !isNil(inputValue?.display)
+			? BigNumber.make(inputValue?.display)
+			: BigNumber.make(inputValue);
 		return [Math.min(sanitized.toNumber(), Number(maxNumber))];
 	}, []);