set("alertOutgoingTx", v)}
- label="Outgoing transaction"
- />
- set("alertLargeTransfer", v)}
- label="Large transfer"
- >
- {data.alertLargeTransfer && (
-
- set("largeTransferThreshold", v)}
- placeholder="Threshold (ETH)"
- min="0"
- step="0.01"
- />
-
- )}
-
- set("alertBalanceBelow", v)}
- label="Balance below"
- >
- {data.alertBalanceBelow && (
-
- set("balanceBelowThreshold", v)}
- placeholder="Threshold (ETH)"
- min="0"
- step="0.01"
- />
-
- )}
-
-
- );
- }
-
- function Step4() {
- return (
- <>
- Set up notifications
-
- Add at least one channel so you receive alerts. All fields are optional.
-
-
-
-
-
set("discordWebhookUrl", v)}
- disabled={loading}
- placeholder="https://discord.com/api/webhooks/..."
- />
-
-
-
set("slackWebhookUrl", v)}
- disabled={loading}
- placeholder="https://hooks.slack.com/services/..."
- />
-
You're all set!
-
-
-
Summary
-
- -
- Wallet address added:{" "}
-
- {data.walletAddress}
-
- {data.walletLabel && ` (${data.walletLabel})`}
-
- -
- Alert rules configured:{" "}
-
- {alertCount > 0 ? `${alertCount} rule${alertCount !== 1 ? "s" : ""}` : "None (skipped)"}
-
-
- -
- Notification channels:{" "}
-
- {hasNotif ? "Configured" : "Not set up (skipped)"}
-
-
-
-
-
-
- {testResults && (
-
- {testResults.error ? (
-
{testResults.error}
- ) : (
-
- {Object.entries(testResults).map(([channel, result]) => (
- -
- {result.success ? "\u2713" : "\u2717"} {channel}:{" "}
- {result.message || (result.success ? "OK" : "Failed")}
-
- ))}
-
- )}
-
- )}
-
-
- {children}
-
- );
- }
-
- // ── Footer navigation ─────────────────────────────────────────────────────
-
- function Footer() {
- if (step === 5) return null;
-
- const canSkip = step === 3 || step === 4;
- const canBack = step > 2;
-
- async function handleNext() {
- setSkipWarning("");
- if (step === 1) await handleStep1();
- else if (step === 2) await handleStep2();
- else if (step === 3) await handleStep3();
- else if (step === 4) await handleStep4();
- }
-
- function handleSkip() {
- setError("");
- setSkipWarning("");
- setStep((s) => s + 1);
- }
-
- function handleBack() {
- setError("");
- setSkipWarning("");
- setStep((s) => s - 1);
- }
-
- const nextLabel = step === 1
- ? "Create Account & Subscribe"
- : step === 4
- ? "Finish"
- : "Next →";
-
- return (
-
-
- {canBack && (
-
- )}
-
-
-
- {canSkip && (
-
- )}
-
-
-
-
-
Koin Ping
-
- {ProgressBar()}
-
- {error && (
-
{error}
- )}
-
- {skipWarning && (
-
{skipWarning}
- )}
-
-
- {stepContent[step]}
- {Footer()}
-
-
- {step === 1 && (
-
- Already have an account?{" "}
- Log in here
-
- )}
-
-
+
Add Addresses to Track
+
+
+
+
+
Existing Tracked Addresses
+ {loading &&
Loading addresses...
}
+ {error &&
Error: {error}
}
+ {!loading && !error && addresses.length === 0 && (
+
+ No addresses tracked yet. Add one above to get started.
+
+ )}
+ {addresses.length > 0 && (
+
+ {addresses.map((addr, index) => (
+ -
+
+
+ {editingId === addr.id ? (
+
+ setEditLabel(e.target.value)}
+ placeholder="Label (optional)"
+ className="address__edit-input"
+ onKeyDown={(e) => {
+ if (e.key === "Enter") handleEditSave(addr.id);
+ if (e.key === "Escape") handleEditCancel();
+ }}
+ autoFocus
+ />
+
+
+
+ ) : (
+
+
+ {addr.label || "Unlabeled"}
+
+
+
+ )}
+
+ {addr.address}
+
+
+
+
+ ))}
+
+ )}
+
+
Loading...
;
+ }
+
+ if (error) {
+ return (
+ Error: {error}
+ );
+ }
+
+ return (
+
+
Recent Alert Events
+
+ {alertEvents.length === 0 ? (
+
No alerts yet
+ ) : (
+
+ )}
+
Loading addresses...
;
+ }
+
+ if (addresses.length === 0) {
+ return (
+
+
No addresses tracked yet. Add an address first to create alerts.
+
+
Alert Rules & Notifications
+
+
+ {/* LEFT COLUMN: Alert Rules */}
+
+
Alert Rules
+
+
+
+
+
+
+ {selectedAddress && (
+ <>
+
+
+ Managing alerts for:
+
+
+ {selectedAddress.label || "Unlabeled"}
+
+
+ {selectedAddress.address}
+
+
+
+
+
+
+
Active Alert Rules
+ {error && (
+
Error: {error}
+ )}
+ {alerts.length === 0 ? (
+
+ No alert rules defined yet. Create one above.
+
+ ) : (
+
+ {alerts.map((alert) => (
+ -
+
+
+
+ {formatAlertType(alert.type)}
+
+ {alert.threshold && (
+
+ Threshold: {alert.threshold} ETH
+
+ )}
+
+ Status: {alert.enabled ? "Enabled" : "Disabled"}
+
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+ )}
+
+
+ {/* RIGHT COLUMN: Notification Settings */}
+
+
Notification Settings
+
+ {notificationSuccess && (
+
{notificationSuccess}
+ )}
+
+ {notificationError && (
+
{notificationError}
+ )}
+
+ {/* Master toggle */}
+
+
+
+ Master switch for all notification channels
+
+
+
+ {/* All channel settings -- hidden when master toggle is off */}
+ {notificationEnabled && (
+ <>
+ {/* Telegram */}
+
+
+ {/* Email */}
+
+
Email
+
+
+ Alert notifications and digests will be sent to this address
+
+
+
+
+
+
+
+ {/* Discord */}
+
+
+ {/* Slack */}
+
+
+ {/* Save & Test buttons */}
+
+
+
+
+
+ )}
+
+
+
+ {STEPS.map((label, i) => {
+ const stepNum = i + 1;
+ const done = step > stepNum;
+ const active = step === stepNum;
+ const dotClass = done
+ ? "progress-bar__dot--done"
+ : active
+ ? "progress-bar__dot--active"
+ : "progress-bar__dot--pending";
+
+ return (
+
+ {i > 0 && (
+
+ )}
+
+
+ {done ? "\u2713" : stepNum}
+
+
+ {label}
+
+
+
+ );
+ })}
+
Create your account
+ set("email", v)}
+ disabled={loading}
+ placeholder="you@example.com"
+ />
+ set("password", v)}
+ disabled={loading}
+ placeholder="At least 6 characters"
+ />
+ set("confirmPassword", v)}
+ disabled={loading}
+ placeholder="Repeat your password"
+ className="form-field--last"
+ />
+
+ );
+ }
+
+ function Step2() {
+ return (
+ <>
+ Add a wallet address
+
+ Enter the Ethereum address you want to monitor.
+
+ set("walletAddress", v)}
+ disabled={loading}
+ placeholder="0x..."
+ />
+ set("walletLabel", v)}
+ disabled={loading}
+ placeholder="e.g. My main wallet"
+ className="form-field--last"
+ />
+
+ );
+ }
+
+ function Step3() {
+ return (
+ <>
+ Configure alert rules
+
+ Choose which events trigger notifications. You can change these later.
+
+
+ set("alertIncomingTx", v)}
+ label="Incoming transaction"
+ />
+ set("alertOutgoingTx", v)}
+ label="Outgoing transaction"
+ />
+ set("alertLargeTransfer", v)}
+ label="Large transfer"
+ >
+ {data.alertLargeTransfer && (
+
+ set("largeTransferThreshold", v)}
+ placeholder="Threshold (ETH)"
+ min="0"
+ step="0.01"
+ />
+
+ )}
+
+ set("alertBalanceBelow", v)}
+ label="Balance below"
+ >
+ {data.alertBalanceBelow && (
+
+ set("balanceBelowThreshold", v)}
+ placeholder="Threshold (ETH)"
+ min="0"
+ step="0.01"
+ />
+
+ )}
+
+
+ );
+ }
+
+ function Step4() {
+ return (
+ <>
+ Set up notifications
+
+ Add at least one channel so you receive alerts. All fields are optional.
+
+
+
+
+
set("discordWebhookUrl", v)}
+ disabled={loading}
+ placeholder="https://discord.com/api/webhooks/..."
+ />
+
+
+
set("slackWebhookUrl", v)}
+ disabled={loading}
+ placeholder="https://hooks.slack.com/services/..."
+ />
+
You're all set!
+
+
+
Summary
+
+ -
+ Wallet address added:{" "}
+
+ {data.walletAddress}
+
+ {data.walletLabel && ` (${data.walletLabel})`}
+
+ -
+ Alert rules configured:{" "}
+
+ {alertCount > 0 ? `${alertCount} rule${alertCount !== 1 ? "s" : ""}` : "None (skipped)"}
+
+
+ -
+ Notification channels:{" "}
+
+ {hasNotif ? "Configured" : "Not set up (skipped)"}
+
+
+
+
+
+
+ {testResults && (
+
+ {testResults.error ? (
+
{testResults.error}
+ ) : (
+
+ {Object.entries(testResults).map(([channel, result]) => (
+ -
+ {result.success ? "\u2713" : "\u2717"} {channel}:{" "}
+ {result.message || (result.success ? "OK" : "Failed")}
+
+ ))}
+
+ )}
+
+ )}
+
+
+ {children}
+
+ );
+ }
+
+ // ── Footer navigation ─────────────────────────────────────────────────────
+
+ function Footer() {
+ if (step === 5) return null;
+
+ const canSkip = step === 3 || step === 4;
+ const canBack = step > 2;
+
+ async function handleNext() {
+ setSkipWarning("");
+ if (step === 1) await handleStep1();
+ else if (step === 2) await handleStep2();
+ else if (step === 3) await handleStep3();
+ else if (step === 4) await handleStep4();
+ }
+
+ function handleSkip() {
+ setError("");
+ setSkipWarning("");
+ setStep((s) => s + 1);
+ }
+
+ function handleBack() {
+ setError("");
+ setSkipWarning("");
+ setStep((s) => s - 1);
+ }
+
+ const nextLabel = step === 1
+ ? "Create Account & Subscribe"
+ : step === 4
+ ? "Finish"
+ : "Next →";
+
+ return (
+
+
+ {canBack && (
+
+ )}
+
+
+
+ {canSkip && (
+
+ )}
+
+
+
+
+
Koin Ping
+
+ {ProgressBar()}
+
+ {error && (
+
{error}
+ )}
+
+ {skipWarning && (
+
{skipWarning}
+ )}
+
+
+ {stepContent[step]}
+ {Footer()}
+
+
+ {step === 1 && (
+
+ Already have an account?{" "}
+ Log in here
+
+ )}
+
+