enhanced alert granularity with min/max thresholds

mobile navigation

.gitea/workflows/check.yml

@@ -1,9 +0,0 @@
-name: check
-on: [push]
-jobs:
-    check:
-        runs-on: ubuntu-latest
-        steps:
-            # actions/checkout v4.2.2, 2026-02-22
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-            - run: docker build .

.gitignore

@@ -21,7 +21,7 @@ node_modules/
 *.key
 
 # Go build artifacts
-backend-go/bin/
+backend/bin/
 *.exe
 *.exe~
 *.dll

.prettierignore

@@ -1,7 +1,7 @@
 node_modules/
 frontend/dist/
 frontend/build/
-backend-go/bin/
+backend/bin/
 *.lock
 Prompts/
 .claude/

LICENSE

@@ -2,8 +2,7 @@ MIT License
 
 Copyright (c) 2026 Steven Jannette
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is

Makefile

@@ -2,7 +2,7 @@
         test-go test-js lint-go lint-js fmt-go fmt-js fmt-check-go fmt-check-js \
         build-go build-js
 
-GODIR    := backend-go
+GODIR    := backend
 JSDIR    := frontend
 PRETTIER := $(JSDIR)/node_modules/.bin/prettier
 

README.md

@@ -5,7 +5,6 @@ A lightweight on-chain monitoring and alerting system designed to give users sit
 
 Koin Ping observes on-chain activity and notifies users when predefined conditions are met. It does not execute transactions, manage wallets, or speculate on prices.
 
-
 ## Getting Started
 
 ### Prerequisites
@@ -29,8 +28,8 @@ make hooks
 cd frontend && npm install && cd ..
 
 # Copy and fill in environment variables
-cp backend-go/.env.example backend-go/.env
-# edit backend-go/.env with your DATABASE_URL, FIREBASE_PROJECT_ID, ETH_RPC_URL
+cp backend/.env.example backend/.env
+# edit backend/.env with your DATABASE_URL, FIREBASE_PROJECT_ID, ETH_RPC_URL
 
 # Run checks (requires golangci-lint)
 make check
@@ -39,23 +38,23 @@ make check
 make run
 
 # Start the poller (separate terminal)
-cd backend-go && go run ./cmd/poller
+cd backend && go run ./cmd/poller
 
 # Start the frontend dev server (separate terminal)
 cd frontend && npm run dev
 ```
 
 The API listens on `http://localhost:3001` and the frontend on
-`http://localhost:3000` by default.
+`http://localhost:3000` by default for development.
 
 ## Rationale
 
-Crypto users who hold or actively monitor addresses need a lightweight, reliable
-way to know when on-chain activity occurs without polling block explorers
-manually. Koin Ping fills that gap: it watches a set of Ethereum addresses,
-evaluates configurable alert rules (incoming transactions, outgoing
-transactions, large transfers, balance thresholds), and notifies the user
-through Discord webhooks.
+Crypto users may actively monitor addresses with webhooks integrating popular 
+messaging platforms: Discord, Slack, Telegram.
+This lightweight, reliable framework makes instant awareness of on-chain 
+activity trivial, without polling block explorers manually. Koin Ping watches 
+addresses, evaluates configurable alert rules (incoming transactions, outgoing 
+transactions, "large" transfers, balance thresholds), and sends notifications.
 
 ## Design
 
@@ -64,7 +63,7 @@ frontend:
 
 ```
 koin_ping_0.2.0/
-├── backend-go/                # Go monorepo root
+├── backend/                # Go monorepo root
 │   ├── cmd/api/               # HTTP REST API server
 │   ├── cmd/poller/            # Blockchain polling daemon
 │   └── internal/
@@ -132,7 +131,7 @@ To receive alerts via Telegram, you need to create a bot and get your chat ID.
 
 4. In the JSON response, find the `"chat"` object — the `"id"` field is your **Chat ID** (a numeric value).
 
-   > **Tip:** If the `"result"` array is empty, make sure you sent a message to your bot first, then refresh the page.
+   > **Tip:** If the `'result"` array is empty, make sure you sent a message to your bot first, then refresh the page.
 
 #### 3. Save in Koin Ping
 
@@ -153,3 +152,5 @@ MIT. See [LICENSE](LICENSE).
 ## Author
 
 Steven Jannette
+
+

REPO_POLICIES.md

@@ -1,188 +0,0 @@
----
-title: Repository Policies
-last_modified: 2026-02-22
----
-
-This document covers repository structure, tooling, and workflow standards. Code
-style conventions are in separate documents:
-
-- [Code Styleguide](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE.md)
-  (general, bash, Docker)
-- [Go](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_GO.md)
-- [JavaScript](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_JS.md)
-- [Python](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_PYTHON.md)
-- [Go HTTP Server Conventions](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/GO_HTTP_SERVER_CONVENTIONS.md)
-
----
-
-- Cross-project documentation (such as this file) must include
-  `last_modified: YYYY-MM-DD` in the YAML front matter so it can be kept in sync
-  with the authoritative source as policies evolve.
-
-- **ALL external references must be pinned by cryptographic hash.** This
-  includes Docker base images, Go modules, npm packages, GitHub Actions, and
-  anything else fetched from a remote source. Version tags (`@v4`, `@latest`,
-  `:3.21`, etc.) are server-mutable and therefore remote code execution
-  vulnerabilities. The ONLY acceptable way to reference an external dependency
-  is by its content hash (Docker `@sha256:...`, Go module hash in `go.sum`, npm
-  integrity hash in lockfile, GitHub Actions `@<commit-sha>`). No exceptions.
-  This also means never `curl | bash` to install tools like pyenv, nvm, rustup,
-  etc. Instead, download a specific release archive from GitHub, verify its hash
-  (hardcoded in the Dockerfile or script), and only then install. Unverified
-  install scripts are arbitrary remote code execution. This is the single most
-  important rule in this document. Double-check every external reference in
-  every file before committing. There are zero exceptions to this rule.
-
-- Every repo with software must have a root `Makefile` with these targets:
-  `make test`, `make lint`, `make fmt` (writes), `make fmt-check` (read-only),
-  `make check` (prereqs: `test`, `lint`, `fmt-check`), `make docker`, and
-  `make hooks` (installs pre-commit hook). A model Makefile is at
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/Makefile`.
-
-- Always use Makefile targets (`make fmt`, `make test`, `make lint`, etc.)
-  instead of invoking the underlying tools directly. The Makefile is the single
-  source of truth for how these operations are run.
-
-- The Makefile is authoritative documentation for how the repo is used. Beyond
-  the required targets above, it should have targets for every common operation:
-  running a local development server (`make run`, `make dev`), re-initializing
-  or migrating the database (`make db-reset`, `make migrate`), building
-  artifacts (`make build`), generating code, seeding data, or anything else a
-  developer would do regularly. If someone checks out the repo and types
-  `make<tab>`, they should see every meaningful operation available. A new
-  contributor should be able to understand the entire development workflow by
-  reading the Makefile.
-
-- Every repo should have a `Dockerfile`. All Dockerfiles must run `make check`
-  as a build step so the build fails if the branch is not green. For non-server
-  repos, the Dockerfile should bring up a development environment and run
-  `make check`. For server repos, `make check` should run as an early build
-  stage before the final image is assembled.
-
-- Every repo should have a Gitea Actions workflow (`.gitea/workflows/`) that
-  runs `docker build .` on push. Since the Dockerfile already runs `make check`,
-  a successful build implies all checks pass.
-
-- Use platform-standard formatters: `black` for Python, `prettier` for
-  JS/CSS/Markdown/HTML, `go fmt` for Go. Always use default configuration with
-  two exceptions: four-space indents (except Go), and `proseWrap: always` for
-  Markdown (hard-wrap at 80 columns). Documentation and writing repos (Markdown,
-  HTML, CSS) should also have `.prettierrc` and `.prettierignore`.
-
-- Pre-commit hook: `make check` if local testing is possible, otherwise
-  `make lint && make fmt-check`. The Makefile should provide a `make hooks`
-  target to install the pre-commit hook.
-
-- All repos with software must have tests that run via the platform-standard
-  test framework (`go test`, `pytest`, `jest`/`vitest`, etc.). If no meaningful
-  tests exist yet, add the most minimal test possible — e.g. importing the
-  module under test to verify it compiles/parses. There is no excuse for
-  `make test` to be a no-op.
-
-- `make test` must complete in under 20 seconds. Add a 30-second timeout in the
-  Makefile.
-
-- Docker builds must complete in under 5 minutes.
-
-- `make check` must not modify any files in the repo. Tests may use temporary
-  directories.
-
-- `main` must always pass `make check`, no exceptions.
-
-- Never commit secrets. `.env` files, credentials, API keys, and private keys
-  must be in `.gitignore`. No exceptions.
-
-- `.gitignore` should be comprehensive from the start: OS files (`.DS_Store`),
-  editor files (`.swp`, `*~`), language build artifacts, and `node_modules/`.
-  Fetch the standard `.gitignore` from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/.gitignore` when setting up
-  a new repo.
-
-- Never use `git add -A` or `git add .`. Always stage files explicitly by name.
-
-- Never force-push to `main`.
-
-- Make all changes on a feature branch. You can do whatever you want on a
-  feature branch.
-
-- `.golangci.yml` is standardized and must _NEVER_ be modified by an agent, only
-  manually by the user. Fetch from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/.golangci.yml`.
-
-- When pinning images or packages by hash, add a comment above the reference
-  with the version and date (YYYY-MM-DD).
-
-- Use `yarn`, not `npm`.
-
-- Write all dates as YYYY-MM-DD (ISO 8601).
-
-- Simple projects should be configured with environment variables.
-
-- Dockerized web services listen on port 8080 by default, overridable with
-  `PORT`.
-
-- `README.md` is the primary documentation. Required sections:
-    - **Description**: First line must include the project name, purpose,
-      category (web server, SPA, CLI tool, etc.), license, and author. Example:
-      "µPaaS is an MIT-licensed Go web application by @sneak that receives
-      git-frontend webhooks and deploys applications via Docker in realtime."
-    - **Getting Started**: Copy-pasteable install/usage code block.
-    - **Rationale**: Why does this exist?
-    - **Design**: How is the program structured?
-    - **TODO**: Update meticulously, even between commits. When planning, put
-      the todo list in the README so a new agent can pick up where the last one
-      left off.
-    - **License**: MIT, GPL, or WTFPL. Ask the user for new projects. Include a
-      `LICENSE` file in the repo root and a License section in the README.
-    - **Author**: [@sneak](https://sneak.berlin).
-
-- First commit of a new repo should contain only `README.md`.
-
-- Go module root: `sneak.berlin/go/<name>`. Always run `go mod tidy` before
-  committing.
-
-- Use SemVer.
-
-- Database migrations live in `internal/db/migrations/` and must be embedded in
-  the binary.
-    - `000_migration.sql` — contains ONLY the creation of the migrations
-      tracking table itself. Nothing else.
-    - `001_schema.sql` — the full application schema.
-    - **Pre-1.0.0:** never add additional migration files (002, 003, etc.).
-      There is no installed base to migrate. Edit `001_schema.sql` directly.
-    - **Post-1.0.0:** add new numbered migration files for each schema change.
-      Never edit existing migrations after release.
-
-- All repos should have an `.editorconfig` enforcing the project's indentation
-  settings.
-
-- Avoid putting files in the repo root unless necessary. Root should contain
-  only project-level config files (`README.md`, `Makefile`, `Dockerfile`,
-  `LICENSE`, `.gitignore`, `.editorconfig`, `REPO_POLICIES.md`, and
-  language-specific config). Everything else goes in a subdirectory. Canonical
-  subdirectory names:
-    - `bin/` — executable scripts and tools
-    - `cmd/` — Go command entrypoints
-    - `configs/` — configuration templates and examples
-    - `deploy/` — deployment manifests (k8s, compose, terraform)
-    - `docs/` — documentation and markdown (README.md stays in root)
-    - `internal/` — Go internal packages
-    - `internal/db/migrations/` — database migrations
-    - `pkg/` — Go library packages
-    - `share/` — systemd units, data files
-    - `static/` — static assets (images, fonts, etc.)
-    - `web/` — web frontend source
-
-- When setting up a new repo, files from the `prompts` repo may be used as
-  templates. Fetch them from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/<path>`.
-
-- New repos must contain at minimum:
-    - `README.md`, `.git`, `.gitignore`, `.editorconfig`
-    - `LICENSE`, `REPO_POLICIES.md` (copy from the `prompts` repo)
-    - `Makefile`
-    - `Dockerfile`, `.dockerignore`
-    - `.gitea/workflows/check.yml`
-    - Go: `go.mod`, `go.sum`, `.golangci.yml`
-    - JS: `package.json`, `yarn.lock`, `.prettierrc`, `.prettierignore`
-    - Python: `pyproject.toml`

backend-go/.env.example

@@ -1,20 +0,0 @@
-# Server
-PORT=3001
-API_BASE_PATH=/v1
-NODE_ENV=development
-
-# Database
-DATABASE_URL=postgresql://user:password@localhost:5432/koin_ping
-
-# Ethereum JSON-RPC
-ETH_RPC_URL=https://mainnet.infura.io/v3/YOUR-PROJECT-ID
-
-# Polling interval (ms, minimum 1000)
-POLL_INTERVAL_MS=60000
-
-# Firebase
-FIREBASE_PROJECT_ID=koin-ping
-
-# Email notifications (Resend — https://resend.com)
-# RESEND_API_KEY=re_xxxxxxxxxxxx
-# EMAIL_FROM=Koin Ping <alerts@yourdomain.com>

backend-go/README.md

@@ -1,15 +0,0 @@
-Start DB:
-
-brew services start postgresql@15
-
-
-From the backend-go directory, you have a few options:
-
-Option 1: Single command (both API + poller)
-cd /Users/kjannette/workspace/koin_ping_0.2.0/backend-gomake dev-all
-
-Option 2: Two separate terminals
-Terminal 1 (API server):
-cd /Users/kjannette/workspace/koin_ping_0.2.0/backend-gogo run ./cmd/api
-Terminal 2 (Poller):
-cd /Users/kjannette/workspace/koin_ping_0.2.0/backend-gogo run ./cmd/poller

backend-go/internal/middleware/auth.go

@@ -1,99 +0,0 @@
-// Package middleware provides HTTP middleware for authentication and context injection.
-package middleware
-
-import (
-	"context"
-	"encoding/json"
-	"log"
-	"net/http"
-	"strings"
-
-	fbauth "github.com/kjannette/koin-ping/backend-go/internal/firebase"
-)
-
-type contextKey string
-
-const (
-	UserIDKey    contextKey = "user_id"
-	UserEmailKey contextKey = "user_email"
-)
-
-type errorResponse struct {
-	Error   string `json:"error"`
-	Message string `json:"message"`
-}
-
-func writeJSON(w http.ResponseWriter, status int, v interface{}) {
-	w.Header().Set("Content-Type", "application/json")
-	w.WriteHeader(status)
-	json.NewEncoder(w).Encode(v)
-}
-
-func Authenticate(next http.Handler) http.Handler {
-	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		authHeader := r.Header.Get("Authorization")
-		if authHeader == "" || !strings.HasPrefix(authHeader, "Bearer ") {
-			log.Println("No Authorization header or invalid format")
-			writeJSON(w, http.StatusUnauthorized, errorResponse{
-				Error:   "UNAUTHORIZED",
-				Message: "No authentication token provided",
-			})
-			return
-		}
-
-		token := strings.TrimPrefix(authHeader, "Bearer ")
-		if token == "" {
-			log.Println("Empty token")
-			writeJSON(w, http.StatusUnauthorized, errorResponse{
-				Error:   "UNAUTHORIZED",
-				Message: "Invalid token format",
-			})
-			return
-		}
-
-		log.Println("Verifying Firebase token...")
-		decoded, err := fbauth.Auth().VerifyIDToken(r.Context(), token)
-		if err != nil {
-			log.Printf("Token verification failed: %v", err)
-
-			errMsg := err.Error()
-			if strings.Contains(errMsg, "expired") {
-				writeJSON(w, http.StatusUnauthorized, errorResponse{
-					Error:   "TOKEN_EXPIRED",
-					Message: "Authentication token has expired",
-				})
-				return
-			}
-
-			writeJSON(w, http.StatusUnauthorized, errorResponse{
-				Error:   "UNAUTHORIZED",
-				Message: "Failed to verify authentication token",
-			})
-			return
-		}
-
-		userID := decoded.UID
-		email, _ := decoded.Claims["email"].(string)
-
-		log.Printf("Token verified! User ID: %s, Email: %s", userID, email)
-
-		ctx := context.WithValue(r.Context(), UserIDKey, userID)
-		ctx = context.WithValue(ctx, UserEmailKey, email)
-
-		next.ServeHTTP(w, r.WithContext(ctx))
-	})
-}
-
-func GetUserID(ctx context.Context) string {
-	if v, ok := ctx.Value(UserIDKey).(string); ok {
-		return v
-	}
-	return ""
-}
-
-func GetUserEmail(ctx context.Context) string {
-	if v, ok := ctx.Value(UserEmailKey).(string); ok {
-		return v
-	}
-	return ""
-}

backend-go/internal/notifications/notifier.go

@@ -1,16 +0,0 @@
-package notifications
-
-import "context"
-
-// AlertMetadata holds context about the alert being sent.
-type AlertMetadata struct {
-	TxHash       string
-	AddressLabel string
-	AlertType    string
-	Address      string
-}
-
-// Notifier is the interface implemented by all notification channels.
-type Notifier interface {
-	Send(ctx context.Context, message string, meta AlertMetadata) error
-}

backend/README.md

@@ -0,0 +1,20 @@
+Start DB:
+
+brew services start postgresql@15
+
+From the backend directory, you have a few options:
+
+Option 1: Single command (both API + poller)
+cd /Users/kjannette/workspace/koin_ping_0.2.0/backendmake dev-all
+
+Option 2: Two separate terminals
+Terminal 1 (API server):
+cd /Users/kjannette/workspace/koin_ping_0.2.0/backend go run ./cmd/api
+Terminal 2 (Poller):
+cd /Users/kjannette/workspace/koin_ping_0.2.0/backend go run ./cmd/poller
+
+make run — Builds and runs the API server.
+make dev — Runs the API server with auto-reload via air (falls back to go run if air isn't installed).
+make poller — Builds and runs the poller.
+make poller-dev — Runs the poller with auto-reload.
+make dev-all — Runs both the API and poller concurrently.

backend/cmd/api/main.go

@@ -8,13 +8,13 @@ import (
 	"time"
 
 	"github.com/joho/godotenv"
-	"github.com/kjannette/koin-ping/backend-go/internal/config"
-	"github.com/kjannette/koin-ping/backend-go/internal/database"
-	"github.com/kjannette/koin-ping/backend-go/internal/firebase"
-	"github.com/kjannette/koin-ping/backend-go/internal/handlers"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/services"
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/database"
+	"github.com/kjannette/koin-ping/backend/internal/firebase"
+	"github.com/kjannette/koin-ping/backend/internal/handlers"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/services"
 )
 
 const (
@@ -44,6 +44,7 @@ func main() {
 
 	defer database.Close()
 
+	userModel := models.NewUserModel(pool)
 	addressModel := models.NewAddressModel(pool)
 	alertRuleModel := models.NewAlertRuleModel(pool)
 	alertEventModel := models.NewAlertEventModel(pool)
@@ -60,6 +61,16 @@ func main() {
 	notifConfigHandler := handlers.NewNotificationConfigHandler(notifConfigModel, cfg)
 	emailDigestHandler := handlers.NewEmailDigestHandler(emailDigestSvc, notifConfigModel)
 	statusHandler := handlers.NewStatusHandler(checkpointModel)
+	stripeHandler := handlers.NewStripeHandler(userModel, cfg)
+	accountHandler := handlers.NewAccountHandler(userModel, cfg)
+
+	authenticate := middleware.Authenticate(userModel)
+	requireSub := middleware.RequireSubscription(userModel)
+
+	// authAndSub chains authentication + subscription check for protected routes.
+	authAndSub := func(h http.Handler) http.Handler {
+		return authenticate(requireSub(h))
+	}
 
 	mux := http.NewServeMux()
 	b := cfg.APIBasePath // e.g. "/v1"
@@ -68,45 +79,62 @@ func main() {
 	mux.HandleFunc("GET "+b+"/health", handlers.HealthCheck)
 	mux.HandleFunc("GET "+b+"/status", statusHandler.GetStatus)
 
-	// Authenticated routes — addresses
+	// Stripe webhook (public — called by Stripe, not authenticated)
+	mux.HandleFunc("POST "+b+"/stripe/webhook", stripeHandler.HandleWebhook)
+
+	// Stripe routes (auth required, NO subscription required)
+	mux.Handle("POST "+b+"/stripe/create-checkout-session",
+		authenticate(http.HandlerFunc(stripeHandler.CreateCheckoutSession)))
+	mux.Handle("GET "+b+"/stripe/subscription-status",
+		authenticate(http.HandlerFunc(stripeHandler.GetSubscriptionStatus)))
+	mux.Handle("POST "+b+"/stripe/verify-checkout",
+		authenticate(http.HandlerFunc(stripeHandler.VerifyCheckoutSession)))
+	mux.Handle("POST "+b+"/stripe/create-portal-session",
+		authenticate(http.HandlerFunc(stripeHandler.CreatePortalSession)))
+
+	// Account route (auth required, NO subscription required)
+	mux.Handle("GET "+b+"/user/account",
+		authenticate(http.HandlerFunc(accountHandler.GetAccount)))
+
+	// Authenticated + subscribed routes — addresses
 	mux.Handle("POST "+b+"/addresses",
-		middleware.Authenticate(http.HandlerFunc(addressHandler.Create)))
+		authAndSub(http.HandlerFunc(addressHandler.Create)))
 	mux.Handle("GET "+b+"/addresses",
-		middleware.Authenticate(http.HandlerFunc(addressHandler.List)))
+		authAndSub(http.HandlerFunc(addressHandler.List)))
 	mux.Handle("DELETE "+b+"/addresses/{addressId}",
-		middleware.Authenticate(http.HandlerFunc(addressHandler.Remove)))
+		authAndSub(http.HandlerFunc(addressHandler.Remove)))
 	mux.Handle("PATCH "+b+"/addresses/{addressId}",
-		middleware.Authenticate(http.HandlerFunc(addressHandler.UpdateLabel)))
+		authAndSub(http.HandlerFunc(addressHandler.UpdateLabel)))
 
-	// Authenticated routes for alert rules
+	// Authenticated + subscribed routes — alert rules
 	mux.Handle("POST "+b+"/addresses/{addressId}/alerts",
-		middleware.Authenticate(http.HandlerFunc(alertRuleHandler.Create)))
+		authAndSub(http.HandlerFunc(alertRuleHandler.Create)))
 	mux.Handle("GET "+b+"/addresses/{addressId}/alerts",
-		middleware.Authenticate(http.HandlerFunc(alertRuleHandler.ListByAddress)))
+		authAndSub(http.HandlerFunc(alertRuleHandler.ListByAddress)))
 	mux.Handle("PATCH "+b+"/alerts/{alertId}",
-		middleware.Authenticate(http.HandlerFunc(alertRuleHandler.UpdateStatus)))
+		authAndSub(http.HandlerFunc(alertRuleHandler.UpdateStatus)))
 	mux.Handle("DELETE "+b+"/alerts/{alertId}",
-		middleware.Authenticate(http.HandlerFunc(alertRuleHandler.Remove)))
+		authAndSub(http.HandlerFunc(alertRuleHandler.Remove)))
 
-	// Authenticated routes — alert events
+	// Authenticated + subscribed routes — alert events
 	mux.Handle("GET "+b+"/alert-events",
-		middleware.Authenticate(http.HandlerFunc(alertEventHandler.List)))
+		authAndSub(http.HandlerFunc(alertEventHandler.List)))
 
-	// Authenticated routes — notification config
+	// Authenticated + subscribed routes — notification config
 	mux.Handle("GET "+b+"/notification-config",
-		middleware.Authenticate(http.HandlerFunc(notifConfigHandler.GetConfig)))
+		authAndSub(http.HandlerFunc(notifConfigHandler.GetConfig)))
 	mux.Handle("PUT "+b+"/notification-config",
-		middleware.Authenticate(http.HandlerFunc(notifConfigHandler.UpdateConfig)))
+		authAndSub(http.HandlerFunc(notifConfigHandler.UpdateConfig)))
 	mux.Handle("DELETE "+b+"/notification-config",
-		middleware.Authenticate(http.HandlerFunc(notifConfigHandler.DeleteConfig)))
+		authAndSub(http.HandlerFunc(notifConfigHandler.DeleteConfig)))
 	mux.Handle("POST "+b+"/notification-config/test",
-		middleware.Authenticate(http.HandlerFunc(notifConfigHandler.TestChannels)))
+		authAndSub(http.HandlerFunc(notifConfigHandler.TestChannels)))
 
-	// Authenticated routes — email digest
+	// Authenticated + subscribed routes — email digest
 	mux.Handle("POST "+b+"/email/setup",
-		middleware.Authenticate(http.HandlerFunc(emailDigestHandler.SetupEmail)))
+		authAndSub(http.HandlerFunc(emailDigestHandler.SetupEmail)))
 	mux.Handle("POST "+b+"/email/digest",
-		middleware.Authenticate(http.HandlerFunc(emailDigestHandler.SendDigest)))
+		authAndSub(http.HandlerFunc(emailDigestHandler.SendDigest)))
 
 	handler := corsMiddleware(mux)
 

backend/cmd/poller/main.go

