I'll help you create a React frontend for this ElectionSystem smart contract. Here's the complete setup: import React, { useState, useEffect } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { ethers } from 'ethers'; import ElectionSystemContract from './contracts/ElectionSystem.json'; import Home from './pages/Home'; import CreateElection from './pages/CreateElection'; import ElectionDetails from './pages/ElectionDetails'; import Navbar from './components/Navbar'; import './App.css'; function App() { const [contract, setContract] = useState(null); const [account, setAccount] = useState(null); const [isOwner, setIsOwner] = useState(false); useEffect(() => { const init = async () => { if (window.ethereum) { try { const provider = new ethers.BrowserProvider(window.ethereum); const signer = await provider.getSigner(); const address = await signer.getAddress(); const contractAddress = 'YOUR_CONTRACT_ADDRESS'; // Replace with your deployed contract address const electionContract = new ethers.Contract( contractAddress, ElectionSystemContract.abi, signer ); const owner = await electionContract.owner(); setIsOwner(owner.toLowerCase() === address.toLowerCase()); setContract(electionContract); setAccount(address); window.ethereum.on('accountsChanged', (accounts) => { setAccount(accounts[0]); }); } catch (error) { console.error('Error initializing contract:', error); } } }; init(); }, []); return (

} /> } /> } />

); } export default App; import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { ElectionType, State } from '../utils/enums'; import './Home.css'; const Home = ({ contract, isOwner }) => { const [elections, setElections] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { const fetchElections = async () => { if (!contract) return; try { const nextId = await contract.nextElectionId(); const electionPromises = []; for (let i = 0; i < nextId; i++) { electionPromises.push(contract.elections(i)); } const electionData = await Promise.all(electionPromises); const formattedElections = electionData.map((election, index) => ({ id: index, title: election.title, description: election.description, state: State[election.state], electionType: ElectionType[election.electionType], scheduledStart: new Date(Number(election.scheduledStart) * 1000).toLocaleString(), scheduledEnd: new Date(Number(election.scheduledEnd) * 1000).toLocaleString(), })); setElections(formattedElections); setLoading(false); } catch (error) { console.error('Error fetching elections:', error); setLoading(false); } }; fetchElections(); }, [contract]); if (loading) return

Loading elections...

; return (

Elections

{isOwner && ( Create New Election )}

{elections.length === 0 ? (

No elections found

) : ( elections.map((election) => (

{election.title}

{election.description}

{election.state} {election.electionType}

Starts: {election.scheduledStart}

Ends: {election.scheduledEnd}

View Details

)) )}

); }; export default Home; import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { ElectionType } from '../utils/enums'; import './CreateElection.css'; const CreateElection = ({ contract }) => { const [formData, setFormData] = useState({ title: '', description: '', durationSeconds: 3600, electionType: ElectionType.SINGLE_POSITION, scheduledStart: '', categories: [], }); const [newCategory, setNewCategory] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const navigate = useNavigate(); const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value, }); }; const handleAddCategory = () => { if (newCategory.trim() && !formData.categories.includes(newCategory.trim())) { setFormData({ ...formData, categories: [...formData.categories, newCategory.trim()], }); setNewCategory(''); } }; const handleRemoveCategory = (category) => { setFormData({ ...formData, categories: formData.categories.filter((c) => c !== category), }); }; const handleSubmit = async (e) => { e.preventDefault(); setIsSubmitting(true); try { const scheduledStartTimestamp = Math.floor(new Date(formData.scheduledStart).getTime() / 1000); const tx = await contract.createElection( formData.title, formData.description, formData.durationSeconds, formData.electionType, formData.categories, scheduledStartTimestamp ); await tx.wait(); navigate('/'); } catch (error) { console.error('Error creating election:', error); setIsSubmitting(false); } }; return (

Create New Election

Title

Description

</div>

<div className="form-group">
          <label>Duration (seconds)</label>
          <input
            type="number"
            name="durationSeconds"
            min="300"
            max="604800"
            value={formData.durationSeconds}
            onChange={handleChange}
            required
          />
        </div>

<div className="form-group">
          <label>Start Date & Time</label>
          <input
            type="datetime-local"
            name="scheduledStart"
            value={formData.scheduledStart}
            onChange={handleChange}
            required
          />
        </div>

<div className="form-group">
          <label>Election Type</label>
          <select
            name="electionType"
            value={formData.electionType}
            onChange={handleChange}
          >
            <option value={ElectionType.SINGLE_POSITION}>Single Position</option>
            <option value={ElectionType.MULTI_POSITION}>Multi Position</option>
          </select>
        </div>

{formData.electionType === ElectionType.MULTI_POSITION && (
          <div className="form-group">
            <label>Categories</label>
            <div className="category-input">
              <input
                type="text"
                value={newCategory}
                onChange={(e) => setNewCategory(e.target.value)}
                placeholder="Add category"
              />
              <button type="button" onClick={handleAddCategory}>
                Add
              </button>
            </div>
            <div className="category-list">
              {formData.categories.map((category) => (
                <div key={category} className="category-tag">
                  {category}
                  <button
                    type="button"
                    onClick={() => handleRemoveCategory(category)}
                  >
                    ×
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

<button type="submit" disabled={isSubmitting}>
          {isSubmitting ? 'Creating...' : 'Create Election'}
        </button>
      </form>
    </div>
  );
};

export default CreateElection;
  </jitFile>

<jitFile type="file" filePath="src/pages/ElectionDetails.jsx">
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { ElectionType, State } from '../utils/enums';
import './ElectionDetails.css';

const ElectionDetails = ({ contract, account }) => {
  const { id } = useParams();
  const [election, setElection] = useState(null);
  const [candidates, setCandidates] = useState([]);
  const [loading, setLoading] = useState(true);
  const [hasVoted, setHasVoted] = useState(false);
  const [selectedCandidate, setSelectedCandidate] = useState(null);
  const [isOwner, setIsOwner] = useState(false);

useEffect(() => {
    const fetchData = async () => {
      if (!contract || !id) return;

try {
        const electionData = await contract.elections(id);
        const owner = await contract.owner();
        
        setIsOwner(owner.toLowerCase() === account.toLowerCase());

const formattedElection = {
          id: id,
          title: electionData.title,
          description: electionData.description,
          state: State[electionData.state],
          electionType: ElectionType[electionData.electionType],
          scheduledStart: new Date(Number(electionData.scheduledStart) * 1000).toLocaleString(),
          scheduledEnd: new Date(Number(electionData.scheduledEnd) * 1000).toLocaleString(),
          actualStart: electionData.actualStart > 0 
            ? new Date(Number(electionData.actualStart) * 1000).toLocaleString() 
            : 'Not started',
          actualEnd: electionData.actualEnd > 0 
            ? new Date(Number(electionData.actualEnd) * 1000).toLocaleString() 
            : 'Not ended',
          categories: electionData.categories,
          hasCandidates: electionData.hasCandidates,
        };

setElection(formattedElection);

const candidateIds = await contract.electionCandidates(id);
        const candidatePromises = candidateIds.map(id => contract.candidates(id));
        const candidateData = await Promise.all(candidatePromises);

const formattedCandidates = candidateData.map((candidate, index) => ({
          id: candidateIds[index],
          name: candidate.name,
          description: candidate.description,
          category: candidate.category,
          voteCount: Number(candidate.voteCount),
        }));

setCandidates(formattedCandidates);

if (account) {
          const voted = await contract.voters(id, account);
          setHasVoted(voted);
        }

setLoading(false);
      } catch (error) {
        console.error('Error fetching election details:', error);
        setLoading(false);
      }
    };

fetchData();
  }, [contract, id, account]);

const handleVote = async () => {
    if (!selectedCandidate) return;

try {
      const tx = await contract.vote(id, selectedCandidate);
      await tx.wait();
      setHasVoted(true);
      
      // Refresh candidate data
      const candidateIds = await contract.electionCandidates(id);
      const candidatePromises = candidateIds.map(id => contract.candidates(id));
      const candidateData = await Promise.all(candidatePromises);

const formattedCandidates = candidateData.map((candidate, index) => ({
        id: candidateIds[index],
        name: candidate.name,
        description: candidate.description,
        category: candidate.category,
        voteCount: Number(candidate.voteCount),
      }));

setCandidates(formattedCandidates);
    } catch (error) {
      console.error('Error voting:', error);
    }
  };

const handleStateChange = async (action) => {
    try {
      let tx;
      switch (action) {
        case 'schedule':
          tx = await contract.scheduleElection(id);
          break;
        case 'cancel':
          tx = await contract.cancelElection(id);
          break;
        case 'finalize':
          tx = await contract.finalizeElection(id);
          break;
        case 'check':
          tx = await contract.checkStateTransition(id);
          break;
        default:
          return;
      }

await tx.wait();
      window.location.reload();
    } catch (error) {
      console.error(`Error performing ${action}:`, error);
    }
  };

if (loading) return <div className="loading">Loading election details...</div>;
  if (!election) return <div className="error">Election not found</div>;

return (
    <div className="election-details">
      <div className="election-header">
        <h1>{election.title}</h1>
        <div className={`status ${election.state.toLowerCase()}`}>{election.state}</div>
      </div>

<div className="election-info">
        <p>{election.description}</p>
        <div className="election-meta">
          <div>
            <strong>Type:</strong> {election.electionType}
          </div>
          <div>
            <strong>Scheduled Start:</strong> {election.scheduledStart}
          </div>
          <div>
            <strong>Scheduled End:</strong> {election.scheduledEnd}
          </div>
          {election.state !== 'DRAFT' && (
            <>
              <div>
                <strong>Actual Start:</strong> {election.actualStart}
              </div>
              <div>
                <strong>Actual End:</strong> {election.actualEnd}
              </div>
            </>
          )}
        </div>
      </div>

{isOwner && (
        <div className="admin-actions">
          {election.state === 'DRAFT' && (
            <button onClick={() => handleStateChange('schedule')} disabled={!election.hasCandidates}>
              Schedule Election
            </button>
          )}
          {['DRAFT', 'SCHEDULED'].includes(election.state) && (
            <button onClick={() => handleStateChange('cancel')}>
              Cancel Election
            </button>
          )}
          {election.state === 'CLOSED' && (
            <button onClick={() => handleStateChange('finalize')}>
              Finalize Election
            </button>
          )}
          {['SCHEDULED', 'ACTIVE'].includes(election.state) && (
            <button onClick={() => handleStateChange('check')}>
              Check State Transition
            </button>
          )}
        </div>
      )}

<div className="candidates-section">
        <h2>Candidates</h2>
        
        {election.electionType === 'MULTI_POSITION' ? (
          election.categories.map((category) => (
            <div key={category} className="category-group">
              <h3>{category}</h3>
              <div className="candidates-list">
                {candidates
                  .filter((c) => c.category === category)
                  .map((candidate) => (
                    <div key={candidate.id} className="candidate-card">
                      <h4>{candidate.name}</h4>
                      <p>{candidate.description}</p>
                      <div className="vote-info">
                        <span>Votes: {candidate.voteCount}</span>
                        {election.state === 'ACTIVE' && !hasVoted && account && (
                          <button
                            onClick={() => setSelectedCandidate(candidate.id)}
                            className={selectedCandidate === candidate.id ? 'selected' : ''}
                          >
                            {selectedCandidate === candidate.id ? 'Selected' : 'Vote'}
                          </button>
                        )}
                      </div>
                    </div>
                  ))}
              </div>
            </div>
          ))
        ) : (
          <div className="candidates-list">
            {candidates.map((candidate) => (
              <div key={candidate.id} className="candidate-card">
                <h4>{candidate.name}</h4>
                <p>{candidate.description}</p>
                <div className="vote-info">
                  <span>Votes: {candidate.voteCount}</span>
                  {election.state === 'ACTIVE' && !hasVoted && account && (
                    <button
                      onClick={() => setSelectedCandidate(candidate.id)}
                      className={selectedCandidate === candidate.id ? 'selected' : ''}
                    >
                      {selectedCandidate === candidate.id ? 'Selected' : 'Vote'}
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}

{election.state === 'ACTIVE' && !hasVoted && account && selectedCandidate && (
          <div className="vote-confirmation">
            <button onClick={handleVote}>Confirm Vote</button>
          </div>
        )}

{hasVoted && <div className="voted-message">You have already voted in this election.</div>}
      </div>
    </div>
  );
};

export default ElectionDetails;
  </jitFile>

<jitFile type="file" filePath="src/components/Navbar.jsx">
import React from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';

const Navbar = ({ account, isOwner }) => {
  const shortenedAddress = account 
    ? `${account.substring(0, 6)}...${account.substring(account.length - 4)}`
    : 'Not connected';

return (
    <nav className="navbar">
      <div className="navbar-brand">
        <Link to="/">Election System</Link>
      </div>
      <div className="navbar-links">
        <Link to="/">Home</Link>
        {isOwner && <Link to="/create">Create Election</Link>}
      </div>
      <div className="navbar-account">
        <span>{shortenedAddress}</span>
      </div>
    </nav>
  );
};

export default Navbar;
  </jitFile>

<jitFile type="file" filePath="src/utils/enums.js">
export const ElectionType = {
  SINGLE_POSITION: 0,
  MULTI_POSITION: 1,
};

export const State = {
  DRAFT: 0,
  SCHEDULED: 1,
  ACTIVE: 2,
  CLOSED: 3,
  FINALIZED: 4,
  CANCELLED: 5,
};
  </jitFile>

<jitFile type="file" filePath="src/contracts/ElectionSystem.json">
// Paste your compiled contract ABI and bytecode here
// This should be the output from `solc` or Hardhat compilation
  </jitFile>

<jitFile type="file" filePath="src/App.css">
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --danger-color: #e74c3c;
  --dark-color: #2c3e50;
  --light-color: #ecf0f1;
  --gray-color: #95a5a6;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f7fa;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  flex: 1;
}

.loading {
  text-align: center;
  padding: 20px;
  font-size: 1.2rem;
  color: var(--gray-color);
}

.error {
  text-align: center;
  padding: 20px;
  font-size: 1.2rem;
  color: var(--danger-color);
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}

button:disabled {
  background-color: var(--gray-color);
  cursor: not-allowed;
}

button.danger {
  background-color: var(--danger-color);
}

button.danger:hover {
  background-color: #c0392b;
}

button.success {
  background-color: var(--secondary-color);
}

button.success:hover {
  background-color: #27ae60;
}

input, textarea, select {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.status {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
}

.status.draft {
  background-color: #f39c12;
  color: white;
}

.status.scheduled {
  background-color: #3498db;
  color: white;
}

.status.active {
  background-color: #2ecc71;
  color: white;
}

.status.closed {
  background-color: #9b59b6;
  color: white;
}

.status.finalized {
  background-color: #1abc9c;
  color: white;
}

.status.cancelled {
  background-color: #e74c3c;
  color: white;
}
  </jitFile>

<jitFile type="file" filePath="src/components/Navbar.css">
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--dark-color);
  color: white;
}

.navbar-brand a {
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}

.navbar-links {
  display: flex;
  gap: 20px;
}

.navbar-links a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  transition: opacity 0.3s;
}

.navbar-links a:hover {
  opacity: 0.8;
}

.navbar-account {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
}
  </jitFile>

<jitFile type="file" filePath="src/pages/Home.css">
.home {
  padding: 20px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.create-button {
  background-color: var(--secondary-color);
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.create-button:hover {
  background-color: #27ae60;
}

.election-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.election-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.election-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.election-card h3 {
  margin-bottom: 10px;
  color: var(--dark-color);
}

.election-card p {
  margin-bottom: 15px;
  color: #666;
}

.election-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.election-dates {
  margin-bottom: 15px;
}

.election-dates p {
  margin: 5px 0;
  font-size: 0.9rem;
  color: #666;
}

.view-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

.view-button:hover {
  background-color: #2980b9;
}
  </jitFile>

<jitFile type="file" filePath="src/pages/CreateElection.css">
.create-election {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.create-election h1 {
  margin-bottom: 20px;
  color: var(--dark-color);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: var(--dark-color);
}

.category-input {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.category-input input {
  flex: 1;
  margin-bottom: 0;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-tag {
  background-color: var(--light-color);
  padding: 5px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.category-tag button {
  background: none;
  border: none;
  color: var(--danger-color);
  padding: 0;
  font-size: 1rem;
  cursor: pointer;
}

button[type="submit"] {
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  margin-top: 20px;
}
  </jitFile>

<jitFile type="file" filePath="src/pages/ElectionDetails.css">
.election-details {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.election-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.election-header h1 {
  color: var(--dark-color);
}

.election-info {
  margin-bottom: 30px;
}

.election-info p {
  margin-bottom: 15px;
}

.election-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.election-meta div {
  background-color: var(--light-color);
  padding: 10px;
  border-radius: 4px;
}

.admin-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.candidates-section {
  margin-top: 30px;
}

.candidates-section h2 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.category-group {
  margin-bottom: 30px;
}

.category-group h3 {
  margin-bottom: 15px;
  color: var(--dark-color);
}

.candidates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.candidate-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.candidate-card h4 {
  margin-bottom: 10px;
  color: var(--dark-color);
}

.candidate-card p {
  margin-bottom: 15px;
  color: #666;
  font-size: 0.9rem;
}

.vote-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vote-info button {
  padding: 5px 10px;
  font-size: 0.9rem;
}

.vote-info button.selected {
  background-color: var(--secondary-color);
}

.vote-confirmation {
  margin-top: 20px;
  text-align: center;
}

.vote-confirmation button {
  padding: 10px 20px;
  font-size: 1.1rem;
}

.voted-message {
  margin-top: 20px;
  padding: 10px;
  background-color: var(--light-color);
  text-align: center;
  border-radius: 4px;
  color: var(--secondary-color);
  font-weight: bold;
}
  </jitFile>

<jitFile type="file" filePath="src/index.jsx">
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
  </jitFile>

<jitFile type="file" filePath="src/index.css">
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
  </jitFile>
</jitProject></article></body></html>