style: Manual lint fixes

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
   plugins: ['react', 'prettier'],
   rules: {
     'react/prop-types': 'off', // Disable prop-types rule as this is used selectively in this repo
-    'no-console': 'warn', // Warn on console statements
+    'no-console': 'off', // Do not warn on console statements: they are expected on this application
     'react/react-in-jsx-scope': 'off', // React 17 specific jsx-runtime enabled, so React import is not required
     'prettier/prettier': 'error', // Add Prettier errors as ESLint errors
     'arrow-parens': ['error', 'as-needed'],
@@ -50,6 +50,7 @@ module.exports = {
         vars: 'all',
         args: 'after-used',
         varsIgnorePattern: '^_', // Allow variables starting with _ to be unused
+        argsIgnorePattern: '^_', // Allow parameters starting with _ to be unused
       },
     ],
     'no-underscore-dangle': 0,
@@ -68,6 +69,9 @@ module.exports = {
     'jest/no-disabled-tests': 'off', // It's useful to have skipped tests on our suites
 
     camelcase: 'off', // Conflicts with variables obtained directly from the fullnode endpoints
+    'import/no-named-as-default-member': 'off', // This will require a more complex refactor to fix
+    'react/no-string-refs': 'off', // This rule will be enforced only when the screens are refactored as functional components
+    'class-methods-use-this': 'off', // This rule will be enforced only when the screens are refactored as functional components
   },
   settings: {
     react: {

src/api/addressApi.js

@@ -27,6 +27,7 @@ const addressApi = {
       if (res && res.data) {
         return res.data;
       }
+      return undefined;
     });
   },
 
@@ -37,6 +38,7 @@ const addressApi = {
         if (res && res.data) {
           return res.data;
         }
+        return undefined;
       });
   },
 
@@ -66,6 +68,7 @@ const addressApi = {
       if (res && res.data) {
         return res.data;
       }
+      return undefined;
     });
   },
 };

src/api/addressApiLegacy.js

@@ -15,8 +15,9 @@ const addressApi = {
         if (res && res.data) {
           return res.data;
         }
+        return undefined;
       })
-      .catch(error => {
+      .catch(_error => {
         // something wrong with request
       });
   },
@@ -46,8 +47,9 @@ const addressApi = {
         if (res && res.data) {
           return res.data;
         }
+        return undefined;
       })
