adjust rpc call to eth block timing

Loginpage style

.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/

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

@@ -28,8 +28,8 @@ make hooks
 cd frontend && npm install && cd ..
 
 # Copy and fill in environment variables
-cp backend-go/.env.example backend-go/.env
+cp backend/.env.example backend/.env
-# edit backend-go/.env with your DATABASE_URL, FIREBASE_PROJECT_ID, ETH_RPC_URL
+# edit backend/.env with your DATABASE_URL, FIREBASE_PROJECT_ID, ETH_RPC_URL
 
 # Run checks (requires golangci-lint)
 make check
@@ -38,7 +38,7 @@ 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
@@ -63,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/

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/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

@@ -2,16 +2,16 @@ Start DB:
 
 brew services start postgresql@15
 
-From the backend-go directory, you have a few options:
+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/backend-gomake dev-all
+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 go run ./cmd/api
+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 go run ./cmd/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).

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/internal/config"
-	"github.com/kjannette/koin-ping/backend-go/internal/database"
+	"github.com/kjannette/koin-ping/backend/internal/database"
-	"github.com/kjannette/koin-ping/backend-go/internal/firebase"
+	"github.com/kjannette/koin-ping/backend/internal/firebase"
-	"github.com/kjannette/koin-ping/backend-go/internal/handlers"
+	"github.com/kjannette/koin-ping/backend/internal/handlers"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/services"
+	"github.com/kjannette/koin-ping/backend/internal/services"
 )
 
 const (
@@ -86,6 +86,8 @@ func main() {
 		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)))
 
 	// Authenticated + subscribed routes — addresses
 	mux.Handle("POST "+b+"/addresses",

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/internal/config"
-	"github.com/kjannette/koin-ping/backend-go/internal/database"
+	"github.com/kjannette/koin-ping/backend/internal/database"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/protocols/ethereum"
+	"github.com/kjannette/koin-ping/backend/internal/protocols/ethereum"
-	"github.com/kjannette/koin-ping/backend-go/internal/services"
+	"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
 

backend/internal/domain/types.go

@@ -47,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 {
@@ -58,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 {
@@ -93,7 +92,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"`
@@ -102,7 +100,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
@@ -131,14 +129,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/address.go

@@ -8,9 +8,9 @@ import (
 	"regexp"
 	"strings"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"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/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"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/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
 var errThresholdFormat = errors.New("unsupported threshold format")

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/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/services"
+	"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/internal/config"
-	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/notifications"
+	"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

@@ -10,9 +10,9 @@ import (
 	checkoutsession "github.com/stripe/stripe-go/v82/checkout/session"
 	"github.com/stripe/stripe-go/v82/webhook"
 
-	"github.com/kjannette/koin-ping/backend-go/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/config"
-	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
 const webhookMaxBodyBytes = 65536
@@ -84,6 +84,61 @@ func (h *StripeHandler) GetSubscriptionStatus(w http.ResponseWriter, r *http.Req
 	})
 }
 
+// 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"})
+}
+
 // 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) {

backend/internal/middleware/auth.go

@@ -8,8 +8,8 @@ import (
 	"net/http"
 	"strings"
 
-	fbauth "github.com/kjannette/koin-ping/backend-go/internal/firebase"
+	fbauth "github.com/kjannette/koin-ping/backend/internal/firebase"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
 type contextKey string

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 {

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

@@ -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 UserModel struct {

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
+	rpcTimeoutMS      = 30000
-	rpcMaxRetries   = 3
+	rpcMaxRetries     = 3
-	rpcRetryBaseMS  = 1000
+	rpcRetryBaseMS    = 2000
+	rpcMinIntervalMS  = 1000
 )
 
 type JsonRpcEthereum struct {
-	rpcURL string
+	rpcURL     string
-	client *http.Client
+	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"
+	"golang.org/x/sync/semaphore"
-	"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/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/protocols/ethereum"
+	"github.com/kjannette/koin-ping/backend/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/wei"
+	"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),
 	}
 }
 
@@ -189,7 +196,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 +213,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 +261,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/internal/domain"
-	"github.com/kjannette/koin-ping/backend-go/internal/models"
+	"github.com/kjannette/koin-ping/backend/internal/models"
-	"github.com/kjannette/koin-ping/backend-go/internal/protocols/ethereum"
+	"github.com/kjannette/koin-ping/backend/internal/protocols/ethereum"
 )
 
 const maxBlocksPerRun = 100

frontend/src/App.jsx

@@ -1,38 +1,38 @@
 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 Subscribe from "./pages/subscribe/subscribe";
-import Addresses from "./pages/Addresses";
+import Addresses from "./pages/addresses/Addresses";
-import Alerts from "./pages/Alerts";
+import Alerts from "./pages/alerts/Alerts";
-import AlertHistory from "./pages/AlertHistory";
+import AlertHistory from "./pages/alertHistory/AlertHistory";
 
 export default function App() {
-    const { currentUser } = useAuth();
+  const { currentUser } = useAuth();
-
-    if (!currentUser) {
-        return (
-            <Routes>
-                <Route path="/login" element={<Login />} />
-                <Route path="/signup" element={<Signup />} />
-                <Route path="/subscribe" element={<Onboarding />} />
-                <Route path="*" element={<Navigate to="/login" />} />
-            </Routes>
-        );
-    }
 
+  if (!currentUser) {
     return (
-        <div>
+      <Routes>
-            <Navbar />
+        <Route path="/login" element={<Login />} />
-            <Routes>
+        <Route path="/signup" element={<Signup />} />
-                <Route path="/" element={<Addresses />} />
+        <Route path="/subscribe" element={<Subscribe />} />
-                <Route path="/addresses" element={<Addresses />} />
+        <Route path="*" element={<Navigate to="/login" />} />
-                <Route path="/alerts" element={<Alerts />} />
+      </Routes>
-                <Route path="/alertevents" element={<AlertHistory />} />
-                <Route path="/subscribe" element={<Onboarding />} />
-                <Route path="*" element={<Navigate to="/addresses" />} />
-            </Routes>
-        </div>
     );
+  }
+
+  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="/subscribe" element={<Subscribe />} />
+        <Route path="*" element={<Navigate to="/addresses" />} />
+      </Routes>
+    </div>
+  );
 }

frontend/src/api/stripe.jsx

@@ -14,6 +14,20 @@ export async function createCheckoutSession() {
     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`, {

frontend/src/components/Navbar.jsx

@@ -5,7 +5,7 @@ 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() {

frontend/src/pages/Addresses.jsx

@@ -1,159 +0,0 @@
-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.jsx

@@ -1,67 +0,0 @@
-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.jsx

@@ -1,522 +0,0 @@
-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,
-    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);
-
-    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) => (
-                                            <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>
-                                                        )}
-                                                        <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>
-                                            </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/Onboarding.jsx

@@ -1,671 +0,0 @@
-/**
- * Subscribe / Onboarding Wizard
- *
- * 5-step guided flow: Create Account -> Add Wallet -> Alert Rules -> Notifications -> Done
- * After account creation, user is redirected to Stripe Checkout for payment.
- * On successful payment, they return here at step 2 (Add Wallet).
- */
-
-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 } from "../api/stripe";
-import Input from "../components/Input";
-import Button from "../components/Button";
-import "./Onboarding.css";
-
-const STEPS = [
-    "Create Account",
-    "Add Wallet",
-    "Alert Rules",
-    "Notifications",
-    "Done",
-];
-
-export default function Onboarding() {
-    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");
-        if (payment === "success") {
-            setSearchParams({}, { replace: true });
-            setStep(2);
-        } 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="onboarding__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="onboarding__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="onboarding__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="onboarding__summary">
-                    <p className="onboarding__summary-title">Summary</p>
-                    <ul className="onboarding__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="onboarding__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="onboarding">
-            <div className="onboarding__container">
-                <h1 className="onboarding__title">Koin Ping</h1>
-
-                {ProgressBar()}
-
-                {error && (
-                    <div className="alert alert--error">{error}</div>
-                )}
-
-                {skipWarning && (
-                    <div className="alert alert--warning">{skipWarning}</div>
-                )}
-
-                <div className="onboarding__card">
-                    {stepContent[step]}
-                    {Footer()}
-                </div>
-
-                {step === 1 && (
-                    <p className="onboarding__login-link">
-                        Already have an account?{" "}
-                        <a href="/login">Log in here</a>
-                    </p>
-                )}
-            </div>
-        </div>
-    );
-}

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.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.jsx

@@ -0,0 +1,522 @@
+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,
+  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);
+
+  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) => (
+                      <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>
+                            )}
+                            <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>
+                      </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

@@ -1,19 +1,38 @@
 .login-page {
-  min-height: 100vh;
+  position: relative;
-  background-image: url(/ping.png);
+  width: 100vw;
-  background-size: 67%;
+  height: 100vh;
-  background-position: center;
+  overflow: hidden;
-  background-repeat: no-repeat;
+  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: 20px auto;
+  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 {
@@ -32,7 +51,6 @@
   padding: 0.75rem;
   font-size: 1.2rem;
   margin-top: 16px;
-  ;
 }
 
 .login-footer {
@@ -55,10 +73,14 @@
   }
 }
 
-.login-form-hidden {
+.login-card-fadein {
   opacity: 0;
+  animation: fadeIn 2s ease-in-out forwards;
+  animation-delay: 3s;
 }
 
-.login-form-visible {
+.login-interactive-fadein {
+  opacity: 0;
   animation: fadeIn 2s ease-in-out forwards;
+  animation-delay: 6s;
 }

frontend/src/pages/login/Login.jsx

@@ -1,11 +1,10 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { useAuth } from "../contexts/AuthContext";
+import { useAuth } from "../../contexts/AuthContext";
-import Input from "../components/Input";
+import Input from "../../components/Input";
 import "./Login.css";
 
 export default function Login() {
-  const [isVisible, setIsVisible] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
@@ -36,12 +35,22 @@ export default function Login() {
 
   return (
     <div className="login-page">
-      <div className="login-card" onMouseEnter={() => setIsVisible(true)}>
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="login-bg-video"
+      >
+        <source src="/koin_spin.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={isVisible ? "login-form-visible" : "login-form-hidden"}>
+        <div className="login-interactive-fadein">
           {error && <div className="alert alert--error">{error}</div>}
 
           <form onSubmit={handleSubmit}>

frontend/src/pages/subscribe/subscribe.css

@@ -1,4 +1,4 @@
-.onboarding {
+.subscribe {
   min-height: 100vh;
   background-color: var(--color-bg);
   display: flex;
@@ -9,34 +9,34 @@
   padding-bottom: 3rem;
 }
 
-.onboarding__container {
+.subscribe__container {
   width: 100%;
   max-width: 540px;
   padding: 0 1rem;
 }
 
-.onboarding__title {
+.subscribe__title {
   text-align: center;
   margin-bottom: 2rem;
   color: var(--color-primary);
   letter-spacing: 0.5px;
 }
 
-.onboarding__card {
+.subscribe__card {
   background-color: var(--color-bg-elevated);
   border: 1px solid var(--color-border-light);
   border-radius: var(--radius-xl);
   padding: 2rem;
 }
 
-.onboarding__login-link {
+.subscribe__login-link {
   text-align: center;
   margin-top: 1.25rem;
   color: #888;
   font-size: 0.9rem;
 }
 
-.onboarding__login-link a {
+.subscribe__login-link a {
   color: var(--color-primary);
 }
 
@@ -108,7 +108,7 @@
 }
 
 /* Step 5 summary */
-.onboarding__summary {
+.subscribe__summary {
   background-color: #1e2e1e;
   border: 1px solid #2d5a2d;
   border-radius: var(--radius-lg);
@@ -116,13 +116,13 @@
   margin-bottom: 1.5rem;
 }
 
-.onboarding__summary-title {
+.subscribe__summary-title {
   margin: 0 0 0.5rem;
   color: #90ee90;
   font-weight: bold;
 }
 
-.onboarding__summary-list {
+.subscribe__summary-list {
   margin: 0;
   padding-left: 1.25rem;
   color: var(--color-text-label);
@@ -154,7 +154,7 @@
 }
 
 /* Footer navigation */
-.onboarding__footer {
+.subscribe__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -178,7 +178,7 @@
 }
 
 /* Step subtitle */
-.onboarding__subtitle {
+.subscribe__subtitle {
   color: #aaa;
   margin-bottom: 1.5rem;
   font-size: 0.9rem;

frontend/src/pages/subscribe/subscribe.jsx

@@ -0,0 +1,679 @@
+/**
+ * Subscribe / Subscribe Wizard
+ *
+ * 5-step guided flow: Create Account -> Add Wallet -> Alert Rules -> Notifications -> Done
+ * After account creation, user is redirected to Stripe Checkout for payment.
+ * On successful payment, they return here at step 2 (Add Wallet).
+ */
+
+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/tsconfig.json

@@ -1,24 +1,28 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        "target": "ES2020",
+    "target": "ES2020",
-        "useDefineForClassFields": true,
+    "useDefineForClassFields": true,
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
-        "module": "ESNext",
+      "ES2020",
-        "skipLibCheck": true,
+      "DOM",
-
+      "DOM.Iterable"
-        /* Bundler mode */
+    ],
-        "moduleResolution": "bundler",
+    "module": "ESNext",
-        "allowImportingTsExtensions": true,
+    "skipLibCheck": true,
-        "resolveJsonModule": true,
+    /* Bundler mode */
-        "isolatedModules": true,
+    "moduleResolution": "bundler",
-        "noEmit": true,
+    "allowImportingTsExtensions": true,
-        "jsx": "react-jsx",
+    "resolveJsonModule": true,
-
+    "isolatedModules": true,
-        /* Linting */
+    "noEmit": true,
-        "strict": true,
+    "jsx": "react-jsx",
-        "noUnusedLocals": true,
+    /* Linting */
-        "noUnusedParameters": true,
+    "strict": true,
-        "noFallthroughCasesInSwitch": true
+    "noUnusedLocals": true,
-    },
+    "noUnusedParameters": true,
-    "include": ["src"]
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
 }