fmt: apply prettier to frontend JS/TS/CSS/JSON files
Initial prettier pass with tabWidth=4.
This commit is contained in:
KS Jannette
@@ -3,43 +3,43 @@ import Input from "./Input";
|
||||
import Button from "./Button";
|
||||
|
||||
export default function AddressForm({ onSubmit }) {
|
||||
const [address, setAddress] = useState("");
|
||||
const [label, setLabel] = useState("");
|
||||
const [address, setAddress] = useState("");
|
||||
const [label, setLabel] = useState("");
|
||||
|
||||
const canSubmit = address.trim().length > 0;
|
||||
const canSubmit = address.trim().length > 0;
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
|
||||
onSubmit({
|
||||
address: address.trim(),
|
||||
label: label.trim(),
|
||||
});
|
||||
onSubmit({
|
||||
address: address.trim(),
|
||||
label: label.trim(),
|
||||
});
|
||||
|
||||
setAddress("");
|
||||
setLabel("");
|
||||
}
|
||||
setAddress("");
|
||||
setLabel("");
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Input
|
||||
label="Blockchain Address"
|
||||
value={address}
|
||||
onChange={setAddress}
|
||||
placeholder="0x..."
|
||||
/>
|
||||
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."
|
||||
/>
|
||||
<Input
|
||||
label="Label (optional)"
|
||||
value={label}
|
||||
onChange={setLabel}
|
||||
placeholder="Treasury, Cold Wallet, etc."
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={!canSubmit}>
|
||||
Add Address
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
<Button type="submit" disabled={!canSubmit}>
|
||||
Add Address
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,69 +3,69 @@ import Input from "./Input";
|
||||
import Button from "./Button";
|
||||
|
||||
const ALERT_TYPES = [
|
||||
{ value: "incoming_tx", label: "Incoming transaction" },
|
||||
{ value: "outgoing_tx", label: "Outgoing transaction" },
|
||||
{ value: "large_transfer", label: "Large transfer" },
|
||||
{ value: "balance_below", label: "Balance below threshold" },
|
||||
{ value: "incoming_tx", label: "Incoming transaction" },
|
||||
{ value: "outgoing_tx", label: "Outgoing transaction" },
|
||||
{ value: "large_transfer", label: "Large transfer" },
|
||||
{ value: "balance_below", label: "Balance below threshold" },
|
||||
];
|
||||
|
||||
export default function AlertForm({ onSubmit }) {
|
||||
const [type, setType] = useState("incoming_tx");
|
||||
const [threshold, setThreshold] = useState("");
|
||||
const [type, setType] = useState("incoming_tx");
|
||||
const [threshold, setThreshold] = useState("");
|
||||
|
||||
const needsThreshold =
|
||||
type === "large_transfer" || type === "balance_below";
|
||||
const needsThreshold =
|
||||
type === "large_transfer" || type === "balance_below";
|
||||
|
||||
const canSubmit = needsThreshold
|
||||
? threshold.trim() !== "" &&
|
||||
!isNaN(Number(threshold)) &&
|
||||
Number(threshold) > 0
|
||||
: true;
|
||||
const canSubmit = needsThreshold
|
||||
? threshold.trim() !== "" &&
|
||||
!isNaN(Number(threshold)) &&
|
||||
Number(threshold) > 0
|
||||
: true;
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
|
||||
onSubmit({
|
||||
type,
|
||||
threshold: needsThreshold ? Number(threshold) : undefined,
|
||||
});
|
||||
onSubmit({
|
||||
type,
|
||||
threshold: needsThreshold ? Number(threshold) : undefined,
|
||||
});
|
||||
|
||||
setThreshold("");
|
||||
}
|
||||
setThreshold("");
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ marginBottom: "1rem" }}>
|
||||
{ALERT_TYPES.map((opt) => (
|
||||
<label key={opt.value} style={{ display: "block" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="alertType"
|
||||
value={opt.value}
|
||||
checked={type === opt.value}
|
||||
onChange={() => setType(opt.value)}
|
||||
/>
|
||||
{" "}{opt.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ marginBottom: "1rem" }}>
|
||||
{ALERT_TYPES.map((opt) => (
|
||||
<label key={opt.value} style={{ display: "block" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="alertType"
|
||||
value={opt.value}
|
||||
checked={type === opt.value}
|
||||
onChange={() => setType(opt.value)}
|
||||
/>{" "}
|
||||
{opt.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{needsThreshold && (
|
||||
<Input
|
||||
label="Amount (ETH)"
|
||||
type="number"
|
||||
step="0.000001"
|
||||
min="0"
|
||||
value={threshold}
|
||||
onChange={setThreshold}
|
||||
placeholder="e.g. 10"
|
||||
/>
|
||||
)}
|
||||
{needsThreshold && (
|
||||
<Input
|
||||
label="Amount (ETH)"
|
||||
type="number"
|
||||
step="0.000001"
|
||||
min="0"
|
||||
value={threshold}
|
||||
onChange={setThreshold}
|
||||
placeholder="e.g. 10"
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={!canSubmit}>
|
||||
Create Alert
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
<Button type="submit" disabled={!canSubmit}>
|
||||
Create Alert
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,21 +3,20 @@ export default function Button({
|
||||
onClick,
|
||||
disabled = false,
|
||||
type = "button",
|
||||
}) {
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "1rem",
|
||||
cursor: disabled ? "not-allowed" : "pointer",
|
||||
opacity: disabled ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
<button
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "1rem",
|
||||
cursor: disabled ? "not-allowed" : "pointer",
|
||||
opacity: disabled ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -7,27 +7,26 @@ export default function Input({
|
||||
step,
|
||||
min,
|
||||
disabled = false,
|
||||
}) {
|
||||
}) {
|
||||
return (
|
||||
<label style={{ display: "block", marginBottom: "1rem" }}>
|
||||
<div style={{ marginBottom: "0.25rem", fontSize: "0.9rem" }}>
|
||||
{label}
|
||||
</div>
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
step={step}
|
||||
min={min}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "0.5rem",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label style={{ display: "block", marginBottom: "1rem" }}>
|
||||
<div style={{ marginBottom: "0.25rem", fontSize: "0.9rem" }}>
|
||||
{label}
|
||||
</div>
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
step={step}
|
||||
min={min}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "0.5rem",
|
||||
fontSize: "1rem",
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user