{"id":19605746,"url":"https://github.com/leopoldjoy/react-ethereum-dapp-example","last_synced_at":"2025-04-05T13:07:37.605Z","repository":{"id":48726023,"uuid":"102441181","full_name":"leopoldjoy/react-ethereum-dapp-example","owner":"leopoldjoy","description":"A starter boilerplate for an Ethereum dapp using web3.js v1.0, truffle, react, and parity","archived":false,"fork":false,"pushed_at":"2023-03-25T05:20:55.000Z","size":14401,"stargazers_count":467,"open_issues_count":5,"forks_count":112,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-03-29T12:07:19.020Z","etag":null,"topics":["blockchain","blockchain-technology","ethereum","ethereum-address","ethereum-blockchain","ethereum-contract","ethereum-contracts","ethereum-dapp","ethereum-token","ethereumjs","parity","react","redux","smart-contracts","truffle","truffle-boilerplates","web3","web3js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leopoldjoy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-05T06:10:06.000Z","updated_at":"2025-03-11T14:45:32.000Z","dependencies_parsed_at":"2024-11-11T09:46:16.618Z","dependency_job_id":"4923d4dc-f0eb-4bd6-a238-c62940446c5a","html_url":"https://github.com/leopoldjoy/react-ethereum-dapp-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leopoldjoy%2Freact-ethereum-dapp-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leopoldjoy%2Freact-ethereum-dapp-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leopoldjoy%2Freact-ethereum-dapp-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leopoldjoy%2Freact-ethereum-dapp-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leopoldjoy","download_url":"https://codeload.github.com/leopoldjoy/react-ethereum-dapp-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","blockchain-technology","ethereum","ethereum-address","ethereum-blockchain","ethereum-contract","ethereum-contracts","ethereum-dapp","ethereum-token","ethereumjs","parity","react","redux","smart-contracts","truffle","truffle-boilerplates","web3","web3js"],"created_at":"2024-11-11T09:46:06.978Z","updated_at":"2025-04-05T13:07:37.579Z","avatar_url":"https://github.com/leopoldjoy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# React Ethereum Dapp Example\n\n[![Build Status](https://travis-ci.org/leopoldjoy/react-ethereum-dapp-example.svg?branch=master\u0026style=flat-square)](https://travis-ci.org/leopoldjoy/react-ethereum-dapp-example)\n[![Dependency Status](https://david-dm.org/leopoldjoy/react-ethereum-dapp-example.svg?style=flat-square)](https://david-dm.org/leopoldjoy/react-ethereum-dapp-example)\n[![devDependency Status](https://david-dm.org/leopoldjoy/react-ethereum-dapp-example/dev-status.svg?style=flat-square)](https://david-dm.org/leopoldjoy/react-ethereum-dapp-example?type=dev)\n\n![Includes an example Ethereum token implementation and UI](/images/metacoin.gif?raw=true \"Includes an example Ethereum token implementation and UI\")\n\nIncludes an example Ethereum token implementation and UI!\n\n## About\n\nThis is a starter boilerplate Ethereum dapp I've put together using the following technologies:\n\n* [Ethereum Javascript API (Web3.js) 1.0-beta](https://github.com/ethereum/web3.js/tree/1.0)\n* [Truffle](https://github.com/trufflesuite/truffle)\n* [Parity](https://github.com/paritytech/parity)\n* [React Redux Universal Hot Example](https://github.com/bertho-zero/react-redux-universal-hot-example) (implements [React](https://github.com/facebook/react), [React Router](https://github.com/reactjs/react-router), [Babel](http://babeljs.io), [Webpack](https://webpack.js.org/), [Redux](https://github.com/reactjs/redux), [Redux Dev Tools](https://github.com/reactjs/redux-devtools), [React Router Redux](https://github.com/reactjs/react-router-redux), [ESLint](http://eslint.org), and more)\n\nThis starter repository for building react/redux dapps uses the latest bleeding-edge Ethereum development technologies. Please note that the repository is still under development; I will be adding additional smart-contracts/UI examples.\n\n## Features\n\n\u003cdl\u003e\n  \u003cdt\u003eBleeding-edge technologies including Web3.js v1.0\u003c/dt\u003e\n  \u003cdd\u003eThe repository aims to implement the most contemporary technologies and design patterns. For this reason we support the latest version of Web3.js, which is still in beta, so your dapp code will remain current going forward.\u003c/dd\u003e\n\n  \u003cdt\u003eHighly flexible and adaptable\u003c/dt\u003e\n  \u003cdd\u003eQuickly make changes and customize by starting with a minimalist Ethereum dapp implementation.\u003c/dd\u003e\n\n  \u003cdt\u003eTruffle support\u003c/dt\u003e\n  \u003cdd\u003eBuilt-in smart contract compilation, linking, deployment and binary management from the CLI.\u003c/dd\u003e\n\n  \u003cdt\u003eFast, light, robust Ethereum implementation\u003c/dt\u003e\n  \u003cdd\u003eParity provides an easy-to-use dapp browser and development environment equipt with a built-in wallet and fast transaction processing.\u003c/dd\u003e\n\n  \u003cdt\u003eHot reload\u003c/dt\u003e\n  \u003cdd\u003eEnjoy the developer experience! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page! The state of application is preserved on the client.\u003c/dd\u003e\n\n  \u003cdt\u003eNext generation JavaScript\u003c/dt\u003e\n  \u003cdd\u003eUse JSX syntax with all ES6 features, and some of ES7 (see \u003ca href=\".babelrc\"\u003e.babelrc\u003c/a\u003e).\u003c/dd\u003e\n\n  \u003cdt\u003eCSS in modules\u003c/dt\u003e\n  \u003cdd\u003eWrite composable, modular and maintenable CSS with your components.\u003c/dd\u003e\n\n  \u003cdt\u003ePredictable state management\u003c/dt\u003e\n  \u003cdd\u003eUnidirectional data flow with \u003ca href=\"http://redux.js.org\"\u003eRedux\u003c/a\u003e helps you write applications that behave consistently and are easy to test. On top of that, it provides a great developer experience.\u003c/dd\u003e\n\n  \u003cdt\u003eProgressive web app \u0026 Offline-first\u003c/dt\u003e\n  \u003cdd\u003eProgressive Web Apps are user experiences that have the reach of the web, and are:\u003cbr\u003e\nReliable - Load instantly and never show the downasaur, even in uncertain network conditions.\u003cbr\u003e\nFast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.\u003cbr\u003e\nEngaging - Feel like a natural app on the device, with an immersive user experience.\u003cbr\u003e\u003cbr\u003e\nThis new level of quality allows Progressive Web Apps to earn a place on the user's home screen.\u003c/dd\u003e\n\n  \u003cdt\u003eLazy loading \u0026 dynamic routing\u003c/dt\u003e\n  \u003cdd\u003eThe code splitting makes the size of your main bundle almost fixed, and with react-router you can load application pieces on demand. You can send bundles to people who are only trained, such as administration.\u003c/dd\u003e\n\n  \u003cdt\u003eUniversal rendering\u003c/dt\u003e\n  \u003cdd\u003eWith the help of server side rendering the first rendering is never empty and performance is better. This is the time for example to prefetch the data.\n\u003ca href=\"https://github.com/halt-hammerzeit/webpack-isomorphic-tools\"\u003eWebpack-isomorphic-tools\u003c/a\u003e to allow require() work for statics both on client and server.\u003c/dd\u003e\n\n  \u003cdt\u003eSEO\u003c/dt\u003e\n  \u003cdd\u003eThis project supports SEO for search engines even without support indexing of JavaScript content, thanks to server-side rendering.\u003c/dd\u003e\n\u003c/dl\u003e\n\n## Installation\n\nDownload the latest verion of Parity [here](https://github.com/paritytech/parity/releases).\n\nAlso ensure that you have the latest verion of Truffle installed globally:\n\n```bash\nnpm install -g truffle\n```\n\nFinally install all package dependencies:\n\n```bash\nnpm install\n```\n\n## Running Dev Environment\n\nRun all of the following commands inside the project directory.\n\n### 1) Start Parity Development Chain\n\n```bash\nparity --chain dev --ws-origins \"*\"\n```\n\nNote: we set `--ws-origins` so that we can use websockets to subscribe to blockchain events.\n\n### 2) Compile and Migrate smart-contracts\n\n```bash\ntruffle compile \u0026\u0026 truffle migrate\n```\n\nNOTE: after running open parity (at [`http://127.0.0.1:8180/`](http://127.0.0.1:8180/)) in a browser and confirm all of the transactions to complete the migration.\n\n### 3) Start Dev Javascript Server\n\n```bash\nnpm run dev\n```\n\nThe first time it may take a little while to generate the first `webpack-assets.json` and complain with a few dozen `[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)` printouts, but be patient. Give it 30 seconds.\n\nYou're good to go! :) Now you can access the dapp at: [`http://localhost:3000`](http://localhost:3000).\n\n#### Using Redux DevTools\n\n[Redux Devtools](https://github.com/gaearon/redux-devtools) are enabled by default in development.\n\n- \u003ckbd\u003eCTRL\u003c/kbd\u003e+\u003ckbd\u003eH\u003c/kbd\u003e Toggle DevTools Dock\n- \u003ckbd\u003eCTRL\u003c/kbd\u003e+\u003ckbd\u003eQ\u003c/kbd\u003e Move DevTools Dock Position\n- see [redux-devtools-dock-monitor](https://github.com/gaearon/redux-devtools-dock-monitor) for more detailed information.\n\nIf you have the [Redux DevTools chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) installed it will automatically be used on the client-side instead.\n\nIf you want to disable the dev tools during development, set `__DEVTOOLS__` to `false` in `/webpack/dev.config.js`.  \nDevTools are not enabled during production by default.\n\n## Explanation\n\nPlease see the [`react-redux-universal-hot-example documentation`](https://github.com/bertho-zero/react-redux-universal-hot-example#explanation) for an in-depth explanation of how the React/Redux portion of this dapp works.\n\n#### Smart-Contracts\n\nSmart-contracts are written inside the `/contracts` directory. The `truffle compile` command then creates corresponding `.json` files inside the `/build/contracts` directory.\n\nFor a smart-contracts to be deployed when `truffle migrate` is run it must be called with `.deploy()` in `/migrations/2_deploy_contracts.js` or any other migration file in the `./migrations` directory (note: you can add additional deployment files to this directory, simply increment the number at the beginning of the filename, e.g.: `3_anotha_one.js`).\n\nFor more info on Truffle and how it works please read the [documentation](http://truffleframework.com/docs/).\n\n#### Web3.js Relationship with Parity\n\nThe Web3.js Javascript library that is used in the React/Redux portion of the dapp to interact with the Ethereum smart-contracts running on the Parity test chain via a websocket.\n\nFor more info on Parity and how it works please read the [wiki](https://github.com/paritytech/parity/wiki).\n\n#### /build/contracts/addresses.json\n\nAfter running `truffle migrate`, the [`2_deploy_contracts.js`](/migrations/2_deploy_contracts.js) migration script will create an `addresses.json` file inside of the newly created `/build/contracts` directory that will simply contain a JSON object of the current deployment addresses of the dapp's smart-contracts.\n\n#### loadContractABI API\n\nThe `loadContractABI` API is used to get the Application Binary Interface (ABI) for the smart-contracts from their JSON files. It runs on the server-side of the app as it's easier to access the file-system that way.\n\n## Roadmap \n\nPlanned future additions:\n\n- [ ] create page showing example use of `web3.eth.getStorageAt` method on [`StorageExample`](/contracts/StorageExample.sol) smart-contract\n- [ ] make MetaCoin into a ERC20 standards-compliant token\n- [ ] add example oracle smart-contract example that interacts with external data\n- [ ] consider implementing [`truffle-contract`](https://github.com/trufflesuite/truffle-contract) for better Ethereum contract abstraction\n- [ ] implement/document truffle unit tests with Travis CI\n- [ ] add production environment deployment instructions\n\n## Contributing\n\nMy aim is for this to function as both a learning resource and also a useful boilerplate for starting new projects. I am more than happy to accept external contributions to the project in the form of feedback, bug reports and even better - pull requests :) \n\nIf you would like to submit a pull request, please make an effort to follow the guide in [CONTRIBUTING.md](CONTRIBUTING.md). \n \n---\nThanks for checking this out.\n\nCreated by:\n– Leopold Joy, [@leopoldjoy](https://twitter.com/leopoldjoy)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleopoldjoy%2Freact-ethereum-dapp-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleopoldjoy%2Freact-ethereum-dapp-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleopoldjoy%2Freact-ethereum-dapp-example/lists"}