The voting widget demo
Aragon is for me the most exciting project out there on blockchain. But it has the problem of the huge entry barrier. I can tell since I have experienced it on my own skin :P It really provides with an amazing tool set, but at the same time is also extremely hard at the beginning to get the handle of it.
To make Aragon grow and be increasingly adopted, I believe building a strong & user-friendly widget library is a key solution.
My goal was just to make a small POC showing how that would work, taking the Voting App as an example and simply calling its 'vote' function. Doing so we can make a vote outside the Aragon DAO just by clicking a button (the widget, i.e. an embeddable button).
What it does
Two buttons, one to vote Yes and another one to vote No from outside the DAO.
How I built it
Being just a POC, it is quite rudimentary.
Basically it uses the web3 library to recreate the contract with the ABI and then calling its 'vote' function. It connects to an Infura rinkeby node and Metamask allows the transaction signing.
It is actually quite simple, but UX is still far from decent. The user must input the vote Id they want to vote on by hand, and no description of the actual voting is provided on-site (feature to come). After all, this here is just a POC.
The secondary branch, 'react', is the one the most developed. It implements the AragonUI and has the vote Id as a variable.
Challenges I ran into
React and my shallow knowledge of truffle. I wasted too much time first trying to make the buttons pretty with regular CSS (master branch) and then also trying to connect a react app 'by hand' to web3. Until I discovered it was much more pragmatic to restart from zero using
create-react-app. Althought at the end
truffle unbox react was the definitive way to go.
Accomplishments that I'm proud of
I manage to make it with React!! I am so happy ^^
What I learned
Instead of using CSS to make my own custom Aragon buttons I should have started from the beginning using the AragonUI and therefore also React as a framework. But I don't really know React yet so using it was a challenge for me.
Also I learned that building a React app without a template is really hard, especially if you aim to connect to web3 and you don't know React nearly at all, which was my case. Getting set up with
npx create-react-app was way easier.
But even then it was ridiculously hard to connect React with web3 for some reason. I ended up discovering that the easiest by far was doing
truffle unbox react as the way to set the bare bones of the app. And this is how I should have started from the beginning.
What's next for Aragon Voting Widget
I feel like this project is really important for Aragon in general and have a strong will to keep working on it. But it should actually be a JS library which anyone can import to their site and use quite easily, just by entering some necessary parameters like Aragon app's ABI, Ethereum address and DOM target. As I said, what I am submitting here just serves as a POC.
I am envisioning a 'Fund Me!' button for the about-to-come Aragon Fundraising app and also voting buttons similar the ones I made for Twitter and any other major site. I basically see these Aragon widgets/embeddable buttons conquering the world and beyond.
They should provide with great UX (a mockup of how this actually could look like has already been designed) and make Aragon really easy and fun to use, all over the web.
More info on desirable specs in this post by Luis: https://forum.aragon.org/t/aragon-button-interact-with-daos-everywhere/1185