diff --git a/p2p/7.Voting-system/README.md b/p2p/7.Voting-system/README.md new file mode 100644 index 00000000..ca5e6a35 --- /dev/null +++ b/p2p/7.Voting-system/README.md @@ -0,0 +1,142 @@ +# Workshop 6 - Voting System + +✔️ Write a decentralized voting system + +✔️ Deploy your smart contract on a local testnet using [Anvil](https://book.getfoundry.sh/anvil/) shipped with [Foundry](https://book.getfoundry.sh/) + +✔️ Display your smart contract on a dApp + +## Introduction + +A smart contract is a self-executing program that runs on a blockchain, automatically enforcing the terms of an agreement when predefined conditions are met. With smart contracts, it's possible to build decentralized systems, such as a transparent and secure voting system, where the rules are coded into the contract, and the results are immutable and verifiable by everyone. + +In this workshop we'll learn the basics of solidity with a classic use case: a voting system. At once, we'll use Foundry coupled with Anvil to deploy our contract on a local testnet and gradually integrate it on a front-end template. + +## Step 0: Initialization + +All the required information to install the workshop's dependencies are given in the [setup.md](./setup.md). To launch the dApp : + +- Clone the "dApp" folder, afterward: + +```bash +cd dApp +npm install +npm run dev +``` + +If everything went well, you should read "No proposals yet.", now let's code ! + +## Step 1 : Create the contract + +### 📑 **Description**: + +First, we need to create the core smart contract that will power our decentralized voting system. For now, you're just going to focus on the base of the smart contract: the constructor. + +### 📌 **Tasks**: + +Remove the files from `script/`, `src/` and `test` directories. Create `VotingSystem.sol` in the `src/` folder. + +- Setup the file by adding this header + ```solidity + // SPDX-License-Identifier: UNLICENSED + pragma solidity ^0.8.26; + ``` + +- Create a contract named `VotingSystem` +- Declare a structure named `Proposal` +>💡 The structure should have 2 variables, `name` and `voSteCount`. I let you guess their types. + +- On deployment, the contract should take an array of strings as parameters and store them in a `public` array of `Proposals`. +>💡 A constructor is an optional function that is executed upon contract deployment, you must create one to complete the previous task. + +### ✔️ **Validation**: + +After implementing this correctly, paste the `VotingSystem.t.sol` file from the `util/` folder from the repository and write: + +```bash +forge test +``` + +if the two tests are good, you can move on the second step ! + +### 📚 **Documentation**: + +- [Header](https://docs.soliditylang.org/en/latest/layout-of-source-files.html) +- [Constructors](https://docs.soliditylang.org/en/v0.8.27/contracts.html#constructors) + +## Step 2: Deploy and integrate it + +### 📑 **Description**: + +In this step you'll focus on the deployment and the integration part of your smart contract. For quick and easy deployment, you'll use [Anvil](https://book.getfoundry.sh/anvil/) to create a local testnet. + +### 📌 **Tasks**: + +- Using Anvil and forge, deploy your smart contract on a local testnet. +>💡 On a successful deployment, contract address appear next to the `deployed to` field. + +- Paste the address of your deployed contract into the environment file at the root of the dApp folder named `VITE_ADDRESS`. + +### ✔️ **Validation**: + +Once you have done this, you should now be able to see the parameters you entered when deploying the contract in the dApp. + +### 📚 **Documentation**: + +- [Anvil](https://book.getfoundry.sh/anvil/) +- [Deploy a Smart Contract local on Anvil with Foundry in 2 min](https://youtu.be/e5QmJaamdPE) + +## Step 4: Code the contract + +### 📑 **Description**: + +Crucial step! I'll leave you to code the rest of the contract yourself, so you can see the results bit by bit. Feel free to redeploy your contract whenever you like with forge! + +### 📌 **Tasks**: + +- Create a structure `Voter` containing a boolean named `voted` and an uint `id`. +- Code the `vote` function. It should take the id of the proposal in parameter. + - Check if the voter had already voted and if the id is correct. + - Add a `voteCount` for the proposal. + +> 💡 These functions require a wallet address. If you've did the previous step correctly, you have account available to use. Put one of the private keys in the `.env` file. + +- Code the `winningProposal` function, returning the proposal with the most `voteCount`. + +### ✔️ **Validation**: + +If you can see all the proposals, vote for one and the winner is highlighted in green, congratulations, you have just made your first smart contract ! + +## To go further + +You've just created a simple voting system smart contract ! If you want to go further you can add some feature to your contract and styling the dApp ! + +## Authors + +| [
Sacha Dujardin](https://github.com/Sacharbon) | +| :------------------------------------------------------------------------------------------------------------------------: | +

+Organization +

+ +

+ + + + + + + + + + + + +

+

+ + + +

+ +> 🚀 Don't hesitate to follow us on our different networks, and put a star 🌟 on `PoC's` repositories. diff --git a/p2p/7.Voting-system/dApp/.env b/p2p/7.Voting-system/dApp/.env new file mode 100644 index 00000000..e3ab26fc --- /dev/null +++ b/p2p/7.Voting-system/dApp/.env @@ -0,0 +1,2 @@ +VITE_ADDRESS="" +VITE_PRIVATE_KEY_ACCOUNT="" diff --git a/p2p/7.Voting-system/dApp/.eslintrc.cjs b/p2p/7.Voting-system/dApp/.eslintrc.cjs new file mode 100644 index 00000000..6f40582d --- /dev/null +++ b/p2p/7.Voting-system/dApp/.eslintrc.cjs @@ -0,0 +1,15 @@ +/* eslint-env node */ +require('@rushstack/eslint-patch/modern-module-resolution') + +module.exports = { + root: true, + 'extends': [ + 'plugin:vue/vue3-essential', + 'eslint:recommended', + '@vue/eslint-config-typescript', + '@vue/eslint-config-prettier/skip-formatting' + ], + parserOptions: { + ecmaVersion: 'latest' + } +} diff --git a/p2p/7.Voting-system/dApp/.gitignore b/p2p/7.Voting-system/dApp/.gitignore new file mode 100644 index 00000000..8ee54e8d --- /dev/null +++ b/p2p/7.Voting-system/dApp/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.tsbuildinfo diff --git a/p2p/7.Voting-system/dApp/.prettierrc.json b/p2p/7.Voting-system/dApp/.prettierrc.json new file mode 100644 index 00000000..66e23359 --- /dev/null +++ b/p2p/7.Voting-system/dApp/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "$schema": "https://json.schemastore.org/prettierrc", + "semi": false, + "tabWidth": 2, + "singleQuote": true, + "printWidth": 100, + "trailingComma": "none" +} \ No newline at end of file diff --git a/p2p/7.Voting-system/dApp/env.d.ts b/p2p/7.Voting-system/dApp/env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/p2p/7.Voting-system/dApp/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/p2p/7.Voting-system/dApp/index.html b/p2p/7.Voting-system/dApp/index.html new file mode 100644 index 00000000..a8885448 --- /dev/null +++ b/p2p/7.Voting-system/dApp/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/p2p/7.Voting-system/dApp/package.json b/p2p/7.Voting-system/dApp/package.json new file mode 100644 index 00000000..f166bff8 --- /dev/null +++ b/p2p/7.Voting-system/dApp/package.json @@ -0,0 +1,35 @@ +{ + "name": "front", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "build-only": "vite build", + "type-check": "vue-tsc --build --force", + "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", + "format": "prettier --write src/" + }, + "dependencies": { + "viem": "^2.20.0", + "vue": "^3.4.29" + }, + "devDependencies": { + "@rushstack/eslint-patch": "^1.8.0", + "@tsconfig/node20": "^20.1.4", + "@types/node": "^20.14.5", + "@vitejs/plugin-vue": "^5.0.5", + "@vue/eslint-config-prettier": "^9.0.0", + "@vue/eslint-config-typescript": "^13.0.0", + "@vue/tsconfig": "^0.5.1", + "eslint": "^8.57.0", + "eslint-plugin-vue": "^9.23.0", + "npm-run-all2": "^6.2.0", + "prettier": "^3.2.5", + "typescript": "~5.4.0", + "vite": "^5.3.1", + "vue-tsc": "^2.0.21" + } +} diff --git a/p2p/7.Voting-system/dApp/public/favicon.ico b/p2p/7.Voting-system/dApp/public/favicon.ico new file mode 100644 index 00000000..df36fcfb Binary files /dev/null and b/p2p/7.Voting-system/dApp/public/favicon.ico differ diff --git a/p2p/7.Voting-system/dApp/src/App.vue b/p2p/7.Voting-system/dApp/src/App.vue new file mode 100644 index 00000000..7db9b891 --- /dev/null +++ b/p2p/7.Voting-system/dApp/src/App.vue @@ -0,0 +1,114 @@ + + + + + diff --git a/p2p/7.Voting-system/dApp/src/abi.ts b/p2p/7.Voting-system/dApp/src/abi.ts new file mode 100644 index 00000000..74db4a2e --- /dev/null +++ b/p2p/7.Voting-system/dApp/src/abi.ts @@ -0,0 +1 @@ +export const abi = [{"inputs":[{"internalType":"string[]","name":"proposalName","type":"string[]"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[],"name":"chairperson","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"proposals","outputs":[{"internalType":"string","name":"name","type":"string"},{"internalType":"uint256","name":"voteCount","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"proposalId","type":"uint256"}],"name":"vote","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"","type":"address"}],"name":"voters","outputs":[{"internalType":"bool","name":"hasVoted","type":"bool"},{"internalType":"uint256","name":"votedProposalId","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"winningProposal","outputs":[{"internalType":"uint256","name":"winningProposalId","type":"uint256"}],"stateMutability":"view","type":"function"}] diff --git a/p2p/7.Voting-system/dApp/src/assets/base.css b/p2p/7.Voting-system/dApp/src/assets/base.css new file mode 100644 index 00000000..8816868a --- /dev/null +++ b/p2p/7.Voting-system/dApp/src/assets/base.css @@ -0,0 +1,86 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: + color 0.5s, + background-color 0.5s; + line-height: 1.6; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/p2p/7.Voting-system/dApp/src/assets/main.css b/p2p/7.Voting-system/dApp/src/assets/main.css new file mode 100644 index 00000000..a1e1556c --- /dev/null +++ b/p2p/7.Voting-system/dApp/src/assets/main.css @@ -0,0 +1 @@ +@import './base.css'; \ No newline at end of file diff --git a/p2p/7.Voting-system/dApp/src/components/Card.vue b/p2p/7.Voting-system/dApp/src/components/Card.vue new file mode 100644 index 00000000..364ad334 --- /dev/null +++ b/p2p/7.Voting-system/dApp/src/components/Card.vue @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git a/p2p/7.Voting-system/dApp/src/interact.ts b/p2p/7.Voting-system/dApp/src/interact.ts new file mode 100644 index 00000000..f32e7de4 --- /dev/null +++ b/p2p/7.Voting-system/dApp/src/interact.ts @@ -0,0 +1,79 @@ +import {createPublicClient, createWalletClient, http} from 'viem' +import { localhost } from 'viem/chains' +import { abi } from "./abi" +import {privateKeyToAccount} from "viem/accounts"; + +let address = null +let account = null + +if (import.meta.env.VITE_ADDRESS) { + address = import.meta.env.VITE_ADDRESS +} + +if (import.meta.env.VITE_PRIVATE_KEY_ACCOUNT) { + account = privateKeyToAccount(import.meta.env.VITE_PRIVATE_KEY_ACCOUNT) +} + +const chain = { + ...localhost, + id: 31337 +} + +const publicClient = createPublicClient({ + chain, + transport: http() +}) + +const client = createWalletClient({ + chain, + transport: http() +}) + +export async function win() { + try { + const result = await publicClient.readContract({ + address, + abi, + functionName: "winningProposal", + }) + return Number(result) + } catch (error) { + return null + } +} + +async function retrieveProposal(id: number) { + return await publicClient.readContract({ + address, + abi, + functionName: 'proposals', + args: [id] + }) +} + +export async function getProposals() { + const proposals = []; + let proposalCount = 0; + + while (true) { + try { + const proposal = await retrieveProposal(proposalCount) + proposals.push(proposal) + proposalCount++ + } catch (error) { + break; + } + } + return proposals; +} + +export async function vote(id: number) { + const { request } = await publicClient.simulateContract({ + account, + address, + abi, + functionName: 'vote', + args: [id] + }) as { request: any } + await client.writeContract(request) +} diff --git a/p2p/7.Voting-system/dApp/src/main.ts b/p2p/7.Voting-system/dApp/src/main.ts new file mode 100644 index 00000000..98c094e0 --- /dev/null +++ b/p2p/7.Voting-system/dApp/src/main.ts @@ -0,0 +1,7 @@ +import './assets/main.css' + +import { createApp } from 'vue' +// @ts-ignore +import App from './App.vue' + +createApp(App).mount('#app') diff --git a/p2p/7.Voting-system/dApp/tsconfig.app.json b/p2p/7.Voting-system/dApp/tsconfig.app.json new file mode 100644 index 00000000..e14c754d --- /dev/null +++ b/p2p/7.Voting-system/dApp/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/p2p/7.Voting-system/dApp/tsconfig.json b/p2p/7.Voting-system/dApp/tsconfig.json new file mode 100644 index 00000000..66b5e570 --- /dev/null +++ b/p2p/7.Voting-system/dApp/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/p2p/7.Voting-system/dApp/tsconfig.node.json b/p2p/7.Voting-system/dApp/tsconfig.node.json new file mode 100644 index 00000000..f0940630 --- /dev/null +++ b/p2p/7.Voting-system/dApp/tsconfig.node.json @@ -0,0 +1,19 @@ +{ + "extends": "@tsconfig/node20/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "composite": true, + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/p2p/7.Voting-system/dApp/vite.config.ts b/p2p/7.Voting-system/dApp/vite.config.ts new file mode 100644 index 00000000..5c45e1d9 --- /dev/null +++ b/p2p/7.Voting-system/dApp/vite.config.ts @@ -0,0 +1,16 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/p2p/7.Voting-system/setup.md b/p2p/7.Voting-system/setup.md new file mode 100644 index 00000000..6ce7eacb --- /dev/null +++ b/p2p/7.Voting-system/setup.md @@ -0,0 +1,82 @@ +# Setup - Foundry, VSCode extension & Node + +[Foundry](https://book.getfoundry.sh/) is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust. We will need it throughout the workshop. + +## NodeJS + +To run the DApp locally, you need to install: +- [nodejs](https://github.com/nodejs/node): JavaScript runtime +- [npm](https://www.npmjs.com/): node package manager +- [yarn](https://yarnpkg.com/): a better npm + +## Download foundry + +- Open your terminal and type + +```bash +curl -L https://foundry.paradigm.xyz | bash +``` + +This will download foundryup. + +- Then, you can download foundry by running `foundryup` +- If everything went fine you should be able to use `forge`, `anvil`, `chisel` and `cast`. +- If you are on macos you will need to install `libusb` with + +```bash +brew install libusb +``` + +After the installation, run the following command to ensure it has been properly installed on your computer: + +```bash +forge --version +``` + +It should print your current version. + +If you have some troubles during the installation, you can refer to the [official documentation](https://book.getfoundry.sh/getting-started/installation). + +## Create a foundry project + +Once everything is done, you can create a new project using + +```bash +forge init new_project +cd new_project +``` + +This should create a new directory with a brand new foundry project + +If you already have a repository, you might need to add + +```bash +--no-commit +``` + +The first thing you wants to do is set the solidity version of this project in the `foundry.toml` file wich is the configuration file of foundry. + +You can do this by adding in the "[profile.default]" section: + +```toml +solc_version = "0.8.20" +``` + +## VSCode Integration + +I recommand you to install [solidity vscode extension](https://marketplace.visualstudio.com/items?itemName=NomicFoundation.hardhat-solidity), it is an extension that simplifies development in Solidity. + +Also, I recommand you to use the extension formatter. It will format your code on save, which allows you to have a clean codebase. To do so: + +- Create a `.vscode/settings.json` file with this content + +```json +{ + "editor.formatOnSave": true, + "[solidity]": { + "editor.defaultFormatter": "NomicFoundation.hardhat-solidity" + } +} +``` + +then [go back to the exercises](./README.md) 🚀 diff --git a/p2p/7.Voting-system/util/VotingSystem.t.sol b/p2p/7.Voting-system/util/VotingSystem.t.sol new file mode 100644 index 00000000..3bff6848 --- /dev/null +++ b/p2p/7.Voting-system/util/VotingSystem.t.sol @@ -0,0 +1,38 @@ +pragma solidity 0.8.26; + +import "forge-std/Test.sol"; +import "../src/VotingSystem.sol"; + +contract VotingSystemTest is Test { + VotingSystem public votingSystem; + string[] public proposalNames; + + function setUp() public { + proposalNames = new string[](3); + proposalNames[0] = "Proposal 1"; + proposalNames[1] = "Proposal 2"; + proposalNames[2] = "Proposal 3"; + + votingSystem = new VotingSystem(proposalNames); + } + + function testProposalCreation() public view { + for (uint i = 0; i < proposalNames.length; i++) { + (string memory name, uint voteCount) = votingSystem.proposals(i); + assertEq(name, proposalNames[i]); + assertEq(voteCount, 0); + } + } + + function testProposalCount() public view { + uint proposalCount = 0; + while (true) { + try votingSystem.proposals(proposalCount) returns (string memory, uint) { + proposalCount++; + } catch { + break; + } + } + assertEq(proposalCount, proposalNames.length); + } +} \ No newline at end of file