@buoy-gg/route-events 7.0.33 → 7.0.35

package/lib/commonjs/hooks/useRouteEvents.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRouteEvents = useRouteEvents;
-var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _routeEventStore = require("../stores/routeEventStore");
 /**
  * useRouteEvents Hook
@@ -39,50 +39,19 @@ function useRouteEvents(options = {}) {
     maxEvents = 500,
     enabled = true
   } = options;
-  const [events, setEvents] = (0, _react.useState)([]);
-  // Track listening state locally so it updates reactively with the subscription
-  const [isListening, setIsListening] = (0, _react.useState)(enabled);
-
-  // Subscribe to store - this automatically starts/stops listening
-  // based on subscriber count (Subscribable pattern from TanStack Query)
-  // Only subscribe when enabled is true
-  (0, _react.useEffect)(() => {
-    if (!enabled) {
-      setIsListening(false);
-      return;
-    }
-
-    // Frame-coalesced (see network's useNetworkEventList): navigation
-    // bursts land as one commit per frame instead of one per emission.
-    let rafId = null;
-    let pending = null;
-    const unsubscribe = _routeEventStore.routeEventStore.subscribeToEvents(allEvents => {
-      pending = allEvents;
-      if (rafId != null) return;
-      rafId = requestAnimationFrame(() => {
-        rafId = null;
-        if (!pending) return;
-        const latest = pending;
-        pending = null;
-        setEvents(latest.length > maxEvents ? latest.slice(0, maxEvents) : latest);
-      });
-    });
-
-    // Mark as listening after successful subscription
-    setIsListening(true);
-    return () => {
-      unsubscribe();
-      if (rafId != null) cancelAnimationFrame(rafId);
-      // Note: Don't set isListening=false here because we might be
-      // re-subscribing due to dependency change, not actually stopping
-    };
-  }, [maxEvents, enabled]);
-  const clearEvents = (0, _react.useCallback)(() => {
-    _routeEventStore.routeEventStore.clearEvents();
-  }, []);
+  // Subscribing auto-starts the route observer (Subscribable pattern), and
+  // the shared hook frame-coalesces navigation bursts into one commit.
+  const {
+    events,
+    clearEvents,
+    isActive
+  } = (0, _sharedUi.useEventStoreEvents)(_routeEventStore.routeEventStore, {
+    maxEvents,
+    enabled
+  });
   return {
     events,
     clearEvents,
-    isListening
+    isListening: isActive
   };
 }

package/lib/commonjs/preset.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createRouteEventsTool = createRouteEventsTool;
-exports.routeEventsToolPreset = void 0;
+exports.routeEventsToolPreset = exports.createRouteEventsTool = void 0;
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
 var _RouteEventsModalWithTabs = require("./components/RouteEventsModalWithTabs");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pre-configured route events tool for FloatingDevTools
@@ -33,7 +33,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - Navigation stack visualization
  * - Automatic route tracking (no setup needed)
  */
