46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
import { useState } from "react";
|
|
import Input from "./Input";
|
|
import Button from "./Button";
|
|
|
|
export default function AddressForm({ onSubmit }) {
|
|
const [address, setAddress] = useState("");
|
|
const [label, setLabel] = useState("");
|
|
|
|
const canSubmit = address.trim().length > 0;
|
|
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
if (!canSubmit) return;
|
|
|
|
onSubmit({
|
|
address: address.trim(),
|
|
label: label.trim(),
|
|
});
|
|
|
|
setAddress("");
|
|
setLabel("");
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<Input
|
|
label="Blockchain Address"
|
|
value={address}
|
|
onChange={setAddress}
|
|
placeholder="0x..."
|
|
/>
|
|
|
|
<Input
|
|
label="Label (optional)"
|
|
value={label}
|
|
onChange={setLabel}
|
|
placeholder="Treasury, Cold Wallet, etc."
|
|
/>
|
|
|
|
<Button type="submit" disabled={!canSubmit} className="mt-md">
|
|
Add Address
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|