From 28efc387bff7c195f01224a879b54a5cc10bae27 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Fri, 10 Apr 2026 22:44:38 +0100
Subject: [PATCH 01/23] fix(cache): clear min stake entries during
 invalidate-all

Include minStakeAmounts in full cache invalidation so size accounting and invalidateAll behavior remain consistent.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/lib/blockchain-cache.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/lib/blockchain-cache.ts b/frontend/src/lib/blockchain-cache.ts
index 74c3dadb..ad664f85 100644
--- a/frontend/src/lib/blockchain-cache.ts
+++ b/frontend/src/lib/blockchain-cache.ts
@@ -134,6 +134,7 @@ class BlockchainDataCache {
     this.proposalPages.clear();
     this.proposalCounts.clear();
     this.stakes.clear();
+    this.minStakeAmounts.clear();
   }
 
   getStats(): CacheStats {

From 3cfa5aef563239f99bf82be950fd75999959244b Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Sat, 11 Apr 2026 01:27:20 +0100
Subject: [PATCH 02/23] test(vitest): align @ alias with src root

Update Vitest path aliasing so @/* resolves to frontend/src/* consistently in test runs.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/vitest.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index 4bde83a7..c9f70ffa 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -29,7 +29,6 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@': resolve(configDir, '.'),
       '@/lib': resolve(configDir, 'src/lib'),
       '@/types': resolve(configDir, 'src/types'),
       '@/hooks': resolve(configDir, 'src/hooks'),
@@ -37,6 +36,7 @@ export default defineConfig({
       '@/services': resolve(configDir, 'src/services'),
       '@/components': resolve(configDir, 'components'),
       '@/utils': resolve(configDir, 'utils'),
+      '@': resolve(configDir, 'src'),
     },
   },
 });

From d87b9d915958dd45f3474f028a5bcb9224deecab Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Sat, 11 Apr 2026 01:27:20 +0100
Subject: [PATCH 03/23] test(jsdom): add matchMedia and scrollIntoView shims

Provide stable browser API shims required by app-level component tests under jsdom.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/test/vitest.setup.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/test/vitest.setup.ts b/frontend/src/test/vitest.setup.ts
index bf637d33..291315cc 100644
--- a/frontend/src/test/vitest.setup.ts
+++ b/frontend/src/test/vitest.setup.ts
@@ -31,3 +31,23 @@ vi.mock('@stacks/connect-react', () => {
     Connect: ({ children }: { children: React.ReactNode }) => children,
   };
 });
+
+if (!window.matchMedia) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}
+
+if (!Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = vi.fn();
+}

From 57fe3df4bd727049ad035a97cf1566803c65a60d Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Sat, 11 Apr 2026 01:27:20 +0100
Subject: [PATCH 04/23] test(app): fix hydration test mocks and module paths

Correct mocked module paths and add required app dependency mocks for hydration suite reliability.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/__tests__/app-hydration.test.tsx | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/__tests__/app-hydration.test.tsx b/frontend/src/__tests__/app-hydration.test.tsx
index 632b7799..2376c9c6 100644
--- a/frontend/src/__tests__/app-hydration.test.tsx
+++ b/frontend/src/__tests__/app-hydration.test.tsx
@@ -18,9 +18,28 @@ vi.mock('../store/wallet', () => ({
   }),
 }));
 
-vi.mock('../../components/Layout', () => ({
+vi.mock('../hooks/useKeyboardShortcuts', () => ({
+  useKeyboardShortcuts: vi.fn(),
+  useNavigationShortcuts: vi.fn(() => ({
+    goToDashboard: vi.fn(),
+    goToProposals: vi.fn(),
+    goToProfile: vi.fn(),
+    createProposal: vi.fn(),
+  })),
+}));
+vi.mock('../hooks/useCommandPalette', () => ({
+  useCommandPalette: vi.fn(),
+  filterCommands: (commands: unknown[]) => commands,
+}));
+vi.mock('../components/Layout', () => ({
   Layout: () => <div data-testid="layout">Layout</div>,
 }));
+vi.mock('../components/OfflineBanner', () => ({
+  OfflineBanner: () => <div data-testid="offline-banner" />,
+}));
+vi.mock('../../components/TransactionHistory', () => ({
+  default: () => <div data-testid="transaction-history" />,
+}));
 
 describe('App hydration initialization', () => {
   beforeEach(() => {

From 9fc7fdb56d87c56a499345ba2b2e287f9c136be3 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Sat, 11 Apr 2026 01:27:20 +0100
Subject: [PATCH 05/23] test(app): stabilize command palette integration tests

Fix wallet mock behavior, preserve keyboard shortcut hook behavior, and harden brittle assertions to match rendered structure.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../__tests__/app-command-palette.test.tsx    | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/__tests__/app-command-palette.test.tsx b/frontend/src/__tests__/app-command-palette.test.tsx
index c7db3254..7ff8eef5 100644
--- a/frontend/src/__tests__/app-command-palette.test.tsx
+++ b/frontend/src/__tests__/app-command-palette.test.tsx
@@ -2,23 +2,41 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import App from '../App';
-import * as wallet from '../store/wallet';
 
-vi.mock('./store/wallet', () => ({
-  useWalletStore: vi.fn(() => ({
-    hydrate: vi.fn(),
-  })),
+vi.mock('../store/wallet', () => ({
+  useWalletStore: vi.fn((selector) =>
+    selector({
+      address: null,
+      connected: false,
+      loading: false,
+      connect: vi.fn(),
+      disconnect: vi.fn(),
+      hydrate: vi.fn(),
+    }),
+  ),
 }));
+vi.mock('../hooks/useKeyboardShortcuts', async () => {
+  const actual = await vi.importActual('../hooks/useKeyboardShortcuts');
+  return {
+    ...actual,
+    useNavigationShortcuts: vi.fn(() => ({
+      goToDashboard: vi.fn(),
+      goToProposals: vi.fn(),
+      goToProfile: vi.fn(),
+      createProposal: vi.fn(),
+    })),
+  };
+});
 vi.mock('../components/OfflineBanner', () => ({
   OfflineBanner: () => <div data-testid="offline-banner" />,
 }));
+vi.mock('../../components/TransactionHistory', () => ({
+  default: () => <div data-testid="transaction-history" />,
+}));
 
 describe('App - Command Palette Integration', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.mocked(wallet.useWalletStore).mockImplementation(() => ({
-      hydrate: vi.fn(),
-    }));
   });
 
   it('renders without command palette visible initially', () => {
@@ -69,7 +87,7 @@ describe('App - Command Palette Integration', () => {
     await waitFor(() => {
       expect(screen.getByText('Go to Dashboard')).toBeInTheDocument();
       expect(screen.getByText('Create New Proposal')).toBeInTheDocument();
-      expect(screen.getByText('Browse Proposals')).toBeInTheDocument();
+      expect(screen.getAllByText('Browse Proposals').length).toBeGreaterThan(0);
     });
   });
 
@@ -184,7 +202,9 @@ describe('App - Command Palette Integration', () => {
       ).toBeInTheDocument();
     });
 
-    const backdrop = screen.getByRole('presentation', { hidden: true });
+    const backdrop = document.querySelector('.fixed.inset-0.bg-black\\/40.z-40');
+    expect(backdrop).toBeTruthy();
+    if (!backdrop) return;
     fireEvent.click(backdrop);
 
     await waitFor(() => {

From e207f3a5afa1c3ef2d1f950a1ace983db3836f0a Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Wed, 15 Apr 2026 21:45:44 +0100
Subject: [PATCH 06/23] chore(frontend): trim ui imports

---
 frontend/components/TwitterShareButton.tsx            |  3 +--
 frontend/components/UserStatsDashboard.tsx            | 10 +++-------
 frontend/components/VoteDelegationSystem.tsx          |  2 +-
 frontend/components/VotingPowerConcentrationChart.tsx |  2 +-
 frontend/components/WarRoom.tsx                       |  1 -
 frontend/components/analytics/InsightsFeed.tsx        |  2 +-
 frontend/components/analytics/PerformanceTracker.tsx  |  4 ++--
 7 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/frontend/components/TwitterShareButton.tsx b/frontend/components/TwitterShareButton.tsx
index f43865ee..69f98b06 100644
--- a/frontend/components/TwitterShareButton.tsx
+++ b/frontend/components/TwitterShareButton.tsx
@@ -2,10 +2,9 @@
 
 interface TwitterShareButtonProps {
     proposalTitle: string;
-    proposalId: number;
 }
 
-export default function TwitterShareButton({ proposalTitle, proposalId }: TwitterShareButtonProps) {
+export default function TwitterShareButton({ proposalTitle }: TwitterShareButtonProps) {
     const handleShare = () => {
         const text = `Check out this proposal on SprintFund: "${proposalTitle}" 🚀\n\nVote now and help shape the future of decentralized funding!\n\n#SprintFund #StacksDAO #Web3`;
         const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;
diff --git a/frontend/components/UserStatsDashboard.tsx b/frontend/components/UserStatsDashboard.tsx
index 8f6aa7c5..bedf234f 100644
--- a/frontend/components/UserStatsDashboard.tsx
+++ b/frontend/components/UserStatsDashboard.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Line, Doughnut, Bar } from 'react-chartjs-2';
 import {
   Chart as ChartJS,
@@ -41,11 +41,7 @@ interface CategoryData {
   color: string;
 }
 
-interface UserStatsDashboardProps {
-  userAddress: string;
-}
-
-export default function UserStatsDashboard({ userAddress }: UserStatsDashboardProps) {
+export default function UserStatsDashboard() {
   const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | '1y'>('30d');
   const [votingData] = useState<VotingData[]>([
     { date: '2024-01-01', votes: 5, proposals: 3 },
@@ -338,7 +334,7 @@ export default function UserStatsDashboard({ userAddress }: UserStatsDashboardPr
             <div className="text-2xl mb-2">🎯</div>
             <h4 className="font-semibold mb-1 text-sm">Expand Categories</h4>
             <p className="text-xs text-gray-600 dark:text-gray-400">
-              You're most active in DeFi. Try voting on Infrastructure proposals to diversify!
+              You&apos;re most active in DeFi. Try voting on Infrastructure proposals to diversify!
             </p>
           </div>
           <div className="bg-white dark:bg-gray-800 rounded-lg p-4">
diff --git a/frontend/components/VoteDelegationSystem.tsx b/frontend/components/VoteDelegationSystem.tsx
index 7ffbbcfc..db779780 100644
--- a/frontend/components/VoteDelegationSystem.tsx
+++ b/frontend/components/VoteDelegationSystem.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Users, Shield, ArrowRight, Star, Search } from 'lucide-react';
+import { Shield, ArrowRight, Star, Search } from 'lucide-react';
 
 const delegates = [
     { address: 'SP12...ABCD', name: 'Mosa', reputation: 4.9, activeVotes: 156, categories: ['DeFi', 'Infrastructure'] },
diff --git a/frontend/components/VotingPowerConcentrationChart.tsx b/frontend/components/VotingPowerConcentrationChart.tsx
index 2e92c8e4..e9209f67 100644
--- a/frontend/components/VotingPowerConcentrationChart.tsx
+++ b/frontend/components/VotingPowerConcentrationChart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
 import { useGovernanceAnalytics } from '@/hooks/useGovernanceAnalytics';
 
 const COLORS = ['#8b5cf6', '#06b6d4', '#f59e0b', '#10b981'];
diff --git a/frontend/components/WarRoom.tsx b/frontend/components/WarRoom.tsx
index aca2c572..8e9654cf 100644
--- a/frontend/components/WarRoom.tsx
+++ b/frontend/components/WarRoom.tsx
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import LiveVoteStream from './LiveVoteStream';
-import { motion } from 'framer-motion';
 
 export default function WarRoom() {
     return (
diff --git a/frontend/components/analytics/InsightsFeed.tsx b/frontend/components/analytics/InsightsFeed.tsx
index 34716f26..b98f2155 100644
--- a/frontend/components/analytics/InsightsFeed.tsx
+++ b/frontend/components/analytics/InsightsFeed.tsx
@@ -9,7 +9,7 @@ export default function InsightsFeed() {
     const [insights, setInsights] = useState<Insight[]>([]);
     const [loading, setLoading] = useState(true);
     const [filter, setFilter] = useState<'all' | Insight['type']>('all');
-    const [sortBy, setSortBy] = useState<'priority' | 'recency'>('priority');
+    const [sortBy] = useState<'priority' | 'recency'>('priority');
     const [search, setSearch] = useState('');
     const [dismissedIds, setDismissedIds] = useState<string[]>([]);
     const [selectedInsight, setSelectedInsight] = useState<Insight | null>(null);
diff --git a/frontend/components/analytics/PerformanceTracker.tsx b/frontend/components/analytics/PerformanceTracker.tsx
index e892d9c5..ac9787d1 100644
--- a/frontend/components/analytics/PerformanceTracker.tsx
+++ b/frontend/components/analytics/PerformanceTracker.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
+import { XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
 
 export default function PerformanceTracker() {
     const [activeTab, setActiveTab] = useState<'overview' | 'achievements' | 'learning'>('overview');
@@ -146,7 +146,7 @@ export default function PerformanceTracker() {
 
                     <div className="mt-8 p-4 bg-white/10 rounded-xl border border-white/10">
                         <p className="text-xs italic opacity-90">
-                            "You are currently performing in the top 5% of active proposers this quarter. Keep focusing on technical documentation."
+                            &quot;You are currently performing in the top 5% of active proposers this quarter. Keep focusing on technical documentation.&quot;
                         </p>
                     </div>
                 </div>

From 5c9452009002b0a748f4a2ee77dcb9a64448c09a Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 00:07:00 +0100
Subject: [PATCH 07/23] chore(frontend): clear lint tail

---
 frontend/components/ProposalDependencies.tsx  | 11 ++++--
 frontend/components/ProposalList.tsx          | 38 +++++++++----------
 frontend/components/ProposalTemplates.tsx     |  8 ++--
 .../components/TreasuryDiversification.tsx    | 16 ++------
 .../components/analytics/CommunityTab.tsx     | 37 +-----------------
 .../analytics/ProposalComparator.tsx          | 27 +------------
 6 files changed, 38 insertions(+), 99 deletions(-)

diff --git a/frontend/components/ProposalDependencies.tsx b/frontend/components/ProposalDependencies.tsx
index 2ea5d731..237660a7 100644
--- a/frontend/components/ProposalDependencies.tsx
+++ b/frontend/components/ProposalDependencies.tsx
@@ -14,7 +14,7 @@ interface ProposalDependenciesProps {
   currentProposalTitle: string;
 }
 
-export default function ProposalDependencies({ proposalId: _proposalId, currentProposalTitle: _currentProposalTitle }: ProposalDependenciesProps) {
+export default function ProposalDependencies({ proposalId, currentProposalTitle }: ProposalDependenciesProps) {
   const [dependencies, setDependencies] = useState<Dependency[]>([
     {
       proposalId: 12,
@@ -125,7 +125,12 @@ export default function ProposalDependencies({ proposalId: _proposalId, currentP
   return (
     <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
       <div className="flex items-center justify-between mb-6">
-        <h3 className="text-xl font-bold">🔗 Proposal Dependencies</h3>
+        <div>
+          <h3 className="text-xl font-bold">🔗 Proposal Dependencies</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Proposal #{proposalId}: {currentProposalTitle}
+          </p>
+        </div>
         <button
           onClick={() => setShowAddForm(!showAddForm)}
           className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
@@ -273,7 +278,7 @@ export default function ProposalDependencies({ proposalId: _proposalId, currentP
           <div className="flex items-center gap-2 overflow-x-auto pb-2">
             {dependencies
               .filter((d) => d.type === 'requires')
-              .map((dep, idx) => (
+              .map((dep) => (
                 <div key={dep.proposalId} className="flex items-center gap-2">
                   <div className="px-3 py-2 bg-white dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600 text-sm whitespace-nowrap">
                     #{dep.proposalId}
diff --git a/frontend/components/ProposalList.tsx b/frontend/components/ProposalList.tsx
index dd851b38..1e4068f3 100644
--- a/frontend/components/ProposalList.tsx
+++ b/frontend/components/ProposalList.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { boolCV, uintCV, AnchorMode, PostConditionMode } from '@stacks/transactions';
-import { getAllProposals, getStake, callVote } from '@/lib/stacks';
+import { getAllProposals, getStake } from '@/lib/stacks';
 import { formatSTX } from '@/utils/formatSTX';
 import { CONTRACT_ADDRESS, CONTRACT_NAME } from '../config';
 import { getStacksNetwork } from '../src/config/stacks-network';
@@ -45,9 +45,25 @@ export default function ProposalList({ userAddress }: ProposalListProps) {
         activeFilterCount,
     } = useNextProposalFilters();
 
+    const fetchProposals = useCallback(async () => {
+        try {
+            setLoading(true);
+            setError('');
+
+            // Use centralized API with caching
+            const fetchedProposals = await getAllProposals();
+            setProposals(fetchedProposals);
+        } catch (err: unknown) {
+            console.error('Error fetching proposals:', err);
+            setError('Failed to load proposals. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
     useEffect(() => {
         fetchProposals();
-    }, []);
+    }, [fetchProposals]);
 
     useEffect(() => {
         const fetchStake = async () => {
@@ -71,22 +87,6 @@ export default function ProposalList({ userAddress }: ProposalListProps) {
         fetchStake();
     }, [userAddress]);
 
-    const fetchProposals = useCallback(async () => {
-        try {
-            setLoading(true);
-            setError('');
-
-            // Use centralized API with caching
-            const fetchedProposals = await getAllProposals();
-            setProposals(fetchedProposals);
-            setLoading(false);
-        } catch (err: unknown) {
-            console.error('Error fetching proposals:', err);
-            setError('Failed to load proposals. Please try again.');
-            setLoading(false);
-        }
-    }, []);
-
     useRefreshOnConfirmation(fetchProposals);
 
     // Uses centralized formatSTX from utils/formatSTX
@@ -159,7 +159,7 @@ export default function ProposalList({ userAddress }: ProposalListProps) {
             const { openContractCall } = await import('@stacks/connect');
             await execute(async () => {
                 return new Promise<string>((resolve, reject) => {
-                    const result = openContractCall({
+                    openContractCall({
                         ...options,
                         onFinish: (data: { txId: string }) => {
                             console.log('Vote transaction submitted:', data);
diff --git a/frontend/components/ProposalTemplates.tsx b/frontend/components/ProposalTemplates.tsx
index fcce6b0a..89c1bdb4 100644
--- a/frontend/components/ProposalTemplates.tsx
+++ b/frontend/components/ProposalTemplates.tsx
@@ -183,14 +183,12 @@ interface ProposalTemplatesProps {
 export default function ProposalTemplates({ onTemplateSelect }: ProposalTemplatesProps) {
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const [previewTemplate, setPreviewTemplate] = useState<Template | null>(null);
-  const [customTemplates, _setCustomTemplates] = useState<Template[]>([]);
 
   const categories = ['all', 'Funding', 'Governance', 'Technical', 'Community'];
 
-  const filteredTemplates = [
-    ...PREDEFINED_TEMPLATES,
-    ...customTemplates
-  ].filter(t => selectedCategory === 'all' || t.category === selectedCategory);
+  const filteredTemplates = PREDEFINED_TEMPLATES.filter(
+    (t) => selectedCategory === 'all' || t.category === selectedCategory
+  );
 
   const getCategoryColor = (category: string) => {
     switch (category) {
diff --git a/frontend/components/TreasuryDiversification.tsx b/frontend/components/TreasuryDiversification.tsx
index dca8a14f..c594be43 100644
--- a/frontend/components/TreasuryDiversification.tsx
+++ b/frontend/components/TreasuryDiversification.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Doughnut, Bar } from 'react-chartjs-2';
 import {
   Chart as ChartJS,
@@ -46,7 +46,7 @@ interface RebalanceRecommendation {
 }
 
 export default function TreasuryDiversification() {
-  const [assets, setAssets] = useState<Asset[]>([
+  const [assets] = useState<Asset[]>([
     { name: 'STX', symbol: 'STX', amount: 1800000, value: 1800000, percentage: 72, risk: 'medium' },
     { name: 'BTC', symbol: 'BTC', amount: 2.5, value: 107500, percentage: 4.3, risk: 'low' },
     { name: 'USDC', symbol: 'USDC', amount: 300000, value: 300000, percentage: 12, risk: 'low' },
@@ -56,7 +56,7 @@ export default function TreasuryDiversification() {
     { name: 'Staked STX', symbol: 'stSTX', amount: 125000, value: 128750, percentage: 5.2, risk: 'low', apy: 8.5, protocol: 'StackingDAO' }
   ]);
 
-  const [defiPositions, setDefiPositions] = useState<DeFiPosition[]>([
+  const [defiPositions] = useState<DeFiPosition[]>([
     {
       protocol: 'StackingDAO',
       type: 'staking',
@@ -99,7 +99,7 @@ export default function TreasuryDiversification() {
     }
   ]);
 
-  const [recommendations, setRecommendations] = useState<RebalanceRecommendation[]>([
+  const [recommendations] = useState<RebalanceRecommendation[]>([
     {
       action: 'sell',
       asset: 'STX',
@@ -130,14 +130,6 @@ export default function TreasuryDiversification() {
     }
   ]);
 
-  const [targetAllocation, setTargetAllocation] = useState({
-    stx: 55,
-    btc: 12,
-    stablecoins: 18,
-    defi: 10,
-    other: 5
-  });
-
   const totalValue = assets.reduce((sum, asset) => sum + asset.value, 0);
   const defiTotalValue = defiPositions.reduce((sum, pos) => sum + pos.value, 0);
   const avgAPY = defiPositions.reduce((sum, pos) => sum + (pos.apy * pos.value), 0) / defiTotalValue;
diff --git a/frontend/components/analytics/CommunityTab.tsx b/frontend/components/analytics/CommunityTab.tsx
index 545a151f..a4ae79f8 100644
--- a/frontend/components/analytics/CommunityTab.tsx
+++ b/frontend/components/analytics/CommunityTab.tsx
@@ -1,10 +1,5 @@
 'use client';
-
-import { useState } from 'react';
-import { motion } from 'framer-motion';
 import {
-    AreaChart,
-    Area,
     XAxis,
     YAxis,
     CartesianGrid,
@@ -12,11 +7,6 @@ import {
     ResponsiveContainer,
     LineChart,
     Line,
-    BarChart,
-    Bar,
-    PieChart,
-    Pie,
-    Cell
 } from 'recharts';
 import {
     Users,
@@ -26,13 +16,9 @@ import {
     Globe,
     Heart,
     ChevronRight,
-    Zap,
-    Star
+    Star,
 } from 'lucide-react';
 import { CommunityInsights } from './index';
-import type { HealthScoreProps } from '../../src/types';
-
-const COLORS = ['#EA580C', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'];
 
 export default function CommunityTab() {
     return (
@@ -96,7 +82,7 @@ export default function CommunityTab() {
                             { label: 'Active Voters', value: '1.2K', width: '45%', color: 'from-green-600 to-green-700' },
                             { label: 'Proposers', value: '482', width: '25%', color: 'from-orange-600 to-orange-700' },
                             { label: 'Power Users', value: '124', width: '12%', color: 'from-purple-600 to-purple-700' },
-                        ].map((step, i) => (
+                        ].map((step) => (
                             <div key={step.label} className="relative">
                                 <div className="flex justify-between items-center mb-1.5 px-1">
                                     <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{step.label}</span>
@@ -283,22 +269,3 @@ export default function CommunityTab() {
         </div>
     );
 }
-
-function HealthScore({ title, score, status, color }: HealthScoreProps) {
-    return (
-        <div>
-            <div className="flex justify-between items-center mb-2">
-                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{title}</span>
-                <span className={`text-[10px] font-black ${status === 'OK' ? 'text-green-500' : 'text-orange-500'} uppercase`}>{score} / 100</span>
-            </div>
-            <div className="h-1.5 w-full bg-slate-950/50 rounded-full overflow-hidden border border-slate-800">
-                <motion.div
-                    initial={{ width: 0 }}
-                    animate={{ width: `${score}%` }}
-                    transition={{ duration: 1.5 }}
-                    className={`h-full ${color} rounded-full`}
-                />
-            </div>
-        </div>
-    );
-}
diff --git a/frontend/components/analytics/ProposalComparator.tsx b/frontend/components/analytics/ProposalComparator.tsx
index 2977aa8b..38d5753c 100644
--- a/frontend/components/analytics/ProposalComparator.tsx
+++ b/frontend/components/analytics/ProposalComparator.tsx
@@ -59,36 +59,13 @@ export default function ProposalComparator({ proposals }: ProposalComparatorProp
     const blob = new Blob([csv], { type: 'text/csv' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
-    link.download = `proposal-comparison-${Date.now()}.csv`;
+    const selectionLabel = selectedProposalData.map(p => p.proposalId).join('-') || 'empty';
+    link.download = `proposal-comparison-${selectionLabel}.csv`;
     link.href = url;
     link.click();
     URL.revokeObjectURL(url);
   };
 
-  const getMetricComparison = (metric: keyof ProposalMetrics) => {
-    if (selectedProposalData.length === 0) return [];
-    
-    const values = selectedProposalData.map(p => {
-      const value = p[metric];
-      return typeof value === 'number' ? value : 0;
-    });
-
-    const max = Math.max(...values);
-    const min = Math.min(...values);
-
-    return selectedProposalData.map((p, index) => {
-      const value = typeof p[metric] === 'number' ? p[metric] : 0;
-      let comparison: 'better' | 'worse' | 'neutral' = 'neutral';
-      
-      if (max !== min) {
-        if (value === max) comparison = 'better';
-        else if (value === min) comparison = 'worse';
-      }
-
-      return { proposal: p, value, comparison };
-    });
-  };
-
   const voterOverlap = useMemo(() => {
     if (selectedProposalData.length < 2) return 0;
     return 62;

From 04b72aab84619668d9f065149065999b7c263b45 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 00:32:46 +0100
Subject: [PATCH 08/23] chore(frontend): clean notification center

---
 frontend/components/analytics/OverviewTab.tsx |  15 +-
 .../components/analytics/SuccessPredictor.tsx |  15 +-
 .../components/common/NotificationCenter.tsx  | 225 +++++++++---------
 3 files changed, 127 insertions(+), 128 deletions(-)

diff --git a/frontend/components/analytics/OverviewTab.tsx b/frontend/components/analytics/OverviewTab.tsx
index ef825e30..fea6d57a 100644
--- a/frontend/components/analytics/OverviewTab.tsx
+++ b/frontend/components/analytics/OverviewTab.tsx
@@ -1,6 +1,4 @@
 'use client';
-
-import { useState, useEffect } from 'react';
 import {
     AreaChart,
     Area,
@@ -12,12 +10,10 @@ import {
     PieChart,
     Pie,
     Cell,
-    BarChart,
-    Bar,
     LineChart,
     Line
 } from 'recharts';
-import { TrendingUp, ArrowUpRight, ArrowDownRight, Clock, Award, Activity, Sparkles, Shield } from 'lucide-react';
+import { TrendingUp, ArrowUpRight, ArrowDownRight, Activity, Sparkles, Shield } from 'lucide-react';
 import { InsightsFeed } from './index';
 import TreasuryTransparency from '../TreasuryTransparency';
 import EcosystemBenchmarks from '../charts/EcosystemBenchmarks';
@@ -52,15 +48,6 @@ const recentActivity = [
 ];
 
 export default function OverviewTab() {
-    const [refreshCount, setRefreshCount] = useState(0);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setRefreshCount(prev => prev + 1);
-        }, 30000);
-        return () => clearInterval(interval);
-    }, []);
-
     return (
         <div className="p-8 space-y-8 animate-in fade-in duration-500">
             {/* KPI Cards */}
diff --git a/frontend/components/analytics/SuccessPredictor.tsx b/frontend/components/analytics/SuccessPredictor.tsx
index b18924f8..c56ec0fc 100644
--- a/frontend/components/analytics/SuccessPredictor.tsx
+++ b/frontend/components/analytics/SuccessPredictor.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useMemo } from 'react';
 import { ProposalMetrics } from '../../utils/analytics/dataCollector';
-import { categorizeProposal, calculatePercentile } from '../../utils/analytics/helpers';
 import { CheckCircle, AlertCircle, XCircle } from 'lucide-react';
 
 interface SuccessPredictorProps {
@@ -44,9 +43,9 @@ export default function SuccessPredictor({ historicalProposals }: SuccessPredict
       catStats.avgAmount += p.amount;
     });
 
-    stats.forEach((value, key) => {
-      value.avgAmount /= value.total;
-    });
+     stats.forEach((value) => {
+       value.avgAmount /= value.total;
+     });
 
     return stats;
   }, [historicalProposals]);
