Merge pull request #153 from lazarovicedo/master

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,29 @@
 import React, {Component} from "react";
+import packageJson from '../../package.json';
+import {IS_TESTNET} from "../constants";
 
 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}
+            {
+            IS_TESTNET && 
+            <span>
+              &nbsp;(Testnet)
+             </span>
+            }  
+            </small>        
+        </div>
       </footer>
     )
   }

src/components/account/Account.js

@@ -10,7 +10,7 @@ import {Redirect} from "react-router-dom";
 import FreezeBalanceModal from "./FreezeBalanceModal";
 import {Client} from "../../services/api";
 import {buildUnfreezeBalance} from "@tronprotocol/wallet-api/src/utils/transaction";
-import {ONE_TRX} from "../../constants";
+import {ONE_TRX, IS_TESTNET} from "../../constants";
 import {Modal, ModalBody, ModalHeader} from "reactstrap";
 
 class Account extends Component {
@@ -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;
@@ -313,9 +327,14 @@ class Account extends Component {
     return (
       <main className="container pt-3">
         {modal}
-        <div className="alert alert-danger text-center">
-          {tu("do_not_send_1")}
-        </div>
+
+        {
+            IS_TESTNET &&
+            <div className="alert alert-danger text-center">
+              {tu("do_not_send_1")}
+            </div>
+        }
+
         <div className="row">
           <div className="col-md-12">
             <div className="card">
@@ -328,10 +347,15 @@ class Account extends Component {
                     <b>{tu("address")}</b>
                   </div>
                   <div className="col-md-10">
-                    {address}<br/>
-                    <span className="text-danger">
-                      ({tu("do_not_send_2")})
-                    </span>
+                    {address}
+
+                    {
+                        IS_TESTNET &&
+
+                        <div className="text-danger">
+                          ({tu("do_not_send_2")})
+                        </div>
+                    }
                   </div>
                 </div>
                 <div className="row pt-3">
@@ -375,7 +399,7 @@ class Account extends Component {
           <div className="col-md-12">
             <div className="card">
               <div className="card-header border-bottom-0 text-center bg-dark text-white">
-                {tu("Frozen Tokens")}
+                {tu("Frozen TRX Tokens")}
               </div>
               {this.renderFrozenTokens()}
               <div className="card-body text-center">
@@ -401,7 +425,7 @@ class Account extends Component {
           </div>
         </div>
         {
-          showRequest && <div className="row mt-3">
+          IS_TESTNET && showRequest && <div className="row mt-3">
             <div className="col-md-12">
               <div className="card">
                 <div className="card-header border-bottom-0 text-center bg-dark text-white">

src/components/account/ApplyForDelegate.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from "react-redux";
-import {t, tu} from "../../utils/i18n";
+import {t, tu, tup} from "../../utils/i18n";
 import {Redirect} from "react-router-dom";
 import {Client} from "../../services/api";
 
@@ -82,7 +82,7 @@ class ApplyForDelegate extends Component {
               </div>
               <div className="card-body">
                 <p className="card-text">
-                  {t("apply_for_delegate_description")}
+                  {tup("apply_for_delegate_description")}
                 </p>
                 <hr/>
                 <p className="mt-5 text-center">

src/components/account/Login.js

@@ -9,6 +9,7 @@ import {tu} from "../../utils/i18n";
 import {CopyToClipboard} from "react-copy-to-clipboard";
 import {withRouter} from "react-router-dom";
 import TestNetWarning from "../dialogs/TestNetWarning";
+import {IS_TESTNET} from "../../constants";
 
 class Login extends Component {
 
@@ -32,7 +33,14 @@ class Login extends Component {
 
   componentDidMount() {
     this.generateAccount();
+    document.body.classList.add('bg-dark');
   }
+
+
+  componentWillUnmount() {
+    document.body.classList.remove('bg-dark');
+  }
+
 
   generateAccount = () => {
 
@@ -210,8 +218,11 @@ class Login extends Component {
     }
 
     return (
-      <main className="container-fluid pt-5 pb-5 bg-dark">
-        {this.renderTestNetWarning()}
+      <main className="container-fluid pt-5">
+        {
+            IS_TESTNET && 
+            this.renderTestNetWarning()
+        }  
         <div className="container">
           <div className="row justify-content-center">
             <div className="col-12 col-sm-12 col-md-8 col-lg-6">
@@ -254,6 +265,8 @@ function mapStateToProps(state) {
   };
 }
 
+
+
 const mapDispatchToProps = {
   loginWithPassword,
 };