Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 3x 13x 21x 21x 17x 13x 1x 13x | import { Input } from '@/components/input';
import { cn } from '@/lib/utils';
import { WALLET_DIALOG_LABELS, WALLET_BUTTON_LABELS } from '@/constants/wallet';
import type { ChangeEvent } from 'react';
/**
* AmountInput - Specialized input for withdrawal amounts
* Includes validation and max balance functionality
*/
interface AmountInputProps {
value: string;
onChange: (value: string) => void;
currency: string;
maxBalance: number;
disabled?: boolean;
}
export const AmountInput = ({
value,
onChange,
currency,
maxBalance,
disabled = false,
}: AmountInputProps) => {
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const inputValue = e.target.value;
// Allow only numbers and one decimal point
if (/^\d*\.?\d*$/.test(inputValue)) {
onChange(inputValue);
}
};
const handleMaxClick = () => {
onChange(maxBalance.toString());
};
return (
<div className="space-y-2">
<label htmlFor="amount" className="text-sm font-medium text-gray-700">
{WALLET_DIALOG_LABELS.AMOUNT_LABEL} ({currency})
</label>
<div className="relative">
<Input
id="amount"
type="text"
value={value}
onChange={handleChange}
placeholder="0.00"
disabled={disabled}
className="pr-16"
/>
<button
type="button"
onClick={handleMaxClick}
disabled={disabled}
className={cn(
'absolute right-2 top-1/2 -translate-y-1/2',
'text-xs px-2 py-1',
'transition-colors',
disabled && 'opacity-50 cursor-not-allowed'
)}
aria-label="Set maximum amount"
>
{WALLET_BUTTON_LABELS.MAX}
</button>
</div>
</div>
);
};
|