@@ -99,7 +98,7 @@ export default function SuccessPredictor({ historicalProposals }: SuccessPredict
       <div>
         <h3 className="text-lg font-semibold mb-2">Proposal Success Predictor</h3>
         <p className="text-sm text-gray-600 dark:text-gray-400">
-          Get AI-powered predictions on your proposal's likelihood of success
+          Get AI-powered predictions on your proposal&apos;s likelihood of success
         </p>
       </div>
 
@@ -183,11 +182,11 @@ export default function SuccessPredictor({ historicalProposals }: SuccessPredict
           <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
             <h4 className="font-semibold mb-3">Factor Breakdown</h4>
             <div className="space-y-3">
-              {Object.entries(prediction.factors).map(([key, value]) => (
-                <div key={key}>
+              {Object.entries(prediction.factors).map(([label, value]) => (
+                <div key={label}>
                   <div className="flex items-center justify-between text-sm mb-1">
                     <span className="capitalize text-gray-700 dark:text-gray-300">
-                      {key.replace('Score', '')}
+                      {label.replace('Score', '')}
                     </span>
                     <span className="font-medium text-gray-900 dark:text-white">
                       {value.toFixed(0)}%
diff --git a/frontend/components/common/NotificationCenter.tsx b/frontend/components/common/NotificationCenter.tsx
index 6e8d2b54..c6257d98 100644
--- a/frontend/components/common/NotificationCenter.tsx
+++ b/frontend/components/common/NotificationCenter.tsx
@@ -37,116 +37,129 @@ interface NotificationCenterProps {
   userAddress: string;
 }
 
+const createMockNotifications = (baseTime: number): Notification[] => [
+  {
+    id: 1,
+    type: 'proposal',
+    title: 'New Proposal Submitted',
+    message: 'alice_dao created "DeFi Lending Protocol v2" proposal',
+    timestamp: baseTime - 2 * 60 * 60 * 1000,
+    read: false,
+    priority: 'high',
+    actionUrl: '/proposals/42',
+    metadata: { proposalId: 42, userAddress: 'SP1ABC...DEF' }
+  },
+  {
+    id: 2,
+    type: 'vote',
+    title: 'Proposal Voting Ending Soon',
+    message: 'Only 6 hours left to vote on "Community NFT Marketplace"',
+    timestamp: baseTime - 4 * 60 * 60 * 1000,
+    read: false,
+    priority: 'high',
+    actionUrl: '/proposals/28'
+  },
+  {
+    id: 3,
+    type: 'achievement',
+    title: 'New Achievement Unlocked!',
+    message: 'You earned the "Top Contributor" badge 🏆',
+    timestamp: baseTime - 12 * 60 * 60 * 1000,
+    read: true,
+    priority: 'medium'
+  },
+  {
+    id: 4,
+    type: 'comment',
+    title: 'New Comment on Your Proposal',
+    message: 'bob_builder commented on your proposal #15',
+    timestamp: baseTime - 24 * 60 * 60 * 1000,
+    read: false,
+    priority: 'medium',
+    actionUrl: '/proposals/15#comments'
+  },
+  {
+    id: 5,
+    type: 'mention',
+    title: 'You were mentioned',
+    message: 'carol_artist mentioned you in a comment',
+    timestamp: baseTime - 36 * 60 * 60 * 1000,
+    read: true,
+    priority: 'low'
+  },
+  {
+    id: 6,
+    type: 'treasury',
+    title: 'Treasury Transaction',
+    message: '75,000 STX distributed to approved proposal',
+    timestamp: baseTime - 48 * 60 * 60 * 1000,
+    read: true,
+    priority: 'medium',
+    metadata: { amount: 75000 }
+  },
+  {
+    id: 7,
+    type: 'delegation',
+    title: 'Voting Power Delegated',
+    message: 'dave_investor delegated 5,000 voting power to you',
+    timestamp: baseTime - 72 * 60 * 60 * 1000,
+    read: true,
+    priority: 'medium',
+    metadata: { amount: 5000, userAddress: 'SP4STU...VWX' }
+  },
+  {
+    id: 8,
+    type: 'system',
+    title: 'System Update',
+    message: 'New features available: Dashboard customization and insights',
+    timestamp: baseTime - 96 * 60 * 60 * 1000,
+    read: true,
+    priority: 'low'
+  }
+];
+
+const defaultNotificationPreferences = (): NotificationPreferences => ({
+  emailEnabled: true,
+  pushEnabled: false,
+  digestMode: 'instant',
+  categories: {
+    proposals: true,
+    votes: true,
+    comments: true,
+    mentions: true,
+    achievements: true,
+    treasury: true,
+    system: true
+  }
+});
+
+const loadNotificationPreferences = (userAddress: string): NotificationPreferences => {
+  if (typeof window === 'undefined') {
+    return defaultNotificationPreferences();
+  }
+
+  const savedPrefs = window.localStorage.getItem(`notification-prefs-${userAddress}`);
+  if (!savedPrefs) {
+    return defaultNotificationPreferences();
+  }
+
+  return JSON.parse(savedPrefs) as NotificationPreferences;
+};
+
 export default function NotificationCenter({ userAddress }: NotificationCenterProps) {
-  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [currentTime, setCurrentTime] = useState(() => Date.now());
+  const [notifications, setNotifications] = useState<Notification[]>(() => createMockNotifications(currentTime));
   const [filter, setFilter] = useState<'all' | 'unread' | 'high'>('all');
   const [showSettings, setShowSettings] = useState(false);
-  const [preferences, setPreferences] = useState<NotificationPreferences>({
-    emailEnabled: true,
-    pushEnabled: false,
-    digestMode: 'instant',
-    categories: {
-      proposals: true,
-      votes: true,
-      comments: true,
-      mentions: true,
-      achievements: true,
-      treasury: true,
-      system: true
-    }
-  });
+  const [preferences, setPreferences] = useState<NotificationPreferences>(() => loadNotificationPreferences(userAddress));
 
   useEffect(() => {
-    // Load notifications
-    const mockNotifications: Notification[] = [
-      {
-        id: 1,
-        type: 'proposal',
-        title: 'New Proposal Submitted',
-        message: 'alice_dao created "DeFi Lending Protocol v2" proposal',
-        timestamp: Date.now() - 2 * 60 * 60 * 1000,
-        read: false,
-        priority: 'high',
-        actionUrl: '/proposals/42',
-        metadata: { proposalId: 42, userAddress: 'SP1ABC...DEF' }
-      },
-      {
-        id: 2,
-        type: 'vote',
-        title: 'Proposal Voting Ending Soon',
-        message: 'Only 6 hours left to vote on "Community NFT Marketplace"',
-        timestamp: Date.now() - 4 * 60 * 60 * 1000,
-        read: false,
-        priority: 'high',
-        actionUrl: '/proposals/28'
-      },
-      {
-        id: 3,
-        type: 'achievement',
-        title: 'New Achievement Unlocked!',
-        message: 'You earned the "Top Contributor" badge 🏆',
-        timestamp: Date.now() - 12 * 60 * 60 * 1000,
-        read: true,
-        priority: 'medium'
-      },
-      {
-        id: 4,
-        type: 'comment',
-        title: 'New Comment on Your Proposal',
-        message: 'bob_builder commented on your proposal #15',
-        timestamp: Date.now() - 24 * 60 * 60 * 1000,
-        read: false,
-        priority: 'medium',
-        actionUrl: '/proposals/15#comments'
-      },
-      {
-        id: 5,
-        type: 'mention',
-        title: 'You were mentioned',
-        message: 'carol_artist mentioned you in a comment',
-        timestamp: Date.now() - 36 * 60 * 60 * 1000,
-        read: true,
-        priority: 'low'
-      },
-      {
-        id: 6,
-        type: 'treasury',
-        title: 'Treasury Transaction',
-        message: '75,000 STX distributed to approved proposal',
-        timestamp: Date.now() - 48 * 60 * 60 * 1000,
-        read: true,
-        priority: 'medium',
-        metadata: { amount: 75000 }
-      },
-      {
-        id: 7,
-        type: 'delegation',
-        title: 'Voting Power Delegated',
-        message: 'dave_investor delegated 5,000 voting power to you',
-        timestamp: Date.now() - 72 * 60 * 60 * 1000,
-        read: true,
-        priority: 'medium',
-        metadata: { amount: 5000, userAddress: 'SP4STU...VWX' }
-      },
-      {
-        id: 8,
-        type: 'system',
-        title: 'System Update',
-        message: 'New features available: Dashboard customization and insights',
-        timestamp: Date.now() - 96 * 60 * 60 * 1000,
-        read: true,
-        priority: 'low'
-      }
-    ];
+    const timer = window.setInterval(() => {
+      setCurrentTime(Date.now());
+    }, 60_000);
 
-    setNotifications(mockNotifications);
-
-    // Load preferences
-    const savedPrefs = localStorage.getItem(`notification-prefs-${userAddress}`);
-    if (savedPrefs) {
-      setPreferences(JSON.parse(savedPrefs));
-    }
-  }, [userAddress]);
+    return () => window.clearInterval(timer);
+  }, []);
 
   const markAsRead = (id: number) => {
     setNotifications(notifications.map(n => 
@@ -175,7 +188,7 @@ export default function NotificationCenter({ userAddress }: NotificationCenterPr
   };
 
   const formatTimeAgo = (timestamp: number) => {
-    const diff = Date.now() - timestamp;
+    const diff = currentTime - timestamp;
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(hours / 24);
     
@@ -369,7 +382,7 @@ export default function NotificationCenter({ userAddress }: NotificationCenterPr
           <div className="text-center py-12 text-gray-500 dark:text-gray-400">
             <div className="text-4xl mb-2">📭</div>
             <div>No notifications</div>
-            <div className="text-sm">You're all caught up!</div>
+            <div className="text-sm">You&apos;re all caught up!</div>
           </div>
         ) : (
           filteredNotifications.map(notification => (

From 8cdf5d6dfb20fe02f39dd5e4f4da12e76142d6b1 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 00:33:25 +0100
Subject: [PATCH 09/23] chore(frontend): tidy remaining dashboards

---
 frontend/components/AICopilot.tsx             |  2 +-
 frontend/components/PageNavigator.tsx         |  2 +-
 frontend/components/PageSizeDropdown.tsx      |  1 -
 frontend/components/ProposalAnalytics.tsx     | 19 +--------------
 frontend/components/TemplateSelector.tsx      |  2 +-
 frontend/components/TransactionSimulator.tsx  |  5 ++--
 frontend/components/TreasuryDashboard.tsx     |  2 +-
 frontend/components/TreasuryTransparency.tsx  |  6 ++---
 .../components/VotingAnalyticsDashboard.tsx   | 24 +++++++++----------
 frontend/components/VotingHistory.tsx         |  2 +-
 10 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/frontend/components/AICopilot.tsx b/frontend/components/AICopilot.tsx
index d00bb6f6..78fc06a4 100644
--- a/frontend/components/AICopilot.tsx
+++ b/frontend/components/AICopilot.tsx
@@ -51,7 +51,7 @@ export default function AICopilot({ proposal }: AICopilotProps) {
                         className="p-4 rounded-lg bg-white/5 border border-white/10"
                     >
                         <p className="text-sm text-slate-300 leading-relaxed italic">
-                            "{analysis}"
+                            &quot;{analysis}&quot;
                         </p>
                         <div className="mt-4 pt-4 border-t border-white/5 flex gap-4">
                             <div className="text-center">
diff --git a/frontend/components/PageNavigator.tsx b/frontend/components/PageNavigator.tsx
index 4755e26f..32127982 100644
--- a/frontend/components/PageNavigator.tsx
+++ b/frontend/components/PageNavigator.tsx
@@ -22,7 +22,7 @@ export const PageNavigator: React.FC<PageNavigatorProps> = ({
     const halfWindow = Math.floor(maxVisibleButtons / 2);
 
     let start = Math.max(1, currentPage - halfWindow);
-    let end = Math.min(totalPages, start + maxVisibleButtons - 1);
+    const end = Math.min(totalPages, start + maxVisibleButtons - 1);
 
     if (end - start + 1 < maxVisibleButtons) {
       start = Math.max(1, end - maxVisibleButtons + 1);
diff --git a/frontend/components/PageSizeDropdown.tsx b/frontend/components/PageSizeDropdown.tsx
index 742568b7..1c2feb67 100644
--- a/frontend/components/PageSizeDropdown.tsx
+++ b/frontend/components/PageSizeDropdown.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useEffect } from 'react';
 import { ChevronDown } from 'lucide-react';
 
 interface PageSizeDropdownProps {
diff --git a/frontend/components/ProposalAnalytics.tsx b/frontend/components/ProposalAnalytics.tsx
index b7a00d41..f347baa1 100644
--- a/frontend/components/ProposalAnalytics.tsx
+++ b/frontend/components/ProposalAnalytics.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface ProposalStats {
   category: string;
@@ -41,23 +41,6 @@ export default function ProposalAnalytics() {
     return ((stat.approved / stat.total) * 100).toFixed(1);
   };
 
-  const _predictSuccess = (category: string, amount: number, timeline: number) => {
-    const stat = categoryStats.find((s) => s.category === category);
-    if (!stat) return 50;
-
-    let score = parseFloat(calculateSuccessRate(stat));
-
-    // Adjust based on amount
-    if (amount > stat.avgAmount * 1.5) score -= 15;
-    else if (amount < stat.avgAmount * 0.5) score += 10;
-
-    // Adjust based on timeline
-    if (timeline > stat.avgTimeToExecution * 1.5) score -= 10;
-    else if (timeline < stat.avgTimeToExecution * 0.8) score += 5;
-
-    return Math.max(0, Math.min(100, score));
-  };
-
   const totalProposals = categoryStats.reduce((sum, s) => sum + s.total, 0);
   const totalApproved = categoryStats.reduce((sum, s) => sum + s.approved, 0);
   const overallSuccessRate = ((totalApproved / totalProposals) * 100).toFixed(1);
diff --git a/frontend/components/TemplateSelector.tsx b/frontend/components/TemplateSelector.tsx
index 585ac7b9..09546c61 100644
--- a/frontend/components/TemplateSelector.tsx
+++ b/frontend/components/TemplateSelector.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Code, Layout, Palette, Terminal, Globe, Zap } from 'lucide-react';
+import { Code, Palette, Terminal, Globe } from 'lucide-react';
 
 const templates = [
     { id: 'tech', name: 'Open Source Tooling', icon: Code, color: 'text-blue-500', bg: 'bg-blue-500/10' },
diff --git a/frontend/components/TransactionSimulator.tsx b/frontend/components/TransactionSimulator.tsx
index 42a8df45..4e18db64 100644
--- a/frontend/components/TransactionSimulator.tsx
+++ b/frontend/components/TransactionSimulator.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Play, Check, AlertTriangle, ArrowRight, ShieldCheck, Database } from 'lucide-react';
+import React, { useState } from 'react';
+import { Play, Check, ShieldCheck, Database } from 'lucide-react';
 
 interface SimulationStep {
     name: string;
diff --git a/frontend/components/TreasuryDashboard.tsx b/frontend/components/TreasuryDashboard.tsx
index 8d56dd6b..d3051cd0 100644
--- a/frontend/components/TreasuryDashboard.tsx
+++ b/frontend/components/TreasuryDashboard.tsx
@@ -57,7 +57,7 @@ export default function TreasuryDashboard() {
     healthScore: 87
   });
 
-  const [balanceHistory, setBalanceHistory] = useState<TreasuryBalance[]>([
+  const [balanceHistory] = useState<TreasuryBalance[]>([
     { date: '2024-01-01', balance: 2400000, inflow: 50000, outflow: 30000 },
     { date: '2024-01-08', balance: 2450000, inflow: 60000, outflow: 35000 },
     { date: '2024-01-15', balance: 2500000, inflow: 55000, outflow: 40000 },
diff --git a/frontend/components/TreasuryTransparency.tsx b/frontend/components/TreasuryTransparency.tsx
index 766f14e6..3162c7a5 100644
--- a/frontend/components/TreasuryTransparency.tsx
+++ b/frontend/components/TreasuryTransparency.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import React from 'react';
-import { motion } from 'framer-motion';
+'use client';
+
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
-import { Database, ArrowUpRight, Shield, Globe } from 'lucide-react';
+import { ArrowUpRight, Globe } from 'lucide-react';
 
 const allocationData = [
     { name: 'Active Grants', value: 45000, color: '#EA580C' },
diff --git a/frontend/components/VotingAnalyticsDashboard.tsx b/frontend/components/VotingAnalyticsDashboard.tsx
index d59e1483..affd91b1 100644
--- a/frontend/components/VotingAnalyticsDashboard.tsx
+++ b/frontend/components/VotingAnalyticsDashboard.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface VoteData {
   proposalId: number;
@@ -12,16 +12,17 @@ interface VoteData {
 }
 
 export default function VotingAnalyticsDashboard() {
-  const [votes, setVotes] = useState<VoteData[]>([]);
-  const [filterCategory, setFilterCategory] = useState('all');
-  const [dateRange, setDateRange] = useState('all');
+  const [baseTimestamp] = useState(() => Date.now());
+  const [votes] = useState<VoteData[]>(() => {
+    if (typeof window === 'undefined') {
+      return [];
+    }
 
-  useEffect(() => {
     const stored = localStorage.getItem('voteHistory');
-    if (stored) {
-      setVotes(JSON.parse(stored));
-    }
-  }, []);
+    return stored ? JSON.parse(stored) : [];
+  });
+  const [filterCategory, setFilterCategory] = useState('all');
+  const [dateRange, setDateRange] = useState('all');
 
   const filterVotes = () => {
     let filtered = votes;
@@ -31,13 +32,12 @@ export default function VotingAnalyticsDashboard() {
     }
 
     if (dateRange !== 'all') {
-      const now = Date.now();
       const ranges: Record<string, number> = {
         '7d': 7 * 24 * 60 * 60 * 1000,
         '30d': 30 * 24 * 60 * 60 * 1000,
         '90d': 90 * 24 * 60 * 60 * 1000
       };
-      filtered = filtered.filter(v => now - v.timestamp < ranges[dateRange]);
+      filtered = filtered.filter(v => baseTimestamp - v.timestamp < ranges[dateRange]);
     }
 
     return filtered;
@@ -84,7 +84,7 @@ export default function VotingAnalyticsDashboard() {
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = `voting-analytics-${Date.now()}.csv`;
+    a.download = `voting-analytics-${baseTimestamp}.csv`;
     a.click();
   };
 
diff --git a/frontend/components/VotingHistory.tsx b/frontend/components/VotingHistory.tsx
index de9665e1..b6a1d77f 100644
--- a/frontend/components/VotingHistory.tsx
+++ b/frontend/components/VotingHistory.tsx
@@ -29,7 +29,7 @@ export function VotingHistory({ votes }: VotingHistoryProps) {
     let runningApprove = 0;
     let runningReject = 0;
 
-    return votes.map((vote, index) => {
+    return votes.map((vote) => {
       if (vote.type === 'approve') runningApprove += 1;
       else runningReject += 1;
 

From 4da9fa247c3262ca0f982bad8a849be83418b962 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 00:34:12 +0100
Subject: [PATCH 10/23] chore(frontend): tidy stateful widgets

---
 frontend/components/Comments.tsx              |  24 +--
 frontend/components/MilestoneTracker.tsx      | 141 +++++++++-----
 frontend/components/MultiSigTreasury.tsx      |  35 ++--
 frontend/components/NotificationHub.tsx       |  40 ++--
 frontend/components/ParticipationHeatmap.tsx  |   2 +-
 frontend/components/PayoutScheduler.tsx       | 132 ++++++-------
 frontend/components/PortfolioShowcase.tsx     | 174 +++++++++---------
 frontend/components/ProposalArchive.tsx       |  62 +++----
 frontend/components/ProposalCollaboration.tsx |  44 +++--
 frontend/components/ProposalVersioning.tsx    |  35 +---
 10 files changed, 373 insertions(+), 316 deletions(-)

diff --git a/frontend/components/Comments.tsx b/frontend/components/Comments.tsx
index 580214d4..508a37bc 100644
--- a/frontend/components/Comments.tsx
+++ b/frontend/components/Comments.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Comment {
     id: string;
@@ -16,20 +16,16 @@ interface CommentsProps {
 }
 
 export default function Comments({ proposalId, userAddress }: CommentsProps) {
-    const [comments, setComments] = useState<Comment[]>([]);
-    const [newComment, setNewComment] = useState('');
-    const [isSubmitting, setIsSubmitting] = useState(false);
-
-    const loadComments = () => {
-        const stored = localStorage.getItem(`comments-${proposalId}`);
-        if (stored) {
-            setComments(JSON.parse(stored));
+    const [comments, setComments] = useState<Comment[]>(() => {
+        if (typeof window === 'undefined') {
+            return [];
         }
-    };
 
-    useEffect(() => {
-        loadComments();
-    }, [proposalId]);
+        const stored = localStorage.getItem(`comments-${proposalId}`);
+        return stored ? JSON.parse(stored) : [];
+    });
+    const [newComment, setNewComment] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
@@ -153,7 +149,7 @@ export default function Comments({ proposalId, userAddress }: CommentsProps) {
                                 </button>
                             </div>
                             <p className="text-sm font-medium text-slate-300 leading-relaxed italic border-l-2 border-orange-500/30 pl-6">
-                                "{comment.text}"
+                                &quot;{comment.text}&quot;
                             </p>
 
                             <div className="mt-6 flex items-center gap-6 opacity-40 group-hover:opacity-100 transition-opacity">
diff --git a/frontend/components/MilestoneTracker.tsx b/frontend/components/MilestoneTracker.tsx
index 2c1c6ff6..6c1d643f 100644
--- a/frontend/components/MilestoneTracker.tsx
+++ b/frontend/components/MilestoneTracker.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Milestone {
   id: number;
@@ -26,58 +26,103 @@ interface MilestoneTrackerProps {
 }
 
 export default function MilestoneTracker({ proposalId, totalFunding }: MilestoneTrackerProps) {
-  const [milestones, setMilestones] = useState<Milestone[]>([
-    {
-      id: 1,
-      name: 'Project Kickoff',
-      description: 'Initial setup and planning phase',
-      percentage: 25,
-      fundAmount: totalFunding * 0.25,
-      status: 'completed',
-      verifications: [],
-      deliverables: ['Project plan', 'Technical specification']
-    },
-    {
-      id: 2,
-      name: 'Development Phase 1',
-      description: 'Core functionality implementation',
-      percentage: 50,
-      fundAmount: totalFunding * 0.25,
-      status: 'in-progress',
-      verifications: [],
-      deliverables: ['Working prototype', 'Test coverage']
-    },
-    {
-      id: 3,
-      name: 'Development Phase 2',
-      description: 'Advanced features and integration',
-      percentage: 75,
-      fundAmount: totalFunding * 0.25,
-      status: 'pending',
-      verifications: [],
-      deliverables: ['Feature complete', 'Integration tests']
-    },
-    {
-      id: 4,
-      name: 'Launch & Delivery',
-      description: 'Final testing and deployment',
-      percentage: 100,
-      fundAmount: totalFunding * 0.25,
-      status: 'pending',
-      verifications: [],
-      deliverables: ['Production deployment', 'Documentation']
+  const [milestones, setMilestones] = useState<Milestone[]>(() => {
+    if (typeof window === 'undefined') {
+      return [
+        {
+          id: 1,
+          name: 'Project Kickoff',
+          description: 'Initial setup and planning phase',
+          percentage: 25,
+          fundAmount: totalFunding * 0.25,
+          status: 'completed',
+          verifications: [],
+          deliverables: ['Project plan', 'Technical specification']
+        },
+        {
+          id: 2,
+          name: 'Development Phase 1',
+          description: 'Core functionality implementation',
+          percentage: 50,
+          fundAmount: totalFunding * 0.25,
+          status: 'in-progress',
+          verifications: [],
+          deliverables: ['Working prototype', 'Test coverage']
+        },
+        {
+          id: 3,
+          name: 'Development Phase 2',
+          description: 'Advanced features and integration',
+          percentage: 75,
+          fundAmount: totalFunding * 0.25,
+          status: 'pending',
+          verifications: [],
+          deliverables: ['Feature complete', 'Integration tests']
+        },
+        {
+          id: 4,
+          name: 'Launch & Delivery',
+          description: 'Final testing and deployment',
+          percentage: 100,
+          fundAmount: totalFunding * 0.25,
+          status: 'pending',
+          verifications: [],
+          deliverables: ['Production deployment', 'Documentation']
+        }
+      ];
     }
-  ]);
 
-  const [selectedMilestone, setSelectedMilestone] = useState<Milestone | null>(null);
-  const [verificationComment, setVerificationComment] = useState('');
-
-  useEffect(() => {
     const stored = localStorage.getItem(`proposal-${proposalId}-milestones`);
     if (stored) {
-      setMilestones(JSON.parse(stored));
+      return JSON.parse(stored);
     }
-  }, [proposalId]);
+
+    return [
+      {
+        id: 1,
+        name: 'Project Kickoff',
+        description: 'Initial setup and planning phase',
+        percentage: 25,
+        fundAmount: totalFunding * 0.25,
+        status: 'completed',
+        verifications: [],
+        deliverables: ['Project plan', 'Technical specification']
+      },
+      {
+        id: 2,
+        name: 'Development Phase 1',
+        description: 'Core functionality implementation',
+        percentage: 50,
+        fundAmount: totalFunding * 0.25,
+        status: 'in-progress',
+        verifications: [],
+        deliverables: ['Working prototype', 'Test coverage']
+      },
+      {
+        id: 3,
+        name: 'Development Phase 2',
+        description: 'Advanced features and integration',
+        percentage: 75,
+        fundAmount: totalFunding * 0.25,
+        status: 'pending',
+        verifications: [],
+        deliverables: ['Feature complete', 'Integration tests']
+      },
+      {
+        id: 4,
+        name: 'Launch & Delivery',
+        description: 'Final testing and deployment',
+        percentage: 100,
+        fundAmount: totalFunding * 0.25,
+        status: 'pending',
+        verifications: [],
+        deliverables: ['Production deployment', 'Documentation']
+      }
+    ];
+  });
+
+  const [selectedMilestone, setSelectedMilestone] = useState<Milestone | null>(null);
+  const [verificationComment, setVerificationComment] = useState('');
 
   const saveMilestones = (updated: Milestone[]) => {
     localStorage.setItem(`proposal-${proposalId}-milestones`, JSON.stringify(updated));
diff --git a/frontend/components/MultiSigTreasury.tsx b/frontend/components/MultiSigTreasury.tsx
index ab3ba360..912ffc80 100644
--- a/frontend/components/MultiSigTreasury.tsx
+++ b/frontend/components/MultiSigTreasury.tsx
@@ -34,6 +34,9 @@ interface MultiSigConfig {
 }
 
 export default function MultiSigTreasury() {
+  const [currentTime] = useState(() => Date.now());
+  const baseTime = currentTime;
+
   const [config, setConfig] = useState<MultiSigConfig>({
     totalSigners: 5,
     requiredSignatures: 3,
@@ -42,7 +45,7 @@ export default function MultiSigTreasury() {
     timelock: 48
   });
 
-  const [transactions, setTransactions] = useState<Transaction[]>([
+  const [transactions, setTransactions] = useState<Transaction[]>(() => [
     {
       id: 1,
       type: 'withdrawal',
@@ -53,16 +56,16 @@ export default function MultiSigTreasury() {
       requiredSignatures: 3,
       currentSignatures: 2,
       signers: [
-        { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: true, timestamp: Date.now() - 2 * 60 * 60 * 1000 },
-        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: Date.now() - 1 * 60 * 60 * 1000 },
+        { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: true, timestamp: baseTime - 2 * 60 * 60 * 1000 },
+        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: baseTime - 1 * 60 * 60 * 1000 },
         { address: 'SP7DEF...789', name: 'Carol (Admin)', signed: false },
         { address: 'SP6GHI...012', name: 'Dave (Auditor)', signed: false },
         { address: 'SP5JKL...345', name: 'Eve (Advisor)', signed: false }
       ],
       status: 'pending',
-      createdAt: Date.now() - 3 * 60 * 60 * 1000,
+      createdAt: baseTime - 3 * 60 * 60 * 1000,
       threshold: 75000,
-      deadline: Date.now() + 45 * 60 * 60 * 1000
+      deadline: baseTime + 45 * 60 * 60 * 1000
     },
     {
       id: 2,
@@ -74,15 +77,15 @@ export default function MultiSigTreasury() {
       currentSignatures: 1,
       signers: [
         { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: false },
-        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: Date.now() - 12 * 60 * 60 * 1000 },
+        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: baseTime - 12 * 60 * 60 * 1000 },
         { address: 'SP7DEF...789', name: 'Carol (Admin)', signed: false },
         { address: 'SP6GHI...012', name: 'Dave (Auditor)', signed: false },
         { address: 'SP5JKL...345', name: 'Eve (Advisor)', signed: false }
       ],
       status: 'pending',
-      createdAt: Date.now() - 24 * 60 * 60 * 1000,
+      createdAt: baseTime - 24 * 60 * 60 * 1000,
       threshold: 50000,
-      deadline: Date.now() + 24 * 60 * 60 * 1000
+      deadline: baseTime + 24 * 60 * 60 * 1000
     },
     {
       id: 3,
@@ -94,21 +97,21 @@ export default function MultiSigTreasury() {
       requiredSignatures: 3,
       currentSignatures: 3,
       signers: [
-        { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: true, timestamp: Date.now() - 48 * 60 * 60 * 1000 },
-        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: Date.now() - 46 * 60 * 60 * 1000 },
-        { address: 'SP7DEF...789', name: 'Carol (Admin)', signed: true, timestamp: Date.now() - 45 * 60 * 60 * 1000 },
+        { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: true, timestamp: baseTime - 48 * 60 * 60 * 1000 },
+        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: baseTime - 46 * 60 * 60 * 1000 },
+        { address: 'SP7DEF...789', name: 'Carol (Admin)', signed: true, timestamp: baseTime - 45 * 60 * 60 * 1000 },
         { address: 'SP6GHI...012', name: 'Dave (Auditor)', signed: false },
         { address: 'SP5JKL...345', name: 'Eve (Advisor)', signed: false }
       ],
       status: 'executed',
-      createdAt: Date.now() - 72 * 60 * 60 * 1000,
+      createdAt: baseTime - 72 * 60 * 60 * 1000,
       threshold: 50000,
-      deadline: Date.now() - 24 * 60 * 60 * 1000
+      deadline: baseTime - 24 * 60 * 60 * 1000
     }
   ]);
 
-  const [showNewTxModal, setShowNewTxModal] = useState(false);
-  const [showConfigModal, setShowConfigModal] = useState(false);
+  const [, setShowNewTxModal] = useState(false);
+  const [, setShowConfigModal] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [filterStatus, setFilterStatus] = useState<'all' | Transaction['status']>('all');
 
@@ -180,7 +183,7 @@ export default function MultiSigTreasury() {
   };
 
   const formatTimeRemaining = (deadline: number) => {
-    const diff = deadline - Date.now();
+    const diff = deadline - currentTime;
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(hours / 24);
     
diff --git a/frontend/components/NotificationHub.tsx b/frontend/components/NotificationHub.tsx
index 7dc1f807..ccd3aa64 100644
--- a/frontend/components/NotificationHub.tsx
+++ b/frontend/components/NotificationHub.tsx
@@ -15,24 +15,28 @@ interface Notification {
 
 export default function NotificationHub() {
     const [isOpen, setIsOpen] = useState(false);
-    const [notifications, setNotifications] = useState<Notification[]>([
-        {
-            id: '1',
-            title: 'Proposal Funded',
-            message: 'Your proposal "Stacks Wallet Integration" has reached the funding threshold!',
-            type: 'success',
-            timestamp: new Date(),
-            read: false
-        },
-        {
-            id: '2',
-            title: 'New Governance Vote',
-            message: 'A new platform-wide vote on Treasury Allocation is live.',
-            type: 'governance',
-            timestamp: new Date(Date.now() - 3600000),
-            read: false
-        }
-    ]);
+    const [notifications, setNotifications] = useState<Notification[]>(() => {
+        const baseTime = Date.now();
+
+        return [
+            {
+                id: '1',
+                title: 'Proposal Funded',
+                message: 'Your proposal "Stacks Wallet Integration" has reached the funding threshold!',
+                type: 'success',
+                timestamp: new Date(baseTime),
+                read: false
+            },
+            {
+                id: '2',
+                title: 'New Governance Vote',
+                message: 'A new platform-wide vote on Treasury Allocation is live.',
+                type: 'governance',
+                timestamp: new Date(baseTime - 3600000),
+                read: false
+            }
+        ];
+    });
 
     const unreadCount = notifications.filter(n => !n.read).length;
 
diff --git a/frontend/components/ParticipationHeatmap.tsx b/frontend/components/ParticipationHeatmap.tsx
index 4954988d..68cfd0a5 100644
--- a/frontend/components/ParticipationHeatmap.tsx
+++ b/frontend/components/ParticipationHeatmap.tsx
@@ -5,7 +5,7 @@ import { Calendar } from 'lucide-react';
 
 export default function ParticipationHeatmap() {
     // Simulating 7 days x 12 intervals
-    const grid = Array.from({ length: 84 }).map(() => Math.random());
+    const grid = Array.from({ length: 84 }, (_, index) => ((index * 37) % 100) / 100);
 
     return (
         <div className="p-8 bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-[40px] overflow-hidden">
diff --git a/frontend/components/PayoutScheduler.tsx b/frontend/components/PayoutScheduler.tsx
index 1cadd7c9..e7ea3216 100644
--- a/frontend/components/PayoutScheduler.tsx
+++ b/frontend/components/PayoutScheduler.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Payment {
   id: number;
@@ -30,71 +30,79 @@ interface PaymentBatch {
 }
 
 export default function PayoutScheduler() {
-  const [payments, setPayments] = useState<Payment[]>([
-    {
-      id: 1,
-      grantee: 'SP1ABC...DEF',
-      proposalId: 42,
-      proposalTitle: 'DeFi Lending Protocol',
-      amount: 25000,
-      type: 'milestone',
-      status: 'scheduled',
-      scheduledDate: Date.now() + 2 * 24 * 60 * 60 * 1000,
-      milestone: 'Phase 1: Smart Contract Development'
-    },
-    {
-      id: 2,
-      grantee: 'SP2XYZ...GHI',
-      proposalId: 28,
-      proposalTitle: 'NFT Marketplace',
-      amount: 15000,
-      type: 'recurring',
-      status: 'scheduled',
-      scheduledDate: Date.now() + 5 * 24 * 60 * 60 * 1000,
-      recurringInterval: 'monthly',
-      nextPayment: Date.now() + 35 * 24 * 60 * 60 * 1000
-    },
-    {
-      id: 3,
-      grantee: 'SP1ABC...DEF',
-      proposalId: 42,
-      proposalTitle: 'DeFi Lending Protocol',
-      amount: 25000,
-      type: 'milestone',
-      status: 'completed',
-      scheduledDate: Date.now() - 10 * 24 * 60 * 60 * 1000,
-      completedDate: Date.now() - 10 * 24 * 60 * 60 * 1000,
-      milestone: 'Phase 0: Planning & Design',
-      receiptsUrl: '/receipts/payment-003.pdf'
-    },
-    {
-      id: 4,
-      grantee: 'SP3MNO...PQR',
-      proposalId: 15,
-      proposalTitle: 'DAO Governance Dashboard',
-      amount: 10000,
-      type: 'one-time',
-      status: 'failed',
-      scheduledDate: Date.now() - 2 * 24 * 60 * 60 * 1000,
-      retryCount: 2
-    }
-  ]);
-
-  const [batches, _setBatches] = useState<PaymentBatch[]>([
-    {
-      id: 'BATCH-001',
-      payments: [1, 2],
-      totalAmount: 40000,
-      scheduledDate: Date.now() + 2 * 24 * 60 * 60 * 1000,
-      status: 'pending',
-      gasOptimization: 35
-    }
-  ]);
+  const [payments, setPayments] = useState<Payment[]>(() => {
+    const baseTime = Date.now();
+
+    return [
+      {
+        id: 1,
+        grantee: 'SP1ABC...DEF',
+        proposalId: 42,
+        proposalTitle: 'DeFi Lending Protocol',
+        amount: 25000,
+        type: 'milestone',
+        status: 'scheduled',
+        scheduledDate: baseTime + 2 * 24 * 60 * 60 * 1000,
+        milestone: 'Phase 1: Smart Contract Development'
+      },
+      {
+        id: 2,
+        grantee: 'SP2XYZ...GHI',
+        proposalId: 28,
+        proposalTitle: 'NFT Marketplace',
+        amount: 15000,
+        type: 'recurring',
+        status: 'scheduled',
+        scheduledDate: baseTime + 5 * 24 * 60 * 60 * 1000,
+        recurringInterval: 'monthly',
+        nextPayment: baseTime + 35 * 24 * 60 * 60 * 1000
+      },
+      {
+        id: 3,
+        grantee: 'SP1ABC...DEF',
+        proposalId: 42,
+        proposalTitle: 'DeFi Lending Protocol',
+        amount: 25000,
+        type: 'milestone',
+        status: 'completed',
+        scheduledDate: baseTime - 10 * 24 * 60 * 60 * 1000,
+        completedDate: baseTime - 10 * 24 * 60 * 60 * 1000,
+        milestone: 'Phase 0: Planning & Design',
+        receiptsUrl: '/receipts/payment-003.pdf'
+      },
+      {
+        id: 4,
+        grantee: 'SP3MNO...PQR',
+        proposalId: 15,
+        proposalTitle: 'DAO Governance Dashboard',
+        amount: 10000,
+        type: 'one-time',
+        status: 'failed',
+        scheduledDate: baseTime - 2 * 24 * 60 * 60 * 1000,
+        retryCount: 2
+      }
+    ];
+  });
+
+  const [batches] = useState<PaymentBatch[]>(() => {
+    const baseTime = Date.now();
+
+    return [
+      {
+        id: 'BATCH-001',
+        payments: [1, 2],
+        totalAmount: 40000,
+        scheduledDate: baseTime + 2 * 24 * 60 * 60 * 1000,
+        status: 'pending',
+        gasOptimization: 35
+      }
+    ];
+  });
 
   const [filterStatus, setFilterStatus] = useState<'all' | Payment['status']>('all');
   const [filterType, setFilterType] = useState<'all' | Payment['type']>('all');
   const [showScheduleModal, setShowScheduleModal] = useState(false);
-  const [_showBatchModal, setShowBatchModal] = useState(false);
+  const [, setShowBatchModal] = useState(false);
 
   const [newPayment, setNewPayment] = useState({
     grantee: '',
diff --git a/frontend/components/PortfolioShowcase.tsx b/frontend/components/PortfolioShowcase.tsx
index f0265af8..70824c39 100644
--- a/frontend/components/PortfolioShowcase.tsx
+++ b/frontend/components/PortfolioShowcase.tsx
@@ -33,93 +33,97 @@ interface PortfolioShowcaseProps {
 }
 
 export default function PortfolioShowcase({ userAddress }: PortfolioShowcaseProps) {
-  const [portfolioItems] = useState<PortfolioItem[]>([
-    {
-      proposalId: 42,
-      title: 'DeFi Lending Protocol Development',
-      description: 'Built a decentralized lending platform enabling users to lend and borrow assets with competitive rates.',
-      category: 'DeFi',
-      amount: 75000,
-      status: 'executed',
-      impact: {
-        stxDistributed: 75000,
-        communitySupport: 89,
-        completionRate: 100
-      },
-      metrics: {
-        yesVotes: 450,
-        noVotes: 82,
-        participationRate: 76
-      },
-      timeline: {
-        created: Date.now() - 120 * 24 * 60 * 60 * 1000,
-        approved: Date.now() - 100 * 24 * 60 * 60 * 1000,
-        executed: Date.now() - 30 * 24 * 60 * 60 * 1000
-      },
-      outcomes: [
-        '1,200+ active users',
-        '$2.5M in total value locked',
-        '98% uptime since launch',
-        'Featured in 3 major crypto publications'
-      ]
-    },
-    {
-      proposalId: 28,
-      title: 'Community NFT Marketplace',
-      description: 'Created a user-friendly NFT marketplace with low fees and advanced features for creators.',
-      category: 'NFT',
-      amount: 50000,
-      status: 'executed',
-      impact: {
-        stxDistributed: 50000,
-        communitySupport: 92,
-        completionRate: 100
-      },
-      metrics: {
-        yesVotes: 380,
-        noVotes: 45,
-        participationRate: 68
-      },
-      timeline: {
-        created: Date.now() - 150 * 24 * 60 * 60 * 1000,
-        approved: Date.now() - 130 * 24 * 60 * 60 * 1000,
-        executed: Date.now() - 60 * 24 * 60 * 60 * 1000
-      },
-      outcomes: [
-        '500+ NFTs minted',
-        '250+ creators onboarded',
-        '$500K in trading volume',
-        'Integration with 5 major wallets'
-      ]
-    },
-    {
-      proposalId: 15,
-      title: 'DAO Governance Dashboard',
-      description: 'Developed a comprehensive dashboard for tracking proposals, votes, and treasury analytics.',
-      category: 'Infrastructure',
-      amount: 35000,
-      status: 'approved',
-      impact: {
-        stxDistributed: 35000,
-        communitySupport: 85,
-        completionRate: 75
-      },
-      metrics: {
-        yesVotes: 320,
-        noVotes: 58,
-        participationRate: 72
+  const [portfolioItems] = useState<PortfolioItem[]>(() => {
+    const baseTime = Date.now();
+
+    return [
+      {
+        proposalId: 42,
+        title: 'DeFi Lending Protocol Development',
+        description: 'Built a decentralized lending platform enabling users to lend and borrow assets with competitive rates.',
+        category: 'DeFi',
+        amount: 75000,
+        status: 'executed',
+        impact: {
+          stxDistributed: 75000,
+          communitySupport: 89,
+          completionRate: 100
+        },
+        metrics: {
+          yesVotes: 450,
+          noVotes: 82,
+          participationRate: 76
+        },
+        timeline: {
+          created: baseTime - 120 * 24 * 60 * 60 * 1000,
+          approved: baseTime - 100 * 24 * 60 * 60 * 1000,
+          executed: baseTime - 30 * 24 * 60 * 60 * 1000
+        },
+        outcomes: [
+          '1,200+ active users',
+          '$2.5M in total value locked',
+          '98% uptime since launch',
+          'Featured in 3 major crypto publications'
+        ]
       },
-      timeline: {
-        created: Date.now() - 90 * 24 * 60 * 60 * 1000,
-        approved: Date.now() - 70 * 24 * 60 * 60 * 1000
+      {
+        proposalId: 28,
+        title: 'Community NFT Marketplace',
+        description: 'Created a user-friendly NFT marketplace with low fees and advanced features for creators.',
+        category: 'NFT',
+        amount: 50000,
+        status: 'executed',
+        impact: {
+          stxDistributed: 50000,
+          communitySupport: 92,
+          completionRate: 100
+        },
+        metrics: {
+          yesVotes: 380,
+          noVotes: 45,
+          participationRate: 68
+        },
+        timeline: {
+          created: baseTime - 150 * 24 * 60 * 60 * 1000,
+          approved: baseTime - 130 * 24 * 60 * 60 * 1000,
+          executed: baseTime - 60 * 24 * 60 * 60 * 1000
+        },
+        outcomes: [
+          '500+ NFTs minted',
+          '250+ creators onboarded',
+          '$500K in trading volume',
+          'Integration with 5 major wallets'
+        ]
       },
-      outcomes: [
-        '800+ daily active users',
-        '15 new features launched',
-        'Mobile app in development'
-      ]
-    }
-  ]);
+      {
+        proposalId: 15,
+        title: 'DAO Governance Dashboard',
+        description: 'Developed a comprehensive dashboard for tracking proposals, votes, and treasury analytics.',
+        category: 'Infrastructure',
+        amount: 35000,
+        status: 'approved',
+        impact: {
+          stxDistributed: 35000,
+          communitySupport: 85,
+          completionRate: 75
+        },
+        metrics: {
+          yesVotes: 320,
+          noVotes: 58,
+          participationRate: 72
+        },
+        timeline: {
+          created: baseTime - 90 * 24 * 60 * 60 * 1000,
+          approved: baseTime - 70 * 24 * 60 * 60 * 1000
+        },
+        outcomes: [
+          '800+ daily active users',
+          '15 new features launched',
+          'Mobile app in development'
+        ]
+      }
+    ];
+  });
 
   const [selectedItem, setSelectedItem] = useState<PortfolioItem | null>(null);
 
diff --git a/frontend/components/ProposalArchive.tsx b/frontend/components/ProposalArchive.tsx
index ff1c3026..ecdbc53e 100644
--- a/frontend/components/ProposalArchive.tsx
+++ b/frontend/components/ProposalArchive.tsx
@@ -15,37 +15,38 @@ interface Proposal {
   tags: string[];
 }
 
-// Mock data - would come from API/blockchain
-const MOCK_PROPOSALS: Proposal[] = [
-  {
-    id: 1,
-    title: 'DeFi Lending Protocol Development',
-    description: 'Build a decentralized lending platform on Stacks',
-    status: 'executed',
-    category: 'defi',
-    amount: 75000,
-    createdAt: Date.now() - 90 * 24 * 60 * 60 * 1000,
-    votes: { yes: 450, no: 120 },
-    author: 'SP1ABC...XYZ',
-    tags: ['defi', 'lending', 'smart-contracts']
-  },
-  {
-    id: 2,
-    title: 'NFT Marketplace Infrastructure',
-    description: 'Create marketplace for trading NFTs',
-    status: 'approved',
-    category: 'nft',
-    amount: 50000,
-    createdAt: Date.now() - 60 * 24 * 60 * 60 * 1000,
-    votes: { yes: 380, no: 95 },
-    author: 'SP2DEF...ABC',
-    tags: ['nft', 'marketplace']
-  }
-  // Add more mock data as needed
-];
-
 export default function ProposalArchive() {
-  const [proposals] = useState<Proposal[]>(MOCK_PROPOSALS);
+  const [now] = useState(() => Date.now());
+  const [proposals] = useState<Proposal[]>(() => {
+    const baseTime = Date.now();
+
+    return [
+      {
+        id: 1,
+        title: 'DeFi Lending Protocol Development',
+        description: 'Build a decentralized lending platform on Stacks',
+        status: 'executed',
+        category: 'defi',
+        amount: 75000,
+        createdAt: baseTime - 90 * 24 * 60 * 60 * 1000,
+        votes: { yes: 450, no: 120 },
+        author: 'SP1ABC...XYZ',
+        tags: ['defi', 'lending', 'smart-contracts']
+      },
+      {
+        id: 2,
+        title: 'NFT Marketplace Infrastructure',
+        description: 'Create marketplace for trading NFTs',
+        status: 'approved',
+        category: 'nft',
+        amount: 50000,
+        createdAt: baseTime - 60 * 24 * 60 * 60 * 1000,
+        votes: { yes: 380, no: 95 },
+        author: 'SP2DEF...ABC',
+        tags: ['nft', 'marketplace']
+      }
+    ];
+  });
   const [searchQuery, setSearchQuery] = useState('');
   const [filters, setFilters] = useState({
     status: 'all',
@@ -86,7 +87,6 @@ export default function ProposalArchive() {
 
     // Date range
     if (filters.dateRange !== 'all') {
-      const now = Date.now();
       const ranges: Record<string, number> = {
         '7d': 7 * 24 * 60 * 60 * 1000,
         '30d': 30 * 24 * 60 * 60 * 1000,
diff --git a/frontend/components/ProposalCollaboration.tsx b/frontend/components/ProposalCollaboration.tsx
index c4b21d96..f034724a 100644
--- a/frontend/components/ProposalCollaboration.tsx
+++ b/frontend/components/ProposalCollaboration.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Contributor {
   address: string;
@@ -16,15 +16,34 @@ interface ProposalCollaborationProps {
 }
 
 export default function ProposalCollaboration({ proposalId, authorAddress }: ProposalCollaborationProps) {
-  const [contributors, setContributors] = useState<Contributor[]>([
-    {
-      address: authorAddress,
-      role: 'author',
-      contribution: 'Original proposal creator',
-      addedAt: Date.now(),
-      rewardShare: 60
+  const [contributors, setContributors] = useState<Contributor[]>(() => {
+    if (typeof window === 'undefined') {
+      return [
+        {
+          address: authorAddress,
+          role: 'author',
+          contribution: 'Original proposal creator',
+          addedAt: Date.now(),
+          rewardShare: 60
+        }
+      ];
     }
-  ]);
+
+    const stored = localStorage.getItem(`proposal-${proposalId}-contributors`);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+
+    return [
+      {
+        address: authorAddress,
+        role: 'author',
+        contribution: 'Original proposal creator',
+        addedAt: Date.now(),
+        rewardShare: 60
+      }
+    ];
+  });
   const [showAddForm, setShowAddForm] = useState(false);
   const [newContributor, setNewContributor] = useState({
     address: '',
@@ -33,13 +52,6 @@ export default function ProposalCollaboration({ proposalId, authorAddress }: Pro
     rewardShare: 10
   });
 
-  useEffect(() => {
-    const stored = localStorage.getItem(`proposal-${proposalId}-contributors`);
-    if (stored) {
-      setContributors(JSON.parse(stored));
-    }
-  }, [proposalId]);
-
   const saveContributors = (updated: Contributor[]) => {
     localStorage.setItem(`proposal-${proposalId}-contributors`, JSON.stringify(updated));
     setContributors(updated);
diff --git a/frontend/components/ProposalVersioning.tsx b/frontend/components/ProposalVersioning.tsx
index f4676a4c..ba93520e 100644
--- a/frontend/components/ProposalVersioning.tsx
+++ b/frontend/components/ProposalVersioning.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Version {
   id: number;
@@ -23,33 +23,19 @@ interface ProposalVersioningProps {
   };
 }
 
-export default function ProposalVersioning({ proposalId, currentData }: ProposalVersioningProps) {
-  const [versions, setVersions] = useState<Version[]>([]);
+export default function ProposalVersioning({ proposalId }: ProposalVersioningProps) {
+  const [versions] = useState<Version[]>(() => {
+    if (typeof window === 'undefined') {
+      return [];
+    }
+
+    const stored = localStorage.getItem(`proposal-${proposalId}-versions`);
+    return stored ? JSON.parse(stored) : [];
+  });
   const [showHistory, setShowHistory] = useState(false);
   const [selectedVersion, setSelectedVersion] = useState<Version | null>(null);
   const [showDiff, setShowDiff] = useState(false);
 
-  useEffect(() => {
-    const stored = localStorage.getItem(`proposal-${proposalId}-versions`);
-    if (stored) {
-      setVersions(JSON.parse(stored));
-    }
-  }, [proposalId]);
-
-  const saveVersion = (changes: Version['changes'], changeNote: string) => {
-    const newVersion: Version = {
-      id: versions.length + 1,
-      timestamp: Date.now(),
-      editor: 'SP1ABC...XYZ', // Would come from user context
-      changes,
-      changeNote
-    };
-
-    const updated = [...versions, newVersion];
-    localStorage.setItem(`proposal-${proposalId}-versions`, JSON.stringify(updated));
-    setVersions(updated);
-  };
-
   const revertToVersion = (version: Version) => {
     if (confirm(`Are you sure you want to revert to version ${version.id}?`)) {
       // In real implementation, would update the proposal with version data
@@ -61,7 +47,6 @@ export default function ProposalVersioning({ proposalId, currentData }: Proposal
   const renderDiff = (old: string, newText: string) => {
     const oldLines = old.split('\n');
     const newLines = newText.split('\n');
-    const maxLength = Math.max(oldLines.length, newLines.length);
 
     return (
       <div className="grid grid-cols-2 gap-4 text-sm">

From 5209ca28026aae557224a999ab3b0ec2b6fee282 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 00:35:03 +0100
Subject: [PATCH 11/23] chore(frontend): trim proposal flow ui

---
 frontend/components/CommentInput.tsx          |  1 -
 frontend/components/EcosystemRoadmap.tsx      |  2 +-
 frontend/components/GovernanceTimeline.tsx    |  2 +-
 frontend/components/InterestProfiler.tsx      |  2 +-
 frontend/components/MilestoneLifecycle.tsx    |  2 +-
 frontend/components/MultisigFlow.tsx          |  5 +-
 frontend/components/PaginatedProposalList.tsx |  2 +-
 frontend/components/ProposalDashboard.tsx     |  4 +-
 frontend/components/ProposalWorkflow.tsx      | 55 +++++++++++++------
 frontend/components/ReputationSystem.tsx      | 39 ++++++-------
 10 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/frontend/components/CommentInput.tsx b/frontend/components/CommentInput.tsx
index 2365c6b0..79787542 100644
--- a/frontend/components/CommentInput.tsx
+++ b/frontend/components/CommentInput.tsx
@@ -13,7 +13,6 @@ interface CommentInputProps {
 }
 
 export function CommentInput({
-  proposalId: _proposalId,
   onSubmit,
   isReply = false,
   onCancel,
diff --git a/frontend/components/EcosystemRoadmap.tsx b/frontend/components/EcosystemRoadmap.tsx
index 411cbda6..c2332d33 100644
--- a/frontend/components/EcosystemRoadmap.tsx
+++ b/frontend/components/EcosystemRoadmap.tsx
@@ -54,7 +54,7 @@ export default function EcosystemRoadmap() {
                                     {step.title}
                                 </h4>
                                 <p className="text-sm font-medium text-slate-400 leading-relaxed uppercase tracking-tighter italic">
-                                    "{step.desc}"
+                                    &quot;{step.desc}&quot;
                                 </p>
                             </div>
                         </motion.div>
diff --git a/frontend/components/GovernanceTimeline.tsx b/frontend/components/GovernanceTimeline.tsx
index e41366ef..ca3bd7ca 100644
--- a/frontend/components/GovernanceTimeline.tsx
+++ b/frontend/components/GovernanceTimeline.tsx
@@ -75,7 +75,7 @@ export default function GovernanceTimeline() {
                                 {event.title}
                             </h4>
                             <p className="text-xs font-medium text-slate-400 leading-relaxed italic">
-                                "{event.description}"
+                                &quot;{event.description}&quot;
                             </p>
                         </div>
                     </motion.div>
diff --git a/frontend/components/InterestProfiler.tsx b/frontend/components/InterestProfiler.tsx
index 65f4c4f7..4c11ebae 100644
--- a/frontend/components/InterestProfiler.tsx
+++ b/frontend/components/InterestProfiler.tsx
@@ -53,7 +53,7 @@ export default function InterestProfiler() {
                     <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-500">Active Filters</h4>
                 </div>
                 <p className="text-[11px] font-medium text-slate-400 leading-relaxed uppercase tracking-tighter">
-                    Your dashboard will prioritize <span className="text-white font-black">{selected.length} categories</span>. We'll alert you when high-impact proposals matching these tags are submitted.
+                    Your dashboard will prioritize <span className="text-white font-black">{selected.length} categories</span>. We&apos;ll alert you when high-impact proposals matching these tags are submitted.
                 </p>
             </div>
         </div>
diff --git a/frontend/components/MilestoneLifecycle.tsx b/frontend/components/MilestoneLifecycle.tsx
index d671d9a7..1b695abc 100644
--- a/frontend/components/MilestoneLifecycle.tsx
+++ b/frontend/components/MilestoneLifecycle.tsx
@@ -91,7 +91,7 @@ export default function MilestoneLifecycle() {
                         </div>
 
                         <p className="text-[11px] font-medium text-slate-400 leading-relaxed italic mb-4">
-                            "{ms.description}"
+                            &quot;{ms.description}&quot;
                         </p>
 
                         {ms.status === 'active' && (
diff --git a/frontend/components/MultisigFlow.tsx b/frontend/components/MultisigFlow.tsx
index d0b5d4b1..8f62209b 100644
--- a/frontend/components/MultisigFlow.tsx
+++ b/frontend/components/MultisigFlow.tsx
@@ -10,9 +10,6 @@ const signers = [
 ];
 
 export default function MultisigFlow() {
-    const signedCount = signers.filter(s => s.status === 'signed').length;
-    const _isComplete = signedCount === signers.length;
-
     return (
         <div className="p-8 bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-[40px] overflow-hidden">
             <div className="flex justify-between items-start mb-10">
@@ -24,7 +21,7 @@ export default function MultisigFlow() {
             </div>
 
             <div className="space-y-6 mb-10">
-                {signers.map((s, _i) => (
+                {signers.map((s) => (
                     <div key={s.id} className="flex items-center gap-4 group">
                         <div className={`w-10 h-10 rounded-2xl flex items-center justify-center border transition-all ${s.status === 'signed' ? 'bg-green-500/10 border-green-500/30 text-green-500' : 'bg-slate-950 border-white/5 text-slate-600'
                             }`}>
diff --git a/frontend/components/PaginatedProposalList.tsx b/frontend/components/PaginatedProposalList.tsx
index 7353c9fb..cb6c8296 100644
--- a/frontend/components/PaginatedProposalList.tsx
+++ b/frontend/components/PaginatedProposalList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useProposalPagination } from '@/hooks/useProposalPagination';
 import { useProposalFilters } from '@/hooks/useProposalFilters';
 import { PaginationToolbar } from './PaginationToolbar';
diff --git a/frontend/components/ProposalDashboard.tsx b/frontend/components/ProposalDashboard.tsx
index 68b3e603..33c8cfd0 100644
--- a/frontend/components/ProposalDashboard.tsx
+++ b/frontend/components/ProposalDashboard.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { PaginatedProposalList } from './PaginatedProposalList';
 import { ProposalFilterPanel } from './ProposalFilterPanel';
 import { ProposalSortbar } from './ProposalSortbar';
@@ -13,7 +13,7 @@ type ValidSortBy = 'title' | 'createdAt' | 'votes' | 'requestedAmount';
 export const ProposalDashboard: React.FC<ProposalDashboardProps> = ({
   onProposalSelect,
 }) => {
-  const { filters, sort, updateFilter, updateSort, clearFilters } = useProposalFilters();
+  const { sort, updateFilter, updateSort } = useProposalFilters();
   const [selectedStatus, setSelectedStatus] = React.useState<string | null>(null);
   const [selectedCategory, setSelectedCategory] = React.useState<string | null>(null);
 
diff --git a/frontend/components/ProposalWorkflow.tsx b/frontend/components/ProposalWorkflow.tsx
index 3a1067fc..f73e412a 100644
--- a/frontend/components/ProposalWorkflow.tsx
+++ b/frontend/components/ProposalWorkflow.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 type Stage = 'Draft' | 'Review' | 'Active' | 'Voting' | 'Executed';
 
@@ -72,23 +72,48 @@ const STAGES: StageConfig[] = [
 ];
 
 export default function ProposalWorkflow({ proposalId, initialStage = 'Draft', onStageChange }: ProposalWorkflowProps) {
-  const [currentStage, setCurrentStage] = useState<Stage>(initialStage);
-  const [stageProgress, setStageProgress] = useState<Record<Stage, number>>({
-    Draft: 0,
-    Review: 0,
-    Active: 0,
-    Voting: 0,
-    Executed: 0
+  const [currentStage, setCurrentStage] = useState<Stage>(() => {
+    if (typeof window === 'undefined') {
+      return initialStage;
+    }
+
+    const stored = localStorage.getItem(`proposal-${proposalId}-workflow`);
+    if (!stored) {
+      return initialStage;
+    }
+
+    return JSON.parse(stored).currentStage ?? initialStage;
   });
+  const [stageProgress] = useState<Record<Stage, number>>(() => {
+    if (typeof window === 'undefined') {
+      return {
+        Draft: 0,
+        Review: 0,
+        Active: 0,
+        Voting: 0,
+        Executed: 0
+      };
+    }
 
-  useEffect(() => {
     const stored = localStorage.getItem(`proposal-${proposalId}-workflow`);
-    if (stored) {
-      const data = JSON.parse(stored);
-      setCurrentStage(data.currentStage);
-      setStageProgress(data.stageProgress);
+    if (!stored) {
+      return {
+        Draft: 0,
+        Review: 0,
+        Active: 0,
+        Voting: 0,
+        Executed: 0
+      };
     }
-  }, [proposalId]);
+
+    return JSON.parse(stored).stageProgress ?? {
+      Draft: 0,
+      Review: 0,
+      Active: 0,
+      Voting: 0,
+      Executed: 0
+    };
+  });
 
   const updateStage = (newStage: Stage) => {
     setCurrentStage(newStage);
@@ -124,8 +149,6 @@ export default function ProposalWorkflow({ proposalId, initialStage = 'Draft', o
           {STAGES.map((stage, index) => {
             const isCompleted = index < getCurrentStageIndex();
             const isCurrent = stage.name === currentStage;
-            const isUpcoming = index > getCurrentStageIndex();
-
             return (
               <div key={stage.name} className="flex-1 flex items-center">
                 <div className="flex flex-col items-center flex-1">
diff --git a/frontend/components/ReputationSystem.tsx b/frontend/components/ReputationSystem.tsx
index 298f0c75..d0625790 100644
--- a/frontend/components/ReputationSystem.tsx
+++ b/frontend/components/ReputationSystem.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Achievement {
   id: string;
@@ -33,31 +33,28 @@ const ACHIEVEMENTS: Achievement[] = [
 ];
 
 export default function ReputationSystem({ userAddress, reputation }: ReputationSystemProps) {
-  const [achievements, setAchievements] = useState<Achievement[]>([]);
-  const [unlockedCount, setUnlockedCount] = useState(0);
+  const [achievements] = useState<Achievement[]>(() => {
+    if (typeof window === 'undefined') {
+      return ACHIEVEMENTS;
+    }
 
-  useEffect(() => {
     const stored = localStorage.getItem(`achievements-${userAddress}`);
     if (stored) {
-      setAchievements(JSON.parse(stored));
-    } else {
-      // Simulate some unlocked achievements
-      const simulated = ACHIEVEMENTS.map(ach => {
-        const random = Math.random();
-        if (random > 0.7) {
-          return { ...ach, unlockedAt: Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000 };
-        } else if (random > 0.4) {
-          return { ...ach, progress: Math.floor(Math.random() * (ach.maxProgress || 1)) };
-        }
-        return ach;
-      });
-      setAchievements(simulated);
+      return JSON.parse(stored);
     }
-  }, [userAddress]);
 
-  useEffect(() => {
-    setUnlockedCount(achievements.filter(a => a.unlockedAt).length);
-  }, [achievements]);
+    return ACHIEVEMENTS.map(ach => {
+      const random = Math.random();
+      if (random > 0.7) {
+        return { ...ach, unlockedAt: Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000 };
+      }
+      if (random > 0.4) {
+        return { ...ach, progress: Math.floor(Math.random() * (ach.maxProgress || 1)) };
+      }
+      return ach;
+    });
+  });
+  const unlockedCount = achievements.filter(a => a.unlockedAt).length;
 
   const getTier = (rep: number) => {
     if (rep >= 2000) return { name: 'Diamond', color: 'from-cyan-400 to-blue-500', icon: '💎', min: 2000, max: 999999 };

From 018bbba4052fc405e07ce485971006a5e98d2dca Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 00:43:16 +0100
Subject: [PATCH 12/23] chore(frontend): trim voting widgets

---
 frontend/components/STXDistributionChart.tsx |  2 +-
 frontend/components/ScheduledVote.tsx        | 59 ++++++++++++--------
 frontend/components/Stats.tsx                | 13 +++--
 frontend/components/TreasuryForecasting.tsx  |  3 +-
 frontend/components/TreasuryGovernance.tsx   | 32 ++++-------
 frontend/components/VoteComment.tsx          | 27 ++++-----
 frontend/components/VoteDelegation.tsx       | 54 ++++++++++++++----
 frontend/components/VoteHistory.tsx          | 54 +++++++-----------
 frontend/components/VoteNotification.tsx     | 38 +++++++------
 frontend/components/WithdrawVoteModal.tsx    |  4 +-
 10 files changed, 159 insertions(+), 127 deletions(-)

diff --git a/frontend/components/STXDistributionChart.tsx b/frontend/components/STXDistributionChart.tsx
index 63946f4a..8ef73abd 100644
--- a/frontend/components/STXDistributionChart.tsx
+++ b/frontend/components/STXDistributionChart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { useGovernanceAnalytics } from '@/hooks/useGovernanceAnalytics';
 
 export default function STXDistributionChart() {
diff --git a/frontend/components/ScheduledVote.tsx b/frontend/components/ScheduledVote.tsx
index 6baf81b6..789c1728 100644
--- a/frontend/components/ScheduledVote.tsx
+++ b/frontend/components/ScheduledVote.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 interface ScheduledVoteItem {
   proposalId: number;
@@ -18,32 +18,45 @@ interface ScheduledVoteProps {
 export default function ScheduledVote({ proposalId, onSchedule }: ScheduledVoteProps) {
   const [voteType, setVoteType] = useState<'yes' | 'no'>('yes');
   const [scheduledTime, setScheduledTime] = useState('');
-  const [scheduledVotes, setScheduledVotes] = useState<ScheduledVoteItem[]>([]);
-  const [countdown, setCountdown] = useState<Record<number, string>>({});
+  const [scheduledVotes, setScheduledVotes] = useState<ScheduledVoteItem[]>(() => {
+    if (typeof window === 'undefined') {
+      return [];
+    }
 
-  useEffect(() => {
-    // Load scheduled votes
     const votes: ScheduledVoteItem[] = JSON.parse(localStorage.getItem('scheduledVotes') || '[]');
-    setScheduledVotes(votes.filter((v) => v.proposalId === proposalId));
+    return votes;
+  });
+  const [tick, setTick] = useState(() => Date.now());
+
+  const proposalVotes = useMemo(
+    () => scheduledVotes.filter((vote) => vote.proposalId === proposalId),
+    [proposalId, scheduledVotes]
+  );
+
+  const countdown = useMemo(() => {
+    const nextCountdowns: Record<number, string> = {};
 
-    // Update countdowns
+    proposalVotes.forEach((vote, index: number) => {
+      const timeLeft = vote.executionTime - tick;
+      if (timeLeft > 0) {
+        const hours = Math.floor(timeLeft / 3600000);
+        const minutes = Math.floor((timeLeft % 3600000) / 60000);
+        nextCountdowns[index] = `${hours}h ${minutes}m`;
+      } else {
+        nextCountdowns[index] = 'Executing...';
+      }
+    });
+
+    return nextCountdowns;
+  }, [proposalVotes, tick]);
+
+  useEffect(() => {
     const interval = setInterval(() => {
-      const newCountdowns: Record<number, string> = {};
-      votes.forEach((vote, index: number) => {
-        const timeLeft = vote.executionTime - Date.now();
-        if (timeLeft > 0) {
-          const hours = Math.floor(timeLeft / 3600000);
-          const minutes = Math.floor((timeLeft % 3600000) / 60000);
-          newCountdowns[index] = `${hours}h ${minutes}m`;
-        } else {
-          newCountdowns[index] = 'Executing...';
-        }
-      });
-      setCountdown(newCountdowns);
+      setTick(Date.now());
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [proposalId]);
+  }, []);
 
   const handleSchedule = () => {
     if (!scheduledTime) return;
@@ -70,7 +83,7 @@ export default function ScheduledVote({ proposalId, onSchedule }: ScheduledVoteP
     const votes: ScheduledVoteItem[] = JSON.parse(localStorage.getItem('scheduledVotes') || '[]');
     votes.splice(index, 1);
     localStorage.setItem('scheduledVotes', JSON.stringify(votes));
-    setScheduledVotes(votes.filter((v) => v.proposalId === proposalId));
+    setScheduledVotes(votes);
   };
 
   return (
@@ -126,11 +139,11 @@ export default function ScheduledVote({ proposalId, onSchedule }: ScheduledVoteP
       </div>
 
       {/* Scheduled Votes List */}
-      {scheduledVotes.length > 0 && (
+          {proposalVotes.length > 0 && (
         <div>
           <h4 className="font-semibold mb-3">Scheduled Votes</h4>
           <div className="space-y-2">
-            {scheduledVotes.map((vote, index) => (
+            {proposalVotes.map((vote, index) => (
               <div
                 key={index}
                 className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900 rounded-lg"
diff --git a/frontend/components/Stats.tsx b/frontend/components/Stats.tsx
index 7a10f301..c4b8bc90 100644
--- a/frontend/components/Stats.tsx
+++ b/frontend/components/Stats.tsx
@@ -3,7 +3,6 @@
 import { useState, useEffect } from 'react';
 import { getAllProposals, getProposalCount } from '@/lib/stacks';
 import { formatSTX } from '@/utils/formatSTX';
-import type { Proposal } from '@/types';
 
 export default function Stats() {
     const [totalProposals, setTotalProposals] = useState(0);
@@ -12,10 +11,6 @@ export default function Stats() {
     const [topProposers, setTopProposers] = useState<{ address: string; count: number }[]>([]);
     const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        fetchStats();
-    }, []);
-
     const fetchStats = async () => {
         try {
             setLoading(true);
@@ -62,6 +57,14 @@ export default function Stats() {
         }
     };
 
+    useEffect(() => {
+        const loadStats = async () => {
+            await fetchStats();
+        };
+
+        void loadStats();
+    }, []);
+
     // Uses centralized formatSTX from utils/formatSTX
 
     const shortenAddress = (address: string) => {
diff --git a/frontend/components/TreasuryForecasting.tsx b/frontend/components/TreasuryForecasting.tsx
index 9ffbfcff..b976a238 100644
--- a/frontend/components/TreasuryForecasting.tsx
+++ b/frontend/components/TreasuryForecasting.tsx
@@ -44,6 +44,7 @@ interface SustainabilityMetric {
 }
 
 export default function TreasuryForecasting() {
+  const [currentTime] = useState(() => Date.now());
   const [currentBalance] = useState(650000);
   const [selectedScenario, setSelectedScenario] = useState<'optimistic' | 'realistic' | 'pessimistic'>('realistic');
   
@@ -312,7 +313,7 @@ export default function TreasuryForecasting() {
                 {selectedScenarioData.runway} months
               </div>
               <div className="text-sm text-gray-700 dark:text-gray-300">
-                Treasury depletes by {new Date(Date.now() + selectedScenarioData.runway * 30 * 24 * 60 * 60 * 1000).toLocaleDateString()}
+                Treasury depletes by {new Date(currentTime + selectedScenarioData.runway * 30 * 24 * 60 * 60 * 1000).toLocaleDateString()}
               </div>
             </div>
 
diff --git a/frontend/components/TreasuryGovernance.tsx b/frontend/components/TreasuryGovernance.tsx
index a1dcbaee..766de2b5 100644
--- a/frontend/components/TreasuryGovernance.tsx
+++ b/frontend/components/TreasuryGovernance.tsx
@@ -47,6 +47,7 @@ interface EmergencyProcedure {
 }
 
 export default function TreasuryGovernance() {
+  const baseTime = useState(() => Date.now())[0];
   const [spendingLimits] = useState<SpendingLimit[]>([
     {
       id: 1,
@@ -86,13 +87,13 @@ export default function TreasuryGovernance() {
     }
   ]);
 
-  const [parameters, setParameters] = useState<TreasuryParameter[]>([
+  const [parameters] = useState<TreasuryParameter[]>([
     {
       id: 1,
       name: 'Min Proposal Threshold',
       description: 'Minimum STX required to create a funding proposal',
       currentValue: 10000,
-      lastUpdated: Date.now() - 30 * 24 * 60 * 60 * 1000,
+      lastUpdated: baseTime - 30 * 24 * 60 * 60 * 1000,
       updatedBy: 'SP9XYZ...123',
       requiresVote: true
     },
@@ -101,7 +102,7 @@ export default function TreasuryGovernance() {
       name: 'Vote Pass Percentage',
       description: 'Percentage of votes needed for proposal approval',
       currentValue: '60%',
-      lastUpdated: Date.now() - 60 * 24 * 60 * 60 * 1000,
+      lastUpdated: baseTime - 60 * 24 * 60 * 60 * 1000,
       updatedBy: 'SP8ABC...456',
       requiresVote: true
     },
@@ -110,7 +111,7 @@ export default function TreasuryGovernance() {
       name: 'Treasury Manager Multi-Sig',
       description: 'Number of signatures required for large withdrawals',
       currentValue: '3 of 5',
-      lastUpdated: Date.now() - 90 * 24 * 60 * 60 * 1000,
+      lastUpdated: baseTime - 90 * 24 * 60 * 60 * 1000,
       updatedBy: 'SP7DEF...789',
       requiresVote: true
     },
@@ -119,7 +120,7 @@ export default function TreasuryGovernance() {
       name: 'Emergency Pause Threshold',
       description: 'Amount that triggers emergency review',
       currentValue: 100000,
-      lastUpdated: Date.now() - 45 * 24 * 60 * 60 * 1000,
+      lastUpdated: baseTime - 45 * 24 * 60 * 60 * 1000,
       updatedBy: 'SP9XYZ...123',
       requiresVote: true
     }
@@ -128,7 +129,7 @@ export default function TreasuryGovernance() {
   const [auditLog] = useState<AuditEntry[]>([
     {
       id: 1,
-      timestamp: Date.now() - 2 * 60 * 60 * 1000,
+      timestamp: baseTime - 2 * 60 * 60 * 1000,
       action: 'Grant Payout',
       actor: 'SP9XYZ...123',
       category: 'DeFi',
@@ -138,7 +139,7 @@ export default function TreasuryGovernance() {
     },
     {
       id: 2,
-      timestamp: Date.now() - 5 * 60 * 60 * 1000,
+      timestamp: baseTime - 5 * 60 * 60 * 1000,
       action: 'Budget Increase',
       actor: 'SP8ABC...456',
       category: 'NFT',
@@ -148,7 +149,7 @@ export default function TreasuryGovernance() {
     },
     {
       id: 3,
-      timestamp: Date.now() - 12 * 60 * 60 * 1000,
+      timestamp: baseTime - 12 * 60 * 60 * 1000,
       action: 'Parameter Update',
       actor: 'SP7DEF...789',
       category: 'Governance',
@@ -157,7 +158,7 @@ export default function TreasuryGovernance() {
     },
     {
       id: 4,
-      timestamp: Date.now() - 24 * 60 * 60 * 1000,
+      timestamp: baseTime - 24 * 60 * 60 * 1000,
       action: 'Emergency Pause',
       actor: 'SP6GHI...012',
       category: 'Security',
@@ -166,7 +167,7 @@ export default function TreasuryGovernance() {
     },
     {
       id: 5,
-      timestamp: Date.now() - 30 * 60 * 60 * 1000,
+      timestamp: baseTime - 30 * 60 * 60 * 1000,
       action: 'Spending Limit Set',
       actor: 'SP9XYZ...123',
       category: 'DeFi',
@@ -184,7 +185,7 @@ export default function TreasuryGovernance() {
       signaturesRequired: 2,
       cooldownPeriod: 48,
       status: 'active',
-      lastTriggered: Date.now() - 24 * 60 * 60 * 1000
+      lastTriggered: baseTime - 24 * 60 * 60 * 1000
     },
     {
       id: 2,
@@ -208,7 +209,6 @@ export default function TreasuryGovernance() {
 
   const [, setShowLimitModal] = useState(false);
   const [, setShowParameterModal] = useState(false);
-  const [, setSelectedParameter] = useState<TreasuryParameter | null>(null);
   const [filterCategory, setFilterCategory] = useState<string>('all');
 
   const filteredAuditLog = auditLog.filter(entry =>
@@ -243,14 +243,6 @@ export default function TreasuryGovernance() {
     return 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-900/20';
   };
 
-  const proposeParameterChange = (param: TreasuryParameter, newValue: string | number) => {
-    setParameters(parameters.map(p =>
-      p.id === param.id
-        ? { ...p, proposedValue: newValue }
-        : p
-    ));
-  };
-
   return (
     <div className="space-y-6">
       {/* Header */}
diff --git a/frontend/components/VoteComment.tsx b/frontend/components/VoteComment.tsx
index 4010b1fd..fbc3ca53 100644
--- a/frontend/components/VoteComment.tsx
+++ b/frontend/components/VoteComment.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Comment {
   id: number;
@@ -17,19 +17,20 @@ interface VoteCommentProps {
 }
 
 export default function VoteComment({ proposalId, userAddress }: VoteCommentProps) {
-  const [comments, setComments] = useState<Comment[]>([]);
+  const [baseTimestamp] = useState(() => Date.now());
+  const [comments, setComments] = useState<Comment[]>(() => {
+    if (typeof window === 'undefined') {
+      return [];
+    }
+
+    const stored = localStorage.getItem(`proposal-${proposalId}-comments`);
+    return stored ? JSON.parse(stored) : [];
+  });
   const [newComment, setNewComment] = useState('');
   const [voteChoice, setVoteChoice] = useState<'yes' | 'no' | 'abstain'>('yes');
   const [replyTo, setReplyTo] = useState<number | null>(null);
   const [replyText, setReplyText] = useState('');
 
-  useEffect(() => {
-    const stored = localStorage.getItem(`proposal-${proposalId}-comments`);
-    if (stored) {
-      setComments(JSON.parse(stored));
-    }
-  }, [proposalId]);
-
   const saveComments = (updatedComments: Comment[]) => {
     localStorage.setItem(`proposal-${proposalId}-comments`, JSON.stringify(updatedComments));
     setComments(updatedComments);
@@ -39,10 +40,10 @@ export default function VoteComment({ proposalId, userAddress }: VoteCommentProp
     if (!newComment.trim()) return;
 
     const comment: Comment = {
-      id: Date.now(),
+      id: baseTimestamp + comments.length + 1,
       author: userAddress.slice(0, 8) + '...' + userAddress.slice(-4),
       text: newComment,
-      timestamp: Date.now(),
+      timestamp: baseTimestamp,
       vote: voteChoice,
       replies: []
     };
@@ -55,10 +56,10 @@ export default function VoteComment({ proposalId, userAddress }: VoteCommentProp
     if (!replyText.trim()) return;
 
     const reply: Comment = {
-      id: Date.now(),
+      id: baseTimestamp + comments.length + replyText.length + 1,
       author: userAddress.slice(0, 8) + '...' + userAddress.slice(-4),
       text: replyText,
-      timestamp: Date.now(),
+      timestamp: baseTimestamp,
       vote: 'abstain',
       replies: []
     };
diff --git a/frontend/components/VoteDelegation.tsx b/frontend/components/VoteDelegation.tsx
index 9948d802..11a32540 100644
--- a/frontend/components/VoteDelegation.tsx
+++ b/frontend/components/VoteDelegation.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useCallback, useState } from 'react';
 import toast from 'react-hot-toast';
 
 interface Delegation {
@@ -14,17 +14,51 @@ interface VoteDelegationProps {
 }
 
 export default function VoteDelegation({ userAddress }: VoteDelegationProps) {
+  const [baseTimestamp] = useState(() => Date.now());
   const [delegateTo, setDelegateTo] = useState('');
   const [isOpen, setIsOpen] = useState(false);
-  const [currentDelegation, setCurrentDelegation] = useState<Delegation | null>(null);
-  const [delegatedToMe, setDelegatedToMe] = useState<string[]>([]);
-  const [totalDelegatedVotes, setTotalDelegatedVotes] = useState(0);
+  const [currentDelegation, setCurrentDelegation] = useState<Delegation | null>(() => {
+    if (!userAddress || typeof window === 'undefined') {
+      return null;
+    }
 
-  useEffect(() => {
-    loadDelegationData();
-  }, [userAddress]);
+    const stored = localStorage.getItem(`delegation-${userAddress}`);
+    return stored ? JSON.parse(stored) : null;
+  });
+  const [delegatedToMe, setDelegatedToMe] = useState<string[]>(() => {
+    if (!userAddress || typeof window === 'undefined') {
+      return [];
+    }
+
+    return Object.keys(localStorage)
+      .filter((key) => key.startsWith('delegation-') && key !== `delegation-${userAddress}`)
+      .filter((key) => {
+        const data = localStorage.getItem(key);
+        if (!data) return false;
 
-  const loadDelegationData = () => {
+        return JSON.parse(data).delegateTo === userAddress;
+      })
+      .map((key) => key.replace('delegation-', ''));
+  });
+  const [totalDelegatedVotes, setTotalDelegatedVotes] = useState(() => {
+    if (!userAddress || typeof window === 'undefined') {
+      return 0;
+    }
+
+    return Object.keys(localStorage).reduce((total, key) => {
+      if (!key.startsWith('delegation-') || key === `delegation-${userAddress}`) {
+        return total;
+      }
+
+      const data = localStorage.getItem(key);
+      if (!data) return total;
+
+      const delegation = JSON.parse(data);
+      return delegation.delegateTo === userAddress ? total + (delegation.voteCount || 1) : total;
+    }, 0);
+  });
+
+  const loadDelegationData = useCallback(() => {
     if (!userAddress) return;
 
     // Load current delegation
@@ -54,7 +88,7 @@ export default function VoteDelegation({ userAddress }: VoteDelegationProps) {
 
     setDelegatedToMe(delegators);
     setTotalDelegatedVotes(totalVotes);
-  };
+  }, [userAddress]);
 
   const handleDelegate = () => {
     if (!delegateTo.trim()) {
@@ -74,7 +108,7 @@ export default function VoteDelegation({ userAddress }: VoteDelegationProps) {
 
     const delegation: Delegation = {
       delegateTo,
-      delegatedAt: Date.now(),
+      delegatedAt: baseTimestamp,
       voteCount: 1
     };
 
diff --git a/frontend/components/VoteHistory.tsx b/frontend/components/VoteHistory.tsx
index 527de866..d597149f 100644
--- a/frontend/components/VoteHistory.tsx
+++ b/frontend/components/VoteHistory.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Vote {
   proposalId: string;
@@ -17,38 +17,23 @@ interface VoteHistoryProps {
 }
 
 export default function VoteHistory({ userAddress }: VoteHistoryProps) {
-  const [votes, setVotes] = useState<Vote[]>([]);
-  const [filter, setFilter] = useState<'ALL' | 'YES' | 'NO'>('ALL');
-  const [dateRange, setDateRange] = useState('all');
-  const [totalSpent, setTotalSpent] = useState(0);
-  const [categoryStats, setCategoryStats] = useState<Record<string, number>>({});
-
-  useEffect(() => {
-    loadVoteHistory();
-  }, [userAddress]);
-
-  const loadVoteHistory = () => {
-    if (!userAddress) return;
+  const [baseTimestamp] = useState(() => Date.now());
+  const [votes] = useState<Vote[]>(() => {
+    if (!userAddress || typeof window === 'undefined') {
+      return [];
+    }
 
-    // Load votes from localStorage
     const storedVotes = localStorage.getItem(`vote-history-${userAddress}`);
-    if (storedVotes) {
-      const parsedVotes: Vote[] = JSON.parse(storedVotes);
-      setVotes(parsedVotes);
-      
-      // Calculate total spent
-      const total = parsedVotes.reduce((sum, vote) => sum + vote.cost, 0);
-      setTotalSpent(total);
-
-      // Calculate category stats
-      const stats: Record<string, number> = {};
-      parsedVotes.forEach(vote => {
-        const category = vote.category || 'General';
-        stats[category] = (stats[category] || 0) + 1;
-      });
-      setCategoryStats(stats);
-    }
-  };
+    return storedVotes ? JSON.parse(storedVotes) : [];
+  });
+  const [filter, setFilter] = useState<'ALL' | 'YES' | 'NO'>('ALL');
+  const [dateRange, setDateRange] = useState('all');
+  const totalSpent = votes.reduce((sum, vote) => sum + vote.cost, 0);
+  const categoryStats = votes.reduce<Record<string, number>>((stats, vote) => {
+    const category = vote.category || 'General';
+    stats[category] = (stats[category] || 0) + 1;
+    return stats;
+  }, {});
 
   const filterVotes = () => {
     let filtered = votes;
@@ -59,18 +44,17 @@ export default function VoteHistory({ userAddress }: VoteHistoryProps) {
     }
 
     // Filter by date range
-    const now = Date.now();
     const dayMs = 24 * 60 * 60 * 1000;
     
     switch(dateRange) {
       case '7days':
-        filtered = filtered.filter(vote => now - vote.timestamp < 7 * dayMs);
+        filtered = filtered.filter(vote => baseTimestamp - vote.timestamp < 7 * dayMs);
         break;
       case '30days':
-        filtered = filtered.filter(vote => now - vote.timestamp < 30 * dayMs);
+        filtered = filtered.filter(vote => baseTimestamp - vote.timestamp < 30 * dayMs);
         break;
       case '90days':
-        filtered = filtered.filter(vote => now - vote.timestamp < 90 * dayMs);
+        filtered = filtered.filter(vote => baseTimestamp - vote.timestamp < 90 * dayMs);
         break;
     }
 
diff --git a/frontend/components/VoteNotification.tsx b/frontend/components/VoteNotification.tsx
index 857f26f9..dcbc903f 100644
--- a/frontend/components/VoteNotification.tsx
+++ b/frontend/components/VoteNotification.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Notification {
   id: number;
@@ -17,27 +17,31 @@ interface VoteNotificationProps {
 }
 
 export default function VoteNotification({ userAddress }: VoteNotificationProps) {
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [showPanel, setShowPanel] = useState(false);
-  const [settings, setSettings] = useState({
-    voteAlerts: true,
-    thresholdAlerts: true,
-    resultAlerts: true,
-    delegationAlerts: true,
-    emailNotifications: false
-  });
+  const [notifications, setNotifications] = useState<Notification[]>(() => {
+    if (typeof window === 'undefined') {
+      return [];
+    }
 
-  useEffect(() => {
     const stored = localStorage.getItem(`notifications-${userAddress}`);
-    if (stored) {
-      setNotifications(JSON.parse(stored));
+    return stored ? JSON.parse(stored) : [];
+  });
+  const [showPanel, setShowPanel] = useState(false);
+  const [settings, setSettings] = useState(() => {
+    const defaultSettings = {
+      voteAlerts: true,
+      thresholdAlerts: true,
+      resultAlerts: true,
+      delegationAlerts: true,
+      emailNotifications: false
+    };
+
+    if (typeof window === 'undefined') {
+      return defaultSettings;
     }
 
     const storedSettings = localStorage.getItem(`notification-settings-${userAddress}`);
-    if (storedSettings) {
-      setSettings(JSON.parse(storedSettings));
-    }
-  }, [userAddress]);
+    return storedSettings ? JSON.parse(storedSettings) : defaultSettings;
+  });
 
   const unreadCount = notifications.filter(n => !n.read).length;
 
diff --git a/frontend/components/WithdrawVoteModal.tsx b/frontend/components/WithdrawVoteModal.tsx
index f3822996..3e87c0ef 100644
--- a/frontend/components/WithdrawVoteModal.tsx
+++ b/frontend/components/WithdrawVoteModal.tsx
@@ -69,7 +69,7 @@ export default function WithdrawVoteModal({
       
       toast.success(`Vote withdrawn! Refunded ${refund.amount.toFixed(2)} STX`);
       onClose();
-    } catch (error) {
+    } catch {
       toast.error('Failed to withdraw vote');
     } finally {
       setIsWithdrawing(false);
@@ -142,7 +142,7 @@ export default function WithdrawVoteModal({
             </div>
             <div className="pt-2 border-t border-blue-200 dark:border-blue-800">
               <div className="flex justify-between items-baseline">
-                <span className="text-sm text-blue-700 dark:text-blue-300">You'll receive:</span>
+                <span className="text-sm text-blue-700 dark:text-blue-300">You&apos;ll receive:</span>
                 <span className="text-2xl font-bold text-blue-900 dark:text-blue-100">
                   {refund.amount.toFixed(2)} STX
                 </span>

From b1847d994c982212638b21f2a28ba9699c1b1391 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 08:56:17 +0100
Subject: [PATCH 13/23] chore(frontend): finish analytics cleanup

---
 .../analytics/CategoryPerformance.tsx         |  14 +--
 .../analytics/CommunityInsights.tsx           |   2 +-
 .../components/analytics/FundingTimeline.tsx  | 113 +++++++++---------
 .../components/analytics/LiveAnalytics.tsx    |  34 +++---
 frontend/components/analytics/PersonalTab.tsx |   1 -
 .../analytics/ProbabilityCalculator.tsx       |  11 +-
 .../components/analytics/ProposalsTab.tsx     |  21 +---
 frontend/src/app/api-docs/page.tsx            |   9 +-
 .../src/components/OnboardingChecklist.tsx    |   2 +-
 frontend/src/components/OnboardingFAQ.tsx     |   9 +-
 frontend/src/spa-pages/Dashboard.tsx          |   4 +-
 11 files changed, 96 insertions(+), 124 deletions(-)

diff --git a/frontend/components/analytics/CategoryPerformance.tsx b/frontend/components/analytics/CategoryPerformance.tsx
index 7e19caeb..a8616f30 100644
--- a/frontend/components/analytics/CategoryPerformance.tsx
+++ b/frontend/components/analytics/CategoryPerformance.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { ProposalMetrics } from '../../utils/analytics/dataCollector';
 import { formatMetric, calculateGrowthRate } from '../../utils/analytics/helpers';
 import { ArrowUp, ArrowDown, Minus } from 'lucide-react';
@@ -38,6 +38,7 @@ const CATEGORY_COLORS: Record<string, string> = {
 };
 
 export default function CategoryPerformance({ proposals, onCategoryClick }: CategoryPerformanceProps) {
+  const [baseTimestamp] = useState(() => Date.now());
   const [sortKey, setSortKey] = useState<SortKey>('totalDistributed');
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
 
@@ -50,8 +51,7 @@ export default function CategoryPerformance({ proposals, onCategoryClick }: Cate
       return acc;
     }, {} as Record<string, ProposalMetrics[]>);
 
-    const now = Date.now();
-    const thirtyDaysAgo = now - (30 * 24 * 60 * 60 * 1000);
+    const thirtyDaysAgo = baseTimestamp - (30 * 24 * 60 * 60 * 1000);
 
     return Object.entries(grouped).map(([category, categoryProposals]) => {
       const successful = categoryProposals.filter(p => p.executed);
@@ -95,7 +95,7 @@ export default function CategoryPerformance({ proposals, onCategoryClick }: Cate
         trendValue
       };
     });
-  }, [proposals]);
+  }, [proposals, baseTimestamp]);
 
   const sortedStats = useMemo(() => {
     return [...categoryStats].sort((a, b) => {
@@ -149,12 +149,6 @@ export default function CategoryPerformance({ proposals, onCategoryClick }: Cate
     return 'text-red-600 dark:text-red-400';
   };
 
-  const getSuccessBgColor = (rate: number): string => {
-    if (rate > 70) return CATEGORY_COLORS.development;
-    if (rate >= 40) return CATEGORY_COLORS.community;
-    return '#ef4444';
-  };
-
   const barChartData = sortedStats.map(stat => ({
     category: stat.category,
     amount: stat.totalDistributed / 1_000_000,
diff --git a/frontend/components/analytics/CommunityInsights.tsx b/frontend/components/analytics/CommunityInsights.tsx
index 9c637775..042f2e91 100644
--- a/frontend/components/analytics/CommunityInsights.tsx
+++ b/frontend/components/analytics/CommunityInsights.tsx
@@ -73,7 +73,7 @@ export default function CommunityInsights() {
                             <h4 className="font-bold text-yellow-800 dark:text-yellow-400">Attention Required</h4>
                         </div>
                         <p className="text-sm text-yellow-700 dark:text-yellow-200/70 mb-4 font-medium">
-                            Voter engagement in the "Education" category has dropped 15% WoW. Platform reach is decreasing in this segment.
+                            Voter engagement in the &quot;Education&quot; category has dropped 15% WoW. Platform reach is decreasing in this segment.
                         </p>
                         <button className="text-xs font-black text-yellow-800 dark:text-yellow-400 hover:underline">
                             VIEW MITIGATION STRATEGY →
diff --git a/frontend/components/analytics/FundingTimeline.tsx b/frontend/components/analytics/FundingTimeline.tsx
index c6911c59..025c02be 100644
--- a/frontend/components/analytics/FundingTimeline.tsx
+++ b/frontend/components/analytics/FundingTimeline.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useRef } from 'react';
 import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ZAxis } from 'recharts';
-import { format, startOfDay } from 'date-fns';
+import { format } from 'date-fns';
 import { ProposalMetrics } from '../../utils/analytics/dataCollector';
 import { formatMetric } from '../../utils/analytics/helpers';
 import { Play, Pause, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
@@ -41,10 +41,56 @@ const CATEGORY_COLORS: Record<string, string> = {
   other: '#6b7280'
 };
 
+function CustomTooltip({ active, payload }: TimelineTooltipProps) {
+  if (!active || !payload || payload.length === 0) return null;
+
+  const data = payload[0].payload;
+  const proposal = data.proposal;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4">
+      <div className="space-y-2">
+        <p className="font-semibold text-gray-900 dark:text-white">
+          {proposal.title}
+        </p>
+        <div className="flex items-center gap-2">
+          <div
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: CATEGORY_COLORS[proposal.category] }}
+          />
+          <span className="text-sm text-gray-600 dark:text-gray-400 capitalize">
+            {proposal.category}
+          </span>
+        </div>
+        <div className="text-sm space-y-1">
+          <div className="flex justify-between gap-4">
+            <span className="text-gray-600 dark:text-gray-400">Amount:</span>
+            <span className="font-medium text-gray-900 dark:text-white">
+              {formatMetric(proposal.amount, 'currency')}
+            </span>
+          </div>
+          <div className="flex justify-between gap-4">
+            <span className="text-gray-600 dark:text-gray-400">Funded:</span>
+            <span className="font-medium text-gray-900 dark:text-white">
+              {format(data.date, 'MMM dd, yyyy')}
+            </span>
+          </div>
+          <div className="flex justify-between gap-4">
+            <span className="text-gray-600 dark:text-gray-400">Time to Fund:</span>
+            <span className="font-medium text-gray-900 dark:text-white">
+              {proposal.timeToFunding?.toFixed(1) || 'N/A'}h
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function FundingTimeline({ proposals }: FundingTimelineProps) {
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-  const [amountRange, setAmountRange] = useState<[number, number]>([0, Infinity]);
-  const [zoomLevel, setZoomLevel] = useState(1);
+  const [amountRange] = useState<[number, number]>([0, Infinity]);
+  const [, setZoomLevel] = useState(1);
   const [isPlaying, setIsPlaying] = useState(false);
   const [playbackIndex, setPlaybackIndex] = useState(0);
   const playbackIntervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -117,15 +163,14 @@ export default function FundingTimeline({ proposals }: FundingTimelineProps) {
 
   const cumulativeData = useMemo(() => {
     const sorted = [...timelineData].sort((a, b) => a.x - b.x);
-    let cumulative = 0;
-    
-    return sorted.map(point => {
-      cumulative += point.y;
-      return {
+    return sorted.reduce<{ date: string; cumulative: number }[]>((acc, point) => {
+      const nextCumulative = (acc.at(-1)?.cumulative ?? 0) + point.y / 1_000_000;
+      acc.push({
         date: format(point.date, 'MMM dd'),
-        cumulative: cumulative / 1_000_000
-      };
-    });
+        cumulative: nextCumulative
+      });
+      return acc;
+    }, []);
   }, [timelineData]);
 
   const toggleCategory = (category: string) => {
@@ -174,52 +219,6 @@ export default function FundingTimeline({ proposals }: FundingTimelineProps) {
     }
   };
 
-  const CustomTooltip = ({ active, payload }: TimelineTooltipProps) => {
-    if (!active || !payload || payload.length === 0) return null;
-
-    const data = payload[0].payload;
-    const proposal = data.proposal;
-
-    return (
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4">
-        <div className="space-y-2">
-          <p className="font-semibold text-gray-900 dark:text-white">
-            {proposal.title}
-          </p>
-          <div className="flex items-center gap-2">
-            <div
-              className="w-3 h-3 rounded-full"
-              style={{ backgroundColor: CATEGORY_COLORS[proposal.category] }}
-            />
-            <span className="text-sm text-gray-600 dark:text-gray-400 capitalize">
-              {proposal.category}
-            </span>
-          </div>
-          <div className="text-sm space-y-1">
-            <div className="flex justify-between gap-4">
-              <span className="text-gray-600 dark:text-gray-400">Amount:</span>
-              <span className="font-medium text-gray-900 dark:text-white">
-                {formatMetric(proposal.amount, 'currency')}
-              </span>
-            </div>
-            <div className="flex justify-between gap-4">
-              <span className="text-gray-600 dark:text-gray-400">Funded:</span>
-              <span className="font-medium text-gray-900 dark:text-white">
-                {format(data.date, 'MMM dd, yyyy')}
-              </span>
-            </div>
-            <div className="flex justify-between gap-4">
-              <span className="text-gray-600 dark:text-gray-400">Time to Fund:</span>
-              <span className="font-medium text-gray-900 dark:text-white">
-                {proposal.timeToFunding?.toFixed(1) || 'N/A'}h
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
   return (
     <div className="space-y-6">
       <div className="flex flex-wrap items-center justify-between gap-4">
diff --git a/frontend/components/analytics/LiveAnalytics.tsx b/frontend/components/analytics/LiveAnalytics.tsx
index 3715e028..f08dd1db 100644
--- a/frontend/components/analytics/LiveAnalytics.tsx
+++ b/frontend/components/analytics/LiveAnalytics.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { ProposalMetrics } from '../../utils/analytics/dataCollector';
 import { formatMetric } from '../../utils/analytics/helpers';
 import { Pause, Play, Activity, TrendingUp, Users, DollarSign } from 'lucide-react';
@@ -21,18 +21,18 @@ interface VoteActivity {
 }
 
 export default function LiveAnalytics({ proposals, onRefresh }: LiveAnalyticsProps) {
+  const [renderNow, setRenderNow] = useState(() => Date.now());
   const [isPaused, setIsPaused] = useState(false);
   const [updateFrequency, setUpdateFrequency] = useState(10);
   const [isExpanded, setIsExpanded] = useState(false);
-  const [lastUpdate, setLastUpdate] = useState(Date.now());
+  const [lastUpdate, setLastUpdate] = useState(() => Date.now());
   const [networkStatus, setNetworkStatus] = useState<'online' | 'offline'>('online');
   const [voteFeed, setVoteFeed] = useState<VoteActivity[]>([]);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const activeProposals = proposals.filter(p => {
-    const now = Date.now();
     const deadline = p.deadline * 10 * 60 * 1000;
-    return !p.executed && deadline > now;
+    return !p.executed && deadline > renderNow;
   });
 
   const votesLastHour = 127;
@@ -43,25 +43,27 @@ export default function LiveAnalytics({ proposals, onRefresh }: LiveAnalyticsPro
   
   const totalStxBeingVoted = activeProposals.reduce((sum, p) => sum + p.amount, 0);
 
-  const last24HoursActivity = Array.from({ length: 24 }, (_, i) => ({
+  const last24HoursActivity = useMemo(() => Array.from({ length: 24 }, (_, i) => ({
     hour: i,
-    votes: Math.floor(Math.random() * 50) + 10
-  }));
+    votes: 10 + ((i * 17) % 50)
+  })), []);
 
-  const last7DaysProposals = Array.from({ length: 7 }, (_, i) => ({
+  const last7DaysProposals = useMemo(() => Array.from({ length: 7 }, (_, i) => ({
     day: i,
-    count: Math.floor(Math.random() * 10) + 2
-  }));
+    count: 2 + ((i * 5) % 10)
+  })), []);
 
-  const last30DaysFunding = Array.from({ length: 30 }, (_, i) => ({
+  const last30DaysFunding = useMemo(() => Array.from({ length: 30 }, (_, i) => ({
     day: i,
-    amount: Math.floor(Math.random() * 100000) + 50000
-  }));
+    amount: 50000 + ((i * 13750) % 100000)
+  })), []);
 
   useEffect(() => {
     if (!isPaused) {
       intervalRef.current = setInterval(() => {
-        setLastUpdate(Date.now());
+        const now = Date.now();
+        setLastUpdate(now);
+        setRenderNow(now);
         
         const newVote: VoteActivity = {
           id: Math.random().toString(36).substring(7),
@@ -70,7 +72,7 @@ export default function LiveAnalytics({ proposals, onRefresh }: LiveAnalyticsPro
           proposalTitle: 'Sample Proposal',
           support: Math.random() > 0.3,
           weight: Math.floor(Math.random() * 5) + 1,
-          timestamp: Date.now()
+          timestamp: now
         };
 
         setVoteFeed(prev => [newVote, ...prev].slice(0, 10));
@@ -101,7 +103,7 @@ export default function LiveAnalytics({ proposals, onRefresh }: LiveAnalyticsPro
     };
   }, []);
 
-  const timeSinceUpdate = Math.floor((Date.now() - lastUpdate) / 1000);
+  const timeSinceUpdate = Math.floor((renderNow - lastUpdate) / 1000);
 
   if (!isExpanded) {
     return (
diff --git a/frontend/components/analytics/PersonalTab.tsx b/frontend/components/analytics/PersonalTab.tsx
index d387b7b5..b613b96a 100644
--- a/frontend/components/analytics/PersonalTab.tsx
+++ b/frontend/components/analytics/PersonalTab.tsx
@@ -6,7 +6,6 @@ import {
     ProbabilityCalculator
 } from './index';
 import {
-    User,
     Lock,
     ChevronRight,
     Zap,
diff --git a/frontend/components/analytics/ProbabilityCalculator.tsx b/frontend/components/analytics/ProbabilityCalculator.tsx
index d4ff8acf..2cf0d81e 100644
--- a/frontend/components/analytics/ProbabilityCalculator.tsx
+++ b/frontend/components/analytics/ProbabilityCalculator.tsx
@@ -23,7 +23,7 @@ export default function ProbabilityCalculator() {
 
     const calculation = useMemo(() => {
         // Base probability
-        let prob = 60;
+        const prob = 60;
 
         // 1. Amount factor (Lower is better)
         const amountEffect = factors.amount > 100 ? -(factors.amount - 100) / 2 : (100 - factors.amount) / 4;
@@ -45,15 +45,6 @@ export default function ProbabilityCalculator() {
 
         const totalProb = Math.min(Math.max(prob + amountEffect + categoryEffect + descEffect + repEffect + timingEffect + compEffect, 5), 98);
 
-        // Monte Carlo simulation
-        const simulations = 1000;
-        const results = [];
-        for (let i = 0; i < simulations; i++) {
-            // Vary each factor slightly
-            const variance = (Math.random() - 0.5) * 10;
-            results.push(totalProb + variance);
-        }
-
         return {
             total: totalProb.toFixed(1),
             confidenceInterval: [
diff --git a/frontend/components/analytics/ProposalsTab.tsx b/frontend/components/analytics/ProposalsTab.tsx
index fadbb92b..ccd15fc2 100644
--- a/frontend/components/analytics/ProposalsTab.tsx
+++ b/frontend/components/analytics/ProposalsTab.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import {
-    BarChart,
     Bar,
     XAxis,
     YAxis,
@@ -13,29 +12,15 @@ import {
     ScatterChart,
     Scatter,
     ZAxis,
-    Cell,
-    LineChart,
-    Line,
-    AreaChart,
-    Area,
-    PieChart,
-    Pie
+    BarChart
 } from 'recharts';
 import {
-    FileText,
     Filter,
     Search,
-    Download,
-    TrendingUp,
-    Clock,
-    DollarSign,
-    Zap,
     MoreVertical,
-    ChevronDown
+    TrendingUp
 } from 'lucide-react';
 
-const COLORS = ['#EA580C', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'];
-
 export default function ProposalsTab() {
     const [searchTerm, setSearchTerm] = useState('');
 
@@ -280,7 +265,7 @@ export default function ProposalsTab() {
                             <div key={day} className="text-[10px] font-black text-slate-600 text-center mb-2">{day}</div>
                         ))}
                         {Array.from({ length: 28 }).map((_, i) => {
-                            const intensity = Math.random();
+                            const intensity = ((i * 37) % 100) / 100;
                             return (
                                 <div
                                     key={i}
diff --git a/frontend/src/app/api-docs/page.tsx b/frontend/src/app/api-docs/page.tsx
index 4e36d7c2..bb4e910a 100644
--- a/frontend/src/app/api-docs/page.tsx
+++ b/frontend/src/app/api-docs/page.tsx
@@ -2,7 +2,8 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Terminal, Database, Shield, Zap, Copy, ArrowRight } from 'lucide-react';
+import { Terminal, Zap, Copy } from 'lucide-react';
+const EXAMPLE_TIMESTAMP = 1700000000000;
 
 const endpoints = [
     { method: 'GET', path: '/api/v1/proposals', desc: 'List all active micro-grants' },
@@ -26,7 +27,7 @@ export default function ApiDocs() {
                     <h3 className="text-xl font-black uppercase mb-1">Quick Start</h3>
                     <p className="text-[10px] font-bold uppercase opacity-80 mb-6">Authorize your terminal session</p>
                     <code className="block bg-black/20 p-4 rounded-xl font-mono text-xs mb-6">
-                        curl -H "X-API-KEY: demo" https://api.sprintfund.xyz/v1/stats
+                        curl -H &quot;X-API-KEY: demo&quot; https://api.sprintfund.xyz/v1/stats
                     </code>
                     <button className="w-full py-4 bg-white text-black text-[10px] font-black uppercase tracking-widest rounded-xl hover:bg-black hover:text-white transition-all">
                         Generate Production Key
@@ -55,7 +56,7 @@ export default function ApiDocs() {
                         </div>
 
                         <p className="text-sm font-medium text-slate-400 mb-8 italic">
-                            "{e.desc}"
+                            &quot;{e.desc}&quot;
                         </p>
 
                         <div className="p-6 bg-black/40 rounded-3xl border border-white/5 opacity-40 group-hover:opacity-100 transition-opacity">
@@ -67,7 +68,7 @@ export default function ApiDocs() {
                                 {`{
   "status": "success",
   "data": [...],
-  "timestamp": ${Date.now()}
+  "timestamp": ${EXAMPLE_TIMESTAMP}
 }`}
                             </pre>
                         </div>
diff --git a/frontend/src/components/OnboardingChecklist.tsx b/frontend/src/components/OnboardingChecklist.tsx
index e4ada2d8..43e3ab1e 100644
--- a/frontend/src/components/OnboardingChecklist.tsx
+++ b/frontend/src/components/OnboardingChecklist.tsx
@@ -120,7 +120,7 @@ export function OnboardingChecklist({
           transition={{ type: 'spring', damping: 20 }}
         >
           <p className="text-sm font-semibold text-green">
-            Congratulations! You've completed the onboarding.
+            Congratulations! You&apos;ve completed the onboarding.
           </p>
           <button
             onClick={onDismiss}
diff --git a/frontend/src/components/OnboardingFAQ.tsx b/frontend/src/components/OnboardingFAQ.tsx
index 789947c5..c04ddfbe 100644
--- a/frontend/src/components/OnboardingFAQ.tsx
+++ b/frontend/src/components/OnboardingFAQ.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import Link from 'next/link';
 import { ChevronDown } from 'lucide-react';
 
 interface FAQItem {
@@ -96,7 +97,7 @@ export function OnboardingFAQ() {
             <h2 className="text-xl font-bold text-green mb-4">{category}</h2>
 
             <div className="space-y-2">
-              {categoryItems.map((item, idx) => {
+              {categoryItems.map((item) => {
                 const itemId = FAQ_ITEMS.indexOf(item);
                 const isExpanded = expandedId === itemId;
 
@@ -139,14 +140,14 @@ export function OnboardingFAQ() {
 
       <div className="mt-12 rounded-lg border border-muted/20 bg-surface/30 p-8 text-center">
         <p className="text-muted mb-4">
-          Didn't find what you're looking for?
+          Didn&apos;t find what you&apos;re looking for?
         </p>
-        <a
+        <Link
           href="/getting-started"
           className="display inline-block rounded-lg bg-green px-6 py-3 font-semibold text-dark hover:bg-green-dim transition-colors"
         >
           View Full Getting Started Guide
-        </a>
+        </Link>
       </div>
     </div>
   );
diff --git a/frontend/src/spa-pages/Dashboard.tsx b/frontend/src/spa-pages/Dashboard.tsx
index d5c653ee..067f4f03 100644
--- a/frontend/src/spa-pages/Dashboard.tsx
+++ b/frontend/src/spa-pages/Dashboard.tsx
@@ -37,7 +37,7 @@ export function DashboardPage(): React.JSX.Element {
   const dialog = useConfirmDialog();
   const headingRef = useFocusOnMount<HTMLHeadingElement>();
   useDocumentTitle('Dashboard');
-  const { markDashboardPageViewed, markStakingStarted } = useOnboardingAutoComplete();
+  const { markDashboardPageViewed } = useOnboardingAutoComplete();
   const { price: stxPrice } = useStxPriceData();
 
   useEffect(() => {
@@ -324,7 +324,7 @@ export function DashboardPage(): React.JSX.Element {
         <h2 className="mb-4 text-lg font-semibold text-text">Your Proposals</h2>
         {proposals.length === 0 ? (
           <div className="rounded-xl border border-border bg-card p-8 text-center">
-            <p className="text-sm text-muted">You haven't created any proposals yet.</p>
+            <p className="text-sm text-muted">You haven&apos;t created any proposals yet.</p>
           </div>
         ) : (
           <div className="space-y-3">

From c8c01f4727660c5e7523daf7b00d196b4721ae04 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 11:54:24 +0100
Subject: [PATCH 14/23] chore(frontend): clean dashboard components

---
 frontend/components/common/DarkModeToggle.tsx | 13 +----
 .../common/DataRefreshIndicator.tsx           | 12 +++--
 .../components/dashboard/ActivityFeed.tsx     | 48 +++++++----------
 .../components/dashboard/UserInsights.tsx     | 21 ++++----
 frontend/components/dashboard/UserNetwork.tsx | 44 +++++++---------
 frontend/components/dashboard/UserProfile.tsx | 52 ++++++++-----------
 6 files changed, 77 insertions(+), 113 deletions(-)

diff --git a/frontend/components/common/DarkModeToggle.tsx b/frontend/components/common/DarkModeToggle.tsx
index f7a2cafe..97c8a8f0 100644
--- a/frontend/components/common/DarkModeToggle.tsx
+++ b/frontend/components/common/DarkModeToggle.tsx
@@ -1,19 +1,10 @@
 'use client';
 
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
 
 export default function DarkModeToggle() {
-    const [mounted, setMounted] = useState(false);
     const { theme, setTheme } = useTheme();
-
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) {
-        return null;
-    }
+    const isDark = theme === 'dark';
 
     return (
         <button
@@ -21,7 +12,7 @@ export default function DarkModeToggle() {
             className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-all duration-200 border border-white/20"
             aria-label="Toggle dark mode"
         >
-            {theme === 'dark' ? (
+            {isDark ? (
                 <svg className="w-5 h-5 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                 </svg>
diff --git a/frontend/components/common/DataRefreshIndicator.tsx b/frontend/components/common/DataRefreshIndicator.tsx
index 59118242..8ebd0595 100644
--- a/frontend/components/common/DataRefreshIndicator.tsx
+++ b/frontend/components/common/DataRefreshIndicator.tsx
@@ -2,17 +2,14 @@
 
 import { useEffect, useState } from 'react';
 import { useGovernanceAnalytics } from '@/hooks/useGovernanceAnalytics';
-import { Wifi } from 'lucide-react';
 
 export function DataRefreshIndicator() {
   const { loading } = useGovernanceAnalytics();
-  const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
+  const [lastUpdated] = useState<Date>(() => new Date());
   const [timeSinceUpdate, setTimeSinceUpdate] = useState('now');
 
   useEffect(() => {
-    setLastUpdated(new Date());
-
-    const interval = setInterval(() => {
+    const updateTimeSince = () => {
       const now = new Date();
       const diffMs = now.getTime() - lastUpdated.getTime();
       const diffMins = Math.floor(diffMs / 60000);
@@ -26,6 +23,11 @@ export function DataRefreshIndicator() {
         const diffHours = Math.floor(diffMins / 60);
         setTimeSinceUpdate(`${diffHours}h ago`);
       }
+    };
+
+    updateTimeSince();
+    const interval = setInterval(() => {
+      updateTimeSince();
     }, 10000);
 
     return () => clearInterval(interval);
diff --git a/frontend/components/dashboard/ActivityFeed.tsx b/frontend/components/dashboard/ActivityFeed.tsx
index 866ec16f..676db882 100644
--- a/frontend/components/dashboard/ActivityFeed.tsx
+++ b/frontend/components/dashboard/ActivityFeed.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 
 interface Activity {
   id: string;
@@ -21,24 +21,16 @@ interface ActivityFeedProps {
 }
 
 export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
-  const [activities, setActivities] = useState<Activity[]>([]);
+  const [currentTime] = useState(() => Date.now());
   const [filter, setFilter] = useState<string>('all');
   const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-
-  useEffect(() => {
-    loadActivities();
-  }, [userAddress, filter]);
-
-  const loadActivities = () => {
-    // Simulate activity data
-    const mockActivities: Activity[] = [
+  const mockActivities = useMemo<Activity[]>(() => [
       {
         id: '1',
         type: 'proposal',
         title: 'Created New Proposal',
         description: 'DeFi Lending Protocol Development',
-        timestamp: Date.now() - 2 * 60 * 60 * 1000,
+        timestamp: 1700000000000 - 2 * 60 * 60 * 1000,
         metadata: { proposalId: 42, amount: 50000 }
       },
       {
@@ -46,7 +38,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
         type: 'vote',
         title: 'Voted on Proposal',
         description: 'NFT Marketplace Infrastructure (#38)',
-        timestamp: Date.now() - 5 * 60 * 60 * 1000,
+        timestamp: currentTime - 5 * 60 * 60 * 1000,
         metadata: { proposalId: 38, voteType: 'yes' }
       },
       {
@@ -54,7 +46,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
         type: 'comment',
         title: 'Commented on Proposal',
         description: 'Added feedback to Community Event Planning (#35)',
-        timestamp: Date.now() - 24 * 60 * 60 * 1000,
+        timestamp: currentTime - 24 * 60 * 60 * 1000,
         metadata: { proposalId: 35 }
       },
       {
@@ -62,7 +54,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
         type: 'achievement',
         title: 'Achievement Unlocked',
         description: 'Earned "Active Voter" badge',
-        timestamp: Date.now() - 2 * 24 * 60 * 60 * 1000,
+        timestamp: currentTime - 2 * 24 * 60 * 60 * 1000,
         metadata: { achievementIcon: '⭐' }
       },
       {
@@ -70,7 +62,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
         type: 'execution',
         title: 'Proposal Executed',
         description: 'Your proposal "Smart Contract Upgrade" was successfully executed',
-        timestamp: Date.now() - 3 * 24 * 60 * 60 * 1000,
+        timestamp: currentTime - 3 * 24 * 60 * 60 * 1000,
         metadata: { proposalId: 28, amount: 75000 }
       },
       {
@@ -78,7 +70,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
         type: 'collaboration',
         title: 'Collaboration Invite',
         description: 'Added as co-author to "DAO Treasury Diversification"',
-        timestamp: Date.now() - 4 * 24 * 60 * 60 * 1000,
+        timestamp: currentTime - 4 * 24 * 60 * 60 * 1000,
         metadata: { proposalId: 40 }
       },
       {
@@ -86,7 +78,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
         type: 'vote',
         title: 'Voted on Proposal',
         description: 'Marketing Campaign Q1 2026 (#36)',
-        timestamp: Date.now() - 5 * 24 * 60 * 60 * 1000,
+        timestamp: currentTime - 5 * 24 * 60 * 60 * 1000,
         metadata: { proposalId: 36, voteType: 'no' }
       },
       {
@@ -94,18 +86,16 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
         type: 'comment',
         title: 'Commented on Proposal',
         description: 'Shared thoughts on Developer Tools Enhancement (#33)',
-        timestamp: Date.now() - 6 * 24 * 60 * 60 * 1000,
+        timestamp: 1700000000000 - 6 * 24 * 60 * 60 * 1000,
         metadata: { proposalId: 33 }
       }
-    ];
-
-    const filtered = filter === 'all' 
-      ? mockActivities 
-      : mockActivities.filter(a => a.type === filter);
+  ], [currentTime]);
 
-    setActivities(filtered);
-    setHasMore(filtered.length >= 8);
-  };
+  const activities = useMemo(
+    () => (filter === 'all' ? mockActivities : mockActivities.filter((a) => a.type === filter)),
+    [mockActivities, filter]
+  );
+  const hasMore = activities.length >= 8;
 
   const loadMore = () => {
     setPage(page + 1);
@@ -137,7 +127,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
   };
 
   const getTimeAgo = (timestamp: number) => {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    const seconds = Math.floor((currentTime - timestamp) / 1000);
     if (seconds < 60) return 'just now';
     const minutes = Math.floor(seconds / 60);
     if (minutes < 60) return `${minutes}m ago`;
@@ -163,7 +153,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = `activity-log-${Date.now()}.csv`;
+    a.download = `activity-log-${userAddress}.csv`;
     a.click();
   };
 
diff --git a/frontend/components/dashboard/UserInsights.tsx b/frontend/components/dashboard/UserInsights.tsx
index 77cffbfb..e4fa5fa1 100644
--- a/frontend/components/dashboard/UserInsights.tsx
+++ b/frontend/components/dashboard/UserInsights.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 
 interface AIRecommendationMetadata {
   relatedProposalId?: number;
@@ -40,18 +40,13 @@ interface OptimalStrategy {
 }
 
 interface UserInsightsProps {
-  userAddress: string;
 }
 
-export default function UserInsights({ userAddress }: UserInsightsProps) {
-  const [recommendations, setRecommendations] = useState<AIRecommendation[]>([]);
-  const [performanceReport, setPerformanceReport] = useState<PerformanceReport | null>(null);
-  const [strategies, setStrategies] = useState<OptimalStrategy[]>([]);
+export default function UserInsights(_props: UserInsightsProps) {
   const [activeTab, setActiveTab] = useState<'recommendations' | 'performance' | 'strategies'>('recommendations');
   const [filterImpact, setFilterImpact] = useState<'all' | 'high' | 'medium'>('all');
 
-  useEffect(() => {
-    // Load AI-powered insights
+  const { recommendations, performanceReport, strategies } = useMemo(() => {
     const mockRecommendations: AIRecommendation[] = [
       {
         id: 1,
@@ -162,10 +157,12 @@ export default function UserInsights({ userAddress }: UserInsightsProps) {
       }
     ];
 
-    setRecommendations(mockRecommendations);
-    setPerformanceReport(mockPerformance);
-    setStrategies(mockStrategies);
-  }, [userAddress]);
+    return {
+      recommendations: mockRecommendations,
+      performanceReport: mockPerformance,
+      strategies: mockStrategies
+    };
+  }, []);
 
   const filteredRecommendations = recommendations.filter(rec => {
     if (filterImpact === 'all') return true;
diff --git a/frontend/components/dashboard/UserNetwork.tsx b/frontend/components/dashboard/UserNetwork.tsx
index 7951f60a..b1e5ed05 100644
--- a/frontend/components/dashboard/UserNetwork.tsx
+++ b/frontend/components/dashboard/UserNetwork.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 
 interface Connection {
   address: string;
@@ -32,18 +32,14 @@ interface UserNetworkProps {
 }
 
 export default function UserNetwork({ currentUser }: UserNetworkProps) {
-  const [connections, setConnections] = useState<Connection[]>([]);
-  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [now] = useState(() => Date.now());
   const [selectedConversation, setSelectedConversation] = useState<Connection | null>(null);
-  const [messages, setMessages] = useState<Message[]>([]);
   const [newMessage, setNewMessage] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const [activeTab, setActiveTab] = useState<'connections' | 'messages'>('connections');
   const [filterRelationship, setFilterRelationship] = useState<'all' | 'mutual' | 'following'>('all');
 
-  useEffect(() => {
-    // Load mock data
-    const mockConnections: Connection[] = [
+  const connections = useMemo<Connection[]>(() => [
       {
         address: 'SP1ABC...DEF',
         username: 'alice_dao',
@@ -80,15 +76,17 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
         sharedInterests: ['Treasury', 'Strategy'],
         collaborations: 0
       }
-    ];
+    ], []);
 
-    const mockMessages: Message[] = [
+  const [messages, setMessages] = useState<Message[]>(() => {
+    const baseTime = now;
+    return [
       {
         id: 1,
         from: 'SP1ABC...DEF',
         to: currentUser,
         content: 'Hey! Would love to collaborate on the DeFi proposal',
-        timestamp: Date.now() - 2 * 60 * 60 * 1000,
+        timestamp: baseTime - 2 * 60 * 60 * 1000,
         read: false
       },
       {
@@ -96,7 +94,7 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
         from: currentUser,
         to: 'SP1ABC...DEF',
         content: 'Absolutely! Let\'s discuss the details',
-        timestamp: Date.now() - 1 * 60 * 60 * 1000,
+        timestamp: baseTime - 1 * 60 * 60 * 1000,
         read: true
       },
       {
@@ -104,28 +102,24 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
         from: 'SP2XYZ...GHI',
         to: currentUser,
         content: 'Great work on your last proposal!',
-        timestamp: Date.now() - 12 * 60 * 60 * 1000,
+        timestamp: baseTime - 12 * 60 * 60 * 1000,
         read: false
       }
     ];
+  });
 
-    const mockConversations: Conversation[] = [
+  const conversations = useMemo<Conversation[]>(() => [
       {
-        user: mockConnections[0],
-        lastMessage: mockMessages[1],
+        user: connections[0],
+        lastMessage: messages[1],
         unreadCount: 1
       },
       {
-        user: mockConnections[1],
-        lastMessage: mockMessages[2],
+        user: connections[1],
+        lastMessage: messages[2],
         unreadCount: 1
       }
-    ];
-
-    setConnections(mockConnections);
-    setMessages(mockMessages);
-    setConversations(mockConversations);
-  }, [currentUser]);
+    ], [connections, messages]);
 
   const sendMessage = () => {
     if (!newMessage.trim() || !selectedConversation) return;
@@ -135,7 +129,7 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
       from: currentUser,
       to: selectedConversation.address,
       content: newMessage,
-      timestamp: Date.now(),
+      timestamp: now,
       read: false
     };
 
@@ -144,7 +138,7 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
   };
 
   const formatTimeAgo = (timestamp: number) => {
-    const diff = Date.now() - timestamp;
+    const diff = now - timestamp;
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(hours / 24);
     
diff --git a/frontend/components/dashboard/UserProfile.tsx b/frontend/components/dashboard/UserProfile.tsx
index 423dc1dd..ab862c8d 100644
--- a/frontend/components/dashboard/UserProfile.tsx
+++ b/frontend/components/dashboard/UserProfile.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import { useState } from 'react';
 
 interface UserProfileData {
   address: string;
@@ -29,45 +30,34 @@ interface UserProfileProps {
   isOwnProfile?: boolean;
 }
 
-export default function UserProfile({ userAddress, isOwnProfile = false }: UserProfileProps) {
-  const [profile, setProfile] = useState<UserProfileData>({
+const buildInitialProfile = (userAddress: string): UserProfileData => {
+  const memberSince = 1700000000000;
+  const seed = userAddress.split('').reduce((sum, char) => sum + char.charCodeAt(0), 0);
+
+  return {
     address: userAddress,
     bio: '',
-    reputation: 0,
-    totalProposals: 0,
-    votesCast: 0,
-    successRate: 0,
-    memberSince: Date.now(),
+    reputation: 200 + (seed % 1800),
+    totalProposals: seed % 25,
+    votesCast: 20 + (seed % 130),
+    successRate: 40 + (seed % 60),
+    memberSince,
     socialLinks: {},
     customization: {
       theme: 'default',
       accentColor: '#3B82F6'
     }
-  });
+  };
+};
+
+export default function UserProfile({ userAddress, isOwnProfile = false }: UserProfileProps) {
+  const [currentTime] = useState(() => Date.now());
+  const initialProfile = buildInitialProfile(userAddress);
+  const [profile, setProfile] = useState<UserProfileData>(initialProfile);
   
   const [isEditing, setIsEditing] = useState(false);
   const [editForm, setEditForm] = useState(profile);
 
-  useEffect(() => {
-    const stored = localStorage.getItem(`user-profile-${userAddress}`);
-    if (stored) {
-      const data = JSON.parse(stored);
-      setProfile(data);
-      setEditForm(data);
-    } else {
-      // Generate initial data
-      const initial = {
-        ...profile,
-        reputation: Math.floor(Math.random() * 2000),
-        totalProposals: Math.floor(Math.random() * 25),
-        votesCast: Math.floor(Math.random() * 150),
-        successRate: Math.random() * 100
-      };
-      setProfile(initial);
-      setEditForm(initial);
-    }
-  }, [userAddress]);
-
   const saveProfile = () => {
     localStorage.setItem(`user-profile-${userAddress}`, JSON.stringify(editForm));
     setProfile(editForm);
@@ -104,7 +94,7 @@ export default function UserProfile({ userAddress, isOwnProfile = false }: UserP
             style={{ backgroundColor: generateAvatar(profile.address) }}
           >
             {profile.avatar ? (
-              <img src={profile.avatar} alt="Avatar" className="w-full h-full rounded-full object-cover" />
+              <Image src={profile.avatar} alt="Avatar" width={128} height={128} className="w-full h-full rounded-full object-cover" />
             ) : profile.bnsName ? (
               profile.bnsName.slice(0, 2).toUpperCase()
             ) : (
@@ -241,7 +231,7 @@ export default function UserProfile({ userAddress, isOwnProfile = false }: UserP
 
         <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
           <div className="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-1">
-            {Math.floor((Date.now() - profile.memberSince) / (1000 * 60 * 60 * 24))}
+            {Math.floor((currentTime - profile.memberSince) / (1000 * 60 * 60 * 24))}
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-400">Days Active</div>
         </div>

From 6b4c525ba88f368342469480ed1db91d233bc353 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 11:58:23 +0100
Subject: [PATCH 15/23] chore(frontend): simplify shell components

---
 frontend/components/ui/SprintFundHero.tsx  | 16 +---------------
 frontend/src/components/CommandPalette.tsx |  9 +--------
 frontend/src/components/ConfirmDialog.tsx  | 21 ++-------------------
 3 files changed, 4 insertions(+), 42 deletions(-)

diff --git a/frontend/components/ui/SprintFundHero.tsx b/frontend/components/ui/SprintFundHero.tsx
index ac79a238..d259893d 100644
--- a/frontend/components/ui/SprintFundHero.tsx
+++ b/frontend/components/ui/SprintFundHero.tsx
@@ -1,21 +1,9 @@
 'use client';
 
-import { lazy, Suspense, useState, useEffect } from 'react';
+import { Suspense } from 'react';
 import { ArrowRight } from 'lucide-react';
 
-// Lazy load the Dithering component for performance
-const Dithering = lazy(() =>
-  import('@paper-design/shaders-react').then((mod) => ({ default: mod.Dithering }))
-);
-
 export default function SprintFundHero() {
-  const [isHovered, setIsHovered] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
   const scrollToProposalForm = () => {
     const proposalSection = document.querySelector('#create-proposal');
     if (proposalSection) {
@@ -26,8 +14,6 @@ export default function SprintFundHero() {
   return (
     <section
       className="relative min-h-[600px] md:min-h-[700px] flex items-center justify-center overflow-hidden rounded-[48px] mx-4 md:mx-8 my-8"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
     >
       {/* Dithering Shader Background */}
       <div className="absolute inset-0 z-0">
diff --git a/frontend/src/components/CommandPalette.tsx b/frontend/src/components/CommandPalette.tsx
index 77f2dc9a..448e6019 100644
--- a/frontend/src/components/CommandPalette.tsx
+++ b/frontend/src/components/CommandPalette.tsx
@@ -15,14 +15,6 @@ export function CommandPalette({ isOpen, onClose, commands }: CommandPaletteProp
 
   const filtered = useMemo(() => filterCommands(commands, query), [commands, query]);
 
-  useEffect(() => {
-    if (isOpen) {
-      setQuery('');
-      setSelectedIndex(0);
-      setTimeout(() => inputRef.current?.focus(), 0);
-    }
-  }, [isOpen]);
-
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!isOpen) return;
@@ -82,6 +74,7 @@ export function CommandPalette({ isOpen, onClose, commands }: CommandPaletteProp
           <div className="p-3 border-b border-border">
             <input
               ref={inputRef}
+              autoFocus
               type="text"
               placeholder="Search commands..."
               value={query}
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 55e4f214..31f80218 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
 import { createPortal } from 'react-dom';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import type { ConfirmDialogProps } from '../types/confirm-dialog';
 import { VARIANT_CONFIG } from '../lib/dialog-variants';
 import { DialogIcon } from './DialogIcon';
@@ -24,24 +24,7 @@ export const ConfirmDialog = memo(function ConfirmDialog({ open, action, onClose
   useScrollLock(open);
   useEscapeKey(open, onClose);
 
-  /** Drive enter animation: set visible to true on next frame after mount */
-  const [visible, setVisible] = useState(false);
-  const prefersReducedMotion =
-    typeof window !== 'undefined' &&
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  useEffect(() => {
-    if (open) {
-      if (prefersReducedMotion) {
-        setVisible(true);
-        return;
-      }
-      // Delay by one frame so the initial opacity-0/scale-95 is painted first
-      const id = requestAnimationFrame(() => setVisible(true));
-      return () => cancelAnimationFrame(id);
-    }
-    setVisible(false);
-  }, [open, prefersReducedMotion]);
+  const visible = open;
 
   if (!open || !action) return null;
 

From 6f268cbe941718e0e713f106673fc03240032b45 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 12:01:53 +0100
Subject: [PATCH 16/23] chore(frontend): clean onboarding and layout

---
 .../dashboard/DashboardCustomizer.tsx         | 54 ++++++++-----------
 frontend/src/components/OnboardingModal.tsx   |  7 +--
 2 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/frontend/components/dashboard/DashboardCustomizer.tsx b/frontend/components/dashboard/DashboardCustomizer.tsx
index 7bafe38d..1f3248fd 100644
--- a/frontend/components/dashboard/DashboardCustomizer.tsx
+++ b/frontend/components/dashboard/DashboardCustomizer.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Widget {
   id: string;
@@ -30,17 +30,28 @@ interface DashboardCustomizerProps {
   userAddress: string;
 }
 
+const buildDefaultWidgets = (): Widget[] => [
+  { id: '1', title: 'Active Proposals', type: 'proposals', enabled: true, position: 0, size: 'large' },
+  { id: '2', title: 'Voting Power', type: 'voting', enabled: true, position: 1, size: 'medium' },
+  { id: '3', title: 'Treasury Overview', type: 'treasury', enabled: true, position: 2, size: 'medium' },
+  { id: '4', title: 'Recent Activity', type: 'activity', enabled: false, position: 3, size: 'small' },
+  { id: '5', title: 'Reputation Score', type: 'reputation', enabled: true, position: 4, size: 'small' },
+  { id: '6', title: 'Statistics', type: 'stats', enabled: false, position: 5, size: 'large' },
+  { id: '7', title: 'Notifications', type: 'notifications', enabled: true, position: 6, size: 'small' },
+  { id: '8', title: 'Trending Topics', type: 'trending', enabled: false, position: 7, size: 'medium' }
+];
+
+const buildDefaultLayouts = (widgets: Widget[]): Layout[] => [
+  {
+    id: 'default',
+    name: 'Default Layout',
+    widgets,
+    colorScheme: 'ocean'
+  }
+];
+
 export default function DashboardCustomizer({ userAddress }: DashboardCustomizerProps) {
-  const [widgets, setWidgets] = useState<Widget[]>([
-    { id: '1', title: 'Active Proposals', type: 'proposals', enabled: true, position: 0, size: 'large' },
-    { id: '2', title: 'Voting Power', type: 'voting', enabled: true, position: 1, size: 'medium' },
-    { id: '3', title: 'Treasury Overview', type: 'treasury', enabled: true, position: 2, size: 'medium' },
-    { id: '4', title: 'Recent Activity', type: 'activity', enabled: false, position: 3, size: 'small' },
-    { id: '5', title: 'Reputation Score', type: 'reputation', enabled: true, position: 4, size: 'small' },
-    { id: '6', title: 'Statistics', type: 'stats', enabled: false, position: 5, size: 'large' },
-    { id: '7', title: 'Notifications', type: 'notifications', enabled: true, position: 6, size: 'small' },
-    { id: '8', title: 'Trending Topics', type: 'trending', enabled: false, position: 7, size: 'medium' }
-  ]);
+  const [widgets, setWidgets] = useState<Widget[]>(() => buildDefaultWidgets());
 
   const [colorSchemes] = useState<ColorScheme[]>([
     { id: 'ocean', name: 'Ocean Blue', primary: '#3B82F6', secondary: '#1E40AF', accent: '#60A5FA' },
@@ -51,31 +62,12 @@ export default function DashboardCustomizer({ userAddress }: DashboardCustomizer
   ]);
 
   const [selectedColorScheme, setSelectedColorScheme] = useState('ocean');
-  const [layouts, setLayouts] = useState<Layout[]>([
-    {
-      id: 'default',
-      name: 'Default Layout',
-      widgets: widgets,
-      colorScheme: 'ocean'
-    }
-  ]);
+  const [layouts, setLayouts] = useState<Layout[]>(() => buildDefaultLayouts(buildDefaultWidgets()));
   const [currentLayout, setCurrentLayout] = useState('default');
   const [showSaveDialog, setShowSaveDialog] = useState(false);
   const [newLayoutName, setNewLayoutName] = useState('');
   const [draggedWidget, setDraggedWidget] = useState<string | null>(null);
 
-  useEffect(() => {
-    // Load saved customization from localStorage
-    const saved = localStorage.getItem(`dashboard-customization-${userAddress}`);
-    if (saved) {
-      const data = JSON.parse(saved);
-      setWidgets(data.widgets || widgets);
-      setSelectedColorScheme(data.colorScheme || 'ocean');
-      setLayouts(data.layouts || layouts);
-      setCurrentLayout(data.currentLayout || 'default');
-    }
-  }, [userAddress]);
-
   const saveCustomization = () => {
     const data = {
       widgets,
diff --git a/frontend/src/components/OnboardingModal.tsx b/frontend/src/components/OnboardingModal.tsx
index 4be25a27..13f5d697 100644
--- a/frontend/src/components/OnboardingModal.tsx
+++ b/frontend/src/components/OnboardingModal.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
-import { ChevronRight, ChevronLeft, X } from 'lucide-react';
+import React from 'react';
 import { ONBOARDING_TOUR_STEPS } from '../config/onboarding-tour';
 import { OnboardingTooltip } from './OnboardingTooltip';
 
@@ -36,10 +35,6 @@ export function OnboardingModal({
     }
   };
 
-  const handleFinish = () => {
-    onComplete();
-  };
-
   return (
     <OnboardingTooltip
       title={step.title}

From f5dae18c2991763aa9e3107363cde43d5f3c8c3d Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 12:07:02 +0100
Subject: [PATCH 17/23] chore(frontend): clean activity widgets

---
 frontend/components/analytics/VotingTab.tsx   |  29 +--
 frontend/components/charts/ExpenseTracker.tsx |  23 +--
 frontend/components/charts/SocialGraph.tsx    | 182 +++++++++++-------
 3 files changed, 123 insertions(+), 111 deletions(-)

diff --git a/frontend/components/analytics/VotingTab.tsx b/frontend/components/analytics/VotingTab.tsx
index b57c7993..dff16f9b 100644
--- a/frontend/components/analytics/VotingTab.tsx
+++ b/frontend/components/analytics/VotingTab.tsx
@@ -12,24 +12,15 @@ import {
     XAxis,
     YAxis,
     CartesianGrid,
-    LineChart,
-    Line,
     AreaChart,
     Area
 } from 'recharts';
 import {
-    Vote,
-    Users,
-    TrendingUp,
-    Zap,
-    Activity,
     ChevronUp,
     ChevronDown,
     Shield,
-    Target,
-    Globe
+    Zap
 } from 'lucide-react';
-import { VotingHeatmap, VoterNetworkGraph } from './index';
 import BulkVotingQueue from '../BulkVotingQueue';
 import type { StatsCardProps } from '../../src/types';
 
@@ -42,8 +33,6 @@ interface LiveVote {
     time: string;
 }
 
-const COLORS = ['#EA580C', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'];
-
 const segmentationData = [
     { name: 'Whales', value: 5, color: '#EA580C' },
     { name: 'Regular', value: 25, color: '#3B82F6' },
@@ -69,18 +58,14 @@ const influenceRankings = [
 ];
 
 export default function VotingTab() {
-    const [liveVotes, setLiveVotes] = useState<LiveVote[]>([]);
+    const [liveVotes, setLiveVotes] = useState<LiveVote[]>(() => [
+        { id: 1, user: 'mosas.btc', proposal: 'Stacks Wallet v3', type: 'YES', weight: 450, time: 'Now' },
+        { id: 2, user: 'alice.stx', proposal: 'NFT Grant #42', type: 'YES', weight: 120, time: '2s ago' },
+        { id: 3, user: 'bob.btc', proposal: 'Governance SIP-12', type: 'NO', weight: 800, time: '5s ago' },
+        { id: 4, user: 'charlie.stx', proposal: 'Stacks Wallet v3', type: 'YES', weight: 25, time: '12s ago' },
+    ]);
 
     useEffect(() => {
-        // Mock live voting feed
-        const items: LiveVote[] = [
-            { id: 1, user: 'mosas.btc', proposal: 'Stacks Wallet v3', type: 'YES', weight: 450, time: 'Now' },
-            { id: 2, user: 'alice.stx', proposal: 'NFT Grant #42', type: 'YES', weight: 120, time: '2s ago' },
-            { id: 3, user: 'bob.btc', proposal: 'Governance SIP-12', type: 'NO', weight: 800, time: '5s ago' },
-            { id: 4, user: 'charlie.stx', proposal: 'Stacks Wallet v3', type: 'YES', weight: 25, time: '12s ago' },
-        ];
-        setLiveVotes(items);
-
         const interval = setInterval(() => {
             setLiveVotes(prev => {
                 const newVote: LiveVote = {
diff --git a/frontend/components/charts/ExpenseTracker.tsx b/frontend/components/charts/ExpenseTracker.tsx
index 858c9177..06e2edf3 100644
--- a/frontend/components/charts/ExpenseTracker.tsx
+++ b/frontend/components/charts/ExpenseTracker.tsx
@@ -20,19 +20,12 @@ interface Expense {
   proposalId?: number;
 }
 
-interface ExpenseApproval {
-  expenseId: number;
-  approver: string;
-  status: 'approved' | 'rejected';
-  reason?: string;
-  timestamp: number;
-}
-
 export default function ExpenseTracker() {
+  const [baseTime] = useState(() => Date.now());
   const [expenses, setExpenses] = useState<Expense[]>([
     {
       id: 1,
-      date: Date.now() - 2 * 24 * 60 * 60 * 1000,
+      date: baseTime - 2 * 24 * 60 * 60 * 1000,
       category: 'DeFi',
       description: 'Grant #42 - DeFi Protocol Development',
       amount: 75000,
@@ -47,7 +40,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 2,
-      date: Date.now() - 5 * 24 * 60 * 60 * 1000,
+      date: baseTime - 5 * 24 * 60 * 60 * 1000,
       category: 'Infrastructure',
       description: 'AWS Cloud Services',
       amount: 3500,
@@ -63,7 +56,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 3,
-      date: Date.now() - 7 * 24 * 60 * 60 * 1000,
+      date: baseTime - 7 * 24 * 60 * 60 * 1000,
       category: 'Marketing',
       description: 'Social Media Campaign - Q1',
       amount: 8000,
@@ -76,7 +69,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 4,
-      date: Date.now() - 10 * 24 * 60 * 60 * 1000,
+      date: baseTime - 10 * 24 * 60 * 60 * 1000,
       category: 'Operational',
       description: 'Legal & Compliance Consulting',
       amount: 12000,
@@ -91,7 +84,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 5,
-      date: Date.now() - 1 * 24 * 60 * 60 * 1000,
+      date: baseTime - 1 * 24 * 60 * 60 * 1000,
       category: 'Community',
       description: 'Community Event Sponsorship',
       amount: 5000,
@@ -105,7 +98,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 6,
-      date: Date.now() - 15 * 24 * 60 * 60 * 1000,
+      date: baseTime - 15 * 24 * 60 * 60 * 1000,
       category: 'NFT',
       description: 'Grant #38 - NFT Marketplace',
       amount: 45000,
@@ -120,7 +113,6 @@ export default function ExpenseTracker() {
     }
   ]);
 
-  const [showExpenseModal, setShowExpenseModal] = useState(false);
   const [showReceiptModal, setShowReceiptModal] = useState(false);
   const [selectedExpense, setSelectedExpense] = useState<Expense | null>(null);
   const [filterStatus, setFilterStatus] = useState<'all' | Expense['status']>('all');
@@ -162,7 +154,6 @@ export default function ExpenseTracker() {
 
   const totalExpenses = expenses.reduce((sum, exp) => sum + exp.amount, 0);
   const pendingExpenses = expenses.filter(exp => exp.status === 'pending').reduce((sum, exp) => sum + exp.amount, 0);
-  const approvedExpenses = expenses.filter(exp => exp.status === 'approved').reduce((sum, exp) => sum + exp.amount, 0);
   const paidExpenses = expenses.filter(exp => exp.status === 'paid').reduce((sum, exp) => sum + exp.amount, 0);
 
   const recurringTotal = expenses.filter(exp => exp.recurring).reduce((sum, exp) => sum + exp.amount, 0);
diff --git a/frontend/components/charts/SocialGraph.tsx b/frontend/components/charts/SocialGraph.tsx
index f2c43793..38897c8d 100644
--- a/frontend/components/charts/SocialGraph.tsx
+++ b/frontend/components/charts/SocialGraph.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface User {
   address: string;
@@ -27,17 +27,64 @@ interface SocialGraphProps {
   currentUser: string;
 }
 
-export default function SocialGraph({ currentUser }: SocialGraphProps) {
+export default function SocialGraph({ currentUser: _currentUser }: SocialGraphProps) {
+  void _currentUser;
+  const [now] = useState(() => Date.now());
   const [activeTab, setActiveTab] = useState<'following' | 'followers' | 'discover'>('following');
-  const [users, setUsers] = useState<User[]>([]);
-  const [activities, setActivities] = useState<Activity[]>([]);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterReputation, setFilterReputation] = useState<'all' | 'high' | 'medium'>('all');
-
-  useEffect(() => {
-    // Load mock data
-    const mockUsers: User[] = [
-      {
+  const [users, setUsers] = useState<User[]>(() => [
+    {
+      address: 'SP1ABC...DEF',
+      username: 'alice_dao',
+      avatar: '👩‍💼',
+      reputation: 8500,
+      followers: 342,
+      following: 89,
+      bio: 'DeFi enthusiast | Building the future of finance',
+      isFollowing: true,
+      mutualConnections: 12,
+      lastActive: now - 2 * 60 * 60 * 1000
+    },
+    {
+      address: 'SP2XYZ...GHI',
+      username: 'bob_builder',
+      avatar: '👨‍💻',
+      reputation: 6200,
+      followers: 215,
+      following: 156,
+      bio: 'Smart contract developer | Open source contributor',
+      isFollowing: true,
+      mutualConnections: 8,
+      lastActive: now - 5 * 60 * 60 * 1000
+    },
+    {
+      address: 'SP3MNO...PQR',
+      username: 'carol_artist',
+      avatar: '🎨',
+      reputation: 7800,
+      followers: 498,
+      following: 203,
+      bio: 'NFT creator | Community advocate',
+      isFollowing: false,
+      mutualConnections: 5,
+      lastActive: now - 24 * 60 * 60 * 1000
+    },
+    {
+      address: 'SP4STU...VWX',
+      username: 'dave_investor',
+      avatar: '💼',
+      reputation: 9200,
+      followers: 621,
+      following: 45,
+      bio: 'VC | Crypto investor | Supporting innovation',
+      isFollowing: false,
+      mutualConnections: 15,
+      lastActive: now - 1 * 60 * 60 * 1000
+    }
+  ]);
+  const [activities] = useState<Activity[]>(() => [
+    {
+      id: 1,
+      user: {
         address: 'SP1ABC...DEF',
         username: 'alice_dao',
         avatar: '👩‍💼',
@@ -47,9 +94,15 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
         bio: 'DeFi enthusiast | Building the future of finance',
         isFollowing: true,
         mutualConnections: 12,
-        lastActive: Date.now() - 2 * 60 * 60 * 1000
+        lastActive: now - 2 * 60 * 60 * 1000
       },
-      {
+      type: 'proposal',
+      content: 'Created proposal: DeFi Lending Protocol v2',
+      timestamp: now - 3 * 60 * 60 * 1000
+    },
+    {
+      id: 2,
+      user: {
         address: 'SP2XYZ...GHI',
         username: 'bob_builder',
         avatar: '👨‍💻',
@@ -59,68 +112,51 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
         bio: 'Smart contract developer | Open source contributor',
         isFollowing: true,
         mutualConnections: 8,
-        lastActive: Date.now() - 5 * 60 * 60 * 1000
-      },
-      {
-        address: 'SP3MNO...PQR',
-        username: 'carol_artist',
-        avatar: '🎨',
-        reputation: 7800,
-        followers: 498,
-        following: 203,
-        bio: 'NFT creator | Community advocate',
-        isFollowing: false,
-        mutualConnections: 5,
-        lastActive: Date.now() - 24 * 60 * 60 * 1000
+        lastActive: now - 5 * 60 * 60 * 1000
       },
-      {
-        address: 'SP4STU...VWX',
-        username: 'dave_investor',
-        avatar: '💼',
-        reputation: 9200,
-        followers: 621,
-        following: 45,
-        bio: 'VC | Crypto investor | Supporting innovation',
-        isFollowing: false,
-        mutualConnections: 15,
-        lastActive: Date.now() - 1 * 60 * 60 * 1000
-      }
-    ];
-
-    const mockActivities: Activity[] = [
-      {
-        id: 1,
-        user: mockUsers[0],
-        type: 'proposal',
-        content: 'Created proposal: DeFi Lending Protocol v2',
-        timestamp: Date.now() - 3 * 60 * 60 * 1000
-      },
-      {
-        id: 2,
-        user: mockUsers[1],
-        type: 'vote',
-        content: 'Voted YES on "Community NFT Marketplace"',
-        timestamp: Date.now() - 5 * 60 * 60 * 1000
+      type: 'vote',
+      content: 'Voted YES on "Community NFT Marketplace"',
+      timestamp: now - 5 * 60 * 60 * 1000
+    },
+    {
+      id: 3,
+      user: {
+        address: 'SP1ABC...DEF',
+        username: 'alice_dao',
+        avatar: '👩‍💼',
+        reputation: 8500,
+        followers: 342,
+        following: 89,
+        bio: 'DeFi enthusiast | Building the future of finance',
+        isFollowing: true,
+        mutualConnections: 12,
+        lastActive: now - 2 * 60 * 60 * 1000
       },
-      {
-        id: 3,
-        user: mockUsers[0],
-        type: 'achievement',
-        content: 'Earned "Top Contributor" badge 🏆',
-        timestamp: Date.now() - 12 * 60 * 60 * 1000
+      type: 'achievement',
+      content: 'Earned "Top Contributor" badge 🏆',
+      timestamp: now - 12 * 60 * 60 * 1000
+    },
+    {
+      id: 4,
+      user: {
+        address: 'SP2XYZ...GHI',
+        username: 'bob_builder',
+        avatar: '👨‍💻',
+        reputation: 6200,
+        followers: 215,
+        following: 156,
+        bio: 'Smart contract developer | Open source contributor',
+        isFollowing: true,
+        mutualConnections: 8,
+        lastActive: now - 5 * 60 * 60 * 1000
       },
-      {
-        id: 4,
-        user: mockUsers[1],
-        type: 'comment',
-        content: 'Commented on proposal #42',
-        timestamp: Date.now() - 18 * 60 * 60 * 1000
-      }
-    ];
-
-    setUsers(mockUsers);
-    setActivities(mockActivities);
-  }, []);
+      type: 'comment',
+      content: 'Commented on proposal #42',
+      timestamp: now - 18 * 60 * 60 * 1000
+    }
+  ]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterReputation, setFilterReputation] = useState<'all' | 'high' | 'medium'>('all');
 
   const followUser = (address: string) => {
     setUsers(users.map(user => 
@@ -139,7 +175,7 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
   };
 
   const formatTimeAgo = (timestamp: number) => {
-    const diff = Date.now() - timestamp;
+    const diff = now - timestamp;
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(hours / 24);
     

From 08750ee8ae1eaec26998fb606ee45b0070f46a49 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 12:13:31 +0100
Subject: [PATCH 18/23] chore(frontend): fix budget dashboard

---
 .../components/charts/BudgetAllocator.tsx     | 30 +++++++++----------
 .../components/dashboard/UserDashboard.tsx    | 22 ++++++++------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/frontend/components/charts/BudgetAllocator.tsx b/frontend/components/charts/BudgetAllocator.tsx
index 5bdbd1f1..d2862dba 100644
--- a/frontend/components/charts/BudgetAllocator.tsx
+++ b/frontend/components/charts/BudgetAllocator.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { Bar, Doughnut } from 'react-chartjs-2';
 import {
   Chart as ChartJS,
@@ -59,20 +59,20 @@ export default function BudgetAllocator() {
   const [showEditModal, setShowEditModal] = useState(false);
   const [editingCategory, setEditingCategory] = useState<CategoryBudget | null>(null);
   const [newAllocation, setNewAllocation] = useState(0);
-  const [alerts, setAlerts] = useState<string[]>([]);
-
-  useEffect(() => {
-    // Check for budget alerts
-    const newAlerts: string[] = [];
-    budgets.forEach(budget => {
-      if (budget.percentage >= 90) {
-        newAlerts.push(`⚠️ ${budget.category} budget is at ${budget.percentage.toFixed(1)}% - Critical!`);
-      } else if (budget.percentage >= 75) {
-        newAlerts.push(`⚡ ${budget.category} budget is at ${budget.percentage.toFixed(1)}% - Warning`);
-      }
-    });
-    setAlerts(newAlerts);
-  }, [budgets]);
+
+  const alerts = useMemo(
+    () =>
+      budgets.flatMap((budget) => {
+        if (budget.percentage >= 90) {
+          return [`⚠️ ${budget.category} budget is at ${budget.percentage.toFixed(1)}% - Critical!`];
+        }
+        if (budget.percentage >= 75) {
+          return [`⚡ ${budget.category} budget is at ${budget.percentage.toFixed(1)}% - Warning`];
+        }
+        return [];
+      }),
+    [budgets]
+  );
 
   const totalAllocated = budgets.reduce((sum, b) => sum + b.allocated, 0);
   const totalSpent = budgets.reduce((sum, b) => sum + b.spent, 0);
diff --git a/frontend/components/dashboard/UserDashboard.tsx b/frontend/components/dashboard/UserDashboard.tsx
index ca8197d6..2ff76ffa 100644
--- a/frontend/components/dashboard/UserDashboard.tsx
+++ b/frontend/components/dashboard/UserDashboard.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { getStake, getAllProposals } from '@/lib/stacks';
 import { formatSTX } from '@/utils/formatSTX';
 import VoteDelegation from '../VoteDelegation';
@@ -14,13 +14,7 @@ export default function UserDashboard({ userAddress }: UserDashboardProps) {
     const [myProposals, setMyProposals] = useState<number[]>([]);
     const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        if (userAddress) {
-            fetchUserData();
-        }
-    }, [userAddress]);
-
-    const fetchUserData = async () => {
+    const fetchUserData = useCallback(async () => {
         if (!userAddress) return;
 
         try {
@@ -45,7 +39,17 @@ export default function UserDashboard({ userAddress }: UserDashboardProps) {
             console.error('Error fetching user data:', err);
             setLoading(false);
         }
-    };
+    }, [userAddress]);
+
+    useEffect(() => {
+        if (userAddress) {
+            const timeout = window.setTimeout(() => {
+                void fetchUserData();
+            }, 0);
+
+            return () => window.clearTimeout(timeout);
+        }
+    }, [userAddress, fetchUserData]);
 
     const shortenAddress = (address: string) => {
         return `${address.slice(0, 8)}...${address.slice(-6)}`;

From e20725ee970405a168b841a21b607c9e5efd3231 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 12:48:49 +0100
Subject: [PATCH 19/23] Refine app shell lint

---
 frontend/src/app/analytics/page.tsx |  3 --
 frontend/src/app/error.tsx          |  5 +--
 frontend/src/app/page.tsx           | 55 ++++-------------------------
 frontend/src/app/profile/page.tsx   |  1 -
 4 files changed, 10 insertions(+), 54 deletions(-)

diff --git a/frontend/src/app/analytics/page.tsx b/frontend/src/app/analytics/page.tsx
index 4de7e42f..4e9af595 100644
--- a/frontend/src/app/analytics/page.tsx
+++ b/frontend/src/app/analytics/page.tsx
@@ -19,9 +19,6 @@ import {
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import GovernanceAnalyticsDashboard from '@/components/GovernanceAnalyticsDashboard';
-import { AnalyticsKPIPanel } from '@/components/dashboard/AnalyticsKPIPanel';
-import { AnalyticsExportPanel } from '@/components/AnalyticsExportPanel';
-import FundingMetricsChart from '@/components/FundingMetricsChart';
 
 const AnalyticsTabLoading = () => (
     <div className="p-8">
diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx
index d75c01fd..bf35ff5a 100644
--- a/frontend/src/app/error.tsx
+++ b/frontend/src/app/error.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useEffect } from "react";
 
 export default function GlobalError({
@@ -78,7 +79,7 @@ export default function GlobalError({
           Try Again
         </button>
 
-        <a
+        <Link
           href="/"
           className="inline-flex items-center gap-2 rounded-lg border px-6 py-3 text-sm font-semibold transition-all hover:scale-105 active:scale-95"
           style={{
@@ -101,7 +102,7 @@ export default function GlobalError({
             <polyline points="9 22 9 12 15 12 15 22" />
           </svg>
           Back to Home
-        </a>
+        </Link>
       </div>
     </div>
   );
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 2c14d0b7..d66f4186 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
-import type { UserSession, UserData } from '@stacks/connect';
+import { useState, useEffect } from 'react';
+import type { UserData } from '@stacks/connect';
 import { CONTRACT_PRINCIPAL } from '@/config';
 import SprintFundHero from '@/components/ui/SprintFundHero';
 import CreateProposalForm from '@/components/CreateProposalForm';
@@ -11,7 +11,7 @@ import Stats from '@/components/Stats';
 import Header from '@/components/Header';
 import Link from 'next/link';
 import ErrorBoundary from '@/components/ErrorBoundary';
-import { LoadingSpinner, LoadingOverlay } from '@/components/LoadingIndicators';
+import { LoadingSpinner } from '@/components/LoadingIndicators';
 import { createLoadingState, updateLoadingState } from '@/lib/loading-state';
 import type { LoadingState } from '@/lib/loading-state';
 
@@ -21,8 +21,6 @@ export default function Home() {
   const [userData, setUserData] = useState<StacksUserData | null>(null);
   const [copied, setCopied] = useState(false);
   const [walletLoading, setWalletLoading] = useState<LoadingState>(createLoadingState('loading'));
-  const [connectLoading, setConnectLoading] = useState<LoadingState>(createLoadingState('idle'));
-  const userSessionRef = useRef<UserSession | null>(null);
 
   useEffect(() => {
     let timeout: number | undefined;
@@ -31,26 +29,25 @@ export default function Home() {
         const { AppConfig, UserSession } = await import('@stacks/connect');
         const appConfig = new AppConfig(['store_write', 'publish_data']);
         const userSession = new UserSession({ appConfig });
-        userSessionRef.current = userSession;
 
         if (userSession.isSignInPending()) {
           userSession.handlePendingSignIn().then((data) => {
             timeout = window.setTimeout(() => {
               setUserData(data);
-              setWalletLoading(updateLoadingState(walletLoading, 'success'));
+              setWalletLoading((current) => updateLoadingState(current, 'success'));
             }, 0);
           });
         } else if (userSession.isUserSignedIn()) {
           timeout = window.setTimeout(() => {
             setUserData(userSession.loadUserData());
-            setWalletLoading(updateLoadingState(walletLoading, 'success'));
+            setWalletLoading((current) => updateLoadingState(current, 'success'));
           }, 0);
         } else {
-          setWalletLoading(updateLoadingState(walletLoading, 'success'));
+          setWalletLoading((current) => updateLoadingState(current, 'success'));
         }
       } catch (error) {
         console.error('Failed to initialize wallet:', error);
-        setWalletLoading(updateLoadingState(walletLoading, 'error'));
+        setWalletLoading((current) => updateLoadingState(current, 'error'));
       }
     })();
     return () => {
@@ -58,43 +55,6 @@ export default function Home() {
     };
   }, []);
 
-  const connectWallet = () => {
-    setConnectLoading(updateLoadingState(connectLoading, 'loading'));
-    (async () => {
-      try {
-        const userSession = userSessionRef.current;
-        if (!userSession) {
-          setConnectLoading(updateLoadingState(connectLoading, 'error'));
-          return;
-        }
-
-        const { showConnect } = await import('@stacks/connect');
-        showConnect({
-          appDetails: {
-            name: 'SprintFund',
-            icon: '/icon.png',
-          },
-          redirectTo: '/',
-          onFinish: () => {
-            const data = userSession.loadUserData();
-            setUserData(data);
-            setConnectLoading(updateLoadingState(connectLoading, 'success'));
-          },
-          userSession,
-        });
-      } catch (error) {
-        console.error('Failed to connect wallet:', error);
-        setConnectLoading(updateLoadingState(connectLoading, 'error'));
-      }
-    })();
-  };
-
-  const disconnectWallet = () => {
-    userSessionRef.current?.signUserOut();
-    setUserData(null);
-    setConnectLoading(updateLoadingState(connectLoading, 'idle'));
-  };
-
   const copyContractAddress = async () => {
     try {
       await navigator.clipboard.writeText(CONTRACT_PRINCIPAL);
@@ -120,7 +80,6 @@ export default function Home() {
     <ErrorBoundary>
       <div className="min-h-screen bg-transparent">
         <Header />
-        <LoadingOverlay isVisible={connectLoading.isLoading} message="Connecting wallet..." />
 
         <SprintFundHero />
 
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index 4f993311..1f6c3e19 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -6,7 +6,6 @@ import BadgeGallery from '@/components/common/BadgeGallery';
 import InterestProfiler from '@/components/InterestProfiler';
 import DelegationStats from '@/components/DelegationStats';
 import UserDashboard from '@/components/dashboard/UserDashboard';
-import { motion } from 'framer-motion';
 import { Settings, LogOut, Wallet } from 'lucide-react';
 
 export default function ProfilePage() {

From 0278ba53eb0c1ebb0a5f2bcd84b0650aaa792989 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 14:01:11 +0100
Subject: [PATCH 20/23] Refine analytics charts

---
 .../components/analytics/SuccessRateChart.tsx | 219 +++++++-------
 .../analytics/VoterNetworkGraph.tsx           | 284 +++++++++---------
 2 files changed, 263 insertions(+), 240 deletions(-)

diff --git a/frontend/components/analytics/SuccessRateChart.tsx b/frontend/components/analytics/SuccessRateChart.tsx
index 90934ebe..c78be2dc 100644
--- a/frontend/components/analytics/SuccessRateChart.tsx
+++ b/frontend/components/analytics/SuccessRateChart.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useRef } from 'react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
-import { format, subDays, subMonths, subYears, startOfDay } from 'date-fns';
+import { format, subDays, subYears, startOfDay } from 'date-fns';
 import { ProposalMetrics } from '../../utils/analytics/dataCollector';
 import { calculateMovingAverage, formatMetric } from '../../utils/analytics/helpers';
 import type {
@@ -36,6 +36,11 @@ interface SuccessRateTooltipProps extends Omit<RechartsTooltipProps, 'payload' |
   label?: string;
 }
 
+interface SuccessRateLegendProps extends RechartsLegendProps {
+  hiddenSeries: Set<string>;
+  onToggleSeries: (seriesKey: string) => void;
+}
+
 const DATE_RANGE_OPTIONS: Array<{ value: DateRangeOption; label: string }> = [
   { value: '7d', label: '7 Days' },
   { value: '30d', label: '30 Days' },
@@ -52,16 +57,107 @@ const CATEGORY_COLORS = [
   '#ec4899'
 ];
 
+const SuccessRateTooltip = ({ active, payload, label, chartData }: SuccessRateTooltipProps & { chartData: SuccessRateDataPoint[] }) => {
+  if (!active || !payload || payload.length === 0) return null;
+  if (!label) return null;
+
+  const dataPoint = chartData.find(d => d.date === label);
+  if (!dataPoint) return null;
+
+  const currentIndex = chartData.indexOf(dataPoint);
+  const previousPoint = currentIndex > 0 ? chartData[currentIndex - 1] : null;
+
+  const trend = previousPoint
+    ? dataPoint.overallRate > previousPoint.overallRate
+      ? '↑'
+      : dataPoint.overallRate < previousPoint.overallRate
+        ? '↓'
+        : '→'
+    : '→';
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4">
+      <p className="font-semibold text-gray-900 dark:text-white mb-2">
+        {format(new Date(label), 'MMM dd, yyyy')}
+      </p>
+      <div className="space-y-1">
+        {payload.map((entry, index) => (
+          <div key={index} className="flex items-center justify-between gap-4 text-sm">
+            <span className="flex items-center gap-2">
+              <span
+                className="w-3 h-3 rounded-full"
+                style={{ backgroundColor: entry.color }}
+              />
+              <span className="text-gray-700 dark:text-gray-300">{entry.name}:</span>
+            </span>
+            <span className="font-medium text-gray-900 dark:text-white">
+              {formatMetric(entry.value, 'percentage')}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-gray-600 dark:text-gray-400">Proposals:</span>
+          <span className="font-medium text-gray-900 dark:text-white">
+            {dataPoint.proposalCount}
+          </span>
+        </div>
+        <div className="flex items-center justify-between text-sm mt-1">
+          <span className="text-gray-600 dark:text-gray-400">Trend:</span>
+          <span
+            className={`font-bold text-lg ${
+              trend === '↑'
+                ? 'text-green-500'
+                : trend === '↓'
+                  ? 'text-red-500'
+                  : 'text-gray-500'
+            }`}
+          >
+            {trend}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SuccessRateLegend = ({ payload = [], hiddenSeries, onToggleSeries }: SuccessRateLegendProps) => {
+  return (
+    <div className="flex flex-wrap gap-4 justify-center mt-4">
+      {payload.map((entry: RechartsLegendEntry, index: number) => (
+        <button
+          key={index}
+          onClick={() => onToggleSeries(entry.dataKey)}
+          className={`flex items-center gap-2 px-3 py-1 rounded-md transition-all ${
+            hiddenSeries.has(entry.dataKey)
+              ? 'opacity-40 hover:opacity-60'
+              : 'opacity-100 hover:opacity-80'
+          }`}
+        >
+          <span
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            {entry.value}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
 export default function SuccessRateChart({ proposals, height = 400 }: SuccessRateChartProps) {
   const [selectedRange, setSelectedRange] = useState<DateRangeOption>('30d');
   const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());
   const chartRef = useRef<HTMLDivElement>(null);
 
-  const getFilteredProposals = (range: DateRangeOption): ProposalMetrics[] => {
+  const chartData = useMemo(() => {
     const now = new Date();
-    let startDate: Date;
+    let startDate: Date | null = null;
 
-    switch (range) {
+    switch (selectedRange) {
       case '7d':
         startDate = subDays(now, 7);
         break;
@@ -75,20 +171,19 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
         startDate = subYears(now, 1);
         break;
       case 'all':
-        return proposals;
+        break;
       default:
         startDate = subDays(now, 30);
     }
 
-    return proposals.filter(p => {
-      const proposalDate = new Date(p.createdAt * 10 * 60 * 1000);
-      return proposalDate >= startDate;
-    });
-  };
+    const filteredProposals =
+      startDate === null
+        ? proposals
+        : proposals.filter(p => {
+            const proposalDate = new Date(p.createdAt * 10 * 60 * 1000);
+            return proposalDate >= startDate;
+          });
 
-  const chartData = useMemo(() => {
-    const filteredProposals = getFilteredProposals(selectedRange);
-    
     if (filteredProposals.length === 0) return [];
 
     const grouped = new Map<string, ProposalMetrics[]>();
@@ -241,91 +336,6 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
     URL.revokeObjectURL(url);
   };
 
-  const CustomTooltip = ({ active, payload, label }: SuccessRateTooltipProps) => {
-    if (!active || !payload || payload.length === 0) return null;
-    if (!label) return null;
-
-    const dataPoint = chartData.find(d => d.date === label);
-    if (!dataPoint) return null;
-
-    const currentIndex = chartData.indexOf(dataPoint);
-    const previousPoint = currentIndex > 0 ? chartData[currentIndex - 1] : null;
-    
-    const trend = previousPoint 
-      ? dataPoint.overallRate > previousPoint.overallRate ? '↑' 
-        : dataPoint.overallRate < previousPoint.overallRate ? '↓' 
-        : '→'
-      : '→';
-
-    return (
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4">
-        <p className="font-semibold text-gray-900 dark:text-white mb-2">
-          {format(new Date(label), 'MMM dd, yyyy')}
-        </p>
-        <div className="space-y-1">
-          {payload.map((entry, index) => (
-            <div key={index} className="flex items-center justify-between gap-4 text-sm">
-              <span className="flex items-center gap-2">
-                <span
-                  className="w-3 h-3 rounded-full"
-                  style={{ backgroundColor: entry.color }}
-                />
-                <span className="text-gray-700 dark:text-gray-300">{entry.name}:</span>
-              </span>
-              <span className="font-medium text-gray-900 dark:text-white">
-                {formatMetric(entry.value, 'percentage')}
-              </span>
-            </div>
-          ))}
-        </div>
-        <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between text-sm">
-            <span className="text-gray-600 dark:text-gray-400">Proposals:</span>
-            <span className="font-medium text-gray-900 dark:text-white">
-              {dataPoint.proposalCount}
-            </span>
-          </div>
-          <div className="flex items-center justify-between text-sm mt-1">
-            <span className="text-gray-600 dark:text-gray-400">Trend:</span>
-            <span className={`font-bold text-lg ${
-              trend === '↑' ? 'text-green-500' : 
-              trend === '↓' ? 'text-red-500' : 
-              'text-gray-500'
-            }`}>
-              {trend}
-            </span>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  const CustomLegend = ({ payload = [] }: RechartsLegendProps) => {
-    return (
-      <div className="flex flex-wrap gap-4 justify-center mt-4">
-        {payload.map((entry: RechartsLegendEntry, index: number) => (
-          <button
-            key={index}
-            onClick={() => toggleSeries(entry.dataKey)}
-            className={`flex items-center gap-2 px-3 py-1 rounded-md transition-all ${
-              hiddenSeries.has(entry.dataKey)
-                ? 'opacity-40 hover:opacity-60'
-                : 'opacity-100 hover:opacity-80'
-            }`}
-          >
-            <span
-              className="w-3 h-3 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-              {entry.value}
-            </span>
-          </button>
-        ))}
-      </div>
-    );
-  };
-
   if (chartData.length === 0) {
     return (
       <div className="flex items-center justify-center h-64 bg-gray-50 dark:bg-gray-900 rounded-lg">
@@ -397,9 +407,16 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
               domain={[0, 100]}
             />
             
-            <Tooltip content={<CustomTooltip />} />
-            
-            <Legend content={<CustomLegend />} />
+            <Tooltip content={<SuccessRateTooltip chartData={chartData} />} />
+
+            <Legend
+              content={
+                <SuccessRateLegend
+                  hiddenSeries={hiddenSeries}
+                  onToggleSeries={toggleSeries}
+                />
+              }
+            />
 
             {!hiddenSeries.has('overallRate') && (
               <Line
diff --git a/frontend/components/analytics/VoterNetworkGraph.tsx b/frontend/components/analytics/VoterNetworkGraph.tsx
index fdadc5ec..d66241c4 100644
--- a/frontend/components/analytics/VoterNetworkGraph.tsx
+++ b/frontend/components/analytics/VoterNetworkGraph.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useRef, useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { VoterMetrics } from '../../utils/analytics/dataCollector';
 
 interface VoterNetworkGraphProps {
@@ -25,61 +25,73 @@ interface Edge {
   weight: number;
 }
 
+interface NetworkData {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+const buildNetworkData = (voters: VoterMetrics[], minVoteCount: number): NetworkData => {
+  const filteredVoters = voters.filter(v => v.totalVotes >= minVoteCount);
+  const width = 800;
+  const height = 600;
+
+  const nodes: Node[] = filteredVoters.map((voter, index) => {
+    const angle = filteredVoters.length > 0 ? (index / filteredVoters.length) * 2 * Math.PI : 0;
+    const orbitRadius = Math.min(width, height) / 3;
+
+    return {
+      id: voter.address,
+      x: width / 2 + Math.cos(angle) * orbitRadius,
+      y: height / 2 + Math.sin(angle) * orbitRadius,
+      vx: 0,
+      vy: 0,
+      totalVotes: voter.totalVotes,
+      avgWeight: voter.averageWeight,
+      radius: Math.max(5, Math.min(20, Math.sqrt(voter.totalVotes) * 2)),
+    };
+  });
+
+  const edges: Edge[] = [];
+
+  for (let i = 0; i < filteredVoters.length; i++) {
+    for (let j = i + 1; j < filteredVoters.length; j++) {
+      const voter1 = filteredVoters[i];
+      const voter2 = filteredVoters[j];
+      const sharedCategories = voter1.categories.filter(c => voter2.categories.includes(c));
+
+      if (sharedCategories.length > 0) {
+        edges.push({
+          source: voter1.address,
+          target: voter2.address,
+          weight: sharedCategories.length,
+        });
+      }
+    }
+  }
+
+  return { nodes, edges };
+};
+
 export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNetworkGraphProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [nodes, setNodes] = useState<Node[]>([]);
-  const [edges, setEdges] = useState<Edge[]>([]);
+  const animationRef = useRef<number | null>(null);
+  const nodesRef = useRef<Node[]>([]);
+  const edgesRef = useRef<Edge[]>([]);
   const [hoveredNode, setHoveredNode] = useState<Node | null>(null);
   const [viewMode, setViewMode] = useState<'influence' | 'delegation' | 'specialization'>('influence');
-  const animationRef = useRef<number | null>(null);
 
   const filteredVoters = useMemo(() => {
     return voters.filter(v => v.totalVotes >= minVoteCount);
   }, [voters, minVoteCount]);
 
-  useEffect(() => {
-    const width = 800;
-    const height = 600;
-
-    const newNodes: Node[] = filteredVoters.map((voter, i) => {
-      const angle = (i / filteredVoters.length) * 2 * Math.PI;
-      const radius = Math.min(width, height) / 3;
-      
-      return {
-        id: voter.address,
-        x: width / 2 + Math.cos(angle) * radius,
-        y: height / 2 + Math.sin(angle) * radius,
-        vx: 0,
-        vy: 0,
-        totalVotes: voter.totalVotes,
-        avgWeight: voter.averageWeight,
-        radius: Math.max(5, Math.min(20, Math.sqrt(voter.totalVotes) * 2))
-      };
-    });
-
-    const newEdges: Edge[] = [];
-    for (let i = 0; i < filteredVoters.length; i++) {
-      for (let j = i + 1; j < filteredVoters.length; j++) {
-        const voter1 = filteredVoters[i];
-        const voter2 = filteredVoters[j];
-
-        const sharedCategories = voter1.categories.filter(c => 
-          voter2.categories.includes(c)
-        );
-
-        if (sharedCategories.length > 0) {
-          newEdges.push({
-            source: voter1.address,
-            target: voter2.address,
-            weight: sharedCategories.length
-          });
-        }
-      }
-    }
+  const networkData = useMemo(() => {
+    return buildNetworkData(voters, minVoteCount);
+  }, [voters, minVoteCount]);
 
-    setNodes(newNodes);
-    setEdges(newEdges);
-  }, [filteredVoters]);
+  useEffect(() => {
+    nodesRef.current = networkData.nodes.map(node => ({ ...node }));
+    edgesRef.current = networkData.edges;
+  }, [networkData]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -91,81 +103,81 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
     const width = canvas.width;
     const height = canvas.height;
 
-    const simulate = () => {
+    const drawFrame = () => {
+      const nodes = nodesRef.current;
+      const edges = edgesRef.current;
+
       ctx.clearRect(0, 0, width, height);
 
-      setNodes(prevNodes => {
-        const newNodes = [...prevNodes];
-
-        newNodes.forEach(node => {
-          let fx = 0;
-          let fy = 0;
-
-          newNodes.forEach(other => {
-            if (node.id === other.id) return;
-
-            const dx = other.x - node.x;
-            const dy = other.y - node.y;
-            const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-
-            const repulsion = -100 / (dist * dist);
-            fx += (dx / dist) * repulsion;
-            fy += (dy / dist) * repulsion;
-          });
-
-          edges.forEach(edge => {
-            if (edge.source === node.id) {
-              const target = newNodes.find(n => n.id === edge.target);
-              if (target) {
-                const dx = target.x - node.x;
-                const dy = target.y - node.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const attraction = (dist - 100) * 0.01 * edge.weight;
-                fx += (dx / dist) * attraction;
-                fy += (dy / dist) * attraction;
-              }
-            }
-            if (edge.target === node.id) {
-              const source = newNodes.find(n => n.id === edge.source);
-              if (source) {
-                const dx = source.x - node.x;
-                const dy = source.y - node.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const attraction = (dist - 100) * 0.01 * edge.weight;
-                fx += (dx / dist) * attraction;
-                fy += (dy / dist) * attraction;
-              }
+      const nextNodes = nodes.map(node => ({ ...node }));
+
+      nextNodes.forEach(node => {
+        let fx = 0;
+        let fy = 0;
+
+        nextNodes.forEach(other => {
+          if (node.id === other.id) return;
+
+          const dx = other.x - node.x;
+          const dy = other.y - node.y;
+          const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+          const repulsion = -100 / (dist * dist);
+
+          fx += (dx / dist) * repulsion;
+          fy += (dy / dist) * repulsion;
+        });
+
+        edges.forEach(edge => {
+          if (edge.source === node.id) {
+            const target = nextNodes.find(n => n.id === edge.target);
+            if (target) {
+              const dx = target.x - node.x;
+              const dy = target.y - node.y;
+              const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+              const attraction = (dist - 100) * 0.01 * edge.weight;
+              fx += (dx / dist) * attraction;
+              fy += (dy / dist) * attraction;
             }
-          });
-
-          const centerX = width / 2;
-          const centerY = height / 2;
-          const toCenterX = centerX - node.x;
-          const toCenterY = centerY - node.y;
-          const distToCenter = Math.sqrt(toCenterX * toCenterX + toCenterY * toCenterY);
-          
-          if (distToCenter > width / 3) {
-            fx += toCenterX * 0.001;
-            fy += toCenterY * 0.001;
           }
 
-          node.vx = (node.vx + fx) * 0.9;
-          node.vy = (node.vy + fy) * 0.9;
+          if (edge.target === node.id) {
+            const source = nextNodes.find(n => n.id === edge.source);
+            if (source) {
+              const dx = source.x - node.x;
+              const dy = source.y - node.y;
+              const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+              const attraction = (dist - 100) * 0.01 * edge.weight;
+              fx += (dx / dist) * attraction;
+              fy += (dy / dist) * attraction;
+            }
+          }
+        });
 
-          node.x += node.vx;
-          node.y += node.vy;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const toCenterX = centerX - node.x;
+        const toCenterY = centerY - node.y;
+        const distToCenter = Math.sqrt(toCenterX * toCenterX + toCenterY * toCenterY);
 
-          node.x = Math.max(node.radius, Math.min(width - node.radius, node.x));
-          node.y = Math.max(node.radius, Math.min(height - node.radius, node.y));
-        });
+        if (distToCenter > width / 3) {
+          fx += toCenterX * 0.001;
+          fy += toCenterY * 0.001;
+        }
 
-        return newNodes;
+        node.vx = (node.vx + fx) * 0.9;
+        node.vy = (node.vy + fy) * 0.9;
+        node.x += node.vx;
+        node.y += node.vy;
+        node.x = Math.max(node.radius, Math.min(width - node.radius, node.x));
+        node.y = Math.max(node.radius, Math.min(height - node.radius, node.y));
       });
 
+      nodesRef.current = nextNodes;
+
       edges.forEach(edge => {
-        const source = nodes.find(n => n.id === edge.source);
-        const target = nodes.find(n => n.id === edge.target);
-        
+        const source = nextNodes.find(n => n.id === edge.source);
+        const target = nextNodes.find(n => n.id === edge.target);
+
         if (source && target) {
           ctx.strokeStyle = '#374151';
           ctx.lineWidth = edge.weight * 0.5;
@@ -178,31 +190,33 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
         }
       });
 
-      nodes.forEach(node => {
-        const normalizedWeight = node.avgWeight / Math.max(...nodes.map(n => n.avgWeight));
+      const maxAvgWeight = Math.max(1, ...nextNodes.map(n => n.avgWeight));
+
+      nextNodes.forEach(node => {
+        const normalizedWeight = node.avgWeight / maxAvgWeight;
         const hue = normalizedWeight * 120;
         ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
-        
+
         ctx.beginPath();
         ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
         ctx.fill();
-        
+
         ctx.strokeStyle = hoveredNode?.id === node.id ? '#fff' : '#1f2937';
         ctx.lineWidth = hoveredNode?.id === node.id ? 3 : 1;
         ctx.stroke();
       });
 
-      animationRef.current = requestAnimationFrame(simulate);
+      animationRef.current = requestAnimationFrame(drawFrame);
     };
 
-    simulate();
+    drawFrame();
 
     return () => {
       if (animationRef.current !== null) {
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [nodes, edges, hoveredNode]);
+  }, [hoveredNode, networkData]);
 
   const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
     const canvas = canvasRef.current;
@@ -212,7 +226,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 
-    const clickedNode = nodes.find(node => {
+    const clickedNode = nodesRef.current.find(node => {
       const dx = x - node.x;
       const dy = y - node.y;
       return Math.sqrt(dx * dx + dy * dy) <= node.radius;
@@ -234,13 +248,13 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 
-    const hoveredNode = nodes.find(node => {
+    const hovered = nodesRef.current.find(node => {
       const dx = x - node.x;
       const dy = y - node.y;
       return Math.sqrt(dx * dx + dy * dy) <= node.radius;
     });
 
-    setHoveredNode(hoveredNode || null);
+    setHoveredNode(hovered || null);
   };
 
   const keyInfluencers = useMemo(() => {
@@ -251,14 +265,14 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
 
   const independentVoters = useMemo(() => {
     const voterConnections = new Map<string, number>();
-    
-    edges.forEach(edge => {
+
+    networkData.edges.forEach(edge => {
       voterConnections.set(edge.source, (voterConnections.get(edge.source) || 0) + 1);
       voterConnections.set(edge.target, (voterConnections.get(edge.target) || 0) + 1);
     });
 
     return filteredVoters.filter(v => (voterConnections.get(v.address) || 0) < 2);
-  }, [filteredVoters, edges]);
+  }, [filteredVoters, networkData.edges]);
 
   return (
     <div className="space-y-6">
@@ -274,7 +288,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
           {[
             { value: 'influence' as const, label: 'Influence Map' },
             { value: 'delegation' as const, label: 'Delegation Chains' },
-            { value: 'specialization' as const, label: 'Category Focus' }
+            { value: 'specialization' as const, label: 'Category Focus' },
           ].map(option => (
             <button
               key={option.value}
@@ -302,7 +316,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
             className="w-full cursor-pointer"
             style={{ maxWidth: '100%', height: 'auto' }}
           />
-          
+
           <div className="mt-4 flex items-center justify-between text-sm">
             <div className="flex items-center gap-2">
               <span className="text-gray-600 dark:text-gray-400">Node size:</span>
@@ -332,9 +346,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
                       {voter.address.slice(0, 8)}...
                     </span>
                   </div>
-                  <span className="text-gray-700 dark:text-gray-300">
-                    {voter.totalVotes} votes
-                  </span>
+                  <span className="text-gray-700 dark:text-gray-300">{voter.totalVotes} votes</span>
                 </div>
               ))}
             </div>
@@ -345,11 +357,11 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
             <div className="space-y-2 text-sm">
               <div className="flex justify-between">
                 <span className="text-gray-600 dark:text-gray-400">Total Nodes:</span>
-                <span className="font-medium text-gray-900 dark:text-white">{nodes.length}</span>
+                <span className="font-medium text-gray-900 dark:text-white">{networkData.nodes.length}</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-gray-600 dark:text-gray-400">Total Edges:</span>
-                <span className="font-medium text-gray-900 dark:text-white">{edges.length}</span>
+                <span className="font-medium text-gray-900 dark:text-white">{networkData.edges.length}</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-gray-600 dark:text-gray-400">Independent Voters:</span>
@@ -360,9 +372,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
 
           {hoveredNode && (
             <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700 p-4">
-              <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">
-                Voter Details
-              </h4>
+              <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">Voter Details</h4>
               <div className="space-y-1 text-sm">
                 <div className="flex justify-between">
                   <span className="text-gray-600 dark:text-gray-400">Address:</span>
@@ -372,15 +382,11 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-600 dark:text-gray-400">Total Votes:</span>
-                  <span className="font-medium text-gray-900 dark:text-white">
-                    {hoveredNode.totalVotes}
-                  </span>
+                  <span className="font-medium text-gray-900 dark:text-white">{hoveredNode.totalVotes}</span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-600 dark:text-gray-400">Avg Weight:</span>
-                  <span className="font-medium text-gray-900 dark:text-white">
-                    {hoveredNode.avgWeight.toFixed(2)}
-                  </span>
+                  <span className="font-medium text-gray-900 dark:text-white">{hoveredNode.avgWeight.toFixed(2)}</span>
                 </div>
               </div>
             </div>

From 9ca20f1209da01fbc5d78f1d25983daa8b347270 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Thu, 16 Apr 2026 15:00:04 +0100
Subject: [PATCH 21/23] Trim remaining lint tail

---
 .../components/dashboard/UserInsights.tsx     |  5 +----
 .../src/app/api/proposals/paginated/route.ts  |  6 +++---
 frontend/src/hooks/useCacheMetrics.ts         |  6 +++++-
 frontend/src/hooks/useMediaQuery.ts           |  1 -
 frontend/src/hooks/useMobileMenu.ts           |  6 +++++-
 frontend/src/hooks/useProposalDiscussion.ts   | 19 ++++++++++++-------
 frontend/src/spa-pages/CreateProposal.tsx     |  2 +-
 frontend/src/spa-pages/ProposalDetail.tsx     |  8 ++++++--
 frontend/src/spa-pages/Proposals.tsx          |  8 ++++++--
 frontend/store/analyticsStore.ts              | 10 +++++-----
 10 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/frontend/components/dashboard/UserInsights.tsx b/frontend/components/dashboard/UserInsights.tsx
index e4fa5fa1..c4156353 100644
--- a/frontend/components/dashboard/UserInsights.tsx
+++ b/frontend/components/dashboard/UserInsights.tsx
@@ -39,10 +39,7 @@ interface OptimalStrategy {
   recommendedActions: string[];
 }
 
-interface UserInsightsProps {
-}
-
-export default function UserInsights(_props: UserInsightsProps) {
+export default function UserInsights() {
   const [activeTab, setActiveTab] = useState<'recommendations' | 'performance' | 'strategies'>('recommendations');
   const [filterImpact, setFilterImpact] = useState<'all' | 'high' | 'medium'>('all');
 
diff --git a/frontend/src/app/api/proposals/paginated/route.ts b/frontend/src/app/api/proposals/paginated/route.ts
index bf6034cf..00acfd6d 100644
--- a/frontend/src/app/api/proposals/paginated/route.ts
+++ b/frontend/src/app/api/proposals/paginated/route.ts
@@ -28,8 +28,8 @@ export async function GET(request: NextRequest) {
     }
 
     proposals.sort((a, b) => {
-      let aVal = a[sortBy as keyof typeof a];
-      let bVal = b[sortBy as keyof typeof b];
+      const aVal = a[sortBy as keyof typeof a];
+      const bVal = b[sortBy as keyof typeof b];
 
       if (typeof aVal === 'string' && typeof bVal === 'string') {
         return sortOrder === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
@@ -45,7 +45,7 @@ export async function GET(request: NextRequest) {
     const paginated = PaginationService.paginate(proposals, page, pageSize);
 
     return NextResponse.json(paginated);
-  } catch (error) {
+  } catch {
     return NextResponse.json(
       { error: 'Failed to fetch proposals' },
       { status: 500 }
diff --git a/frontend/src/hooks/useCacheMetrics.ts b/frontend/src/hooks/useCacheMetrics.ts
index a551ff6b..910d6403 100644
--- a/frontend/src/hooks/useCacheMetrics.ts
+++ b/frontend/src/hooks/useCacheMetrics.ts
@@ -44,12 +44,16 @@ export function useCacheMetrics() {
 
   useEffect(() => {
     let cleanup: (() => void) | undefined;
+    let timeout: number | undefined;
 
     if (cacheConfigManager.metricsEnabled()) {
-      cleanup = startMonitoring();
+      timeout = window.setTimeout(() => {
+        cleanup = startMonitoring();
+      }, 0);
     }
 
     return () => {
+      if (timeout) window.clearTimeout(timeout);
       cleanup?.();
     };
   }, [startMonitoring]);
diff --git a/frontend/src/hooks/useMediaQuery.ts b/frontend/src/hooks/useMediaQuery.ts
index be48ed75..1899ae75 100644
--- a/frontend/src/hooks/useMediaQuery.ts
+++ b/frontend/src/hooks/useMediaQuery.ts
@@ -17,7 +17,6 @@ export function useMediaQuery(query: string): boolean {
 
   useEffect(() => {
     const mql = window.matchMedia(query);
-    setMatches(mql.matches);
 
     const handleChange = (e: MediaQueryListEvent) => {
       setMatches(e.matches);
diff --git a/frontend/src/hooks/useMobileMenu.ts b/frontend/src/hooks/useMobileMenu.ts
index 425fda21..9b0b2db4 100644
--- a/frontend/src/hooks/useMobileMenu.ts
+++ b/frontend/src/hooks/useMobileMenu.ts
@@ -19,7 +19,11 @@ export function useMobileMenu() {
 
   /* Close on route change */
   useEffect(() => {
-    setIsOpen(false);
+    const timeout = window.setTimeout(() => {
+      setIsOpen(false);
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
   }, [pathname]);
 
   /* Close when viewport passes mobile breakpoint */
diff --git a/frontend/src/hooks/useProposalDiscussion.ts b/frontend/src/hooks/useProposalDiscussion.ts
index fde1a20e..bd61d2ad 100644
--- a/frontend/src/hooks/useProposalDiscussion.ts
+++ b/frontend/src/hooks/useProposalDiscussion.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useConnect, UserSession } from '@stacks/connect-react';
 import { proposalDiscussionService } from '@/services/proposal-discussion';
-import { ProposalDiscussionThread, ProposalDiscussionComment } from '@/types/proposal-detail';
+import { ProposalDiscussionThread } from '@/types/proposal-detail';
 
 // Helper to safely get user address from UserSession
 function getUserAddress(userSession: UserSession | null): string | null {
@@ -27,14 +27,19 @@ function getUserName(userSession: UserSession | null): string | undefined {
 
 export function useProposalDiscussion(proposalId: string) {
   const { userSession } = useConnect();
-  const [thread, setThread] = useState<ProposalDiscussionThread | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [thread, setThread] = useState<ProposalDiscussionThread | null>(() =>
+    proposalId ? proposalDiscussionService.getDiscussionThread(proposalId) : null
+  );
+  const [loading] = useState(false);
 
   useEffect(() => {
-    if (proposalId) {
-      const discussion = proposalDiscussionService.getDiscussionThread(proposalId);
-      setThread(discussion);
-    }
+    const timeout = window.setTimeout(() => {
+      if (proposalId) {
+        setThread(proposalDiscussionService.getDiscussionThread(proposalId));
+      }
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
   }, [proposalId]);
 
   const addComment = useCallback(
diff --git a/frontend/src/spa-pages/CreateProposal.tsx b/frontend/src/spa-pages/CreateProposal.tsx
index 29e3742e..19fd6d10 100644
--- a/frontend/src/spa-pages/CreateProposal.tsx
+++ b/frontend/src/spa-pages/CreateProposal.tsx
@@ -93,7 +93,7 @@ export function CreateProposalPage() {
         }
       },
     });
-  }, [title, description, amount, duration, validation, dialog, toast, navigate]);
+  }, [title, description, amount, duration, validation, dialog, toast, navigate, stxPrice]);
 
   if (walletLoading) {
     return <LoadingSpinner />;
diff --git a/frontend/src/spa-pages/ProposalDetail.tsx b/frontend/src/spa-pages/ProposalDetail.tsx
index 5e436570..93ecd9b4 100644
--- a/frontend/src/spa-pages/ProposalDetail.tsx
+++ b/frontend/src/spa-pages/ProposalDetail.tsx
@@ -4,7 +4,7 @@ import { getProposal } from '../lib/stacks';
 import { callVote, callExecuteProposal } from '../lib/stacks';
 import { saveVoteRecord } from '../lib/profile-data';
 import { formatStx } from '../config';
-import { truncateAddress, explorerAddressUrl, explorerTxUrl } from '../lib/api';
+import { truncateAddress, explorerAddressUrl } from '../lib/api';
 import { sanitizeText, sanitizeMultilineText } from '../lib/sanitize';
 import { useWalletConnected, useWalletAddress } from '../store/wallet-selectors';
 import { useToast } from '../hooks/useToast';
@@ -69,7 +69,11 @@ export function ProposalDetailPage(): React.JSX.Element {
   }, [proposalId]);
 
   useEffect(() => {
-    fetchProposal();
+    const timeout = window.setTimeout(() => {
+      fetchProposal();
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
   }, [fetchProposal]);
 
   const handleVote = useCallback((support: boolean): void => {
diff --git a/frontend/src/spa-pages/Proposals.tsx b/frontend/src/spa-pages/Proposals.tsx
index 086c3648..7c158a38 100644
--- a/frontend/src/spa-pages/Proposals.tsx
+++ b/frontend/src/spa-pages/Proposals.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useMemo, RefObject } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { getProposalsPage } from '../lib/stacks';
 import { ProposalCard } from '../components/ProposalCard';
@@ -120,7 +120,11 @@ export function ProposalsPage(): React.JSX.Element {
   }, [online]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    setSelectedIndex(null);
+    const timeout = window.setTimeout(() => {
+      setSelectedIndex(null);
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
   }, [params.status, params.page]);
 
   return (
diff --git a/frontend/store/analyticsStore.ts b/frontend/store/analyticsStore.ts
index 774c22c8..8703feb9 100644
--- a/frontend/store/analyticsStore.ts
+++ b/frontend/store/analyticsStore.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { ProposalMetrics, VoterMetrics, fetchAllProposals, fetchVoterMetrics, clearAnalyticsCache } from '../utils/analytics/dataCollector';
 
 export interface AnalyticsFilters {
@@ -114,9 +114,9 @@ const useAnalyticsStore = create<AnalyticsState>((set, get) => ({
 export const useFilteredProposals = (): ProposalMetrics[] => {
   const proposals = useAnalyticsStore(state => state.proposals);
   const filters = useAnalyticsStore(state => state.filters);
+  const [now] = useState(() => Date.now());
   
   return useMemo(() => {
-    const now = Date.now();
     return proposals.filter(proposal => {
       const proposalDate = new Date(proposal.createdAt * 10 * 60 * 1000);
       
@@ -156,14 +156,14 @@ export const useFilteredProposals = (): ProposalMetrics[] => {
 
       return true;
     });
-  }, [proposals, filters]);
+  }, [proposals, filters, now]);
 };
 
 export const useAggregateStats = (): AggregateStats => {
   const filteredProposals = useFilteredProposals();
+  const [now] = useState(() => Date.now());
   
   return useMemo(() => {
-    const now = Date.now();
     const totalFunded = filteredProposals
       .filter(p => p.executed)
       .reduce((sum, p) => sum + p.amount, 0);
@@ -191,7 +191,7 @@ export const useAggregateStats = (): AggregateStats => {
       totalProposals: filteredProposals.length,
       activeProposals
     };
-  }, [filteredProposals]);
+  }, [filteredProposals, now]);
 };
 
 let refreshInterval: NodeJS.Timeout | null = null;

From 36514b1aaf162ae8603c40b16c49cd69fa6a9200 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Fri, 17 Apr 2026 10:09:34 +0100
Subject: [PATCH 22/23] Add wallet activity timeline

---
 frontend/src/app/profile/page.tsx | 260 ++++++++++++++++++++++++------
 1 file changed, 212 insertions(+), 48 deletions(-)

diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index 1f6c3e19..2c02076d 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -1,61 +1,225 @@
 'use client';
 
-import React from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Header from '@/components/Header';
 import BadgeGallery from '@/components/common/BadgeGallery';
 import InterestProfiler from '@/components/InterestProfiler';
 import DelegationStats from '@/components/DelegationStats';
 import UserDashboard from '@/components/dashboard/UserDashboard';
+import { ActivityTimeline } from '@/components/profile';
+import { fetchUserProfile } from '@/lib/profile-data';
+import { toErrorMessage } from '@/lib/errors';
+import {
+  useWalletAddress,
+  useWalletConnect,
+  useWalletConnected,
+  useWalletDisconnect,
+  useWalletLoading,
+} from '@/store/wallet-selectors';
+import { LoadingSpinner } from '@/components/LoadingSpinner';
+import type { UserProfile } from '@/types/profile';
 import { Settings, LogOut, Wallet } from 'lucide-react';
 
+function shortenAddress(address: string): string {
+  return `${address.slice(0, 8)}...${address.slice(-6)}`;
+}
+
+function TimelinePlaceholder({ onConnect }: { onConnect: () => void }) {
+  return (
+    <div className="rounded-3xl border border-white/10 bg-white/5 p-8 text-center">
+      <h3 className="text-lg font-semibold text-white mb-2">Wallet activity timeline</h3>
+      <p className="text-sm text-slate-400 mb-6">
+        Connect your wallet to see recent proposals, votes, and execution activity.
+      </p>
+      <button
+        type="button"
+        onClick={onConnect}
+        className="rounded-xl bg-orange-600 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:bg-orange-500"
+      >
+        Connect Wallet
+      </button>
+    </div>
+  );
+}
+
+function TimelineLoading() {
+  return (
+    <div className="rounded-3xl border border-white/10 bg-white/5 p-8">
+      <div className="animate-pulse space-y-4">
+        <div className="h-5 w-48 rounded bg-white/10" />
+        <div className="h-4 w-72 rounded bg-white/10" />
+        <div className="space-y-3 pt-4">
+          <div className="h-20 rounded-2xl bg-white/5" />
+          <div className="h-20 rounded-2xl bg-white/5" />
+          <div className="h-20 rounded-2xl bg-white/5" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TimelineError({
+  error,
+  onRetry,
+}: {
+  error: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className="rounded-3xl border border-red-500/20 bg-red-500/10 p-8">
+      <h3 className="text-lg font-semibold text-white mb-2">Unable to load activity</h3>
+      <p className="text-sm text-red-200 mb-6">{error}</p>
+      <button
+        type="button"
+        onClick={onRetry}
+        className="rounded-xl border border-red-400/30 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:bg-red-500/20"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}
+
 export default function ProfilePage() {
+  const walletLoading = useWalletLoading();
+  const connected = useWalletConnected();
+  const address = useWalletAddress();
+  const connect = useWalletConnect();
+  const disconnect = useWalletDisconnect();
+
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [activityLoading, setActivityLoading] = useState(false);
+  const [activityError, setActivityError] = useState<string | null>(null);
+
+  const loadProfile = useCallback(async () => {
+    if (!address || !connected) return;
+
+    setActivityLoading(true);
+    setActivityError(null);
+
+    try {
+      const data = await fetchUserProfile(address);
+      setProfile(data);
+    } catch (error) {
+      setActivityError(toErrorMessage(error));
+    } finally {
+      setActivityLoading(false);
+    }
+  }, [address, connected]);
+
+  useEffect(() => {
+    if (!connected || !address) return;
+
+    const timeout = window.setTimeout(() => {
+      void loadProfile();
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
+  }, [address, connected, loadProfile]);
+
+  const isCurrentProfile = profile?.address === address;
+  const visibleActivity = isCurrentProfile ? profile.activity : [];
+  const showTimelineLoading = Boolean(connected && address && (activityLoading || !isCurrentProfile));
+  const avatarInitials = address ? address.slice(0, 2).toUpperCase() : 'SP';
+
+  if (walletLoading) {
     return (
-        <div className="min-h-screen bg-transparent">
-            <Header />
-
-            <main className="pt-32 pb-20 px-8 max-w-7xl mx-auto">
-                <div className="flex flex-col md:flex-row justify-between items-start gap-12 mb-20">
-                    <div className="flex items-center gap-8">
-                        <div className="w-32 h-32 rounded-[40px] bg-gradient-to-br from-orange-600 to-orange-500 flex items-center justify-center text-4xl font-black text-white shadow-2xl relative group">
-                            SP
-                            <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-[40px] border border-white/20" />
-                        </div>
-                        <div>
-                            <h2 className="text-5xl font-black text-white uppercase tracking-tighter mb-2">Sprint Citizen</h2>
-                            <div className="flex items-center gap-3">
-                                <Wallet className="w-4 h-4 text-slate-500" />
-                                <p className="text-sm font-bold text-slate-500 uppercase tracking-widest leading-relaxed">
-                                    SP12...ABCD
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="flex gap-4">
-                        <button className="p-4 bg-white/5 border border-white/10 rounded-2xl hover:bg-white/10 transition-all text-slate-400 hover:text-white">
-                            <Settings className="w-5 h-5" />
-                        </button>
-                        <button className="flex items-center gap-3 px-8 py-4 bg-red-600/10 border border-red-500/20 rounded-2xl text-red-500 text-[10px] font-black uppercase tracking-widest hover:bg-red-600 hover:text-white transition-all">
-                            <LogOut className="w-4 h-4" />
-                            Disconnect
-                        </button>
-                    </div>
-                </div>
-
-                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
-                    <div className="lg:col-span-1">
-                        <DelegationStats />
-                    </div>
-                    <div className="lg:col-span-2">
-                        <BadgeGallery />
-                    </div>
-                </div>
-
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-                    <InterestProfiler />
-                    <UserDashboard />
-                </div>
-            </main>
-        </div>
+      <div className="min-h-screen flex items-center justify-center">
+        <LoadingSpinner />
+      </div>
     );
+  }
+
+  return (
+    <div className="min-h-screen bg-transparent">
+      <Header />
+
+      <main className="pt-32 pb-20 px-8 max-w-7xl mx-auto">
+        <div className="flex flex-col md:flex-row justify-between items-start gap-12 mb-20">
+          <div className="flex items-center gap-8">
+            <div className="w-32 h-32 rounded-[40px] bg-gradient-to-br from-orange-600 to-orange-500 flex items-center justify-center text-4xl font-black text-white shadow-2xl relative group">
+              {avatarInitials}
+              <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-[40px] border border-white/20" />
+            </div>
+            <div>
+              <h2 className="text-5xl font-black text-white uppercase tracking-tighter mb-2">
+                {address ? 'Wallet Profile' : 'Sprint Citizen'}
+              </h2>
+              <div className="flex items-center gap-3">
+                <Wallet className="w-4 h-4 text-slate-500" />
+                <p className="text-sm font-bold text-slate-500 uppercase tracking-widest leading-relaxed">
+                  {address ? shortenAddress(address) : 'Connect a wallet to view your profile'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex gap-4">
+            <button className="p-4 bg-white/5 border border-white/10 rounded-2xl hover:bg-white/10 transition-all text-slate-400 hover:text-white">
+              <Settings className="w-5 h-5" />
+            </button>
+            {connected && address ? (
+              <button
+                type="button"
+                onClick={disconnect}
+                className="flex items-center gap-3 px-8 py-4 bg-red-600/10 border border-red-500/20 rounded-2xl text-red-500 text-[10px] font-black uppercase tracking-widest hover:bg-red-600 hover:text-white transition-all"
+              >
+                <LogOut className="w-4 h-4" />
+                Disconnect
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={connect}
+                className="flex items-center gap-3 px-8 py-4 bg-orange-600/10 border border-orange-500/20 rounded-2xl text-orange-400 text-[10px] font-black uppercase tracking-widest hover:bg-orange-600 hover:text-white transition-all"
+              >
+                <Wallet className="w-4 h-4" />
+                Connect Wallet
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+          <div className="lg:col-span-1">
+            <DelegationStats />
+          </div>
+          <div className="lg:col-span-2">
+            <BadgeGallery />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+          <InterestProfiler />
+          <UserDashboard userAddress={address} />
+        </div>
+
+        <section className="rounded-[32px] border border-white/10 bg-white/5 p-8">
+          <div className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between mb-6">
+            <div>
+              <h3 className="text-2xl font-black text-white uppercase tracking-tight">Wallet activity timeline</h3>
+              <p className="text-sm text-slate-400">
+                Recent proposal, voting, and execution activity for the connected wallet.
+              </p>
+            </div>
+            {address && (
+              <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">
+                {shortenAddress(address)}
+              </p>
+            )}
+          </div>
+
+          {!connected || !address ? (
+            <TimelinePlaceholder onConnect={connect} />
+          ) : showTimelineLoading ? (
+            <TimelineLoading />
+          ) : activityError ? (
+            <TimelineError error={activityError} onRetry={loadProfile} />
+          ) : (
+            <ActivityTimeline activity={visibleActivity} />
+          )}
+        </section>
+      </main>
+    </div>
+  );
 }

From 2ac9c4bd26c9386e5925ba2b2beb9a625514e674 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Tue, 21 Apr 2026 04:40:14 +0100
Subject: [PATCH 23/23] Add live contract event stream

---
 .../GovernanceAnalyticsDashboard.tsx          |   3 +
 .../dashboard/ContractEventStream.tsx         | 227 +++++++++++++
 frontend/components/dashboard/index.ts        |   1 +
 .../src/lib/contract-event-stream.test.ts     | 148 +++++++++
 frontend/src/lib/contract-event-stream.ts     | 300 ++++++++++++++++++
 5 files changed, 679 insertions(+)
 create mode 100644 frontend/components/dashboard/ContractEventStream.tsx
 create mode 100644 frontend/src/lib/contract-event-stream.test.ts
 create mode 100644 frontend/src/lib/contract-event-stream.ts

diff --git a/frontend/components/GovernanceAnalyticsDashboard.tsx b/frontend/components/GovernanceAnalyticsDashboard.tsx
index 9c624794..239984ee 100644
--- a/frontend/components/GovernanceAnalyticsDashboard.tsx
+++ b/frontend/components/GovernanceAnalyticsDashboard.tsx
@@ -16,6 +16,7 @@ import TreasuryBalanceChart from './charts/TreasuryBalanceChart';
 import VoterParticipationTrendChart from './VoterParticipationTrendChart';
 import { DataRefreshIndicator } from './common/DataRefreshIndicator';
 import { RefreshCw } from 'lucide-react';
+import ContractEventStream from './dashboard/ContractEventStream';
 
 export default function GovernanceAnalyticsDashboard() {
   const {
@@ -64,6 +65,8 @@ export default function GovernanceAnalyticsDashboard() {
 
       <AnalyticsKPIPanel />
 
+      <ContractEventStream />
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         <div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
           <p className="text-white/60 text-sm mb-2">Total Proposals</p>
diff --git a/frontend/components/dashboard/ContractEventStream.tsx b/frontend/components/dashboard/ContractEventStream.tsx
new file mode 100644
index 00000000..76313f6e
--- /dev/null
+++ b/frontend/components/dashboard/ContractEventStream.tsx
@@ -0,0 +1,227 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Activity,
+  Ban,
+  CheckCircle2,
+  ExternalLink,
+  FileText,
+  Filter,
+  Landmark,
+  Loader2,
+  RefreshCw,
+  ShieldCheck,
+  Vote,
+} from 'lucide-react';
+import type { ElementType } from 'react';
+import { fetchContractEventStream, type ContractEventCategory, type ContractEventRecord } from '@/lib/contract-event-stream';
+import { formatTimeAgo } from '@/lib/notification-time';
+import { truncateAddress } from '@/lib/api';
+
+type FilterValue = ContractEventCategory | 'all';
+
+const FILTERS: Array<{ value: FilterValue; label: string }> = [
+  { value: 'all', label: 'All events' },
+  { value: 'stake', label: 'Stake' },
+  { value: 'proposal', label: 'Proposal' },
+  { value: 'vote', label: 'Vote' },
+  { value: 'cancel', label: 'Cancel' },
+  { value: 'execute', label: 'Execute' },
+  { value: 'treasury', label: 'Treasury' },
+];
+
+const EVENT_META: Record<ContractEventCategory, { label: string; icon: ElementType; tone: string }> = {
+  stake: { label: 'Stake', icon: ShieldCheck, tone: 'text-emerald-300' },
+  proposal: { label: 'Proposal', icon: FileText, tone: 'text-sky-300' },
+  vote: { label: 'Vote', icon: Vote, tone: 'text-violet-300' },
+  cancel: { label: 'Cancel', icon: Ban, tone: 'text-rose-300' },
+  execute: { label: 'Execute', icon: CheckCircle2, tone: 'text-orange-300' },
+  treasury: { label: 'Treasury', icon: Landmark, tone: 'text-amber-300' },
+  other: { label: 'Other', icon: Activity, tone: 'text-slate-300' },
+};
+
+const INITIAL_LIMIT = 12;
+const REFRESH_INTERVAL = 20_000;
+
+export default function ContractEventStream() {
+  const [events, setEvents] = useState<ContractEventRecord[]>([]);
+  const [filter, setFilter] = useState<FilterValue>('all');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<number | null>(null);
+
+  const loadEvents = useCallback(async (silent = false) => {
+    if (silent) {
+      setIsRefreshing(true);
+    } else {
+      setIsLoading(true);
+    }
+
+    try {
+      const nextEvents = await fetchContractEventStream({ limit: INITIAL_LIMIT });
+      setEvents(nextEvents);
+      setError(null);
+      setLastUpdated(Date.now());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load contract activity.');
+    } finally {
+      setIsLoading(false);
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadEvents(false);
+    const interval = window.setInterval(() => {
+      void loadEvents(true);
+    }, REFRESH_INTERVAL);
+
+    return () => window.clearInterval(interval);
+  }, [loadEvents]);
+
+  const filteredEvents = useMemo(
+    () => (filter === 'all' ? events : events.filter((event) => event.category === filter)),
+    [events, filter],
+  );
+
+  const eventCountLabel = `${events.length} event${events.length === 1 ? '' : 's'}`;
+  const updatedLabel = lastUpdated ? formatTimeAgo(lastUpdated) : 'waiting for first sync';
+
+  return (
+    <section className="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm">
+      <div className="flex flex-col gap-4 border-b border-white/10 p-6 lg:flex-row lg:items-start lg:justify-between">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.3em] text-emerald-300">
+            <span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
+            Live contract activity
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold text-white">Contract event stream</h2>
+            <p className="mt-1 max-w-2xl text-sm text-white/60">
+              Recent stake, proposal, vote, cancellation, execution, and treasury transactions from the active SprintFund contract.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <div className="rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-xs text-white/60">
+            <div className="font-medium text-white">{eventCountLabel}</div>
+            <div className="mt-1">Updated {updatedLabel}</div>
+          </div>
+          <button
+            type="button"
+            onClick={() => void loadEvents(false)}
+            className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-white/10"
+          >
+            <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 border-b border-white/10 px-6 py-4">
+        <Filter className="h-4 w-4 text-white/50" />
+        <div className="flex flex-wrap gap-2">
+          {FILTERS.map((item) => (
+            <button
+              key={item.value}
+              type="button"
+              onClick={() => setFilter(item.value)}
+              className={`rounded-full px-3 py-1.5 text-xs font-medium transition-colors ${
+                filter === item.value
+                  ? 'bg-orange-500 text-white'
+                  : 'bg-white/5 text-white/70 hover:bg-white/10 hover:text-white'
+              }`}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="p-6">
+        {isLoading ? (
+          <div className="flex items-center gap-3 rounded-xl border border-white/10 bg-black/20 p-5 text-sm text-white/60">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Loading contract activity
+          </div>
+        ) : error && events.length === 0 ? (
+          <div className="rounded-xl border border-red-500/20 bg-red-500/10 p-5 text-sm text-red-200">
+            <p className="font-medium text-white">Unable to load contract activity</p>
+            <p className="mt-1 text-white/70">{error}</p>
+          </div>
+        ) : filteredEvents.length === 0 ? (
+          <div className="rounded-xl border border-white/10 bg-black/20 p-8 text-center">
+            <Activity className="mx-auto h-10 w-10 text-white/20" />
+            <p className="mt-3 text-sm font-medium text-white">No matching events</p>
+            <p className="mt-1 text-sm text-white/50">
+              Try a different filter or wait for the next contract update.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {filteredEvents.map((event) => {
+              const meta = EVENT_META[event.category];
+              const Icon = meta.icon;
+              const statusClasses =
+                event.status === 'confirmed'
+                  ? 'bg-emerald-500/10 text-emerald-200 border-emerald-500/20'
+                  : event.status === 'failed'
+                    ? 'bg-rose-500/10 text-rose-200 border-rose-500/20'
+                    : 'bg-amber-500/10 text-amber-200 border-amber-500/20';
+
+              return (
+                <article
+                  key={event.id}
+                  className="rounded-xl border border-white/10 bg-black/20 p-4 transition-colors hover:border-white/20"
+                >
+                  <div className="flex items-start gap-4">
+                    <div className={`mt-0.5 rounded-xl bg-white/5 p-3 ${meta.tone}`}>
+                      <Icon className="h-5 w-5" />
+                    </div>
+
+                    <div className="min-w-0 flex-1">
+                      <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                        <div className="min-w-0">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <h3 className="text-sm font-semibold text-white">{event.title}</h3>
+                            <span className={`rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.2em] ${statusClasses}`}>
+                              {event.status}
+                            </span>
+                          </div>
+                          <p className="mt-1 text-sm text-white/70">{event.summary}</p>
+                        </div>
+
+                        <a
+                          href={event.explorerUrl}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="inline-flex items-center gap-1 text-xs font-medium text-white/60 transition-colors hover:text-white"
+                        >
+                          View transaction
+                          <ExternalLink className="h-3.5 w-3.5" />
+                        </a>
+                      </div>
+
+                      <div className="mt-4 flex flex-wrap items-center gap-3 text-xs text-white/50">
+                        <span className="font-mono">{truncateAddress(event.senderAddress)}</span>
+                        <span>{formatTimeAgo(event.timestamp)}</span>
+                        <span>{meta.label}</span>
+                        {event.eventCount > 0 && <span>{event.eventCount} on-chain events</span>}
+                        {event.errorMessage && event.status === 'failed' && (
+                          <span className="text-rose-200">{event.errorMessage}</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/components/dashboard/index.ts b/frontend/components/dashboard/index.ts
index fb7b6b62..8e2d69c1 100644
--- a/frontend/components/dashboard/index.ts
+++ b/frontend/components/dashboard/index.ts
@@ -5,6 +5,7 @@ export { default as UserProfile } from './UserProfile';
 export { default as UserInsights } from './UserInsights';
 export { default as UserNetwork } from './UserNetwork';
 export { default as ActivityFeed } from './ActivityFeed';
+export { default as ContractEventStream } from './ContractEventStream';
 export { default as AuditTrail } from './AuditTrail';
 export { PerformanceMetricsPanel } from './PerformanceMetricsPanel';
 export { AnalyticsKPIPanel } from './AnalyticsKPIPanel';
diff --git a/frontend/src/lib/contract-event-stream.test.ts b/frontend/src/lib/contract-event-stream.test.ts
new file mode 100644
index 00000000..6e9c8ec6
--- /dev/null
+++ b/frontend/src/lib/contract-event-stream.test.ts
@@ -0,0 +1,148 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  fetchContractEventStream,
+  normalizeContractTransaction,
+  type ContractTransaction,
+} from './contract-event-stream';
+
+describe('normalizeContractTransaction', () => {
+  const contractPrincipal = 'SP1234567890.contract';
+
+  it('maps a vote transaction into a readable event', () => {
+    const tx: ContractTransaction = {
+      tx_id: '0xabc',
+      tx_type: 'contract_call',
+      tx_status: 'success',
+      sender_address: 'SP3TESTADDRESS1234567890',
+      block_time_iso: '2026-04-21T00:00:00.000Z',
+      event_count: 2,
+      contract_call: {
+        contract_id: contractPrincipal,
+        function_name: 'vote',
+        function_args: [
+          { repr: 'u7', type: 'uint', name: 'proposal-id' },
+          { repr: 'true', type: 'bool', name: 'support' },
+          { repr: 'u5', type: 'uint', name: 'vote-weight' },
+        ],
+      },
+    };
+
+    const event = normalizeContractTransaction(tx, contractPrincipal);
+
+    expect(event).not.toBeNull();
+    expect(event?.category).toBe('vote');
+    expect(event?.title).toBe('Vote recorded');
+    expect(event?.summary).toContain('proposal #7');
+    expect(event?.summary).toContain('weight 5');
+    expect(event?.summary).toContain('yes');
+    expect(event?.status).toBe('confirmed');
+    expect(event?.eventCount).toBe(2);
+  });
+
+  it('returns null for non contract-call transactions', () => {
+    const event = normalizeContractTransaction(
+      {
+        tx_id: '0xdef',
+        tx_type: 'token_transfer',
+        tx_status: 'success',
+        sender_address: 'SP3TEST',
+      },
+      contractPrincipal,
+    );
+
+    expect(event).toBeNull();
+  });
+
+  it('returns null for another contract', () => {
+    const event = normalizeContractTransaction(
+      {
+        tx_id: '0xghi',
+        tx_type: 'contract_call',
+        tx_status: 'success',
+        sender_address: 'SP3TEST',
+        contract_call: {
+          contract_id: 'SP999.other-contract',
+          function_name: 'vote',
+          function_args: [{ repr: 'u1' }],
+        },
+      },
+      contractPrincipal,
+    );
+
+    expect(event).toBeNull();
+  });
+});
+
+describe('fetchContractEventStream', () => {
+  const contractPrincipal = 'SP1234567890.contract';
+  const mockFetch = vi.fn();
+
+  beforeEach(() => {
+    vi.stubGlobal('fetch', mockFetch);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it('fetches and sorts recent contract events', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          results: [
+            {
+              tx_id: '0x2',
+              tx_type: 'contract_call',
+              tx_status: 'success',
+              sender_address: 'SP2',
+              block_time_iso: '2026-04-21T01:00:00.000Z',
+              contract_call: {
+                contract_id: contractPrincipal,
+                function_name: 'execute-proposal',
+                function_args: [{ repr: 'u9' }],
+              },
+            },
+            {
+              tx_id: '0x1',
+              tx_type: 'contract_call',
+              tx_status: 'success',
+              sender_address: 'SP1',
+              block_time_iso: '2026-04-21T00:00:00.000Z',
+              contract_call: {
+                contract_id: contractPrincipal,
+                function_name: 'create-proposal',
+                function_args: [
+                  { repr: 'u50000000' },
+                  { repr: 'u"Community Grant"' },
+                ],
+              },
+            },
+            {
+              tx_id: '0x3',
+              tx_type: 'token_transfer',
+              tx_status: 'success',
+              sender_address: 'SP3',
+            },
+          ],
+        }),
+    });
+
+    const events = await fetchContractEventStream({
+      baseUrl: 'https://api.example.com',
+      contractPrincipal,
+      limit: 12,
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      'https://api.example.com/extended/v1/address/SP1234567890.contract/transactions?limit=12&offset=0',
+    );
+    expect(events).toHaveLength(2);
+    expect(events[0].txId).toBe('0x2');
+    expect(events[0].category).toBe('execute');
+    expect(events[1].txId).toBe('0x1');
+    expect(events[1].summary).toContain('Community Grant');
+  });
+});
+
diff --git a/frontend/src/lib/contract-event-stream.ts b/frontend/src/lib/contract-event-stream.ts
new file mode 100644
index 00000000..87335874
--- /dev/null
+++ b/frontend/src/lib/contract-event-stream.ts
@@ -0,0 +1,300 @@
+import { CONTRACT_PRINCIPAL, API_URL, formatStx } from '@/config';
+import { explorerTxUrl, truncateAddress } from './api';
+import { encodePathSegment } from './sanitize-url';
+
+export type ContractEventCategory =
+  | 'stake'
+  | 'proposal'
+  | 'vote'
+  | 'cancel'
+  | 'execute'
+  | 'treasury'
+  | 'other';
+
+export type ContractEventStatus = 'confirmed' | 'pending' | 'failed';
+
+export interface ContractCallArg {
+  name?: string;
+  type?: string;
+  repr: string;
+}
+
+export interface ContractCallPayload {
+  contract_id: string;
+  function_name: string;
+  function_args?: ContractCallArg[];
+}
+
+export interface ContractTransaction {
+  tx_id: string;
+  tx_type: string;
+  tx_status: string;
+  sender_address: string;
+  block_time?: number;
+  block_time_iso?: string;
+  event_count?: number;
+  tx_result?: {
+    repr?: string;
+  };
+  contract_call?: ContractCallPayload;
+}
+
+export interface ContractEventRecord {
+  id: string;
+  txId: string;
+  category: ContractEventCategory;
+  title: string;
+  summary: string;
+  senderAddress: string;
+  senderLabel: string;
+  timestamp: number;
+  status: ContractEventStatus;
+  functionName: string;
+  eventCount: number;
+  explorerUrl: string;
+  proposalId?: number;
+  amount?: number;
+  weight?: number;
+  support?: boolean;
+  errorMessage?: string;
+}
+
+export interface ContractEventStreamOptions {
+  baseUrl?: string;
+  contractPrincipal?: string;
+  limit?: number;
+  offset?: number;
+}
+
+interface AddressTransactionsResponse {
+  results?: ContractTransaction[];
+}
+
+const EVENT_FUNCTIONS = new Set([
+  'stake',
+  'withdraw-stake',
+  'create-proposal',
+  'vote',
+  'cancel-proposal',
+  'execute-proposal',
+  'deposit-treasury',
+]);
+
+function normalizeClarityRepr(repr: string): string {
+  const stringMatch = repr.match(/^u?"(.*)"$/);
+  if (stringMatch) {
+    return stringMatch[1];
+  }
+
+  if (/^u\d+$/.test(repr)) {
+    return repr.slice(1);
+  }
+
+  return repr;
+}
+
+function parseNumberArg(arg?: ContractCallArg): number | undefined {
+  if (!arg) return undefined;
+
+  const value = Number(normalizeClarityRepr(arg.repr));
+  return Number.isFinite(value) ? value : undefined;
+}
+
+function parseBooleanArg(arg?: ContractCallArg): boolean | undefined {
+  if (!arg) return undefined;
+  if (arg.repr === 'true') return true;
+  if (arg.repr === 'false') return false;
+  return undefined;
+}
+
+function getCategory(functionName: string): ContractEventCategory {
+  switch (functionName) {
+    case 'stake':
+    case 'withdraw-stake':
+      return 'stake';
+    case 'create-proposal':
+      return 'proposal';
+    case 'vote':
+      return 'vote';
+    case 'cancel-proposal':
+      return 'cancel';
+    case 'execute-proposal':
+      return 'execute';
+    case 'deposit-treasury':
+      return 'treasury';
+    default:
+      return 'other';
+  }
+}
+
+function getTimestamp(tx: ContractTransaction): number {
+  if (tx.block_time_iso) {
+    const parsed = Date.parse(tx.block_time_iso);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+  }
+
+  if (typeof tx.block_time === 'number') {
+    return tx.block_time * 1000;
+  }
+
+  return Date.now();
+}
+
+function buildSummary(tx: ContractTransaction): Omit<ContractEventRecord, 'id' | 'txId' | 'senderAddress' | 'senderLabel' | 'timestamp' | 'status' | 'functionName' | 'eventCount' | 'explorerUrl'> {
+  const functionName = tx.contract_call?.function_name ?? 'contract-call';
+  const category = getCategory(functionName);
+  const args = tx.contract_call?.function_args ?? [];
+  const amountArg = parseNumberArg(args[0]);
+  const titleArg = args[1] ? normalizeClarityRepr(args[1].repr) : undefined;
+  const proposalIdArg = parseNumberArg(args[0]);
+  const weightArg = parseNumberArg(args[2]);
+  const supportArg = parseBooleanArg(args[1]);
+  const status = mapStatus(tx.tx_status);
+  const isConfirmed = status === 'confirmed';
+  const errorMessage = tx.tx_result?.repr;
+
+  switch (category) {
+    case 'stake':
+      return {
+        category,
+        title: isConfirmed ? (functionName === 'withdraw-stake' ? 'Stake withdrawn' : 'Stake confirmed') : 'Stake transaction failed',
+        summary: amountArg !== undefined
+          ? `${functionName === 'withdraw-stake' ? 'Withdrew' : 'Staked'} ${formatStx(amountArg)} STX`
+          : `${functionName === 'withdraw-stake' ? 'Stake withdrawal' : 'Stake'} submitted`,
+        amount: amountArg,
+        errorMessage: status === 'failed' ? errorMessage : undefined,
+      };
+    case 'proposal':
+      return {
+        category,
+        title: isConfirmed ? 'Proposal created' : 'Proposal creation failed',
+        summary: amountArg !== undefined
+          ? `Submitted "${titleArg || 'Untitled proposal'}" for ${formatStx(amountArg)} STX`
+          : `Submitted "${titleArg || 'Untitled proposal'}"`,
+        amount: amountArg,
+        errorMessage: status === 'failed' ? errorMessage : undefined,
+      };
+    case 'vote':
+      return {
+        category,
+        title: isConfirmed ? 'Vote recorded' : 'Vote transaction failed',
+        summary: [
+          `Voted ${supportArg === false ? 'no' : 'yes'}`,
+          weightArg !== undefined ? `with weight ${weightArg}` : null,
+          proposalIdArg !== undefined ? `on proposal #${proposalIdArg}` : null,
+        ].filter(Boolean).join(' '),
+        proposalId: proposalIdArg,
+        weight: weightArg,
+        support: supportArg,
+        errorMessage: status === 'failed' ? errorMessage : undefined,
+      };
+    case 'cancel':
+      return {
+        category,
+        title: isConfirmed ? 'Proposal cancelled' : 'Cancellation failed',
+        summary: proposalIdArg !== undefined ? `Cancelled proposal #${proposalIdArg}` : 'Cancelled a proposal',
+        proposalId: proposalIdArg,
+        errorMessage: status === 'failed' ? errorMessage : undefined,
+      };
+    case 'execute':
+      return {
+        category,
+        title: isConfirmed ? 'Proposal executed' : 'Execution failed',
+        summary: proposalIdArg !== undefined ? `Executed proposal #${proposalIdArg}` : 'Executed a proposal',
+        proposalId: proposalIdArg,
+        errorMessage: status === 'failed' ? errorMessage : undefined,
+      };
+    case 'treasury':
+      return {
+        category,
+        title: isConfirmed ? 'Treasury funded' : 'Treasury deposit failed',
+        summary: amountArg !== undefined
+          ? `Deposited ${formatStx(amountArg)} STX into the treasury`
+          : 'Deposited funds into the treasury',
+        amount: amountArg,
+        errorMessage: status === 'failed' ? errorMessage : undefined,
+      };
+    default:
+      return {
+        category: 'other',
+        title: isConfirmed ? 'Contract interaction' : 'Contract interaction failed',
+        summary: functionName.replace(/-/g, ' '),
+        errorMessage: status === 'failed' ? errorMessage : undefined,
+      };
+  }
+}
+
+function mapStatus(txStatus: string): ContractEventStatus {
+  switch (txStatus) {
+    case 'success':
+      return 'confirmed';
+    case 'pending':
+      return 'pending';
+    default:
+      return 'failed';
+  }
+}
+
+export function normalizeContractTransaction(
+  tx: ContractTransaction,
+  contractPrincipal: string = CONTRACT_PRINCIPAL,
+): ContractEventRecord | null {
+  if (tx.tx_type !== 'contract_call') {
+    return null;
+  }
+
+  const contractId = tx.contract_call?.contract_id;
+  const functionName = tx.contract_call?.function_name;
+
+  if (!contractId || !functionName || !EVENT_FUNCTIONS.has(functionName)) {
+    return null;
+  }
+
+  if (contractId !== contractPrincipal) {
+    return null;
+  }
+
+  const status = mapStatus(tx.tx_status);
+  const summary = buildSummary(tx);
+  const timestamp = getTimestamp(tx);
+
+  return {
+    id: tx.tx_id,
+    txId: tx.tx_id,
+    senderAddress: tx.sender_address,
+    senderLabel: truncateAddress(tx.sender_address),
+    timestamp,
+    status,
+    functionName,
+    eventCount: tx.event_count ?? 0,
+    explorerUrl: explorerTxUrl(tx.tx_id),
+    ...summary,
+  };
+}
+
+export async function fetchContractEventStream(
+  options: ContractEventStreamOptions = {},
+): Promise<ContractEventRecord[]> {
+  const baseUrl = options.baseUrl ?? API_URL;
+  const contractPrincipal = options.contractPrincipal ?? CONTRACT_PRINCIPAL;
+  const limit = Math.max(1, options.limit ?? 12);
+  const offset = Math.max(0, options.offset ?? 0);
+
+  const response = await fetch(
+    `${baseUrl}/extended/v1/address/${encodePathSegment(contractPrincipal)}/transactions?limit=${limit}&offset=${offset}`,
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch contract activity: ${response.statusText}`);
+  }
+
+  const data = (await response.json()) as AddressTransactionsResponse;
+  const results = data.results ?? [];
+
+  return results
+    .map((tx) => normalizeContractTransaction(tx, contractPrincipal))
+    .filter((event): event is ContractEventRecord => event !== null)
+    .sort((a, b) => b.timestamp - a.timestamp);
+}