interest modal total interest val; claim tip

assets/mainWindow/css/loading.css

@@ -395,4 +395,57 @@ button.toast-close-button {
   text-align: left;
   margin-top: 10px;
   margin-left: 30px;
+}
+
+.btn-caret {
+  display: inline-block;
+  position: relative;
+  left: -4px;
+  height: 36px;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  box-shadow: none;
+  width: 38px;
+}
+
+.btn-caret:before {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  height: 25px;
+  background: #fff;
+  width: 1px;
+  left: -2px;
+  top: 4px;
+}
+
+.btn-caret img {
+  height: 14px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+
+.btn-native {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.btn-native:hover + .btn-caret:before {
+  display: none;
+}
+.btn-caret:hover:before {
+  display: none;
+}
+
+.dropdown-menu {
+  display: inherit;
+  top: inherit;
+  left: inherit;
+  right: 49.2%;
+  padding: 5px 2px;
+}
+
+.dropdown-menu li {
+  cursor: pointer;
 }

assets/mainWindow/js/loading.js

@@ -1,5 +1,15 @@
 let _configCopy;
 
+function toggleDropdown() {
+  const _dropdown = $('.dropdown-menu');
+
+  if (_dropdown.hasClass('hide')) {
+    _dropdown.removeClass('hide');
+  } else {
+    _dropdown.addClass('hide');
+  }
+}
+
 function initSettingsForm() {
   const remote = require('electron').remote;
   let appConf = remote.getCurrentWindow().appConfig;
@@ -153,6 +163,7 @@ function closeSettingsWindow() {
   const remote = require('electron').remote;
   const window = remote.getCurrentWindow();
 
+  toggleDropdown();
   window.destroyAppSettingsWindow();
 }
 
@@ -167,6 +178,7 @@ function openSettingsWindow() {
   const remote = require('electron').remote;
   const window = remote.getCurrentWindow();
 
+  toggleDropdown();
   window.createAppSettingsWindow();
 }
 
@@ -174,6 +186,7 @@ function closeMainWindow() {
   const remote = require('electron').remote;
   const window = remote.getCurrentWindow();
 
+  toggleDropdown();
   disableModeButtons();
 
   window.createWindow('open');

react/src/components/dashboard/claimInterestModal/claimInterestModal.js

@@ -24,6 +24,7 @@ class ClaimInterestModal extends React.Component {
       isLoading: true,
       transactionsList: [],
       showZeroInterest: true,
+      totalInterest: 0,
     };
     this.claimInterestTableRender = this.claimInterestTableRender.bind(this);
     this.toggleZeroInterest = this.toggleZeroInterest.bind(this);
@@ -37,6 +38,7 @@ class ClaimInterestModal extends React.Component {
 
   loadListUnspent() {
     let _transactionsList = [];
+    let _totalInterest = 0;
 
     getListUnspent(this.props.ActiveCoin.coin)
     .then((json) => {
@@ -52,11 +54,13 @@ class ClaimInterestModal extends React.Component {
               interest: json[i].interest,
               txid: json[i].txid,
             });
+            _totalInterest =+ json[i].interest;
 
             if (i === json.length - 1) {
               this.setState({
                 transactionsList: _transactionsList,
                 isLoading: false,
+                totalInterest: _totalInterest,
               });
             }
           });
@@ -145,7 +149,7 @@ const mapStateToProps = (state) => {
       displayClaimInterestModal: state.Dashboard.displayClaimInterestModal
     }
   };
- 
+
 };
 
 export default connect(mapStateToProps)(ClaimInterestModal);

react/src/components/dashboard/claimInterestModal/claimInterestModal.render.js

@@ -39,7 +39,12 @@ export const _ClaimInterestTableRender = function() {
   return (
     <span>
       <div className="padding-bottom-20">
-        <strong>{ translate('CLAIM_INTEREST.REQ_P1') }:</strong> { translate('CLAIM_INTEREST.REQ_P2') } <strong>10 KMD</strong>
+        <p>
+          <strong>{ translate('CLAIM_INTEREST.REQ_P1') }:</strong> { translate('CLAIM_INTEREST.REQ_P2') } <strong>10 KMD</strong>
+        </p>
+        <p>
+          <strong>{ translate('CLAIM_INTEREST.TIP') }:</strong> { translate('CLAIM_INTEREST.TIP_DESC') }
+        </p>
       </div>
       <div className="text-left padding-top-10 padding-bottom-10">
         <label className="switch">
@@ -55,13 +60,13 @@ export const _ClaimInterestTableRender = function() {
           onClick={ this.toggleZeroInterest }>
           Show zero interest
         </div>
+        <button
+          type="button"
+          className="btn btn-success waves-effect waves-light claim-btn"
+          onClick={ () => this.claimInterest() }>
+          <i className="icon fa-dollar"></i> { translate('CLAIM_INTEREST.CLAIM_INTEREST', `${this.state.totalInterest} KMD `) }
+        </button>
       </div>
-      <button
-        type="button"
-        className="btn btn-success waves-effect waves-light claim-btn"
-        onClick={ () => this.claimInterest() }>
-        <i className="icon fa-dollar"></i> { translate('CLAIM_INTEREST.CLAIM_INTEREST') }
-      </button>
       <div className="table-scroll">
         <table className="table table-hover dataTable table-striped">
           <thead>
@@ -69,7 +74,7 @@ export const _ClaimInterestTableRender = function() {
               <th></th>
               <th>{ translate('INDEX.ADDRESS') }</th>
               <th>{ translate('INDEX.AMOUNT') }</th>
-              <th>{ translate('INDEX.Address') }</th>
+              <th>{ translate('INDEX.INTEREST') }</th>
               <th>Locktime</th>
             </tr>
           </thead>
@@ -81,7 +86,7 @@ export const _ClaimInterestTableRender = function() {
               <th></th>
               <th>{ translate('INDEX.ADDRESS') }</th>
               <th>{ translate('INDEX.AMOUNT') }</th>
-              <th>{ translate('INDEX.Address') }</th>
+              <th>{ translate('INDEX.INTEREST') }</th>
               <th>Locktime</th>
             </tr>
           </tfoot>
@@ -104,7 +109,7 @@ export const ClaimInterestModalRender = function() {
                 onClick={ this.closeModal }>
                 <span>×</span>
               </button>
-              <h4 className="modal-title white text-left">{ translate('INDEX.CLAIM_INTEREST') }</h4>
+              <h4 className="modal-title white text-left">{ translate('CLAIM_INTEREST.CLAIM_INTEREST') }</h4>
             </div>
             <div className="modal-body">
               <i

react/src/components/dashboard/claimInterestModal/claimInterestModal.scss

@@ -12,9 +12,8 @@
     }
 
     .claim-btn {
-      position: absolute;
-      right: 29px;
-      top: 66px;
+      float: right;
+      margin-bottom: 30px;
     }
     .table-scroll {
       height: 366px;

react/src/components/dashboard/walletsInfo/walletsInfo.render.js

@@ -48,7 +48,7 @@ const WalletsInfoRender = function() {
             <button
               type="button"
               className="btn btn-success waves-effect waves-light margin-top-20 btn-next"
-              onClick={ () => this.openClaimInterestModal() }>{ translate('CLAIM_INTEREST.CLAIM_INTEREST') }</button>
+              onClick={ () => this.openClaimInterestModal() }>{ translate('CLAIM_INTEREST.CLAIM_INTEREST', ' ') }</button>
             <ClaimInterestModal />
           </div>
         }

react/src/translate/en.js

@@ -3,9 +3,11 @@ export const _lang = {
     'CLAIM_INTEREST': {
       'REQ_P1': 'Requirements to accrue interest',
       'REQ_P2': 'spend transaction was made at least 1 hour ago, locktime field is set and amount is greater than',
-      'CLAIM_INTEREST': 'Claim interest',
+      'CLAIM_INTEREST': 'Claim @template@ interest',
       'LOADING': 'Loading interest data',
       'NO_DATA': 'No data',
+      'TIP': 'Tip',
+      'TIP_DESC': 'don\'t attempt to claim interest smaller than 0.01 KMD. A fee you have to pay for transaction will be more or equal to the interest amount.',
     },
     'ABOUT': {
       'ABOUT_AGAMA': 'About Agama',