@ozdao/martyrs 0.2.571 → 0.2.572

package/src/modules/governance/reactcode-2/components/VotingsFeedPage.tsx

@@ -0,0 +1,328 @@
+import React, { useState } from 'react';
+import { AreaChart, Area, ResponsiveContainer, YAxis } from 'recharts';
+import { Search, Filter, ArrowUpRight, Zap, Users, Wallet, Clock, CheckCircle2, TrendingUp, Plus, ArrowUp } from 'lucide-react';
+import { MOCK_FEED_PROPOSALS } from '../constants';
+
+interface VotingsFeedPageProps {
+  onNavigate: (page: 'voting' | 'task' | 'feed') => void;
+}
+
+// Improved Stats Card with cleaner design and fixed chart rendering for Light Mode
+const StatsCard = ({ title, value, trend, trendValue, icon: Icon, chartData, colorHex }: any) => (
+  <div className="bg-white border border-zinc-200 rounded-3xl p-6 relative overflow-hidden group hover:border-zinc-300 hover:shadow-md transition-all flex flex-col justify-between h-48 shadow-sm">
+     {/* Background Gradient */}
+     <div className="absolute inset-0 bg-gradient-to-br from-zinc-50 to-transparent pointer-events-none" />
+     <div 
+        className="absolute -right-6 -top-6 w-32 h-32 rounded-full blur-[60px] pointer-events-none opacity-10"
+        style={{ backgroundColor: colorHex }}
+     />
+
+     <div className="relative z-10 flex justify-between items-start">
+        <div className="flex items-center gap-2 text-zinc-500 text-xs fonfw-semibold uppercase tracking-wider">
+            <div className="p-1.5 rounded-md bg-zinc-100 border border-zinc-200">
+                <Icon className="w-3.5 h-3.5 text-zinc-400" />
+            </div>
+            {title}
+        </div>
+        {trend && (
+            <div className="flex items-center gap-1 text-[10px] fonfw-medium bg-emerald-50 text-emerald-600 px-2 py-1 rounded-full border border-emerald-100">
+                <TrendingUp className="w-3 h-3" />
+                {trend}
+            </div>
+        )}
+     </div>
+
+     <div className="relative z-10 mt-2">
+        <div className="text-4xl fonfw-bold text-zinc-900 tracking-tight">{value}</div>
+        <div className="text-sm text-zinc-500 fonfw-medium mt-1">{trendValue}</div>
+     </div>
+
+     {chartData && (
+        <div className="absolute bottom-0 left-0 right-0 h-20 opacity-30 group-hover:opacity-60 transition-opacity">
+            <ResponsiveContainer width="100%" height="100%">
+                <AreaChart data={chartData}>
+                    <defs>
+                        <linearGradient id={`gradient-${title}`} x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="0%" stopColor={colorHex} stopOpacity={0.4}/>
+                            <stop offset="100%" stopColor={colorHex} stopOpacity={0}/>
+                        </linearGradient>
+                    </defs>
+                    <YAxis domain={['dataMin - 5', 'dataMax + 5']} hide />
+                    <Area 
+                        type="monotone" 
+                        dataKey="value" 
+                        stroke={colorHex} 
+                        strokeWidth={2}
+                        fill={`url(#gradient-${title})`} 
+                        isAnimationActive={true}
+                    />
+                </AreaChart>
+            </ResponsiveContainer>
+        </div>
+     )}
+  </div>
+);
+
+const VotingsFeedPage: React.FC<VotingsFeedPageProps> = ({ onNavigate }) => {
+  const [filter, setFilter] = useState<'All' | 'Active' | 'Pending' | 'Closed'>('All');
+
+  // Mock Data for Charts - Smoother curves
+  const activityData = [
+    { value: 10 }, { value: 12 }, { value: 8 }, { value: 15 }, { value: 20 }, { value: 18 }, { value: 24 }
+  ];
+  const participationData = [
+    { value: 60 }, { value: 65 }, { value: 62 }, { value: 68 }, { value: 72 }, { value: 75 }, { value: 78 }
+  ];
+
+  const filteredProposals = filter === 'All' 
+    ? MOCK_FEED_PROPOSALS 
+    : MOCK_FEED_PROPOSALS.filter(p => p.status === filter);
+
+  return (
+    <div className="min-h-screen text-zinc-900 pb-20 font-sans">
+        
+      {/* Navbar */}
+      <nav className="border-b border-zinc-200 bg-white/80 backdrop-blur-xl sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+                 <div className="w-8 h-8 bg-gradient-to-tr from-indigo-500 to-emerald-500 rounded-lg flex items-center justify-center shadow-md shadow-indigo-100">
+                    <Zap className="w-5 h-5 text-white fill-white" />
+                 </div>
+                 <span className="fonfw-bold text-lg tracking-tight text-zinc-900">DAO<span className="text-zinc-500 font-normal">Governance</span></span>
+            </div>
+            <div className="flex items-center gap-4">
+                <div className="hidden md:flex items-center gap-2 text-xs fonfw-medium text-emerald-600 bg-emerald-50 border border-emerald-100 px-3 py-1.5 rounded-full">
+                    <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse" />
+                    Network Stable
+                </div>
+                <div className="w-8 h-8 rounded-full bg-zinc-100 border border-zinc-200 flex items-center justify-center text-xs fonfw-bold ring-2 ring-transparent hover:ring-zinc-200 transition-all cursor-pointer text-zinc-600">
+                    Y
+                </div>
+            </div>
+        </div>
+      </nav>
+
+      <main className="max-w-7xl mx-auto px-6 py-8 space-y-12">
+        
+        {/* STATS SECTION */}
+        <div className="space-y-6">
+            <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+                <div>
+                    <h1 className="text-3xl md:text-4xl fonfw-bold text-zinc-900 mb-2">Governance Pulse</h1>
+                    <p className="text-zinc-500">Overview of ecosystem health and activity.</p>
+                </div>
+                <button className="flex items-center gap-2 px-4 py-2 bg-zinc-900 text-white text-sm fonfw-semibold rounded-full hover:bg-zinc-800 transition-colors shadow-lg shadow-zinc-900/10">
+                    <Plus className="w-4 h-4" /> New Proposal
+                </button>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                {/* 1. Active Proposals */}
+                <StatsCard 
+                    title="Active Proposals" 
+                    value="12" 
+                    trend="+2"
+                    trendValue="vs last epoch"
+                    icon={Zap} 
+                    colorHex="#10b981" 
+                    chartData={activityData}
+                />
+
+                {/* 2. Participation */}
+                <StatsCard 
+                    title="Voter Turnout" 
+                    value="78%" 
+                    trend="+5%"
+                    trendValue="Participation rate"
+                    icon={Users} 
+                    colorHex="#6366f1" 
+                    chartData={participationData}
+                />
+
+                {/* 3. Treasury (Custom Layout) */}
+                <div className="bg-white border border-zinc-200 rounded-3xl p-6 relative overflow-hidden group hover:border-zinc-300 hover:shadow-md transition-all flex flex-col justify-between h-48 shadow-sm">
+                    <div className="flex items-center justify-between mb-4 relative z-10">
+                         <div className="flex items-center gap-2 text-zinc-500 text-xs fonfw-semibold uppercase tracking-wider">
+                            <div className="p-1.5 rounded-md bg-zinc-100 border border-zinc-200">
+                                <Wallet className="w-3.5 h-3.5 text-zinc-400" />
+                            </div>
+                            Treasury
+                        </div>
+                        <div className="text-xs font-mono text-zinc-400">Q1 2025</div>
+                    </div>
+                    
+                    <div className="relative z-10">
+                        <div className="flex items-baseline gap-1">
+                             <span className="text-3xl fonfw-bold text-zinc-900 tracking-tight">$845.2k</span>
+                        </div>
+                        <p className="text-xs text-zinc-500 mt-1">Total assets value</p>
+                    </div>
+
+                    <div className="space-y-2 mt-4 relative z-10">
+                        <div className="flex justify-between text-[10px] uppercase fonfw-medium tracking-wider">
+                            <span className="text-zinc-400">Allocated</span>
+                            <span className="text-zinc-900">65%</span>
+                        </div>
+                        <div className="w-full bg-zinc-100 h-2 rounded-full overflow-hidden flex">
+                            <div className="h-full bg-amber-400 w-[65%] rounded-l-full" />
+                            <div className="h-full bg-zinc-200 w-[35%]" />
+                        </div>
+                    </div>
+                </div>
+
+                {/* 4. Action / Info */}
+                <div className="bg-gradient-to-br from-indigo-500 to-violet-600 rounded-3xl p-6 relative overflow-hidden group h-48 flex flex-col justify-between shadow-xl shadow-indigo-200">
+                    <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
+                        <ArrowUpRight className="w-32 h-32 text-white rotate-12" />
+                    </div>
+                    
+                    <div className="relative z-10">
+                        <div className="p-2 bg-white/20 w-fit rounded-xl mb-4 backdrop-blur-md border border-white/20">
+                            <ArrowUp className="w-5 h-5 text-white" />
+                        </div>
+                        <h3 className="text-lg fonfw-bold text-white leading-tight">Delegate your votes</h3>
+                        <p className="text-indigo-100 text-xs mt-2 max-w-[150px]">
+                            Boost governance efficiency by delegating to active stewards.
+                        </p>
+                    </div>
+                    
+                    <button className="relative z-10 w-full py-2 bg-white/20 hover:bg-white/30 border border-white/20 rounded-lg text-xs fonfw-semibold text-white backdrop-blur-sm transition-all text-center">
+                        Find a Delegate
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        {/* FEED SECTION */}
+        <div className="space-y-6">
+            
+            {/* Filter Bar */}
+            <div className="sticky top-20 z-40 bg-white/90 backdrop-blur-xl border border-zinc-200 rounded-2xl p-2 flex flex-col md:flex-row items-center justify-between gap-4 shadow-lg shadow-zinc-200/50">
+                <div className="flex items-center gap-1 bg-zinc-100/50 p-1 rounded-xl w-full md:w-auto overflow-x-auto no-scrollbar border border-zinc-100">
+                    {(['All', 'Active', 'Pending', 'Closed'] as const).map((s) => (
+                        <button
+                            key={s}
+                            onClick={() => setFilter(s)}
+                            className={`px-4 py-2 rounded-lg text-xs fonfw-medium transition-all whitespace-nowrap uppercase tracking-wide ${
+                                filter === s 
+                                ? 'bg-white text-zinc-900 shadow-sm border border-zinc-100' 
+                                : 'text-zinc-500 hover:text-zinc-900 hover:bg-white/50'
+                            }`}
+                        >
+                            {s}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="relative w-full md:w-64 group">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400 group-focus-within:text-zinc-600 transition-colors" />
+                    <input 
+                        type="text" 
+                        placeholder="Search proposals..." 
+                        className="w-full bg-zinc-50 border border-zinc-200 text-sm text-zinc-900 rounded-xl py-2.5 pl-9 pr-4 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 transition-all placeholder:text-zinc-400"
+                    />
+                </div>
+            </div>
+
+            {/* List */}
+            <div className="grid gap-4">
+                {filteredProposals.map((proposal) => (
+                    <div 
+                        key={proposal.id}
+                        onClick={() => onNavigate('voting')}
+                        className="group bg-white border border-zinc-200 hover:border-indigo-500/30 rounded-3xl p-6 transition-all hover:bg-zinc-50/50 hover:shadow-md cursor-pointer relative overflow-hidden"
+                    >
+                        {/* Hover Gradient */}
+                        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-indigo-50/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+
+                        <div className="flex flex-col md:flex-row gap-6 relative z-10">
+                            {/* Status Indicator */}
+                            <div className="flex-shrink-0">
+                                <div className={`w-12 h-12 rounded-2xl flex items-center justify-center border ${
+                                    proposal.status === 'Active' 
+                                    ? 'bg-emerald-50 border-emerald-100 text-emerald-500' 
+                                    : proposal.status === 'Pending'
+                                    ? 'bg-amber-50 border-amber-100 text-amber-500'
+                                    : 'bg-zinc-100 border-zinc-200 text-zinc-400'
+                                }`}>
+                                    {proposal.status === 'Active' && <Zap className="w-6 h-6" />}
+                                    {proposal.status === 'Pending' && <Clock className="w-6 h-6" />}
+                                    {proposal.status === 'Closed' && <CheckCircle2 className="w-6 h-6" />}
+                                </div>
+                            </div>
+
+                            {/* Content */}
+                            <div className="flex-grow space-y-3">
+                                <div className="flex flex-wrap items-center gap-3">
+                                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] fonfw-bold uppercase tracking-wider border ${
+                                        proposal.status === 'Active' ? 'bg-emerald-50 text-emerald-600 border-emerald-200' : 
+                                        proposal.status === 'Pending' ? 'bg-amber-50 text-amber-600 border-amber-200' :
+                                        'bg-zinc-100 text-zinc-500 border-zinc-200'
+                                    }`}>
+                                        {proposal.status}
+                                    </span>
+                                    <span className="text-xs text-zinc-400 font-mono">#{proposal.id}</span>
+                                    <span className="text-xs text-zinc-500 flex items-center gap-1">
+                                        <span className="w-1 h-1 rounded-full bg-zinc-300" />
+                                        {proposal.category}
+                                    </span>
+                                </div>
+
+                                <h3 className="text-xl fonfw-bold text-zinc-900 group-hover:text-indigo-600 transition-colors">
+                                    {proposal.title}
+                                </h3>
+                                <p className="text-zinc-500 text-sm line-clamp-2 max-w-2xl">
+                                    {proposal.description}
+                                </p>
+                            </div>
+
+                            {/* Stats/Action */}
+                            <div className="flex-shrink-0 md:w-48 flex flex-col justify-center border-t md:border-t-0 md:border-l border-zinc-100 pt-4 md:pt-0 md:pl-6">
+                                {proposal.status === 'Pending' ? (
+                                    <div className="text-center">
+                                        <span className="text-xs text-zinc-400 uppercase tracking-wider block mb-1">Starts In</span>
+                                        <span className="text-lg font-mono text-zinc-900">24h 12m</span>
+                                    </div>
+                                ) : (
+                                    <div className="space-y-3">
+                                        <div>
+                                            <div className="flex justify-between text-xs mb-1.5">
+                                                <span className="text-zinc-500">Approval</span>
+                                                <span className={`font-mono fonfw-medium ${proposal.stats.currentApproval >= proposal.stats.thresholdRequired ? 'text-emerald-600' : 'text-zinc-600'}`}>
+                                                    {proposal.stats.currentApproval.toFixed(0)}%
+                                                </span>
+                                            </div>
+                                            <div className="h-1.5 w-full bg-zinc-100 rounded-full overflow-hidden border border-zinc-100">
+                                                <div 
+                                                    className={`h-full rounded-full ${proposal.stats.currentApproval >= proposal.stats.thresholdRequired ? 'bg-emerald-500' : 'bg-zinc-400'}`} 
+                                                    style={{ width: `${proposal.stats.currentApproval}%` }}
+                                                />
+                                            </div>
+                                        </div>
+                                        <div className="flex items-center justify-between text-xs text-zinc-400">
+                                            <span className="flex items-center gap-1"><Users className="w-3 h-3" /> {proposal.stats.totalVotes}</span>
+                                            <span>{proposal.status === 'Active' ? 'Ends in 2d' : 'Ended'}</span>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+
+                {filteredProposals.length === 0 && (
+                    <div className="text-center py-20 bg-white border border-dashed border-zinc-200 rounded-3xl">
+                        <Filter className="w-8 h-8 text-zinc-300 mx-auto mb-3" />
+                        <h3 className="text-zinc-900 fonfw-medium">No proposals found</h3>
+                        <p className="text-zinc-500 text-sm mt-1">Try adjusting your filters.</p>
+                    </div>
+                )}
+            </div>
+        </div>
+
+      </main>
+    </div>
+  );
+};
+
+export default VotingsFeedPage;

package/src/modules/governance/reactcode-2/constants.ts

@@ -0,0 +1,154 @@
+import { Proposal, VoteType, Voter } from './types';
+
+export const CURRENT_USER: Voter = {
+  id: 'me',
+  name: 'You',
+  avatar: 'Y' // Fallback
+};
+
+const BASE_PROPOSAL: Omit<Proposal, 'status' | 'stats' | 'votes' | 'created' | 'ends'> = {
+  id: 'prop-123',
+  category: 'General',
+  subCategory: 'Proposed',
+  title: 'Approve new design system guidelines',
+  description: 'Vote to approve the updated design system guidelines including new color palette and typography standards.',
+  relatedItem: {
+    type: 'Task',
+    title: 'Implement toast notifications',
+    status: 'Proposed',
+  },
+};
+
+const BASE_VOTES = [
+  {
+    id: 'v1',
+    voter: { id: 'u1', name: 'Alice Johnson' },
+    type: VoteType.YES,
+    timestamp: 'Feb 15, 06:00 PM',
+    comment: 'Great improvements to accessibility!',
+  },
+  {
+    id: 'v2',
+    voter: { id: 'u2', name: 'Bob Smith' },
+    type: VoteType.YES,
+    timestamp: 'Feb 15, 07:00 PM',
+    comment: 'Love the new color scheme.',
+  },
+  {
+    id: 'v3',
+    voter: { id: 'u3', name: 'Carol White' },
+    type: VoteType.NO,
+    timestamp: 'Feb 16, 04:00 PM',
+    comment: 'Need more contrast in some areas.',
+  },
+  {
+    id: 'v4',
+    voter: { id: 'u4', name: 'David Brown' },
+    type: VoteType.YES,
+    timestamp: 'Feb 16, 09:00 PM',
+  },
+  {
+    id: 'v5',
+    voter: { id: 'u5', name: 'Eva Green' },
+    type: VoteType.ABSTAIN,
+    timestamp: 'Feb 17, 05:00 PM',
+    comment: 'Not enough information to decide.',
+  },
+];
+
+export const getMockProposal = (status: 'Active' | 'Closed' | 'Pending'): Proposal => {
+  const now = new Date();
+  const createdDate = new Date(now);
+  const endsDate = new Date(now);
+  
+  let votes = [...BASE_VOTES];
+  let stats = {
+    totalVotes: 15,
+    thresholdRequired: 60,
+    currentApproval: 80,
+    votesYes: 12,
+    votesNo: 2,
+    votesAbstain: 1,
+  };
+
+  if (status === 'Pending') {
+    createdDate.setDate(now.getDate() + 1); // Starts tomorrow
+    endsDate.setDate(now.getDate() + 5);
+    votes = [];
+    stats = {
+        totalVotes: 0,
+        thresholdRequired: 60,
+        currentApproval: 0,
+        votesYes: 0,
+        votesNo: 0,
+        votesAbstain: 0
+    };
+  } else if (status === 'Active') {
+    createdDate.setDate(now.getDate() - 2);
+    endsDate.setDate(now.getDate() + 3); // Ends in 3 days
+    // Keep base votes
+  } else {
+    // Closed
+    createdDate.setDate(now.getDate() - 5);
+    endsDate.setDate(now.getDate() - 1); // Ended yesterday
+  }
+
+  return {
+    ...BASE_PROPOSAL,
+    status,
+    created: createdDate.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }),
+    ends: endsDate.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }),
+    stats,
+    votes,
+  };
+};
+
+export const MOCK_PROPOSAL = getMockProposal('Closed');
+
+export const MOCK_FEED_PROPOSALS: Proposal[] = [
+  {
+    ...getMockProposal('Active'),
+    id: 'prop-124',
+    title: 'Platform Redesign Initiative Funding',
+    description: 'Requesting allocation of 50,000 USDC from the community treasury to fund the Q2 Platform Redesign Initiative.',
+    category: 'Treasury',
+    subCategory: 'Funding',
+    stats: { totalVotes: 156, thresholdRequired: 50, currentApproval: 92, votesYes: 144, votesNo: 8, votesAbstain: 4 },
+  },
+  {
+    ...getMockProposal('Active'),
+    id: 'prop-125',
+    title: 'Onboard "CyberPunk" as Core Contributor',
+    description: 'Voting to onboard a new core contributor for the backend infrastructure team.',
+    category: 'Governance',
+    subCategory: 'People',
+    stats: { totalVotes: 42, thresholdRequired: 66, currentApproval: 45, votesYes: 19, votesNo: 20, votesAbstain: 3 },
+  },
+  {
+    ...getMockProposal('Pending'),
+    id: 'prop-126',
+    title: 'Update Community Code of Conduct',
+    description: 'Proposed amendments to the CoC regarding AI-generated content in public forums.',
+    category: 'Governance',
+    subCategory: 'Policy',
+    stats: { totalVotes: 0, thresholdRequired: 60, currentApproval: 0, votesYes: 0, votesNo: 0, votesAbstain: 0 },
+  },
+  {
+    ...getMockProposal('Closed'),
+    id: 'prop-120',
+    title: 'Q1 Marketing Budget Approval',
+    description: 'Retrospective approval of Q1 marketing spend.',
+    category: 'Treasury',
+    subCategory: 'Budget',
+    stats: { totalVotes: 89, thresholdRequired: 50, currentApproval: 100, votesYes: 89, votesNo: 0, votesAbstain: 0 },
+  },
+  {
+    ...getMockProposal('Closed'),
+    id: 'prop-118',
+    title: 'Partnership with DeFi Protocol X',
+    description: 'Strategic partnership proposal involving token swap.',
+    category: 'Strategy',
+    subCategory: 'Partnership',
+    stats: { totalVotes: 230, thresholdRequired: 75, currentApproval: 30, votesYes: 69, votesNo: 150, votesAbstain: 11 },
+  },
+];

package/src/modules/governance/reactcode-2/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DAO Voting</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              background: '#fafafa', // zinc-50
+              surface: '#ffffff', // white
+              surfaceHighlight: '#f4f4f5', // zinc-100
+              primary: '#18181b', // zinc-900
+              secondary: '#71717a', // zinc-500
+              accent: '#3b82f6', // blue-500
+              success: '#10b981', // emerald-500
+              danger: '#f43f5e', // rose-500
+              warning: '#f59e0b', // amber-500
+            },
+            fontFamily: {
+              sans: ['Inter', 'sans-serif'],
+              mono: ['JetBrains Mono', 'monospace'],
+            },
+          },
+        },
+      };
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Inter', sans-serif;
+        background-color: #fafafa;
+        color: #18181b;
+      }
+      /* Custom scrollbar for a cleaner look */
+      ::-webkit-scrollbar {
+        width: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: #fafafa;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #e4e4e7;
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #d4d4d8;
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
+    "recharts": "https://aistudiocdn.com/recharts@^3.5.0"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

package/src/modules/governance/reactcode-2/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/modules/governance/reactcode-2/metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "DAO Voting Interface 2025",
+  "description": "A minimalistic, futuristic voting interface for DAO governance featuring real-time results visualization and vote history.",
+  "requestFramePermissions": []
+}

package/src/modules/governance/reactcode-2/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "dao-voting-interface-2025",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "lucide-react": "^0.555.0",
+    "recharts": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}