Various improvements

package.json

@@ -58,6 +58,7 @@
     "react-router-dom": "^4.2.2",
     "react-spinners": "^0.2.6",
     "react-sticky": "^6.0.2",
+    "react-table": "^6.8.2",
     "react-timeago": "4.1.9",
     "reactstrap": "^5.0.0-beta.3",
     "redux": "^3.7.2",

src/components/Accounts.js

@@ -1,47 +1,25 @@
-import React, {Component, Fragment} from 'react';
+import React, {Component} from 'react';
 import {connect} from "react-redux";
 import {loadAccounts} from "../actions/app";
-import MediaQuery from 'react-responsive';
 import {tu} from "../utils/i18n";
 import {BarLoader} from "./common/loaders";
 import {FormattedNumber, injectIntl} from "react-intl";
-import {filter} from "lodash";
+import ReactTable from "react-table";
+import "react-table/react-table.css";
 
 class Accounts extends Component {
 
   constructor() {
     super();
 
     this.state = {
-      searchString: "",
     }
   }
 
   componentDidMount() {
     this.props.loadAccounts();
   }
 
-  onSearchFieldChangeHandler = (e) => {
-      this.setState({
-          searchString: e.target.value,
-      })
-  };
-
-  filteredAccounts() {
-    let {accounts} = this.props;
-    let {searchString} = this.state;
-
-    searchString = searchString.toUpperCase();
-
-    if (searchString.length > 0) {
-      accounts = filter(
-        accounts, a =>
-          a.address.toUpperCase().indexOf(searchString) !== -1);
-    }
-
-    return accounts;
-  }
-
   renderAccounts() {
 
     let {accounts} = this.props;
@@ -54,56 +32,57 @@ class Accounts extends Component {
       );
     }
 
-    accounts = this.filteredAccounts();
+    var arr = [];
+
+    for (var i = 0; i < accounts.length; i++) {
+        let transformed = {
+            index: i+1,
+            address: accounts[i].address,
+            balance: accounts[i].balanceNum
+        };
+
+        arr.push(transformed);
+    }
+
 
     return (
-      <Fragment>
-        <MediaQuery minWidth={980}>
-          <table className="table table-striped">
-            <thead className="thead-dark">
-            <tr>
-              <th>#</th>
-              <th>{tu("address")}</th>
-              <th className="text-right">{tu("balance")}</th>
-            </tr>
-            </thead>
-            <tbody>
-            {
-              accounts.map((account, index) => (
-                <tr key={account.address}>
-                  <th scope="row">{index + 1}</th>
-                  <td>{account.address}</td>
-                  <td className="text-right">
-                    <FormattedNumber value={account.balanceNum} /> TRX
-                  </td>
-                </tr>
-              ))
-            }
-            </tbody>
-          </table>
-        </MediaQuery>
-        <MediaQuery maxWidth={980}>
-          <div className="p-3">
-            {
-              accounts.map((account, index) => (
-                <div className="media small mb-2" key={account.address}>
-                  <div className="block">
-                    #{index}
-                  </div>
-                  <div className="media-body mb-0 lh-150">
-                    <div className="ml-3">
-                      {account.address.toUpperCase()}
-                    </div>
-                    <div className="ml-3 text-muted">
-                      <FormattedNumber value={account.balanceNum}/> TRX
-                    </div>
-                  </div>
-                </div>
-              ))
-            }
-          </div>
-        </MediaQuery>
-      </Fragment>
+
+      <ReactTable
+        data={arr}
+        noDataText="Empty"
+        filterable
+        columns={[{
+            Header: () => <strong>#</strong>,
+            headerStyle: {backgroundColor: '#2c2c2c', color:'#ffffff', cursor: "pointer", textAlign: "left", paddingLeft : 10},
+            accessor: 'index',
+            maxWidth: 100,
+            style: {
+              textAlign: "left",
+              paddingLeft : 10
+            },
+            Cell: row => (<strong>{row.value}</strong>)
+          }, {
+            Header: () => <strong>{tu("address")}</strong>,
+            headerStyle: {backgroundColor: '#2c2c2c', color:'#ffffff', cursor: "pointer", textAlign: "left"},
+            accessor: 'address',
+            minWidth: 200,
+            style: {
+              textAlign: "left"
+            },
+          }, {
+            Header: () => <strong>{tu("balance")}</strong>,
+            headerStyle: {backgroundColor: '#2c2c2c', color:'#ffffff', cursor: "pointer", textAlign: "right"},
+            accessor: 'balance',
+            maxWidth: 200,
+            style: {
+              textAlign: "right"
+            },
+            Cell:  row => (new Intl.NumberFormat('gb-GB', { style: 'currency', currency: 'TRX' }).format(row.value))
+          },
+        ]}
+        defaultPageSize={20}
+        className="-striped -highlight"
+      />
     )
   }
 
