Giter Club home page Giter Club logo

projet3's Introduction

Projet 3 Alyra : Voting front

Rendu

(Désolé, je me suis rendu compte que je parlais super vite dans la vidéo, mais j'ai du faire rapide pour pas que la vidéo dure 2h !)

Je n'ai pas précisé dans la vidéo (il aurait fallu que je recommence une session de vote du début), mais je test aussi qu'il y a bien au moins un gagnant. Par exemple si il n'y a eu aucune proposition ou aucun vote, au lieu d'afficher le gagnant, j'affiche qu'il n'y a "pas de gagnant").

Environnement

BackEnd :

  • Déploiement avec Truffle
  • Script web3

Front End :

  • React + Redux + web3

_Remarque : L'utilisation de Redux n'était pas indispensable pour l'exercice, mais je me suis servis du cas cette dApp pour me former à React (+redux). (je n'avais jamais travaillé avec React auparavant).

L'utilisation de Redux m'a finalement été très utile car elle m'a permis de bien comprendre les différentes interractions avec la Blockchain étant donné que je pouvais visualiser tout ce que je remontais de la BC dans le store Redux en temps réel._

Principe de fonctionnement

Sur le principe, ma dApp fonctionne de la façon suivante :

  • J'interragis avec le smart contract en appelant des fonctions du Smart Contract dans des components React (ProposalInput, VoterInput, ...).
  • J'écoute les events de la blockchain, et je stock les retours de ces events dans mon store Redux dans ContractProvider.jsx
  • Je lis mon store Redux en permanance pour mettre à jour les components de mon app.

Remarque : Je n'ai pas réussi à stocker la notion de "contract" dans le store Redux (c'est un objet qui semble trop compliqué pour Redux). J'ai donc utilisé un Context pour cet objet contract

Résultat du déploiement du contrat sur goerli :**

thibaut@Air-de-Thibaut projet3 % truffle migrate --network goerli
bigint: Failed to load bindings, pure JS will be used (try npm run rebuild?)

# Compiling your contracts...

> Everything is up to date, there is nothing to compile.

# Migrations dry-run (simulation)

> Network name: 'goerli-fork'
> Network id: 5
> Block gas limit: 30000000 (0x1c9c380)

# 01_script.js

Deploying 'Voting'

---

> block number: 9237941
> block timestamp: 1687693971
> account: 0xEC9dA52CCFb524264aec9EbA85c12cFd601f3854
> balance: 0.475897763337938179
> gas used: 2068715 (0x1f90eb)
> gas price: 2.778371289 gwei
> value sent: 0 ETH
> total cost: 0.005747658361123635 ETH

---

> Total cost: 0.005747658361123635 ETH

# Summary

> Total deployments: 1
> Final cost: 0.005747658361123635 ETH

# Starting migrations...

> Network name: 'goerli'
> Network id: 5
> Block gas limit: 30000000 (0x1c9c380)

# 01_script.js

Deploying 'Voting'

---

> transaction hash: 0xe1d0b9c4741f2142f3aec5c15e5c3c7180aff351e24a1e392975399b37ee9bc6
> Blocks: 1 Seconds: 16
> contract address: 0xA3e859f3A10e585d170739c631ed9B3b89d9674C
> block number: 9237947
> block timestamp: 1687693992
> account: 0xEC9dA52CCFb524264aec9EbA85c12cFd601f3854
> balance: 0.475772392737997659
> gas used: 2068715 (0x1f90eb)
> gas price: 2.838974417 gwei
> value sent: 0 ETH
> total cost: 0.005873028961064155 ETH

> Saving artifacts

---

> Total cost: 0.005873028961064155 ETH

# Summary

> Total deployments: 1
> Final cost: 0.005873028961064155 ETH

Pour démarrer

npm i
npm start

projet3's People

Contributors

meeteet avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.