-const routeEventsToolPreset = exports.routeEventsToolPreset = {
+const routeEventsToolPreset = exports.routeEventsToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "route-events",
   name: "ROUTES",
   description: "Route tracking & navigation inspector",
@@ -47,7 +47,7 @@ const routeEventsToolPreset = exports.routeEventsToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom route events tool configuration.
@@ -64,20 +64,6 @@ const routeEventsToolPreset = exports.routeEventsToolPreset = {
  * });
  * ```
  */
-function createRouteEventsTool(options) {
-  return {
-    id: options?.id || "route-events",
-    name: options?.name || "ROUTES",
-    description: options?.description || "Route tracking & navigation inspector",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.RoutesIcon, {
-      size: size
-    }),
-    component: _RouteEventsModalWithTabs.RouteEventsModalWithTabs,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+const createRouteEventsTool = exports.createRouteEventsTool = (0, _sharedUi.createToolFactory)(routeEventsToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}));

package/lib/module/components/NavigationStack.js

@@ -9,7 +9,7 @@
 
 import { useState, useMemo, useEffect } from "react";
 import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert } from "react-native";
-import { ChevronDown, ChevronRight, InlineCopyButton, ProUpgradeModal, buoyColors, night, useSafeAreaInsets, ToolEmptyState } from "@buoy-gg/shared-ui";
+import { ChevronDown, ChevronRight, InlineCopyButton, ProUpgradeModal, buoyColors, night, useSafeAreaInsets, ToolEmptyState, monoFont } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { useNavigationStack } from "../useNavigationStack";
@@ -412,7 +412,7 @@ const styles = StyleSheet.create({
   loadingText: {
     color: night.color.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   errorContainer: {
     flex: 1,
@@ -424,13 +424,13 @@ const styles = StyleSheet.create({
     color: buoyColors.error,
     fontSize: 16,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginBottom: 8
   },
   errorDetail: {
     color: night.color.textSecondary,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "center"
   },
   emptyContainer: {
@@ -443,13 +443,13 @@ const styles = StyleSheet.create({
     color: night.color.text,
     fontSize: 16,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginBottom: 8
   },
   emptySubtext: {
     color: night.color.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "center"
   },
   stackScroll: {
@@ -487,7 +487,7 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   copyRouteButton: {
@@ -503,7 +503,7 @@ const styles = StyleSheet.create({
   statusBadgeText: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   expandedContent: {
     paddingHorizontal: 12,
@@ -518,13 +518,13 @@ const styles = StyleSheet.create({
   detailLabel: {
     fontSize: 10,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginBottom: 2
   },
   detailValue: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   dataViewerContainer: {
     marginTop: 4,
@@ -553,7 +553,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   actionButtonTextDisabled: {
     color: night.color.textTertiary
@@ -561,7 +561,7 @@ const styles = StyleSheet.create({
   helpText: {
     fontSize: 9,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "center",
     marginTop: 4,
     lineHeight: 12

package/lib/module/components/ReactNavigationRoutes.js

@@ -18,7 +18,7 @@ import { getCommonActions, useSafeNavigationContainerRef } from "../utils/safeRe
 // (useSafeNavigationContainerRef then yields undefined, so the dispatch
 // paths below never execute).
 const CommonActions = getCommonActions();
-import { Search, ChevronDown, ChevronRight, InlineCopyButton, ToolbarCopyButton, RefreshCw, ProUpgradeModal, buoyColors, night } from "@buoy-gg/shared-ui";
+import { Search, ChevronDown, ChevronRight, InlineCopyButton, ToolbarCopyButton, RefreshCw, ProUpgradeModal, buoyColors, night, monoFont } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // ============================================================================
@@ -546,12 +546,12 @@ const styles = StyleSheet.create({
   emptyText: {
     color: night.color.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   emptySubtext: {
     color: night.color.textTertiary,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 8
   },
   header: {
@@ -589,7 +589,7 @@ const styles = StyleSheet.create({
   actionLabel: {
     fontSize: 8,
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -616,13 +616,13 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: "800",
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   statLabel: {
     fontSize: 10,
     color: night.color.textTertiary,
     marginTop: 4,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -638,7 +638,7 @@ const styles = StyleSheet.create({
     flex: 1,
     color: night.color.text,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   clearButton: {
     padding: 4
@@ -655,7 +655,7 @@ const styles = StyleSheet.create({
     color: night.color.accent,
     fontSize: 14,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   scrollView: {
     flex: 1
@@ -677,7 +677,7 @@ const styles = StyleSheet.create({
   metaText: {
     fontSize: 12,
     color: night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   sourceBadge: {
     paddingHorizontal: 8,
@@ -691,7 +691,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: night.color.textSecondary,
     textTransform: "capitalize",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   groupContainer: {
     marginVertical: 4
@@ -716,7 +716,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "700",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.8
   },
@@ -735,7 +735,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: "#3B82F6",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   screensList: {
     // Transparent so the night sheet's star field shows through.
@@ -752,7 +752,7 @@ const styles = StyleSheet.create({
   groupDescriptionText: {
     fontSize: 11,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 16
   },
   screenItem: {
@@ -791,7 +791,7 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   screenHeaderActions: {
@@ -808,7 +808,7 @@ const styles = StyleSheet.create({
   statusText: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   headerActionButton: {
     padding: 6,
@@ -826,7 +826,7 @@ const styles = StyleSheet.create({
   navigateButtonText: {
     fontSize: 12,
     color: night.color.accent,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   }
 });

package/lib/module/components/RouteEventDetail.js

@@ -10,7 +10,7 @@
  */
 
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
-import { Navigation, night } from "@buoy-gg/shared-ui";
+import { Navigation, night, monoFont } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
 import { getRouteTemplate } from "../utils/routeTemplate";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -86,7 +86,7 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     // Ink on a filled accent surface — the night accent takes dark ink.
     color: night.color.onAccent,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.5
   }

package/lib/module/components/RouteEventExpandedContent.js

@@ -10,7 +10,7 @@
  */
 
 import { View, Text, StyleSheet } from "react-native";
-import { InlineCopyButton, night } from "@buoy-gg/shared-ui";
+import { InlineCopyButton, night, monoFont } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Format duration in milliseconds to human-readable string
@@ -168,14 +168,14 @@ const styles = StyleSheet.create({
   detailLabel: {
     fontSize: 10,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     minWidth: 70
   },
   detailValue: {
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   copyButton: {
@@ -194,7 +194,7 @@ const styles = StyleSheet.create({
   dataViewerTitle: {
     fontSize: 11,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   }
 });

package/lib/module/components/RouteEventItemCompact.js

@@ -8,7 +8,7 @@
 
 import { memo, useMemo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { CompactRow, RelativeTime, buoyColors, night } from "@buoy-gg/shared-ui";
+import { CompactRow, RelativeTime, buoyColors, night, monoFont } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
 import { getRouteTemplate } from "../utils/routeTemplate";
 import { eventRowTestID } from "../utils/testIDs";
@@ -187,7 +187,7 @@ const styles = StyleSheet.create({
   badgeText: {
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   goButton: {
     backgroundColor: night.color.accent,
@@ -200,6 +200,6 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     // Ink on a filled accent surface — the night accent takes dark ink.
     color: night.color.onAccent,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -8,8 +8,8 @@ import { getCommonActions, useSafeNavigationContainerRef } from "../utils/safeRe
 // (useSafeNavigationContainerRef then yields undefined, so the dispatch
 // paths below never execute).
 const CommonActions = getCommonActions();
-import { useSafeRouter, isExpoRouterAvailable, windowDragProps, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
-import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Trash2, Filter, SearchBar, persistentStorage, ToolbarCopyButton, Lock, ProUpgradeModal, PowerToggleButton, buoyColors, night, TickProvider, useLimit } from "@buoy-gg/shared-ui";
+import { useSafeRouter, isExpoRouterAvailable, windowDragProps, ToolEmptyState, resolveListEmptyState, usePersistedState, monoFont } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Trash2, Filter, SearchBar, ToolbarCopyButton, Lock, ProUpgradeModal, PowerToggleButton, buoyColors, night, TickProvider, useLimit } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // Free tier limit for route events
@@ -22,6 +22,23 @@ import { ReactNavigationRoutes } from "./ReactNavigationRoutes";
 import { NavigationStack } from "./NavigationStack";
 import { RouteEventsTimeline } from "./RouteEventsTimeline";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Persistence recipes: the tab is stored as its bare name, the flag as "true"/"false". */
+const TAB_PERSISTENCE = {
+  // Every tab the selector offers, including "stack": the save side has
+  // always written it, so leaving it off this list meant the Stack tab
+  // was persisted and then silently discarded on the next launch.
+  parse: raw => raw === "routes" || raw === "events" || raw === "stack" ? raw : undefined,
+  serialize: tab => tab
+};
+const BOOLEAN_PERSISTENCE = {
+  parse: raw => raw === "true",
+  serialize: value => value.toString()
+};
+const STRING_SET_PERSISTENCE = {
+  parse: raw => new Set(JSON.parse(raw)),
+  serialize: set => JSON.stringify(Array.from(set))
+};
+
 /**
  * Find the path from root navigation state to a screen by name.
  * Returns array of route names from root to the target, or null if not found.
@@ -82,7 +99,7 @@ export function RouteEventsModalWithTabs({
   const router = useSafeRouter();
   const containerRef = useSafeNavigationContainerRef();
   const hasExpoRouter = isExpoRouterAvailable();
-  const [activeTab, setActiveTab] = useState("events");
+  const [activeTab, setActiveTab] = usePersistedState(devToolsStorageKeys.routeEvents.activeTab(), "events", TAB_PERSISTENCE);
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
   // Serialized stack reported up by NavigationStack so the copy button can live
   // in the shared navbar.
@@ -104,7 +121,7 @@ export function RouteEventsModalWithTabs({
   // See the RouteTracker component export for easy setup.
 
   // Local state to control subscription (true = subscribed, false = unsubscribed)
-  const [isListeningEnabled, setIsListeningEnabled] = useState(true);
+  const [isListeningEnabled, setIsListeningEnabled] = usePersistedState(devToolsStorageKeys.routeEvents.isMonitoring(), true, BOOLEAN_PERSISTENCE);
 
   // Event Listener state - using centralized store via hook
   // Pass enabled option to control subscription
@@ -124,11 +141,8 @@ export function RouteEventsModalWithTabs({
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [selectedVisitNumber, setSelectedVisitNumber] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
-  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set(["/_sitemap", "/api", "/__dev"]));
+  const [ignoredPatterns, setIgnoredPatterns] = usePersistedState(devToolsStorageKeys.routeEvents.eventFilters(), new Set(["/_sitemap", "/api", "/__dev"]), STRING_SET_PERSISTENCE);
   const lastEventRef = useRef(null);
-  const hasLoadedFilters = useRef(false);
-  const hasLoadedTabState = useRef(false);
-  const hasLoadedMonitoringState = useRef(false);
   const handleModeChange = useCallback(_mode => {
     // Mode changes handled by JsModal
   }, []);
@@ -180,103 +194,6 @@ export function RouteEventsModalWithTabs({
     }
   }, [router, containerRef, hasExpoRouter, remote, isPro]);
 
-  // Load persisted tab state on mount
-  useEffect(() => {
-    if (!visible || hasLoadedTabState.current) return;
-    const loadTabState = async () => {
-      try {
-        const storedTab = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.activeTab());
-        // Every tab the selector offers, including "stack": the save side has
-        // always written it, so leaving it off this list meant the Stack tab
-        // was persisted and then silently discarded on the next launch —
-        // you came back to Events having chosen otherwise.
-        if (storedTab === "routes" || storedTab === "events" || storedTab === "stack") {
-          setActiveTab(storedTab);
-        }
-        hasLoadedTabState.current = true;
-      } catch (error) {
-        // Failed to load tab state
-      }
-    };
-    loadTabState();
-  }, [visible]);
-
-  // Load persisted monitoring state on mount
-  useEffect(() => {
-    if (!visible || hasLoadedMonitoringState.current) return;
-    const loadMonitoringState = async () => {
-      try {
-        const storedMonitoring = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.isMonitoring());
-        if (storedMonitoring !== null) {
-          const shouldMonitor = storedMonitoring === "true";
-          setIsListeningEnabled(shouldMonitor);
-        }
-        hasLoadedMonitoringState.current = true;
-      } catch (error) {
-        // Failed to load monitoring state
-      }
-    };
-    loadMonitoringState();
-  }, [visible]);
-
-  // Save tab state when it changes
-  useEffect(() => {
-    if (!hasLoadedTabState.current) return;
-    const saveTabState = async () => {
-      try {
-        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.activeTab(), activeTab);
-      } catch (error) {
-        // Failed to save tab state
-      }
-    };
-    saveTabState();
-  }, [activeTab]);
-
-  // Save monitoring state when it changes
-  useEffect(() => {
-    if (!hasLoadedMonitoringState.current) return;
-    const saveMonitoringState = async () => {
-      try {
-        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.isMonitoring(), isListening.toString());
-      } catch (error) {
-        // Failed to save monitoring state
-      }
-    };
-    saveMonitoringState();
-  }, [isListening]);
-
-  // Load persisted filters on mount
-  useEffect(() => {
-    if (!visible || hasLoadedFilters.current) return;
-    const loadFilters = async () => {
-      try {
-        const storedFilters = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.eventFilters());
-        if (storedFilters) {
-          const filters = JSON.parse(storedFilters);
-          setIgnoredPatterns(new Set(filters));
-        }
-        hasLoadedFilters.current = true;
-      } catch (error) {
-        // Failed to load filters
-      }
-    };
-    loadFilters();
-  }, [visible]);
-
-  // Save filters when they change
-  useEffect(() => {
-    if (!hasLoadedFilters.current) return;
-    const saveFilters = async () => {
-      try {
-        const filters = Array.from(ignoredPatterns);
-        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.eventFilters(), JSON.stringify(filters));
-      } catch (error) {
-        // Failed to save filters
-      }
-    };
-    saveFilters();
-  }, [ignoredPatterns]);
-
   // Event listener is now managed by useRouteEvents hook
 
   const handleToggleListening = useCallback(() => {
@@ -726,7 +643,7 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     marginTop: 16,
     marginBottom: 8,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     textTransform: "uppercase"
   },
@@ -734,7 +651,7 @@ const styles = StyleSheet.create({
     color: night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   contentWrapper: {
     flex: 1
@@ -749,7 +666,7 @@ const styles = StyleSheet.create({
   statsText: {
     fontSize: 11,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "center"
   },
   statsWarning: {
@@ -779,7 +696,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: night.color.warning,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   lockedEventsBannerSubtext: {
     fontSize: 11,