├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .travis.yml ├── README.md ├── contract └── MyToken.sol ├── dapp ├── js │ ├── component │ │ ├── App.jsx │ │ ├── MyToken.jsx │ │ └── Web3.jsx │ └── main.jsx └── static │ └── index.html ├── mocha-webpack.opts ├── package.json ├── test └── contract │ └── MyToken.test.js ├── webpack.config.js └── webpack.config.test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"] 3 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain 2 | # consistent coding styles between different editors and IDEs. 3 | 4 | root = true 5 | 6 | [*] 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | indent_style = space 12 | indent_size = 2 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "env": { 4 | "mocha": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | /lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | /coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | /build 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | .tmp 29 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | - "5" 5 | - "4" 6 | env: 7 | - CXX=g++-4.8 8 | addons: 9 | apt: 10 | sources: 11 | - ubuntu-toolchain-r-test 12 | packages: 13 | - g++-4.8 14 | before_script: 15 | - npm install -g ethereumjs-testrpc 16 | - testrpc & 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Ethereum Dapp Template 2 | 3 | [](https://travis-ci.org/uzyn/react-ethereum-dapp-template) 4 | 5 | Template for React-based Ethereum decentralized app (Dapp). 6 | 7 | This is an **opinionated version** of [ethereum-webpack-example-dapp](https://github.com/uzyn/ethereum-webpack-example-dapp) and largely intended for personal use, unless you share the same opinion as mine. 8 | 9 | It is largely a combination of: 10 | 11 | - [react-webpack-airbnbjs-boilerplate](https://github.com/uzyn/react-webpack-airbnbjs-boilerplate), and 12 | - [ethereum-webpack-example-dapp](https://github.com/uzyn/ethereum-webpack-example-dapp) 13 | 14 | ## What does this include 15 | 16 | - Webpack build script with Webpack dev server 17 | - ES2015/ES6 18 | - ESlint for ES2015 using Airbnb JS style guide 19 | - React for front-end view 20 | - Solidity for Ethereum smart contracts 21 | - Test suite for smart contract testing 22 | 23 | 24 | ## How to run 25 | 26 | 1. Run a local Ethereum node with JSON-RPC listening at port 8545 _(default)_. [testrpc](https://github.com/ethereumjs/testrpc) would be the most straight-forward method. 27 | 28 | ```bash 29 | # Using testrpc (recommended) 30 | testrpc 31 | 32 | # If you are running Geth, 33 | # make sure to run in testnet or private net and enable rpc 34 | geth --testnet --rpc 35 | ``` 36 | 37 | 1. Install dependencies 38 | 39 | ```bash 40 | npm install 41 | ``` 42 | 43 | 1. Start the dev server, code and enjoy! Browser should automatically refresh if you make any changes to the code. 44 | 45 | ```bash 46 | npm start 47 | ``` 48 | 49 | Load [http://localhost:8080/](http://localhost:8080/) on your web browser. 50 | 51 | 1. For deployment, run `npm build` and upload `build/` to your server. 52 | 53 | -------------------------------------------------------------------------------- /contract/MyToken.sol: -------------------------------------------------------------------------------- 1 | /** 2 | * This file has 2 contracts: tokenRecipient and MyToken 3 | * and is reproduced directly from https://www.ethereum.org/token 4 | */ 5 | contract tokenRecipient { 6 | function receiveApproval(address _from, uint256 _value, address _token, bytes _extraData); 7 | } 8 | 9 | contract MyToken { 10 | /* Public variables of the token */ 11 | string public name; 12 | string public symbol; 13 | string public version; 14 | uint8 public decimals; 15 | uint256 public totalSupply; 16 | 17 | /* This creates an array with all balances */ 18 | mapping (address => uint256) public balanceOf; 19 | mapping (address => mapping (address => uint256)) public allowance; 20 | mapping (address => mapping (address => uint256)) public spentAllowance; 21 | 22 | /* This generates a public event on the blockchain that will notify clients */ 23 | event Transfer(address indexed from, address indexed to, uint256 value); 24 | 25 | /* Initializes contract with initial supply tokens to the creator of the contract */ 26 | function MyToken( 27 | uint256 initialSupply, 28 | string tokenName, 29 | uint8 decimalUnits, 30 | string tokenSymbol, 31 | string versionOfTheCode 32 | ) { 33 | balanceOf[msg.sender] = initialSupply; // Give the creator all initial tokens 34 | totalSupply = initialSupply; // Update total supply 35 | name = tokenName; // Set the name for display purposes 36 | symbol = tokenSymbol; // Set the symbol for display purposes 37 | decimals = decimalUnits; // Amount of decimals for display purposes 38 | version = versionOfTheCode; 39 | } 40 | 41 | /* Send coins */ 42 | function transfer(address _to, uint256 _value) { 43 | if (balanceOf[msg.sender] < _value) throw; // Check if the sender has enough 44 | if (balanceOf[_to] + _value < balanceOf[_to]) throw; // Check for overflows 45 | balanceOf[msg.sender] -= _value; // Subtract from the sender 46 | balanceOf[_to] += _value; // Add the same to the recipient 47 | Transfer(msg.sender, _to, _value); // Notify anyone listening that this transfer took place 48 | } 49 | 50 | /* Allow another contract to spend some tokens in your behalf */ 51 | function approveAndCall(address _spender, uint256 _value, bytes _extraData) 52 | returns (bool success) { 53 | allowance[msg.sender][_spender] = _value; 54 | tokenRecipient spender = tokenRecipient(_spender); 55 | spender.receiveApproval(msg.sender, _value, this, _extraData); 56 | return true; 57 | } 58 | 59 | /* A contract attempts to get the coins */ 60 | function transferFrom(address _from, address _to, uint256 _value) returns (bool success) { 61 | if (balanceOf[_from] < _value) throw; // Check if the sender has enough 62 | if (balanceOf[_to] + _value < balanceOf[_to]) throw; // Check for overflows 63 | if (spentAllowance[_from][msg.sender] + _value > allowance[_from][msg.sender]) throw; // Check allowance 64 | balanceOf[_from] -= _value; // Subtract from the sender 65 | balanceOf[_to] += _value; // Add the same to the recipient 66 | spentAllowance[_from][msg.sender] += _value; 67 | Transfer(_from, _to, _value); 68 | return true; 69 | } 70 | 71 | /* This unnamed function is called whenever someone tries to send ether to it */ 72 | function () { 73 | throw; // Prevents accidental sending of ether 74 | } 75 | } -------------------------------------------------------------------------------- /dapp/js/component/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Web3 from './Web3'; 3 | import MyToken from './MyToken'; 4 | 5 | 6 | export default function App() { 7 | return ( 8 |
Example The Coin Dapp with smart contract code from https://www.ethereum.org/token
11 | 12 |
21 | If a .sol
file contains more than one contracts,
22 | individual instantiated contracts are also available.
23 | See console.log(tokenRecipient)
.
24 |
You can find more information on this sample dapp at its GitHub repository and @uzyn.
28 |Instantiated (deployed) MyToken is available as MyToken
.
Initialized Web3
object for easy interfacing of Ethereum JavaScript API.