DApp-MultiPage-Template

A template for Ethereum-based DApp.

A directory layout

components -- common UI components of a web page such as header, footer
ethereum -- ethereum files
- build -- compiled contracts
  - <contract-name>.json-- compiled contract of <contract-name>.sol
- contracts -- solidity contracts
  - <contract-name>.sol -- solidity file of smart contract
- <contract-name>.js --
- compile.js -- compiles <contract-name>.sol file and generates <contract-name>.json file
- deploy.js -- deploys the compiled contract onto Blockchain Network (e.g., Rinkeby)
- factory.js -- It tells web3 that a deployed copy of the contract exists.
- web3.js -- It configures web3 with a Blockchain network provider (in our case it is Rinkeby BC network) from metamask.
pages -- this directory contains react components that get turned into visitable webpages
- index.js -- home page of application
test -- test cases of smart contract
- <contract-name>.test.js-- test case of the <contract-name>
package.json -- project information and list require dependencies for the project
routes.js -- list the routes of the project
server.js -- boot up nextjs server and tells to use routes.js
README.md -- readme file of the project
node_modules -- project dependencies

Installation

npm init to generate package.json file
npm install --save ganache-cli mocha [email protected] fs-extra [email protected] to install dependencies
npm install --save [email protected] for deployment dependencies
npm install --save [email protected] react react-dom for next.js dependencies
npm install --save semantic-ui-react for UI components
npm install --save semantic-ui-css for semantic UI stylesheet
npm install --save next-routes for routing

User guide

Step 1: write smart contract (.sol file) into Remix Editor
Step 2: copy paste the smart contract (.sol file) into a file of contracts directory.
Step 3: compile the contract using compile.js
Step 4: test the contract using a file of a test directory. The contract is deployed on local network ganache
Step 5: deploy the contract on a test network (e.g., Rinkeby).
Step 6: extract the address of the deployed contract from console.
Step 7: Copy the address into contract-address.txt file for future use.
Step 8: Create React components into pages directory.
Step 9 : configures web3 with a provider from metamask in web3.js
Step 10: update factory.js file with a deployed contract address (specified in contract-address.txt)
Step 11: Use factory instance in React components (in pages directory) to interact with a deployed contract

Source of images: "Ethereum and Solidity: The Complete Developer's Guide" by Stephen Grider

WebApp and Smart Contract Interaction

This is an example of how factory pattern can be used to deploy different instances of a smart contract.

Smart contract compilation using solidity compiler

ethereum/compile.js

Next.js

next.js wraps react.js with some more functionalities such as routing, server-side rendering, hot module reload and so on.

pages

this repository contains React components (as .js files) that get turned into visitable webpages. When installed .nextjs (from .next folder) starts, it see the react components into pages directory and turn each into routes (according to its directory path), as shown belowed.