feat: improve feature activation UI with thousand separator for heigh…

…t values

src/components/feature_activation/FeatureRow.js

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import featureActivation from '../../utils/featureActivation';
+import helpers from '../../utils/helpers';
 
 
 class FeatureRow extends React.Component {
@@ -21,9 +22,9 @@ class FeatureRow extends React.Component {
         <td className="d-lg-table-cell pr-3">{prettyState}</td>
         <td className="d-lg-table-cell pr-3">{acceptance_percentage}</td>
         <td className="d-lg-table-cell pr-3">{(this.props.feature.threshold * 100).toFixed(0)}%</td>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.start_height}</td>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.minimum_activation_height}</td>
-        <td className="d-lg-table-cell pr-3">{this.props.feature.timeout_height}</td>
+        <td className="d-lg-table-cell pr-3">{helpers.renderValue(this.props.feature.start_height, true)}</td>
+        <td className="d-lg-table-cell pr-3">{helpers.renderValue(this.props.feature.minimum_activation_height, true)}</td>
+        <td className="d-lg-table-cell pr-3">{helpers.renderValue(this.props.feature.timeout_height, true)}</td>
         <td className="d-lg-table-cell pr-3">{this.props.feature.lock_in_on_timeout.toString()}</td>
         <td className="d-lg-table-cell pr-3">{this.props.feature.version}</td>
       </tr>

src/components/feature_activation/Features.js

@@ -14,6 +14,8 @@ import FeatureRow from './FeatureRow';
 import colors from '../../index.scss';
 import PaginationURL from '../../utils/pagination';
 import featureApi from '../../api/featureApi';
+import helpers from '../../utils/helpers';
+
 
 class Features extends React.Component {
   constructor(props) {
@@ -184,7 +186,7 @@ class Features extends React.Component {
     const loadFeaturesPage = () => {
       return (
         <div>
-          <div>Showing feature states for <Link to={`/transaction/${this.state.block_hash}`}>current best block</Link> at height {this.state.block_height}.</div>
+          <div>Showing feature states for <Link to={`/transaction/${this.state.block_hash}`}>current best block</Link> at height {helpers.renderValue(this.state.block_height, true)}.</div>
           {!this.state.loaded ? <ReactLoading type='spin' color={colors.purpleHathor} delay={500} /> : loadTable()}
           {loadPagination()}
           <div className="f-flex flex-column align-items-start common-div bordered-wrapper mt-3 mt-lg-0 w-100 feature-column-descriptions">