From 33ac132c6cd3f7ac6211c4e1a786d80d02498295 Mon Sep 17 00:00:00 2001
From: Mux Dev <dev@muxprotocol.com>
Date: Sat, 30 May 2026 17:07:51 +0100
Subject: [PATCH] feat: add rule editing analytics hook point (no-op stub)

- Add lib/useAnalytics.ts with typed trackEvent stub and AnalyticsEventName/AnalyticsEventProperties types
- Add optional onRulesChanged prop to RuleBuilder for per-rule add/update/remove callbacks
- Fix missing editingIndex useState declaration in RuleBuilder (pre-existing bug)
- Wire trackEvent in ContractDetailPage at rule_edit_opened, rule_edit_saved, rule_added, rule_removed
- All trackEvent calls are no-ops until a real provider is configured

Closes #100
---
 app/contracts/[id]/page.tsx | 15 ++++++++++++++-
 components/RuleBuilder.tsx  | 20 ++++++++++++++++++--
 lib/useAnalytics.ts         | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 lib/useAnalytics.ts

diff --git a/app/contracts/[id]/page.tsx b/app/contracts/[id]/page.tsx
index b09818e..1a3d986 100644
--- a/app/contracts/[id]/page.tsx
+++ b/app/contracts/[id]/page.tsx
@@ -11,9 +11,11 @@ import AlertRuleBadge from '@/components/AlertRuleBadge'
 import WebhookLog from '@/components/WebhookLog'
 import RuleBuilder from '@/components/RuleBuilder'
 import CopyButton from '@/components/CopyButton'
+import { useAnalytics } from '@/lib/useAnalytics'
 
 export default function ContractDetailPage({ params }: { params: { id: string } }) {
   const router = useRouter()
+  const { trackEvent } = useAnalytics()
   const [contract, setContract] = useState<WatchedContract | null>(null)
   const [alerts, setAlerts] = useState<AlertPayload[]>([])
   const [mounted, setMounted] = useState(false)
@@ -39,6 +41,7 @@ export default function ContractDetailPage({ params }: { params: { id: string }
     setEditedRules(contract!.rules)
     setRulesError(null)
     setShowEditRules(true)
+    trackEvent('rule_edit_opened', { contractId: params.id, ruleCount: contract!.rules.length })
   }
 
   function saveRules() {
@@ -47,6 +50,7 @@ export default function ContractDetailPage({ params }: { params: { id: string }
     saveContract(updated)
     setContract(updated)
     setShowEditRules(false)
+    trackEvent('rule_edit_saved', { contractId: params.id, ruleCount: editedRules.length })
   }
 
   if (!mounted || !contract) return null
@@ -166,7 +170,16 @@ export default function ContractDetailPage({ params }: { params: { id: string }
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm px-4">
           <div className="bg-zinc-900 border border-zinc-700 rounded-xl p-6 max-w-lg w-full space-y-4 max-h-[90vh] overflow-y-auto">
             <h3 className="text-lg font-semibold text-zinc-100">Edit Alert Rules</h3>
-            <RuleBuilder rules={editedRules} onChange={setEditedRules} />
+            <RuleBuilder
+              rules={editedRules}
+              onChange={setEditedRules}
+              onRulesChanged={(rules, action) =>
+                trackEvent(action === 'remove' ? 'rule_removed' : 'rule_added', {
+                  contractId: params.id,
+                  ruleCount: rules.length,
+                })
+              }
+            />
             {rulesError && <p className="text-xs text-red-400">{rulesError}</p>}
             <div className="flex gap-3 pt-2">
               <button
diff --git a/components/RuleBuilder.tsx b/components/RuleBuilder.tsx
index 3c09e8a..9847e51 100644
--- a/components/RuleBuilder.tsx
+++ b/components/RuleBuilder.tsx
@@ -23,6 +23,9 @@ const RULE_EXAMPLES: Record<AlertRuleType, string> = {
 interface RuleBuilderProps {
   rules: AlertRule[]
   onChange: (rules: AlertRule[]) => void
+  /** Optional callback fired whenever a rule is added, updated, or removed.
+   *  Intended as an analytics hook point — no behavior depends on it. */
+  onRulesChanged?: (rules: AlertRule[], action: 'add' | 'update' | 'remove') => void
 }
 
 const emptyRule = (): AlertRule => ({ type: 'AnyTransaction' })
@@ -37,8 +40,9 @@ function rulesEqual(a: AlertRule, b: AlertRule): boolean {
     a.function_names.every((f, i) => f === b.function_names![i])
 }
 
-export default function RuleBuilder({ rules, onChange }: RuleBuilderProps) {
+export default function RuleBuilder({ rules, onChange, onRulesChanged }: RuleBuilderProps) {
   const [draft, setDraft] = useState<AlertRule>(emptyRule())
+  const [editingIndex, setEditingIndex] = useState<number | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [warning, setWarning] = useState<string | null>(null)
 
@@ -105,6 +109,16 @@ export default function RuleBuilder({ rules, onChange }: RuleBuilderProps) {
       setWarning('This rule already exists')
       return
     }
+    if (editingIndex !== null) {
+      const updated = rules.map((r, i) => (i === editingIndex ? draft : r))
+      onChange(updated)
+      onRulesChanged?.(updated, 'update')
+      setEditingIndex(null)
+    } else {
+      const updated = [...rules, draft]
+      onChange(updated)
+      onRulesChanged?.(updated, 'add')
+    }
     setDraft(emptyRule())
     setError(null)
     setWarning(null)
@@ -123,7 +137,9 @@ export default function RuleBuilder({ rules, onChange }: RuleBuilderProps) {
   }
 
   function removeRule(index: number) {
-    onChange(rules.filter((_, i) => i !== index))
+    const updated = rules.filter((_, i) => i !== index)
+    onChange(updated)
+    onRulesChanged?.(updated, 'remove')
   }
 
   return (
diff --git a/lib/useAnalytics.ts b/lib/useAnalytics.ts
new file mode 100644
index 0000000..a38c261
--- /dev/null
+++ b/lib/useAnalytics.ts
@@ -0,0 +1,37 @@
+/**
+ * useAnalytics
+ *
+ * A no-op analytics hook that provides a typed `trackEvent` callback point.
+ * Wire this to a real analytics provider (e.g. Segment, PostHog, Mixpanel)
+ * by replacing the stub implementation below — no call sites need to change.
+ *
+ * Usage:
+ *   const { trackEvent } = useAnalytics()
+ *   trackEvent('rule_edit_opened', { contractId: '...' })
+ */
+
+export type AnalyticsEventName =
+  | 'rule_edit_opened'
+  | 'rule_edit_saved'
+  | 'rule_edit_cancelled'
+  | 'rule_added'
+  | 'rule_removed'
+
+export interface AnalyticsEventProperties {
+  contractId?: string
+  ruleCount?: number
+  ruleType?: string
+  [key: string]: unknown
+}
+
+// Stub: replace this function body to integrate a real analytics provider.
+function trackEventStub(
+  _event: AnalyticsEventName,
+  _properties?: AnalyticsEventProperties,
+): void {
+  // no-op — intentionally empty until a provider is configured
+}
+
+export function useAnalytics() {
+  return { trackEvent: trackEventStub }
+}