-      .catch(error => {
+      .catch(_error => {
         // something wrong with request
       });
   },

src/api/axiosInstance.js

@@ -6,7 +6,7 @@
  */
 
 import axios from 'axios';
-import { EXPLORER_SERVICE_BASE_URL } from '../constants.js';
+import { EXPLORER_SERVICE_BASE_URL } from '../constants';
 
 const errorHandler = error => {
   console.log('ERROR RESPONSE', error);

src/api/customAxiosInstance.js

@@ -17,9 +17,8 @@ import hathorLib from '@hathor/wallet-lib';
  * Create an axios instance to be used when sending requests
  *
  * @param {callback} resolve Callback to be stored and used in case of a retry after a fail
- * @param {number} timeout Timeout in milliseconds for the request
  */
-const createRequestInstance = (resolve, timeout) => {
+const createRequestInstance = resolve => {
   // Will override lib axios instance increasing the default request timeout
   const instance = hathorLib.axios.defaultCreateRequestInstance(resolve, 30000);
   return instance;

src/api/metadataApi.js

@@ -15,8 +15,9 @@ const metadataApi = {
         if (res && id in res.data) {
           return res.data[id];
         }
+        return undefined;
       })
-      .catch(error => {
+      .catch(_error => {
         // something wrong with request
       });
   },

src/components/DagComponent.js

@@ -113,7 +113,7 @@ class DagComponent extends React.Component {
       const newLinks = [];
       for (const parent of parents) {
         // Validate if parent is in the data, otherwise no need to add a link
-        if (this.graph.hasOwnProperty(parent)) {
+        if (this.graph[parent]) {
           // Creating link for each parent
           const linkData = {
             source: {
@@ -161,7 +161,7 @@ class DagComponent extends React.Component {
       const newLinks = [];
       for (const parent of parents) {
         // Validate if parent is in the data, otherwise no need to add a link
-        if (this.graph.hasOwnProperty(parent)) {
+        if (this.graph[parent]) {
           // Creating link for each parent
           const linkData = {
             source: {
@@ -228,18 +228,10 @@ class DagComponent extends React.Component {
       .append('g')
       .attr('class', 'link')
       .append('line')
-      .attr('x1', function(d) {
-        return d.source.x;
-      })
-      .attr('y1', function(d) {
-        return d.source.y;
-      })
-      .attr('x2', function(d) {
-        return d.target.x;
-      })
-      .attr('y2', function(d) {
-        return d.target.y;
-      });
+      .attr('x1', d => d.source.x)
+      .attr('y1', d => d.source.y)
+      .attr('x2', d => d.target.x)
+      .attr('y2', d => d.target.y);
 
     this.link = this.gLinks.selectAll('line');
   }
@@ -252,9 +244,7 @@ class DagComponent extends React.Component {
       .selectAll()
       .data(txs)
       .enter()
-      .filter(function(d) {
-        return !d.isBlock;
-      })
+      .filter(d => !d.isBlock)
       .append('g')
       .attr('class', 'tx');
 
@@ -294,9 +284,7 @@ class DagComponent extends React.Component {
       .attr('y', d => {
         return d.y;
       })
-      .text(function(d) {
-        return d.id.substring(0, 4);
-      });
+      .text(d => d.id.substring(0, 4));
 
     this.tx = this.gTxs.selectAll('circle');
   }
@@ -309,9 +297,7 @@ class DagComponent extends React.Component {
       .selectAll()
       .data(blocks)
       .enter()
-      .filter(function(d) {
-        return d.isBlock;
-      })
+      .filter(d => d.isBlock)
       .append('g')
       .attr('class', 'block');
 
@@ -344,9 +330,7 @@ class DagComponent extends React.Component {
 
     // Add text to show block info
     block
-      .filter(function(d) {
-        return d.isBlock;
-      })
+      .filter(d => d.isBlock)
       .append('text')
       .append('tspan')
       .attr('class', 'block-text')
@@ -358,9 +342,7 @@ class DagComponent extends React.Component {
       .attr('y', d => {
         return d.y + this.blockHeight / 2;
       })
-      .text(function(d) {
-        return d.id.substring(0, 4);
-      });
+      .text(d => d.id.substring(0, 4));
 
     this.block = this.gBlocks.selectAll('rect');
   }
@@ -435,15 +417,15 @@ class DagComponent extends React.Component {
       /** Data from the tx being hovered */
       const d = mouseEvent.currentTarget.__data__;
       if (this.tx) {
-        this.tx.style('stroke-opacity', function(o) {
+        this.tx.style('stroke-opacity', function changeStrokeOpacity(o) {
           const thisOpacity = d.links.indexOf(o.id) > -1 || d.id === o.id ? 1 : opacity;
           this.setAttribute('fill-opacity', thisOpacity);
           return thisOpacity;
         });
       }
 
       if (this.block) {
-        this.block.style('stroke-opacity', function(o) {
+        this.block.style('stroke-opacity', function changeStrokeOpacity(o) {
           const thisOpacity = d.links.indexOf(o.id) > -1 || d.id === o.id ? 1 : opacity;
           this.setAttribute('fill-opacity', thisOpacity);
           return thisOpacity;
@@ -463,9 +445,11 @@ class DagComponent extends React.Component {
     // TODO
     // I am blocking zoom in right now because I was having a bug to auto translate when zoomed in
     if (event.transform.k > 1) {
+      /* eslint-disable no-param-reassign */
       event.transform.x = this.lastZoomX;
       event.transform.y = this.lastZoomY;
       event.transform.k = this.lastZoomScale;
+      /* eslint-enable no-param-reassign */
       return;
     }
     this.gDraw.attr('transform', event.transform);

src/components/Network.js

@@ -65,7 +65,7 @@ class Network extends React.Component {
         this.setState({ peers }, () => {
           let peerId = peers.find(target => target === params.peerId);
           if (!peerId) {
-            peerId = peers[0];
+            [peerId] = peers;
           }
           this.onPeerChange(peerId);
         });
@@ -289,7 +289,7 @@ class Network extends React.Component {
     };
 
     const loadTableBody = () => {
-      return this.state.known_peers.map((peer, idx) => {
+      return this.state.known_peers.map((peer, _idx) => {
         const conn = this.getConnection(peer);
         const isConnected = !!conn;
         if (isConnected) {

src/components/Version.js

@@ -8,13 +8,13 @@
 import React from 'react';
 import { VERSION } from '../constants';
 
-const Version = props => {
+function Version() {
   return (
     <div className="d-flex flex-column version-wrapper align-items-center">
       <span>Version</span>
       <span>{VERSION}</span>
     </div>
   );
-};
+}
 
 export default Version;

src/index.js

@@ -8,6 +8,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import FlagProvider from '@unleash/proxy-client-react';
+import { Provider } from 'react-redux';
 import App from './App';
 
 import 'bootstrap';
@@ -17,7 +18,6 @@ import 'highlight.js/styles/github.css';
 import './index.css';
 
 import store from './store/index';
-import { Provider } from 'react-redux';
 import { UNLEASH_CONFIG } from './constants';
 
 const container = document.getElementById('root');

src/screens/FeatureList.js

@@ -8,14 +8,12 @@
 import React from 'react';
 import Features from '../components/feature_activation/Features';
 
-class FeatureList extends React.Component {
-  render() {
-    return (
-      <div className="content-wrapper">
-        <Features title={<h1>Feature Activation</h1>} />
-      </div>
-    );
-  }
+function FeatureList() {
+  return (
+    <div className="content-wrapper">
+      <Features title={<h1>Feature Activation</h1>} />
+    </div>
+  );
 }
 
 export default FeatureList;

src/utils/date.js

@@ -25,14 +25,15 @@ const dateFormatter = {
   },
 
   uptimeFormat(uptime) {
-    uptime = Math.floor(uptime);
-    const days = Math.floor(uptime / 3600 / 24);
-    uptime %= 3600 * 24;
-    const hours = Math.floor(uptime / 3600);
-    uptime %= 3600;
-    const minutes = Math.floor(uptime / 60);
-    uptime %= 60;
-    const seconds = uptime;
+    let tmpUptime = uptime;
+    tmpUptime = Math.floor(tmpUptime);
+    const days = Math.floor(tmpUptime / 3600 / 24);
+    tmpUptime %= 3600 * 24;
+    const hours = Math.floor(tmpUptime / 3600);
+    tmpUptime %= 3600;
+    const minutes = Math.floor(tmpUptime / 60);
+    tmpUptime %= 60;
+    const seconds = tmpUptime;
     const pad = n => (Math.abs(n) >= 10 ? n : `0${n}`);
     const uptime_str = `${days} days, ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
     return uptime_str;

src/utils/helpers.js

@@ -151,13 +151,14 @@ const helpers = {
    * @inner
    */
   divideValueIntoPrefix(value) {
+    let tmpValue = value;
     let divisions = 0;
-    while (value / 1000 > 1) {
-      value /= 1000;
+    while (tmpValue / 1000 > 1) {
+      tmpValue /= 1000;
       divisions += 1;
     }
 
-    return { value: value.toFixed(2), divisions };
+    return { value: tmpValue.toFixed(2), divisions };
   },
 
   /**