How to build server less applications for Mist | Ethereum Foundation Blog<\/title><meta name=\"title\" content=\"How to build server less applications for Mist | Ethereum Foundation Blog\"\/><meta name=\"description\" content=\"\"\/><meta name=\"application-name\" content=\"Ethereum Foundation Blog\"\/><meta name=\"image\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><meta property=\"og:title\" content=\"How to build server less applications for Mist | Ethereum Foundation Blog\"\/><meta property=\"og:description\" content=\"\"\/><meta property=\"og:type\" content=\"website\"\/><meta property=\"og:site_name\" content=\"Ethereum Foundation Blog\"\/><meta property=\"og:url\" content=\"https:\/\/blog.ethereum.org\/2016\/07\/12\/build-server-less-applications-mist\"\/><meta property=\"og:image\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><meta property=\"og:image:url\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><meta property=\"og:image:secure_url\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><meta property=\"og:image:alt\" content=\"Ethereum Foundation Blog\"\/><meta property=\"og:image:type\" content=\"image\/png\"\/><meta name=\"twitter:card\" content=\"summary_large_image\"\/><meta property=\"twitter:url\" content=\"https:\/\/blog.ethereum.org\/2016\/07\/12\/build-server-less-applications-mist\"\/><meta name=\"twitter:creator\" content=\"@ethereum\"\/><meta name=\"twitter:site\" content=\"@ethereum\"\/><meta name=\"twitter:title\" content=\"How to build server less applications for Mist | Ethereum Foundation Blog\"\/><meta name=\"twitter:description\" content=\"\"\/><meta name=\"twitter:image\" content=\"https:\/\/blog.ethereum.org\/images\/eth-org.jpeg\"\/><link rel=\"icon\" href=\"https:\/\/blog.ethereum.org\/images\/favicon.png\"\/><link rel=\"canonical\" href=\"https:\/\/blog.ethereum.org\/2016\/07\/12\/build-server-less-applications-mist\"\/><link rel=\"preload\" as=\"image\" imagesrcset=\"\/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=1080&q=75 1x, \/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=3840&q=75 2x\" fetchpriority=\"high\"\/><meta name=\"next-head-count\" content=\"29\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"anonymous\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"anonymous\"\/><link rel=\"preconnect\" href=\"https:\/\/Y49Y4R9SYF-dsn.algolia.net\" crossorigin=\"anonymous\"\/><link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/instantsearch.css@7.3.1\/themes\/reset-min.css\" integrity=\"sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=\" crossorigin=\"anonymous\"\/><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\"\/><link data-next-font=\"\" rel=\"preconnect\" href=\"https:\/\/blog.ethereum.org\/\" crossorigin=\"anonymous\"\/><link rel=\"preload\" href=\"https:\/\/blog.ethereum.org\/_next\/static\/css\/78d206700cb802fe.css\" as=\"style\"\/><link rel=\"stylesheet\" href=\"https:\/\/blog.ethereum.org\/_next\/static\/css\/78d206700cb802fe.css\" data-n-g=\"\"\/><noscript data-n-css=\"\"\/><\/head><body id=\"wp_automatic_ReadabilityBody\"><\/p>\n<div id=\"__next\">\n<div class=\"css-1b6n4o1\">\n<div dir=\"ltr\" class=\"css-1mbdz04\">\n<div class=\"css-117th2g\"><img decoding=\"async\" alt=\"ETH top background starting image\" src=\"https:\/\/blog.ethereum.org\/images\/eth-top-left@2x.png\" class=\"chakra-image css-1pjpabm\"\/><\/div>\n<div class=\"css-nizyf\"><img decoding=\"async\" alt=\"ETH bottom background ending image\" src=\"https:\/\/blog.ethereum.org\/images\/eth-bottom-right@2x.png\" class=\"chakra-image css-147f9zw\"\/><\/div>\n<\/div>\n<div class=\"css-13vzj2f\">\n<div class=\"chakra-container css-8nhglu\"><main><\/p>\n<h2 class=\"chakra-text css-1hp3qq6\">Posted by Alex Van de Sande on July 12, 2016<\/h2>\n<div class=\"css-rszk63\">\n<div class=\"css-0\"><img alt=\"How to build server less applications for Mist\" fetchpriority=\"high\" width=\"1064\" height=\"456\" decoding=\"async\" data-nimg=\"1\" style=\"color:transparent;max-width:100%;height:auto\" srcset=\"\/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=1080&q=75 1x, \/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=3840&q=75 2x\" src=\"https:\/\/blog.ethereum.org\/_next\/image?url=%2Fimages%2Feth-org.jpeg&w=3840&q=75\"\/><\/div>\n<\/div>\n<div class=\"chakra-stack css-nejzu5\">\n<div class=\"chakra-stack css-145obom\">\n<article>\nEthereum is not meant to be a platform to build esoteric smart contract applications that require a STEM degree to understand, but it aims to be one pillar of a different architecture for applications on the world wide web. With this post we will try to elucidate how this can be done and give some basic examples on how to start building a decentralized app.<\/p>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"who-is-this-for\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"who is this for permalink\" href=\"#who-is-this-for\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Who is this for?<\/h2>\nThis text is intended at those who have a basic understanding of web technology and how to build a simple javascript and html app, and want to convert these skills into building apps for the Ethereum ecosystem.<\/p>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"how-can-apps-run-without-servers\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"how can apps run without servers permalink\" href=\"#how-can-apps-run-without-servers\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>How can apps run without servers?<\/h2>\nCurrently servers in web apps do much more than what they were originally intended to. Besides serving static web pages, they also keep private information, handle user authentication and deal with all the complicated ways in which data is analyzed and saved. All the user computer does – a device which would be considered a super computer when the web was invented – is to load and display that information to the user.<\/p>\n<a class=\"chakra-link css-vezwxf\" href=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/Screen-Shot-2016-07-08-at-5.27.25-PM.png\"><img decoding=\"async\" alt=\"Current server models\" src=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/Screen-Shot-2016-07-08-at-5.27.25-PM.png\" class=\"chakra-image css-hw6q2r\"\/><\/a> Current server models<\/p>\nInstead, a\u00a0more decentralized architecture would allow a much more modular approach, in which different machines and different protocols would handle specific tasks, some on the user’s side and some in specialized machines deployed on a peer to peer network. Therefore\u00a0all the Data logic (what gets saved, who saves it, how to solve conflicts etc) is handled by smart contracts on the blockchain, static files are served via <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"http:\/\/swarm-gateways.net\/bzz:\/a600d48f01d5e6d07907d9d14db0ff205624caf0570d0c2601cdb80c9767bcb9\/index.html\"> Swarm <\/a> and realtime communication over <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/github.com\/ethereum\/wiki\/wiki\/Whisper\"> Whisper<\/a>. The user device keeps the user authentication and runs the application interface.<\/p>\nDoing this\u00a0would remove the danger of data breach and attacks as there are less single nodes keeping tons of unencrypted data, while also removing the load and cost of serving apps by distributing it across the network. Since all those protocols are decentralized, anyone can connect to the network and start providing a specialized service: if the user is browsing from a powerful laptop, for instance, they can also serve static files to network neighbors.<\/p>\n\u00a0<\/p>\n<a class=\"chakra-link css-vezwxf\" href=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/Screen-Shot-2016-07-08-at-5.37.32-PM.png\"><img decoding=\"async\" alt=\"Decentralised Server models\" src=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/Screen-Shot-2016-07-08-at-5.37.32-PM.png\" class=\"chakra-image css-hw6q2r\"\/><\/a> Decentralised Server models<\/p>\nA decentralized architecture also encourages innovation: since the interface is detached from the data, anyone can come up with a new interface to the same app, creating a more vibrant and competing ecosystem. Arguably, one of the most interesting and innovative periods in Twitter history was when it served mostly as a central data hub and anyone could build their \u00a0Twitter Application.<\/p>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"see-it-working\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"see it working permalink\" href=\"#see-it-working\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>See it working<\/h2>\nIf you want to experiment with the app before learning it, we recommend you <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/github.com\/ethereum\/mist\/releases\/tag\/0.8.0\">download Mist and read our introductory tutorial to how to install the app and run it.<\/a> If you just want to see the whole app instead, you can download it directly from the <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/github.com\/ethereum\/stake-voice\">Stake Voice Github repository<\/a>.<\/p>\n\u00a0<\/p>\n<a class=\"chakra-link css-vezwxf\" href=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/92730668-4473-11e6-8a49-fef5d43a1eb7-1.png\"><img decoding=\"async\" alt=\"Stake Voice running on the Mist Browser\" src=\"https:\/\/blog.ethereum.org\/images\/posts\/2016\/07\/92730668-4473-11e6-8a49-fef5d43a1eb7-1.png\" class=\"chakra-image css-hw6q2r\"\/><\/a> Stake Voice running on the Mist Browser<\/p>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"lets-get-to-it\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"lets get to it permalink\" href=\"#lets-get-to-it\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Let’s get to it<\/h2>\nWe are going to build a very simple application called “Stake Voice”. The idea is to allow ether stakers to vote on anything they want, and the app will tally the total ether balance of all those who agree or disagree with the statement.<\/p>\nThe app underlying contract is written in <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\">Solidity<\/a>, a javascript-like language and is very simple:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">contract EtherVote <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0event LogVote<\/span>(<\/span>bytes32 indexed proposalHash, bool pro, address addr<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>function<\/span> vote<\/span>(<\/span>bytes32 proposalHash, bool pro<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>if<\/span> <\/span>(<\/span>msg.value <\/span>><\/span> <\/span>0<\/span>)<\/span> throw<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0LogVote<\/span>(<\/span>proposalHash, pro, msg.sender<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>function<\/span> <\/span>(<\/span>)<\/span> <\/span>{<\/span> throw<\/span>;<\/span> <\/span>}<\/span>\n<\/span><span\/>}<\/span><\/code><\/pre>\n<\/div>\nThe first line sets up the contract name and the second creates an event called “LogVote”, which will output in the log the following:<\/p>\n<ul role=\"list\" class=\"css-1ars4k6\">\n<li class=\"css-0\">a hash of the proposal being voted on<\/li>\n<li class=\"css-0\">if the voter agrees or disagrees with it<\/li>\n<li class=\"css-0\">the address of the voter<\/li>\n<\/ul>\nThe function “vote” will then fire the log, which the application later will count. It also has a check that no ether can be sent accidentally. The \u201canonymous\u201d \u00a0function is executed when any ether is deposited on the smart contract and will then automatically reject it.<\/p>\nIf you want to learn more about coding in Solidity we recommend you start on the <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/ethereum.org\/token\">ethereum<\/a> <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/ethereum.org\/crowdsale\">solidity<\/a> <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/ethereum.org\/dao\">tutorials<\/a>, read the \u00a0<a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/solidity.readthedocs.io\/en\/latest\/\">official documentation page<\/a> and try it on your browser using the <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/ethereum.github.io\/browser-solidity\/#version=soljson-latest.js\">online compiler<\/a>.<\/p>\nThat’s essentially it: you choose a hash, choose a side and execute Vote(). So how does this translates into a polling app?<\/p>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"serverless-architecture\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"serverless architecture permalink\" href=\"#serverless-architecture\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Serverless Architecture<\/h2>\nFollowing the principle of KISS, we are doing the minimum product possible that is still usable, meaning we won’t be using databases for storing proposals or using any feature that requires anything other than vanilla javascript and pure html.<\/p>\nSo we will use the URL of the app itself to keep the proposal text, and we will use that to display it to the user and generate a hash that can then be used to check the votes. The users can use social media to share which proposals they want to debate or simply use direct links.<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\/\/ On the initial startup function:\n<\/span>proposal <\/span>=<\/span> decodeURI<\/span>(<\/span>getParameterByName<\/span>(<\/span>'proposal'<\/span>))<\/span>;<\/span>\n<\/span>\n\/\/ <\/code><\/pre>\n<\/div>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"start-with-basics\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"start with basics permalink\" href=\"#start-with-basics\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Start with basics<\/h2>\nSo grab your favorite html framework and get a basic website on your local machine and open it on Mist. All pages in Mist have access to a javascript object called web3 which will where you will be working the most. \u00a0First thing we need to do is check if web3 is present or not:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">Function <\/span>init<\/span>(<\/span>)<\/span> <\/span>{<\/span>\n<\/span><span\/>..<\/span>.\n<\/span>if<\/span>(<\/span>typeof web3 <\/span>==<\/span> <\/span>'undefined'<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\u00a0 \/\/ Alert the user they are not <\/span>in<\/span> a web3 compatible browser\n<\/span>\u00a0\u00a0\u00a0\u00a0<\/span>return<\/span>;<\/span> \u00a0\u00a0\u00a0\n<\/span>\u00a0<\/span>}<\/span>\n<\/span> <\/code><\/pre>\n<\/div>\nSome application developers might want to load their own web3 object, to guarantee forward compatibility. To do that, just add just before <\/p>\n<\/article>\n<\/div>\n<\/div>\n<\/main><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/p>\n tag:<\/p>\nAnd then add this on your initial function to load your own custom web3 provider:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\/\/ Checks Web3 support\n<\/span>if<\/span>(<\/span>typeof web3 <\/span>!=<\/span>=<\/span> <\/span>'undefined'<\/span> <\/span>&&<\/span> typeof Web3 <\/span>!=<\/span>=<\/span> <\/span>'undefined'<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\u00a0\u00a0\u00a0\u00a0\/\/ If there<\/span>'s a web3 library loaded, then make your own web3\n<\/span>\u00a0\u00a0\u00a0\u00a0web3 = new Web3(web3.currentProvider);\n<\/span>} else if (typeof Web3 !== '<\/span>undefined<\/span>') {\n<\/span>\u00a0\u00a0\u00a0\u00a0\/\/ If there isn'<\/span>t <\/span>then<\/span> <\/span>set<\/span> a provider\n<\/span>\u00a0\u00a0\u00a0\u00a0web3 <\/span>=<\/span> new Web3<\/span>(<\/span>new Web3.providers.HttpProvider<\/span>(<\/span>\"http:\/\/localhost:8545\"<\/span>))<\/span>;<\/span>\n<\/span><span\/>}<\/span> <\/span>else<\/span> if<\/span>(<\/span>typeof web3 <\/span>==<\/span> <\/span>'undefined'<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\u00a0\u00a0\u00a0\u00a0\/\/ Alert the user he is not <\/span>in<\/span> a web3 compatible browser\n<\/span>\u00a0\u00a0\u00a0\u00a0<\/span>return<\/span>;<\/span> \u00a0\n<\/span><span\/>}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"load-information-from-the-blockchain\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"load information from the blockchain permalink\" href=\"#load-information-from-the-blockchain\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Load information from the blockchain<\/h2>\nYou checked you are connected to a blockchain, but which one? Is it the main ethereum network? Maybe a testnet or a private network? Maybe it’s a fork in the future and your chain is a brand new one. The best way to check this is to see if the contract address you want to load has any code on it.<\/p>\nFurthermore, to\u00a0execute a contract you need to know two basic things: it’s address and the ABI, which will be a json encoded file containing interface information.<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">var contractAddress <\/span>=<\/span> <\/span>'0x1e9d5e4ed8ef31cfece10b4c92c9057f991f36bc'<\/span>;<\/span>\n<\/span>var contractABI <\/span>=<\/span> <\/span>[<\/span>{<\/span>\"constant\"<\/span>:false,<\/span>\"inputs\"<\/span>:<\/span>[<\/span>{<\/span>\"name\"<\/span>:<\/span>\"proposalHash\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"bytes32\"<\/span>}<\/span>,<\/span>{<\/span>\"name\"<\/span>:<\/span>\"pro\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"bool\"<\/span>}<\/span>]<\/span>,<\/span>\"name\"<\/span>:<\/span>\"vote\"<\/span>,<\/span>\"outputs\"<\/span>:<\/span>[<\/span>]<\/span>,<\/span>\"type\"<\/span>:<\/span>\"function\"<\/span>}<\/span>,<\/span>{<\/span>\"anonymous\"<\/span>:false,<\/span>\"inputs\"<\/span>:<\/span>[<\/span>{<\/span>\"indexed\"<\/span>:true,<\/span>\"name\"<\/span>:<\/span>\"proposalHash\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"bytes32\"<\/span>}<\/span>,<\/span>{<\/span>\"indexed\"<\/span>:false,<\/span>\"name\"<\/span>:<\/span>\"pro\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"bool\"<\/span>}<\/span>,<\/span>{<\/span>\"indexed\"<\/span>:false,<\/span>\"name\"<\/span>:<\/span>\"addr\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"address\"<\/span>}<\/span>]<\/span>,<\/span>\"name\"<\/span>:<\/span>\"LogVote\"<\/span>,<\/span>\"type\"<\/span>:<\/span>\"event\"<\/span>}<\/span>]<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\nNow that you have those, you can check if the contract exist on the startup function:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\/\/ Load the contract\n<\/span>web3.eth.getCode<\/span>(<\/span>contractAddress, function<\/span>(<\/span>e, r<\/span>)<\/span> <\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>!<\/span>e <\/span>&&<\/span> r.length <\/span>><\/span> <\/span>3<\/span>)<\/span>\n<\/span> \u00a0 loadContract<\/span>(<\/span>)<\/span>;<\/span>\n<\/span>\u00a0<\/span>}<\/span>)<\/span>\n<\/span> <\/code><\/pre>\n<\/div>\nYou can even run this command recursively, to try connecting to it again using another address (in case you are actually on the testnet). Once you have found your contract you can load it up here:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\n<\/span>Function \u00a0\u00a0<\/span>loadContract<\/span>(<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\/\/ load the contract to javascript\n \u00a0\u00a0\u00a0\u00a0\u00a0ethervoteContract <\/span>=<\/span> web3.eth.contract<\/span>(<\/span>contractABI<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0ethervote <\/span>=<\/span> ethervoteContract.at<\/span>(<\/span>contractAddress<\/span>)<\/span>;<\/span>\n<\/span><span\/>}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\nYou are using the web3 object to create a new a javascript object that will be able to execute all the ethereum commands directly from the browser. If you want to load only a single instance of the contract, then you can even do it in one line:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\"> \u00a0\u00a0\u00a0\n<\/span>ethervote <\/span>=<\/span> web3.eth.contract<\/span>(<\/span>contractABI<\/span>)<\/span>.at<\/span>(<\/span>contractAddress<\/span>)<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"identify-the-user\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"identify the user permalink\" href=\"#identify-the-user\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Identify the user<\/h2>\nKnowing the user’s account reveals a lot of information about the user: how much ether and any other tokens it has on its balance, and their transaction history. So having all apps know this by default would create a super cookie and would be an unacceptable invasion of privacy. On the other hand, requiring the user to create an user account with login information for each site is not only a pain for the user, but also puts your private information in control of third parties, which creates giant honey pots that can be breached by hackers.<\/p>\nAs a\u00a0result of this dilemma most users have most of their personal information and authentication information <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/xkcd.com\/1150\/\">handled by a half dozen billion dollar corporation<\/a>. Privacy should not be a compromise we accept in exchange of practicality: users should be able to easily authenticate into any app while being in control of their own personal information.<\/p>\nUsing Mist, apps have no information about the user, until the user decides to reveal itself to the app. When you want to query what you know about the accounts, you should call the getAccounts function:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">web3.eth.getAccounts<\/span>(<\/span>function<\/span>(<\/span>e,accounts<\/span>)<\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>!<\/span>e<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \/\/ <\/span>do<\/span> something with the accounts\n<\/span> <\/span>}<\/span>\n<\/span><span\/>}<\/span>)<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\nCurrently, the returning object is an array that\u00a0holds simple accounts that the user has local access to, but in the future it will also hold smart contract accounts the user uses to identify themselves. This will allow the user to have access to features currently available only to centralized authenticators, like two factor authentication or cloud backup, and to future improvements only available to smart contracts, like allowing a few trusted friends to give you access to an account for which you lost keys or having automatic inheritance of inactive accounts.<\/p>\nEach future Ethereum browser will handle how users identify themselves to the App. In Mist we have two ways: either the user can initiate it by clicking the “connect” button (currently it’s just called a “no accounts” button) or the App can request the authentication by calling the “requestAccount” api.<\/p>\nAttention: the accounts on this list are just one which the user claims to hold the key to,\u00a0but the user has provided no proof of doing, therefore you can show a different UI, but don’t send the user any secret information intended only to that account. If you require the user to prove their identity you need them to sign a message, while Mist will also support that in the future, keep it in mind that it would force the user to add an extra step and type their password, so you should only use that when absolutely necessary.<\/p>\n\u00a0<\/p>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"voting\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"voting permalink\" href=\"#voting\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Voting<\/h2>\nOnce you have the contract as an object, voting is a matter of calling it from javascript. This will pop up a Mist transaction pane, where the user will be able to check the transaction and then type their password. So first we will create two clickable objects that calls a vote function:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\"> \u00a0\u00a0\u00a0\n<\/span>document.getElementById<\/span>(<\/span>'vote-support'<\/span>)<\/span>.addEventListener<\/span>(<\/span>'click'<\/span>, <\/span>function<\/span>(<\/span>)<\/span>{<\/span> vote<\/span>(<\/span>true<\/span>)<\/span>;<\/span>}<\/span>, <\/span>false<\/span>)<\/span>;<\/span>\n<\/span>document.getElementById<\/span>(<\/span>'vote-against'<\/span>)<\/span>.addEventListener<\/span>(<\/span>'click'<\/span>, <\/span>function<\/span>(<\/span>)<\/span>{<\/span> vote<\/span>(<\/span>false<\/span>)<\/span>;<\/span>}<\/span>, <\/span>false<\/span>)<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\nNotice that one calls the function with a true parameter and the other false. The function vote could be as simple as:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">Function <\/span>vote<\/span>(<\/span>)<\/span> <\/span>{<\/span>\n<\/span> ethervote.vote<\/span>(<\/span>proposalHash, support, <\/span>{<\/span>from: web3.eth.accounts<\/span>[<\/span>0<\/span>]<\/span>}<\/span>)<\/span>;<\/span>\n<\/span><span\/>}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n“Ethervote” is the object we created before, and “vote” is one of its functions, which correspond to one of the contract functions:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">function<\/span> vote<\/span>(<\/span>bytes32 proposalHash, bool pro<\/span>)<\/span> <\/span>{<\/span>}<\/span><\/code><\/pre>\n<\/div>\nWe pass the two parameters demanded by the function and then add a third object containing transaction informations, like who is it being sent from and optionally, how much gas to include or how much to pay for the gas.<\/p>\nConsequently this\u00a0would generate a panel asking the user to confirm the transaction – but most likely it will return an error because currently the web3.eth.accounts object is an empty array by default, so you have to check for that and if empty, request the accounts to the user:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">function<\/span> vote<\/span>(<\/span>support<\/span>)<\/span> <\/span>{<\/span>\n<\/span>\n web3.eth.getAccounts<\/span>(<\/span>function<\/span>(<\/span>e,accounts<\/span>)<\/span>{<\/span>\n<\/span> \/\/ Check <\/span>if<\/span> there are accounts available\n<\/span> <\/span>if<\/span> <\/span>(<\/span>!<\/span>e <\/span>&&<\/span> accounts <\/span>&&<\/span> accounts.length <\/span>><\/span> <\/span>0<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \/\/ Create a dialog requesting the transaction\n ethervote.vote<\/span>(<\/span>proposalHash, support, <\/span>{<\/span>from: accounts<\/span>[<\/span>0<\/span>]<\/span>}<\/span>)<\/span>\n<\/span>\n <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span>\n<\/span> mist.requestAccount<\/span>(<\/span>function<\/span>(<\/span>e, account<\/span>)<\/span> <\/span>{<\/span>\n<\/span> if<\/span>(<\/span>!<\/span>e<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \/\/ Create a dialog requesting the transaction\n ethervote.vote<\/span>(<\/span>proposalHash, support, <\/span>{<\/span>from: account.toLowerCase<\/span>(<\/span>)<\/span>}<\/span>)<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span>)<\/span>;<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span>)<\/span>;<\/span>\n<\/span><span\/>}<\/span>\n<\/span><\/code><\/pre>\n<\/div>\nYou should only request an account once the user initiated an action: pinging a transaction out of nowhere will deservedly irritate the user and probably make him close your app. If we observe abuses from apps using this feature, we might add more strict requirements to when an alert will show up.<\/p>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"watch-the-contract\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"watch the contract permalink\" href=\"#watch-the-contract\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Watch the contract<\/h2>\nFinally, to count up all the votes we need to watch the contract events and see what votes were cast. To do that, we have to run this function once to start watching the events, after we instantiated “ethervote”:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">ethervote <\/span>=<\/span> web3.eth.contract<\/span>(<\/span>contractABI<\/span>)<\/span>.at<\/span>(<\/span>contractAddress<\/span>)<\/span>;<\/span>\n<\/span>var logVotes <\/span>=<\/span> ethervote.LogVote<\/span>(<\/span>{<\/span>proposalHash: proposalHash<\/span>}<\/span>, <\/span>{<\/span>fromBlock: <\/span>1800000<\/span>}<\/span>)<\/span>;<\/span>\n<\/span>\/\/ Wait <\/span>for<\/span> the events to be loaded\n<\/span>logVotes.watch<\/span>(<\/span>function<\/span>(<\/span>error, result<\/span>)<\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>if<\/span> <\/span>(<\/span>!<\/span>error<\/span>)<\/span> <\/span>{<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Do something whenever the event happens\n \u00a0\u00a0\u00a0\u00a0\u00a0receivedEvent<\/span>(<\/span>result<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>\n<\/span><span\/>}<\/span>)<\/span><\/code><\/pre>\n<\/div>\nThe above code\u00a0will start reading all blocks from number 1.8M (when the contract was uploaded) onwards and then execute the receivedEvent() function once for each event. Whenever a new block arrives with an event this function will be triggered again so you won’t need to call continuously. So what would this function do?<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">Var voteMap <\/span>=<\/span> <\/span>{<\/span>}<\/span>;<\/span>\n<\/span>Function receivedEvent<\/span>(<\/span>event<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\/\/ Get the current balance of a voter \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0var bal <\/span>=<\/span> Number<\/span>(<\/span>web3.fromWei<\/span>(<\/span>web3.eth.getBalance<\/span>(<\/span>event.args.addr<\/span>)<\/span>, <\/span>\"finney\"<\/span>))<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0voteMap<\/span>[<\/span>res.args.addr<\/span>]<\/span> <\/span>=<\/span> <\/span>{<\/span>balance: bal, support: event.args.pro<\/span>}<\/span>;<\/span>\n<\/span><span\/>}<\/span><\/code><\/pre>\n<\/div>\nFrom the original solidity contract, you can see that the LogVote event comes with three argumenst, proposalHash, Pro and Addr:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">event LogVote<\/span>(<\/span>bytes32 indexed proposalHash, bool pro, address addr<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/div>\nSo what this function does is that it will use the function web3.eth.getBalance to check the current ether balance of the address that voted. All balances always return numbers in wei, which is a 1\/1000000000000000000 of an ether and is not very useful for this particular application, so we also use another included web3 function which converts that to any ether unit we want. In this case we will be using the finney, which is a thousandth of an ether.<\/p>\nThen the function\u00a0will save the balance, along with the position of the voter to a map based on the address. One advantage of using a map instead of an array is that this will automatically overwrite any previous information about that same address, so if someone votes twice, only their last opinion will be kept.<\/p>\nAnother thing we could do is identify the user and show them if they voted or not.<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">\/\/ Check <\/span>if<\/span> the current owner has already voted and show that on the interface\n<\/span>web3.eth.getAccounts<\/span>(<\/span>function<\/span>(<\/span>e,accounts<\/span>)<\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>!<\/span>e <\/span>&&<\/span> accounts <\/span>&&<\/span> accounts<\/span>[<\/span>0<\/span>]<\/span> <\/span>==<\/span> res.args.addr<\/span>)<\/span> <\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>res.args.pro<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \/\/ User has voted yes<\/span>!<\/span>\n<\/span> <\/span>}<\/span> <\/span>else<\/span> <\/span>{<\/span>\n<\/span> \/\/ User has voted against<\/span>!<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span>)<\/span>;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<h2 class=\"chakra-heading group css-1kpzc4q\" id=\"tally-up-the-votes\" data-group=\"true\"><a class=\"chakra-link css-128fqrf\" aria-label=\"tally up the votes permalink\" href=\"#tally-up-the-votes\"><svg viewbox=\"0 0 24 24\" focusable=\"false\" class=\"chakra-icon css-173jpr1\"><g fill=\"currentColor\"><path d=\"M10.458,18.374,7.721,21.11a2.853,2.853,0,0,1-3.942,0l-.892-.891a2.787,2.787,0,0,1,0-3.941l5.8-5.8a2.789,2.789,0,0,1,3.942,0l.893.892A1,1,0,0,0,14.94,9.952l-.893-.892a4.791,4.791,0,0,0-6.771,0l-5.8,5.8a4.787,4.787,0,0,0,0,6.77l.892.891a4.785,4.785,0,0,0,6.771,0l2.736-2.735a1,1,0,1,0-1.414-1.415Z\"\/><path d=\"M22.526,2.363l-.892-.892a4.8,4.8,0,0,0-6.77,0l-2.905,2.9a1,1,0,0,0,1.414,1.414l2.9-2.9a2.79,2.79,0,0,1,3.941,0l.893.893a2.786,2.786,0,0,1,0,3.942l-5.8,5.8a2.769,2.769,0,0,1-1.971.817h0a2.766,2.766,0,0,1-1.969-.816,1,1,0,1,0-1.415,1.412,4.751,4.751,0,0,0,3.384,1.4h0a4.752,4.752,0,0,0,3.385-1.4l5.8-5.8a4.786,4.786,0,0,0,0-6.771Z\"\/><\/g><\/svg><\/a>Tally up the votes<\/h2>\nFinally, we should add a separate function to calculate the sums of the votes:<\/p>\nWhy do we want to tally up the votes on a separate function? Because since the vote weight is based on the current balance of each account, we should recalculate the balances at every new block, event if we received no new event. To do this you can add this function that will execute automatically everytime a new block arrives:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">web3.eth.filter<\/span>(<\/span>'latest'<\/span>)<\/span>.watch<\/span>(<\/span>function<\/span>(<\/span>e, result<\/span>)<\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0if<\/span>(<\/span>!<\/span>e<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0calculateVotes<\/span>(<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>\n<\/span><span\/>}<\/span>)<\/span>;<\/span> <\/span><\/code><\/pre>\n<\/div>\nFinally, up to calculating the final tally. We have previously used eth.getBalance in synchronous mode, where the app would wait for the result of the previous action to proceed. Here, since we can be calling a lot of actions every block, we will use it in asynchronous mode: you call the node and execute the action whenever it replies without freezing the interface.<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">var totalPro, totalAgainst, totalVotes<\/span>;<\/span>\n<\/span><span\/>function<\/span> <\/span>calculateVotes<\/span>(<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0totalPro <\/span>=<\/span> <\/span>0<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0totalAgainst <\/span>=<\/span> <\/span>0<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0totalVotes <\/span>=<\/span> <\/span>0<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0Object.keys<\/span>(<\/span>voteMap<\/span>)<\/span>.map<\/span>(<\/span>function<\/span>(<\/span>a<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ call the <\/span>function<\/span> asynchronously\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0web3.eth.getBalance<\/span>(<\/span>a, function<\/span>(<\/span>e,r<\/span>)<\/span> <\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0voteMap<\/span>[<\/span>a<\/span>]<\/span>.balance <\/span>=<\/span> Number<\/span>(<\/span>web3.fromWei<\/span>(<\/span>r, <\/span>'finney'<\/span>))<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>if<\/span> <\/span>(<\/span>voteMap<\/span>[<\/span>a<\/span>]<\/span>.support<\/span>)<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0totalPro <\/span>+=<\/span> parseFloat<\/span>(<\/span>voteMap<\/span>[<\/span>a<\/span>]<\/span>.balance<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>else<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0totalAgainst <\/span>+=<\/span> parseFloat<\/span>(<\/span>voteMap<\/span>[<\/span>a<\/span>]<\/span>.balance<\/span>)<\/span>;<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ <\/span>do<\/span> something cool with the results<\/span>!<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>;<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>;<\/span>\n<\/span><span\/>}<\/span><\/code><\/pre>\n<\/div>\nAs you can follow on the code, what the app is doing is looping in each of the voting addresses and getting their balance, and as soon as it returns, it will either add it to the pro or against camp and sum the totals.<\/p>\nA few extra caveats: when there are no events, nothing will be returned and votes won’t be calculated so you should add a timeout function on all functions that rely on events from the blockchain.<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">setTimeout<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n<\/span> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ If the app doesn't respond after a <\/span>timeout<\/span> it probably has no votes\n<\/span> \u00a0\u00a0\u00a0<\/span>}<\/span>, <\/span>3000<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/div>\nNow you can feel free to use all your current webdeveloper foo to work whatever magic you want. Use the numbers to build a nice visualization in 3D or connect to your favorite social media to share the best questions.<\/p>\nMist also tries to simplify your code by providing some basic navigation\u00a0and UI methods. If you want your app to be header less and occupy the full height of the mist app, just add this to your <\/p>\n<head\/><\/p>\n tag:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\"> <\/span>meta <\/span>name<\/span>=<\/span>\"ethereum-dapp-url-bar-style\"<\/span> <\/span>content<\/span>=<\/span>\"transparent\"<\/span>><\/span><\/span><\/code><\/pre>\n<\/div>\nAnd if you want to use Mist itself to navigate on your app, you can use the <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/github.com\/ethereum\/mist\/blob\/develop\/MISTAPI.md#mistmenu\">Mist.menu<\/a> object:<\/p>\n<div class=\"chakra-stack css-1jx0in4\">\n<pre><pre style=\"color:white;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:0.5em 0;overflow:auto;background:#011627\"><code class=\"language-bash\" style=\"color:#d6deeb;font-family:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;font-size:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none\">for<\/span> <\/span>(<\/span>item of propHistory<\/span>)<\/span> <\/span>{<\/span>\n<\/span> <\/span>if<\/span> <\/span>(<\/span>item.length <\/span>><\/span> <\/span>0<\/span> <\/span>&&<\/span> item <\/span>!=<\/span> <\/span>'null'<\/span>)<\/span> <\/span>{<\/span>\n<\/span> mist.menu.add<\/span>(<\/span> item ,<\/span>{<\/span>\n<\/span> name: item,\n position: n++,\n selected: item <\/span>==<\/span> proposal\n<\/span> <\/span>}<\/span>, <\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n<\/span> window.location.search <\/span>=<\/span> <\/span>'?proposal='<\/span> + encodeURI<\/span>(<\/span>this.name<\/span>)<\/span>;<\/span>\n<\/span> <\/span>}<\/span>)<\/span>;<\/span>\n<\/span> <\/span>}<\/span>\n<\/span> <\/span>}<\/span><\/code><\/pre>\n<\/div>\nOne great thing about ethereum is that you can expand on this simple contract functionality without needing permission: you can add all extra functionality on separate contracts, keeping every single one of them simple and easier to debug. It also means other people can use the contracts you created to their own apps and give new functionality. Meanwhile, all the apps use the same data and backend.<\/p>\nYou can play with this app live hosted on <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/github.com\/ethereum\/stake-voice\">github pages<\/a>, but this isn’t the canonical source of truth, just one of the many possible interfaces to it. The same app will also work as a local html file on your computer or on an <a target=\"_blank\" rel=\"noopener\" class=\"chakra-link css-vezwxf\" href=\"https:\/\/ipfs.io\/\">IPFS network<\/a> and in the future it will be downloaded directly via Mist using Swarm.<\/p>\nSome ideas on how you can try:<\/b><\/p>\n<ul role=\"list\" class=\"css-1ars4k6\">\n<li class=\"css-0\">Create a listing of currently available statements. Anyone can check them by seeing the sha3 of the proposal text, so you don’t need permission.<\/li>\n<li class=\"css-0\">Create threaded comments where users can reply to statements and then upvote or downvote them, sort of like a decentralized stake based Reddit<\/li>\n<li class=\"css-0\">Instead of (or in addition to) using ether balance, you can use some other ethereum token, like The DAO or Digix Gold to weight your questions differently. Since all that the original contract stores is the sender, you can check all balances. Or maybe you can create your own currency that is based on reputation, karma or some other way.<\/li>\n<\/ul>\n<div class=\"css-1oh83t7\">\n<div class=\"css-1da2amo\">\n<footer>\n<div class=\"chakra-stack css-17kigc9\" id=\"subscribe\">\n<h3 class=\"chakra-heading css-b205v8\">Stay Updated<\/h3>\n<div class=\"chakra-stack css-tl3ftk\">\nSubscribe to get email notifications about the topics you care about. Choose from research, events, security updates, and more.<\/p>\n<\/div>\n<button type=\"button\" class=\"chakra-button css-1nrp9g0\">Subscribe to Newsletter<\/button><\/p>\n<\/div>\n<hr aria-orientation=\"horizontal\" class=\"chakra-divider css-1i3bkw6\"\/><\/footer>\n<\/div>\n<\/div>\n<span\/><\/div>\n \n <a href=\"https:\/\/blog.ethereum.org\/en\/2016\/07\/12\/build-server-less-applications-mist\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"How to build server less applications for Mist | Ethereum Foundation Blog Posted by Alex Van de Sande on July 12, 2016 Ethereum is not meant to be a platform to build esoteric smart contract applications that require a STEM degree to understand, but it aims to be one pillar of a different architecture for […]<\/p>\n","protected":false},"author":6,"featured_media":18498,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tdm_status":"","tdm_grid_status":"","footnotes":""},"categories":[24],"tags":[],"kronos_expire_date":[],"class_list":["post-18725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ethereum"],"_links":{"self":[{"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/posts\/18725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/comments?post=18725"}],"version-history":[{"count":0,"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/posts\/18725\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/media\/18498"}],"wp:attachment":[{"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/media?parent=18725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/categories?post=18725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/tags?post=18725"},{"taxonomy":"kronos_expire_date","embeddable":true,"href":"https:\/\/cryptoted.net\/index.php\/wp-json\/wp\/v2\/kronos_expire_date?post=18725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}