Feature/add explorer navbar

anonymousVoting/clientAnonymousVoting/src/App.js

@@ -1,4 +1,5 @@
 import Navbar from './components/Navbar';
+import Explorer from "./components/Explorer";
 import { BrowserRouter as Router, Route, Routes,Navigate } from 'react-router-dom'
 import 'bootstrap/dist/css/bootstrap.css';
 
@@ -31,6 +32,7 @@ function App() {
     // }else{
       ret = 
       <Routes>
+        <Route path="/explorer" element={<Explorer />} />
         <Route path="/" element={<Navigate to="/auth" />} />
         <Route path="/auth" element={<Register/>} />
         <Route path="/voting/:id" element={<VotingPage/>} />

anonymousVoting/clientAnonymousVoting/src/components/ConnectWallet.js

@@ -124,4 +124,4 @@ const ConnectWallet = () => {
     );
 }
 
-export default ConnectWallet;
+export default ConnectWallet;

anonymousVoting/clientAnonymousVoting/src/components/CreateProcessPage.js

@@ -5,8 +5,8 @@ import styles from './CreateProcessPage.module.css';
 import {ethers} from 'ethers';
 
 //web3 imports
-import { deployVotingProcess, deployTestContract, getTestContract } from '../web3/contracts'
-import { useState, useEffect, useRef } from 'react';
+import { deployVotingProcess} from '../web3/contracts'
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 
@@ -27,35 +27,51 @@ const CreateProcess = () => {
     const [open, setOpen] = useState(false);
     const [transactionResult, setTransactionResult] = useState(null);
 
-    const refValue = useRef(false);
+    // const refValue = useRef(false);
 
-    const createProcess = async (e) => {
-        e.preventDefault();
-        console.log("name: ", name);
-        //format proposals
-        let proposalArray = formatProposals(proposals);
-        //check form inputs
-        if(!isFormValid()){
-            window.alert("Form is not valid");
-            return;
-        }
+   const createProcess = async (e) => {
+    e.preventDefault();
+
+    if (!isFormValid()) {
+        window.alert("Form is not valid");
+        return;
+    }
+
+    try {
         setPending(true);
-        refValue.current = true;
-        //deploy new process contract
-        const result = await deployVotingProcess(name, description, proposalArray,1000000,1000000);
+
+        const proposalArray = formatProposals(proposals);
+        const result = await deployVotingProcess(
+            name,
+            description,
+            proposalArray,
+            1000000,
+            1000000
+        );
+
         setTransactionResult(result);
+        setShow(true);
 
-        refValue.current = false;
+    } catch (err) {
+        console.error(err);
+        window.alert("Transaction failed");
+    } finally {
         setPending(false);
-
-        setShow(true);
     }
+};
+
+const isFormValid = () => {
+    // Split proposals by comma, trim each item, and filter out empty strings
+    const validProposals = proposals
+        .split(',')
+        .map(p => p.trim())
+        .filter(p => p.length > 0);
+
+    // Must have at least 2 valid proposals
+    return validProposals.length >= 2;
+};
+
 
-    const isFormValid = () => {
-        if(proposals < 2)
-            return false;
-        return true;
-    }
 
     const formatProposals = (input) => {
         let proposals = input.split(',');
@@ -67,9 +83,6 @@ const CreateProcess = () => {
     }
 
 
-    useEffect(() => {
-        // setPending(!pending);
-    }, [pending])
 
     return (  
         <div >
@@ -105,11 +118,27 @@ const CreateProcess = () => {
                     />
                 </div>
                 <div>
-                    <button className="baseButton">Create new process</button>
+                    <button
+  className="baseButton"
+  type="submit"
+  disabled={pending}
+>
+  {pending ? (
+    <>
+      <Spinner
+        animation="border"
+        size="sm"
+        style={{ marginRight: "8px" }}
+      />
+      Creating...
+    </>
+  ) : (
+    "Create new process"
+  )}
+</button>
+
                 </div>
-                {refValue.current == true && <div style={{marginTop: "2em"}}>
-                    <Spinner animation="border" />
-                </div>}
+
             </form>
             <Modal show={show} onHide={handleClose}>
                 <Modal.Header closeButton>
@@ -148,4 +177,4 @@ const CreateProcess = () => {
     );
 }
 
-export default CreateProcess;
+export default CreateProcess;

anonymousVoting/clientAnonymousVoting/src/components/Explorer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Explorer() {
+  return (
+    <div style={{ padding: "20px" }}>
+      <h2>Explorer</h2>
+      <p>Blockchain explorer coming soon.</p>
+    </div>
+  );
+}
+
+export default Explorer;

anonymousVoting/clientAnonymousVoting/src/components/Navbar.js

@@ -13,9 +13,30 @@ function Navbar({header, infoText, pictureUrl}) {
             </div>
 
             <div className="navbarMenuOption">
-                <img src="/assets/settings.png" className="navbarMenuIcon navbarMenuLeft" alt="settings"/>
-                <Link to="/"><img src="/assets/logout.png" className="navbarMenuIcon" alt="logout"/></Link>
-            </div>
+    <img
+        src="/assets/settings.png"
+        className="navbarMenuIcon navbarMenuLeft"
+        alt="settings"
+    />
+
+    <Link to="/explorer">
+        <img
+            src="/assets/explorer.png"
+            className="navbarMenuIcon"
+            alt="explorer"
+        />
+    </Link>
+
+    <Link to="/">
+<img
+    src="/assets/logout.png"
+    className="navbarMenuIcon"
+    alt="logout"
+    onClick={handleLogout}
+    style={{ cursor: "pointer" }}
+/>
+    </Link>
+</div>
         </nav>
 	)
 }

anonymousVoting/clientAnonymousVoting/src/components/modals/AddCandidateModal.js

@@ -2,52 +2,61 @@ import { useState } from 'react';
 import { Flex, Modal, Button, Card } from "rimble-ui";
 import { ethers } from "ethers";
 import ElectionOrganiser from "../../build/ElectionOrganizer.json";
-import {successtoast, dangertoast } from '../utilities/Toasts';
+import { successtoast, dangertoast } from '../utilities/Toasts';
 import { toast } from "react-toastify";
-import {addProposal} from '../../web3/contracts';
+import { addProposal } from '../../web3/contracts';
 
 export function AddCandidateModal({ electionId }) {
     const [isOpen, setIsOpen] = useState(false);
+
     const [candidateDetail, setCandidateDetail] = useState({
         name: '',
         description: ''
     });
 
+    //  ADDED: terms acceptance state
+    const [acceptedTerms, setAcceptedTerms] = useState(false);
 
     const handleCandidateDetailChange = (e) => {
         const { name, value } = e.target;
         setCandidateDetail({
             ...candidateDetail,
             [name]: value
         });
-    }
-
+    };
 
     const handleSubmitCandidate = async (e) => {
-        let id ;
+        let id;
         e.preventDefault();
+
+        // ✅ ADDED: enforce terms acceptance
+        if (!acceptedTerms) {
+            toast.error("You must accept the Terms & Conditions");
+            return;
+        }
+
         try {
-
-
-            let tx = await addProposal(electionId,ethers.utils.toUtf8Bytes(candidateDetail.name.trim()));
-
-              await tx.wait();
-              console.log(tx);
-              
-            //   successtoast(id, "Candidate Added Successfully")
-              
-
-
-          } catch(err) {
-            dangertoast(id ,"Candidate Addition Failed")
+            let tx = await addProposal(
+                electionId,
+                ethers.utils.toUtf8Bytes(candidateDetail.name.trim())
+            );
+
+            await tx.wait();
+            console.log(tx);
+
+            // successtoast(id, "Candidate Added Successfully")
+            setIsOpen(false);
+            setAcceptedTerms(false);
+        } catch (err) {
+            dangertoast(id, "Candidate Addition Failed");
             console.log(err);
-          }
-
-    }
+        }
+    };
 
     const closeModal = e => {
         e.preventDefault();
         setIsOpen(false);
+        setAcceptedTerms(false); // ✅ reset
     };
 
     const openModal = e => {
@@ -57,14 +66,14 @@ export function AddCandidateModal({ electionId }) {
 
     return (
         <div>
-            <div onClick={openModal} style={{cursor: "pointer"}}>
-                <font size = '2'>Add Candidate</font>
+            <div onClick={openModal} style={{ cursor: "pointer" }}>
+                <font size='2'>Add Candidate</font>
             </div>
-            
+
             <Modal isOpen={isOpen}>
-                <Card width={"90%"} height={"max-content"} p={0} style={{maxWidth: "500px"}}>
+                <Card width={"90%"} height={"max-content"} p={0} style={{ maxWidth: "500px" }}>
                     <Button.Text
-                        style={{margin: "0px"}}
+                        style={{ margin: "0px" }}
                         icononly
                         icon={"Close"}
                         color={"moon-gray"}
@@ -76,49 +85,64 @@ export function AddCandidateModal({ electionId }) {
                         onClick={closeModal}
                     />
 
-                    <div style={{margin: "10px", maxWidth: "700px", width: "90%"}}>
+                    <div style={{ margin: "10px", maxWidth: "700px", width: "90%" }}>
                         <h5>Add candidates</h5>
-
-                        <br/>
+                        <br />
 
                         <div>
                             <b>Canidate Name</b>
-                            <br/>
-                            
-                            <input 
-                                className="form-control" 
+                            <br />
+
+                            <input
+                                className="form-control"
                                 placeholder="Name of the candidate"
                                 name="name"
                                 value={candidateDetail.name}
                                 onChange={handleCandidateDetailChange}
-                                style={{marginTop: "15px"}}
+                                style={{ marginTop: "15px" }}
                             />
                             <br /><br />
 
                             <b>Canidate Description</b>
-                            <br/>
-                            
+                            <br />
+
                             <textarea
-                                className="form-control" 
+                                className="form-control"
                                 placeholder="Name of the candidate"
                                 name="description"
                                 rows={6}
                                 value={candidateDetail.description}
                                 onChange={handleCandidateDetailChange}
-                                style={{marginTop: "15px"}}
-                            /> 
-                            
+                                style={{ marginTop: "15px" }}
+                            />
+
                             <br /><br />
+
+                            {/*  ADDED: Terms & Conditions checkbox */}
+                            <div>
+                                <label style={{ cursor: "pointer" }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={acceptedTerms}
+                                        onChange={(e) => setAcceptedTerms(e.target.checked)}
+                                        style={{ marginRight: "8px" }}
+                                    />
+                                    I accept the Terms & Conditions
+                                </label>
+                            </div>
                         </div>
                     </div>
-
-                    <Flex
-                        px={4}
-                        py={3}
-                        justifyContent={"flex-end"}
-                    >
+
+                    <Flex px={4} py={3} justifyContent={"flex-end"}>
                         <Button.Outline onClick={closeModal}>Cancel</Button.Outline>
-                        <Button ml={3} type="submit" onClick={handleSubmitCandidate}>Confirm</Button>
+                        <Button
+                            ml={3}
+                            type="submit"
+                            onClick={handleSubmitCandidate}
+                            disabled={!acceptedTerms} // ✅ ADDED
+                        >
+                            Confirm
+                        </Button>
                     </Flex>
                 </Card>
             </Modal>