added style, fixed login issue

2026-05-12 04:45:04 -04:00
17 changed files with 142 additions and 457 deletions
--- a/backend/cmd/api/main.go
+++ b/backend/cmd/api/main.go
@@ -61,7 +61,7 @@ func main() {
 	notifConfigHandler := handlers.NewNotificationConfigHandler(notifConfigModel, userModel, cfg)
 	emailDigestHandler := handlers.NewEmailDigestHandler(emailDigestSvc, notifConfigModel)
 	statusHandler := handlers.NewStatusHandler(checkpointModel)
-	stripeHandler := handlers.NewStripeHandler(userModel, alertRuleModel, cfg)
+	stripeHandler := handlers.NewStripeHandler(userModel, cfg)
 	accountHandler := handlers.NewAccountHandler(userModel, addressModel, cfg)

 	authenticate := middleware.Authenticate(userModel)
--- a/backend/cmd/subscription-sweep/main.go
+++ b/backend/cmd/subscription-sweep/main.go
@@ -1,68 +0,0 @@
-// Package main runs a daily (cron-invoked) job: for paid tiers without an
-// active or trialling Stripe subscription, disable Firebase login and turn
-// off all alert rules until billing is restored via Stripe webhook / checkout.
-package main
-
-import (
-	"context"
-	"log"
-
-	"github.com/joho/godotenv"
-
-	"github.com/kjannette/koin-ping/backend/internal/config"
-	"github.com/kjannette/koin-ping/backend/internal/database"
-	"github.com/kjannette/koin-ping/backend/internal/firebase"
-	"github.com/kjannette/koin-ping/backend/internal/models"
-)
-
-func main() {
-	_ = godotenv.Load()
-
-	cfg, err := config.Load()
-	if err != nil {
-		log.Fatalf("Failed to load config: %v", err)
-	}
-
-	if err := firebase.Init(cfg.FirebaseProjectID); err != nil {
-		log.Fatalf("Failed to initialize Firebase: %v", err)
-	}
-
-	pool, connErr := database.Connect(cfg.DSN())
-	if connErr != nil {
-		log.Fatalf("Failed to connect to database: %v", connErr)
-	}
-
-	defer database.Close()
-
-	ctx := context.Background()
-	userModel := models.NewUserModel(pool)
-	alertModel := models.NewAlertRuleModel(pool)
-
-	users, listErr := userModel.ListPaidUsersWithoutActiveSubscription(ctx)
-	if listErr != nil {
-		log.Fatalf("Failed to list lapsed subscriptions: %v", listErr)
-	}
-
-	if len(users) == 0 {
-		log.Println("Subscription sweep: no lapsed paid users")
-		return
-	}
-
-	for _, u := range users {
-		if disableErr := firebase.SetUserDisabled(ctx, u.FirebaseUID, true); disableErr != nil {
-			log.Printf("Subscription sweep: Firebase disable failed user %s: %v", u.ID, disableErr)
-			continue
-		}
-
-		n, rulesErr := alertModel.DisableAllForUser(ctx, u.ID)
-		if rulesErr != nil {
-			log.Printf("Subscription sweep: disabling alerts failed for user %s: %v", u.ID, rulesErr)
-			continue
-		}
-
-		log.Printf(
-			"Subscription sweep: suspended user %s (%s tier, status=%s), disabled %d alert rules",
-			u.ID, u.SubscriptionTier, u.SubscriptionStatus, n,
-		)
-	}
-}
--- a/backend/internal/config/config.go
+++ b/backend/internal/config/config.go
@@ -32,14 +32,12 @@ type Config struct {
 	ResendAPIKey         string
 	EmailFrom            string
 	DigestIntervalHours  int
-	StripeSecretKey              string
-	StripeWebhookSecret          string
-	StripePriceIDPremium         string
-	StripePriceIDPro             string
-	StripePriceIDPremiumAnnual   string
-	StripePriceIDProAnnual       string
-	StripePublishableKey         string
-	FrontendURL                  string
+	StripeSecretKey        string
+	StripeWebhookSecret    string
+	StripePriceIDPremium   string
+	StripePriceIDPro       string
+	StripePublishableKey   string
+	FrontendURL            string
 }

 // Load reads configuration from environment variables and returns a Config.
@@ -60,14 +58,12 @@ func Load() (*Config, error) {
 		ResendAPIKey:        os.Getenv("RESEND_API_KEY"),
 		EmailFrom:           getEnv("EMAIL_FROM", "Koin Ping <alerts@koinping.com>"),
 		DigestIntervalHours:  getEnvInt("DIGEST_INTERVAL_HOURS", defaultDigestIntervalHours),
-		StripeSecretKey:              os.Getenv("STRIPE_SECRET_KEY"),
-		StripeWebhookSecret:          os.Getenv("STRIPE_WEBHOOK_SECRET"),
-		StripePriceIDPremium:         os.Getenv("STRIPE_PRICE_ID_PREMIUM"),
-		StripePriceIDPro:             os.Getenv("STRIPE_PRICE_ID_PRO"),
-		StripePriceIDPremiumAnnual:   os.Getenv("STRIPE_PRICE_ID_PREMIUM_ANNUAL"),
-		StripePriceIDProAnnual:       os.Getenv("STRIPE_PRICE_ID_PRO_ANNUAL"),
-		StripePublishableKey:         os.Getenv("STRIPE_PUBLISHABLE_KEY"),
-		FrontendURL:                  getEnv("FRONTEND_URL", "http://localhost:3000"),
+		StripeSecretKey:        os.Getenv("STRIPE_SECRET_KEY"),
+		StripeWebhookSecret:    os.Getenv("STRIPE_WEBHOOK_SECRET"),
+		StripePriceIDPremium:   os.Getenv("STRIPE_PRICE_ID_PREMIUM"),
+		StripePriceIDPro:       os.Getenv("STRIPE_PRICE_ID_PRO"),
+		StripePublishableKey:   os.Getenv("STRIPE_PUBLISHABLE_KEY"),
+		FrontendURL:          getEnv("FRONTEND_URL", "http://localhost:3000"),
 	}

 	if cfg.PollIntervalMS < minPollIntervalMS {
@@ -101,13 +97,10 @@ func (c *Config) DSN() string {
 // TierForPriceID maps a Stripe price ID back to the corresponding
 // subscription tier. Returns empty string if the price is unrecognised.
 func (c *Config) TierForPriceID(priceID string) string {
-	if priceID == "" {
-		return ""
-	}
 	switch priceID {
-	case c.StripePriceIDPremium, c.StripePriceIDPremiumAnnual:
+	case c.StripePriceIDPremium:
 		return "premium"
-	case c.StripePriceIDPro, c.StripePriceIDProAnnual:
+	case c.StripePriceIDPro:
 		return "pro"
 	default:
 		return ""
--- a/backend/internal/config/config_test.go
+++ b/backend/internal/config/config_test.go
@@ -6,10 +6,8 @@ func TestTierForPriceID(t *testing.T) {
 	t.Parallel()

 	cfg := &Config{
-		StripePriceIDPremium:       "price_premium_123",
-		StripePriceIDPro:           "price_pro_456",
-		StripePriceIDPremiumAnnual: "price_premium_yr",
-		StripePriceIDProAnnual:     "price_pro_yr",
+		StripePriceIDPremium: "price_premium_123",
+		StripePriceIDPro:     "price_pro_456",
 	}

 	tests := []struct {
@@ -18,8 +16,6 @@ func TestTierForPriceID(t *testing.T) {
 	}{
 		{"price_premium_123", "premium"},
 		{"price_pro_456", "pro"},
-		{"price_premium_yr", "premium"},
-		{"price_pro_yr", "pro"},
 		{"price_unknown", ""},
 		{"", ""},
 	}
--- a/backend/internal/firebase/users.go
+++ b/backend/internal/firebase/users.go
@@ -1,22 +0,0 @@
-package firebase
-
-import (
-	"context"
-	"fmt"
-
-	"firebase.google.com/go/v4/auth"
-)
-
-// SetUserDisabled updates the Firebase user record's disabled flag.
-func SetUserDisabled(ctx context.Context, uid string, disabled bool) error {
-	if authClient == nil {
-		return fmt.Errorf("firebase auth not initialized") //nolint:err113
-	}
-	if uid == "" {
-		return nil
-	}
-
-	params := (&auth.UserToUpdate{}).Disabled(disabled)
-	_, err := authClient.UpdateUser(ctx, uid, params)
-	return err
-}
--- a/backend/internal/handlers/account.go
+++ b/backend/internal/handlers/account.go
@@ -38,8 +38,8 @@ type accountResponse struct {

 var tierPlanLabels = map[domain.SubscriptionTier]string{ //nolint:gochecknoglobals
 	domain.TierFree:    "Free Trial",
-	domain.TierPremium: "Premium / $8.78 mo",
-	domain.TierPro:     "Pro / $16.78 mo",
+	domain.TierPremium: "Premium / $1.99 mo",
+	domain.TierPro:     "Pro / $11.99 mo",
 }

 func (h *AccountHandler) GetAccount(w http.ResponseWriter, r *http.Request) {
--- a/backend/internal/handlers/stripe.go
+++ b/backend/internal/handlers/stripe.go
@@ -1,86 +1,36 @@
 package handlers

 import (
-	"context"
 	"encoding/json"
 	"fmt"
 	"io"
 	"log"
 	"net/http"

-	kpfirebase "github.com/kjannette/koin-ping/backend/internal/firebase"
-	"github.com/kjannette/koin-ping/backend/internal/config"
-	"github.com/kjannette/koin-ping/backend/internal/domain"
-	"github.com/kjannette/koin-ping/backend/internal/middleware"
-	"github.com/kjannette/koin-ping/backend/internal/models"
 	"github.com/stripe/stripe-go/v82"
 	portalsession "github.com/stripe/stripe-go/v82/billingportal/session"
 	checkoutsession "github.com/stripe/stripe-go/v82/checkout/session"
 	"github.com/stripe/stripe-go/v82/webhook"
+
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
 )

 const webhookMaxBodyBytes = 65536

 type StripeHandler struct {
-	users  *models.UserModel
-	alerts *models.AlertRuleModel
-	cfg    *config.Config
+	users *models.UserModel
+	cfg   *config.Config
 }

-func NewStripeHandler(users *models.UserModel, alerts *models.AlertRuleModel, cfg *config.Config) *StripeHandler {
+func NewStripeHandler(users *models.UserModel, cfg *config.Config) *StripeHandler {
 	stripe.Key = cfg.StripeSecretKey
-	return &StripeHandler{users: users, alerts: alerts, cfg: cfg}
+	return &StripeHandler{users: users, cfg: cfg}
 }

-func (h *StripeHandler) ensureUserFirebaseAndAlertsEnabled(ctx context.Context, localUserID string) {
-	user, err := h.users.GetByID(ctx, localUserID)
-	if err != nil || user == nil || user.FirebaseUID == "" {
-		return
-	}
-	if firebaseErr := kpfirebase.SetUserDisabled(ctx, user.FirebaseUID, false); firebaseErr != nil {
-		log.Printf("Billing access restore: firebase enable failed for user %s: %v", localUserID, firebaseErr)
-
-		return
-	}
-
-	n, alertsErr := h.alerts.EnableAllForUser(ctx, localUserID)
-	if alertsErr != nil {
-		log.Printf("Billing access restore: enable alerts failed for user %s: %v", localUserID, alertsErr)
-
-		return
-	}
-
-	log.Printf("Billing access restored: user %s, %d alert rules enabled", localUserID, n)
-}
-
-func (h *StripeHandler) restorePaidSubscriptionAccess(ctx context.Context, stripeCustomerID, status string) {
-	if stripeCustomerID == "" || (status != "active" && status != "trialing") {
-		return
-	}
-
-	u, err := h.users.GetByStripeCustomerID(ctx, stripeCustomerID)
-	if err != nil || u == nil {
-		if err != nil {
-			log.Printf("restorePaidSubscriptionAccess: lookup %s: %v", stripeCustomerID, err)
-		}
-
-		return
-	}
-
-	h.ensureUserFirebaseAndAlertsEnabled(ctx, u.ID)
-}
-
-func (h *StripeHandler) priceIDForTier(tier domain.SubscriptionTier, interval string) (string, error) {
-	if interval == "annual" {
-		switch tier {
-		case domain.TierPremium:
-			return h.cfg.StripePriceIDPremiumAnnual, nil
-		case domain.TierPro:
-			return h.cfg.StripePriceIDProAnnual, nil
-		default:
-			return "", fmt.Errorf("no Stripe price for tier %q", tier) //nolint:err113
-		}
-	}
+func (h *StripeHandler) priceIDForTier(tier domain.SubscriptionTier) (string, error) {
 	switch tier {
 	case domain.TierPremium:
 		return h.cfg.StripePriceIDPremium, nil
@@ -96,8 +46,7 @@ func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Req
 	userID := middleware.GetUserID(r.Context())

 	var body struct {
-		Tier     string `json:"tier"`
-		Interval string `json:"interval"`
+		Tier string `json:"tier"`
 	}
 	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
 		writeError(w, http.StatusBadRequest, "BAD_REQUEST", "Invalid request body")
@@ -107,9 +56,6 @@ func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Req
 	if body.Tier == "" {
 		body.Tier = "premium"
 	}
-	if body.Interval == "" {
-		body.Interval = "annual"
-	}

 	tier := domain.SubscriptionTier(body.Tier)
 	if tier != domain.TierPremium && tier != domain.TierPro {
@@ -117,7 +63,7 @@ func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Req
 		return
 	}

-	priceID, err := h.priceIDForTier(tier, body.Interval)
+	priceID, err := h.priceIDForTier(tier)
 	if err != nil {
 		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", err.Error())
 		return
@@ -231,8 +177,6 @@ func (h *StripeHandler) VerifyCheckoutSession(w http.ResponseWriter, r *http.Req
 	if subscriptionID != "" && customerID != "" {
 		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active", tier); err != nil {
 			log.Printf("VerifyCheckout: failed to activate subscription: %v", err)
-		} else {
-			h.restorePaidSubscriptionAccess(r.Context(), customerID, "active")
 		}
 	}

@@ -253,8 +197,6 @@ func (h *StripeHandler) ActivateFreeTier(w http.ResponseWriter, r *http.Request)
 		return
 	}

-	h.ensureUserFirebaseAndAlertsEnabled(r.Context(), userID)
-
 	log.Printf("Free tier activated for user %s", userID)
 	writeJSON(w, http.StatusOK, map[string]string{
 		"subscription_status": "active",
@@ -267,9 +209,8 @@ func (h *StripeHandler) ActivateFreeTier(w http.ResponseWriter, r *http.Request)
 // The Firebase account is created on the frontend only after payment succeeds.
 func (h *StripeHandler) CreateOnboardingCheckout(w http.ResponseWriter, r *http.Request) {
 	var body struct {
-		Email    string `json:"email"`
-		Tier     string `json:"tier"`
-		Interval string `json:"interval"`
+		Email string `json:"email"`
+		Tier  string `json:"tier"`
 	}
 	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
 		writeError(w, http.StatusBadRequest, "BAD_REQUEST", "Invalid request body")
@@ -284,9 +225,6 @@ func (h *StripeHandler) CreateOnboardingCheckout(w http.ResponseWriter, r *http.
 	if body.Tier == "" {
 		body.Tier = "premium"
 	}
-	if body.Interval == "" {
-		body.Interval = "annual"
-	}

 	tier := domain.SubscriptionTier(body.Tier)
 	if tier != domain.TierPremium && tier != domain.TierPro {
@@ -294,7 +232,7 @@ func (h *StripeHandler) CreateOnboardingCheckout(w http.ResponseWriter, r *http.
 		return
 	}

-	priceID, err := h.priceIDForTier(tier, body.Interval)
+	priceID, err := h.priceIDForTier(tier)
 	if err != nil {
 		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", err.Error())
 		return
@@ -424,8 +362,6 @@ func (h *StripeHandler) handleCheckoutCompleted(r *http.Request, event stripe.Ev
 	if subscriptionID != "" && customerID != "" {
 		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active", tier); err != nil {
 			log.Printf("Failed to activate subscription: %v", err)
-		} else {
-			h.restorePaidSubscriptionAccess(r.Context(), customerID, "active")
 		}
 	}

@@ -465,12 +401,8 @@ func (h *StripeHandler) handleSubscriptionUpdated(r *http.Request, event stripe.

 	if err := h.users.ActivateSubscription(r.Context(), customerID, sub.ID, status, tier); err != nil {
 		log.Printf("Failed to update subscription: %v", err)
-
-		return
 	}

-	h.restorePaidSubscriptionAccess(r.Context(), customerID, status)
-
 	log.Printf("Subscription %s updated to %s (tier %s) for customer %s", sub.ID, status, tier, customerID)
 }

--- a/backend/internal/models/alert_rule.go
+++ b/backend/internal/models/alert_rule.go
@@ -140,33 +140,3 @@ func (m *AlertRuleModel) Remove(ctx context.Context, id int) (bool, error) {
 	}
 	return tag.RowsAffected() > 0, nil
 }
-
-// DisableAllForUser sets enabled = false on every alert rule owned by addresses of userID.
-func (m *AlertRuleModel) DisableAllForUser(ctx context.Context, userID string) (int64, error) {
-	tag, err := m.pool.Exec(ctx,
-		`UPDATE alert_rules ar
-		 SET enabled = FALSE
-		 FROM addresses a
-		 WHERE ar.address_id = a.id AND a.user_id = $1`,
-		userID,
-	)
-	if err != nil {
-		return 0, err
-	}
-	return tag.RowsAffected(), nil
-}
-
-// EnableAllForUser sets enabled = true on every alert rule owned by addresses of userID.
-func (m *AlertRuleModel) EnableAllForUser(ctx context.Context, userID string) (int64, error) {
-	tag, err := m.pool.Exec(ctx,
-		`UPDATE alert_rules ar
-		 SET enabled = TRUE
-		 FROM addresses a
-		 WHERE ar.address_id = a.id AND a.user_id = $1`,
-		userID,
-	)
-	if err != nil {
-		return 0, err
-	}
-	return tag.RowsAffected(), nil
-}
--- a/backend/internal/models/user.go
+++ b/backend/internal/models/user.go
@@ -130,46 +130,6 @@ func (m *UserModel) GetByID(ctx context.Context, id string) (*domain.User, error
 	return scanUser(row)
 }

-// GetByStripeCustomerID loads a user by their Stripe Customer ID if set.
-func (m *UserModel) GetByStripeCustomerID(ctx context.Context, stripeCustomerID string) (*domain.User, error) {
-	row := m.pool.QueryRow(ctx,
-		`SELECT `+userColumns+` FROM users WHERE stripe_customer_id = $1`,
-		stripeCustomerID,
-	)
-	return scanUser(row)
-}
-
-// ListPaidUsersWithoutActiveSubscription finds paid-tier rows whose Stripe
-// subscription is not active or trialing. Used by the periodic billing sweep.
-func (m *UserModel) ListPaidUsersWithoutActiveSubscription(ctx context.Context) ([]domain.User, error) {
-	rows, err := m.pool.Query(ctx,
-		`SELECT `+userColumns+` FROM users
-		 WHERE subscription_tier IN ('premium', 'pro')
-		   AND subscription_status NOT IN ('active', 'trialing')
-		   AND COALESCE(trim(firebase_uid), '') <> ''`,
-	)
-	if err != nil {
-		return nil, err
-	}
-	defer rows.Close()
-
-	out := []domain.User{}
-	for rows.Next() {
-		var u domain.User
-		rowErr := rows.Scan(
-			&u.ID, &u.FirebaseUID, &u.Email, &u.DisplayName,
-			&u.StripeCustomerID, &u.StripeSubscriptionID, &u.SubscriptionStatus,
-			&u.SubscriptionTier, &u.SubscriptionCreatedAt, &u.CreatedAt, &u.UpdatedAt,
-		)
-		if rowErr != nil {
-			return nil, rowErr
-		}
-		out = append(out, u)
-	}
-
-	return out, rows.Err()
-}
-
 func (m *UserModel) UpdateStripeCustomer(ctx context.Context, userID, stripeCustomerID string) error {
 	_, err := m.pool.Exec(ctx,
 		`UPDATE users SET stripe_customer_id = $2, updated_at = NOW() WHERE id = $1`,
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -11,7 +11,9 @@ import AlertHistory from "./pages/alertHistory/AlertHistory";
 import Account from "./pages/user_account/Account";

 export default function App() {
-  const { currentUser, isSubscribed } = useAuth();
+  const { currentUser, isSubscribed, loading } = useAuth();
+
+  if (loading) return null;

  if (!currentUser) {
    return (
--- a/frontend/src/api/stripe.jsx
+++ b/frontend/src/api/stripe.jsx
@@ -1,12 +1,12 @@
 import { getAuthHeaders } from "./authHeaders";
 import { API_BASE } from "./config";

-export async function createCheckoutSession(tier = "premium", interval = "annual") {
+export async function createCheckoutSession(tier = "premium") {
    const headers = await getAuthHeaders();
    const res = await fetch(`${API_BASE}/stripe/create-checkout-session`, {
        method: "POST",
        headers: { ...headers, "Content-Type": "application/json" },
-        body: JSON.stringify({ tier, interval }),
+        body: JSON.stringify({ tier }),
    });
    if (!res.ok) {
        const data = await res.json();
--- a/frontend/src/components/TierPicker.css
+++ b/frontend/src/components/TierPicker.css
@@ -1,45 +1,4 @@
 .tier-picker {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.tier-picker__toggle {
-  display: flex;
-  justify-content: center;
-  gap: 0;
-}
-
-.tier-picker__toggle-btn {
-  padding: 0.75rem 1.5rem;
-  border: 1px solid var(--color-border);
-  background: transparent;
-  color: var(--color-text-dimmed);
-  cursor: pointer;
-  transition: all 0.2s;
-  font-weight: 500;
-}
-
-.tier-picker__toggle-btn:first-child {
-  border-radius: 8px 0 0 8px;
-}
-
-.tier-picker__toggle-btn:last-child {
-  border-radius: 0 8px 8px 0;
-  border-left: none;
-}
-
-.tier-picker__toggle-btn--active {
-  background: var(--color-primary);
-  color: white;
-  border-color: var(--color-primary);
-}
-
-.tier-picker__toggle-btn:last-child.tier-picker__toggle-btn--active {
-  border-left: 1px solid var(--color-primary);
-}
-
-.tier-picker__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
@@ -153,7 +112,7 @@
 }

@media (max-width: 768px) {
-  .tier-picker__cards {
+  .tier-picker {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
--- a/frontend/src/components/TierPicker.jsx
+++ b/frontend/src/components/TierPicker.jsx
@@ -1,12 +1,11 @@
-import { useState } from "react";
 import "./TierPicker.css";

 const TIERS = [
  {
    id: "free",
    name: "Trial Monitoring",
-    price: { monthly: "$0", annual: "$0" },
-    period: { monthly: "", annual: "" },
+    price: "$0",
+    period: "",
    features: [
      "Monitor 1 blockchain address 24/7",
      "Configure alerts to fire on trigger events",
@@ -17,8 +16,8 @@ const TIERS = [
  {
    id: "premium",
    name: "Premium Monitoring",
-    price: { monthly: "$8.78", annual: "$94.78" },
-    period: { monthly: "/month", annual: "/year" },
+    price: "$1.99",
+    period: "/month",
    features: [
      "Monitor 3 blockchain addresses",
      "Configure two types of rule-based alerts to fire on trigger events for each of the three addresses",
@@ -32,8 +31,8 @@ const TIERS = [
  {
    id: "pro",
    name: "Professional Monitoring",
-    price: { monthly: "$16.78", annual: "$181.78" },
-    period: { monthly: "/month", annual: "/year" },
+    price: "$11.99",
+    period: "/month",
    features: [
      "Monitor unlimited blockchain addresses",
      "Configure unlimited alert rules to fire on unlimited events on any address",
@@ -48,66 +47,43 @@ const TIERS = [
 ];

 export default function TierPicker({ onSelect, selectedTier }) {
-  const [isAnnual, setIsAnnual] = useState(true);
-
  return (
    <div className="tier-picker">
-      <div className="tier-picker__toggle">
-        <button
-          className={`tier-picker__toggle-btn${!isAnnual ? " tier-picker__toggle-btn--active" : ""}`}
-          onClick={() => setIsAnnual(false)}
+      {TIERS.map((tier) => (
+        <div
+          key={tier.id}
+          className={`tier-picker__card${tier.highlighted ? " tier-picker__card--highlighted" : ""}${selectedTier === tier.id ? " tier-picker__card--selected" : ""}`}
        >
-          Monthly
-        </button>
-        <button
-          className={`tier-picker__toggle-btn${isAnnual ? " tier-picker__toggle-btn--active" : ""}`}
-          onClick={() => setIsAnnual(true)}
-        >
-          Annual
-        </button>
-      </div>
-
-      <div className="tier-picker__cards">
-        {TIERS.map((tier) => (
-          <div
-            key={tier.id}
-            className={`tier-picker__card${tier.highlighted ? " tier-picker__card--highlighted" : ""}${selectedTier === tier.id ? " tier-picker__card--selected" : ""}`}
-          >
-            {tier.highlighted && (
-              <div className="tier-picker__badge">Most Popular</div>
+          {tier.highlighted && (
+            <div className="tier-picker__badge">Most Popular</div>
+          )}
+          <h3 className="tier-picker__name">{tier.name}</h3>
+          <div className="tier-picker__price">
+            <span className="tier-picker__amount">{tier.price}</span>
+            {tier.period && (
+              <span className="tier-picker__period">{tier.period}</span>
            )}
-            <h3 className="tier-picker__name">{tier.name}</h3>
-            <div className="tier-picker__price">
-              <span className="tier-picker__amount">
-                {isAnnual ? tier.price.annual : tier.price.monthly}
-              </span>
-              {(isAnnual ? tier.period.annual : tier.period.monthly) && (
-                <span className="tier-picker__period">
-                  {isAnnual ? tier.period.annual : tier.period.monthly}
-                </span>
-              )}
-            </div>
-            <ul className="tier-picker__features">
-              {tier.features.map((f) => (
-                <li key={f} className="tier-picker__feature">
-                  <span className="tier-picker__check">&#10003;</span> {f}
-                </li>
-              ))}
-              {tier.disabledFeatures.map((f) => (
-                <li key={f} className="tier-picker__feature tier-picker__feature--disabled">
-                  <span className="tier-picker__dash">&mdash;</span> {f}
-                </li>
-              ))}
-            </ul>
-            <button
-              className={`btn tier-picker__btn${selectedTier === tier.id ? " tier-picker__btn--selected" : ""}`}
-              onClick={() => onSelect(tier.id, isAnnual ? "annual" : "monthly")}
-            >
-              {selectedTier === tier.id ? "Selected" : "Select"}
-            </button>
          </div>
-        ))}
-      </div>
+          <ul className="tier-picker__features">
+            {tier.features.map((f) => (
+              <li key={f} className="tier-picker__feature">
+                <span className="tier-picker__check">&#10003;</span> {f}
+              </li>
+            ))}
+            {tier.disabledFeatures.map((f) => (
+              <li key={f} className="tier-picker__feature tier-picker__feature--disabled">
+                <span className="tier-picker__dash">&mdash;</span> {f}
+              </li>
+            ))}
+          </ul>
+          <button
+            className={`btn tier-picker__btn${selectedTier === tier.id ? " tier-picker__btn--selected" : ""}`}
+            onClick={() => onSelect(tier.id)}
+          >
+            {selectedTier === tier.id ? "Selected" : "Select"}
+          </button>
+        </div>
+      ))}
    </div>
  );
 }
--- a/frontend/src/contexts/AuthContext.jsx
+++ b/frontend/src/contexts/AuthContext.jsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useSyncExternalStore } from "react";
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
 import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
@@ -17,98 +17,90 @@ const DEFAULT_TIER_LIMITS = {
  allowed_channels: ["email"],
 };

-// External auth store - lives outside React
-const createAuthStore = () => {
-  let state = {
-    currentUser: null,
-    userTier: "free",
-    tierLimits: DEFAULT_TIER_LIMITS,
-    isSubscribed: false,
-    loading: true,
-  };
-  const listeners = new Set();
+export function AuthProvider({ children }) {
+  const [currentUser, setCurrentUser] = useState(null);
+  const [userTier, setUserTier] = useState("free");
+  const [tierLimits, setTierLimits] = useState(DEFAULT_TIER_LIMITS);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [loading, setLoading] = useState(true);

-  const notify = () => listeners.forEach((fn) => fn());
-
-  const setState = (partial) => {
-    state = { ...state, ...partial };
-    notify();
-  };
-
-  const fetchAccount = async () => {
+  const fetchAccount = useCallback(async () => {
    try {
      const data = await getAccount();
-      setState({
-        userTier: data.subscription_tier || "free",
-        tierLimits: data.tier_limits || DEFAULT_TIER_LIMITS,
-        isSubscribed:
-          data.subscription_status === "active" ||
+      setUserTier(data.subscription_tier || "free");
+      setTierLimits(data.tier_limits || DEFAULT_TIER_LIMITS);
+      setIsSubscribed(
+        data.subscription_status === "active" ||
          data.subscription_status === "trialing",
-      });
+      );
    } catch {
-      setState({ isSubscribed: false });
+      setUserTier("free");
+      setTierLimits(DEFAULT_TIER_LIMITS);
+      setIsSubscribed(false);
    }
-  };
+  }, []);

-  // Set up Firebase listener once, outside of React
-  onAuthStateChanged(auth, async (user) => {
-    setState({ loading: true, currentUser: user });
-    if (user) {
-      await fetchAccount();
-    } else {
-      setState({ isSubscribed: false, userTier: "free", tierLimits: DEFAULT_TIER_LIMITS });
-    }
-    setState({ loading: false });
-  });
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (user) => {
+      if (user) {
+        setLoading(true);
+        setCurrentUser(user);
+        await fetchAccount();
+      } else {
+        setCurrentUser(null);
+        setUserTier("free");
+        setTierLimits(DEFAULT_TIER_LIMITS);
+        setIsSubscribed(false);
+      }
+      setLoading(false);
+    });
+    return unsubscribe;
+  }, [fetchAccount]);

-  return {
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-    getSnapshot: () => state,
-    refreshAccount: fetchAccount,
-  };
-};
+  async function signup(email, password) {
+    const cred = await createUserWithEmailAndPassword(auth, email, password);
+    return cred.user;
+  }

-const authStore = createAuthStore();
+  async function login(email, password) {
+    const cred = await signInWithEmailAndPassword(auth, email, password);
+    return cred.user;
+  }

-export function AuthProvider({ children }) {
-  const state = useSyncExternalStore(authStore.subscribe, authStore.getSnapshot);
+  async function logout() {
+    await signOut(auth);
+  }

-  const signup = (email, password) => createUserWithEmailAndPassword(auth, email, password);
-  const login = (email, password) => signInWithEmailAndPassword(auth, email, password);
-  const logout = () => signOut(auth);
-
-  const sendEmailVerification = () => {
+  async function sendEmailVerification() {
    if (auth.currentUser) {
-      return firebaseSendEmailVerification(auth.currentUser);
+      await firebaseSendEmailVerification(auth.currentUser);
    }
-  };
+  }

-  const reloadUser = async () => {
+  async function reloadUser() {
    if (auth.currentUser) {
      await auth.currentUser.reload();
+      setCurrentUser({ ...auth.currentUser });
      return auth.currentUser;
    }
    return null;
-  };
+  }

  const value = {
-    ...state,
+    currentUser,
+    userTier,
+    tierLimits,
+    isSubscribed,
+    loading,
    signup,
    login,
    logout,
    sendEmailVerification,
    reloadUser,
-    refreshAccount: authStore.refreshAccount,
+    refreshAccount: fetchAccount,
  };

-  return (
-    <AuthContext.Provider value={value}>
-      {!state.loading && children}
-    </AuthContext.Provider>
-  );
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }

 export function useAuth() {
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -82,8 +82,10 @@ button {

 .page {
  max-width: 800px;
+  height: 100%;
  margin: 0 auto;
  padding: 2rem;
+  background-color: red;
 }

 .page--wide {
@@ -412,8 +414,6 @@ button {
  }

  .page {
-    background-color: var(--color-bg);
-    height: 920px;
    padding: 1rem 0.75rem;
  }

--- a/frontend/src/pages/addresses/Addresses.css
+++ b/frontend/src/pages/addresses/Addresses.css
@@ -33,9 +33,8 @@

@media (max-width: 480px) {
  .address__remove {
-    padding: 0rem 0.9rem;
+    margin-left: 0.5rem;
+    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
-    margin-left: -3rem;
-    margin-bottom: 2rem;
  }
 }
--- a/frontend/src/pages/subscribe/Subscribe.jsx
+++ b/frontend/src/pages/subscribe/Subscribe.jsx
@@ -39,7 +39,6 @@ export default function Subscribe() {
    password: "",
    confirmPassword: "",
    selectedTier: null,
-    billingInterval: "annual",
  });
  const [error, setError] = useState(
    searchParams.get("payment") === "cancelled"
@@ -127,7 +126,7 @@ export default function Subscribe() {
        await refreshAccount();
        navigate("/addresses", { replace: true });
      } else {
-        const { url } = await createCheckoutSession(data.selectedTier, data.billingInterval);
+        const { url } = await createCheckoutSession(data.selectedTier);
        window.location.href = url;
      }
    } catch (err) {
@@ -246,10 +245,7 @@ export default function Subscribe() {
          Select the plan that works best for you. You can upgrade anytime.
        </p>
        <TierPicker
-          onSelect={(tier, interval) => {
-            set("selectedTier", tier);
-            set("billingInterval", interval);
-          }}
+          onSelect={(tier) => set("selectedTier", tier)}
          selectedTier={data.selectedTier}
        />
      </>