@@ -114,15 +93,6 @@ class Accounts extends Component {
 
     return (
       <main role="main" className="container mt-3">
-        <div className="row">
-          <div className="col-md-12">
-            <input type="text"
-                   placeholder={intl.formatMessage({id: "search_address"})}
-                   onChange={this.onSearchFieldChangeHandler}
-                   className="form-control"
-                   value={searchString}/>
-          </div>
-        </div>
         <div className="row">
           <div className="col-md-12">
             <div className="p-3 my-3 text-white-50 bg-dark rounded row no-gutters">
@@ -162,8 +132,6 @@ class Accounts extends Component {
   }
 }
 
-
-
 function mapStateToProps(state) {
   return {
     accounts: state.app.accounts,

src/components/Navigation.js

@@ -40,12 +40,12 @@ class Navigation extends Component {
             <span className="navbar-toggler-icon"/>
           </button>
           <div className="d-md-none pull-right">
-            <img src={logo} className="logo" alt="Tron"/>
+            <Link to="/blockchain"><img src={logo} className="logo" alt="Tron"/></Link>
           </div>
           <div className="collapse navbar-collapse" id="navbar-top">
             <ul className="navbar-nav mr-auto">
                 <li  className="nav-item d-none d-md-block">
-                  <img src={logo} className="logo" alt="Tron"/>
+                <Link to="/blockchain"><img src={logo} className="logo" alt="Tron"/></Link>
                 </li>
               {viewableRoutes.map(route => (
                 <li key={route.path} className="nav-item">

src/components/account/Account.js

@@ -7,6 +7,8 @@ import {passwordToAddress} from "tronaccount/src/utils/crypto";
 import xhr from "axios";
 import {FormattedNumber} from "react-intl";
 import {Link, Redirect} from "react-router-dom";
+import ReactTable from "react-table";
+import "react-table/react-table.css";
 
 class Account extends Component {
 
@@ -85,30 +87,56 @@ class Account extends Component {
       );
     }
 
+    var arr = [];
+
+    for (var i = 1; i < tokenBalances.length; i++) {
+        let transformed = {
+            index: i,
+            name: tokenBalances[i].name,
+            balance: tokenBalances[i].balance
+        };
+
+        arr.push(transformed);
+    }
+
     return (
-      <table className="table border-0 m-0">
-        <thead>
-        <tr>
-          <th>{tu("name")}</th>
-          <th className="text-right">{tu("balance")}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {
-          tokenBalances.map((token, index) => (
-
-            (index > 0) && //Hide TRON TRX on this view   
-            <tr key={index}>
-              <td>{token.name}</td>
-              <td className="text-right">
-                <FormattedNumber value={token.balance} />
-              </td>
-            </tr>
-
-          ))
-        }
-        </tbody>
-      </table>
+
+      <ReactTable
+        data={arr}
+        noDataText="Empty"
+        filterable
+        columns={[{
+            Header: () => <strong>#</strong>,
+            headerStyle: {backgroundColor: '#2c2c2c', color:'#ffffff', cursor: "pointer", textAlign: "left", paddingLeft : 10},
+            accessor: 'index',
+            maxWidth: 50,
+            style: {
+              textAlign: "left",
+              paddingLeft : 10
+            },
+            Cell: row => (<strong>{row.value}</strong>)
+          }, {
+            Header: () => <strong>{tu("name")}</strong>,
+            headerStyle: {backgroundColor: '#2c2c2c', color:'#ffffff', cursor: "pointer", textAlign: "left"},
+            accessor: 'name',
+            minWidth: 200,
+            style: {
+              textAlign: "left"
+            },
+          }, {
+            Header: () => <strong>{tu("balance")}</strong>,
+            headerStyle: {backgroundColor: '#2c2c2c', color:'#ffffff', cursor: "pointer", textAlign: "right"},
+            accessor: 'balance',
+            maxWidth: 200,
+            style: {
+              textAlign: "right"
+            },
+            Cell:  row => (new Intl.NumberFormat('gb-GB', { style: 'currency', currency: '' }).format(row.value))
+          },
+        ]}
+        defaultPageSize={5}
+        className="-striped -highlight"
+      />
     )
   }
 

src/components/account/Login.js

@@ -90,7 +90,8 @@ class Login extends Component {
           <img src={TronLogo} alt="Tron"/><br/>
         </p>
         <p className="mt-5">
-          <input className="form-control" type="password" placeholder="Password..." onChange={(ev) => this.setState({ loginPassword: ev.target.value })}/>
+          <label>{tu("password")}</label>
+          <input className="form-control" type="password" onChange={(ev) => this.setState({ loginPassword: ev.target.value })}/>
         </p>
         <p>
           <button

src/components/account/Votes.js

@@ -11,6 +11,7 @@ import {Sticky, StickyContainer} from "react-sticky";
 import MediaQuery from "react-responsive";
 import {Alert} from "reactstrap";
 import {Link, Redirect} from "react-router-dom";
+import ExternalUrl from "../common/ExternalUrl";
 
 
 class Votes extends Component {
@@ -264,7 +265,7 @@ class Votes extends Component {
                         <th scope="row">{index + 1}</th>
                         <td className="break-word">
                           {account.address.substr(0, 24)}...<br/>
-                          <small>{account.url}</small>
+                          <small><ExternalUrl url={account.url}><span className="text-truncate text-nowrap d-inline-block"></span></ExternalUrl></small>
                         </td>
                         <td>{account.votes} TRX</td>
                         <td>