refactored transactions history table

react/src/components/dashboard/walletsData/pagination.render.js

@@ -2,7 +2,10 @@ import React from 'react';
 import classnames from 'classnames';
 
 const defaultButton = props =>
-  <button type='button' {...props} className='-btn'>
+  <button
+    type="button"
+    className="-btn"
+    {...props}>
     {props.children}
   </button>
 
@@ -72,7 +75,9 @@ const PaginationRender = function() {
               value={pageSize}>
               { pageSizeOptions.map((option, i) => {
                 return (
-                  <option key={i} value={option}>
+                  <option
+                    key={i}
+                    value={option}>
                     {option} {this.props.rowsText}
                   </option>
                 );
@@ -85,7 +90,7 @@ const PaginationRender = function() {
         <NextComponent
           onClick={e => {
             if (!canNext) return;
-            this.changePage(page + 1)
+            this.changePage(page + 1);
           }}
           disabled={!canNext}>
           {this.props.nextText}

react/src/components/dashboard/walletsData/walletsData.js

@@ -53,8 +53,9 @@ class WalletsData extends React.Component {
       totalStackLength: 0,
       useCache: true,
       itemsListColumns: this.generateItemsListColumns(),
+      defaultPageSize: 10,
       pageSize: 10,
-      showPagination: false,
+      showPagination: true,
       searchTerm: null,
       coin: null,
       txhistory: null
@@ -108,6 +109,9 @@ class WalletsData extends React.Component {
       columns.push({
         Header: translate('INDEX.TYPE'),
         Footer: translate('INDEX.TYPE'),
+        className: 'colum--type',
+        headerClassName: 'colum--type',
+        footerClassName: 'colum--type',
         Cell: AddressTypeRender()
       });
     }
@@ -329,7 +333,7 @@ class WalletsData extends React.Component {
   indexTxHistory(txhistoryArr) {
     if (txhistoryArr.length > 1) {
       for (let i = 0; i < txhistoryArr.length; i++) {
-        this.props.ActiveCoin.txhistory[i]['index'] = i + 1;
+        this.props.ActiveCoin.txhistory[i].index = i + 1;
       }
     }
 
@@ -338,7 +342,8 @@ class WalletsData extends React.Component {
 
   componentWillReceiveProps(props) {
     if (!this.state.currentAddress &&
-      this.props.ActiveCoin.activeAddress) {
+      this.props.ActiveCoin.activeAddress &&
+      this.props.ActiveCoin.mode === 'basilisk') {
       this.setState(Object.assign({}, this.state, {
         currentAddress: this.props.ActiveCoin.activeAddress,
       }));
@@ -357,7 +362,7 @@ class WalletsData extends React.Component {
             itemsList: sortedItemsList,
             filteredItemsList: this.filterTransactions(sortedItemsList, this.state.searchTerm),
             txhistory: this.props.ActiveCoin.txhistory,
-            showPagination: this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length >= this.state.pageSize
+            showPagination: this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length >= this.state.defaultPageSize
           }));
       }
     }
@@ -392,7 +397,8 @@ class WalletsData extends React.Component {
 
   // TODO: add basilisk first run check, display no data if second run
   renderTxHistoryList() {
-    if (this.state.itemsList === 'loading' || this.state.itemsList.length == 0) {
+    if (this.state.itemsList === 'loading' ||
+        this.state.itemsList.length == 0) {
       if (this.isFullySynced()) {
         return (
           <tr className="hover--none">
@@ -422,7 +428,7 @@ class WalletsData extends React.Component {
   onPageSizeChange(pageSize, pageIndex) {
     this.setState(Object.assign({}, this.state, {
       pageSize: pageSize,
-      showPagination: this.state.itemsList && this.state.itemsList.length >= pageSize,
+      showPagination: this.state.itemsList && this.state.itemsList.length >= defaultPageSize,
     }))
   }
 
@@ -473,7 +479,7 @@ class WalletsData extends React.Component {
 
         for (let i = 0; i < _addresses[type].length; i++) {
           const address = _addresses[type][i].address;
-          let _amount = address.amount;
+          let _amount = _addresses[type][i].amount;
 
           if (this.props.ActiveCoin.mode === 'basilisk') {
             _amount = _cache && _cache[_coin] && _cache[_coin][address] && _cache[_coin][address].getbalance && _cache[_coin][address].getbalance.data && _cache[_coin][address].getbalance.data.balance ? _cache[_coin][address].getbalance.data.balance : 'N/A';
@@ -489,8 +495,9 @@ class WalletsData extends React.Component {
         }
 
         return items;
-    } else if (this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) {
+    } else if (this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] && this.props.ActiveCoin.mode === 'basilisk') {
       const address = this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
+
       return AddressItemRender.call(this, address, type, null, _coin);
     }
 
@@ -522,7 +529,13 @@ class WalletsData extends React.Component {
             return _amount;
           } else {
             const address = _addresses.public[i].address;
-            let _amount = _cache && _cache[_coin] && _cache[_coin][address] && _cache[_coin][address].getbalance.data && _cache[_coin][address].getbalance.data.balance ? _cache[_coin][address].getbalance.data.balance : 'N/A';
+            let _amount;
+
+            if (this.props.ActiveCoin.mode === 'basilisk') {
+              _amount = _cache && _cache[_coin] && _cache[_coin][address] && _cache[_coin][address].getbalance.data && _cache[_coin][address].getbalance.data.balance ? _cache[_coin][address].getbalance.data.balance : 'N/A';
+            } else {
+              _amount = _addresses.public[i].amount;
+            }
 
             if (_amount !== 'N/A') {
               _amount = formatValue('round', _amount, -6);
@@ -550,16 +563,17 @@ class WalletsData extends React.Component {
       );
     } else {
       return (
-        <span>- { translate('KMD_NATIVE.SELECT_ADDRESS') } -</span>
+        <span>Filter by address</span>
       );
     }
   }
 
   shouldDisplayAddressList() {
-    //return true;
+    if (this.props.ActiveCoin.mode === 'basilisk') {
-    return this.props.Dashboard &&
+      return this.props.Dashboard &&
         this.props.Dashboard.activeHandle &&
         this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
+    }
   }
 
   renderAddressList() {
@@ -594,7 +608,7 @@ class WalletsData extends React.Component {
   }
 
   contains(value, property) {
-    return (value + "").indexOf(property) !== -1;
+    return (value + '').indexOf(property) !== -1;
   }
 
   isActiveCoinMode(coinMode) {

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

@@ -9,8 +9,6 @@ import TablePaginationRenderer from './pagination';
 import { formatValue } from '../../../util/formatValue';
 import Config from '../../../config';
 
-// TODO: clean basilisk dropdown menu
-
 export const AddressTypeRender = function() {
   return (
     <span>
@@ -72,7 +70,7 @@ export const AddressListRender = function() {
         <button
           type="button"
           className="btn dropdown-toggle btn-info"
-          title={ `-${translate('KMD_NATIVE.SELECT_ADDRESS')}-` }
+          title={ `${translate('KMD_NATIVE.SELECT_ADDRESS')}` }
           onClick={ this.openDropMenu }>
           <span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>&nbsp;
           <span className="bs-caret">
@@ -81,9 +79,17 @@ export const AddressListRender = function() {
         </button>
         <div className="dropdown-menu open">
           <ul className="dropdown-menu inner">
-            <li className="selected">
+            <li className="no--hover">
-              <a><span className="text"> - { translate('KMD_NATIVE.SELECT_ADDRESS') } - </span></a>
+              <a><span className="text">{ this.props.ActiveCoin.mode === 'basilisk' ? 'Filter by address' : translate('KMD_NATIVE.SELECT_ADDRESS') }</span></a>
             </li>
+            { this.props.ActiveCoin.mode === 'native' &&
+              <li className={ !this.state.currentAddress ? 'selected' : '' }>
+                <a onClick={ () => this.updateAddressSelection('') }>
+                  <span className="text">All</span>
+                  <span className="glyphicon glyphicon-ok check-mark"></span>
+                </a>
+              </li>
+            }
             { this.renderAddressByType('public') }
           </ul>
         </div>
@@ -96,7 +102,7 @@ export const AddressListRender = function() {
 
 export const TxTypeRender = function(category) {
   if (category === 'send' ||
-    category === 'sent') {
+      category === 'sent') {
     return (
       <span className="label label-danger">
         <i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
@@ -104,10 +110,10 @@ export const TxTypeRender = function(category) {
     );
   }
   if (category === 'receive' ||
-    category === 'received') {
+      category === 'received') {
     return (
       <span className="label label-success">
-        <i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') }</span>
+        <i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') } &nbsp; &nbsp;</span>
       </span>
     );
   }
@@ -134,32 +140,43 @@ export const TxTypeRender = function(category) {
   }
 };
 
-export const TxAmountRender = function (tx) {
+export const TxAmountRender = function(tx) {
+  let _amountNegative;
+
+  if ((tx.category === 'send' ||
+      tx.category === 'sent') ||
+      (tx.type === 'send' ||
+      tx.type === 'sent')) {
+    _amountNegative = -1;
+  } else {
+    _amountNegative = 1;
+  }
+
   if (Config.roundValues) {
     return (
-      <span title={ tx.amount }>{ formatValue('round', tx.amount, -6) || translate('DASHBOARD.UNKNOWN') }</span>
+      <span title={ tx.amount * _amountNegative }>{ formatValue('round', tx.amount, -6) * _amountNegative || translate('DASHBOARD.UNKNOWN') }</span>
     );
   }
 
   return (
-    <span>{ tx.amount || translate('DASHBOARD.UNKNOWN') }</span>
+    <span>{ tx.amount * _amountNegative || translate('DASHBOARD.UNKNOWN') }</span>
   );
 };
 
 export const TxHistoryListRender = function() {
   return (
     <ReactTable
-      data={this.state.filteredItemsList}
+      data={ this.state.filteredItemsList }
-      columns={this.state.itemsListColumns}
+      columns={ this.state.itemsListColumns }
-      sortable={true}
+      minRows="0"
+      sortable={ true }
       className="-striped -highlight"
-      PaginationComponent={TablePaginationRenderer}
+      PaginationComponent={ TablePaginationRenderer }
-      nextText={translate('INDEX.NEXT_PAGE')}
+      nextText={ translate('INDEX.NEXT_PAGE') }
-      previousText={translate('INDEX.PREVIOUS_PAGE')}
+      previousText={ translate('INDEX.PREVIOUS_PAGE') }
-      showPaginationBottom={this.state.showPagination}
+      showPaginationBottom={ this.state.showPagination }
-      showPaginationTop={this.state.showPagination}
+      pageSize={ this.pageSize }
-      pageSize={this.pageSize}
+      onPageSizeChange={ (pageSize, pageIndex) => this.onPageSizeChange(pageSize, pageIndex) } />
-      onPageSizeChange={(pageSize, pageIndex) => this.onPageSizeChange(pageSize, pageIndex)} />
   );
 };
 
@@ -245,16 +262,16 @@ export const WalletsDataRender = function() {
                     <h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
                   </header>
                   <div className="panel-body">
-                    <div className="row padding-bottom-20">
+                    <div className="row padding-bottom-30 padding-top-10">
                       { this.shouldDisplayAddressList() &&
-                        <div className="col-sm-8">
+                        <div className="col-sm-8 no-padding-left">
-                          {this.renderAddressList()}
+                          { this.renderAddressList() }
                         </div>
                       }
-                      <div className="col-sm-4">
+                      <div className="col-sm-4 search-box">
                         <input
                           className="form-control"
-                          onChange={e => this.onSearchTermChange(e.target.value)}
+                          onChange={ e => this.onSearchTermChange(e.target.value) }
                           placeholder="Search" />
                       </div>
                     </div>

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

@@ -14,7 +14,7 @@ const WalletsNativeRender = function() {
           id="easydex-header-div"
           className="background-color-white"
           style={ this.getCoinStyle('transparent') }>
-          <ol className={ (!this.state.nativeOnly ? 'breadcrumb breadcrumb--normal' : 'breadcrumb') + (this.props.ActiveCoin.coin === 'KMD' || this.props.ActiveCoin.coin === 'JUMBLR' || this.props.ActiveCoin.coin === 'MESH' || this.props.ActiveCoin.coin === 'MVP' ? ' coin-logo-wide' : '') + (this.state.nativeOnly ? ' native-coin-logo' : '') }>
+          <ol className={ 'coin-logo ' + (!this.state.nativeOnly ? 'breadcrumb breadcrumb--normal' : 'breadcrumb') + (this.props.ActiveCoin.coin === 'KMD' || this.props.ActiveCoin.coin === 'JUMBLR' || this.props.ActiveCoin.coin === 'MESH' || this.props.ActiveCoin.coin === 'MVP' ? ' coin-logo-wide' : '') + (this.state.nativeOnly ? ' native-coin-logo' : '') }>
             <li className="header-easydex-section">
               { this.getCoinStyle('title') &&
                 <img src={ this.getCoinStyle('title') } />

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

@@ -27,7 +27,7 @@ export const WalletsNavWithWalletRender = function() {
         className={ 'page-header page-header-bordered header-easydex padding-bottom-' + (this.state.nativeOnly ? '40 page-header--native' : '20') }
         id="header-dashboard"
         style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : (this.state.nativeOnly ? '30px' : '0') }}>
-        <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : '') }>
+        <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : ' breadcrumb--native') }>
           <strong>{ translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: </strong>
           { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }
           <button

react/src/components/overrides.scss

@@ -373,6 +373,9 @@ input:checked + .slider:before {
   text-align: center;
 }
 
+.coin-logo.breadcrumb {
+  z-index: 100;
+}
 .breadcrumb > li + li:before {
   display: none;
 }
@@ -754,6 +757,10 @@ select{
   }
 }
 
+.toggle-filters:hover {
+  background-color: #f3f1f1;
+}
+
 /* jumblr */
 .jumblr {
   p {
@@ -894,49 +901,99 @@ select{
   }
 }
 
+.search-box {
+  float: right;
+  padding-right: 0;
+}
+
+.no-padding-left {
+  padding-left: 0;
+}
+
 .basilisk-progress-bar {
   position: absolute;
-  width: calc(100% - 100px);
+  width: 100%;
 }
 
-.breadcrumb--basilisk {
+.breadcrumb--basilisk,
+.breadcrumb--native {
   top: 0;
 }
 
+.dropdown-menu {
+  .no--hover {
+    pointer-events: none;
+  }
+}
+
 .ReactTable {
   border: none;
 
-  .pagination-top {
+  .pagination-bottom {
-    display: none;
+    margin-top: 35px;
   }
   .rt-td {
     text-align: center;
   }
-  .ReactTable .rt-thead .rt-th,
-  .ReactTable .rt-thead .rt-td {
-    padding: 10px 5px;
-  }
   .rt-table {
     border: 1px solid rgba(0, 0, 0, 0.1);
   }
-  .rt-tfoot {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  .rt-thead {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
   .rt-thead .rt-th,
   .rt-thead .rt-td {
     padding: 10px 5px;
   }
   .rt-tr.-odd div,
   .rt-tr.-even div {
-    padding-top: 7px;
+    padding-top: 10px;
-    padding-bottom: 7px;
+    padding-bottom: 10px;
+  }
+  .-pagination,
+  .rt-thead,
+  .rt-tfoot {
+    border: none;
+  }
+  .rt-tfoot {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .rt-thead {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
   .colum--direction {
     width: 40px !important;
     flex: 40 0 auto !important;
     padding-right: 10px;
   }
+  .colum--txinfo {
+    width: 40px !important;
+    flex: 40 0 auto !important;
+  }
+  .colum--type {
+    width: 40px !important;
+    flex: 40 0 auto !important;
+  }
+  .-pagination {
+    .-pageJump {
+      margin-right: 5px;
+      margin-left: 5px;
+    }
+    .-btn {
+      color: #757575;
+      background-color: #efefef;
+      border: 1px solid #e0e0e0;
+    }
+    .-btn:hover {
+      color: #fff;
+    }
+    .-btn[disabled]:hover {
+      color: #757575;
+    }
+  }
+  .rt-noData {
+    top: 46px;
+    width: 100%;
+    text-align: center;
+    height: 98px;
+    padding: 38px;
+    background: rgba(255, 255, 255, 0.85);
+  }
 }