This the UI project of the Ethereum Canvas.
The goal of this project is to develop a canvas of pixels such that any user can buy and paint them using ETH, similar to the MillionDollarHomePage.com project but in this case the pixels can be bought by other users if they pay more for it. It makes usage of a Smart Contract as core backend service, developed with Solidity.
The backend will be consumed by this UI project via an RPC API with the Chrome extension MetaMask, and drawing the canvas with D3.
This was developed with the node version ^6.11.0. We highly recommend nvm to manage node versions on your machine.
Run
$ npm installMake sure you have the grunt-cli command installed in order to use the Grunt task manager.
$ npm install -g grunt-cliUpdate the file at config/config.js setting the correct Smart Contract build JSON output. This means copying the generated JSON in the build/contracts/EthereumContract.json of the Smart Contract project and putting it in that field.
Please note that this configuration should be improved as it is a tedious manual process, but is also a good practice to keep the latest Smart Contract abi committed in the file in the mid time.
Also update the config/config.js setting the right Smart Contract address.
Make sure you have installed MetaMask in your browser. Set it to listen to the localhost:8545 chain.
Then just run the web app with
$ npm run deployAnd go to localhost:9000.