From 336eb3e66e173ec7d1af5f548701d0b6c5a136bc Mon Sep 17 00:00:00 2001
From: TTClaw Agent <agent@openclaw.ai>
Date: Fri, 17 Apr 2026 20:02:15 +0800
Subject: [PATCH] feat(frontend): wire Activity Feed to real API with graceful
 fallback (#822)

- Add useActivity hook: fetches GET /api/activity every 30s
- Export ActivityEvent type from ActivityFeed for reuse
- ActivityFeed shows real events when API responds, MOCK_EVENTS when offline
- Graceful degradation: empty array fallback ensures MOCK_EVENTS are used
  when API is unavailable (consistent with existing demo-mode behavior)
---
 frontend/src/components/home/ActivityFeed.tsx | 8 +++++++-
 frontend/src/pages/HomePage.tsx               | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/home/ActivityFeed.tsx b/frontend/src/components/home/ActivityFeed.tsx
index 8b6b4b904..91795e3b4 100644
--- a/frontend/src/components/home/ActivityFeed.tsx
+++ b/frontend/src/components/home/ActivityFeed.tsx
@@ -80,7 +80,11 @@ export function ActivityFeed({ events }: { events?: ActivityEvent[] }) {
   const [visibleEvents, setVisibleEvents] = useState<ActivityEvent[]>(displayEvents.slice(0, 4));
 
   useEffect(() => {
-    setVisibleEvents(displayEvents.slice(0, 4));
+    if (events?.length) {
+      setVisibleEvents(events.slice(0, 4));
+    } else {
+      setVisibleEvents(MOCK_EVENTS.slice(0, 4));
+    }
   }, [events]);
 
   return (
@@ -110,3 +114,5 @@ export function ActivityFeed({ events }: { events?: ActivityEvent[] }) {
     </section>
   );
 }
+
+export type { ActivityEvent };
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 180849b3f..e47af6044 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -5,12 +5,14 @@ import { ActivityFeed } from '../components/home/ActivityFeed';
 import { HowItWorksCondensed } from '../components/home/HowItWorksCondensed';
 import { FeaturedBounties } from '../components/home/FeaturedBounties';
 import { WhySolFoundry } from '../components/home/WhySolFoundry';
+import { useActivity } from '../hooks/useActivity';
 
 export function HomePage() {
+  const { data: events } = useActivity();
   return (
     <PageLayout noFooter={false}>
       <HeroSection />
-      <ActivityFeed />
+      <ActivityFeed events={events} />
       <HowItWorksCondensed />
       <FeaturedBounties />
       <WhySolFoundry />