first commit of refactor

frontend/src/components/AddressForm.jsx

@@ -0,0 +1,45 @@
+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}>
+        Add Address
+      </Button>
+    </form>
+  );
+}

frontend/src/components/AlertForm.jsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+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" },
+];
+
+export default function AlertForm({ onSubmit }) {
+  const [type, setType] = useState("incoming_tx");
+  const [threshold, setThreshold] = useState("");
+
+  const needsThreshold =
+    type === "large_transfer" || type === "balance_below";
+
+  const canSubmit = needsThreshold
+    ? threshold.trim() !== "" && 
+      !isNaN(Number(threshold)) && 
+      Number(threshold) > 0
+    : true;
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!canSubmit) return;
+
+    onSubmit({
+      type,
+      threshold: needsThreshold ? threshold : undefined,
+    });
+
+    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>
+
+      {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>
+  );
+}

frontend/src/components/Button.jsx

@@ -0,0 +1,23 @@
+export default function Button({
+    children,
+    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>
+    );
+  }
+  

frontend/src/components/Input.jsx

@@ -0,0 +1,33 @@
+export default function Input({
+    label,
+    type = "text",
+    value,
+    onChange,
+    placeholder,
+    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>
+    );
+  }
+