Add voting contract and ui.

README.md

@@ -3,14 +3,16 @@ List of projects based on Etherdata Blockchain
 
 ![logo](./images/learn-blockchain.png)
 
-- [x] [Simple File Upload](https://demos.file-upload.debugchain.net) (or https://demos-eta.vercel.app/) (source: [here](https://github.com/etherdata-blockchain/demos/tree/main/examples/file-upload/)
+- [x] [Simple File Upload](https://demos.file-upload.debugchain.net) (or https://demos-eta.vercel.app/) (source: [here](https://github.com/etherdata-blockchain/demos/tree/main/examples/file-upload/))
 
 - [x] [Faucet](https://faucet.debugchain.net/) (source: [here](https://github.com/etherdata-blockchain/demos/tree/main/examples/faucet/)) 
 
 - [x] [Transaction](https://demos.transaction.debugchain.net/) (source: [here](https://github.com/etherdata-blockchain/demos/tree/main/examples/transaction))
 
 - [x] [File Storage](https://demos.personal-storage.debugchain.net/)(source: [here](./examples/personal_storage/) and smart contract: [here](https://github.com/etherdata-blockchain/demos/tree/main/packages/file_storage_contract/))
 
+- [x] [New!] Voting System --- need to set the environment and deploy the contract first in [VotingDapp](packages//VotingDapp/) and set the environment in [Voting_System](examples//Voting_System/). See them in the corresponding folder's README file.
+
 
 Install dependencies
 
@@ -31,6 +33,8 @@ Start dev server
 yarn dev
 ```
 
+
+
 ## Project structure
 
 ```
@@ -39,9 +43,11 @@ examples/
 ├─ file-upload/
 ├─ personal_storage/
 ├─ transaction/
+├─ Voting_System/
 packages/
 ├─ ui/
 ├─ file_storage_contract/
+├─ VotingDapp/
 
 ```
 

examples/Voting_System/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/Voting_System/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+files/*
+!/files/readme.md
+artifacts
+cache

examples/Voting_System/README.md

@@ -0,0 +1,29 @@
+# Voting System Demo Using Etherdata Blockchain
+
+This package use [VotingDapp](../../packages//VotingDapp/) to support voting on the blockchain.
+
+## Set up
+Create a `.env` file with following fields
+
+```
+RPC_URL=
+NEXT_PUBLIC_FILE_URL=
+NEXT_PUBLIC_CONTRACT_ADDRESS=
+```
+
+## Quick run the demo
+Install dependencies
+```
+yarn
+```
+
+Start dev server
+
+```
+yarn dev
+```
+
+## Supported Functions
+1. Initialize candidates on the blockchain
+2. Iteract with the front-end to obtain total number of candidtes and their details
+3. Vote for a specific candidate using the Etherdata blockchain

examples/Voting_System/configs/config.ts

@@ -0,0 +1,4 @@
+export const Config = {
+  defaultNumberPerPage: 10,
+  defaultStoredDuration: 60,
+};

examples/Voting_System/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+    globals: {
+      "ts-jest": {
+        tsconfig: "tsconfig.json",
+      },
+    },
+    testPathIgnorePatterns: [
+      "<rootDir>/.next/",
+      "<rootDir>/node_modules/",
+      "<rootDir>/dist",
+      "<rootDir>/tests/contracts/",
+    ],
+    moduleNameMapper: {
+      "\\.(scss|sass|css)$": "identity-obj-proxy",
+    },
+    transform: { "\\.ts$": ["ts-jest"], "\\.tsx$": ["ts-jest"] },
+    testTimeout: 20000,
+    testEnvironment: "jsdom",
+    transformIgnorePatterns: ["/node_modules/"],
+  };

examples/Voting_System/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/Voting_System/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const withTM = require("next-transpile-modules")(["ui", "file-storage-contract", "votingdapp"]);
+
+module.exports = withTM({
+  reactStrictMode: true,
+});

examples/Voting_System/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "votingsystem",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3004",
+    "build": "next build",
+    "start": "next start --port 3004",
+    "lint": "next lint",
+    "test": "jest --passWithNoTests"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@etherdata-blockchain/etherdata-sdk": "^5.1.0",
+    "@etherdata-blockchain/etherdata-sdk-file-browser": "5.1.1",
+    "moment": "2.29.3",
+    "@mui/icons-material": "^5.6.1",
+    "@mui/lab": "^5.0.0-alpha.77",
+    "@mui/material": "^5.6.1",
+    "@openzeppelin/contracts": "^4.5.0",
+    "@types/formidable": "^2.0.4",
+    "axios": "^0.26.1",
+    "ethers": "^5.6.4",
+    "formidable": "v3",
+    "metamask-react": "^2.3.0",
+    "next": "12.1.5",
+    "next-transpile-modules": "9.0.0",
+    "query-string": "^7.1.1",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "ts-jest": "^27.1.4",
+    "jest": "27.5.1",
+    "ui": "*",
+    "file-storage-contract": "*",
+    "swr": "1.3.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.4.1",
+    "@types/node": "17.0.23",
+    "@types/react": "18.0.3",
+    "@types/react-dom": "18.0.0",
+    "eslint": "8.13.0",
+    "eslint-config-next": "12.1.5",
+    "typescript": "4.6.3"
+  }
+}

examples/Voting_System/pages/_app.tsx

@@ -0,0 +1,13 @@
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { MetaMaskProvider } from "metamask-react";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <MetaMaskProvider>
+      <Component {...pageProps} />
+    </MetaMaskProvider>
+  );
+}
+
+export default MyApp;

examples/Voting_System/pages/index.tsx

@@ -0,0 +1,47 @@
+import { useContext, useEffect, useState } from "react";
+import { Stack } from "@mui/material";
+import { useMetaMask } from "metamask-react";
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { AppTitle } from "ui";
+import { ArrowCircleRight, ArrowRight } from "@mui/icons-material";
+import qs from "query-string";
+
+const Home: NextPage = () => {
+  const [showIndex, setShowIndex] = useState<number | undefined>(undefined);
+  const { status, connect, account, chainId, ethereum } = useMetaMask();
+  const [value, setValue] = useState("");
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (status === "connected") {
+      setValue(account);
+    }
+  }, [status, account]);
+
+  return (
+    <Stack alignItems={"center"}>
+      <AppTitle
+        title={"Voting System Demo"}
+        descriptions={[
+          "This is a demo of a voting system, you can use this system to vote for listed candidates.",
+        ]}
+        isLoading={false}
+        walletAddress={value}
+        isConnectingMetaMask={status === "connecting"}
+        isConnected={status === "connected"}
+        actionIcon={<ArrowCircleRight fontSize="large" />}
+        actionText={"Next Page"}
+        onClickAction={async () => {
+          await router.push("/upload");
+        }}
+        onConnectMetaMaskClick={async () => await connect()}
+        onTextEnter={(v) => setValue(v)}
+        metamaskOnly={true}
+      />
+    </Stack>
+  );
+};
+
+export default Home;

examples/Voting_System/pages/upload.tsx

@@ -0,0 +1,102 @@
+import { Provider } from "@ethersproject/abstract-provider";
+import { Clear, Done } from "@mui/icons-material";
+import { LoadingButton } from "@mui/lab";
+import {
+  Button,
+  Card,
+  CardContent,
+  Collapse,
+  Stack,
+  styled,
+  Typography,
+} from "@mui/material";
+import moment from "moment";
+import { GetServerSideProps } from "next";
+import { useRouter } from "next/router";
+import React from "react";
+import { useVoting } from "ui";
+import { Config } from "../configs/config";
+
+interface Props {
+  page: number;
+}
+
+const Input = styled("input")({
+  display: "none",
+});
+
+const width = "80vw";
+
+export default function Voting({ page }: Props) {
+
+  const { proposals, name1, name2, name3, name4, name5, vote1, vote2, vote3, vote4, vote5, error, provider } = useVoting({ });
+
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() =>
+      initProposals(), 300);
+    return () => clearTimeout(timeout);
+    async function initProposals() {
+      provider?.addProposal("Harry");
+      provider?.addProposal("Jones");
+      provider?.addProposal("Lily");
+      provider?.addProposal("William");
+      provider?.addProposal("Alice");
+    }
+    initProposals();
+  }, []);
+
+
+  /**/
+  //initProposals();
+  const [value, setValue] = React.useState<any>("");
+  const router = useRouter();
+
+	const [newCandidateID, setNewCandidateID] = React.useState();
+	const [voteForCandidateID, setVoteForCandidateID] = React.useState('');
+
+  const handleVoteForCandidateID = (e) => {
+		setNewCandidateID(e.target.value);
+	};
+
+
+	return (
+		<div style={{ padding: '3rem 5rem' }}>
+			<h1>Voting System</h1>
+			<div>
+				<h4>Candidate Number: {proposals}</h4>
+        <h5>Candidate [1]: {name1}; total votes is: {vote1}</h5>
+        <h5>Candidate [2]: {name2}; total votes is: {vote2}</h5>
+        <h5>Candidate [3]: {name3}; total votes is: {vote3}</h5>
+        <h5>Candidate [4]: {name4}; total votes is: {vote4}</h5>
+        <h5>Candidate [5]: {name5}; total votes is: {vote5}</h5>
+			</div>
+
+			<div>
+				<h4>Give Votes to a candidate (Fill in her/his ID)</h4>
+				<div
+					style={{
+						width: '15em',
+						display: 'flex',
+						justifyContent: 'space-between',
+					}}>
+					<input type="text" value={value} onChange={(e)=>setValue(e.target.value)} />
+					<button onClick={async () => {
+                        await provider?.voteForProposal(value);
+                      }}>Vote For</button>
+				</div>
+			</div>
+		</div>
+
+	);
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
+  const page = parseInt((ctx.query.page as string) || "1");
+
+  return {
+    props: {
+      page,
+    },
+  };
+};