styling fixes & countdown voting clock

package.json

@@ -51,6 +51,7 @@
     "react": "^16.2.0",
     "react-async-component": "^2.0.0",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-countdown-now": "^1.3.0",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.2.0",
     "react-intl": "^2.4.0",

src/components/Footer.js

@@ -1,17 +1,21 @@
 import React, {Component} from "react";
+import packageJson from '../../package.json';
 
 export default class Footer extends Component {
 
 
   render() {
-    return (
-      <footer className="container text-center pt-3">
-        <a className="mr-1 text-muted" href="https://github.com/tronprotocol/wallet-web" target="_blank" rel="noopener noreferrer">
+    return (   
+      <footer className="footer text-center mt-3 mb-2">
+        <a className="mr-1 text-muted" href={packageJson.bugs.url} target="_blank" rel="noopener noreferrer">
           <i className="fab fa-github social mr-2"/>
         </a>
         <a className="mr-1 text-muted" href="https://twitter.com/tronfoundation" target="_blank" rel="noopener noreferrer">
           <i className="fab fa-twitter social ml-2"/>
         </a>
+        <div>
+            <small>Tron Wallet v.{packageJson.version}</small>
+        </div>
       </footer>
     )
   }

src/components/account/Account.js

@@ -80,32 +80,46 @@ class Account extends Component {
       );
     }
 
-    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>
+    if (tokenBalances.length < 2) {
+
+        return (
+            <h3 className="text-center text-secondary p-3" colspan="2">{tu("no_tokens_found")}</h3>
+        );
+
+    }else{
+
+        return (
+
+           <table className="table border-0 m-0">
+            <thead>
+            <tr>
+              <th>{tu("name")}</th>
+              <th className="text-right">{tu("balance")}</th>
             </tr>
-
-          ))
-        }
-        </tbody>
-      </table>
-    )
-  }
+            </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>
+
+        );  
+    }
+ }   
+
+
 
   requestTrx = async () => {
     let {account} = this.props;

src/components/account/Login.js

@@ -33,6 +33,16 @@ class Login extends Component {
   componentDidMount() {
     this.generateAccount();
   }
+
+
+  componentDidMount() {
+    document.body.classList.add('bg-dark');
+  }
+
+  componentWillUnmount() {
+    document.body.classList.remove('bg-dark');
+  }
+
 
   generateAccount = () => {
 
@@ -210,7 +220,7 @@ class Login extends Component {
     }
 
     return (
-      <main className="container-fluid pt-5 pb-5 bg-dark">
+      <main className="container-fluid pt-5">
         {this.renderTestNetWarning()}
         <div className="container">
           <div className="row justify-content-center">
@@ -254,6 +264,8 @@ function mapStateToProps(state) {
   };
 }
 
+
+
 const mapDispatchToProps = {
   loginWithPassword,
 };

src/components/account/Votes.js

@@ -10,9 +10,13 @@ import {Sticky, StickyContainer} from "react-sticky";
 import MediaQuery from "react-responsive";
 import {Alert} from "reactstrap";
 import {Redirect} from "react-router-dom";
+import {BarLoader} from "../common/loaders";
+import {FormattedNumber} from "react-intl";
+import Countdown from 'react-countdown-now';
 import {ONE_TRX} from "../../constants";
 
 
+
 class Votes extends Component {
 
   constructor() {
@@ -78,7 +82,6 @@ class Votes extends Component {
     })
   };
 
-
   filteredWitnesses() {
     let {witnesses} = this.props;
     let {searchString} = this.state;
@@ -127,13 +130,50 @@ class Votes extends Component {
       votePercentage: (votesSpend / trxBalance) * 100,
     };
   }
+
   returnVate(){
       this.setState({
           votesSubmitted: false,
           votes: {},
       });
 
   }
+
+
+
+  diffSeconds(){
+        // Calculation of difference of time (in seconds) between now time in UTC
+        // and next voting time in UTC
+
+        var now = new Date();
+        var utcHour = now.getUTCHours();
+        var fromTime = new Date(2000, 1, 1, utcHour, now.getMinutes(), now.getSeconds());
+
+        var nextHour = 24;
+
+        if (utcHour >= 0 && utcHour < 6) {
+            var nextHour = 6;
+        }     
+        if (utcHour >= 6 && utcHour < 12) {
+            var nextHour = 12;
+        }   
+        if (utcHour >= 12 && utcHour < 18) {
+            var nextHour = 18;
+        }    
+        if (utcHour >= 18 && utcHour < 24) {
+            var nextHour = 24;
+        }  
+        var toTime = new Date(2000, 1, 1, nextHour, 0, 0);      
+
+        var dif = fromTime.getTime() - toTime.getTime();
+        var secondsDiff = Math.abs(dif);
+
+        return secondsDiff;
+
+  }
+
+
+
 
   render() {
 
@@ -148,7 +188,16 @@ class Votes extends Component {
 
     let witnesses = this.filteredWitnesses();
     let voteStatus = this.getVoteStatus();
-
+
+
+    if (witnesses === null || witnesses.length === 0) {
+      return (
+        <div className="loader-center">
+          <BarLoader />
+        </div>
+      );
+    }
+
     if (votesSubmitted) {
       return (
         <main className="container pt-5 pb-5">
@@ -168,6 +217,24 @@ class Votes extends Component {
       );
     }
 
+
+
+    const CountingVotes = () => <span className="blink_txt">{tu("counting_votes")}...</span>;
+
+    const RendererClock = ({ hours, minutes, seconds, completed }) => {
+      if (completed) {
+        return <CountingVotes/>;
+      }else{
+        return (
+                <div>
+                    <small>{tu("countdown_txt")}</small>
+                    <div style={{fontWeight: 'bold'}}>{hours}:{minutes}:{seconds}</div>
+                </div>
+        );
+      }
+    };
+
+
     const VoteCard = ({className = ""}) => (
       <div className={"card " + className}>
         <div className="card-header text-center bg-dark text-white">
@@ -177,7 +244,7 @@ class Votes extends Component {
           {
             voteStatus.voteState === 1 &&
             <p className="text-center">
-              {voteStatus.votesAvailable} TRX {tu("remaining")}
+               <FormattedNumber value={voteStatus.votesAvailable} /> {tu("votes_remaining")}
             </p>
           }
           {
@@ -211,8 +278,15 @@ class Votes extends Component {
               {tu("too_many_votes")}
             </button>
           }
-          <p className="mt-3">
+          <hr/>
+          <div className="text-center m-3 text-info" style={{fontFamily: 'sans-serif'}}>
+            <Countdown date={Date.now() + this.diffSeconds()} renderer={RendererClock}>
+            </Countdown>
+          </div>
+          <hr/>
+          <p className="mt-3 small">
             {tu("vote_guide_message")}
+            {tu("vote_info_link")}&nbsp;<a href='https://medium.com/@Tronfoundation/tron-community-guidelines-ca10c2fcd444'>{tu("sr_guide")} <i className="fas fa-external-link-alt"></i></a>        
           </p>
         </div>
       </div>
@@ -238,7 +312,7 @@ class Votes extends Component {
             </div>
             <div className="card">
               <div className="card-header text-center bg-dark text-white">
-                {tu("candidates")}
+                Super Representatives {tu("candidates")}
               </div>
               <div className="card-body p-0">
                 <table className="table table-striped bg-white">
@@ -259,7 +333,9 @@ class Votes extends Component {
                           {account.address.substr(0, 24)}...<br/>
                           <small>{account.url}</small>
                         </td>
-                        <td>{account.votes} TRX</td>
+                        <td className="text-right"  style={{fontFamily: 'sans-serif'}}>
+                            <FormattedNumber value={account.votes} />
+                        </td>
                         <td>
                           <input onChange={(ev) => this.setVote(account.address, ev.target.value)}
                                  value={votes[account.address]}

src/components/network/Representatives.js

@@ -19,7 +19,7 @@ class Representatives extends Component {
 
     if (witnesses.length === 0) {
       return (
-        <div className="text-center d-flex justify-content-center p-4">
+        <div className="loader-center">
           <BarLoader />
         </div>
       );
@@ -45,11 +45,11 @@ class Representatives extends Component {
                 <tr key={account.address}>
                   <td className="text-right">{index + 1}</td>
                   <td>
-                    <ExternalUrl url={account.url}><span className="text-truncate text-nowrap d-inline-block" style={{maxWidth: 300}}></span></ExternalUrl></td>
+                    <ExternalUrl url={(account.url.length > 50) ? account.url.substr(0, 50)+" ..." : account.url}><span className="text-truncate text-nowrap d-inline-block" style={{maxWidth: 300}}></span></ExternalUrl></td>
                   <td className="text-right"><FormattedNumber value={account.latestBlockNumber} /></td>
                   <td className="text-right"><FormattedNumber value={account.producedTotal} /></td>
                   <td className="text-right"><FormattedNumber value={account.missedTotal} /></td>
-                  <td className="text-right"><FormattedNumber value={account.votes} /> TRX</td>
+                  <td className="text-right"><FormattedNumber value={account.votes} /></td>
                 </tr>
               ))
             }

src/components/tokens/TokensView.js

@@ -8,6 +8,7 @@ import {TextField} from "../../utils/formHelper";
 import {Client} from "../../services/api";
 import MediaQuery from "react-responsive";
 import {ONE_TRX} from "../../constants";
+import {BarLoader} from "../common/loaders";
 
 const desStyle = {
     whiteSpace: "normal",
@@ -128,9 +129,17 @@ class TokensView extends Component {
   renderTable() {
     let {tokens, account, searchString} = this.props;
     let {amount, confirmedParticipate, loading, participateSuccess} = this.state;
-
+    
     tokens = filter(tokens, t => t.name.toUpperCase().indexOf(searchString) !== -1);
     tokens = sortBy(tokens, t => t.name);
+
+    if (tokens === null || tokens.length === 0) {
+      return (
+        <div className="loader-center">
+          <BarLoader />
+        </div>
+      );
+    }
 
     return (
       <table className="table table-striped">
@@ -159,12 +168,12 @@ class TokensView extends Component {
                 <td className="text-right">
                   <FormattedNumber value={token.totalSupply} />
                 </td>
-                <td>
-                  <FormattedDate value={token.startTime}/>&nbsp;
-                  <FormattedTime value={token.startTime}/>&nbsp;
+                <td className="small text-right">
+                  <FormattedDate value={token.startTime} year='numeric' month='2-digit' day='2-digit'/>&nbsp;
+                  <FormattedTime value={token.startTime} hour='2-digit' minute='2-digit' second='2-digit'/>
                   <br/>
-                  <FormattedDate value={token.endTime}/>&nbsp;
-                  <FormattedTime value={token.endTime}/>
+                  <FormattedDate value={token.endTime} year='numeric' month='2-digit' day='2-digit'/>&nbsp;
+                  <FormattedTime value={token.endTime} hour='2-digit' minute='2-digit' second='2-digit'/>
                 </td>
                 {
                   account.isLoggedIn && <td className="text-right">

src/components/transfer/Send.js

@@ -209,7 +209,7 @@ class Send extends React.Component {
               value={token}>
               {
                 tokenBalances.map(tokenBalance => (
-                  <SendOption key={tokenBalance.name} name={tokenBalance.name} balance={tokenBalance.balance}/>
+                  <SendOption key={tokenBalance.name} name={(tokenBalance.name.length > 25) ? tokenBalance.name.substr(0, 25)+" ..." : tokenBalance.name} balance={tokenBalance.balance}/>
                 ))
               }
             </select>

src/reducers/app.js

@@ -20,11 +20,11 @@ const initialState = {
     fr: "Français",
     es: "Español" ,
   },
-  activeLanguage: 'en',
-  account: {
-    key: undefined,
-    address: undefined,
-    isLoggedIn: false,
+  activeLanguage: (Lockr.get("language") !== undefined ? Lockr.get("language") : 'en'),
+  account: {   
+    key: (Lockr.get("account_key") !== undefined ? Lockr.get("account_key") : undefined),
+    address: (Lockr.get("account_key") !== undefined ? privateKeyToAddress(Lockr.get("account_key")) : undefined),
+    isLoggedIn: (Lockr.get("account_key") !== undefined ? true : false)
   },
   searchString: '',
 };