feat: surface stack versions in app footer

web-app/src/utils/logger.ts

@@ -1,20 +1,59 @@
-export function info(text: string, data: unknown = null) {
-  if (data) {
-    // console.log(`%c ${text}`, 'color: #17a2b8', data);
-  } else {
-    // console.log(`%c ${text}`, 'color: #17a2b8');
+type LogLevel = 'info' | 'error' | 'contract';
+
+interface LogEntry {
+  level: LogLevel;
+  message: string;
+  data?: unknown;
+  timestamp: string;
+}
+
+const isBrowser = typeof window !== 'undefined';
+const MAX_BUFFER = 50;
+const buffer: LogEntry[] = [];
+
+function emit(entry: LogEntry) {
+  buffer.push(entry);
+  if (buffer.length > MAX_BUFFER) {
+    buffer.shift();
+  }
+
+  if (isBrowser && import.meta.env.DEV) {
+    window.dispatchEvent(
+      new CustomEvent('kraiken:log', {
+        detail: entry,
+      })
+    );
   }
 }
 
-export function contract(text: string, data: unknown = null) {
-  if (data) {
-    // console.log(`%c ${text}`, 'color: #8732a8', data);
-  } else {
-    // console.log(`%c ${text}`, 'color: #8732a8');
-  }
+function buildEntry(level: LogLevel, message: string, data?: unknown): LogEntry {
+  return {
+    level,
+    message,
+    data,
+    timestamp: new Date().toISOString(),
+  };
+}
+
+export function info(message: string, data?: unknown) {
+  emit(buildEntry('info', message, data));
+}
+
+export function contract(message: string, data?: unknown) {
+  emit(buildEntry('contract', message, data));
+}
+
+export function error(message: string, data?: unknown) {
+  emit(buildEntry('error', message, data));
+}
+
+export function getBufferedLogs(): LogEntry[] {
+  return [...buffer];
 }
 
 export default {
   info,
   contract,
+  error,
+  getBufferedLogs,
 };