update: apply eslint and move hardcoded values to .env

.editorconfig

+[*]
+end_of_line = lf
+charset = utf-8
+indent_style = space
+tab_width = 2
\ No newline at end of file

.eslintignore

+config/**
+scripts/**
+src/sw/**
\ No newline at end of file

.eslintrc.json

+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react"
+  ],
+  "parser": "babel-eslint",
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": [
+          "src"
+        ]
+      }
+    }
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "prettier",
+    "react-hooks",
+    "import",
+    "jsx-a11y"
+  ],
+  "rules": {
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off",
+    "react/state-in-constructor": "off",
+    "react/destructuring-assignment": "off",
+    "react/jsx-props-no-spreading": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true
+      }
+    ],
+    "comma-dangle": "off",
+    "prefer-destructuring": "off",
+    "prefer-rest-params": "off",
+    "prefer-spread": "off",
+    "no-plusplus": "off",
+    "no-underscore-dangle": "off",
+    "import/prefer-default-export": "off",
+    "consistent-return": "off",
+    "no-continue": "off",
+    "no-shadow": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "global-require": "off",
+    "no-param-reassign": "off",
+    "react/forbid-prop-types": "off",
+    "camelcase": "off"
+  }
+}
\ No newline at end of file

package.json

 {
   "name": "botc-frontend",
   "version": "0.0.1",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "axios": "^0.19.0",
     "chart.js": "^2.7.3",
     "chartist": "^0.11.0",
+    "eslint": "^6.6.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.6.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "history": "^4.10.1",
     "perfect-scrollbar": "^1.4.0",
+    "prettier": "^1.19.1",
+    "prop-types": "^15.7.2",
     "qrcode.react": "^0.9.3",
     "react": "^16.11.0",
     "react-bootstrap-sweetalert": "^4.4.1",
@@ -23,15 +41,6 @@
     "redux-actions": "^2.6.4",
     "redux-thunk": "^2.3.0"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": [
     ">0.2%",
     "not dead",
@@ -39,6 +48,19 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "husky": "^3.1.0",
+    "lint-staged": "^9.5.0",
     "redux-devtools-extension": "^2.13.8"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ]
   }
 }
\ No newline at end of file

src/.env.example

+# https://create-react-app.dev/docs/adding-custom-environment-variables/
+
+# the places where these variables are used are indicated in the comments below
+
+# src/pages/login/constants.js
+REACT_APP_CLIENT_ID="<< client id here >>"
+REACT_APP_CLIENT_SECRET="<< client secret here >>"
+
+# src/components/widgets/WalletActions/CashIn/methods/actions.js
+# src/utils.js
+REACT_APP_BACKEND_URL="<< api base url here >>"
+REACT_APP_WALLET_PATH="<< wallet api path here >>"
+
+# src/pages/login/actions.js
+REACT_APP_LOGIN_PATH="<< login api path here >>"
+
+# src/components/widgets/Transactions/actions.js
+REACT_APP_TRANSACTIONS_PATH="<< transactions api path here >>"
+
+# src/components/widgets/MonthEarnings/actions.js
+REACT_APP_MONTH_EARNINGS_PATH="<< month earnings api path here >>"
+
+# src/components/widgets/LastTransactions/actions.js
+REACT_APP_LAST_TRANSACTIONS_PATH="<< last transactions api path here >>"
+
+# src/components/widgets/Earnings/actions.js
+REACT_APP_EARNINGS_PATH="<< earnings api path here >>"
+
+# src/components/widgets/CurrenciesValue/actions.js
+REACT_APP_CURRENCIES_VALUE_PATH="<< currencies value api path here >>"
\ No newline at end of file

src/App.js

-import React, { Component } from 'react';
-import { Provider } from 'react-redux';
-import store from './store';
-import Router from './routes';
-import './App.css';
-
-class App extends Component {
-  render() {
-    return (
-      <Provider store={store}>
-        <Router />
-      </Provider>
-    );
-  }
-}
-
-export default App;

src/App.jsx

+import React from 'react';
+import { Provider } from 'react-redux';
+import store from 'store';
+import Router from 'routes';
+import 'App.css';
+
+const App = () => (
+  <Provider store={store}>
+    <Router />
+  </Provider>
+);
+
+export default App;

src/components/widgets/CurrenciesValue/actions.js

 import { createAction } from 'redux-actions';
-import CURRENCIES_VALUE  from './constants';
 import { fetchApi } from 'utils';
+import { CURRENCIES_VALUE } from './constants';
 
-
-const CURRENCIES_VALUE_URL = "exchange/v1/ticker/eur";
+const CURRENCIES_VALUE_PATH = process.env.REACT_APP_CURRENCIES_VALUE_PATH;
 
 const reset = createAction(CURRENCIES_VALUE, () => ({
-  status: 'initial',
+  status: 'initial'
 }));
 
 const begin = createAction(CURRENCIES_VALUE, () => ({
-  status: 'pending',
+  status: 'pending'
 }));
 
 const fail = createAction(CURRENCIES_VALUE, error => ({
   error,
-  status: 'error',
+  status: 'error'
 }));
 
 const success = createAction(CURRENCIES_VALUE, values => ({
@@ -23,25 +22,27 @@ const success = createAction(CURRENCIES_VALUE, values => ({
   status: 'success'
 }));
 
-const getValues = () =>
-  (dispatch) => {
-    dispatch(begin);
-    fetchApi({
-        path: CURRENCIES_VALUE_URL
-    }).then(response => {
-        let values = response;
-        dispatch(success(values.data));
-    }).catch(error => {
-        console.error("ERROR");
+const getValues = () => dispatch => {
+  dispatch(begin);
+  fetchApi({
+    path: CURRENCIES_VALUE_PATH
+  })
+    .then(response => {
+      const values = response;
+      dispatch(success(values.data));
+    })
+    // TODO: handle error
+    .catch(error => {
+      throw error;
     });
-  };
+};
 
 const actions = {
-    reset,
-    begin,
-    fail,
-    success,
-    getValues
+  reset,
+  begin,
+  fail,
+  success,
+  getValues
 };
 
 export default actions;

src/components/widgets/CurrenciesValue/constants.js

-const CURRENCIES_VALUE = "CURRECIES_VALUE";
-
-export default CURRENCIES_VALUE;
+export const CURRENCIES_VALUE = 'CURRENCIES_VALUE';

src/components/widgets/CurrenciesValue/index.js

-import React, { Component } from 'react'
-import actions from './actions';
-import { connect } from 'react-redux';
-import GridContainer from "components/atoms/Grid/GridContainer.jsx";
-import GridItem from "components/atoms/Grid/GridItem.jsx";
-import Card from "components/atoms/Card/Card.jsx";
-import CardHeader from "components/atoms/Card/CardHeader.jsx";
-import CardBody from "components/atoms/Card/CardBody.jsx";
-
-class CurrenciesValue extends Component {
-  constructor(){
-      super()
-      this.state = {
-          loading: true,
-      }
-  }
-
-  componentWillMount(){
-      this.props.getValues();
-  }
-
-  componentWillReceiveProps(nextProps){
-      if(nextProps.status === "success"){
-          this.setState({ loading: false});
-      }
-
-  }
-  render() {
-    const { values = {} } = this.props;
-    if(this.state.loading && Object.keys(values).length === 0) return "Loading";
-    let values_list = Object.keys(values).map( key => {
-        return (
-          <GridItem key={key} >
-                <CardBody>
-                    {key}
-                    <br/>
-                    {values[key]}
-                </CardBody>
-          </GridItem>
-        )
-    })
-
-    return (
-        <div>
-            <Card>
-            <CardHeader>Currencies value</CardHeader>
-                <GridContainer>
-                { values_list }
-                </GridContainer>
-            </Card>
-        </div>
-    )
-  }
-}
-const mapStateToProps = (state) => ({
-    values: state.currencies_value.values,
-    status: state.currencies_value.status
-})
-export default connect(mapStateToProps, actions)(CurrenciesValue);

src/components/widgets/CurrenciesValue/index.jsx

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import GridContainer from 'components/atoms/Grid/GridContainer';
+import GridItem from 'components/atoms/Grid/GridItem';
+import Card from 'components/atoms/Card/Card';
+import CardHeader from 'components/atoms/Card/CardHeader';
+import CardBody from 'components/atoms/Card/CardBody';
+import actions from './actions';
+
+class CurrenciesValue extends Component {
+  constructor() {
+    super();
+    this.state = {
+      loading: true
+    };
+  }
+
+  // TODO: fix me
+  UNSAFE_componentWillMount() {
+    this.props.getValues();
+  }
+
+  // TODO: fix me
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.status === 'success') {
+      this.setState({ loading: false });
+    }
+  }
+
+  render() {
+    const { values = {} } = this.props;
+    if (this.state.loading && Object.keys(values).length === 0)
+      return 'Loading';
+    const values_list = Object.keys(values).map(key => {
+      return (
+        <GridItem key={key}>
+          <CardBody>
+            {key}
+            <br />
+            {values[key]}
+          </CardBody>
+        </GridItem>
+      );
+    });
+
+    return (
+      <div>
+        <Card>
+          <CardHeader>Currencies value</CardHeader>
+          <GridContainer>{values_list}</GridContainer>
+        </Card>
+      </div>
+    );
+  }
+}
+const mapStateToProps = state => ({
+  values: state.currencies_value.values,
+  status: state.currencies_value.status
+});
+export default connect(mapStateToProps, actions)(CurrenciesValue);

src/components/widgets/CurrenciesValue/reducers.js

-import  CURRENCIES_VALUE from './constants';
+import { CURRENCIES_VALUE } from './constants';
 
-export default function currencies_value(state = { status: 'initial' }, action) {
+export default function currencies_value(
+  state = { status: 'initial' },
+  action
+) {
   switch (action.type) {
-    case CURRENCIES_VALUE : {
-      const { 
+    case CURRENCIES_VALUE: {
+      const {
         values = state.values,
         error = state.error,
         status = state.status
-       } = action.payload
+      } = action.payload;
       return {
         values,
         error,
-        status,
+        status
       };
     }
     default:
       return state;
   }
-}
\ No newline at end of file
+}

src/components/widgets/Earnings/actions.js

 import { createAction } from 'redux-actions';
-import EARNINGS from './constants';
 import { fetchApi } from 'utils';
+import { EARNINGS } from './constants';
 
-const EARNINGS_URL = 'user/v1/wallet/earnings';
+const EARNINGS_PATH = process.env.REACT_APP_EARNINGS_PATH;
 
 const reset = createAction(EARNINGS, () => ({
-    status: 'initial',
+  status: 'initial'
 }));
 
 const begin = createAction(EARNINGS, () => ({
-    status: 'pending',
+  status: 'pending'
 }));
 
 const fail = createAction(EARNINGS, error => ({
-    error,
-    status: 'error',
+  error,
+  status: 'error'
 }));
 
-const success = createAction(EARNINGS, earnings=> ({
-    earnings,
-    status: 'success'
+const success = createAction(EARNINGS, earnings => ({
+  earnings,
+  status: 'success'
 }));
 
-const getEarnings = () =>
-    (dispatch) => {
-        dispatch(begin);
-        fetchApi({
-            path: EARNINGS_URL
-        }).then(response => {
-            let earnings = response;
-            dispatch(success(earnings.data));
-        }).catch(error => {
-            console.error("ERROR");
-        });
-    };
+const getEarnings = () => dispatch => {
+  dispatch(begin);
+  fetchApi({
+    path: EARNINGS_PATH
+  })
+    .then(response => {
+      const earnings = response;
+      dispatch(success(earnings.data));
+    })
+    // TODO: handle error
+    .catch(error => {
+      throw error;
+    });
+};
 
 const actions = {
-    reset,
-    begin,
-    fail,
-    success,
-    getEarnings
+  reset,
+  begin,
+  fail,
+  success,
+  getEarnings
 };
 
 export default actions;

src/components/widgets/Earnings/constants.js

-const EARNINGS = "EARNINGS";
-
-export default EARNINGS;
+export const EARNINGS = 'EARNINGS';

src/components/widgets/Earnings/index.js

-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import actions from './actions';
-import CardHeader from "components/atoms/Card/CardHeader.jsx";
-import CardBody from "components/atoms/Card/CardBody.jsx";
-import Button from "components/atoms/CustomButtons/Button.jsx";
-import { Popover, Paper } from '@material-ui/core';
-import Refresh from "@material-ui/icons/Refresh";
-
-
-class Earnings extends Component {
-  constructor(){
-      super();
-      this.state = {
-          loading: true,
-          anchorEl: null
-      };
-  }
-
-
-  componentWillMount() {
-      this.props.getEarnings();
-  }
-
-
-  componentWillReceiveProps(nextProps){
-      if(nextProps.status === "success") {
-          this.setState({loading: false});
-      }
-  }
-
-  handlePopoverOpen = event => {
-    this.setState({ anchorEl: event.currentTarget });
-  };
-
-  handlePopoverClose = () => {
-    this.setState({ anchorEl: null });
-  };
-  
-  render() {
-    const { earnings = {} } = this.props;
-    const {  anchorEl } = this.state;
-    let earningComponent = "";
-    if(!earnings) {
-        earningComponent = (<span>No data found</span>)
-    } else {
-        const { day, week, month, currency, scale = 0 } = earnings;
-        earningComponent = (
-            <CardBody>
-                <div>Day: {day / Math.pow(10, scale).toFixed(scale)} {currency}</div>
-                <div>Week: {week / Math.pow(10, scale).toFixed(scale)} {currency}</div>
-                <div>Month: {month / Math.pow(10, scale).toFixed(scale)} {currency}</div>
-            </CardBody>
-        )
-    }
-
-    return (
-    <div
-          onMouseEnter={this.handlePopoverOpen}
-          onMouseLeave={this.handlePopoverClose}
-    >
-        <Paper>
-            <CardHeader>
-                Earnings
-            </CardHeader>
-            {earningComponent}
-        </Paper>
-        <Popover
-            anchorEl={anchorEl}
-