@@ -12,11 +12,11 @@ import (
 	"time"
 
 	"github.com/joho/godotenv"
-	"github.com/kjannette/koin-ping/backend-go/internal/config"
-	"github.com/kjannette/koin-ping/backend-go/internal/database"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/protocols/ethereum"
-	"github.com/kjannette/koin-ping/backend-go/internal/services"
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/database"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/protocols/ethereum"
+	"github.com/kjannette/koin-ping/backend/internal/services"
 )
 
 const (
@@ -138,6 +138,8 @@ func runCycle(
 		return
 	}
 
+	evaluator.WaitForNotifications()
+
 	duration := time.Since(startTime)
 	log.Printf("[%s] Cycle complete: %d observations, %d alerts fired in %s",
 		time.Now().UTC().Format(time.RFC3339),

backend/go.mod

@@ -1,4 +1,4 @@
-module github.com/kjannette/koin-ping/backend-go
+module github.com/kjannette/koin-ping/backend
 
 go 1.25.0
 
@@ -44,6 +44,7 @@ require (
 	github.com/planetscale/vtprotobuf v0.6.1-0.20240319094008-0393e58bdf10 // indirect
 	github.com/resend/resend-go/v3 v3.1.1 // indirect
 	github.com/spiffe/go-spiffe/v2 v2.6.0 // indirect
+	github.com/stripe/stripe-go/v82 v82.5.1 // indirect
 	go.opentelemetry.io/auto/sdk v1.2.1 // indirect
 	go.opentelemetry.io/contrib/detectors/gcp v1.39.0 // indirect
 	go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.61.0 // indirect

backend/go.sum

@@ -101,6 +101,8 @@ github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UV
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
 github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+github.com/stripe/stripe-go/v82 v82.5.1 h1:05q6ZDKoe8PLMpQV072obF74HCgP4XJeJYoNuRSX2+8=
+github.com/stripe/stripe-go/v82 v82.5.1/go.mod h1:majCQX6AfObAvJiHraPi/5udwHi4ojRvJnnxckvHrX8=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 go.opentelemetry.io/auto/sdk v1.2.1 h1:jXsnJ4Lmnqd11kwkBV2LgLoFMZKizbCi5fNZ/ipaZ64=
 go.opentelemetry.io/auto/sdk v1.2.1/go.mod h1:KRTj+aOaElaLi+wW1kO/DZRXwkF4C5xPbEe3ZiIhN7Y=

backend/infra/migrations/005_create_users_table.sql

@@ -0,0 +1,13 @@
+-- Migration 005: Create users table with UUID primary key
+-- This establishes a local user record for each Firebase-authenticated user.
+
+CREATE TABLE IF NOT EXISTS users (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  firebase_uid VARCHAR(128) NOT NULL UNIQUE,
+  email VARCHAR(255) NOT NULL,
+  display_name VARCHAR(255),
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_users_firebase_uid ON users(firebase_uid);

backend/infra/migrations/006_migrate_user_ids_to_uuid.sql

@@ -0,0 +1,73 @@
+-- Migration 006: Migrate user_id columns from Firebase UID strings to user UUIDs
+--
+-- Prerequisites: migration 005 (users table) must be applied first.
+-- This migration backfills the users table from existing data, then swaps the
+-- VARCHAR user_id columns for UUID foreign keys referencing users(id).
+
+BEGIN;
+
+-- 1. Backfill users table from existing Firebase UIDs in addresses
+INSERT INTO users (firebase_uid, email)
+  SELECT DISTINCT user_id, ''
+  FROM addresses
+  WHERE user_id IS NOT NULL
+ON CONFLICT (firebase_uid) DO NOTHING;
+
+-- 2. Backfill from notification configs (catches users with configs but no addresses)
+INSERT INTO users (firebase_uid, email)
+  SELECT DISTINCT user_id, ''
+  FROM user_notification_configs
+  WHERE user_id IS NOT NULL
+ON CONFLICT (firebase_uid) DO NOTHING;
+
+-- ============================================================
+-- 3. Migrate addresses.user_id from VARCHAR to UUID
+-- ============================================================
+
+ALTER TABLE addresses ADD COLUMN user_uuid UUID;
+
+UPDATE addresses a
+SET user_uuid = u.id
+FROM users u
+WHERE u.firebase_uid = a.user_id;
+
+-- Drop old constraints and column
+ALTER TABLE addresses DROP CONSTRAINT IF EXISTS addresses_user_id_address_key;
+DROP INDEX IF EXISTS idx_addresses_user_id;
+ALTER TABLE addresses DROP COLUMN user_id;
+
+-- Rename and constrain
+ALTER TABLE addresses RENAME COLUMN user_uuid TO user_id;
+ALTER TABLE addresses ALTER COLUMN user_id SET NOT NULL;
+ALTER TABLE addresses ADD CONSTRAINT fk_addresses_user
+  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
+ALTER TABLE addresses ADD CONSTRAINT addresses_user_id_address_key
+  UNIQUE (user_id, address);
+CREATE INDEX idx_addresses_user_id ON addresses(user_id);
+
+-- ============================================================
+-- 4. Migrate user_notification_configs.user_id from VARCHAR to UUID
+-- ============================================================
+
+-- Drop the PK first (it's on user_id)
+ALTER TABLE user_notification_configs DROP CONSTRAINT IF EXISTS user_notification_configs_pkey;
+DROP INDEX IF EXISTS idx_notification_configs_enabled;
+
+ALTER TABLE user_notification_configs ADD COLUMN user_uuid UUID;
+
+UPDATE user_notification_configs nc
+SET user_uuid = u.id
+FROM users u
+WHERE u.firebase_uid = nc.user_id;
+
+ALTER TABLE user_notification_configs DROP COLUMN user_id;
+ALTER TABLE user_notification_configs RENAME COLUMN user_uuid TO user_id;
+ALTER TABLE user_notification_configs ALTER COLUMN user_id SET NOT NULL;
+ALTER TABLE user_notification_configs ADD CONSTRAINT user_notification_configs_pkey
+  PRIMARY KEY (user_id);
+ALTER TABLE user_notification_configs ADD CONSTRAINT fk_notification_configs_user
+  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
+CREATE INDEX idx_notification_configs_enabled
+  ON user_notification_configs(notification_enabled);
+
+COMMIT;

backend/infra/migrations/007_add_stripe_to_users.sql

@@ -0,0 +1,8 @@
+-- Migration 007: Add Stripe subscription fields to users table
+
+ALTER TABLE users ADD COLUMN IF NOT EXISTS stripe_customer_id VARCHAR(255);
+ALTER TABLE users ADD COLUMN IF NOT EXISTS stripe_subscription_id VARCHAR(255);
+ALTER TABLE users ADD COLUMN IF NOT EXISTS subscription_status VARCHAR(50) DEFAULT 'none';
+ALTER TABLE users ADD COLUMN IF NOT EXISTS subscription_created_at TIMESTAMP;
+
+CREATE INDEX IF NOT EXISTS idx_users_stripe_customer_id ON users(stripe_customer_id);

backend/infra/migrations/008_add_min_max_to_alert_rules.sql

@@ -0,0 +1,6 @@
+ALTER TABLE alert_rules ADD COLUMN minimum DECIMAL(20, 6);
+ALTER TABLE alert_rules ADD COLUMN maximum DECIMAL(20, 6);
+
+ALTER TABLE alert_rules ADD CONSTRAINT non_negative_minimum CHECK (minimum IS NULL OR minimum >= 0);
+ALTER TABLE alert_rules ADD CONSTRAINT non_negative_maximum CHECK (maximum IS NULL OR maximum >= 0);
+ALTER TABLE alert_rules ADD CONSTRAINT min_lte_max CHECK (minimum IS NULL OR maximum IS NULL OR minimum <= maximum);

backend/infra/schema.sql

@@ -4,15 +4,28 @@ DROP TABLE IF EXISTS alert_rules CASCADE;
 DROP TABLE IF EXISTS address_checkpoints CASCADE;
 DROP TABLE IF EXISTS user_notification_configs CASCADE;
 DROP TABLE IF EXISTS addresses CASCADE;
+DROP TABLE IF EXISTS users CASCADE;
+
+CREATE TABLE users (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  firebase_uid VARCHAR(128) NOT NULL UNIQUE,
+  email VARCHAR(255) NOT NULL,
+  display_name VARCHAR(255),
+  stripe_customer_id VARCHAR(255),
+  stripe_subscription_id VARCHAR(255),
+  subscription_status VARCHAR(50) DEFAULT 'none',
+  subscription_created_at TIMESTAMP,
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
 
 CREATE TABLE addresses (
   id SERIAL PRIMARY KEY,
-  user_id VARCHAR(128) NOT NULL,       -- Firebase user ID (multi-user support)
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
   address VARCHAR(42) NOT NULL,        -- Ethereum address format (0x + 40 hex chars)
   label VARCHAR(255),                  -- Optional human-readable label
   created_at TIMESTAMP DEFAULT NOW(),
-  
-  -- Unique users can track the same address independently
+
   UNIQUE(user_id, address)
 );
 
@@ -22,6 +35,8 @@ CREATE TABLE alert_rules (
   address_id INTEGER NOT NULL REFERENCES addresses(id) ON DELETE CASCADE,
   type VARCHAR(50) NOT NULL,           -- 'incoming_tx', 'outgoing_tx', 'large_transfer', 'balance_below'
   threshold DECIMAL(20, 6),            -- ETH amount threshold (nullable for tx types that don't need it)
+  minimum DECIMAL(20, 6),              -- Optional min amount filter for incoming/outgoing alerts
+  maximum DECIMAL(20, 6),              -- Optional max amount filter for incoming/outgoing alerts
   enabled BOOLEAN DEFAULT TRUE,
   created_at TIMESTAMP DEFAULT NOW(),
 
@@ -31,7 +46,11 @@ CREATE TABLE alert_rules (
 
   CONSTRAINT positive_threshold CHECK (
     threshold IS NULL OR threshold > 0
-  )
+  ),
+
+  CONSTRAINT non_negative_minimum CHECK (minimum IS NULL OR minimum >= 0),
+  CONSTRAINT non_negative_maximum CHECK (maximum IS NULL OR maximum >= 0),
+  CONSTRAINT min_lte_max CHECK (minimum IS NULL OR maximum IS NULL OR minimum <= maximum)
 );
 
 
@@ -51,7 +70,7 @@ CREATE TABLE address_checkpoints (
 );
 
 CREATE TABLE user_notification_configs (
-  user_id VARCHAR(128) PRIMARY KEY,
+  user_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
   discord_webhook_url TEXT,            -- Discord webhook URL (nullable)
   telegram_chat_id VARCHAR(128),       -- Telegram chat ID (nullable)
   telegram_bot_token VARCHAR(255),     -- Telegram bot token (nullable)
@@ -63,6 +82,8 @@ CREATE TABLE user_notification_configs (
 );
 
 -- Create indexes for common queries
+CREATE INDEX idx_users_firebase_uid ON users(firebase_uid);
+CREATE INDEX idx_users_stripe_customer_id ON users(stripe_customer_id);
 CREATE INDEX idx_addresses_user_id ON addresses(user_id);
 CREATE INDEX idx_alert_rules_address_id ON alert_rules(address_id);
 CREATE INDEX idx_alert_rules_enabled ON alert_rules(enabled);

backend/internal/config/config.go

@@ -32,6 +32,11 @@ type Config struct {
 	ResendAPIKey         string
 	EmailFrom            string
 	DigestIntervalHours  int
+	StripeSecretKey      string
+	StripeWebhookSecret  string
+	StripePriceID        string
+	StripePublishableKey string
+	FrontendURL          string
 }
 
 // Load reads configuration from environment variables and returns a Config.
@@ -51,7 +56,12 @@ func Load() (*Config, error) {
 		NodeEnv:           getEnv("NODE_ENV", "development"),
 		ResendAPIKey:        os.Getenv("RESEND_API_KEY"),
 		EmailFrom:           getEnv("EMAIL_FROM", "Koin Ping <alerts@koinping.com>"),
-		DigestIntervalHours: getEnvInt("DIGEST_INTERVAL_HOURS", defaultDigestIntervalHours),
+		DigestIntervalHours:  getEnvInt("DIGEST_INTERVAL_HOURS", defaultDigestIntervalHours),
+		StripeSecretKey:      os.Getenv("STRIPE_SECRET_KEY"),
+		StripeWebhookSecret:  os.Getenv("STRIPE_WEBHOOK_SECRET"),
+		StripePriceID:        os.Getenv("STRIPE_PRICE_ID"),
+		StripePublishableKey: os.Getenv("STRIPE_PUBLISHABLE_KEY"),
+		FrontendURL:          getEnv("FRONTEND_URL", "http://localhost:3000"),
 	}
 
 	if cfg.PollIntervalMS < minPollIntervalMS {

backend/internal/domain/types.go

@@ -2,6 +2,19 @@ package domain
 
 import "time"
 
+type User struct {
+	ID                    string     `json:"id"`
+	FirebaseUID           string     `json:"-"`
+	Email                 string     `json:"email"`
+	DisplayName           *string    `json:"display_name"`           //nolint:tagliatelle
+	StripeCustomerID      *string    `json:"-"`
+	StripeSubscriptionID  *string    `json:"-"`
+	SubscriptionStatus    string     `json:"subscription_status"`    //nolint:tagliatelle
+	SubscriptionCreatedAt *time.Time `json:"subscription_created_at,omitempty"` //nolint:tagliatelle
+	CreatedAt             time.Time  `json:"created_at"`             //nolint:tagliatelle
+	UpdatedAt             time.Time  `json:"updated_at"`             //nolint:tagliatelle
+}
+
 type Address struct {
 	ID        int       `json:"id"`
 	UserID    string    `json:"user_id"`    //nolint:tagliatelle
@@ -34,7 +47,7 @@ var ThresholdRequiredTypes = []AlertType{ //nolint:gochecknoglobals
 	AlertBalanceBelow,
 }
 
-// IsValidAlertType returns true if the given string matches a known AlertType.
+// returns true if the given string matches a known AlertType.
 func IsValidAlertType(t string) bool {
 	for _, v := range ValidAlertTypes {
 		if string(v) == t {
@@ -45,7 +58,6 @@ func IsValidAlertType(t string) bool {
 	return false
 }
 
-// IsThresholdRequired returns true if the given AlertType requires a threshold.
 func IsThresholdRequired(t AlertType) bool {
 	for _, v := range ThresholdRequiredTypes {
 		if v == t {
@@ -61,6 +73,8 @@ type AlertRule struct {
 	AddressID int       `json:"address_id"` //nolint:tagliatelle
 	Type      AlertType `json:"type"`
 	Threshold *float64  `json:"threshold"`
+	Minimum   *float64  `json:"minimum"`
+	Maximum   *float64  `json:"maximum"`
 	Enabled   bool      `json:"enabled"`
 	CreatedAt time.Time `json:"created_at"` //nolint:tagliatelle
 }
@@ -80,7 +94,6 @@ type AddressCheckpoint struct {
 	LastCheckedAt    time.Time `json:"last_checked_at"`    //nolint:tagliatelle
 }
 
-// CheckpointDetail combines checkpoint and address info for reporting.
 type CheckpointDetail struct {
 	AddressID        int       `json:"address_id"`         //nolint:tagliatelle
 	Address          string    `json:"address"`
@@ -89,7 +102,7 @@ type CheckpointDetail struct {
 	LastCheckedAt    time.Time `json:"last_checked_at"`    //nolint:tagliatelle
 }
 
-// NotificationConfig holds a user's notification preferences.
+//  holds a user's notification preferences.
 type NotificationConfig struct {
 	UserID              string     `json:"user_id"`              //nolint:tagliatelle
 	DiscordWebhookURL   *string    `json:"discord_webhook_url"`  //nolint:tagliatelle
@@ -118,14 +131,12 @@ type NormalizedTx struct {
 	TokenValue    *string `json:"token_value,omitempty"`    //nolint:tagliatelle
 }
 
-// IsTokenTransfer returns true if this transaction represents an ERC-20 token transfer.
 func (tx NormalizedTx) IsTokenTransfer() bool {
 	return tx.TokenContract != nil
 }
 
 type Direction string
 
-// String implements fmt.Stringer.
 func (d Direction) String() string { return string(d) }
 
 const (

backend/internal/handlers/account.go

@@ -0,0 +1,66 @@
+package handlers
+
+import (
+	"log"
+	"net/http"
+	"time"
+
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+)
+
+type AccountHandler struct {
+	users *models.UserModel
+	cfg   *config.Config
+}
+
+func NewAccountHandler(users *models.UserModel, cfg *config.Config) *AccountHandler {
+	return &AccountHandler{users: users, cfg: cfg}
+}
+
+type accountResponse struct {
+	UserID             string  `json:"user_id"`
+	Email              string  `json:"email"`
+	UserName           string  `json:"user_name"`
+	SubscriptionStatus string  `json:"subscription_status"`
+	SubscriptionPlan   string  `json:"subscription_plan"`
+	MemberSince        *string `json:"member_since,omitempty"`
+	NextBillingDate    *string `json:"next_billing_date,omitempty"`
+	CancelAtPeriodEnd  bool    `json:"cancel_at_period_end"`
+	PeriodEndDate      *string `json:"period_end_date,omitempty"`
+}
+
+func (h *AccountHandler) GetAccount(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+	email := middleware.GetUserEmail(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Account: failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	resp := accountResponse{
+		UserID:             user.ID,
+		Email:              email,
+		UserName:           email,
+		SubscriptionStatus: user.SubscriptionStatus,
+		SubscriptionPlan:   "monthly/$1.99",
+	}
+
+	if user.SubscriptionCreatedAt != nil {
+		t := user.SubscriptionCreatedAt.Format(time.DateOnly)
+		resp.MemberSince = &t
+	}
+
+	// MOCKED: NextBillingDate, CancelAtPeriodEnd, PeriodEndDate.
+	// TODO: stripe-go v82 removed Subscription.CurrentPeriodEnd / CancelAtPeriodEnd.
+	// Research SubscriptionItem.CurrentPeriodEnd or use Stripe REST API directly.
+	resp.NextBillingDate = nil
+	resp.CancelAtPeriodEnd = false
+	resp.PeriodEndDate = nil
+
+	writeJSON(w, http.StatusOK, resp)
+}

backend/internal/handlers/address.go

@@ -8,9 +8,9 @@ import (
 	"regexp"
 	"strings"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
 var ethAddressRe = regexp.MustCompile(`^0x[a-fA-F0-9]{40}$`)

backend/internal/handlers/alert_event.go

@@ -5,9 +5,9 @@ import (
 	"net/http"
 	"strconv"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
 // AlertEventHandler handles HTTP requests for alert event history.

backend/internal/handlers/alert_rule.go

@@ -9,9 +9,9 @@ import (
 	"strconv"
 	"strings"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
 var errThresholdFormat = errors.New("unsupported threshold format")
@@ -37,6 +37,8 @@ func (h *AlertRuleHandler) Create(w http.ResponseWriter, r *http.Request) {
 	var body struct {
 		Type      string          `json:"type"`
 		Threshold json.RawMessage `json:"threshold"`
+		Minimum   json.RawMessage `json:"minimum"`
+		Maximum   json.RawMessage `json:"maximum"`
 	}
 	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
 		log.Printf("Failed to decode alert request body: %v", err)
@@ -53,6 +55,40 @@ func (h *AlertRuleHandler) Create(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	minimum, err := parseThreshold(body.Minimum)
+	if err != nil {
+		log.Printf("Failed to parse minimum: %v", err)
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must be a valid number")
+
+		return
+	}
+
+	maximum, err := parseThreshold(body.Maximum)
+	if err != nil {
+		log.Printf("Failed to parse maximum: %v", err)
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "maximum must be a valid number")
+
+		return
+	}
+
+	if minimum != nil && *minimum < 0 {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must be non-negative")
+
+		return
+	}
+
+	if maximum != nil && *maximum < 0 {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "maximum must be non-negative")
+
+		return
+	}
+
+	if minimum != nil && maximum != nil && *minimum > *maximum {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must not exceed maximum")
+
+		return
+	}
+
 	log.Printf("User %s creating alert: type=%s, addressID=%d", userID, body.Type, addressID)
 
 	if body.Type == "" {
@@ -96,7 +132,7 @@ func (h *AlertRuleHandler) Create(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	newAlert, err := h.alertRules.Create(r.Context(), addressID, alertType, threshold)
+	newAlert, err := h.alertRules.Create(r.Context(), addressID, alertType, threshold, minimum, maximum)
 	if err != nil {
 		log.Printf("Error creating alert rule: %v", err)
 		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to create alert rule")
@@ -182,7 +218,7 @@ func (h *AlertRuleHandler) ListByAddress(w http.ResponseWriter, r *http.Request)
 	writeJSON(w, http.StatusOK, alerts)
 }
 
-// UpdateStatus handles PATCH requests to enable or disable an alert rule.
+// UpdateStatus handles PATCH requests to enable/disable an alert rule and/or update min/max thresholds.
 func (h *AlertRuleHandler) UpdateStatus(w http.ResponseWriter, r *http.Request) {
 	userID := middleware.GetUserID(r.Context())
 	alertID, ok := parseIntParam(r.PathValue("alertId"))
@@ -193,7 +229,10 @@ func (h *AlertRuleHandler) UpdateStatus(w http.ResponseWriter, r *http.Request)
 	}
 
 	var body struct {
-		Enabled *bool `json:"enabled"`
+		Enabled        *bool           `json:"enabled"`
+		Minimum        json.RawMessage `json:"minimum"`
+		Maximum        json.RawMessage `json:"maximum"`
+		UpdateMinMax   bool            `json:"update_min_max"`   //nolint:tagliatelle
 	}
 	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
 		log.Printf("Failed to decode update request body: %v", err)
@@ -204,8 +243,8 @@ func (h *AlertRuleHandler) UpdateStatus(w http.ResponseWriter, r *http.Request)
 
 	log.Printf("User %s updating alert ID: %d", userID, alertID)
 
-	if body.Enabled == nil {
-		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "enabled must be a boolean value")
+	if body.Enabled == nil && !body.UpdateMinMax {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "must provide enabled (boolean) or update_min_max with minimum/maximum values")
 
 		return
 	}
@@ -224,15 +263,64 @@ func (h *AlertRuleHandler) UpdateStatus(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	updated, err := h.alertRules.UpdateEnabled(r.Context(), alertID, *body.Enabled)
-	if err != nil {
-		log.Printf("Error updating alert: %v", err)
-		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to update alert")
+	var updated *domain.AlertRule
 
-		return
+	if body.UpdateMinMax {
+		minimum, parseErr := parseThreshold(body.Minimum)
+		if parseErr != nil {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must be a valid number")
+
+			return
+		}
+
+		maximum, parseErr := parseThreshold(body.Maximum)
+		if parseErr != nil {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "maximum must be a valid number")
+
+			return
+		}
+
+		if minimum != nil && *minimum < 0 {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must be non-negative")
+
+			return
+		}
+
+		if maximum != nil && *maximum < 0 {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "maximum must be non-negative")
+
+			return
+		}
+
+		if minimum != nil && maximum != nil && *minimum > *maximum {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must not exceed maximum")
+
+			return
+		}
+
+		updated, err = h.alertRules.UpdateThresholds(r.Context(), alertID, minimum, maximum)
+		if err != nil {
+			log.Printf("Error updating alert thresholds: %v", err)
+			writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to update alert")
+
+			return
+		}
+
+		log.Printf("Alert %d thresholds updated: min=%v, max=%v", alertID, minimum, maximum)
+	}
+
+	if body.Enabled != nil {
+		updated, err = h.alertRules.UpdateEnabled(r.Context(), alertID, *body.Enabled)
+		if err != nil {
+			log.Printf("Error updating alert: %v", err)
+			writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to update alert")
+
+			return
+		}
+
+		log.Printf("Alert %d updated: enabled=%v", alertID, *body.Enabled)
 	}
 
-	log.Printf("Alert %d updated: enabled=%v", alertID, *body.Enabled)
 	writeJSON(w, http.StatusOK, updated)
 }
 

backend/internal/handlers/email_digest.go

@@ -4,9 +4,9 @@ import (
 	"log"
 	"net/http"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/services"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/services"
 )
 
 type EmailDigestHandler struct {

backend/internal/handlers/notification_config.go

@@ -7,11 +7,11 @@ import (
 	"regexp"
 	"strings"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/config"
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/notifications"
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/notifications"
 )
 
 var emailRe = regexp.MustCompile(`^[^\s@]+@[^\s@]+\.[^\s@]+$`)

backend/internal/handlers/status.go

@@ -5,7 +5,7 @@ import (
 	"net/http"
 	"time"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
 // StatusHandler handles the system status endpoint.

backend/internal/handlers/stripe.go

@@ -0,0 +1,287 @@
+package handlers
+
+import (
+	"encoding/json"
+	"io"
+	"log"
+	"net/http"
+
+	"github.com/stripe/stripe-go/v82"
+	portalsession "github.com/stripe/stripe-go/v82/billingportal/session"
+	checkoutsession "github.com/stripe/stripe-go/v82/checkout/session"
+	"github.com/stripe/stripe-go/v82/webhook"
+
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+)
+
+const webhookMaxBodyBytes = 65536
+
+type StripeHandler struct {
+	users *models.UserModel
+	cfg   *config.Config
+}
+
+func NewStripeHandler(users *models.UserModel, cfg *config.Config) *StripeHandler {
+	stripe.Key = cfg.StripeSecretKey
+	return &StripeHandler{users: users, cfg: cfg}
+}
+
+// CreateCheckoutSession creates a Stripe Checkout session for the monthly subscription.
+func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	params := &stripe.CheckoutSessionParams{
+		Mode: stripe.String(string(stripe.CheckoutSessionModeSubscription)),
+		LineItems: []*stripe.CheckoutSessionLineItemParams{
+			{
+				Price:    stripe.String(h.cfg.StripePriceID),
+				Quantity: stripe.Int64(1),
+			},
+		},
+		SuccessURL:        stripe.String(h.cfg.FrontendURL + "/subscribe?payment=success&session_id={CHECKOUT_SESSION_ID}"),
+		CancelURL:         stripe.String(h.cfg.FrontendURL + "/subscribe?payment=cancelled"),
+		ClientReferenceID: stripe.String(userID),
+		CustomerEmail:     stripe.String(user.Email),
+	}
+
+	if user.StripeCustomerID != nil && *user.StripeCustomerID != "" {
+		params.Customer = user.StripeCustomerID
+		params.CustomerEmail = nil
+	}
+
+	s, err := checkoutsession.New(params)
+	if err != nil {
+		log.Printf("Failed to create Stripe checkout session: %v", err)
+		writeError(w, http.StatusInternalServerError, "STRIPE_ERROR", "Failed to create checkout session")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]string{"url": s.URL})
+}
+
+// GetSubscriptionStatus returns the current user's subscription state.
+func (h *StripeHandler) GetSubscriptionStatus(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]any{
+		"subscription_status":     user.SubscriptionStatus,
+		"subscription_created_at": user.SubscriptionCreatedAt,
+	})
+}
+
+// VerifyCheckoutSession retrieves a completed checkout session from Stripe,
+// confirms payment, and activates the user's subscription in the database.
+// This is the primary activation path; webhooks serve as a backup.
+func (h *StripeHandler) VerifyCheckoutSession(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	var body struct {
+		SessionID string `json:"session_id"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil || body.SessionID == "" {
+		writeError(w, http.StatusBadRequest, "BAD_REQUEST", "Missing session_id")
+		return
+	}
+
+	s, err := checkoutsession.Get(body.SessionID, nil)
+	if err != nil {
+		log.Printf("Failed to retrieve checkout session %s: %v", body.SessionID, err)
+		writeError(w, http.StatusBadRequest, "STRIPE_ERROR", "Invalid checkout session")
+		return
+	}
+
+	if s.ClientReferenceID != userID {
+		writeError(w, http.StatusForbidden, "FORBIDDEN", "Session does not belong to this user")
+		return
+	}
+
+	if s.PaymentStatus != stripe.CheckoutSessionPaymentStatusPaid {
+		writeError(w, http.StatusBadRequest, "PAYMENT_INCOMPLETE", "Payment has not been completed")
+		return
+	}
+
+	customerID := ""
+	if s.Customer != nil {
+		customerID = s.Customer.ID
+	}
+	subscriptionID := ""
+	if s.Subscription != nil {
+		subscriptionID = s.Subscription.ID
+	}
+
+	if customerID != "" {
+		if err := h.users.UpdateStripeCustomer(r.Context(), userID, customerID); err != nil {
+			log.Printf("VerifyCheckout: failed to save customer ID: %v", err)
+		}
+	}
+	if subscriptionID != "" && customerID != "" {
+		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active"); err != nil {
+			log.Printf("VerifyCheckout: failed to activate subscription: %v", err)
+		}
+	}
+
+	log.Printf("Checkout verified for user %s, customer %s, subscription %s", userID, customerID, subscriptionID)
+	writeJSON(w, http.StatusOK, map[string]string{"subscription_status": "active"})
+}
+
+// CreatePortalSession creates a Stripe Billing Portal session so the user can
+// manage their subscription (cancel, update payment method, view invoices).
+func (h *StripeHandler) CreatePortalSession(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Portal: failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	if user.StripeCustomerID == nil || *user.StripeCustomerID == "" {
+		writeError(w, http.StatusBadRequest, "NO_CUSTOMER", "No Stripe customer on file")
+		return
+	}
+
+	params := &stripe.BillingPortalSessionParams{
+		Customer:  user.StripeCustomerID,
+		ReturnURL: stripe.String(h.cfg.FrontendURL + "/account"),
+	}
+
+	s, err := portalsession.New(params)
+	if err != nil {
+		log.Printf("Portal: failed to create portal session: %v", err)
+		writeError(w, http.StatusInternalServerError, "STRIPE_ERROR", "Failed to create portal session")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]string{"url": s.URL})
+}
+
+// HandleWebhook processes incoming Stripe webhook events.
+// This endpoint must NOT require authentication (Stripe calls it directly).
+func (h *StripeHandler) HandleWebhook(w http.ResponseWriter, r *http.Request) {
+	payload, err := io.ReadAll(io.LimitReader(r.Body, webhookMaxBodyBytes))
+	if err != nil {
+		log.Printf("Error reading webhook body: %v", err)
+		w.WriteHeader(http.StatusServiceUnavailable)
+		return
+	}
+
+	sig := r.Header.Get("Stripe-Signature")
+	event, err := webhook.ConstructEvent(payload, sig, h.cfg.StripeWebhookSecret)
+	if err != nil {
+		log.Printf("Webhook signature verification failed: %v", err)
+		w.WriteHeader(http.StatusBadRequest)
+		return
+	}
+
+	switch event.Type {
+	case "checkout.session.completed":
+		h.handleCheckoutCompleted(r, event)
+	case "customer.subscription.updated":
+		h.handleSubscriptionUpdated(r, event)
+	case "customer.subscription.deleted":
+		h.handleSubscriptionDeleted(r, event)
+	default:
+		log.Printf("Unhandled Stripe event type: %s", event.Type)
+	}
+
+	w.WriteHeader(http.StatusOK)
+}
+
+func (h *StripeHandler) handleCheckoutCompleted(r *http.Request, event stripe.Event) {
+	var session stripe.CheckoutSession
+	if err := json.Unmarshal(event.Data.Raw, &session); err != nil {
+		log.Printf("Error parsing checkout session: %v", err)
+		return
+	}
+
+	userID := session.ClientReferenceID
+	if userID == "" {
+		log.Println("Checkout session missing client_reference_id")
+		return
+	}
+
+	customerID := ""
+	if session.Customer != nil {
+		customerID = session.Customer.ID
+	}
+	subscriptionID := ""
+	if session.Subscription != nil {
+		subscriptionID = session.Subscription.ID
+	}
+
+	if customerID != "" {
+		if err := h.users.UpdateStripeCustomer(r.Context(), userID, customerID); err != nil {
+			log.Printf("Failed to save Stripe customer ID: %v", err)
+		}
+	}
+
+	if subscriptionID != "" && customerID != "" {
+		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active"); err != nil {
+			log.Printf("Failed to activate subscription: %v", err)
+		}
+	}
+
+	log.Printf("Checkout completed for user %s, customer %s, subscription %s", userID, customerID, subscriptionID)
+}
+
+func (h *StripeHandler) handleSubscriptionUpdated(r *http.Request, event stripe.Event) {
+	var sub stripe.Subscription
+	if err := json.Unmarshal(event.Data.Raw, &sub); err != nil {
+		log.Printf("Error parsing subscription update: %v", err)
+		return
+	}
+
+	customerID := ""
+	if sub.Customer != nil {
+		customerID = sub.Customer.ID
+	}
+	if customerID == "" {
+		return
+	}
+
+	status := string(sub.Status)
+	if err := h.users.ActivateSubscription(r.Context(), customerID, sub.ID, status); err != nil {
+		log.Printf("Failed to update subscription status: %v", err)
+	}
+
+	log.Printf("Subscription %s updated to %s for customer %s", sub.ID, status, customerID)
+}
+
+func (h *StripeHandler) handleSubscriptionDeleted(r *http.Request, event stripe.Event) {
+	var sub stripe.Subscription
+	if err := json.Unmarshal(event.Data.Raw, &sub); err != nil {
+		log.Printf("Error parsing subscription deletion: %v", err)
+		return
+	}
+
+	customerID := ""
+	if sub.Customer != nil {
+		customerID = sub.Customer.ID
+	}
+	if customerID == "" {
+		return
+	}
+
+	if err := h.users.UpdateSubscriptionStatus(r.Context(), customerID, "canceled"); err != nil {
+		log.Printf("Failed to mark subscription canceled: %v", err)
+	}
+
+	log.Printf("Subscription canceled for customer %s", customerID)
+}

backend/internal/middleware/auth.go

@@ -0,0 +1,152 @@
+// Package middleware provides HTTP middleware for authentication and context injection.
+package middleware
+
+import (
+	"context"
+	"encoding/json"
+	"log"
+	"net/http"
+	"strings"
+
+	fbauth "github.com/kjannette/koin-ping/backend/internal/firebase"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+)
+
+type contextKey string
+
+const (
+	UserIDKey    contextKey = "user_id"
+	UserEmailKey contextKey = "user_email"
+)
+
+type errorResponse struct {
+	Error   string `json:"error"`
+	Message string `json:"message"`
+}
+
+func writeJSON(w http.ResponseWriter, status int, v interface{}) {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(status)
+	json.NewEncoder(w).Encode(v) //nolint:errcheck
+}
+
+// Authenticate verifies the Firebase ID token and auto-provisions a local user
+// record. The local user UUID (not the Firebase UID) is placed into context so
+// all downstream handlers use it as the canonical user identifier.
+func Authenticate(userModel *models.UserModel) func(http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			authHeader := r.Header.Get("Authorization")
+			if authHeader == "" || !strings.HasPrefix(authHeader, "Bearer ") {
+				log.Println("No Authorization header or invalid format")
+				writeJSON(w, http.StatusUnauthorized, errorResponse{
+					Error:   "UNAUTHORIZED",
+					Message: "No authentication token provided",
+				})
+				return
+			}
+
+			token := strings.TrimPrefix(authHeader, "Bearer ")
+			if token == "" {
+				log.Println("Empty token")
+				writeJSON(w, http.StatusUnauthorized, errorResponse{
+					Error:   "UNAUTHORIZED",
+					Message: "Invalid token format",
+				})
+				return
+			}
+
+			log.Println("Verifying Firebase token...")
+			decoded, err := fbauth.Auth().VerifyIDToken(r.Context(), token)
+			if err != nil {
+				log.Printf("Token verification failed: %v", err)
+
+				errMsg := err.Error()
+				if strings.Contains(errMsg, "expired") {
+					writeJSON(w, http.StatusUnauthorized, errorResponse{
+						Error:   "TOKEN_EXPIRED",
+						Message: "Authentication token has expired",
+					})
+					return
+				}
+
+				writeJSON(w, http.StatusUnauthorized, errorResponse{
+					Error:   "UNAUTHORIZED",
+					Message: "Failed to verify authentication token",
+				})
+				return
+			}
+
+			firebaseUID := decoded.UID
+			email, _ := decoded.Claims["email"].(string)
+
+			user, err := userModel.FindOrCreateByFirebaseUID(r.Context(), firebaseUID, email)
+			if err != nil {
+				log.Printf("Failed to provision local user for Firebase UID %s: %v", firebaseUID, err)
+				writeJSON(w, http.StatusInternalServerError, errorResponse{
+					Error:   "INTERNAL_ERROR",
+					Message: "Failed to initialize user account",
+				})
+				return
+			}
+
+			log.Printf("Token verified! User UUID: %s, Email: %s", user.ID, email)
+
+			ctx := context.WithValue(r.Context(), UserIDKey, user.ID)
+			ctx = context.WithValue(ctx, UserEmailKey, email)
+
+			next.ServeHTTP(w, r.WithContext(ctx))
+		})
+	}
+}
+
+// RequireSubscription blocks requests from users without an active subscription.
+// Must be applied after Authenticate.
+func RequireSubscription(userModel *models.UserModel) func(http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			userID := GetUserID(r.Context())
+			if userID == "" {
+				writeJSON(w, http.StatusUnauthorized, errorResponse{
+					Error:   "UNAUTHORIZED",
+					Message: "Authentication required",
+				})
+				return
+			}
+
+			user, err := userModel.GetByID(r.Context(), userID)
+			if err != nil || user == nil {
+				log.Printf("RequireSubscription: failed to load user %s: %v", userID, err)
+				writeJSON(w, http.StatusInternalServerError, errorResponse{
+					Error:   "INTERNAL_ERROR",
+					Message: "Failed to verify subscription",
+				})
+				return
+			}
+
+			if user.SubscriptionStatus != "active" && user.SubscriptionStatus != "trialing" {
+				writeJSON(w, http.StatusForbidden, errorResponse{
+					Error:   "SUBSCRIPTION_REQUIRED",
+					Message: "An active subscription is required to use this feature",
+				})
+				return
+			}
+
+			next.ServeHTTP(w, r)
+		})
+	}
+}
+
+func GetUserID(ctx context.Context) string {
+	if v, ok := ctx.Value(UserIDKey).(string); ok {
+		return v
+	}
+	return ""
+}
+
+func GetUserEmail(ctx context.Context) string {
+	if v, ok := ctx.Value(UserEmailKey).(string); ok {
+		return v
+	}
+	return ""
+}

backend/internal/models/address.go

@@ -6,7 +6,7 @@ import (
 
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
 )
 
 type AddressModel struct {

backend/internal/models/alert_event.go

@@ -6,7 +6,7 @@ import (
 
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
 )
 
 type AlertEventModel struct {

backend/internal/models/alert_rule.go

@@ -6,7 +6,7 @@ import (
 
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
 )
 
 type AlertRuleModel struct {
@@ -17,14 +17,14 @@ func NewAlertRuleModel(pool *pgxpool.Pool) *AlertRuleModel {
 	return &AlertRuleModel{pool: pool}
 }
 
-func (m *AlertRuleModel) Create(ctx context.Context, addressID int, alertType domain.AlertType, threshold *float64) (*domain.AlertRule, error) {
+func (m *AlertRuleModel) Create(ctx context.Context, addressID int, alertType domain.AlertType, threshold, minimum, maximum *float64) (*domain.AlertRule, error) {
 	var r domain.AlertRule
 	err := m.pool.QueryRow(ctx,
-		`INSERT INTO alert_rules (address_id, type, threshold, enabled)
-		 VALUES ($1, $2, $3, TRUE)
-		 RETURNING id, address_id, type, threshold, enabled, created_at`,
-		addressID, alertType.String(), threshold,
-	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt)
+		`INSERT INTO alert_rules (address_id, type, threshold, minimum, maximum, enabled)
+		 VALUES ($1, $2, $3, $4, $5, TRUE)
+		 RETURNING id, address_id, type, threshold, minimum, maximum, enabled, created_at`,
+		addressID, alertType.String(), threshold, minimum, maximum,
+	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
 	if err != nil {
 		return nil, err
 	}
@@ -33,7 +33,7 @@ func (m *AlertRuleModel) Create(ctx context.Context, addressID int, alertType do
 
 func (m *AlertRuleModel) ListByAddress(ctx context.Context, addressID int) ([]domain.AlertRule, error) {
 	rows, err := m.pool.Query(ctx,
-		`SELECT id, address_id, type, threshold, enabled, created_at
+		`SELECT id, address_id, type, threshold, minimum, maximum, enabled, created_at
 		 FROM alert_rules
 		 WHERE address_id = $1
 		 ORDER BY created_at DESC`,
@@ -47,7 +47,7 @@ func (m *AlertRuleModel) ListByAddress(ctx context.Context, addressID int) ([]do
 	var rules []domain.AlertRule
 	for rows.Next() {
 		var r domain.AlertRule
-		if err := rows.Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt); err != nil {
+		if err := rows.Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt); err != nil {
 			return nil, err
 		}
 		rules = append(rules, r)
@@ -61,19 +61,19 @@ func (m *AlertRuleModel) FindByID(ctx context.Context, id int, userID *string) (
 
 	if userID != nil {
 		err = m.pool.QueryRow(ctx,
-			`SELECT ar.id, ar.address_id, ar.type, ar.threshold, ar.enabled, ar.created_at
+			`SELECT ar.id, ar.address_id, ar.type, ar.threshold, ar.minimum, ar.maximum, ar.enabled, ar.created_at
 			 FROM alert_rules ar
 			 JOIN addresses a ON a.id = ar.address_id
 			 WHERE ar.id = $1 AND a.user_id = $2`,
 			id, *userID,
-		).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt)
+		).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
 	} else {
 		err = m.pool.QueryRow(ctx,
-			`SELECT id, address_id, type, threshold, enabled, created_at
+			`SELECT id, address_id, type, threshold, minimum, maximum, enabled, created_at
 			 FROM alert_rules
 			 WHERE id = $1`,
 			id,
-		).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt)
+		).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
 	}
 
 	if err != nil {
@@ -91,9 +91,27 @@ func (m *AlertRuleModel) UpdateEnabled(ctx context.Context, id int, enabled bool
 		`UPDATE alert_rules
 		 SET enabled = $2
 		 WHERE id = $1
-		 RETURNING id, address_id, type, threshold, enabled, created_at`,
+		 RETURNING id, address_id, type, threshold, minimum, maximum, enabled, created_at`,
 		id, enabled,
-	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt)
+	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
+	if err != nil {
+		if errors.Is(err, pgx.ErrNoRows) {
+			return nil, nil
+		}
+		return nil, err
+	}
+	return &r, nil
+}
+
+func (m *AlertRuleModel) UpdateThresholds(ctx context.Context, id int, minimum, maximum *float64) (*domain.AlertRule, error) {
+	var r domain.AlertRule
+	err := m.pool.QueryRow(ctx,
+		`UPDATE alert_rules
+		 SET minimum = $2, maximum = $3
+		 WHERE id = $1
+		 RETURNING id, address_id, type, threshold, minimum, maximum, enabled, created_at`,
+		id, minimum, maximum,
+	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
 	if err != nil {
 		if errors.Is(err, pgx.ErrNoRows) {
 			return nil, nil

backend/internal/models/checkpoint.go

@@ -7,7 +7,7 @@ import (
 
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
 )
 
 type CheckpointModel struct {

backend/internal/models/notification_config.go

@@ -6,7 +6,7 @@ import (
 
 	"github.com/jackc/pgx/v5"
 	"github.com/jackc/pgx/v5/pgxpool"
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
 )
 
 type NotificationConfigModel struct {

backend/internal/models/user.go

@@ -0,0 +1,89 @@
+package models
+
+import (
+	"context"
+	"errors"
+
+	"github.com/jackc/pgx/v5"
+	"github.com/jackc/pgx/v5/pgxpool"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+)
+
+type UserModel struct {
+	pool *pgxpool.Pool
+}
+
+func NewUserModel(pool *pgxpool.Pool) *UserModel {
+	return &UserModel{pool: pool}
+}
+
+const userColumns = `id, firebase_uid, email, display_name,
+	stripe_customer_id, stripe_subscription_id, subscription_status,
+	subscription_created_at, created_at, updated_at`
+
+func scanUser(row pgx.Row) (*domain.User, error) {
+	var u domain.User
+	err := row.Scan(
+		&u.ID, &u.FirebaseUID, &u.Email, &u.DisplayName,
+		&u.StripeCustomerID, &u.StripeSubscriptionID, &u.SubscriptionStatus,
+		&u.SubscriptionCreatedAt, &u.CreatedAt, &u.UpdatedAt,
+	)
+	if err != nil {
+		if errors.Is(err, pgx.ErrNoRows) {
+			return nil, nil //nolint:nilnil
+		}
+		return nil, err
+	}
+	return &u, nil
+}
+
+// FindOrCreateByFirebaseUID returns the local user for a Firebase UID,
+// creating one if it doesn't exist yet. On conflict (returning user) the
+// updated_at timestamp is refreshed.
+func (m *UserModel) FindOrCreateByFirebaseUID(ctx context.Context, firebaseUID, email string) (*domain.User, error) {
+	row := m.pool.QueryRow(ctx,
+		`INSERT INTO users (firebase_uid, email)
+		 VALUES ($1, $2)
+		 ON CONFLICT (firebase_uid) DO UPDATE SET updated_at = NOW()
+		 RETURNING `+userColumns,
+		firebaseUID, email,
+	)
+	return scanUser(row)
+}
+
+func (m *UserModel) GetByID(ctx context.Context, id string) (*domain.User, error) {
+	row := m.pool.QueryRow(ctx,
+		`SELECT `+userColumns+` FROM users WHERE id = $1`, id,
+	)
+	return scanUser(row)
+}
+
+func (m *UserModel) UpdateStripeCustomer(ctx context.Context, userID, stripeCustomerID string) error {
+	_, err := m.pool.Exec(ctx,
+		`UPDATE users SET stripe_customer_id = $2, updated_at = NOW() WHERE id = $1`,
+		userID, stripeCustomerID,
+	)
+	return err
+}
+
+func (m *UserModel) ActivateSubscription(ctx context.Context, stripeCustomerID, subscriptionID, status string) error {
+	_, err := m.pool.Exec(ctx,
+		`UPDATE users
+		 SET stripe_subscription_id = $2,
+		     subscription_status = $3,
+		     subscription_created_at = COALESCE(subscription_created_at, NOW()),
+		     updated_at = NOW()
+		 WHERE stripe_customer_id = $1`,
+		stripeCustomerID, subscriptionID, status,
+	)
+	return err
+}
+
+func (m *UserModel) UpdateSubscriptionStatus(ctx context.Context, stripeCustomerID, status string) error {
+	_, err := m.pool.Exec(ctx,
+		`UPDATE users SET subscription_status = $2, updated_at = NOW()
+		 WHERE stripe_customer_id = $1`,
+		stripeCustomerID, status,
+	)
+	return err
+}

backend/internal/notifications/discord.go

@@ -21,17 +21,14 @@ const (
 	colorBlue   = 0x0099ff
 )
 
-// discordHTTPClient is a shared HTTP client with a timeout for Discord requests.
 var discordHTTPClient = &http.Client{ //nolint:gochecknoglobals
 	Timeout: discordHTTPTimeoutSeconds * time.Second,
 }
 
-// DiscordNotifier sends alert notifications via a Discord webhook.
+//  sends alert notifications via a Discord webhook.
 type DiscordNotifier struct {
 	WebhookURL string
 }
-
-// Send implements Notifier for Discord.
 func (d *DiscordNotifier) Send(_ context.Context, message string, meta AlertMetadata) error {
 	_, err := SendDiscordNotification(d.WebhookURL, message, meta)
 	return err
@@ -104,8 +101,12 @@ func SendDiscordNotification(webhookURL, message string, meta AlertMetadata) (bo
 	defer resp.Body.Close()
 
 	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		err := fmt.Errorf("discord webhook failed: HTTP %d", resp.StatusCode)
 		log.Printf("Discord webhook failed: HTTP %d", resp.StatusCode)
-		return false, fmt.Errorf("discord webhook failed: HTTP %d", resp.StatusCode)
+		if isPermanentStatusCode(resp.StatusCode) {
+			return false, &PermanentError{Err: err}
+		}
+		return false, err
 	}
 
 	return true, nil

backend/internal/notifications/email.go

@@ -10,14 +10,12 @@ import (
 	"time"
 )
 
-// EmailNotifier sends alert notifications via email (Resend).
 type EmailNotifier struct {
 	APIKey string
 	From   string
 	To     string
 }
 
-// Send implements Notifier for email.
 func (e *EmailNotifier) Send(_ context.Context, message string, meta AlertMetadata) error {
 	_, err := SendEmailNotification(e.APIKey, e.From, e.To, message, meta)
 	return err
@@ -99,8 +97,12 @@ func SendEmailNotification(apiKey, fromAddress, toAddress, message string, meta
 	defer resp.Body.Close()
 
 	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		err := fmt.Errorf("resend API failed: HTTP %d", resp.StatusCode)
 		log.Printf("Resend API failed: HTTP %d", resp.StatusCode)
-		return false, fmt.Errorf("resend API failed: HTTP %d", resp.StatusCode)
+		if isPermanentStatusCode(resp.StatusCode) {
+			return false, &PermanentError{Err: err}
+		}
+		return false, err
 	}
 
 	return true, nil

backend/internal/notifications/notifier.go

@@ -0,0 +1,38 @@
+package notifications
+
+import (
+	"context"
+	"errors"
+	"net/http"
+)
+
+// AlertMetadata holds context about the alert being sent.
+type AlertMetadata struct {
+	TxHash       string
+	AddressLabel string
+	AlertType    string
+	Address      string
+}
+
+type Notifier interface {
+	Send(ctx context.Context, message string, meta AlertMetadata) error
+}
+
+// PermanentError wraps errors that should not be retried (e.g. 401, 403, 404).
+type PermanentError struct{ Err error }
+
+func (e *PermanentError) Error() string { return e.Err.Error() }
+func (e *PermanentError) Unwrap() error { return e.Err }
+
+func IsPermanent(err error) bool {
+	var p *PermanentError
+	return errors.As(err, &p)
+}
+
+func isPermanentStatusCode(code int) bool {
+	return code == http.StatusUnauthorized ||
+		code == http.StatusForbidden ||
+		code == http.StatusNotFound ||
+		code == http.StatusMethodNotAllowed ||
+		code == http.StatusGone
+}

backend/internal/notifications/slack.go

@@ -87,8 +87,12 @@ func SendSlackNotification(webhookURL, message string, meta AlertMetadata) (bool
 	defer resp.Body.Close()
 
 	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		err := fmt.Errorf("slack webhook failed: HTTP %d", resp.StatusCode)
 		log.Printf("Slack webhook failed: HTTP %d", resp.StatusCode)
-		return false, fmt.Errorf("slack webhook failed: HTTP %d", resp.StatusCode)
+		if isPermanentStatusCode(resp.StatusCode) {
+			return false, &PermanentError{Err: err}
+		}
+		return false, err
 	}
 
 	return true, nil

backend/internal/notifications/telegram.go

@@ -63,8 +63,12 @@ func SendTelegramNotification(botToken, chatID, message string, meta AlertMetada
 	defer resp.Body.Close()
 
 	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		err := fmt.Errorf("telegram API failed: HTTP %d", resp.StatusCode)
 		log.Printf("Telegram API failed: HTTP %d", resp.StatusCode)
-		return false, fmt.Errorf("telegram API failed: HTTP %d", resp.StatusCode)
+		if isPermanentStatusCode(resp.StatusCode) {
+			return false, &PermanentError{Err: err}
+		}
+		return false, err
 	}
 
 	return true, nil

backend/internal/protocols/ethereum/jsonrpc.go

@@ -12,18 +12,20 @@ import (
 	"strings"
 	"time"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
 )
 
 const (
-	rpcTimeoutMS    = 30000
-	rpcMaxRetries   = 3
-	rpcRetryBaseMS  = 1000
+	rpcTimeoutMS      = 30000
+	rpcMaxRetries     = 3
+	rpcRetryBaseMS    = 2000
+	rpcMinIntervalMS  = 1000
 )
 
 type JsonRpcEthereum struct {
-	rpcURL string
-	client *http.Client
+	rpcURL     string
+	client     *http.Client
+	lastCallAt time.Time
 }
 
 func NewJsonRpcEthereum(rpcURL string) (*JsonRpcEthereum, error) {
@@ -58,6 +60,8 @@ type rpcError struct {
 }
 
 func (j *JsonRpcEthereum) callRPC(ctx context.Context, method string, params ...interface{}) (json.RawMessage, error) {
+	j.throttle(ctx)
+
 	if params == nil {
 		params = []interface{}{}
 	}
@@ -72,7 +76,25 @@ func (j *JsonRpcEthereum) callRPC(ctx context.Context, method string, params ...
 		return nil, fmt.Errorf("marshal RPC request: %w", err)
 	}
 
-	return j.callWithRetry(ctx, method, body)
+	result, callErr := j.callWithRetry(ctx, method, body)
+	j.lastCallAt = time.Now()
+
+	return result, callErr
+}
+
+func (j *JsonRpcEthereum) throttle(ctx context.Context) {
+	if j.lastCallAt.IsZero() {
+		return
+	}
+	minInterval := time.Duration(rpcMinIntervalMS) * time.Millisecond
+	elapsed := time.Since(j.lastCallAt)
+	if elapsed >= minInterval {
+		return
+	}
+	select {
+	case <-ctx.Done():
+	case <-time.After(minInterval - elapsed):
+	}
 }
 
 // callWithRetry executes a JSON-RPC POST with exponential backoff on transient errors.

backend/internal/protocols/ethereum/observer.go

@@ -3,7 +3,7 @@ package ethereum
 import (
 	"context"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
 )
 
 // EthereumObserver defines the interface for blockchain interaction.

backend/internal/services/email_digest.go

@@ -9,7 +9,7 @@ import (
 	"net/http"
 	"time"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
 const (
@@ -20,7 +20,7 @@ const (
 
 var digestHTTPClient = &http.Client{Timeout: emailHTTPTimeout} //nolint:gochecknoglobals
 
-// EmailDigestService handles email setup and digest sending via Resend.
+// handles email setup and digest sending via Resend.
 type EmailDigestService struct {
 	apiKey      string
 	fromAddress string
@@ -66,7 +66,6 @@ func (s *EmailDigestService) SetupEmail(toAddress string) error {
 	return s.send(toAddress, "Koin Ping — Email Alerts Configured", html)
 }
 
-// SendDigest compiles recent alert events for a user and sends a digest email.
 func (s *EmailDigestService) SendDigest(ctx context.Context, userID, toAddress string) error {
 	if !s.Configured() {
 		return fmt.Errorf("email service not configured: RESEND_API_KEY not set") //nolint:err113
@@ -131,8 +130,6 @@ func (s *EmailDigestService) SendDigest(ctx context.Context, userID, toAddress s
 	return s.send(toAddress, subject, html)
 }
 
-// SendDigestsForAllUsers sends a digest email to every user that has
-// notifications enabled and an email configured.
 func (s *EmailDigestService) SendDigestsForAllUsers(ctx context.Context) (int, error) {
 	if !s.Configured() {
 		return 0, nil

backend/internal/services/evaluator.go

@@ -4,19 +4,23 @@ import (
 	"context"
 	"fmt"
 	"log"
+	"sync"
 	"time"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/notifications"
-	"github.com/kjannette/koin-ping/backend-go/internal/protocols/ethereum"
-	"github.com/kjannette/koin-ping/backend-go/internal/wei"
+	"golang.org/x/sync/semaphore"
+
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/notifications"
+	"github.com/kjannette/koin-ping/backend/internal/protocols/ethereum"
+	"github.com/kjannette/koin-ping/backend/internal/wei"
 )
 
 const (
 	notificationTimeout    = 30 * time.Second
 	notificationMaxRetries = 3
 	notificationRetryBase  = time.Second
+	maxConcurrentNotifications = 5
 )
 
 type EvaluatorService struct {
@@ -27,6 +31,8 @@ type EvaluatorService struct {
 	notifConfigs *models.NotificationConfigModel
 	resendAPIKey string
 	emailFrom    string
+	notifSem     *semaphore.Weighted
+	notifWg      sync.WaitGroup
 }
 
 func NewEvaluatorService(
@@ -46,6 +52,7 @@ func NewEvaluatorService(
 		notifConfigs: notifConfigs,
 		resendAPIKey: resendAPIKey,
 		emailFrom:    emailFrom,
+		notifSem:     semaphore.NewWeighted(maxConcurrentNotifications),
 	}
 }
 
@@ -97,9 +104,9 @@ func (s *EvaluatorService) evaluateObservation(ctx context.Context, obs domain.O
 func (s *EvaluatorService) ruleMatches(ctx context.Context, rule domain.AlertRule, obs domain.ObservedTx) (bool, error) {
 	switch rule.Type {
 	case domain.AlertIncomingTx:
-		return obs.Direction == domain.DirectionIncoming, nil
+		return s.matchesDirectionalTx(rule, obs, domain.DirectionIncoming)
 	case domain.AlertOutgoingTx:
-		return obs.Direction == domain.DirectionOutgoing, nil
+		return s.matchesDirectionalTx(rule, obs, domain.DirectionOutgoing)
 	case domain.AlertLargeTransfer:
 		return s.matchesLargeTransfer(rule, obs)
 	case domain.AlertBalanceBelow:
@@ -110,6 +117,42 @@ func (s *EvaluatorService) ruleMatches(ctx context.Context, rule domain.AlertRul
 	}
 }
 
+func (s *EvaluatorService) matchesDirectionalTx(rule domain.AlertRule, obs domain.ObservedTx, expected domain.Direction) (bool, error) {
+	if obs.Direction != expected {
+		return false, nil
+	}
+
+	if rule.Minimum != nil {
+		minWei, err := wei.FromEth(*rule.Minimum)
+		if err != nil {
+			return false, err
+		}
+		aboveMin, err := wei.GreaterThanOrEqual(obs.Value, minWei)
+		if err != nil {
+			return false, err
+		}
+		if !aboveMin {
+			return false, nil
+		}
+	}
+
+	if rule.Maximum != nil {
+		maxWei, err := wei.FromEth(*rule.Maximum)
+		if err != nil {
+			return false, err
+		}
+		belowMax, err := wei.LessThanOrEqual(obs.Value, maxWei)
+		if err != nil {
+			return false, err
+		}
+		if !belowMax {
+			return false, nil
+		}
+	}
+
+	return true, nil
+}
+
 func (s *EvaluatorService) matchesLargeTransfer(rule domain.AlertRule, obs domain.ObservedTx) (bool, error) {
 	if rule.Threshold == nil {
 		return false, nil
@@ -189,7 +232,14 @@ func (s *EvaluatorService) fireAlert(ctx context.Context, rule domain.AlertRule,
 	if addr != nil {
 		userID := addr.UserID
 		address := addr.Address
+		if err := s.notifSem.Acquire(ctx, 1); err != nil {
+			log.Printf("Failed to acquire notification semaphore for rule %d: %v", rule.ID, err)
+			return nil
+		}
+		s.notifWg.Add(1)
 		go func() {
+			defer s.notifSem.Release(1)
+			defer s.notifWg.Done()
 			notifCtx, cancel := context.WithTimeout(context.Background(), notificationTimeout)
 			defer cancel()
 			s.sendNotification(notifCtx, userID, message, obs, addressLabel, rule, address)
@@ -199,6 +249,11 @@ func (s *EvaluatorService) fireAlert(ctx context.Context, rule domain.AlertRule,
 	return nil
 }
 
+// WaitForNotifications blocks until all in-flight notification goroutines finish.
+func (s *EvaluatorService) WaitForNotifications() {
+	s.notifWg.Wait()
+}
+
 func (s *EvaluatorService) buildNotifiers(cfg *domain.NotificationConfig) []notifications.Notifier {
 	var notifiers []notifications.Notifier
 
@@ -242,8 +297,14 @@ func sendWithRetry(ctx context.Context, n notifications.Notifier, message string
 		}
 
 		if err := n.Send(ctx, message, meta); err != nil {
-			log.Printf("Notification attempt %d/%d failed: %v", attempt+1, notificationMaxRetries, err)
 			lastErr = err
+
+			if notifications.IsPermanent(err) {
+				log.Printf("Permanent notification failure, skipping retries: %v", err)
+				return err
+			}
+
+			log.Printf("Notification attempt %d/%d failed: %v", attempt+1, notificationMaxRetries, err)
 			continue
 		}
 

backend/internal/services/observer.go

@@ -5,9 +5,9 @@ import (
 	"log"
 	"strings"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/protocols/ethereum"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/protocols/ethereum"
 )
 
 const maxBlocksPerRun = 100

backend/internal/wei/converter.go

@@ -90,6 +90,14 @@ func LessThan(weiA, weiB string) (bool, error) {
 	return cmp < 0, nil
 }
 
+func LessThanOrEqual(weiA, weiB string) (bool, error) {
+	cmp, err := Compare(weiA, weiB)
+	if err != nil {
+		return false, err
+	}
+	return cmp <= 0, nil
+}
+
 // FormatAsEth formats a Wei string as "X.XXXX ETH".
 func FormatAsEth(weiString string, decimals int) (string, error) {
 	eth, err := ToEth(weiString)

frontend/src/App.jsx

@@ -1,38 +1,40 @@
 import { Routes, Route, Navigate } from "react-router-dom";
 import { useAuth } from "./contexts/AuthContext";
 import Navbar from "./components/Navbar";
-import Login from "./pages/Login";
+import Login from "./pages/login/Login";
 import Signup from "./pages/Signup";
-import Onboarding from "./pages/Onboarding";
-import Addresses from "./pages/Addresses";
-import Alerts from "./pages/Alerts";
-import AlertHistory from "./pages/AlertHistory";
+import Subscribe from "./pages/subscribe/Subscribe";
+import Addresses from "./pages/addresses/Addresses";
+import Alerts from "./pages/alerts/Alerts";
+import AlertHistory from "./pages/alertHistory/AlertHistory";
+import Account from "./pages/user_account/Account";
 
 export default function App() {
-    const { currentUser } = useAuth();
-
-    if (!currentUser) {
-        return (
-            <Routes>
-                <Route path="/login" element={<Login />} />
-                <Route path="/signup" element={<Signup />} />
-                <Route path="/onboarding" element={<Onboarding />} />
-                <Route path="*" element={<Navigate to="/login" />} />
-            </Routes>
-        );
-    }
+  const { currentUser } = useAuth();
 
+  if (!currentUser) {
     return (
-        <div>
-            <Navbar />
-            <Routes>
-                <Route path="/" element={<Addresses />} />
-                <Route path="/addresses" element={<Addresses />} />
-                <Route path="/alerts" element={<Alerts />} />
-                <Route path="/alertevents" element={<AlertHistory />} />
-                <Route path="/onboarding" element={<Onboarding />} />
-                <Route path="*" element={<Navigate to="/addresses" />} />
-            </Routes>
-        </div>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/subscribe" element={<Subscribe />} />
+        <Route path="*" element={<Navigate to="/login" />} />
+      </Routes>
     );
+  }
+
+  return (
+    <div>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<Addresses />} />
+        <Route path="/addresses" element={<Addresses />} />
+        <Route path="/alerts" element={<Alerts />} />
+        <Route path="/alertevents" element={<AlertHistory />} />
+        <Route path="/account" element={<Account />} />
+        <Route path="/subscribe" element={<Subscribe />} />
+        <Route path="*" element={<Navigate to="/addresses" />} />
+      </Routes>
+    </div>
+  );
 }

frontend/src/api/account.js

@@ -0,0 +1,25 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+export async function getAccount() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/user/account`, { headers });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to load account");
+    }
+    return res.json();
+}
+
+export async function createPortalSession() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/create-portal-session`, {
+        method: "POST",
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create portal session");
+    }
+    return res.json();
+}

frontend/src/api/alerts.jsx

@@ -129,6 +129,48 @@ export async function updateAlertStatus(alertId, enabled) {
     }
 }
 
+/**
+ * Update the min/max thresholds on an alert rule
+ * @param {number} alertId - Alert rule ID
+ * @param {number|null} minimum - Minimum amount (null to clear)
+ * @param {number|null} maximum - Maximum amount (null to clear)
+ * @returns {Promise<Object>} Updated alert rule
+ */
+export async function updateAlertThresholds(alertId, minimum, maximum) {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
+            method: "PATCH",
+            headers: headers,
+            body: JSON.stringify({
+                update_min_max: true,
+                minimum: minimum ?? null,
+                maximum: maximum ?? null,
+            }),
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to update alert thresholds";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
 /**
  * Delete an alert rule
  * @param {number} alertId - Alert rule ID

frontend/src/api/stripe.jsx

@@ -0,0 +1,41 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+export async function createCheckoutSession() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/create-checkout-session`, {
+        method: "POST",
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create checkout session");
+    }
+    return res.json();
+}
+
+export async function verifyCheckoutSession(sessionId) {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/verify-checkout`, {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify({ session_id: sessionId }),
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to verify checkout session");
+    }
+    return res.json();
+}
+
+export async function getSubscriptionStatus() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/subscription-status`, {
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to get subscription status");
+    }
+    return res.json();
+}

frontend/src/components/AddressForm.jsx

@@ -37,7 +37,7 @@ export default function AddressForm({ onSubmit }) {
                 placeholder="Treasury, Cold Wallet, etc."
             />
 
-            <Button type="submit" disabled={!canSubmit}>
+            <Button type="submit" disabled={!canSubmit} className="mt-md">
                 Add Address
             </Button>
         </form>

frontend/src/components/AlertForm.css

@@ -0,0 +1,7 @@
+.alert-form__options {
+  margin-bottom: 1rem;
+}
+
+.alert-form__radio {
+  display: block;
+}

frontend/src/components/AlertForm.jsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Input from "./Input";
 import Button from "./Button";
+import "./AlertForm.css";
 
 const ALERT_TYPES = [
     { value: "incoming_tx", label: "Incoming transaction" },
@@ -36,9 +37,9 @@ export default function AlertForm({ onSubmit }) {
 
     return (
         <form onSubmit={handleSubmit}>
-            <div style={{ marginBottom: "1rem" }}>
+            <div className="alert-form__options">
                 {ALERT_TYPES.map((opt) => (
-                    <label key={opt.value} style={{ display: "block" }}>
+                    <label key={opt.value} className="alert-form__radio">
                         <input
                             type="radio"
                             name="alertType"

frontend/src/components/Button.css

@@ -0,0 +1,14 @@
+.btn {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-text);
+  transition: opacity 0.15s ease;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

frontend/src/components/Button.jsx

@@ -1,20 +1,19 @@
+import "./Button.css";
+
 export default function Button({
     children,
     onClick,
     disabled = false,
     type = "button",
+    variant = "primary",
+    className = "",
 }) {
     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,
-            }}
+            className={`btn btn--${variant} ${className}`}
         >
             {children}
         </button>

frontend/src/components/Input.css

@@ -0,0 +1,21 @@
+.input__label {
+  display: block;
+  margin: 0.8rem 0rem 0.4rem 0rem;
+  font-size: 0.9rem;
+}
+
+.input__control {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+}
+
+.input__control:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}

frontend/src/components/Input.jsx

@@ -1,3 +1,5 @@
+import "./Input.css";
+
 export default function Input({
     label,
     type = "text",
@@ -7,12 +9,12 @@ export default function Input({
     step,
     min,
     disabled = false,
+    required = false,
+    className = "",
 }) {
     return (
-        <label style={{ display: "block", marginBottom: "1rem" }}>
-            <div style={{ marginBottom: "0.25rem", fontSize: "0.9rem" }}>
-                {label}
-            </div>
+        <label className={`form-field ${className}`}>
+            <div className="input__label">{label}</div>
             <input
                 type={type}
                 value={value}
@@ -20,12 +22,9 @@ export default function Input({
                 step={step}
                 min={min}
                 disabled={disabled}
+                required={required}
                 onChange={(e) => onChange(e.target.value)}
-                style={{
-                    width: "100%",
-                    padding: "0.5rem",
-                    fontSize: "1rem",
-                }}
+                className="input__control"
             />
         </label>
     );

frontend/src/components/Navbar.css

@@ -0,0 +1,167 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  margin-bottom: 1.5rem;
+  background-color: var(--color-bg);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+/* ── Left Group: Brand + Links ───────────────────────────── */
+
+.navbar__left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.navbar__brand-group {
+  display: flex;
+  align-items: center;
+}
+
+.navbar__brand {
+  font-weight: 700;
+  font-size: 1.4rem;
+  color: var(--color-brand);
+  margin-right: 2rem;
+  letter-spacing: 0.5px;
+}
+
+.navbar__links {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.navbar__link {
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  font-size: 1.425rem;
+  font-weight: 200;
+  color: var(--color-text-subtle);
+  background-color: transparent;
+  transition: all 0.15s ease;
+}
+
+.navbar__link--active {
+  font-weight: 600;
+  color: var(--color-text);
+  background-color: var(--color-bg-card);
+}
+
+/* ── Right Group: Email + Logout + Hamburger ─────────────── */
+
+.navbar__right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.navbar__user {
+  font-size: 1.275rem;
+  color: #777;
+}
+
+.navbar__user-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.navbar__user-link:hover {
+  color: var(--color-primary-hover);
+}
+
+.navbar__user-link--mobile {
+  display: none;
+}
+
+.navbar__logout {
+  padding: 0.4rem 1rem;
+  font-size: 1.275rem;
+  font-weight: 400;
+  background-color: transparent;
+  color: var(--color-text-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+/* ── Hamburger Icon (hidden on desktop) ──────────────────── */
+
+.navbar__hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.navbar__hamburger-bar {
+  display: block;
+  width: 28px;
+  height: 3px;
+  background-color: var(--color-brand);
+  border-radius: 2px;
+}
+
+/* ── Responsive: Tablet & below (≤ 768px) ────────────────── */
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0.75rem 1rem;
+  }
+
+  .navbar__brand-group {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .navbar__brand {
+    margin-right: 0;
+    font-size: 1.25rem;
+  }
+
+  .navbar__links {
+    display: none;
+  }
+
+  .navbar__user-link--mobile {
+    display: block;
+    font-size: 0.95rem;
+  }
+
+  .navbar__user-link--desktop {
+    display: none;
+  }
+
+  .navbar__logout {
+    display: none;
+  }
+
+  .navbar__hamburger {
+    display: flex;
+  }
+}
+
+/* ── Responsive: Mobile (≤ 480px) ────────────────────────── */
+
+@media (max-width: 480px) {
+  .navbar {
+    padding: 0.75rem;
+  }
+
+  .navbar__brand {
+    font-size: 1.15rem;
+  }
+
+  .navbar__user-link--mobile {
+    font-size: 0.85rem;
+  }
+}

frontend/src/components/Navbar.jsx

@@ -1,85 +1,71 @@
+import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import NavPanel from "./navPanel/NavPanel";
+import "./Navbar.css";
 
 const navLinks = [
   { to: "/addresses", label: "Addresses" },
   { to: "/alerts", label: "Configure Alerts" },
-  { to: "/alertevents", label: "Alert Events" },
+  { to: "/alertevents", label: "Alert Event History" },
 ];
 
 export default function Navbar() {
   const { currentUser, logout } = useAuth();
   const location = useLocation();
+  const [isNavPanelOpen, setIsNavPanelOpen] = useState(false);
 
   if (!currentUser) return null;
 
   return (
-    <nav style={{
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      padding: "1rem 2rem",
-      marginBottom: "1.5rem",
-      backgroundColor: "#1a1a1a",
-      borderBottom: "1px solid #333",
-    }}>
-      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-        <span style={{
-          fontWeight: 700,
-          fontSize: "1.1rem",
-          color: "#fff",
-          marginRight: "2rem",
-          letterSpacing: "0.5px",
-        }}>
-          Koin Ping
-        </span>
-
-        <div style={{ display: "flex", gap: "0.25rem" }}>
-          {navLinks.map(({ to, label }) => {
-            const isActive = location.pathname === to;
-            return (
-              <Link
-                key={to}
-                to={to}
-                style={{
-                  padding: "0.5rem 1.25rem",
-                  borderRadius: "6px",
-                  textDecoration: "none",
-                  fontSize: "1.425rem",
-                  fontWeight: isActive ? 600 : 200,
-                  color: isActive ? "#fff" : "#999",
-                  backgroundColor: isActive ? "#333" : "transparent",
-                  transition: "all 0.15s ease",
-                }}
-              >
-                {label}
-              </Link>
-            );
-          })}
+    <>
+      <nav className="navbar">
+        <div className="navbar__left">
+          <div className="navbar__brand-group">
+            <span className="navbar__brand">Koin Ping</span>
+            <Link to="/account" className="navbar__user-link navbar__user-link--mobile">
+              {currentUser.email}
+            </Link>
+          </div>
+          <div className="navbar__links">
+            {navLinks.map(({ to, label }) => {
+              const isActive = location.pathname === to;
+              return (
+                <Link
+                  key={to}
+                  to={to}
+                  className={`navbar__link ${isActive ? "navbar__link--active" : ""}`}
+                >
+                  {label}
+                </Link>
+              );
+            })}
+          </div>
         </div>
-      </div>
 
-      <div style={{ display: "flex", alignItems: "center", gap: "1.25rem" }}>
-        <span style={{ fontSize: "1.275rem", color: "#777" }}>
-          {currentUser.email}
-        </span>
-        <button
-          onClick={logout}
-          style={{
-            padding: "0.4rem 1rem",
-            fontSize: "1.275rem",
-            fontWeight: 400,
-            backgroundColor: "transparent",
-            color: "#999",
-            border: "1px solid #444",
-            borderRadius: "6px",
-            cursor: "pointer",
-            transition: "all 0.15s ease",
-          }}
-        >
-          Logout
-        </button>
-      </div>
-    </nav>
+        <div className="navbar__right">
+          <Link to="/account" className="navbar__user navbar__user-link navbar__user-link--desktop">
+            {currentUser.email}
+          </Link>
+          <button onClick={logout} className="navbar__logout">
+            Logout
+          </button>
+          <button
+            className="navbar__hamburger"
+            onClick={() => setIsNavPanelOpen(true)}
+            aria-label="Open navigation menu"
+          >
+            <span className="navbar__hamburger-bar" />
+            <span className="navbar__hamburger-bar" />
+            <span className="navbar__hamburger-bar" />
+          </button>
+        </div>
+      </nav>
+
+      <NavPanel
+        isOpen={isNavPanelOpen}
+        onClose={() => setIsNavPanelOpen(false)}
+      />
+    </>
   );
 }

frontend/src/components/navPanel/NavPanel.css

@@ -0,0 +1,78 @@
+/* ── Overlay Backdrop ─────────────────────────────────────── */
+
+.nav-panel__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 900;
+}
+
+.nav-panel__overlay--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ── Slide-out Panel ─────────────────────────────────────── */
+
+.nav-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 260px;
+  height: 100%;
+  background-color: var(--color-bg-elevated);
+  border-right: 1px solid var(--color-border);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+  z-index: 950;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 0;
+}
+
+.nav-panel--open {
+  transform: translateX(0);
+}
+
+/* ── Nav Links ───────────────────────────────────────────── */
+
+.nav-panel__nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.nav-panel__link {
+  padding: 0.9rem 1.5rem;
+  text-decoration: none;
+  font-size: 1.3rem;
+  font-weight: 200;
+  color: var(--color-text-subtle);
+  border-left: 3px solid transparent;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.nav-panel__link--active {
+  font-weight: 600;
+  color: var(--color-text);
+  background-color: var(--color-bg-card);
+  border-left-color: var(--color-brand);
+}
+
+/* ── Logout Button ───────────────────────────────────────── */
+
+.nav-panel__logout {
+  margin: 1rem 1.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 1.15rem;
+  font-weight: 400;
+  background-color: transparent;
+  color: var(--color-text-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}

frontend/src/components/navPanel/NavPanel.jsx

@@ -0,0 +1,52 @@
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "../../contexts/AuthContext";
+import "./NavPanel.css";
+
+const navLinks = [
+  { to: "/addresses", label: "Addresses" },
+  { to: "/alerts", label: "Configure Alerts" },
+  { to: "/alertevents", label: "Alert Event History" },
+];
+
+export default function NavPanel({ isOpen, onClose }) {
+  const { logout } = useAuth();
+  const location = useLocation();
+
+  const handleNavClick = () => {
+    onClose();
+  };
+
+  const handleLogout = () => {
+    onClose();
+    logout();
+  };
+
+  return (
+    <>
+      <div
+        className={`nav-panel__overlay${isOpen ? " nav-panel__overlay--visible" : ""}`}
+        onClick={onClose}
+      />
+      <aside className={`nav-panel${isOpen ? " nav-panel--open" : ""}`}>
+        <nav className="nav-panel__nav">
+          {navLinks.map(({ to, label }) => {
+            const isActive = location.pathname === to;
+            return (
+              <Link
+                key={to}
+                to={to}
+                className={`nav-panel__link${isActive ? " nav-panel__link--active" : ""}`}
+                onClick={handleNavClick}
+              >
+                {label}
+              </Link>
+            );
+          })}
+        </nav>
+        <button onClick={handleLogout} className="nav-panel__logout">
+          Logout
+        </button>
+      </aside>
+    </>
+  );
+}

frontend/src/index.css

@@ -1,5 +1,43 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
 
+:root {
+  --color-primary: #0066cc;
+  --color-primary-hover: #0077ee;
+  --color-brand: #e62525;
+  --color-success: #28a745;
+  --color-success-text: #00ff00;
+  --color-success-bg: #00ff0020;
+  --color-success-border: #00ff00;
+  --color-error: #ff6666;
+  --color-error-bg: #ff000020;
+  --color-error-border: #ff0000;
+  --color-warning: #ffcc44;
+  --color-warning-bg: #3a2e00;
+  --color-warning-border: #aa7700;
+  --color-danger: #cc6666;
+  --color-danger-border: #884444;
+
+  --color-bg: #1a1a1a;
+  --color-bg-elevated: #242424;
+  --color-bg-card: #333;
+  --color-bg-section: #2a2a2a;
+
+  --color-border: #444;
+  --color-border-light: #333;
+  --color-border-section: #3a3a3a;
+
+  --color-text: white;
+  --color-text-muted: #b3b3b3;
+  --color-text-dimmed: #808080;
+  --color-text-subtle: #999;
+  --color-text-label: #ccc;
+
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+}
+
 *,
 *::before,
 *::after {
@@ -21,13 +59,370 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: 'Nunito', sans-serif;
   font-weight: 200;
 }
 
-input, select, textarea, button {
+input,
+select,
+textarea,
+button {
   font-family: 'Nunito', sans-serif;
   font-size: 1rem;
   font-weight: 200;
 }
+
+/* ── Page Layouts ─────────────────────────────────────────── */
+
+.page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.page--wide {
+  max-width: 1400px;
+}
+
+/* ── Cards & Sections ─────────────────────────────────────── */
+
+.card {
+  padding: 1rem;
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.section {
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: var(--color-bg-section);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-section);
+}
+
+/* ── Form Controls ────────────────────────────────────────── */
+
+.form-field {
+  margin-bottom: 1.25rem;
+}
+
+.form-field--last {
+  margin-bottom: 1.75rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.9rem;
+  color: var(--color-text-label);
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}
+
+.form-control--mono {
+  font-family: monospace;
+}
+
+.form-select {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+}
+
+/* ── Buttons ──────────────────────────────────────────────── */
+
+.btn {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-text);
+  transition: opacity 0.15s ease;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn--primary {
+  background-color: var(--color-primary);
+}
+
+.btn--success {
+  background-color: var(--color-success);
+}
+
+.btn--secondary {
+  background-color: #6c757d;
+}
+
+.btn--danger {
+  background-color: transparent;
+  border: 1px solid var(--color-danger-border);
+  color: var(--color-danger);
+}
+
+.btn--ghost {
+  background-color: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-subtle);
+}
+
+.btn--sm {
+  padding: 0.25rem 0.6rem;
+  font-size: 0.85rem;
+}
+
+.btn--lg {
+  padding: 0.75rem 1.5rem;
+}
+
+/* ── Feedback Alerts ──────────────────────────────────────── */
+
+.alert {
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  border-radius: var(--radius-md);
+}
+
+.alert--error {
+  background-color: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
+  color: var(--color-error);
+}
+
+.alert--success {
+  background-color: var(--color-success-bg);
+  border: 1px solid var(--color-success-border);
+  color: var(--color-success-text);
+}
+
+.alert--warning {
+  background-color: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
+  color: var(--color-warning);
+}
+
+/* ── Lists ────────────────────────────────────────────────── */
+
+.list-unstyled {
+  list-style: none;
+  padding: 0;
+}
+
+.list-item--card {
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-card);
+}
+
+/* ── Typography Helpers ───────────────────────────────────── */
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+.text-dimmed {
+  color: var(--color-text-dimmed);
+}
+
+.text-mono {
+  font-family: monospace;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-error {
+  color: red;
+}
+
+.text-sm {
+  font-size: 1.035rem;
+}
+
+.text-xs {
+  font-size: 0.978rem;
+}
+
+.help-link {
+  color: var(--color-primary);
+  font-size: 0.85rem;
+}
+
+/* ── Flex Utilities ───────────────────────────────────────── */
+
+.flex {
+  display: flex;
+}
+
+.flex--between {
+  justify-content: space-between;
+}
+
+.flex--center {
+  align-items: center;
+}
+
+.flex--column {
+  flex-direction: column;
+}
+
+.flex--wrap {
+  flex-wrap: wrap;
+}
+
+.gap-xs {
+  gap: 0.25rem;
+}
+
+.gap-sm {
+  gap: 0.5rem;
+}
+
+.gap-md {
+  gap: 0.75rem;
+}
+
+.gap-lg {
+  gap: 1rem;
+}
+
+/* ── Spacing Helpers ──────────────────────────────────────── */
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-sm {
+  margin-bottom: 0.5rem;
+}
+
+.mb-md {
+  margin-bottom: 1rem;
+}
+
+.mb-lg {
+  margin-bottom: 1.5rem;
+}
+
+.mb-xl {
+  margin-bottom: 2rem;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-md {
+  margin-top: 1rem;
+}
+
+.text-white {
+  color: white;
+}
+
+.text-white-sm {
+  color: white;
+  font-size: 0.85rem;
+}
+
+/* ── Responsive Breakpoints ──────────────────────────────── */
+/* Mobile:  <= 480px                                          */
+/* Tablet:  481px – 768px                                     */
+/* Laptop:  769px – 1024px                                    */
+/* Desktop: >= 1025px (default styles above)                  */
+
+/* Laptop & below */
+@media (max-width: 1024px) {
+  .page--wide {
+    max-width: 100%;
+  }
+}
+
+/* Tablet & below */
+@media (max-width: 768px) {
+  html {
+    font-size: 13px;
+  }
+
+  .page {
+    padding: 1.25rem;
+  }
+
+  .btn--lg {
+    padding: 0.6rem 1.2rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  h3 {
+    font-size: 1.15rem;
+  }
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  html {
+    font-size: 12px;
+  }
+
+  .page {
+    padding: 1rem 0.75rem;
+  }
+
+  .form-control,
+  .form-select {
+    font-size: 0.95rem;
+  }
+
+  .btn {
+    padding: 0.45rem 0.85rem;
+    font-size: 0.95rem;
+  }
+
+  .btn--lg {
+    padding: 0.55rem 1rem;
+    font-size: 1rem;
+  }
+
+  .section {
+    padding: 0.75rem;
+  }
+}

frontend/src/pages/Addresses.jsx

@@ -1,200 +0,0 @@
-import { useState, useEffect } from "react";
-import AddressForm from "../components/AddressForm";
-import { getAddresses, createAddress, deleteAddress, updateAddress } from "../api/addresses";
-
-export default function Addresses() {
-    const [addresses, setAddresses] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [editingId, setEditingId] = useState(null);
-    const [editLabel, setEditLabel] = useState("");
-
-    // Load addresses on mount
-    useEffect(() => {
-        async function fetchAddresses() {
-            try {
-                setLoading(true);
-                const data = await getAddresses();
-                setAddresses(data);
-            } catch (err) {
-                setError(err.message);
-                console.error("Failed to fetch addresses:", err);
-            } finally {
-                setLoading(false);
-            }
-        }
-
-        fetchAddresses();
-    }, []);
-
-    // Handle new address submission
-    async function handleAddressSubmit(data) {
-        try {
-            const newAddress = await createAddress(data);
-            setAddresses((prev) => [...prev, newAddress]);
-            setError(null);
-        } catch (err) {
-            setError(err.message);
-            console.error("Failed to create address:", err);
-        }
-    }
-
-    async function handleDelete(id, label) {
-        const displayName = label || "this address";
-        if (!window.confirm(`Remove "${displayName}"? This will also delete all associated alert rules.`)) {
-            return;
-        }
-        try {
-            await deleteAddress(id);
-            setAddresses((prev) => prev.filter((a) => a.id !== id));
-            setError(null);
-        } catch (err) {
-            setError(err.message);
-            console.error("Failed to delete address:", err);
-        }
-    }
-
-    function handleEditStart(addr) {
-        setEditingId(addr.id);
-        setEditLabel(addr.label ?? "");
-    }
-
-    async function handleEditSave(id) {
-        try {
-            const updated = await updateAddress(id, { label: editLabel || null });
-            setAddresses((prev) => prev.map((a) => (a.id === id ? updated : a)));
-            setEditingId(null);
-            setEditLabel("");
-            setError(null);
-        } catch (err) {
-            setError(err.message);
-            console.error("Failed to update address:", err);
-        }
-    }
-
-    function handleEditCancel() {
-        setEditingId(null);
-        setEditLabel("");
-    }
-
-    return (
-        <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
-            <h1>Tracked Addresses</h1>
-
-            <div style={{ marginBottom: "2rem" }}>
-                <AddressForm onSubmit={handleAddressSubmit} />
-            </div>
-
-            <div>
-                <h2>Existing Addresses</h2>
-                {loading && <p>Loading addresses...</p>}
-                {error && <p style={{ color: "red" }}>Error: {error}</p>}
-                {!loading && !error && addresses.length === 0 && (
-                    <p style={{ color: "#808080" }}>
-                        No addresses tracked yet. Add one above to get started.
-                    </p>
-                )}
-                {addresses.length > 0 && (
-                    <ul style={{ listStyle: "none", padding: 0 }}>
-                        {addresses.map((addr, index) => (
-                            <li
-                                key={addr.id || index}
-                                style={{
-                                    padding: "1rem",
-                                    marginBottom: "0.5rem",
-                                    border: "1px solid #444",
-                                    borderRadius: "4px",
-                                    backgroundColor: "#333",
-                                }}
-                            >
-                                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                                    <div style={{ flex: 1 }}>
-                                        {editingId === addr.id ? (
-                                            <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", marginBottom: "0.25rem" }}>
-                                                <input
-                                                    value={editLabel}
-                                                    onChange={(e) => setEditLabel(e.target.value)}
-                                                    placeholder="Label (optional)"
-                                                    style={{
-                                                        background: "#444",
-                                                        border: "1px solid #666",
-                                                        borderRadius: "3px",
-                                                        color: "#fff",
-                                                        padding: "0.25rem 0.5rem",
-                                                        fontSize: "0.9rem",
-                                                    }}
-                                                    onKeyDown={(e) => {
-                                                        if (e.key === "Enter") handleEditSave(addr.id);
-                                                        if (e.key === "Escape") handleEditCancel();
-                                                    }}
-                                                    autoFocus
-                                                />
-                                                <button
-                                                    onClick={() => handleEditSave(addr.id)}
-                                                    style={{ cursor: "pointer", padding: "0.25rem 0.6rem", fontSize: "0.85rem" }}
-                                                >
-                                                    Save
-                                                </button>
-                                                <button
-                                                    onClick={handleEditCancel}
-                                                    style={{ cursor: "pointer", padding: "0.25rem 0.6rem", fontSize: "0.85rem", background: "transparent", color: "#aaa", border: "1px solid #555" }}
-                                                >
-                                                    Cancel
-                                                </button>
-                                            </div>
-                                        ) : (
-                                            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.25rem" }}>
-                                                <span style={{ fontWeight: "bold" }}>
-                                                    {addr.label || "Unlabeled"}
-                                                </span>
-                                                <button
-                                                    onClick={() => handleEditStart(addr)}
-                                                    style={{
-                                                        cursor: "pointer",
-                                                        background: "transparent",
-                                                        border: "none",
-                                                        color: "#6699cc",
-                                                        fontSize: "0.8rem",
-                                                        padding: "0",
-                                                        textDecoration: "underline",
-                                                    }}
-                                                >
-                                                    Edit
-                                                </button>
-                                            </div>
-                                        )}
-                                        <div
-                                            style={{
-                                                fontFamily: "monospace",
-                                                fontSize: "1.035rem",
-                                                color: "#b3b3b3",
-                                            }}
-                                        >
-                                            {addr.address}
-                                        </div>
-                                    </div>
-                                    <button
-                                        onClick={() => handleDelete(addr.id, addr.label)}
-                                        style={{
-                                            cursor: "pointer",
-                                            background: "transparent",
-                                            border: "1px solid #884444",
-                                            color: "#cc6666",
-                                            borderRadius: "3px",
-                                            padding: "0.3rem 0.7rem",
-                                            fontSize: "0.85rem",
-                                            marginLeft: "1rem",
-                                            flexShrink: 0,
-                                        }}
-                                    >
-                                        Remove
-                                    </button>
-                                </div>
-                            </li>
-                        ))}
-                    </ul>
-                )}
-            </div>
-        </div>
-    );
-}

frontend/src/pages/AlertHistory.jsx

@@ -1,85 +0,0 @@
-import { useState, useEffect } from "react";
-import { getAlertEvents } from "../api/alertEvents";
-
-export default function AlertHistory() {
-    const [alertEvents, setAlertEvents] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-
-    // Fetch alert events on mount
-    useEffect(() => {
-        async function fetchAlertEvents() {
-            try {
-                setLoading(true);
-                const data = await getAlertEvents();
-                setAlertEvents(data);
-            } catch (err) {
-                setError(err.message);
-                console.error("Failed to fetch alert events:", err);
-            } finally {
-                setLoading(false);
-            }
-        }
-
-        fetchAlertEvents();
-    }, []);
-
-    if (loading) {
-        return <div style={{ padding: "2rem" }}>Loading...</div>;
-    }
-
-    if (error) {
-        return (
-            <div style={{ padding: "2rem", color: "red" }}>Error: {error}</div>
-        );
-    }
-
-    return (
-        <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
-            <h1>Recent Alert Events</h1>
-
-            {alertEvents.length === 0 ? (
-                <p style={{ color: "#808080" }}>No alerts yet</p>
-            ) : (
-                <ul style={{ listStyle: "none", padding: 0 }}>
-                    {alertEvents.map((event) => (
-                        <li
-                            key={event.id}
-                            style={{
-                                padding: "1rem",
-                                marginBottom: "0.75rem",
-                                border: "1px solid #444",
-                                borderRadius: "4px",
-                                backgroundColor: "#333",
-                            }}
-                        >
-                            <div style={{ marginBottom: "0.5rem" }}>
-                                {event.message}
-                            </div>
-                            {event.address_label && (
-                                <div
-                                    style={{
-                                    fontSize: "1.035rem",
-                                    color: "#808080",
-                                        marginBottom: "0.25rem",
-                                    }}
-                                >
-                                    Address: {event.address_label}
-                                </div>
-                            )}
-                            <small style={{ color: "#b3b3b3" }}>
-                                {formatTimestamp(event.timestamp)}
-                            </small>
-                        </li>
-                    ))}
-                </ul>
-            )}
-        </div>
-    );
-}
-
-// Helper to format timestamp for display
-function formatTimestamp(timestamp) {
-    const date = new Date(timestamp);
-    return date.toLocaleString();
-}

frontend/src/pages/Alerts.jsx

@@ -1,842 +0,0 @@
-import { useState, useEffect } from "react";
-import AlertForm from "../components/AlertForm";
-import Button from "../components/Button";
-import { getAddresses } from "../api/addresses";
-import {
-    getAlerts,
-    createAlert,
-    updateAlertStatus,
-    deleteAlert,
-} from "../api/alerts";
-import {
-    getNotificationConfig,
-    updateNotificationConfig,
-    testNotificationChannels,
-    setupEmail,
-    sendEmailDigest,
-} from "../api/notificationConfig";
-
-const inputStyle = {
-    width: "100%",
-    padding: "0.5rem",
-    fontSize: "0.9rem",
-    backgroundColor: "#1a1a1a",
-    border: "1px solid #444",
-    borderRadius: "4px",
-    color: "white",
-    fontFamily: "monospace",
-    boxSizing: "border-box",
-};
-
-const labelStyle = {
-    display: "block",
-    marginBottom: "0.25rem",
-    fontSize: "0.9rem",
-    color: "#ccc",
-};
-
-const helpLinkStyle = { color: "#0066cc", fontSize: "0.85rem" };
-
-const sectionStyle = {
-    marginBottom: "1.5rem",
-    padding: "1rem",
-    backgroundColor: "#2a2a2a",
-    borderRadius: "6px",
-    border: "1px solid #3a3a3a",
-};
-
-export default function Alerts() {
-    const [addresses, setAddresses] = useState([]);
-    const [selectedAddressId, setSelectedAddressId] = useState(null);
-    const [alerts, setAlerts] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-
-    // Notification config state
-    const [notificationEnabled, setNotificationEnabled] = useState(false);
-    const [discordWebhookUrl, setDiscordWebhookUrl] = useState("");
-    const [telegramBotToken, setTelegramBotToken] = useState("");
-    const [telegramChatId, setTelegramChatId] = useState("");
-    const [email, setEmail] = useState("");
-    const [slackWebhookUrl, setSlackWebhookUrl] = useState("");
-    const [notificationLoading, setNotificationLoading] = useState(false);
-    const [notificationError, setNotificationError] = useState(null);
-    const [notificationSuccess, setNotificationSuccess] = useState(null);
-    const [testingChannels, setTestingChannels] = useState(false);
-    const [settingUpEmail, setSettingUpEmail] = useState(false);
-    const [sendingDigest, setSendingDigest] = useState(false);
-    const [hasExistingConfig, setHasExistingConfig] = useState(false);
-
-    useEffect(() => {
-        async function fetchData() {
-            try {
-                setLoading(true);
-
-                const addressData = await getAddresses();
-                setAddresses(addressData);
-                if (addressData.length > 0) {
-                    setSelectedAddressId(addressData[0].id);
-                }
-
-                const configData = await getNotificationConfig();
-                setNotificationEnabled(
-                    configData.notification_enabled !== false,
-                );
-                setDiscordWebhookUrl(configData.discord_webhook_url || "");
-                setTelegramBotToken(configData.telegram_bot_token || "");
-                setTelegramChatId(configData.telegram_chat_id || "");
-                setEmail(configData.email || "");
-                setSlackWebhookUrl(configData.slack_webhook_url || "");
-
-                const hasSaved =
-                    !!configData.discord_webhook_url ||
-                    !!configData.telegram_bot_token ||
-                    !!configData.telegram_chat_id ||
-                    !!configData.email ||
-                    !!configData.slack_webhook_url;
-                setHasExistingConfig(hasSaved);
-            } catch (err) {
-                setError(err.message);
-                console.error("Failed to fetch data:", err);
-            } finally {
-                setLoading(false);
-            }
-        }
-
-        fetchData();
-    }, []);
-
-    useEffect(() => {
-        if (!selectedAddressId) {
-            setAlerts([]);
-            return;
-        }
-
-        async function fetchAlerts() {
-            try {
-                const data = await getAlerts(selectedAddressId);
-                setAlerts(data);
-                setError(null);
-            } catch (err) {
-                setError(err.message);
-                console.error("Failed to fetch alerts:", err);
-            }
-        }
-
-        fetchAlerts();
-    }, [selectedAddressId]);
-
-    async function handleAlertSubmit(data) {
-        if (!selectedAddressId) return;
-
-        try {
-            const newAlert = await createAlert(selectedAddressId, data);
-            setAlerts((prev) => [...prev, newAlert]);
-            setError(null);
-        } catch (err) {
-            setError(err.message);
-            console.error("Failed to create alert:", err);
-        }
-    }
-
-    async function handleToggleAlert(alertId, currentStatus) {
-        try {
-            const updated = await updateAlertStatus(alertId, !currentStatus);
-            setAlerts((prev) =>
-                prev.map((alert) => (alert.id === alertId ? updated : alert)),
-            );
-            setError(null);
-        } catch (err) {
-            setError(err.message);
-            console.error("Failed to update alert:", err);
-        }
-    }
-
-    async function handleDeleteAlert(alertId) {
-        try {
-            await deleteAlert(alertId);
-            setAlerts((prev) => prev.filter((alert) => alert.id !== alertId));
-            setError(null);
-        } catch (err) {
-            setError(err.message);
-            console.error("Failed to delete alert:", err);
-        }
-    }
-
-    async function handleSaveNotificationConfig() {
-        if (hasExistingConfig) {
-            const confirmed = window.confirm(
-                "This will overwrite your previously saved notification settings. Continue?",
-            );
-            if (!confirmed) return;
-        }
-
-        try {
-            setNotificationLoading(true);
-            setNotificationError(null);
-            setNotificationSuccess(null);
-
-            const config = {
-                notification_enabled: notificationEnabled,
-                discord_webhook_url: discordWebhookUrl || null,
-                telegram_bot_token: telegramBotToken || null,
-                telegram_chat_id: telegramChatId || null,
-                email: email || null,
-                slack_webhook_url: slackWebhookUrl || null,
-            };
-
-            await updateNotificationConfig(config);
-            setHasExistingConfig(true);
-            setNotificationSuccess("Notification settings saved!");
-            setTimeout(() => setNotificationSuccess(null), 3000);
-        } catch (err) {
-            setNotificationError(err.message);
-            console.error("Failed to save notification config:", err);
-        } finally {
-            setNotificationLoading(false);
-        }
-    }
-
-    async function handleTestChannels() {
-        try {
-            setTestingChannels(true);
-            setNotificationError(null);
-            setNotificationSuccess(null);
-
-            const data = await testNotificationChannels();
-            const results = data.results || [];
-
-            const failed = results.filter((r) => !r.success);
-            const succeeded = results.filter((r) => r.success);
-
-            if (failed.length === 0 && succeeded.length > 0) {
-                setNotificationSuccess(
-                    `Test sent to: ${succeeded.map((r) => r.channel).join(", ")}`,
-                );
-            } else if (failed.length > 0 && succeeded.length > 0) {
-                setNotificationSuccess(
-                    `Sent: ${succeeded.map((r) => r.channel).join(", ")}. Failed: ${failed.map((r) => `${r.channel} (${r.error})`).join(", ")}`,
-                );
-            } else if (failed.length > 0) {
-                setNotificationError(
-                    `Test failed: ${failed.map((r) => `${r.channel} (${r.error})`).join(", ")}`,
-                );
-            }
-
-            setTimeout(() => {
-                setNotificationSuccess(null);
-                setNotificationError(null);
-            }, 6000);
-        } catch (err) {
-            setNotificationError(err.message);
-        } finally {
-            setTestingChannels(false);
-        }
-    }
-
-    async function handleSetupEmail() {
-        try {
-            setSettingUpEmail(true);
-            setNotificationError(null);
-            setNotificationSuccess(null);
-
-            await handleSaveNotificationConfig();
-
-            const result = await setupEmail();
-            setNotificationSuccess(
-                result.message || "Confirmation email sent!",
-            );
-            setTimeout(() => setNotificationSuccess(null), 5000);
-        } catch (err) {
-            setNotificationError(err.message);
-        } finally {
-            setSettingUpEmail(false);
-        }
-    }
-
-    async function handleSendDigest() {
-        try {
-            setSendingDigest(true);
-            setNotificationError(null);
-            setNotificationSuccess(null);
-
-            const result = await sendEmailDigest();
-            setNotificationSuccess(result.message || "Digest email sent!");
-            setTimeout(() => setNotificationSuccess(null), 5000);
-        } catch (err) {
-            setNotificationError(err.message);
-        } finally {
-            setSendingDigest(false);
-        }
-    }
-
-    const selectedAddress = addresses.find((a) => a.id === selectedAddressId);
-
-    if (loading) {
-        return <div style={{ padding: "2rem" }}>Loading addresses...</div>;
-    }
-
-    if (addresses.length === 0) {
-        return (
-            <div style={{ padding: "2rem" }}>
-                <p>
-                    No addresses tracked yet. Add an address first to create
-                    alerts.
-                </p>
-            </div>
-        );
-    }
-
-    return (
-        <div style={{ maxWidth: "1400px", margin: "0 auto", padding: "2rem" }}>
-            <h1 style={{ marginBottom: "2rem" }}>
-                Alert Rules & Notifications
-            </h1>
-
-            <div
-                style={{
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr",
-                    gap: "2rem",
-                    alignItems: "start",
-                }}
-            >
-                {/* LEFT COLUMN: Alert Rules */}
-                <div>
-                    <h2 style={{ marginTop: 0 }}>Alert Rules</h2>
-
-                    <div style={{ marginBottom: "2rem" }}>
-                        <label
-                            style={{ display: "block", marginBottom: "0.5rem" }}
-                        >
-                            <strong>Select Address:</strong>
-                        </label>
-                        <select
-                            value={selectedAddressId || ""}
-                            onChange={(e) =>
-                                setSelectedAddressId(Number(e.target.value))
-                            }
-                            style={{
-                                width: "100%",
-                                padding: "0.5rem",
-                                fontSize: "1rem",
-                                backgroundColor: "#1a1a1a",
-                                border: "1px solid #444",
-                                borderRadius: "4px",
-                                color: "white",
-                            }}
-                        >
-                            {addresses.map((addr) => (
-                                <option key={addr.id} value={addr.id}>
-                                    {addr.label || "Unlabeled"} - {addr.address}
-                                </option>
-                            ))}
-                        </select>
-                    </div>
-
-                    {selectedAddress && (
-                        <>
-                            <div
-                                style={{
-                                    padding: "1rem",
-                                    marginBottom: "2rem",
-                                    backgroundColor: "#333",
-                                    borderRadius: "4px",
-                                    border: "1px solid #444",
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        fontSize: "1.035rem",
-                                        color: "#b3b3b3",
-                                    }}
-                                >
-                                    Managing alerts for:
-                                </div>
-                                <div
-                                    style={{
-                                        fontWeight: "bold",
-                                        marginTop: "0.25rem",
-                                    }}
-                                >
-                                    {selectedAddress.label || "Unlabeled"}
-                                </div>
-                                <div
-                                    style={{
-                                        fontFamily: "monospace",
-                                        fontSize: "1.035rem",
-                                        color: "#b3b3b3",
-                                    }}
-                                >
-                                    {selectedAddress.address}
-                                </div>
-                            </div>
-
-                            <div style={{ marginBottom: "2rem" }}>
-                                <h3>Create New Alert</h3>
-                                <AlertForm onSubmit={handleAlertSubmit} />
-                            </div>
-
-                            <div>
-                                <h3>Active Alert Rules</h3>
-                                {error && (
-                                    <p style={{ color: "red" }}>
-                                        Error: {error}
-                                    </p>
-                                )}
-                                {alerts.length === 0 ? (
-                                    <p style={{ color: "#666" }}>
-                                        No alert rules defined yet. Create one
-                                        above.
-                                    </p>
-                                ) : (
-                                    <ul
-                                        style={{
-                                            listStyle: "none",
-                                            padding: 0,
-                                        }}
-                                    >
-                                        {alerts.map((alert) => (
-                                            <li
-                                                key={alert.id}
-                                                style={{
-                                                    padding: "1rem",
-                                                    marginBottom: "0.5rem",
-                                                    border: "1px solid #444",
-                                                    borderRadius: "4px",
-                                                    backgroundColor: "#333",
-                                                    opacity: alert.enabled
-                                                        ? 1
-                                                        : 0.6,
-                                                }}
-                                            >
-                                                <div
-                                                    style={{
-                                                        display: "flex",
-                                                        justifyContent:
-                                                            "space-between",
-                                                        alignItems:
-                                                            "flex-start",
-                                                    }}
-                                                >
-                                                    <div style={{ flex: 1 }}>
-                                                        <div
-                                                            style={{
-                                                                fontWeight:
-                                                                    "bold",
-                                                                marginBottom:
-                                                                    "0.25rem",
-                                                            }}
-                                                        >
-                                                            {formatAlertType(
-                                                                alert.type,
-                                                            )}
-                                                        </div>
-                                                        {alert.threshold && (
-                                                            <div
-                                                                style={{
-                                                                    fontSize:
-                                                                        "1.035rem",
-                                                                    color: "#b3b3b3",
-                                                                }}
-                                                            >
-                                                                Threshold:{" "}
-                                                                {
-                                                                    alert.threshold
-                                                                }{" "}
-                                                                ETH
-                                                            </div>
-                                                        )}
-                                                        <div
-                                                            style={{
-                                                                fontSize:
-                                                                    "0.978rem",
-                                                                color: "#808080",
-                                                                marginTop:
-                                                                    "0.25rem",
-                                                            }}
-                                                        >
-                                                            Status:{" "}
-                                                            {alert.enabled
-                                                                ? "Enabled"
-                                                                : "Disabled"}
-                                                        </div>
-                                                    </div>
-                                                    <div
-                                                        style={{
-                                                            display: "flex",
-                                                            gap: "0.5rem",
-                                                        }}
-                                                    >
-                                                        <Button
-                                                            onClick={() =>
-                                                                handleToggleAlert(
-                                                                    alert.id,
-                                                                    alert.enabled,
-                                                                )
-                                                            }
-                                                        >
-                                                            {alert.enabled
-                                                                ? "Disable"
-                                                                : "Enable"}
-                                                        </Button>
-                                                        <Button
-                                                            onClick={() =>
-                                                                handleDeleteAlert(
-                                                                    alert.id,
-                                                                )
-                                                            }
-                                                        >
-                                                            Delete
-                                                        </Button>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                )}
-                            </div>
-                        </>
-                    )}
-                </div>
-
-                {/* RIGHT COLUMN: Notification Settings */}
-                <div>
-                    <h2 style={{ marginTop: 0 }}>Notification Settings</h2>
-
-                    {notificationSuccess && (
-                        <div
-                            style={{
-                                padding: "0.75rem",
-                                marginBottom: "1rem",
-                                backgroundColor: "#00ff0020",
-                                border: "1px solid #00ff00",
-                                borderRadius: "4px",
-                                color: "#00ff00",
-                            }}
-                        >
-                            {notificationSuccess}
-                        </div>
-                    )}
-
-                    {notificationError && (
-                        <div
-                            style={{
-                                padding: "0.75rem",
-                                marginBottom: "1rem",
-                                backgroundColor: "#ff000020",
-                                border: "1px solid #ff0000",
-                                borderRadius: "4px",
-                                color: "#ff6666",
-                            }}
-                        >
-                            {notificationError}
-                        </div>
-                    )}
-
-                    {/* Master toggle */}
-                    <div
-                        style={{
-                            marginBottom: "1.5rem",
-                            padding: "1rem",
-                            backgroundColor: "#333",
-                            borderRadius: "4px",
-                        }}
-                    >
-                        <label
-                            style={{
-                                display: "flex",
-                                alignItems: "center",
-                                cursor: "pointer",
-                            }}
-                        >
-                            <input
-                                type="checkbox"
-                                checked={notificationEnabled}
-                                onChange={(e) =>
-                                    setNotificationEnabled(e.target.checked)
-                                }
-                                style={{
-                                    marginRight: "0.5rem",
-                                    width: "18px",
-                                    height: "18px",
-                                }}
-                            />
-                            <span style={{ fontWeight: "bold" }}>
-                                Enable Notifications
-                            </span>
-                        </label>
-                        <div
-                            style={{
-                                fontSize: "0.978rem",
-                                color: "#808080",
-                                marginTop: "0.5rem",
-                                marginLeft: "26px",
-                            }}
-                        >
-                            Master switch for all notification channels
-                        </div>
-                    </div>
-
-                    {/* All channel settings — hidden when master toggle is off */}
-                    <div
-                        style={{
-                            display: notificationEnabled ? "block" : "none",
-                        }}
-                    >
-                        {/* Telegram */}
-                        <div style={sectionStyle}>
-                            <h3 style={{ marginTop: 0, marginBottom: "1rem" }}>
-                                Telegram
-                            </h3>
-
-                            <div style={{ marginBottom: "0.75rem" }}>
-                                <label style={labelStyle}>Bot Token</label>
-                                <input
-                                    type="text"
-                                    value={telegramBotToken}
-                                    onChange={(e) =>
-                                        setTelegramBotToken(e.target.value)
-                                    }
-                                    placeholder="123456789:ABCdefGHIjklMNOpqrSTUvwxYZ"
-                                    style={inputStyle}
-                                />
-                            </div>
-
-                            <div style={{ marginBottom: "0.5rem" }}>
-                                <label style={labelStyle}>Chat ID</label>
-                                <input
-                                    type="text"
-                                    value={telegramChatId}
-                                    onChange={(e) =>
-                                        setTelegramChatId(e.target.value)
-                                    }
-                                    placeholder="-1001234567890"
-                                    style={inputStyle}
-                                />
-                            </div>
-
-                            <a
-                                href="https://core.telegram.org/bots#how-do-i-create-a-bot"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                style={helpLinkStyle}
-                            >
-                                How to create a Telegram bot & get your Chat ID
-                            </a>
-                        </div>
-
-                        {/* Email */}
-                        <div style={sectionStyle}>
-                            <h3 style={{ marginTop: 0, marginBottom: "1rem" }}>
-                                Email
-                            </h3>
-
-                            <div style={{ marginBottom: "0.75rem" }}>
-                                <label style={labelStyle}>Email Address</label>
-                                <input
-                                    type="email"
-                                    value={email}
-                                    onChange={(e) => setEmail(e.target.value)}
-                                    placeholder="you@example.com"
-                                    style={inputStyle}
-                                />
-                            </div>
-
-                            <div
-                                style={{
-                                    fontSize: "0.85rem",
-                                    color: "#808080",
-                                    marginBottom: "0.75rem",
-                                }}
-                            >
-                                Alert notifications and digests will be sent to
-                                this address
-                            </div>
-
-                            <div
-                                style={{
-                                    display: "flex",
-                                    gap: "0.5rem",
-                                }}
-                            >
-                                <button
-                                    onClick={handleSetupEmail}
-                                    disabled={settingUpEmail || !email}
-                                    style={{
-                                        padding: "0.5rem 1rem",
-                                        fontSize: "0.85rem",
-                                        backgroundColor:
-                                            settingUpEmail || !email
-                                                ? "#333"
-                                                : "#0066cc",
-                                        color: "white",
-                                        border: "none",
-                                        borderRadius: "4px",
-                                        cursor:
-                                            settingUpEmail || !email
-                                                ? "not-allowed"
-                                                : "pointer",
-                                    }}
-                                >
-                                    {settingUpEmail
-                                        ? "Setting up..."
-                                        : "Verify Email"}
-                                </button>
-
-                                <button
-                                    onClick={handleSendDigest}
-                                    disabled={sendingDigest || !email}
-                                    style={{
-                                        padding: "0.5rem 1rem",
-                                        fontSize: "0.85rem",
-                                        backgroundColor:
-                                            sendingDigest || !email
-                                                ? "#333"
-                                                : "#6c757d",
-                                        color: "white",
-                                        border: "none",
-                                        borderRadius: "4px",
-                                        cursor:
-                                            sendingDigest || !email
-                                                ? "not-allowed"
-                                                : "pointer",
-                                    }}
-                                >
-                                    {sendingDigest
-                                        ? "Sending..."
-                                        : "Send Digest Now"}
-                                </button>
-                            </div>
-                        </div>
-
-                        {/* Discord */}
-                        <div style={sectionStyle}>
-                            <h3 style={{ marginTop: 0, marginBottom: "1rem" }}>
-                                Discord
-                            </h3>
-
-                            <div style={{ marginBottom: "0.5rem" }}>
-                                <label style={labelStyle}>
-                                    Discord Webhook URL
-                                </label>
-                                <input
-                                    type="text"
-                                    value={discordWebhookUrl}
-                                    onChange={(e) =>
-                                        setDiscordWebhookUrl(e.target.value)
-                                    }
-                                    placeholder="https://discord.com/api/webhooks/..."
-                                    style={inputStyle}
-                                />
-                            </div>
-
-                            <a
-                                href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                style={helpLinkStyle}
-                            >
-                                How to get a Discord webhook URL
-                            </a>
-                        </div>
-
-                        {/* Slack */}
-                        <div style={sectionStyle}>
-                            <h3 style={{ marginTop: 0, marginBottom: "1rem" }}>
-                                Slack
-                            </h3>
-
-                            <div style={{ marginBottom: "0.5rem" }}>
-                                <label style={labelStyle}>
-                                    Slack Webhook URL
-                                </label>
-                                <input
-                                    type="text"
-                                    value={slackWebhookUrl}
-                                    onChange={(e) =>
-                                        setSlackWebhookUrl(e.target.value)
-                                    }
-                                    placeholder="https://hooks.slack.com/services/..."
-                                    style={inputStyle}
-                                />
-                            </div>
-
-                            <a
-                                href="https://api.slack.com/messaging/webhooks"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                style={helpLinkStyle}
-                            >
-                                How to set up Slack Incoming Webhooks
-                            </a>
-                        </div>
-
-                        {/* Save & Test buttons at the bottom */}
-                        <div
-                            style={{
-                                display: "flex",
-                                gap: "0.75rem",
-                                marginTop: "1rem",
-                            }}
-                        >
-                            <button
-                                onClick={handleSaveNotificationConfig}
-                                disabled={notificationLoading}
-                                style={{
-                                    padding: "0.75rem 1.5rem",
-                                    fontSize: "1rem",
-                                    backgroundColor: notificationLoading
-                                        ? "#333"
-                                        : "#0066cc",
-                                    color: "white",
-                                    border: "none",
-                                    borderRadius: "4px",
-                                    cursor: notificationLoading
-                                        ? "not-allowed"
-                                        : "pointer",
-                                }}
-                            >
-                                {notificationLoading
-                                    ? "Saving..."
-                                    : "Save Settings"}
-                            </button>
-
-                            <button
-                                onClick={handleTestChannels}
-                                disabled={testingChannels}
-                                style={{
-                                    padding: "0.75rem 1.5rem",
-                                    fontSize: "1rem",
-                                    backgroundColor: testingChannels
-                                        ? "#333"
-                                        : "#28a745",
-                                    color: "white",
-                                    border: "none",
-                                    borderRadius: "4px",
-                                    cursor: testingChannels
-                                        ? "not-allowed"
-                                        : "pointer",
-                                }}
-                            >
-                                {testingChannels
-                                    ? "Testing..."
-                                    : "Test All Channels"}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function formatAlertType(type) {
-    const labels = {
-        incoming_tx: "Incoming transaction",
-        outgoing_tx: "Outgoing transaction",
-        large_transfer: "Large transfer",
-        balance_below: "Balance below threshold",
-    };
-    return labels[type] || type;
-}

frontend/src/pages/Login.jsx

@@ -1,146 +0,0 @@
-/**
- * Login Page
- *
- * Allows existing users to sign in with email and password
- */
-
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { useAuth } from "../contexts/AuthContext";
-
-export default function Login() {
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState("");
-    const [loading, setLoading] = useState(false);
-
-    const { login } = useAuth();
-    const navigate = useNavigate();
-
-    async function handleSubmit(e) {
-        e.preventDefault();
-
-        // Validation
-        if (!email || !password) {
-            setError("Please fill in all fields");
-            return;
-        }
-
-        try {
-            setError("");
-            setLoading(true);
-            await login(email, password);
-            navigate("/addresses"); // Redirect to main app
-        } catch (err) {
-            setError("Failed to log in: " + err.message);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    return (
-        <div
-            style={{
-                maxWidth: "400px",
-                margin: "4rem auto",
-                padding: "2rem",
-                border: "1px solid #333",
-                borderRadius: "8px",
-            }}
-        >
-            <h1 style={{ marginBottom: "2rem", textAlign: "center" }}>
-                Koin Ping - Login
-            </h1>
-
-            {error && (
-                <div
-                    style={{
-                        padding: "0.75rem",
-                        marginBottom: "1rem",
-                        backgroundColor: "#ff000020",
-                        border: "1px solid #ff0000",
-                        borderRadius: "4px",
-                        color: "#ff6666",
-                    }}
-                >
-                    {error}
-                </div>
-            )}
-
-            <form onSubmit={handleSubmit}>
-                <div style={{ marginBottom: "1rem" }}>
-                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
-                        Email
-                    </label>
-                    <input
-                        type="email"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                        disabled={loading}
-                        style={{
-                            width: "100%",
-                            padding: "0.5rem",
-                            fontSize: "1rem",
-                            backgroundColor: "#242424",
-                            border: "1px solid #444",
-                            borderRadius: "4px",
-                            color: "white",
-                        }}
-                        required
-                    />
-                </div>
-
-                <div style={{ marginBottom: "1.5rem" }}>
-                    <label style={{ display: "block", marginBottom: "0.5rem" }}>
-                        Password
-                    </label>
-                    <input
-                        type="password"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                        disabled={loading}
-                        style={{
-                            width: "100%",
-                            padding: "0.5rem",
-                            fontSize: "1rem",
-                            backgroundColor: "#242424",
-                            border: "1px solid #444",
-                            borderRadius: "4px",
-                            color: "white",
-                        }}
-                        required
-                    />
-                </div>
-
-                <button
-                    type="submit"
-                    disabled={loading}
-                    style={{
-                        width: "100%",
-                        padding: "0.75rem",
-                        fontSize: "1rem",
-                        backgroundColor: loading ? "#333" : "#0066cc",
-                        color: "white",
-                        border: "none",
-                        borderRadius: "4px",
-                        cursor: loading ? "not-allowed" : "pointer",
-                    }}
-                >
-                    {loading ? "Logging in..." : "Log In"}
-                </button>
-            </form>
-
-            <div style={{ marginTop: "1.5rem", textAlign: "center" }}>
-                <p style={{ color: "#b3b3b3" }}>
-                    Don't have an account?{" "}
-                    <Link
-                        to="/signup"
-                        style={{ color: "#0066cc", textDecoration: "none" }}
-                    >
-                        Sign up here
-                    </Link>
-                </p>
-            </div>
-        </div>
-    );
-}

frontend/src/pages/Onboarding.jsx

@@ -1,834 +0,0 @@
-/**
- * Onboarding Wizard
- *
- * 5-step guided flow: Create Account → Add Wallet → Alert Rules → Notifications → Done
- */
-
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { useAuth } from "../contexts/AuthContext";
-import { createAddress, getAddresses } from "../api/addresses";
-import { createAlert } from "../api/alerts";
-import {
-    updateNotificationConfig,
-    testNotificationChannels,
-} from "../api/notificationConfig";
-
-const STEPS = [
-    "Create Account",
-    "Add Wallet",
-    "Alert Rules",
-    "Notifications",
-    "Done",
-];
-
-const inputStyle = {
-    width: "100%",
-    padding: "0.5rem",
-    fontSize: "1rem",
-    backgroundColor: "#2a2a2a",
-    border: "1px solid #444",
-    borderRadius: "4px",
-    color: "white",
-    boxSizing: "border-box",
-};
-
-const labelStyle = {
-    display: "block",
-    marginBottom: "0.4rem",
-    color: "#ccc",
-    fontSize: "0.9rem",
-};
-
-export default function Onboarding() {
-    const { currentUser, signup } = useAuth();
-    const navigate = useNavigate();
-
-    const [step, setStep] = useState(1);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
-    const [skipWarning, setSkipWarning] = useState("");
-    const [testResults, setTestResults] = useState(null);
-    const [testLoading, setTestLoading] = useState(false);
-
-    // Wizard state
-    const [data, setData] = useState({
-        email: "",
-        password: "",
-        confirmPassword: "",
-        walletAddress: "",
-        walletLabel: "",
-        createdAddressId: null,
-        alertIncomingTx: false,
-        alertOutgoingTx: false,
-        alertLargeTransfer: false,
-        largeTransferThreshold: "",
-        alertBalanceBelow: false,
-        balanceBelowThreshold: "",
-        discordWebhookUrl: "",
-        slackWebhookUrl: "",
-        notificationEmail: "",
-        // summary
-        alertsCreated: [],
-        notificationConfigured: false,
-    });
-
-    function set(field, value) {
-        setData((prev) => ({ ...prev, [field]: value }));
-    }
-
-    // On mount: if already fully onboarded, redirect away
-    useEffect(() => {
-        if (!currentUser) return;
-        getAddresses()
-            .then((addresses) => {
-                if (addresses.length > 0) {
-                    navigate("/addresses", { replace: true });
-                }
-            })
-            .catch(() => {}); // ignore errors (e.g. mid-signup)
-    }, [currentUser, navigate]);
-
-    // ── Step handlers ─────────────────────────────────────────────────────────
-
-    async function handleStep1() {
-        setError("");
-        if (!data.email || !data.password || !data.confirmPassword) {
-            setError("Please fill in all fields");
-            return;
-        }
-        if (data.password !== data.confirmPassword) {
-            setError("Passwords do not match");
-            return;
-        }
-        if (data.password.length < 6) {
-            setError("Password must be at least 6 characters");
-            return;
-        }
-        // If user already exists (browser-close-mid-wizard), skip signup
-        if (!currentUser) {
-            try {
-                setLoading(true);
-                await signup(data.email, data.password);
-            } catch (err) {
-                if (err.code === "auth/email-already-in-use") {
-                    setError("Email already in use. Try logging in instead.");
-                } else if (err.code === "auth/invalid-email") {
-                    setError("Invalid email address");
-                } else if (err.code === "auth/weak-password") {
-                    setError("Password is too weak");
-                } else {
-                    setError("Failed to create account: " + err.message);
-                }
-                setLoading(false);
-                return;
-            } finally {
-                setLoading(false);
-            }
-        }
-        setStep(2);
-    }
-
-    async function handleStep2() {
-        setError("");
-        if (!data.walletAddress) {
-            setError("Please enter a wallet address");
-            return;
-        }
-        if (!/^0x[0-9a-fA-F]{40}$/.test(data.walletAddress)) {
-            setError("Invalid ETH address (must be 0x followed by 40 hex characters)");
-            return;
-        }
-        try {
-            setLoading(true);
-            const created = await createAddress({
-                address: data.walletAddress,
-                label: data.walletLabel || undefined,
-            });
-            set("createdAddressId", created.id);
-            setStep(3);
-        } catch (err) {
-            setError(err.message);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    async function handleStep3() {
-        setError("");
-        const rules = [];
-        if (data.alertIncomingTx) rules.push({ type: "incoming_tx" });
-        if (data.alertOutgoingTx) rules.push({ type: "outgoing_tx" });
-        if (data.alertLargeTransfer) {
-            if (!data.largeTransferThreshold) {
-                setError("Please enter a threshold for large transfers");
-                return;
-            }
-            rules.push({ type: "large_transfer", threshold: data.largeTransferThreshold });
-        }
-        if (data.alertBalanceBelow) {
-            if (!data.balanceBelowThreshold) {
-                setError("Please enter a threshold for balance below");
-                return;
-            }
-            rules.push({ type: "balance_below", threshold: data.balanceBelowThreshold });
-        }
-
-        if (rules.length === 0) {
-            setStep(4);
-            return;
-        }
-
-        try {
-            setLoading(true);
-            const created = [];
-            for (const rule of rules) {
-                const result = await createAlert(data.createdAddressId, rule);
-                created.push(result);
-            }
-            set("alertsCreated", created);
-            setStep(4);
-        } catch (err) {
-            setError(err.message);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    async function handleStep4() {
-        setError("");
-        const hasAny =
-            data.discordWebhookUrl || data.slackWebhookUrl || data.notificationEmail;
-        if (!hasAny) {
-            setStep(5);
-            return;
-        }
-        try {
-            setLoading(true);
-            await updateNotificationConfig({
-                notification_enabled: true,
-                discord_webhook_url: data.discordWebhookUrl || undefined,
-                slack_webhook_url: data.slackWebhookUrl || undefined,
-                email: data.notificationEmail || undefined,
-            });
-            set("notificationConfigured", true);
-            setStep(5);
-        } catch (err) {
-            setError(err.message);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    async function handleTestChannels() {
-        setTestLoading(true);
-        setTestResults(null);
-        try {
-            const results = await testNotificationChannels();
-            setTestResults(results);
-        } catch (err) {
-            setTestResults({ error: err.message });
-        } finally {
-            setTestLoading(false);
-        }
-    }
-
-    // ── Progress bar ──────────────────────────────────────────────────────────
-
-    function ProgressBar() {
-        return (
-            <div
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: "2rem",
-                }}
-            >
-                {STEPS.map((label, i) => {
-                    const stepNum = i + 1;
-                    const done = step > stepNum;
-                    const active = step === stepNum;
-                    return (
-                        <div
-                            key={label}
-                            style={{ display: "flex", alignItems: "center" }}
-                        >
-                            {i > 0 && (
-                                <div
-                                    style={{
-                                        width: "40px",
-                                        height: "2px",
-                                        backgroundColor: done || active ? "#0066cc" : "#444",
-                                        margin: "0 4px",
-                                    }}
-                                />
-                            )}
-                            <div style={{ textAlign: "center" }}>
-                                <div
-                                    style={{
-                                        width: "32px",
-                                        height: "32px",
-                                        borderRadius: "50%",
-                                        backgroundColor:
-                                            done ? "#0066cc" : active ? "#0066cc" : "#333",
-                                        border: active ? "2px solid #4499ff" : "2px solid transparent",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        fontWeight: "bold",
-                                        fontSize: "0.85rem",
-                                        color: "white",
-                                        margin: "0 auto 4px",
-                                    }}
-                                >
-                                    {done ? "✓" : stepNum}
-                                </div>
-                                <div
-                                    style={{
-                                        fontSize: "0.7rem",
-                                        color: active ? "white" : "#888",
-                                        whiteSpace: "nowrap",
-                                    }}
-                                >
-                                    {label}
-                                </div>
-                            </div>
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
-
-    // ── Step content ──────────────────────────────────────────────────────────
-
-    function Step1() {
-        return (
-            <>
-                <h2 style={{ marginBottom: "1.5rem" }}>Create your account</h2>
-                <div style={{ marginBottom: "1rem" }}>
-                    <label style={labelStyle}>Email</label>
-                    <input
-                        type="email"
-                        value={data.email}
-                        onChange={(e) => set("email", e.target.value)}
-                        disabled={loading}
-                        style={inputStyle}
-                        placeholder="you@example.com"
-                    />
-                </div>
-                <div style={{ marginBottom: "1rem" }}>
-                    <label style={labelStyle}>Password</label>
-                    <input
-                        type="password"
-                        value={data.password}
-                        onChange={(e) => set("password", e.target.value)}
-                        disabled={loading}
-                        style={inputStyle}
-                        placeholder="At least 6 characters"
-                    />
-                </div>
-                <div style={{ marginBottom: "1.5rem" }}>
-                    <label style={labelStyle}>Confirm Password</label>
-                    <input
-                        type="password"
-                        value={data.confirmPassword}
-                        onChange={(e) => set("confirmPassword", e.target.value)}
-                        disabled={loading}
-                        style={inputStyle}
-                        placeholder="Repeat your password"
-                    />
-                </div>
-            </>
-        );
-    }
-
-    function Step2() {
-        return (
-            <>
-                <h2 style={{ marginBottom: "0.5rem" }}>Add a wallet address</h2>
-                <p style={{ color: "#aaa", marginBottom: "1.5rem", fontSize: "0.9rem" }}>
-                    Enter the Ethereum address you want to monitor.
-                </p>
-                <div style={{ marginBottom: "1rem" }}>
-                    <label style={labelStyle}>ETH Address</label>
-                    <input
-                        type="text"
-                        value={data.walletAddress}
-                        onChange={(e) => set("walletAddress", e.target.value)}
-                        disabled={loading}
-                        style={inputStyle}
-                        placeholder="0x..."
-                    />
-                </div>
-                <div style={{ marginBottom: "1.5rem" }}>
-                    <label style={labelStyle}>Label (optional)</label>
-                    <input
-                        type="text"
-                        value={data.walletLabel}
-                        onChange={(e) => set("walletLabel", e.target.value)}
-                        disabled={loading}
-                        style={inputStyle}
-                        placeholder="e.g. My main wallet"
-                    />
-                </div>
-            </>
-        );
-    }
-
-    function Step3() {
-        return (
-            <>
-                <h2 style={{ marginBottom: "0.5rem" }}>Configure alert rules</h2>
-                <p style={{ color: "#aaa", marginBottom: "1.5rem", fontSize: "0.9rem" }}>
-                    Choose which events trigger notifications. You can change these later.
-                </p>
-
-                <CheckboxRow
-                    checked={data.alertIncomingTx}
-                    onChange={(v) => set("alertIncomingTx", v)}
-                    label="Incoming transaction"
-                />
-                <CheckboxRow
-                    checked={data.alertOutgoingTx}
-                    onChange={(v) => set("alertOutgoingTx", v)}
-                    label="Outgoing transaction"
-                />
-                <CheckboxRow
-                    checked={data.alertLargeTransfer}
-                    onChange={(v) => set("alertLargeTransfer", v)}
-                    label="Large transfer"
-                >
-                    {data.alertLargeTransfer && (
-                        <div style={{ marginTop: "0.5rem", marginLeft: "1.75rem" }}>
-                            <input
-                                type="number"
-                                value={data.largeTransferThreshold}
-                                onChange={(e) => set("largeTransferThreshold", e.target.value)}
-                                style={{ ...inputStyle, width: "160px" }}
-                                placeholder="Threshold (ETH)"
-                                min="0"
-                                step="0.01"
-                            />
-                        </div>
-                    )}
-                </CheckboxRow>
-                <CheckboxRow
-                    checked={data.alertBalanceBelow}
-                    onChange={(v) => set("alertBalanceBelow", v)}
-                    label="Balance below"
-                >
-                    {data.alertBalanceBelow && (
-                        <div style={{ marginTop: "0.5rem", marginLeft: "1.75rem" }}>
-                            <input
-                                type="number"
-                                value={data.balanceBelowThreshold}
-                                onChange={(e) => set("balanceBelowThreshold", e.target.value)}
-                                style={{ ...inputStyle, width: "160px" }}
-                                placeholder="Threshold (ETH)"
-                                min="0"
-                                step="0.01"
-                            />
-                        </div>
-                    )}
-                </CheckboxRow>
-            </>
-        );
-    }
-
-    function Step4() {
-        return (
-            <>
-                <h2 style={{ marginBottom: "0.5rem" }}>Set up notifications</h2>
-                <p style={{ color: "#aaa", marginBottom: "1.5rem", fontSize: "0.9rem" }}>
-                    Add at least one channel so you receive alerts. All fields are optional.
-                </p>
-
-                <div style={{ marginBottom: "1.25rem" }}>
-                    <label style={labelStyle}>
-                        Discord Webhook URL{" "}
-                        <a
-                            href="https://support.discord.com/hc/en-us/articles/228383668"
-                            target="_blank"
-                            rel="noreferrer"
-                            style={{ color: "#4499ff", fontSize: "0.8rem" }}
-                        >
-                            (how to get one)
-                        </a>
-                    </label>
-                    <input
-                        type="url"
-                        value={data.discordWebhookUrl}
-                        onChange={(e) => set("discordWebhookUrl", e.target.value)}
-                        disabled={loading}
-                        style={inputStyle}
-                        placeholder="https://discord.com/api/webhooks/..."
-                    />
-                </div>
-
-                <div style={{ marginBottom: "1.25rem" }}>
-                    <label style={labelStyle}>
-                        Slack Webhook URL{" "}
-                        <a
-                            href="https://api.slack.com/messaging/webhooks"
-                            target="_blank"
-                            rel="noreferrer"
-                            style={{ color: "#4499ff", fontSize: "0.8rem" }}
-                        >
-                            (how to get one)
-                        </a>
-                    </label>
-                    <input
-                        type="url"
-                        value={data.slackWebhookUrl}
-                        onChange={(e) => set("slackWebhookUrl", e.target.value)}
-                        disabled={loading}
-                        style={inputStyle}
-                        placeholder="https://hooks.slack.com/services/..."
-                    />
-                </div>
-
-                <div style={{ marginBottom: "1.5rem" }}>
-                    <label style={labelStyle}>Email address for alerts</label>
-                    <input
-                        type="email"
-                        value={data.notificationEmail}
-                        onChange={(e) => set("notificationEmail", e.target.value)}
-                        disabled={loading}
-                        style={inputStyle}
-                        placeholder="you@example.com"
-                    />
-                </div>
-            </>
-        );
-    }
-
-    function Step5() {
-        const alertCount = data.alertsCreated.length;
-        const hasNotif = data.notificationConfigured;
-
-        return (
-            <>
-                <h2 style={{ marginBottom: "1rem" }}>You're all set!</h2>
-
-                <div
-                    style={{
-                        backgroundColor: "#1e2e1e",
-                        border: "1px solid #2d5a2d",
-                        borderRadius: "6px",
-                        padding: "1rem 1.25rem",
-                        marginBottom: "1.5rem",
-                    }}
-                >
-                    <p style={{ margin: "0 0 0.5rem", color: "#90ee90", fontWeight: "bold" }}>
-                        Summary
-                    </p>
-                    <ul style={{ margin: 0, paddingLeft: "1.25rem", color: "#ccc", lineHeight: "1.8" }}>
-                        <li>
-                            Wallet address added:{" "}
-                            <span style={{ color: "white", fontFamily: "monospace", fontSize: "0.85rem" }}>
-                                {data.walletAddress}
-                            </span>
-                            {data.walletLabel && ` (${data.walletLabel})`}
-                        </li>
-                        <li>
-                            Alert rules configured:{" "}
-                            <span style={{ color: "white" }}>
-                                {alertCount > 0 ? `${alertCount} rule${alertCount !== 1 ? "s" : ""}` : "None (skipped)"}
-                            </span>
-                        </li>
-                        <li>
-                            Notification channels:{" "}
-                            <span style={{ color: "white" }}>
-                                {hasNotif ? "Configured" : "Not set up (skipped)"}
-                            </span>
-                        </li>
-                    </ul>
-                </div>
-
-                {hasNotif && (
-                    <div style={{ marginBottom: "1.5rem" }}>
-                        <button
-                            onClick={handleTestChannels}
-                            disabled={testLoading}
-                            style={{
-                                padding: "0.6rem 1.25rem",
-                                backgroundColor: testLoading ? "#333" : "#1a4d80",
-                                color: "white",
-                                border: "1px solid #0066cc",
-                                borderRadius: "4px",
-                                cursor: testLoading ? "not-allowed" : "pointer",
-                                fontSize: "0.9rem",
-                            }}
-                        >
-                            {testLoading ? "Testing..." : "Test All Channels"}
-                        </button>
-
-                        {testResults && (
-                            <div style={{ marginTop: "0.75rem" }}>
-                                {testResults.error ? (
-                                    <p style={{ color: "#ff6666" }}>{testResults.error}</p>
-                                ) : (
-                                    <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
-                                        {Object.entries(testResults).map(([channel, result]) => (
-                                            <li
-                                                key={channel}
-                                                style={{
-                                                    color: result.success ? "#90ee90" : "#ff6666",
-                                                    fontSize: "0.9rem",
-                                                    marginBottom: "0.25rem",
-                                                }}
-                                            >
-                                                {result.success ? "✓" : "✗"} {channel}:{" "}
-                                                {result.message || (result.success ? "OK" : "Failed")}
-                                            </li>
-                                        ))}
-                                    </ul>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                )}
-
-                <button
-                    onClick={() => navigate("/addresses")}
-                    style={{
-                        padding: "0.75rem 2rem",
-                        backgroundColor: "#0066cc",
-                        color: "white",
-                        border: "none",
-                        borderRadius: "4px",
-                        cursor: "pointer",
-                        fontSize: "1rem",
-                        fontWeight: "bold",
-                    }}
-                >
-                    Go to Dashboard →
-                </button>
-            </>
-        );
-    }
-
-    // ── Shared helpers ────────────────────────────────────────────────────────
-
-    function CheckboxRow({ checked, onChange, label, children }) {
-        return (
-            <div style={{ marginBottom: "1rem" }}>
-                <label
-                    style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "0.6rem",
-                        cursor: "pointer",
-                        color: "#ddd",
-                    }}
-                >
-                    <input
-                        type="checkbox"
-                        checked={checked}
-                        onChange={(e) => onChange(e.target.checked)}
-                        style={{ width: "16px", height: "16px", accentColor: "#0066cc" }}
-                    />
-                    {label}
-                </label>
-                {children}
-            </div>
-        );
-    }
-
-    // ── Footer navigation ─────────────────────────────────────────────────────
-
-    function Footer() {
-        if (step === 5) return null;
-
-        const canSkip = step === 3 || step === 4;
-        const canBack = step > 1;
-
-        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);
-        }
-
-        return (
-            <div
-                style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    marginTop: "1.5rem",
-                    paddingTop: "1rem",
-                    borderTop: "1px solid #333",
-                }}
-            >
-                <div>
-                    {canBack && (
-                        <button
-                            onClick={handleBack}
-                            disabled={loading}
-                            style={{
-                                padding: "0.5rem 1rem",
-                                backgroundColor: "transparent",
-                                color: "#aaa",
-                                border: "1px solid #444",
-                                borderRadius: "4px",
-                                cursor: loading ? "not-allowed" : "pointer",
-                            }}
-                        >
-                            ← Back
-                        </button>
-                    )}
-                </div>
-
-                <div style={{ display: "flex", gap: "0.75rem" }}>
-                    {canSkip && (
-                        <button
-                            onClick={handleSkip}
-                            disabled={loading}
-                            style={{
-                                padding: "0.5rem 1rem",
-                                backgroundColor: "transparent",
-                                color: "#aaa",
-                                border: "1px solid #444",
-                                borderRadius: "4px",
-                                cursor: loading ? "not-allowed" : "pointer",
-                            }}
-                        >
-                            Skip for now
-                        </button>
-                    )}
-                    <button
-                        onClick={handleNext}
-                        disabled={loading}
-                        style={{
-                            padding: "0.5rem 1.25rem",
-                            backgroundColor: loading ? "#333" : "#0066cc",
-                            color: "white",
-                            border: "none",
-                            borderRadius: "4px",
-                            cursor: loading ? "not-allowed" : "pointer",
-                            fontWeight: "bold",
-                        }}
-                    >
-                        {loading ? "Please wait..." : step === 4 ? "Finish" : "Next →"}
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
-    // ── Render ────────────────────────────────────────────────────────────────
-
-    const stepContent = {
-        1: <Step1 />,
-        2: <Step2 />,
-        3: <Step3 />,
-        4: <Step4 />,
-        5: <Step5 />,
-    };
-
-    return (
-        <div
-            style={{
-                minHeight: "100vh",
-                backgroundColor: "#1a1a1a",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "flex-start",
-                paddingTop: "3rem",
-                paddingBottom: "3rem",
-            }}
-        >
-            <div style={{ width: "100%", maxWidth: "540px", padding: "0 1rem" }}>
-                <h1
-                    style={{
-                        textAlign: "center",
-                        marginBottom: "2rem",
-                        color: "#0066cc",
-                        letterSpacing: "0.5px",
-                    }}
-                >
-                    Koin Ping
-                </h1>
-
-                <ProgressBar />
-
-                {error && (
-                    <div
-                        style={{
-                            padding: "0.75rem 1rem",
-                            marginBottom: "1rem",
-                            backgroundColor: "#3a1a1a",
-                            border: "1px solid #cc3333",
-                            borderRadius: "4px",
-                            color: "#ff6666",
-                            fontSize: "0.9rem",
-                        }}
-                    >
-                        {error}
-                    </div>
-                )}
-
-                {skipWarning && (
-                    <div
-                        style={{
-                            padding: "0.75rem 1rem",
-                            marginBottom: "1rem",
-                            backgroundColor: "#3a2e00",
-                            border: "1px solid #aa7700",
-                            borderRadius: "4px",
-                            color: "#ffcc44",
-                            fontSize: "0.9rem",
-                        }}
-                    >
-                        {skipWarning}
-                    </div>
-                )}
-
-                <div
-                    style={{
-                        backgroundColor: "#242424",
-                        border: "1px solid #333",
-                        borderRadius: "8px",
-                        padding: "2rem",
-                    }}
-                >
-                    {stepContent[step]}
-                    <Footer />
-                </div>
-
-                {step === 1 && (
-                    <p
-                        style={{
-                            textAlign: "center",
-                            marginTop: "1.25rem",
-                            color: "#888",
-                            fontSize: "0.9rem",
-                        }}
-                    >
-                        Already have an account?{" "}
-                        <a href="/login" style={{ color: "#0066cc" }}>
-                            Log in here
-                        </a>
-                    </p>
-                )}
-            </div>
-        </div>
-    );
-}

frontend/src/pages/Signup.jsx

@@ -1,5 +1,5 @@
 import { Navigate } from "react-router-dom";
 
 export default function Signup() {
-    return <Navigate to="/onboarding" replace />;
+    return <Navigate to="/subscribe" replace />;
 }

frontend/src/pages/addresses/Addresses.css

@@ -0,0 +1,40 @@
+.address__edit-input {
+  background: var(--color-border);
+  border: 1px solid #666;
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.9rem;
+}
+
+.address__edit-link {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  color: #6699cc;
+  font-size: 0.8rem;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.address__remove {
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--color-danger-border);
+  color: var(--color-danger);
+  border-radius: var(--radius-sm);
+  padding: 0.3rem 0.7rem;
+  font-size: 0.85rem;
+  margin-left: 1rem;
+  flex-shrink: 0;
+}
+
+/* ── Addresses Responsive ────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .address__remove {
+    margin-left: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+  }
+}

frontend/src/pages/addresses/Addresses.jsx

@@ -0,0 +1,159 @@
+import { useState, useEffect } from "react";
+import AddressForm from "../../components/AddressForm";
+import { getAddresses, createAddress, deleteAddress, updateAddress } from "../../api/addresses";
+import "./Addresses.css";
+
+export default function Addresses() {
+  const [addresses, setAddresses] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const [editLabel, setEditLabel] = useState("");
+
+  useEffect(() => {
+    async function fetchAddresses() {
+      try {
+        setLoading(true);
+        const data = await getAddresses();
+        setAddresses(data);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch addresses:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchAddresses();
+  }, []);
+
+  async function handleAddressSubmit(data) {
+    try {
+      const newAddress = await createAddress(data);
+      setAddresses((prev) => [...prev, newAddress]);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to create address:", err);
+    }
+  }
+
+  async function handleDelete(id, label) {
+    const displayName = label || "this address";
+    if (!window.confirm(`Remove "${displayName}"? This will also delete all associated alert rules.`)) {
+      return;
+    }
+    try {
+      await deleteAddress(id);
+      setAddresses((prev) => prev.filter((a) => a.id !== id));
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to delete address:", err);
+    }
+  }
+
+  function handleEditStart(addr) {
+    setEditingId(addr.id);
+    setEditLabel(addr.label ?? "");
+  }
+
+  async function handleEditSave(id) {
+    try {
+      const updated = await updateAddress(id, { label: editLabel || null });
+      setAddresses((prev) => prev.map((a) => (a.id === id ? updated : a)));
+      setEditingId(null);
+      setEditLabel("");
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to update address:", err);
+    }
+  }
+
+  function handleEditCancel() {
+    setEditingId(null);
+    setEditLabel("");
+  }
+
+  return (
+    <div className="page">
+      <h1>Add Addresses to Track</h1>
+
+      <div className="mb-xl">
+        <AddressForm onSubmit={handleAddressSubmit} />
+      </div>
+
+      <div>
+        <h2>Existing Tracked Addresses</h2>
+        {loading && <p>Loading addresses...</p>}
+        {error && <p className="text-error">Error: {error}</p>}
+        {!loading && !error && addresses.length === 0 && (
+          <p className="text-dimmed">
+            No addresses tracked yet. Add one above to get started.
+          </p>
+        )}
+        {addresses.length > 0 && (
+          <ul className="list-unstyled">
+            {addresses.map((addr, index) => (
+              <li key={addr.id || index} className="list-item--card">
+                <div className="flex flex--between flex--center">
+                  <div>
+                    {editingId === addr.id ? (
+                      <div className="flex flex--center gap-sm mb-sm">
+                        <input
+                          value={editLabel}
+                          onChange={(e) => 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
+                        />
+                        <button
+                          onClick={() => handleEditSave(addr.id)}
+                          className="btn btn--primary btn--sm"
+                        >
+                          Save
+                        </button>
+                        <button
+                          onClick={handleEditCancel}
+                          className="btn btn--ghost btn--sm"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="flex flex--center gap-sm mb-sm">
+                        <span className="text-bold">
+                          {addr.label || "Unlabeled"}
+                        </span>
+                        <button
+                          onClick={() => handleEditStart(addr)}
+                          className="address__edit-link"
+                        >
+                          Edit
+                        </button>
+                      </div>
+                    )}
+                    <div className="text-mono text-sm text-muted">
+                      {addr.address}
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => handleDelete(addr.id, addr.label)}
+                    className="address__remove"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/alertHistory/AlertHistory.css

@@ -0,0 +1,7 @@
+.alert-history__item {
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-card);
+}

frontend/src/pages/alertHistory/AlertHistory.jsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from "react";
+import { getAlertEvents } from "../../api/alertEvents";
+import "./AlertHistory.css";
+
+export default function AlertHistory() {
+  const [alertEvents, setAlertEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchAlertEvents() {
+      try {
+        setLoading(true);
+        const data = await getAlertEvents();
+        setAlertEvents(data);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch alert events:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchAlertEvents();
+  }, []);
+
+  if (loading) {
+    return <div className="page">Loading...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="page text-error">Error: {error}</div>
+    );
+  }
+
+  return (
+    <div className="page">
+      <h1>Recent Alert Events</h1>
+
+      {alertEvents.length === 0 ? (
+        <p className="text-dimmed">No alerts yet</p>
+      ) : (
+        <ul className="list-unstyled">
+          {alertEvents.map((event) => (
+            <li key={event.id} className="alert-history__item">
+              <div className="mb-sm">{event.message}</div>
+              {event.address_label && (
+                <div className="text-sm text-dimmed">
+                  Address: {event.address_label}
+                </div>
+              )}
+              <small className="text-muted">
+                {formatTimestamp(event.timestamp)}
+              </small>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleString();
+}

frontend/src/pages/alerts/Alerts.css

@@ -0,0 +1,177 @@
+.alerts-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  align-items: start;
+}
+
+.alerts__address-info {
+  padding: 1rem;
+  margin-bottom: 2rem;
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+}
+
+.alerts__toggle-panel {
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-md);
+}
+
+.alerts__toggle-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.alerts__toggle-checkbox {
+  margin-right: 0.5rem;
+  width: 18px;
+  height: 18px;
+}
+
+.alerts__toggle-hint {
+  font-size: 0.978rem;
+  color: var(--color-text-dimmed);
+  margin-top: 0.5rem;
+  margin-left: 26px;
+}
+
+.alerts__rule {
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-card);
+}
+
+.alerts__rule--disabled {
+  opacity: 0.6;
+}
+
+.alerts__accordion-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  padding: 0.5rem 0 0;
+  border-top: 1px solid var(--color-border);
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  background: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  width: 100%;
+  text-align: left;
+}
+
+.alerts__accordion-toggle:hover {
+  color: var(--color-text);
+}
+
+.alerts__accordion-chevron {
+  display: inline-block;
+  transition: transform 0.2s ease;
+  font-size: 0.7rem;
+}
+
+.alerts__accordion-chevron--open {
+  transform: rotate(90deg);
+}
+
+.alerts__accordion-panel {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
+  padding: 0 0.25rem;
+}
+
+.alerts__accordion-panel--open {
+  max-height: 200px;
+  opacity: 1;
+  padding: 0.75rem 0.25rem 0.25rem;
+}
+
+.alerts__threshold-inputs {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+}
+
+.alerts__threshold-inputs .form-field {
+  flex: 1;
+  margin-bottom: 0;
+}
+
+.alerts__threshold-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.alerts__email-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.alerts__save-test {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+/* ── Alerts Page Responsive ──────────────────────────────── */
+
+/* Laptop: tighten the gap */
+@media (max-width: 1024px) {
+  .alerts-grid {
+    gap: 1.5rem;
+  }
+}
+
+/* Tablet & below: collapse to single column */
+@media (max-width: 768px) {
+  .alerts-grid {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
+}
+
+/* Mobile: compact spacing */
+@media (max-width: 480px) {
+  .alerts-grid {
+    gap: 2rem;
+  }
+
+  .alerts__address-info {
+    padding: 0.75rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .alerts__rule {
+    padding: 0.75rem;
+  }
+
+  .alerts__rule .flex--between {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .alerts__save-test {
+    flex-direction: column;
+  }
+
+  .alerts__save-test .btn--lg {
+    width: 100%;
+    text-align: center;
+  }
+
+  .alerts__email-buttons {
+    flex-direction: column;
+  }
+}

frontend/src/pages/alerts/Alerts.jsx

@@ -0,0 +1,671 @@
+import { useState, useEffect } from "react";
+import AlertForm from "../../components/AlertForm";
+import Button from "../../components/Button";
+import Input from "../../components/Input";
+import { getAddresses } from "../../api/addresses";
+import {
+  getAlerts,
+  createAlert,
+  updateAlertStatus,
+  updateAlertThresholds,
+  deleteAlert,
+} from "../../api/alerts";
+import {
+  getNotificationConfig,
+  updateNotificationConfig,
+  testNotificationChannels,
+  setupEmail,
+  sendEmailDigest,
+} from "../../api/notificationConfig";
+import "./Alerts.css";
+
+export default function Alerts() {
+  const [addresses, setAddresses] = useState([]);
+  const [selectedAddressId, setSelectedAddressId] = useState(null);
+  const [alerts, setAlerts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const [notificationEnabled, setNotificationEnabled] = useState(false);
+  const [discordWebhookUrl, setDiscordWebhookUrl] = useState("");
+  const [telegramBotToken, setTelegramBotToken] = useState("");
+  const [telegramChatId, setTelegramChatId] = useState("");
+  const [email, setEmail] = useState("");
+  const [slackWebhookUrl, setSlackWebhookUrl] = useState("");
+  const [notificationLoading, setNotificationLoading] = useState(false);
+  const [notificationError, setNotificationError] = useState(null);
+  const [notificationSuccess, setNotificationSuccess] = useState(null);
+  const [testingChannels, setTestingChannels] = useState(false);
+  const [settingUpEmail, setSettingUpEmail] = useState(false);
+  const [sendingDigest, setSendingDigest] = useState(false);
+  const [hasExistingConfig, setHasExistingConfig] = useState(false);
+
+  const [openAccordions, setOpenAccordions] = useState({});
+  const [thresholdEdits, setThresholdEdits] = useState({});
+
+  function toggleAccordion(alertId) {
+    setOpenAccordions((prev) => ({ ...prev, [alertId]: !prev[alertId] }));
+  }
+
+  function getThresholdEdit(alert) {
+    if (thresholdEdits[alert.id]) return thresholdEdits[alert.id];
+    return {
+      minimum: alert.minimum != null ? String(alert.minimum) : "",
+      maximum: alert.maximum != null ? String(alert.maximum) : "",
+    };
+  }
+
+  function setThresholdEdit(alertId, field, value) {
+    setThresholdEdits((prev) => {
+      const current = prev[alertId] || getThresholdEditForAlert(alertId);
+      return { ...prev, [alertId]: { ...current, [field]: value } };
+    });
+  }
+
+  function getThresholdEditForAlert(alertId) {
+    const alert = alerts.find((a) => a.id === alertId);
+    return {
+      minimum: alert?.minimum != null ? String(alert.minimum) : "",
+      maximum: alert?.maximum != null ? String(alert.maximum) : "",
+    };
+  }
+
+  async function handleSaveThresholds(alertId) {
+    const edit = thresholdEdits[alertId];
+    if (!edit) return;
+
+    const min = edit.minimum.trim() === "" ? null : Number(edit.minimum);
+    const max = edit.maximum.trim() === "" ? null : Number(edit.maximum);
+
+    if (min !== null && isNaN(min)) return;
+    if (max !== null && isNaN(max)) return;
+    if (min !== null && max !== null && min > max) return;
+
+    try {
+      const updated = await updateAlertThresholds(alertId, min, max);
+      setAlerts((prev) =>
+        prev.map((a) => (a.id === alertId ? updated : a)),
+      );
+      setThresholdEdits((prev) => {
+        const next = { ...prev };
+        delete next[alertId];
+        return next;
+      });
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to update thresholds:", err);
+    }
+  }
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+
+        const addressData = await getAddresses();
+        setAddresses(addressData);
+        if (addressData.length > 0) {
+          setSelectedAddressId(addressData[0].id);
+        }
+
+        const configData = await getNotificationConfig();
+        setNotificationEnabled(
+          configData.notification_enabled !== false,
+        );
+        setDiscordWebhookUrl(configData.discord_webhook_url || "");
+        setTelegramBotToken(configData.telegram_bot_token || "");
+        setTelegramChatId(configData.telegram_chat_id || "");
+        setEmail(configData.email || "");
+        setSlackWebhookUrl(configData.slack_webhook_url || "");
+
+        const hasSaved =
+          !!configData.discord_webhook_url ||
+          !!configData.telegram_bot_token ||
+          !!configData.telegram_chat_id ||
+          !!configData.email ||
+          !!configData.slack_webhook_url;
+        setHasExistingConfig(hasSaved);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch data:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (!selectedAddressId) {
+      setAlerts([]);
+      return;
+    }
+
+    async function fetchAlerts() {
+      try {
+        const data = await getAlerts(selectedAddressId);
+        setAlerts(data);
+        setError(null);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch alerts:", err);
+      }
+    }
+
+    fetchAlerts();
+  }, [selectedAddressId]);
+
+  async function handleAlertSubmit(data) {
+    if (!selectedAddressId) return;
+
+    try {
+      const newAlert = await createAlert(selectedAddressId, data);
+      setAlerts((prev) => [...prev, newAlert]);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to create alert:", err);
+    }
+  }
+
+  async function handleToggleAlert(alertId, currentStatus) {
+    try {
+      const updated = await updateAlertStatus(alertId, !currentStatus);
+      setAlerts((prev) =>
+        prev.map((alert) => (alert.id === alertId ? updated : alert)),
+      );
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to update alert:", err);
+    }
+  }
+
+  async function handleDeleteAlert(alertId) {
+    try {
+      await deleteAlert(alertId);
+      setAlerts((prev) => prev.filter((alert) => alert.id !== alertId));
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to delete alert:", err);
+    }
+  }
+
+  async function handleSaveNotificationConfig() {
+    if (hasExistingConfig) {
+      const confirmed = window.confirm(
+        "This will overwrite your previously saved notification settings. Continue?",
+      );
+      if (!confirmed) return;
+    }
+
+    try {
+      setNotificationLoading(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      const config = {
+        notification_enabled: notificationEnabled,
+        discord_webhook_url: discordWebhookUrl || null,
+        telegram_bot_token: telegramBotToken || null,
+        telegram_chat_id: telegramChatId || null,
+        email: email || null,
+        slack_webhook_url: slackWebhookUrl || null,
+      };
+
+      await updateNotificationConfig(config);
+      setHasExistingConfig(true);
+      setNotificationSuccess("Notification settings saved!");
+      setTimeout(() => setNotificationSuccess(null), 3000);
+    } catch (err) {
+      setNotificationError(err.message);
+      console.error("Failed to save notification config:", err);
+    } finally {
+      setNotificationLoading(false);
+    }
+  }
+
+  async function handleTestChannels() {
+    try {
+      setTestingChannels(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      const data = await testNotificationChannels();
+      const results = data.results || [];
+
+      const failed = results.filter((r) => !r.success);
+      const succeeded = results.filter((r) => r.success);
+
+      if (failed.length === 0 && succeeded.length > 0) {
+        setNotificationSuccess(
+          `Test sent to: ${succeeded.map((r) => r.channel).join(", ")}`,
+        );
+      } else if (failed.length > 0 && succeeded.length > 0) {
+        setNotificationSuccess(
+          `Sent: ${succeeded.map((r) => r.channel).join(", ")}. Failed: ${failed.map((r) => `${r.channel} (${r.error})`).join(", ")}`,
+        );
+      } else if (failed.length > 0) {
+        setNotificationError(
+          `Test failed: ${failed.map((r) => `${r.channel} (${r.error})`).join(", ")}`,
+        );
+      }
+
+      setTimeout(() => {
+        setNotificationSuccess(null);
+        setNotificationError(null);
+      }, 6000);
+    } catch (err) {
+      setNotificationError(err.message);
+    } finally {
+      setTestingChannels(false);
+    }
+  }
+
+  async function handleSetupEmail() {
+    try {
+      setSettingUpEmail(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      await handleSaveNotificationConfig();
+
+      const result = await setupEmail();
+      setNotificationSuccess(
+        result.message || "Confirmation email sent!",
+      );
+      setTimeout(() => setNotificationSuccess(null), 5000);
+    } catch (err) {
+      setNotificationError(err.message);
+    } finally {
+      setSettingUpEmail(false);
+    }
+  }
+
+  async function handleSendDigest() {
+    try {
+      setSendingDigest(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      const result = await sendEmailDigest();
+      setNotificationSuccess(result.message || "Digest email sent!");
+      setTimeout(() => setNotificationSuccess(null), 5000);
+    } catch (err) {
+      setNotificationError(err.message);
+    } finally {
+      setSendingDigest(false);
+    }
+  }
+
+  const selectedAddress = addresses.find((a) => a.id === selectedAddressId);
+
+  if (loading) {
+    return <div className="page">Loading addresses...</div>;
+  }
+
+  if (addresses.length === 0) {
+    return (
+      <div className="page">
+        <p>No addresses tracked yet. Add an address first to create alerts.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="page page--wide">
+      <h1 className="mb-xl">Alert Rules & Notifications</h1>
+
+      <div className="alerts-grid">
+        {/* LEFT COLUMN: Alert Rules */}
+        <div>
+          <h2 className="mt-0">Alert Rules</h2>
+
+          <div className="mb-xl">
+            <label className="form-label mb-sm">
+              <strong>Select Address:</strong>
+            </label>
+            <select
+              value={selectedAddressId || ""}
+              onChange={(e) =>
+                setSelectedAddressId(Number(e.target.value))
+              }
+              className="form-select"
+            >
+              {addresses.map((addr) => (
+                <option key={addr.id} value={addr.id}>
+                  {addr.label || "Unlabeled"} - {addr.address}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {selectedAddress && (
+            <>
+              <div className="alerts__address-info">
+                <div className="text-sm text-muted">
+                  Managing alerts for:
+                </div>
+                <div className="text-bold">
+                  {selectedAddress.label || "Unlabeled"}
+                </div>
+                <div className="text-mono text-sm text-muted">
+                  {selectedAddress.address}
+                </div>
+              </div>
+
+              <div className="mb-xl">
+                <h3>Create New Alert</h3>
+                <AlertForm onSubmit={handleAlertSubmit} />
+              </div>
+
+              <div>
+                <h3>Active Alert Rules</h3>
+                {error && (
+                  <p className="text-error">Error: {error}</p>
+                )}
+                {alerts.length === 0 ? (
+                  <p className="text-dimmed">
+                    No alert rules defined yet. Create one above.
+                  </p>
+                ) : (
+                  <ul className="list-unstyled">
+                    {alerts.map((alert) => {
+                      const hasAccordion =
+                        alert.type === "incoming_tx" ||
+                        alert.type === "outgoing_tx";
+                      const isOpen = !!openAccordions[alert.id];
+                      const edit = getThresholdEdit(alert);
+
+                      return (
+                        <li
+                          key={alert.id}
+                          className={`alerts__rule ${!alert.enabled ? "alerts__rule--disabled" : ""}`}
+                        >
+                          <div className="flex flex--between">
+                            <div>
+                              <div className="text-bold mb-sm">
+                                {formatAlertType(alert.type)}
+                              </div>
+                              {alert.threshold && (
+                                <div className="text-sm text-muted">
+                                  Threshold: {alert.threshold} ETH
+                                </div>
+                              )}
+                              {alert.minimum != null && (
+                                <div className="text-sm text-muted">
+                                  Min: {alert.minimum} ETH
+                                </div>
+                              )}
+                              {alert.maximum != null && (
+                                <div className="text-sm text-muted">
+                                  Max: {alert.maximum} ETH
+                                </div>
+                              )}
+                              <div className="text-xs text-dimmed">
+                                Status:{" "}
+                                {alert.enabled ? "Enabled" : "Disabled"}
+                              </div>
+                            </div>
+                            <div className="flex flex--center gap-sm">
+                              <Button
+                                onClick={() =>
+                                  handleToggleAlert(
+                                    alert.id,
+                                    alert.enabled,
+                                  )
+                                }
+                              >
+                                {alert.enabled ? "Disable" : "Enable"}
+                              </Button>
+                              <Button
+                                onClick={() =>
+                                  handleDeleteAlert(alert.id)
+                                }
+                              >
+                                Delete
+                              </Button>
+                            </div>
+                          </div>
+
+                          {hasAccordion && (
+                            <>
+                              <button
+                                type="button"
+                                className="alerts__accordion-toggle"
+                                onClick={() =>
+                                  toggleAccordion(alert.id)
+                                }
+                              >
+                                <span
+                                  className={`alerts__accordion-chevron ${isOpen ? "alerts__accordion-chevron--open" : ""}`}
+                                >
+                                  &#9654;
+                                </span>
+                                Add optional minimum and maximum
+                                threshold values
+                              </button>
+                              <div
+                                className={`alerts__accordion-panel ${isOpen ? "alerts__accordion-panel--open" : ""}`}
+                              >
+                                <div className="alerts__threshold-inputs">
+                                  <Input
+                                    label="Minimum"
+                                    type="number"
+                                    step="0.000001"
+                                    min="0"
+                                    value={edit.minimum}
+                                    onChange={(v) =>
+                                      setThresholdEdit(
+                                        alert.id,
+                                        "minimum",
+                                        v,
+                                      )
+                                    }
+                                    placeholder="No minimum"
+                                  />
+                                  <Input
+                                    label="Maximum"
+                                    type="number"
+                                    step="0.000001"
+                                    min="0"
+                                    value={edit.maximum}
+                                    onChange={(v) =>
+                                      setThresholdEdit(
+                                        alert.id,
+                                        "maximum",
+                                        v,
+                                      )
+                                    }
+                                    placeholder="No maximum"
+                                  />
+                                </div>
+                                <div className="alerts__threshold-actions">
+                                  <Button
+                                    onClick={() =>
+                                      handleSaveThresholds(alert.id)
+                                    }
+                                    className="btn--sm"
+                                  >
+                                    Save
+                                  </Button>
+                                </div>
+                              </div>
+                            </>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* RIGHT COLUMN: Notification Settings */}
+        <div>
+          <h2 className="mt-0">Notification Settings</h2>
+
+          {notificationSuccess && (
+            <div className="alert alert--success">{notificationSuccess}</div>
+          )}
+
+          {notificationError && (
+            <div className="alert alert--error">{notificationError}</div>
+          )}
+
+          {/* Master toggle */}
+          <div className="alerts__toggle-panel">
+            <label className="alerts__toggle-label">
+              <input
+                type="checkbox"
+                checked={notificationEnabled}
+                onChange={(e) =>
+                  setNotificationEnabled(e.target.checked)
+                }
+                className="alerts__toggle-checkbox"
+              />
+              <span className="text-bold">Enable Notifications</span>
+            </label>
+            <div className="alerts__toggle-hint">
+              Master switch for all notification channels
+            </div>
+          </div>
+
+          {/* All channel settings -- hidden when master toggle is off */}
+          {notificationEnabled && (
+            <>
+              {/* Telegram */}
+              <div className="section">
+                <h3 className="mt-0 mb-md">Telegram</h3>
+                <Input
+                  label="Bot Token"
+                  value={telegramBotToken}
+                  onChange={setTelegramBotToken}
+                  placeholder="123456789:ABCdefGHIjklMNOpqrSTUvwxYZ"
+                />
+                <Input
+                  label="Chat ID"
+                  value={telegramChatId}
+                  onChange={setTelegramChatId}
+                  placeholder="-1001234567890"
+                />
+                <a
+                  href="https://core.telegram.org/bots#how-do-i-create-a-bot"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="help-link"
+                >
+                  How to create a Telegram bot & get your Chat ID
+                </a>
+              </div>
+
+              {/* Email */}
+              <div className="section">
+                <h3 className="mt-0 mb-md">Email</h3>
+                <Input
+                  label="Email Address"
+                  type="email"
+                  value={email}
+                  onChange={setEmail}
+                  placeholder="you@example.com"
+                />
+                <div className="help-link text-dimmed mb-md">
+                  Alert notifications and digests will be sent to this address
+                </div>
+                <div className="alerts__email-buttons">
+                  <Button
+                    onClick={handleSetupEmail}
+                    disabled={settingUpEmail || !email}
+                    className="btn--sm"
+                  >
+                    {settingUpEmail ? "Setting up..." : "Verify Email"}
+                  </Button>
+                  <Button
+                    onClick={handleSendDigest}
+                    disabled={sendingDigest || !email}
+                    variant="secondary"
+                    className="btn--sm"
+                  >
+                    {sendingDigest ? "Sending..." : "Send Digest Now"}
+                  </Button>
+                </div>
+              </div>
+
+              {/* Discord */}
+              <div className="section">
+                <h3 className="mt-0 mb-md">Discord</h3>
+                <Input
+                  label="Discord Webhook URL"
+                  value={discordWebhookUrl}
+                  onChange={setDiscordWebhookUrl}
+                  placeholder="https://discord.com/api/webhooks/..."
+                />
+                <a
+                  href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="help-link"
+                >
+                  How to get a Discord webhook URL
+                </a>
+              </div>
+
+              {/* Slack */}
+              <div className="section">
+                <h3 className="mt-0 mb-md">Slack</h3>
+                <Input
+                  label="Slack Webhook URL"
+                  value={slackWebhookUrl}
+                  onChange={setSlackWebhookUrl}
+                  placeholder="https://hooks.slack.com/services/..."
+                />
+                <a
+                  href="https://api.slack.com/messaging/webhooks"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="help-link"
+                >
+                  How to set up Slack Incoming Webhooks
+                </a>
+              </div>
+
+              {/* Save & Test buttons */}
+              <div className="alerts__save-test">
+                <Button
+                  onClick={handleSaveNotificationConfig}
+                  disabled={notificationLoading}
+                  className="btn--lg"
+                >
+                  {notificationLoading ? "Saving..." : "Save Settings"}
+                </Button>
+                <Button
+                  onClick={handleTestChannels}
+                  disabled={testingChannels}
+                  variant="success"
+                  className="btn--lg"
+                >
+                  {testingChannels ? "Testing..." : "Test All Channels"}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatAlertType(type) {
+  const labels = {
+    incoming_tx: "Incoming transaction",
+    outgoing_tx: "Outgoing transaction",
+    large_transfer: "Large transfer",
+    balance_below: "Balance below threshold",
+  };
+  return labels[type] || type;
+}

frontend/src/pages/login/Login.css

@@ -0,0 +1,117 @@
+.login-page {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #000000;
+}
+
+.login-bg-video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  transform: translate(-50%, -50%);
+  object-fit: cover;
+  z-index: 0;
+  filter: grayscale(85%);
+  -webkit-filter: grayscale(85%);
+  opacity: 0.05;
+}
+
+.login-card {
+  position: relative;
+  z-index: 1;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 2rem;
+  padding-top: 8rem;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-xl);
+  background-color: rgba(0, 0, 0, 0.75);
+  top: 20px;
+}
+
+.login-heading {
+  margin-bottom: 2rem;
+  text-align: center;
+  position: relative;
+  top: -20px;
+}
+
+.login-brand {
+  color: var(--color-brand);
+}
+
+.login-button {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1.2rem;
+  margin-top: 16px;
+}
+
+.login-footer {
+  margin-top: 1.5rem;
+  text-align: center;
+}
+
+.login-signup-link {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.login-card-fadein {
+  opacity: 0;
+  animation: fadeIn 2s ease-in-out forwards;
+  animation-delay: 3s;
+}
+
+.login-tagline {
+  position: relative;
+  z-index: 1;
+  max-width: 630px;
+  margin: 5rem auto 0;
+  padding-left: 2rem;
+  font-style: italic;
+  color: #FFFFFF;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.login-interactive-fadein {
+  opacity: 0;
+  animation: fadeIn 2s ease-in-out forwards;
+  animation-delay: 6s;
+}
+
+/* ── Login Responsive ────────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .login-card {
+    max-width: 100%;
+    margin: 0 0.75rem;
+    padding: 1.5rem;
+    padding-top: 6rem;
+  }
+
+  .login-tagline {
+    margin-top: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 1.25rem;
+  }
+}

frontend/src/pages/login/Login.jsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../../contexts/AuthContext";
+import Input from "../../components/Input";
+import "./Login.css";
+
+export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+
+    if (!email || !password) {
+      setError("Please fill in all fields");
+      return;
+    }
+
+    try {
+      setError("");
+      setLoading(true);
+      await login(email, password);
+      navigate("/addresses");
+    } catch (err) {
+      setError("Failed to log in: " + err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-page">
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="login-bg-video"
+      >
+        <source src="/koin_exp_2.mp4" type="video/mp4" />
+      </video>
+
+      <div className="login-card login-card-fadein">
+        <h1 className="login-heading">
+          <span className="login-brand">Koin Ping</span> - Login
+        </h1>
+
+        <div className="login-interactive-fadein">
+          {error && <div className="alert alert--error">{error}</div>}
+
+          <form onSubmit={handleSubmit}>
+            <Input
+              label="Email"
+              type="email"
+              value={email}
+              onChange={setEmail}
+              disabled={loading}
+              required
+            />
+            <Input
+              label="Password"
+              type="password"
+              value={password}
+              onChange={setPassword}
+              disabled={loading}
+              required
+              className="form-field--last"
+            />
+
+            <button type="submit" disabled={loading} className="btn btn--primary login-button">
+              {loading ? "Logging in..." : "Log In"}
+            </button>
+          </form>
+
+          <div className="login-footer">
+            <p className="text-muted">
+              Don't have an account?{" "}
+              <Link to="/signup" className="login-signup-link">
+                Sign up here
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <p className="login-tagline login-card-fadein">
+        A lightweight, on-chain monitoring system giving users real-time
+        situational awareness over blockchain addresses.
+      </p>
+    </div>
+  );
+}

frontend/src/pages/subscribe/Subscribe.css

@@ -0,0 +1,260 @@
+.subscribe {
+  min-height: 100vh;
+  background-color: var(--color-bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.subscribe__container {
+  width: 100%;
+  max-width: 540px;
+  padding: 0 1rem;
+}
+
+.subscribe__title {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: var(--color-primary);
+  letter-spacing: 0.5px;
+}
+
+.subscribe__card {
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-xl);
+  padding: 2rem;
+}
+
+.subscribe__login-link {
+  text-align: center;
+  margin-top: 1.25rem;
+  color: #888;
+  font-size: 0.9rem;
+}
+
+.subscribe__login-link a {
+  color: var(--color-primary);
+}
+
+/* Progress bar */
+.progress-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+
+.progress-bar__step {
+  display: flex;
+  align-items: center;
+}
+
+.progress-bar__connector {
+  width: 40px;
+  height: 2px;
+  margin: 0 4px;
+}
+
+.progress-bar__connector--active {
+  background-color: var(--color-primary);
+}
+
+.progress-bar__connector--inactive {
+  background-color: var(--color-border);
+}
+
+.progress-bar__dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: white;
+  margin: 0 auto 4px;
+}
+
+.progress-bar__dot--done,
+.progress-bar__dot--active {
+  background-color: var(--color-primary);
+}
+
+.progress-bar__dot--active {
+  border: 2px solid #4499ff;
+}
+
+.progress-bar__dot--pending {
+  background-color: var(--color-bg-card);
+  border: 2px solid transparent;
+}
+
+.progress-bar__label {
+  font-size: 0.7rem;
+  white-space: nowrap;
+}
+
+.progress-bar__label--active {
+  color: white;
+}
+
+.progress-bar__label--inactive {
+  color: #888;
+}
+
+/* Step 5 summary */
+.subscribe__summary {
+  background-color: #1e2e1e;
+  border: 1px solid #2d5a2d;
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.subscribe__summary-title {
+  margin: 0 0 0.5rem;
+  color: #90ee90;
+  font-weight: bold;
+}
+
+.subscribe__summary-list {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: var(--color-text-label);
+  line-height: 1.8;
+}
+
+/* Checkbox rows */
+.checkbox-row {
+  margin-bottom: 1rem;
+}
+
+.checkbox-row__label {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
+  color: #ddd;
+}
+
+.checkbox-row__input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-primary);
+}
+
+.checkbox-row__nested {
+  margin-top: 0.5rem;
+  margin-left: 1.75rem;
+}
+
+/* Footer navigation */
+.subscribe__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border-light);
+}
+
+/* Test results */
+.test-result {
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+}
+
+.test-result--success {
+  color: #90ee90;
+}
+
+.test-result--failure {
+  color: var(--color-error);
+}
+
+/* Step subtitle */
+.subscribe__subtitle {
+  color: #aaa;
+  margin-bottom: 1.5rem;
+  font-size: 0.9rem;
+}
+
+/* Subscribe card (Step 2) */
+.subscribe-card {
+  background-color: var(--color-bg-card, #1a1a2e);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.subscribe-card__price {
+  margin-bottom: 1.25rem;
+}
+
+.subscribe-card__amount {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: white;
+}
+
+.subscribe-card__period {
+  font-size: 1rem;
+  color: #888;
+  margin-left: 2px;
+}
+
+.subscribe-card__features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.25rem;
+  text-align: left;
+}
+
+.subscribe-card__features li {
+  padding: 0.35rem 0;
+  color: #ccc;
+  font-size: 0.9rem;
+}
+
+.subscribe-card__features li::before {
+  content: "\2713";
+  color: var(--color-primary);
+  margin-right: 0.6rem;
+  font-weight: bold;
+}
+
+.subscribe-card__commitment {
+  color: #999;
+  font-size: 0.8rem;
+  margin: 0;
+  font-style: italic;
+}
+
+/* ── Subscribe Responsive ────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .subscribe {
+    padding-top: 1.5rem;
+  }
+
+  .subscribe__card {
+    padding: 1.25rem;
+  }
+
+  .progress-bar__connector {
+    width: 24px;
+  }
+
+  .progress-bar__dot {
+    width: 26px;
+    height: 26px;
+    font-size: 0.75rem;
+  }
+}

frontend/src/pages/subscribe/Subscribe.jsx

@@ -0,0 +1,671 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useAuth } from "../../contexts/AuthContext";
+import { createAddress, getAddresses } from "../../api/addresses";
+import { createAlert } from "../../api/alerts";
+import {
+  updateNotificationConfig,
+  testNotificationChannels,
+} from "../../api/notificationConfig";
+import { createCheckoutSession, getSubscriptionStatus, verifyCheckoutSession } from "../../api/stripe";
+import Input from "../../components/Input";
+import Button from "../../components/Button";
+import "./Subscribe.css";
+
+const STEPS = [
+  "Create Account",
+  "Add Wallet",
+  "Alert Rules",
+  "Notifications",
+  "Done",
+];
+
+export default function Subscribe() {
+  const { currentUser, signup } = useAuth();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [step, setStep] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [skipWarning, setSkipWarning] = useState("");
+  const [testResults, setTestResults] = useState(null);
+  const [testLoading, setTestLoading] = useState(false);
+
+  const [data, setData] = useState({
+    email: "",
+    password: "",
+    confirmPassword: "",
+    walletAddress: "",
+    walletLabel: "",
+    createdAddressId: null,
+    alertIncomingTx: false,
+    alertOutgoingTx: false,
+    alertLargeTransfer: false,
+    largeTransferThreshold: "",
+    alertBalanceBelow: false,
+    balanceBelowThreshold: "",
+    discordWebhookUrl: "",
+    slackWebhookUrl: "",
+    notificationEmail: "",
+    alertsCreated: [],
+    notificationConfigured: false,
+  });
+
+  function set(field, value) {
+    setData((prev) => ({ ...prev, [field]: value }));
+  }
+
+  useEffect(() => {
+    if (!currentUser) return;
+    getAddresses()
+      .then((addresses) => {
+        if (addresses.length > 0) {
+          navigate("/addresses", { replace: true });
+        }
+      })
+      .catch(() => { });
+  }, [currentUser, navigate]);
+
+  // Handle Stripe redirect back from checkout
+  useEffect(() => {
+    if (!currentUser) return;
+    const payment = searchParams.get("payment");
+    const sessionId = searchParams.get("session_id");
+    if (payment === "success" && sessionId) {
+      setSearchParams({}, { replace: true });
+      setLoading(true);
+      verifyCheckoutSession(sessionId)
+        .then(() => {
+          setStep(2);
+        })
+        .catch((err) => {
+          setError("Payment verification failed: " + err.message);
+          setStep(1);
+        })
+        .finally(() => setLoading(false));
+    } else if (payment === "cancelled") {
+      setSearchParams({}, { replace: true });
+      setStep(1);
+      setError("Payment was cancelled. Please try again.");
+    }
+  }, [currentUser, searchParams, setSearchParams]);
+
+  // ── Step handlers ─────────────────────────────────────────────────────────
+
+  async function handleStep1() {
+    setError("");
+    if (!data.email || !data.password || !data.confirmPassword) {
+      setError("Please fill in all fields");
+      return;
+    }
+    if (data.password !== data.confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+    if (data.password.length < 6) {
+      setError("Password must be at least 6 characters");
+      return;
+    }
+    try {
+      setLoading(true);
+      if (!currentUser) {
+        await signup(data.email, data.password);
+      }
+      const status = await getSubscriptionStatus();
+      if (status.subscription_status === "active" || status.subscription_status === "trialing") {
+        setStep(2);
+        return;
+      }
+      const { url } = await createCheckoutSession();
+      window.location.href = url;
+    } catch (err) {
+      if (err.code === "auth/email-already-in-use") {
+        setError("Email already in use. Try logging in instead.");
+      } else if (err.code === "auth/invalid-email") {
+        setError("Invalid email address");
+      } else if (err.code === "auth/weak-password") {
+        setError("Password is too weak");
+      } else {
+        setError("Failed to create account: " + err.message);
+      }
+      setLoading(false);
+    }
+  }
+
+  async function handleStep2() {
+    setError("");
+    if (!data.walletAddress) {
+      setError("Please enter a wallet address");
+      return;
+    }
+    if (!/^0x[0-9a-fA-F]{40}$/.test(data.walletAddress)) {
+      setError("Invalid ETH address (must be 0x followed by 40 hex characters)");
+      return;
+    }
+    try {
+      setLoading(true);
+      const created = await createAddress({
+        address: data.walletAddress,
+        label: data.walletLabel || undefined,
+      });
+      set("createdAddressId", created.id);
+      setStep(3);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleStep3() {
+    setError("");
+    const rules = [];
+    if (data.alertIncomingTx) rules.push({ type: "incoming_tx" });
+    if (data.alertOutgoingTx) rules.push({ type: "outgoing_tx" });
+    if (data.alertLargeTransfer) {
+      if (!data.largeTransferThreshold) {
+        setError("Please enter a threshold for large transfers");
+        return;
+      }
+      rules.push({ type: "large_transfer", threshold: data.largeTransferThreshold });
+    }
+    if (data.alertBalanceBelow) {
+      if (!data.balanceBelowThreshold) {
+        setError("Please enter a threshold for balance below");
+        return;
+      }
+      rules.push({ type: "balance_below", threshold: data.balanceBelowThreshold });
+    }
+
+    if (rules.length === 0) {
+      setStep(4);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const created = [];
+      for (const rule of rules) {
+        const result = await createAlert(data.createdAddressId, rule);
+        created.push(result);
+      }
+      set("alertsCreated", created);
+      setStep(4);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleStep4() {
+    setError("");
+    const hasAny =
+      data.discordWebhookUrl || data.slackWebhookUrl || data.notificationEmail;
+    if (!hasAny) {
+      setStep(5);
+      return;
+    }
+    try {
+      setLoading(true);
+      await updateNotificationConfig({
+        notification_enabled: true,
+        discord_webhook_url: data.discordWebhookUrl || undefined,
+        slack_webhook_url: data.slackWebhookUrl || undefined,
+        email: data.notificationEmail || undefined,
+      });
+      set("notificationConfigured", true);
+      setStep(5);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleTestChannels() {
+    setTestLoading(true);
+    setTestResults(null);
+    try {
+      const results = await testNotificationChannels();
+      setTestResults(results);
+    } catch (err) {
+      setTestResults({ error: err.message });
+    } finally {
+      setTestLoading(false);
+    }
+  }
+
+  // ── Progress bar ──────────────────────────────────────────────────────────
+
+  function ProgressBar() {
+    return (
+      <div className="progress-bar">
+        {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 (
+            <div key={label} className="progress-bar__step">
+              {i > 0 && (
+                <div
+                  className={`progress-bar__connector ${done || active
+                    ? "progress-bar__connector--active"
+                    : "progress-bar__connector--inactive"
+                    }`}
+                />
+              )}
+              <div>
+                <div className={`progress-bar__dot ${dotClass}`}>
+                  {done ? "\u2713" : stepNum}
+                </div>
+                <div
+                  className={`progress-bar__label ${active
+                    ? "progress-bar__label--active"
+                    : "progress-bar__label--inactive"
+                    }`}
+                >
+                  {label}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // ── Step content ──────────────────────────────────────────────────────────
+
+  function Step1() {
+    return (
+      <>
+        <h2 className="mb-lg">Create your account</h2>
+        <Input
+          label="Email"
+          type="email"
+          value={data.email}
+          onChange={(v) => set("email", v)}
+          disabled={loading}
+          placeholder="you@example.com"
+        />
+        <Input
+          label="Password"
+          type="password"
+          value={data.password}
+          onChange={(v) => set("password", v)}
+          disabled={loading}
+          placeholder="At least 6 characters"
+        />
+        <Input
+          label="Confirm Password"
+          type="password"
+          value={data.confirmPassword}
+          onChange={(v) => set("confirmPassword", v)}
+          disabled={loading}
+          placeholder="Repeat your password"
+          className="form-field--last"
+        />
+      </>
+    );
+  }
+
+  function Step2() {
+    return (
+      <>
+        <h2 className="mb-sm">Add a wallet address</h2>
+        <p className="subscribe__subtitle">
+          Enter the Ethereum address you want to monitor.
+        </p>
+        <Input
+          label="ETH Address"
+          value={data.walletAddress}
+          onChange={(v) => set("walletAddress", v)}
+          disabled={loading}
+          placeholder="0x..."
+        />
+        <Input
+          label="Label (optional)"
+          value={data.walletLabel}
+          onChange={(v) => set("walletLabel", v)}
+          disabled={loading}
+          placeholder="e.g. My main wallet"
+          className="form-field--last"
+        />
+      </>
+    );
+  }
+
+  function Step3() {
+    return (
+      <>
+        <h2 className="mb-sm">Configure alert rules</h2>
+        <p className="subscribe__subtitle">
+          Choose which events trigger notifications. You can change these later.
+        </p>
+
+        <CheckboxRow
+          checked={data.alertIncomingTx}
+          onChange={(v) => set("alertIncomingTx", v)}
+          label="Incoming transaction"
+        />
+        <CheckboxRow
+          checked={data.alertOutgoingTx}
+          onChange={(v) => set("alertOutgoingTx", v)}
+          label="Outgoing transaction"
+        />
+        <CheckboxRow
+          checked={data.alertLargeTransfer}
+          onChange={(v) => set("alertLargeTransfer", v)}
+          label="Large transfer"
+        >
+          {data.alertLargeTransfer && (
+            <div className="checkbox-row__nested">
+              <Input
+                type="number"
+                label=""
+                value={data.largeTransferThreshold}
+                onChange={(v) => set("largeTransferThreshold", v)}
+                placeholder="Threshold (ETH)"
+                min="0"
+                step="0.01"
+              />
+            </div>
+          )}
+        </CheckboxRow>
+        <CheckboxRow
+          checked={data.alertBalanceBelow}
+          onChange={(v) => set("alertBalanceBelow", v)}
+          label="Balance below"
+        >
+          {data.alertBalanceBelow && (
+            <div className="checkbox-row__nested">
+              <Input
+                type="number"
+                label=""
+                value={data.balanceBelowThreshold}
+                onChange={(v) => set("balanceBelowThreshold", v)}
+                placeholder="Threshold (ETH)"
+                min="0"
+                step="0.01"
+              />
+            </div>
+          )}
+        </CheckboxRow>
+      </>
+    );
+  }
+
+  function Step4() {
+    return (
+      <>
+        <h2 className="mb-sm">Set up notifications</h2>
+        <p className="subscribe__subtitle">
+          Add at least one channel so you receive alerts. All fields are optional.
+        </p>
+
+        <div className="mb-md">
+          <label className="form-label">
+            Discord Webhook URL{" "}
+            <a
+              href="https://support.discord.com/hc/en-us/articles/228383668"
+              target="_blank"
+              rel="noreferrer"
+              className="help-link"
+            >
+              (how to get one)
+            </a>
+          </label>
+          <Input
+            label=""
+            type="url"
+            value={data.discordWebhookUrl}
+            onChange={(v) => set("discordWebhookUrl", v)}
+            disabled={loading}
+            placeholder="https://discord.com/api/webhooks/..."
+          />
+        </div>
+
+        <div className="mb-md">
+          <label className="form-label">
+            Slack Webhook URL{" "}
+            <a
+              href="https://api.slack.com/messaging/webhooks"
+              target="_blank"
+              rel="noreferrer"
+              className="help-link"
+            >
+              (how to get one)
+            </a>
+          </label>
+          <Input
+            label=""
+            type="url"
+            value={data.slackWebhookUrl}
+            onChange={(v) => set("slackWebhookUrl", v)}
+            disabled={loading}
+            placeholder="https://hooks.slack.com/services/..."
+          />
+        </div>
+
+        <Input
+          label="Email address for alerts"
+          type="email"
+          value={data.notificationEmail}
+          onChange={(v) => set("notificationEmail", v)}
+          disabled={loading}
+          placeholder="you@example.com"
+          className="form-field--last"
+        />
+      </>
+    );
+  }
+
+  function Step5() {
+    const alertCount = data.alertsCreated.length;
+    const hasNotif = data.notificationConfigured;
+
+    return (
+      <>
+        <h2 className="mb-md">You're all set!</h2>
+
+        <div className="subscribe__summary">
+          <p className="subscribe__summary-title">Summary</p>
+          <ul className="subscribe__summary-list">
+            <li>
+              Wallet address added:{" "}
+              <span className="text-mono text-white-sm">
+                {data.walletAddress}
+              </span>
+              {data.walletLabel && ` (${data.walletLabel})`}
+            </li>
+            <li>
+              Alert rules configured:{" "}
+              <span className="text-white">
+                {alertCount > 0 ? `${alertCount} rule${alertCount !== 1 ? "s" : ""}` : "None (skipped)"}
+              </span>
+            </li>
+            <li>
+              Notification channels:{" "}
+              <span className="text-white">
+                {hasNotif ? "Configured" : "Not set up (skipped)"}
+              </span>
+            </li>
+          </ul>
+        </div>
+
+        {hasNotif && (
+          <div className="mb-lg">
+            <Button
+              onClick={handleTestChannels}
+              disabled={testLoading}
+              variant="ghost"
+            >
+              {testLoading ? "Testing..." : "Test All Channels"}
+            </Button>
+
+            {testResults && (
+              <div className="mt-md">
+                {testResults.error ? (
+                  <p className="text-error">{testResults.error}</p>
+                ) : (
+                  <ul className="list-unstyled">
+                    {Object.entries(testResults).map(([channel, result]) => (
+                      <li
+                        key={channel}
+                        className={`test-result ${result.success ? "test-result--success" : "test-result--failure"}`}
+                      >
+                        {result.success ? "\u2713" : "\u2717"} {channel}:{" "}
+                        {result.message || (result.success ? "OK" : "Failed")}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        <Button onClick={() => navigate("/addresses")} className="btn--lg text-bold">
+          Go to Dashboard →
+        </Button>
+      </>
+    );
+  }
+
+  // ── Shared helpers ────────────────────────────────────────────────────────
+
+  function CheckboxRow({ checked, onChange, label, children }) {
+    return (
+      <div className="checkbox-row">
+        <label className="checkbox-row__label">
+          <input
+            type="checkbox"
+            checked={checked}
+            onChange={(e) => onChange(e.target.checked)}
+            className="checkbox-row__input"
+          />
+          {label}
+        </label>
+        {children}
+      </div>
+    );
+  }
+
+  // ── 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 (
+      <div className="subscribe__footer">
+        <div>
+          {canBack && (
+            <Button
+              onClick={handleBack}
+              disabled={loading}
+              variant="ghost"
+            >
+              ← Back
+            </Button>
+          )}
+        </div>
+
+        <div className="flex gap-md">
+          {canSkip && (
+            <Button
+              onClick={handleSkip}
+              disabled={loading}
+              variant="ghost"
+            >
+              Skip for now
+            </Button>
+          )}
+          <Button
+            onClick={handleNext}
+            disabled={loading}
+            className="text-bold"
+          >
+            {loading ? "Please wait..." : nextLabel}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const stepContent = {
+    1: Step1(),
+    2: Step2(),
+    3: Step3(),
+    4: Step4(),
+    5: Step5(),
+  };
+
+  return (
+    <div className="subscribe">
+      <div className="subscribe__container">
+        <h1 className="subscribe__title">Koin Ping</h1>
+
+        {ProgressBar()}
+
+        {error && (
+          <div className="alert alert--error">{error}</div>
+        )}
+
+        {skipWarning && (
+          <div className="alert alert--warning">{skipWarning}</div>
+        )}
+
+        <div className="subscribe__card">
+          {stepContent[step]}
+          {Footer()}
+        </div>
+
+        {step === 1 && (
+          <p className="subscribe__login-link">
+            Already have an account?{" "}
+            <a href="/login">Log in here</a>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/user_account/Account.css

@@ -0,0 +1,77 @@
+.account-page h1 {
+  font-size: 2rem;
+  font-weight: 200;
+}
+
+.account__section-title {
+  font-size: 1.4rem;
+  font-weight: 400;
+  margin-bottom: 1.25rem;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border-light);
+  padding-bottom: 0.5rem;
+}
+
+.account__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.account__row--last {
+  border-bottom: none;
+}
+
+.account__label {
+  color: var(--color-text-muted);
+  font-size: 1.1rem;
+}
+
+.account__value {
+  color: var(--color-text);
+  font-size: 1.1rem;
+  text-align: right;
+}
+
+.account__uuid {
+  font-size: 0.85rem;
+  color: var(--color-text-dimmed);
+  word-break: break-all;
+  max-width: 60%;
+}
+
+.account__status {
+  font-weight: 600;
+}
+
+.account__status--active {
+  color: var(--color-success-text);
+}
+
+.account__status--canceled {
+  color: var(--color-danger);
+}
+
+.account__status--canceling {
+  color: var(--color-warning);
+}
+
+.account__status--past_due {
+  color: var(--color-error);
+}
+
+.account__portal-section {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.account__portal-hint {
+  margin-top: 0.5rem;
+}
+
+.account__password-form {
+  max-width: 400px;
+}