Merge pull request #52 from DalderupMaurice/feature/docker

feat(app): add docker support to prevent build issues

.dockerignore

@@ -0,0 +1 @@
+node_modules

.github/GUIDELINES.md

@@ -0,0 +1,35 @@
+## Project guidelines
+
+### Branches
+
+- `master` and `development` are protected and require a PR with approved reviews for changes
+- Use Conventional Commits' types for branches and camelCase the topic: `feat/ui`, `fix/login`, `chore/refactorHomePage`
+- use Squash Merge - when possible - and reference the pull request in the conventional commit message: `feat(ui): added responsive styling (#1)`
+
+### Committing and versioning
+
+This project adheres to [Semantic Versioning](https://semver.org/) and [Conventional Commits](https://conventionalcommits.org/). Don't forget to scope your commits!
+
+We use the following types everywhere: `feat`, `fix`, `chore` and `docs`. Refactor and test commits are considered chores. We only use `BREAKING CHANGE` when pushing, surprise surprise, breaking changes from `development` to `master`.
+
+Merging a `BREAKING CHANGE` commit to master corresponds with a Major version, `feat` with minor and `fix` with patch. Bundle your `chore` and `docs` commits with any of the previously mentioned types.
+
+**Don't forget to update the version in package.json as well before you merge a version update in development!** Because after every push to master, a corresponding tag should be created detailing all changes added to this new version in the summary and `CHANGELOG.md`.
+
+Husky has been added to provide automated `precommit` functionality that's hooked into Prettier and Jest. You still need to `git add` these changes and amend them to the previous commit, **so don't forget to amend the changes before you push!**
+
+### Changelogs
+
+Speaking of changelogs! When pushing changes to `development` that warrant a version update, group changes per version and then per type. Order your change types like this (_but only use what's applicable_):
+
+- Documentation
+- Chores
+- Bug Fixes
+- Features
+- BREAKING CHANGES
+
+You can find inspiration in this entry [here](https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog/CHANGELOG.md#100-2016-02-05).
+
+## Known issues
+
+Build assets to dedicated subdirectory <https://github.com/parcel-bundler/parcel/issues/233>

.github/renovate.json

@@ -0,0 +1,30 @@
+{
+  "extends": ["config:base"],
+  "ignoreDeps": [],
+  "schedule": ["on monday"],
+  "labels": ["Renovate 🌴"],
+  "semanticCommits": true,
+  "statusCheckVerify": true,
+  "packageRules": [
+    {
+      "packagePatterns": ["*"],
+      "semanticCommitType": "renovate"
+    },
+    {
+      "packageNames": ["eslint", "stylelint"],
+      "groupName": "lint"
+    },
+    {
+      "packageNames": ["fortawesome"],
+      "groupName": "fortawesome"
+    },
+    {
+      "packageNames": ["babel"],
+      "groupName": "babel"
+    },
+    {
+      "packageNames": ["enzyme"],
+      "groupName": "enzyme"
+    }
+  ]
+}

Dockerfile

@@ -0,0 +1,27 @@
+FROM node:lts-alpine as builder
+
+# install and cache app dependencies
+COPY ./client/package.json package.json
+RUN apk add --no-cache git
+
+## Install build toolchain, install node deps and compile native add-ons
+RUN apk add --no-cache python make g++
+RUN npm install --no-cache
+
+
+FROM node:lts-alpine as app
+
+# set working directory
+WORKDIR /app
+
+## Copy built node modules and binaries without including the toolchain
+COPY --from=builder node_modules /app/node_modules
+
+RUN ls /app
+RUN ls /app/node_modules
+
+# add `/app/node_modules/.bin` to $PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+# start app
+CMD ["npm", "start"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Maurice Dalderup
+Copyright (c) 2020 Maurice Dalderup
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,95 +1,64 @@
 <p align="center">
-  <img src="./logo.png" width="150px" /> 
+  <img src="./.github/logo.png" width="150px" />
 </p>
 
-<h1 align="center">react-boilerplate</h1>
+<h1 align="center">React + Web3.js - Simple Coin Example</h1>
 
 <p align="center">
-  This creates a project <strong>boilerplate</strong> for <strong>React</strong> with a custom stack
+  This creates a project <strong>boilerplate</strong> for <strong>React</strong> with a custom stack for Ethereum development
 </p>
 
 <p align="center">
-  <a href='https://travis-ci.org/DalderupMaurice/react-boilerplate?branch=master'>
-    <img src='https://travis-ci.org/DalderupMaurice/react-boilerplate.svg?branch=master' alt='Build Status' />
-  </a>
-  <a href='https://coveralls.io/github/DalderupMaurice/react-boilerplate?branch=master'>
-    <img src='https://coveralls.io/repos/github/DalderupMaurice/react-boilerplate/badge.svg?branch=master' alt='Coverage Status' />
-  </a>
-  <a href='https://gemnasium.com/github.com/DalderupMaurice/react-boilerplate'>
-    <img src="https://gemnasium.com/badges/github.com/DalderupMaurice/react-boilerplate.svg" alt="Dependency Status" />
+  <a href='https://gemnasium.com/github.com/DalderupMaurice/react-web3-coin-example'>
+    <img src="https://gemnasium.com/badges/github.com/DalderupMaurice/react-web3-coin-example.svg" alt="Dependency Status" />
   </a>
   <a href="https://deepscan.io/dashboard#view=project&pid=xxx&bid=xxx">
     <img src="https://deepscan.io/api/projects/xxxx/branches/xxxx/badge/grade.svg" alt="DeepScan grade">
   </a>
-  <img src='https://bettercodehub.com/edge/badge/DalderupMaurice/react-boilerplate?branch=master'>
+  <img src='https://bettercodehub.com/edge/badge/DalderupMaurice/react-web3-coin-example?branch=master'>
   <a href='https://github.com/prettier/prettier'>
     <img src='https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat'>
   </a>
 </p>
 
 ## Purpose
+
 The goal of this project is to provide a quickstart in React with various, albeit opinionated, dependencies already installed and configured. Additionally, it's a way to provide good practices for repo management.
 
 In this repo you can find:
-* React, our framework of choice
-* SCSS
-* Jest, a testing framework
-* Babel, transpiling React and ES6 made ezpz
-* Parcel, a kickass bundler
-* Prettier and ESLint, kickass linting support
+
+- React, our framework of choice
+- SCSS
+- Jest, a testing framework
+- Babel, transpiling React and ES6 made ezpz
+- Parcel, a kickass bundler
+- Prettier and ESLint, kickass linting support
 
 Also some plugins:
-* vendor prefixing, camelCase and global styling JSS plugins
-* env and React Babel presets
-* babel-polyfill
-* React and Prettier ESLint plugins
+
+- vendor prefixing, camelCase and global styling JSS plugins
+- env and React Babel presets
+- babel-polyfill
+- React and Prettier ESLint plugins
 
 And finally some testing and security:
-* Travis CI, automated builds/testing
-* Coveralls, code coverage
-* Deepscan and Better Code Hub, code analysis
-* Gemnasium and Renovate, dependency monitoring
+
+- Travis CI, automated builds/testing
+- Coveralls, code coverage
+- Deepscan and Better Code Hub, code analysis
+- Gemnasium and Renovate, dependency monitoring
 
 ## Setup
+
 ```bash
-$ git clone https://github.com/DalderupMaurice/react-boilerplate.git my-app-name
-$ cd my-app-name
-$ yarn
-$ yarn start
+git clone https://github.com/DalderupMaurice/react-web3-coin-example.git my-app-name
+cd my-app-name
+yarn
+yarn start
 ```
 
 Change `README.md` and `package.json` to fit your project needs. Delete `LICENSE` if not applicable.
 
 ## Testing
-Use `yarn test:local` or `npm run test:local` to run all tests locally. The `test` command is reserved for CI builds.
-
 
-## Project guidelines
-### Branches
-* `master` and `development` are protected and require a PR with approved reviews for changes
-* Use Conventional Commits' types for branches and camelCase the topic: `feat/ui`, `fix/login`, `chore/refactorHomePage`
-* use Squash Merge - when possible - and reference the pull request in the conventional commit message: `feat(ui): added responsive styling (#1)`
-
-### Committing and versioning
-This project adheres to [Semantic Versioning](https://semver.org/) and [Conventional Commits](https://conventionalcommits.org/). Don't forget to scope your commits!
-
-We use the following types everywhere: `feat`, `fix`, `chore` and `docs`. Refactor and test commits are considered chores. We only use `BREAKING CHANGE` when pushing, surprise surprise, breaking changes from `development` to `master`.
-
-Merging a `BREAKING CHANGE` commit to master corresponds with a Major version, `feat` with minor and `fix` with patch. Bundle your `chore` and `docs` commits with any of the previously mentioned types.
-
-**Don't forget to update the version in package.json as well before you merge a version update in development!** Because after every push to master, a corresponding tag should be created detailing all changes added to this new version in the summary and `CHANGELOG.md`.
-
-Husky has been added to provide automated `precommit` functionality that's hooked into Prettier and Jest. You still need to `git add` these changes and amend them to the previous commit, **so don't forget to amend the changes before you push!**
-
-### Changelogs
-Speaking of changelogs! When pushing changes to `development` that warrant a version update, group changes per version and then per type. Order your change types like this (*but only use what's applicable*):
-* Documentation
-* Chores
-* Bug Fixes
-* Features
-* BREAKING CHANGES
-
-You can find inspiration in this entry [here](https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog/CHANGELOG.md#100-2016-02-05).
-
-## Known issues
-Build assets to dedicated subdirectory https://github.com/parcel-bundler/parcel/issues/233
+Use `yarn test:local` or `npm run test:local` to run all tests locally. The `test` command is reserved for CI builds.

client/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "react-boilerplate",
+  "version": "1.0.0",
+  "description": "This creates a project boilerplate for React with a custom stack",
+  "scripts": {
+    "lint": "eslint 'src/**/*.js*' --fix",
+    "start": "parcel src/index.html --no-cache",
+    "test": "jest --all --verbose --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
+    "test:local": "jest --all --verbose --coverage"
+  },
+  "dependencies": {
+    "antd": "3.22.1",
+    "axios": "0.19.0",
+    "babel-polyfill": "6.26.0",
+    "lodash": "4.17.14",
+    "node-sass": "4.9.0",
+    "prop-types": "15.6.2",
+    "react": "16.8.6",
+    "react-dom": "16.4.2",
+    "react-router": "4.3.1",
+    "react-router-dom": "4.3.1",
+    "web3": "1.0.0-beta.34"
+  },
+  "devDependencies": {
+    "babel-cli": "6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "8.2.3",
+    "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-function-bind": "6.22.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-preset-env": "1.7.0",
+    "babel-preset-react": "6.24.1",
+    "coveralls": "3.0.1",
+    "enzyme": "3.3.0",
+    "enzyme-adapter-react-16": "1.1.1",
+    "enzyme-to-json": "3.3.4",
+    "eslint": "5.16.0",
+    "eslint-config-airbnb": "17.0.0",
+    "eslint-config-prettier": "2.9.0",
+    "eslint-plugin-import": "2.12.0",
+    "eslint-plugin-jsx-a11y": "6.0.3",
+    "eslint-plugin-prettier": "2.6.0",
+    "eslint-plugin-react": "7.9.1",
+    "husky": "0.14.3",
+    "jest": "23.1.0",
+    "parcel-bundler": "1.12.3",
+    "prettier": "1.13.5",
+    "raf": "3.4.0",
+    "react-test-renderer": "16.8.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DalderupMaurice/react-boilerplate.git"
+  },
+  "keywords": [
+    "React",
+    "Parcel",
+    "JS",
+    "HTML",
+    "boilerplate",
+    "starter"
+  ],
+  "author": "Maurice Dalderup <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/DalderupMaurice/react-boilerplate/issues"
+  },
+  "homepage": "https://github.com/DalderupMaurice/react-boilerplate#readme",
+  "jest": {
+    "setupFiles": [
+      "./jest.setup.js"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!src/index.jsx",
+      "!src/__helpers__/TestPropTypes.helper.js",
+      "!**/node_modules/**"
+    ],
+    "moduleNameMapper": {
+      "^.+\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/src/__mocks__/file.mock.js"
+    },
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

src/Services/Web3Service.jsx → client/src/Services/Web3Service.jsx

@@ -1,8 +1,10 @@
-import Web3 from "web3";
-import _ from "lodash";
+import Web3 from 'web3';
+import _ from 'lodash';
 
 export default class Web3Service {
   constructor(contract = null, connectionUrl = null) {
+    console.log('connection', connectionUrl);
+    console.log('connection', Web3.givenProvider);
     this.web3 = new Web3(connectionUrl || Web3.givenProvider);
 
     this.contract = {};
@@ -11,7 +13,7 @@ export default class Web3Service {
 
   addContract = async contractJSON => {
     this.contract = await new this.web3.eth.Contract(contractJSON.abi);
-    const key = _.findKey(contractJSON.networks, "address");
+    const key = _.findKey(contractJSON.networks, 'address');
     this.contract.options.address = contractJSON.networks[key].address;
   };