From 394f34e46ffa586e093943cec86f1340c1abf548 Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Sat, 22 Jul 2017 18:55:12 +0200
Subject: [PATCH 01/16] Transaction history improvements - WIP

---
 react/package.json                            |   1 +
 .../components/dashboard/main/dashboard.scss  |  14 ++
 .../walletsBalance/walletsBalance.js          |   2 +-
 .../dashboard/walletsData/pagination.js       |  45 +++++
 .../walletsData/pagination.render.js          | 103 ++++++++++
 .../dashboard/walletsData/walletsData.js      | 181 +++++++++---------
 .../walletsData/walletsData.render.js         | 173 ++++-------------
 react/src/styles/index.scss                   |   3 +-
 react/src/translate/en.js                     |   4 +-
 9 files changed, 294 insertions(+), 232 deletions(-)
 create mode 100644 react/src/components/dashboard/walletsData/pagination.js
 create mode 100644 react/src/components/dashboard/walletsData/pagination.render.js

diff --git a/react/package.json b/react/package.json
index 81b81d2..3262370 100644
--- a/react/package.json
+++ b/react/package.json
@@ -45,6 +45,7 @@
     "react-redux": "^5.0.3",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.4",
+    "react-table": "~6.5.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redux": "^3.6.0",
diff --git a/react/src/components/dashboard/main/dashboard.scss b/react/src/components/dashboard/main/dashboard.scss
index 8dfc52c..638aa79 100755
--- a/react/src/components/dashboard/main/dashboard.scss
+++ b/react/src/components/dashboard/main/dashboard.scss
@@ -133,4 +133,18 @@
 // walletsNativeTxInfo.js
 .height-170 {
   height: 170px;
+}
+
+.rt-tr.-odd div,
+.rt-tr.-even div {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.rt-tr-group.-odd .-padRow {
+  display: none;
+}
+
+.ReactTable .rt-tfoot .rt-td {
+  text-align: center;
 }
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsBalance/walletsBalance.js b/react/src/components/dashboard/walletsBalance/walletsBalance.js
index b424460..c995b4d 100755
--- a/react/src/components/dashboard/walletsBalance/walletsBalance.js
+++ b/react/src/components/dashboard/walletsBalance/walletsBalance.js
@@ -95,7 +95,7 @@ class WalletsBalance extends React.Component {
     const _translationComponents = translate(_translationID).split('<br>');
 
     return _translationComponents.map((_translation) =>
-      <span>
+      <span key={_translation}>
         {_translation}
         <br />
       </span>
diff --git a/react/src/components/dashboard/walletsData/pagination.js b/react/src/components/dashboard/walletsData/pagination.js
new file mode 100644
index 0000000..a3ff832
--- /dev/null
+++ b/react/src/components/dashboard/walletsData/pagination.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PaginationRender from './pagination.render';
+
+export default class TablePaginationRenderer extends Component {
+  constructor (props) {
+    super();
+
+    this.getSafePage = this.getSafePage.bind(this);
+    this.changePage = this.changePage.bind(this);
+    this.applyPage = this.applyPage.bind(this);
+
+    this.state = {
+      page: props.page
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    this.setState({ page: nextProps.page });
+  }
+
+  getSafePage (page) {
+    if (isNaN(page)) {
+      page = this.props.page;
+    }
+    return Math.min(Math.max(page, 0), this.props.pages - 1);
+  }
+
+  changePage (page) {
+    page = this.getSafePage(page);
+    this.setState({ page });
+    if (this.props.page !== page) {
+      this.props.onPageChange(page);
+    }
+  }
+
+  applyPage (e) {
+    e && e.preventDefault();
+    const page = this.state.page;
+    this.changePage(page === '' ? this.props.page : page);
+  }
+
+  render () {
+    return PaginationRender.call(this);
+  }
+}
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsData/pagination.render.js b/react/src/components/dashboard/walletsData/pagination.render.js
new file mode 100644
index 0000000..2e930f0
--- /dev/null
+++ b/react/src/components/dashboard/walletsData/pagination.render.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import classnames from 'classnames';
+
+const defaultButton = props =>
+  <button type='button' {...props} className='-btn'>
+    {props.children}
+  </button>
+
+const PaginationRender = function() {
+  const {
+    // Computed
+    pages,
+    // Props
+    page,
+    showPageSizeOptions,
+    pageSizeOptions,
+    pageSize,
+    showPageJump,
+    canPrevious,
+    canNext,
+    onPageSizeChange,
+    className,
+    PreviousComponent = defaultButton,
+    NextComponent = defaultButton,
+  } = this.props;
+
+  return (
+    <div
+      className={classnames(className, '-pagination')}
+      style={this.props.paginationStyle}
+    >
+      <div className='-previous'>
+        <PreviousComponent
+          onClick={e => {
+            if (!canPrevious) return;
+            this.changePage(page - 1)
+          }}
+          disabled={!canPrevious}
+        >
+          {this.props.previousText}
+        </PreviousComponent>
+      </div>
+      <div className='-center'>
+          <span className='-pageInfo'>
+            {this.props.pageText}{' '}
+            {showPageJump
+              ?
+              <div className='-pageJump'>
+                <input
+                  type={this.state.page === '' ? 'text' : 'number'}
+                  onChange={e => {
+                    const val = e.target.value;
+                    console.error('onchange', val);
+                    this.changePage(val - 1);
+                  }}
+                  value={this.state.page === '' ? '' : this.state.page + 1}
+                  onBlur={this.applyPage}
+                  onKeyPress={e => {
+                    if (e.which === 13 || e.keyCode === 13) {
+                      this.applyPage();
+                    }
+                  }}
+                />
+              </div>
+              :
+              <span className='-currentPage'>
+                {page + 1}
+              </span>}{' '}
+            {this.props.ofText}{' '}
+            <span className='-totalPages'>{pages || 1}</span>
+          </span>
+        {showPageSizeOptions &&
+        <span className='select-wrap -pageSizeOptions'>
+              <select
+                onChange={e => onPageSizeChange(Number(e.target.value))}
+                value={pageSize}
+              >
+                {pageSizeOptions.map((option, i) => {
+                  return (
+                    <option key={i} value={option}>
+                      {option} {this.props.rowsText}
+                    </option>
+                  )
+                })}
+              </select>
+            </span>}
+      </div>
+      <div className='-next'>
+        <NextComponent
+          onClick={e => {
+            if (!canNext) return;
+            this.changePage(page + 1)
+          }}
+          disabled={!canNext}
+        >
+          {this.props.nextText}
+        </NextComponent>
+      </div>
+    </div>
+  )
+};
+
+export default PaginationRender;
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index ce87f61..bd950af 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -20,13 +20,14 @@ import {
 } from '../../../actions/actionCreators';
 import Store from '../../../store';
 import {
-  PaginationItemRender,
-  PaginationItemsPerPageSelectorRender,
-  PaginationRender,
+  AddressTypeRender,
+  TransactionDetailRender,
+  AddressItemRender,
   TxHistoryListRender,
   AddressListRender,
   WalletsDataRender
 } from  './walletsData.render';
+import { secondsToString } from '../../../util/time';
 
 import { SocketProvider } from 'socket.io-react';
 import io from 'socket.io-client';
@@ -46,8 +47,9 @@ class WalletsData extends React.Component {
       currentStackLength: 0,
       totalStackLength: 0,
       useCache: true,
+      itemsListColumns: this.generateItemsListColumns()
     };
-    this.updateInput = this.updateInput.bind(this);
+
     this.toggleBasiliskActionsMenu = this.toggleBasiliskActionsMenu.bind(this);
     this.basiliskRefreshAction = this.basiliskRefreshAction.bind(this);
     this.basiliskConnectionAction = this.basiliskConnectionAction.bind(this);
@@ -79,6 +81,78 @@ class WalletsData extends React.Component {
     );
   }
 
+  generateItemsListColumns() {
+    let columns = [];
+
+    if (this.isNativeMode()) {
+      columns.push({
+        Header: translate('INDEX.TYPE'),
+        Footer: translate('INDEX.TYPE'),
+        Cell: AddressTypeRender()
+      });
+    }
+
+    columns.push(...[
+      {
+        id: 'direction',
+        Header: translate('INDEX.DIRECTION'),
+        Footer: translate('INDEX.DIRECTION'),
+        accessor: (tx) => this.renderTxType(tx.category || tx.type)
+      },
+      {
+        Header: translate('INDEX.CONFIRMATIONS'),
+        Footer: translate('INDEX.CONFIRMATIONS'),
+        headerClassName: 'hidden-xs hidden-sm',
+        footerClassName: 'hidden-xs hidden-sm',
+        className: 'hidden-xs hidden-sm',
+        accessor: 'confirmations'
+      },
+      {
+        id: 'amount',
+        Header: translate('INDEX.AMOUNT'),
+        Footer: translate('INDEX.AMOUNT'),
+        accessor: (tx) => tx.amount || translate('DASHBOARD.UNKNOWN')
+      },
+      {
+        id: 'timestamp',
+        Header: translate('INDEX.TIME'),
+        Footer: translate('INDEX.TIME'),
+        accessor: (tx) => secondsToString(tx.blocktime || tx.timestamp || tx.time)
+      }
+    ]);
+
+    if (this.isFullMode()) {
+      columns.push({
+        Header: translate('INDEX.DEST_ADDRESS'),
+        Footer: translate('INDEX.DEST_ADDRESS'),
+        accessor: 'address'
+      });
+    }
+
+    if (this.isNativeMode()) {
+      columns.push({
+        id: 'destination-address',
+        Header: translate('INDEX.DEST_ADDRESS'),
+        Footer: translate('INDEX.DEST_ADDRESS'),
+        accessor: (tx) => this.renderAddress(tx)
+      });
+    }
+
+    const txDetailColumnCssClasses = this.isBasiliskMode() ? 'hidden-xs hidden-sm text-center' : 'hidden-xs hidden-sm';
+
+    columns.push({
+      id: 'tx-detail',
+      Header: translate('INDEX.TX_DETAIL'),
+      Footer: translate('INDEX.TX_DETAIL'),
+      headerClassName: txDetailColumnCssClasses,
+      footerClassName: txDetailColumnCssClasses,
+      className: txDetailColumnCssClasses,
+      Cell: props => TransactionDetailRender.call(this, props.index)
+    });
+
+    return columns;
+  }
+
   handleClickOutside(e) {
     if (e.srcElement.className !== 'btn dropdown-toggle btn-info' &&
         (e.srcElement.offsetParent && e.srcElement.offsetParent.className !== 'btn dropdown-toggle btn-info') &&
@@ -193,17 +267,6 @@ class WalletsData extends React.Component {
     Store.dispatch(displayNotariesModal(true));
   }
 
-  updateInput(e) {
-    let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory);
-    historyToSplit = historyToSplit.slice(0, e.target.value);
-
-    this.setState({
-      [e.target.name]: e.target.value,
-      activePage: 1,
-      itemsList: historyToSplit,
-    });
-  }
-
   toggleTxInfoModal(display, txIndex) {
     Store.dispatch(toggleDashboardTxInfoModal(display, txIndex));
   }
@@ -223,14 +286,8 @@ class WalletsData extends React.Component {
       if (!this.state.itemsList ||
           (this.state.itemsList && !this.state.itemsList.length) ||
           (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
-        let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory);
-        historyToSplit = historyToSplit.slice(
-          (this.state.activePage - 1) * this.state.itemsPerPage,
-          this.state.activePage * this.state.itemsPerPage
-        );
-
         this.setState(Object.assign({}, this.state, {
-          itemsList: historyToSplit,
+          itemsList: sortByDate(this.props.ActiveCoin.txhistory),
         }));
       }
     }
@@ -245,58 +302,10 @@ class WalletsData extends React.Component {
         itemsList: 'loading',
       }));
     }
-  }
-
-  updateCurrentPage(page) {
-    let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory);
-    historyToSplit = historyToSplit.slice(
-      (page - 1) * this.state.itemsPerPage,
-      page * this.state.itemsPerPage
-    );
-
-    this.setState(Object.assign({}, this.state, {
-      activePage: page,
-      itemsList: historyToSplit,
-    }));
-  }
-
-  renderPaginationItems() {
-    let items = [];
-
-    for (let i = 0; i < Math.ceil(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); i++) {
-      items.push(
-        PaginationItemRender.call(this, i)
-      );
-    }
 
-    return items;
-  }
-
-  renderPaginationItemsPerPageSelector() {
-    if (this.props.ActiveCoin.txhistory &&
-        this.state.itemsList !== 'loading' &&
-        this.props.ActiveCoin.txhistory.length > 10) {
-      return PaginationItemsPerPageSelectorRender.call(this);
-    } else {
-      return null;
-    }
-  }
-
-  renderPagination() {
-    if (this.props.ActiveCoin.txhistory &&
-        this.state.itemsList !== 'loading' &&
-        this.props.ActiveCoin.txhistory.length > 10) {
-      const _paginationFrom = ((this.state.activePage - 1) * this.state.itemsPerPage) + 1;
-      const _paginationTo = this.state.activePage * this.state.itemsPerPage;
-
-      return PaginationRender.call(
-        this,
-        _paginationFrom,
-        _paginationTo
-      );
-    } else {
-      return null;
-    }
+    this.setState({
+      itemsListColumns: this.generateItemsListColumns()
+    });
   }
 
   renderTxType(category) {
@@ -362,19 +371,9 @@ class WalletsData extends React.Component {
       return (
         <div>{ translate('INDEX.NO_DATA') }</div>
       );
-    } else {
-      if (this.state.itemsList &&
-          this.state.itemsList.length &&
-          this.state.itemsList !== 'no data') {
-        return this.state.itemsList.map((tx, index) =>
-          TxHistoryListRender.call(
-            this,
-            tx,
-            index
-          )
-        );
-      }
     }
+
+    return TxHistoryListRender.call(this);
   }
 
   updateAddressSelection(address, type, amount) {
@@ -444,13 +443,7 @@ class WalletsData extends React.Component {
           }
 
           items.push(
-            <li key={address}>
-              <a onClick={ () => this.updateAddressSelection(address, type, _amount) }>
-                <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
-                <span className="text">[ { _amount } { _coin } ]  { address }</span>
-                <span className="glyphicon glyphicon-ok check-mark"></span>
-              </a>
-            </li>
+            AddressItemRender.call(this, address, type, _amount, _coin)
           );
         }
 
@@ -479,9 +472,7 @@ class WalletsData extends React.Component {
             return _addresses.public[i].amount;
           } else {
             const address = _addresses.public[i].address;
-            const _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';
-
-            return _amount;
+            return _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';
           }
         }
       }
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 237a3c2..5c7345a 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -4,102 +4,41 @@ import WalletsBasiliskRefresh from '../walletsBasiliskRefresh/walletsBasiliskRef
 import WalletsBasiliskConnection from '../walletsBasiliskConnection/walletsBasiliskConnection';
 import WalletsNotariesList from '../walletsNotariesList/walletsNotariesList';
 import WalletsCacheData from '../walletsCacheData/walletsCacheData';
-import { secondsToString } from '../../../util/time';
+import ReactTable from 'react-table';
+import TablePaginationRenderer from './pagination';
 
 // TODO: clean basilisk dropdown menu
 
-export const PaginationItemRender = function(i) {
+export const AddressTypeRender = function() {
   return (
-    <li
-      key={ `${i}-pagination-link` }
-      className={ 'paginate_button' + (this.state.activePage === i + 1 ? ' active' : '') }>
-      <a
-        key={ `${i}-pagination` }
-        onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
-    </li>
+    <td>
+      <span className="label label-default">
+        <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
+      </span>
+    </td>
   );
 };
 
-export const PaginationItemsPerPageSelectorRender = function() {
+export const TransactionDetailRender = function(transactionIndex) {
   return (
-    <div className="dataTables_length">
-      <label>
-        { translate('INDEX.SHOW') }&nbsp;
-        <select
-          name="itemsPerPage"
-          className="form-control input-sm"
-          onChange={ this.updateInput }>
-          <option value="10">10</option>
-          <option value="25">25</option>
-          <option value="50">50</option>
-          <option value="100">100</option>
-        </select>&nbsp;
-        { translate('INDEX.ENTRIES_SM') }
-      </label>
-    </div>
+    <button
+      type="button"
+      className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid"
+      onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, transactionIndex) }>
+      <i className="icon fa-search"></i>
+    </button>
   );
 };
 
-export const PaginationRender = function(paginationFrom, paginationTo) {
-  const disableNextBtn = this.state.activePage >= Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage);
-
+export const AddressItemRender = function(address, type, amount, coin) {
   return (
-    <div className="row unselectable">
-      <div className="col-sm-5">
-        <div className="dataTables_info">
-          { translate('INDEX.SHOWING') }&nbsp;
-          { paginationFrom }&nbsp;
-          { translate('INDEX.TO_ALT') }&nbsp;
-          { paginationTo }&nbsp;
-          { translate('INDEX.OF') }&nbsp;
-          { this.props.ActiveCoin.txhistory.length }&nbsp;
-          { translate('INDEX.ENTRIES_SM') }
-        </div>
-      </div>
-      <div className="col-sm-7">
-        <div className="dataTables_paginate paging_simple_numbers">
-          <ul className="pagination">
-            <li className={ 'paginate_button previous' + (this.state.activePage === 1 ? ' disabled' : '') }>
-              <a onClick={ () => this.updateCurrentPage(this.state.activePage - 1) }>{ translate('INDEX.PREVIOUS') }</a>
-            </li>
-            { this.renderPaginationItems() }
-            <li className={ 'paginate_button next' + (disableNextBtn ? ' disabled' : '') }>
-              <a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const TxHistoryListRender = function(tx, index) {
-  return (
-    <tr key={ tx.txid + tx.amount }>
-      { this.isNativeMode() ?
-          <td>
-            <span className="label label-default">
-              <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
-            </span>
-          </td>
-        :
-        null
-      }
-      <td>{ this.renderTxType(tx.category || tx.type) }</td>
-      <td>{ tx.confirmations }</td>
-      <td>{ tx.amount || translate('DASHBOARD.UNKNOWN') }</td>
-      <td>{ secondsToString(tx.blocktime || tx.timestamp || tx.time) }</td>
-      <td className={ this.isFullMode() ? '' : 'hide' }>{ tx.address }</td>
-      <td className={ this.isNativeMode() ? '' : 'hide' }>{ this.renderAddress(tx) }</td>
-      <td className={ this.isBasiliskMode() ? 'text-center' : '' }>
-        <button
-          type="button"
-          className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid"
-          onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, ((this.state.activePage - 1) * this.state.itemsPerPage) + index) }>
-          <i className="icon fa-search"></i>
-        </button>
-      </td>
-    </tr>
+    <li key={address}>
+      <a onClick={ () => this.updateAddressSelection(address, type, amount) }>
+        <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
+        <span className="text">[ { amount } { coin } ]  { address }</span>
+        <span className="glyphicon glyphicon-ok check-mark"></span>
+      </a>
+    </li>
   );
 };
 
@@ -128,6 +67,21 @@ export const AddressListRender = function() {
   );
 };
 
+export const TxHistoryListRender = function() {
+  return (
+    <ReactTable
+      data={this.state.itemsList}
+      columns={this.state.itemsListColumns}
+      sortable={true}
+      filterable={true}
+      className='-striped -highlight'
+      PaginationComponent={TablePaginationRenderer}
+      nextText={translate('INDEX.NEXT_PAGE')}
+      previousText={translate('INDEX.PREVIOUS_PAGE')}
+    />
+  );
+};
+
 export const WalletsDataRender = function() {
   return (
     <span>
@@ -210,58 +164,9 @@ export const WalletsDataRender = function() {
                         { this.renderAddressList() }
                       </div>
                     </div>
-                    <div className="row pagination-container">
-                      <div className="col-sm-6">
-                        { this.renderPaginationItemsPerPageSelector() }
-                      </div>
-                      <div className="col-sm-6">
-                        <div className="dataTables_filter">
-                          <label>
-                            { translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" disabled="true" />
-                          </label>
-                        </div>
-                      </div>
-                    </div>
                     <div className="row">
-                      <table
-                        className="table table-hover dataTable table-striped"
-                        width="100%">
-                        <thead>
-                          <tr>
-                            { this.isNativeMode() ?
-                              <th>{ translate('INDEX.TYPE') }</th>
-                              :
-                              null
-                            }
-                            <th>{ translate('INDEX.DIRECTION') }</th>
-                            <th className="hidden-xs hidden-sm">{ translate('INDEX.CONFIRMATIONS') }</th>
-                            <th>{ translate('INDEX.AMOUNT') }</th>
-                            <th>{ translate('INDEX.TIME') }</th>
-                            <th className={ this.isBasiliskMode() ? 'hide' : '' }>{ translate('INDEX.DEST_ADDRESS') }</th>
-                            <th className={ this.isBasiliskMode() ? 'hidden-xs hidden-sm text-center' : 'hidden-xs hidden-sm' }>{ translate('INDEX.TX_DETAIL') }</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          { this.renderTxHistoryList() }
-                        </tbody>
-                        <tfoot>
-                          <tr>
-                             { this.isNativeMode() ?
-                               <th>{ translate('INDEX.TYPE') }</th>
-                               :
-                               null
-                             }
-                            <th>{ translate('INDEX.DIRECTION') }</th>
-                            <th>{ translate('INDEX.CONFIRMATIONS') }</th>
-                            <th>{ translate('INDEX.AMOUNT') }</th>
-                            <th>{ translate('INDEX.TIME') }</th>
-                            <th className={ this.isBasiliskMode() ? 'hide' : '' }>{ translate('INDEX.DEST_ADDRESS') }</th>
-                            <th className={ this.isBasiliskMode() ? 'hidden-xs hidden-sm text-center' : '' }>{ translate('INDEX.TX_DETAIL') }</th>
-                          </tr>
-                        </tfoot>
-                      </table>
+                      { this.renderTxHistoryList() }
                     </div>
-                    { this.renderPagination() }
                   </div>
                 </div>
               </div>
diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss
index 84c0948..b8589ce 100644
--- a/react/src/styles/index.scss
+++ b/react/src/styles/index.scss
@@ -33,4 +33,5 @@
 @import '../components/addcoin/addcoin.scss';
 @import '../components/dashboard/main/dashboard.scss';
 @import '../components/login/login.scss';
-@import '../components/overrides.scss';
\ No newline at end of file
+@import '../components/overrides.scss';
+@import '~react-table/react-table.css';
diff --git a/react/src/translate/en.js b/react/src/translate/en.js
index 8a47b93..bc8fe39 100644
--- a/react/src/translate/en.js
+++ b/react/src/translate/en.js
@@ -249,7 +249,9 @@ export const _lang = {
       'INFO': 'Info',
       'ENTER': 'Enter',
       'ADDR_SM': 'address',
-      'ACTIVATING': 'Activating'
+      'ACTIVATING': 'Activating',
+      'NEXT_PAGE': 'Next Page',
+      'PREVIOUS_PAGE': 'Previous Page'
     },
     'ATOMIC': {
       'RAW_OUTPUT': 'Raw Output',

From b11c955cc9d7a93cae0707120e30464e73d9f434 Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Sat, 22 Jul 2017 19:04:46 +0200
Subject: [PATCH 02/16] Initialize itemsList to an empty array

---
 react/src/components/dashboard/walletsData/walletsData.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index bd950af..2f59532 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -41,7 +41,7 @@ class WalletsData extends React.Component {
       basiliskActionsMenu: false,
       itemsPerPage: 10,
       activePage: 1,
-      itemsList: null,
+      itemsList: [],
       currentAddress: null,
       addressSelectorOpen: false,
       currentStackLength: 0,

From 294af7a09c2d68fcc375ef0ec06f3f27d977da57 Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Sun, 23 Jul 2017 18:40:44 +0200
Subject: [PATCH 03/16] Transaction history improvements - visual improvements

---
 .../components/dashboard/main/dashboard.scss  | 18 ++++++++
 .../walletsData/pagination.render.js          |  1 -
 .../dashboard/walletsData/walletsData.js      | 43 +------------------
 .../walletsData/walletsData.render.js         | 41 ++++++++++++++++++
 4 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/react/src/components/dashboard/main/dashboard.scss b/react/src/components/dashboard/main/dashboard.scss
index 638aa79..0df5362 100755
--- a/react/src/components/dashboard/main/dashboard.scss
+++ b/react/src/components/dashboard/main/dashboard.scss
@@ -147,4 +147,22 @@
 
 .ReactTable .rt-tfoot .rt-td {
   text-align: center;
+}
+
+.ReactTable .rt-thead .rt-th.-sort-asc,
+.ReactTable .rt-thead .rt-td.-sort-asc,
+.ReactTable .rt-thead .rt-th.-sort-desc,
+.ReactTable .rt-thead .rt-td.-sort-desc{
+  box-shadow: none;
+}
+
+.ReactTable .rt-thead .rt-th.-sort-asc div:nth-child(1):after {
+  font-family: FontAwesome;
+  padding-left: 5px;
+  content: "\f106";
+}
+.ReactTable .rt-thead .rt-th.-sort-desc div:nth-child(1):after {
+  font-family: FontAwesome;
+  padding-left: 5px;
+  content: "\f107";
 }
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsData/pagination.render.js b/react/src/components/dashboard/walletsData/pagination.render.js
index 2e930f0..f90af8a 100644
--- a/react/src/components/dashboard/walletsData/pagination.render.js
+++ b/react/src/components/dashboard/walletsData/pagination.render.js
@@ -50,7 +50,6 @@ const PaginationRender = function() {
                   type={this.state.page === '' ? 'text' : 'number'}
                   onChange={e => {
                     const val = e.target.value;
-                    console.error('onchange', val);
                     this.changePage(val - 1);
                   }}
                   value={this.state.page === '' ? '' : this.state.page + 1}
diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index 2f59532..11384d9 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -23,6 +23,7 @@ import {
   AddressTypeRender,
   TransactionDetailRender,
   AddressItemRender,
+  TxTypeRender,
   TxHistoryListRender,
   AddressListRender,
   WalletsDataRender
@@ -97,7 +98,7 @@ class WalletsData extends React.Component {
         id: 'direction',
         Header: translate('INDEX.DIRECTION'),
         Footer: translate('INDEX.DIRECTION'),
-        accessor: (tx) => this.renderTxType(tx.category || tx.type)
+        accessor: (tx) => TxTypeRender.call(this, tx.category || tx.type)
       },
       {
         Header: translate('INDEX.CONFIRMATIONS'),
@@ -308,46 +309,6 @@ class WalletsData extends React.Component {
     });
   }
 
-  renderTxType(category) {
-    if (category === 'send' ||
-        category === 'sent') {
-      return (
-        <span className="label label-danger">
-          <i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
-        </span>
-      );
-    }
-    if (category === 'receive' ||
-        category === 'received') {
-      return (
-        <span className="label label-success">
-          <i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') }</span>
-        </span>
-      );
-    }
-    if (category === 'generate') {
-      return (
-        <span>
-          <i className="icon fa-cogs"></i> <span>{ translate('DASHBOARD.MINED') }</span>
-        </span>
-      );
-    }
-    if (category === 'immature') {
-      return (
-        <span>
-          <i className="icon fa-clock-o"></i> <span>{ translate('DASHBOARD.IMMATURE') }</span>
-        </span>
-      );
-    }
-    if (category === 'unknown') {
-      return (
-        <span>
-          <i className="icon fa-meh-o"></i> <span>{ translate('DASHBOARD.UNKNOWN') }</span>
-        </span>
-      );
-    }
-  }
-
   isFullySynced() {
     if (this.props.Dashboard.progress &&
         (Number(this.props.Dashboard.progress.balances) +
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 5c7345a..c9d8cb8 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -67,6 +67,46 @@ export const AddressListRender = function() {
   );
 };
 
+export const TxTypeRender = function(category) {
+  if (category === 'send' ||
+    category === 'sent') {
+    return (
+      <span className="label label-danger">
+          <i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
+        </span>
+    );
+  }
+  if (category === 'receive' ||
+    category === 'received') {
+    return (
+      <span className="label label-success">
+          <i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') }</span>
+        </span>
+    );
+  }
+  if (category === 'generate') {
+    return (
+      <span>
+          <i className="icon fa-cogs"></i> <span>{ translate('DASHBOARD.MINED') }</span>
+        </span>
+    );
+  }
+  if (category === 'immature') {
+    return (
+      <span>
+          <i className="icon fa-clock-o"></i> <span>{ translate('DASHBOARD.IMMATURE') }</span>
+        </span>
+    );
+  }
+  if (category === 'unknown') {
+    return (
+      <span>
+          <i className="icon fa-meh-o"></i> <span>{ translate('DASHBOARD.UNKNOWN') }</span>
+        </span>
+    );
+  }
+};
+
 export const TxHistoryListRender = function() {
   return (
     <ReactTable
@@ -76,6 +116,7 @@ export const TxHistoryListRender = function() {
       filterable={true}
       className='-striped -highlight'
       PaginationComponent={TablePaginationRenderer}
+      showPaginationTop={true}
       nextText={translate('INDEX.NEXT_PAGE')}
       previousText={translate('INDEX.PREVIOUS_PAGE')}
     />

From 8124d9ade1bfcbaaa87860becc9f16559176fe71 Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Mon, 24 Jul 2017 21:35:05 +0200
Subject: [PATCH 04/16] Transaction history improvements - visual improvements

---
 .../dashboard/walletsData/walletsData.js      | 41 ++++++++-----------
 .../walletsData/walletsData.render.js         | 17 +++++++-
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index 11384d9..e279bd4 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -22,6 +22,7 @@ import Store from '../../../store';
 import {
   AddressTypeRender,
   TransactionDetailRender,
+  AddressRender,
   AddressItemRender,
   TxTypeRender,
   TxHistoryListRender,
@@ -40,8 +41,6 @@ class WalletsData extends React.Component {
     super(props);
     this.state = {
       basiliskActionsMenu: false,
-      itemsPerPage: 10,
-      activePage: 1,
       itemsList: [],
       currentAddress: null,
       addressSelectorOpen: false,
@@ -80,6 +79,7 @@ class WalletsData extends React.Component {
       this.handleClickOutside,
       false
     );
+    socket.off('messages');
   }
 
   generateItemsListColumns() {
@@ -135,7 +135,7 @@ class WalletsData extends React.Component {
         id: 'destination-address',
         Header: translate('INDEX.DEST_ADDRESS'),
         Footer: translate('INDEX.DEST_ADDRESS'),
-        accessor: (tx) => this.renderAddress(tx)
+        accessor: (tx) => AddressRender.call(this, tx)
       });
     }
 
@@ -332,18 +332,19 @@ class WalletsData extends React.Component {
       return (
         <div>{ translate('INDEX.NO_DATA') }</div>
       );
+    } else if (this.state.itemsList) {
+      return TxHistoryListRender.call(this);
     }
 
-    return TxHistoryListRender.call(this);
+    return null;
   }
 
-  updateAddressSelection(address, type, amount) {
+  updateAddressSelection(address) {
     Store.dispatch(changeActiveAddress(address));
 
     this.setState(Object.assign({}, this.state, {
       currentAddress: address,
       addressSelectorOpen: false,
-      activePage: 1,
     }));
 
     if (this.props.ActiveCoin.mode === 'basilisk') {
@@ -373,27 +374,15 @@ class WalletsData extends React.Component {
     }));
   }
 
-  renderAddress(tx) {
-    if (!tx.address) {
-      return (
-        <span>
-          <i className="icon fa-bullseye"></i> <span className="label label-dark">{ translate('DASHBOARD.ZADDR_NOT_LISTED') }</span>
-        </span>
-      );
-    }
-
-    return tx.address;
-  }
-
   renderAddressByType(type) {
     const _addresses = this.props.ActiveCoin.addresses;
+    const _coin = this.props.ActiveCoin.coin;
 
     if (_addresses &&
         _addresses[type] &&
         _addresses[type].length) {
         let items = [];
         const _cache = this.props.ActiveCoin.cache;
-        const _coin = this.props.ActiveCoin.coin;
 
         for (let i = 0; i < _addresses[type].length; i++) {
           const address = _addresses[type][i].address;
@@ -409,19 +398,22 @@ class WalletsData extends React.Component {
         }
 
         return items;
-    } else {
-      return null;
+    } else if (this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) {
+      const address = this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
+      return AddressItemRender.call(this, address, type, null, _coin);
     }
+
+    return null;
   }
 
-  hasPublicAdresses() {
+  hasPublicAddresses() {
     return this.props.ActiveCoin.addresses &&
       this.props.ActiveCoin.addresses.public &&
       this.props.ActiveCoin.addresses.public.length;
   }
 
   renderAddressAmount() {
-    if (this.hasPublicAdresses()) {
+    if (this.hasPublicAddresses()) {
       const _addresses = this.props.ActiveCoin.addresses;
       const _cache = this.props.ActiveCoin.cache;
       const _coin = this.props.ActiveCoin.coin;
@@ -463,8 +455,7 @@ class WalletsData extends React.Component {
   renderAddressList() {
     if (this.props.Dashboard &&
         this.props.Dashboard.activeHandle &&
-        this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] &&
-        this.props.ActiveCoin.mode === 'basilisk') {
+        this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) {
       return AddressListRender.call(this);
     } else {
       return null;
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index c9d8cb8..e0e6ec4 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -30,10 +30,25 @@ export const TransactionDetailRender = function(transactionIndex) {
   );
 };
 
+export const AddressRender = function(tx) {
+  if (!tx.address) {
+    return (
+      <span>
+        <i className="icon fa-bullseye"></i>
+        <span className="label label-dark">
+          { translate('DASHBOARD.ZADDR_NOT_LISTED') }
+        </span>
+      </span>
+    );
+  }
+
+  return tx.address;
+};
+
 export const AddressItemRender = function(address, type, amount, coin) {
   return (
     <li key={address}>
-      <a onClick={ () => this.updateAddressSelection(address, type, amount) }>
+      <a onClick={ () => this.updateAddressSelection(address) }>
         <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
         <span className="text">[ { amount } { coin } ]  { address }</span>
         <span className="glyphicon glyphicon-ok check-mark"></span>

From 228ef080106d4259659dcf565f47026785944fd4 Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Mon, 24 Jul 2017 21:48:09 +0200
Subject: [PATCH 05/16] Transaction history improvements - validate if
 itemsList has elements

---
 react/src/components/dashboard/walletsData/walletsData.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index e279bd4..7596576 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -332,7 +332,7 @@ class WalletsData extends React.Component {
       return (
         <div>{ translate('INDEX.NO_DATA') }</div>
       );
-    } else if (this.state.itemsList) {
+    } else if (this.state.itemsList && this.state.itemsList.length) {
       return TxHistoryListRender.call(this);
     }
 

From caaf0ea767332914fcc20dedc3c8d8f13888f9cb Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Wed, 26 Jul 2017 22:52:35 +0200
Subject: [PATCH 06/16] Merge branch 'redux' into 'tx-history-improvements'

---
 .../components/dashboard/walletsData/walletsData.js  |  3 ++-
 .../dashboard/walletsData/walletsData.render.js      | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index ee734f8..43508bc 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -26,6 +26,7 @@ import {
   AddressRender,
   AddressItemRender,
   TxTypeRender,
+  TxAmountRender,
   TxHistoryListRender,
   AddressListRender,
   WalletsDataRender
@@ -113,7 +114,7 @@ class WalletsData extends React.Component {
         id: 'amount',
         Header: translate('INDEX.AMOUNT'),
         Footer: translate('INDEX.AMOUNT'),
-        accessor: (tx) => tx.amount || translate('DASHBOARD.UNKNOWN')
+        accessor: (tx) => TxAmountRender.call(this, tx)
       },
       {
         id: 'timestamp',
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 78d6bbf..63db3df 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -132,6 +132,18 @@ export const TxTypeRender = function(category) {
   }
 };
 
+export const TxAmountRender = function (tx) {
+  if (Config.roundValues) {
+    return (
+      <td title={ tx.amount }>{ formatValue('round', tx.amount, -6) || translate('DASHBOARD.UNKNOWN') }</td>
+    );
+  }
+
+  return (
+    <td>{ tx.amount || translate('DASHBOARD.UNKNOWN') }</td>
+  );
+};
+
 export const TxHistoryListRender = function() {
   return (
     <ReactTable

From 443a62745ae2d4aa8e4b3a2d99427ff361479347 Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Thu, 3 Aug 2017 00:02:54 +0200
Subject: [PATCH 07/16] TX History improvements - remarks fixes

---
 .../components/dashboard/main/dashboard.scss   | 10 ++++++++++
 .../dashboard/walletsData/walletsData.js       | 18 ++++++++++++++----
 .../walletsData/walletsData.render.js          |  6 ++++--
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/react/src/components/dashboard/main/dashboard.scss b/react/src/components/dashboard/main/dashboard.scss
index 0df5362..3309f01 100755
--- a/react/src/components/dashboard/main/dashboard.scss
+++ b/react/src/components/dashboard/main/dashboard.scss
@@ -165,4 +165,14 @@
   font-family: FontAwesome;
   padding-left: 5px;
   content: "\f107";
+}
+
+.rt-tr.-padRow {
+  display: none;
+}
+
+.ReactTable .-pagination,
+.ReactTable .rt-thead.-header,
+.ReactTable .rt-tfoot{
+  box-shadow: none;
 }
\ No newline at end of file
diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index 30755a6..d311c4f 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -51,7 +51,9 @@ class WalletsData extends React.Component {
       currentStackLength: 0,
       totalStackLength: 0,
       useCache: true,
-      itemsListColumns: this.generateItemsListColumns()
+      itemsListColumns: this.generateItemsListColumns(),
+      pageSize: 20,
+      showPagination: false
     };
 
     this.toggleBasiliskActionsMenu = this.toggleBasiliskActionsMenu.bind(this);
@@ -317,7 +319,8 @@ class WalletsData extends React.Component {
           (this.state.itemsList && !this.state.itemsList.length) ||
           (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
         this.setState(Object.assign({}, this.state, {
-          itemsList: sortByDate(this.props.ActiveCoin.txhistory),
+          itemsList: sortByDate(this.props.ActiveCoin.txhistory.slice(0, 30)),
+          showPagination: this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length >= this.state.pageSize
         }));
       }
     }
@@ -360,19 +363,26 @@ class WalletsData extends React.Component {
           </tr>
         );
       }
-    } else if (this.state.itemsList === 'no data') {
+    } else if (this.state.itemsList === 'no data' || this.state.itemsList.length == 0) {
       return (
         <tr>
           <td colSpan="6">{ translate('INDEX.NO_DATA') }</td>
         </tr>
       );
-    } else if (this.state.itemsList && this.state.itemsList.length) {
+    } else if (this.state.itemsList) {
       return TxHistoryListRender.call(this);
     }
 
     return null;
   }
 
+  onPageSizeChange(pageSize, pageIndex) {
+    this.setState(Object.assign({}, this.state, {
+      pageSize: pageSize,
+      showPagination: this.state.itemsList && this.state.itemsList.length >= pageSize
+    }))
+  }
+
   updateAddressSelection(address) {
     Store.dispatch(changeActiveAddress(address));
 
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 2570602..bb8fb44 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -150,12 +150,14 @@ export const TxHistoryListRender = function() {
       data={this.state.itemsList}
       columns={this.state.itemsListColumns}
       sortable={true}
-      filterable={true}
       className='-striped -highlight'
       PaginationComponent={TablePaginationRenderer}
-      showPaginationTop={true}
       nextText={translate('INDEX.NEXT_PAGE')}
       previousText={translate('INDEX.PREVIOUS_PAGE')}
+      showPaginationBottom={this.state.showPagination}
+      showPaginationTop={this.state.showPagination}
+      pageSize={this.pageSize}
+      onPageSizeChange={(pageSize, pageIndex) => this.onPageSizeChange(pageSize, pageIndex)}
     />
   );
 };

From 9f90e54bc19df49701aa125d7e96ced93dba9f8d Mon Sep 17 00:00:00 2001
From: petitPapillon <ivana.trajanovska@yahoo.com>
Date: Thu, 3 Aug 2017 22:29:52 +0200
Subject: [PATCH 08/16] Address list component - add padding

---
 .../src/components/dashboard/walletsData/walletsData.render.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index bb8fb44..3b05f0f 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -243,7 +243,7 @@ export const WalletsDataRender = function() {
                   </header>
                   <div className="panel-body">
                     <div className="row">
-                      <div className="col-sm-8">
+                      <div className="col-sm-8 padding-bottom-20">
                         { this.renderAddressList() }
                       </div>
                     </div>

From b99e8d2a0866068e91abce13a9e77c798f12dc8b Mon Sep 17 00:00:00 2001
From: Ivana Trajanovska <ivana.trajanovska@yahoo.com>
Date: Mon, 7 Aug 2017 19:04:31 +0200
Subject: [PATCH 09/16] Tx list - add a global filter

---
 .../dashboard/walletsData/walletsData.js      | 47 ++++++++++++++++---
 .../walletsData/walletsData.render.js         | 21 ++++++---
 .../walletsTxInfo/walletsTxInfo.render.js     |  2 +-
 3 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index d311c4f..71c7b7e 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -46,6 +46,7 @@ class WalletsData extends React.Component {
     this.state = {
       basiliskActionsMenu: false,
       itemsList: [],
+      filteredItemsList: [],
       currentAddress: null,
       addressSelectorOpen: false,
       currentStackLength: 0,
@@ -53,7 +54,8 @@ class WalletsData extends React.Component {
       useCache: true,
       itemsListColumns: this.generateItemsListColumns(),
       pageSize: 20,
-      showPagination: false
+      showPagination: false,
+      searchTerm: null
     };
 
     this.toggleBasiliskActionsMenu = this.toggleBasiliskActionsMenu.bind(this);
@@ -318,8 +320,10 @@ class WalletsData extends React.Component {
       if (!this.state.itemsList ||
           (this.state.itemsList && !this.state.itemsList.length) ||
           (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
-        this.setState(Object.assign({}, this.state, {
-          itemsList: sortByDate(this.props.ActiveCoin.txhistory.slice(0, 30)),
+          const sortedItemsList = sortByDate(this.props.ActiveCoin.txhistory);
+          this.setState(Object.assign({}, this.state, {
+          itemsList: sortedItemsList,
+          filteredItemsList: this.filterTransactions(sortedItemsList, this.state.searchTerm),
           showPagination: this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length >= this.state.pageSize
         }));
       }
@@ -502,16 +506,47 @@ class WalletsData extends React.Component {
     }
   }
 
-  renderAddressList() {
-    if (this.props.Dashboard &&
+  shouldDisplayAddressList() {
+    return this.props.Dashboard &&
         this.props.Dashboard.activeHandle &&
-        this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) {
+        this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin];
+  }
+
+  renderAddressList() {
+    if (this.shouldDisplayAddressList()) {
       return AddressListRender.call(this);
     } else {
       return null;
     }
   }
 
+  onSearchTermChange(newSearchTerm) {
+    this.setState(Object.assign({}, this.state, {
+      searchTerm: newSearchTerm,
+      filteredItemsList: this.filterTransactions(this.state.itemsList, newSearchTerm)
+    }));
+  }
+
+  filterTransactions(txList, searchTerm) {
+    return txList.filter(tx => this.filterTransaction(tx, searchTerm));
+  }
+
+  filterTransaction(tx, term) {
+    if (!term) {
+      return true;
+    }
+
+    return this.contains(tx.address, term)
+      || this.contains(tx.confirmations, term)
+      || this.contains(tx.amount, term)
+      || this.contains(tx.type, term)
+      || this.contains(secondsToString(tx.blocktime || tx.timestamp || tx.time), term);
+  }
+
+  contains(value, property) {
+    return (value + "").indexOf(property) !== -1;
+  }
+
   isActiveCoinMode(coinMode) {
     return this.props.ActiveCoin.mode === coinMode;
   }
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 3b05f0f..cca31dd 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -147,7 +147,7 @@ export const TxAmountRender = function (tx) {
 export const TxHistoryListRender = function() {
   return (
     <ReactTable
-      data={this.state.itemsList}
+      data={this.state.filteredItemsList}
       columns={this.state.itemsListColumns}
       sortable={true}
       className='-striped -highlight'
@@ -239,15 +239,22 @@ export const WalletsDataRender = function() {
                         null
                       }
                     </div>
-                    <h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
+                    <h4 className='panel-title'>{ translate('INDEX.TRANSACTION_HISTORY') }</h4>
                   </header>
-                  <div className="panel-body">
-                    <div className="row">
-                      <div className="col-sm-8 padding-bottom-20">
-                        { this.renderAddressList() }
+                  <div className='panel-body'>
+                    <div className='row padding-bottom-20'>
+                      {this.shouldDisplayAddressList() &&
+                        <div className='col-sm-8'>
+                          {this.renderAddressList()}
+                        </div>
+                      }
+                      <div className='col-sm-4'>
+                        <input className="form-control"
+                               onChange={e => this.onSearchTermChange(e.target.value)}
+                               placeholder='Search' />
                       </div>
                     </div>
-                    <div className="row">
+                    <div className='row'>
                       { this.renderTxHistoryList() }
                     </div>
                   </div>
diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
index 7b9643b..955d324 100644
--- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
+++ b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js
@@ -95,7 +95,7 @@ const WalletsTxInfoRender = function(txInfo) {
                           <tr>
                             <td>walletconflicts</td>
                             <td>
-                              { txInfo.walletconflicts.length }
+                              { txInfo.walletconflicts ? txInfo.walletconflicts.length : null }
                             </td>
                           </tr>
                         }

From c8ef1ace7adea8a7cb9253789d447adb1c834f7c Mon Sep 17 00:00:00 2001
From: Ivana Trajanovska <ivana.trajanovska@yahoo.com>
Date: Mon, 7 Aug 2017 19:57:53 +0200
Subject: [PATCH 10/16] Fixes after merge

---
 react/src/components/dashboard/walletsData/walletsData.js     | 4 ++--
 .../components/dashboard/walletsData/walletsData.render.js    | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index 3343813..6497156 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -55,9 +55,9 @@ class WalletsData extends React.Component {
       itemsListColumns: this.generateItemsListColumns(),
       pageSize: 20,
       showPagination: false,
-      searchTerm: null
+      searchTerm: null,
       coin: null,
-      txhistory: null,
+      txhistory: null
     };
 
     this.toggleBasiliskActionsMenu = this.toggleBasiliskActionsMenu.bind(this);
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 333cb8e..121c21b 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -49,7 +49,8 @@ export const AddressRender = function(tx) {
 
 export const AddressItemRender = function(address, type, amount, coin) {
   return (
-    <li key={address}>
+    <li key={address}
+        className={ address === this.state.currentAddress ? 'selected' : '' }>
       <a onClick={ () => this.updateAddressSelection(address) }>
         <i className={ 'icon fa-eye' + (type === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
         <span className="text">[ { amount } { coin } ]  { address }</span>

From c1d156ab76ca96a2f86d02e7ba3d4fe3a23cdd49 Mon Sep 17 00:00:00 2001
From: Ivana Trajanovska <ivana.trajanovska@yahoo.com>
Date: Mon, 7 Aug 2017 20:35:17 +0200
Subject: [PATCH 11/16] Fixes after merge

---
 .../components/dashboard/walletsData/walletsData.js    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index 6497156..b5fcd8b 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/react/src/components/dashboard/walletsData/walletsData.js
@@ -345,13 +345,15 @@ class WalletsData extends React.Component {
         this.props.ActiveCoin.txhistory !== 'loading' &&
         this.props.ActiveCoin.txhistory !== 'no data' &&
         this.props.ActiveCoin.txhistory.length) {
-      if (!this.state.itemsList ||
-          (this.state.itemsList && !this.state.itemsList.length) ||
-          (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
-          const sortedItemsList = sortByDate(this.props.ActiveCoin.txhistory);
+        if (!this.state.itemsList ||
+            (this.state.coin && this.state.coin !== this.props.ActiveCoin.coin) ||
+            (JSON.stringify(this.props.ActiveCoin.txhistory) !== JSON.stringify(this.state.txhistory))) {
+          const sortedItemsList = this.indexTxHistory(sortByDate(this.props.ActiveCoin.txhistory, this.props.ActiveCoin.mode === 'basilisk' ? 'index' : 'confirmations'));
+
           this.setState(Object.assign({}, this.state, {
             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
           }));
       }

From 9a07e920aee2804804b5cbdfd7245f44bc312452 Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Thu, 17 Aug 2017 14:05:24 +0300
Subject: [PATCH 12/16] basilisk progress bar reposition to block header

---
 .../walletsData/walletsData.render.js         | 22 ++++++++++---------
 .../dashboard/walletsNav/walletsNav.render.js |  2 +-
 react/src/components/overrides.scss           | 14 ++++++++++++
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 9c19aa6..792db46 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/react/src/components/dashboard/walletsData/walletsData.render.js
@@ -176,18 +176,20 @@ export const WalletsDataRender = function() {
             <div>
               <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
                 <div className="panel">
+                  { this.props.ActiveCoin.mode === 'basilisk' &&
+                    <div className={ 'margin-bottom-3 basilisk-progress-bar ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
+                      <div
+                        className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent"
+                        style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%' }}>
+                        { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
+                      </div>
+                    </div>
+                  }
                   <header className="panel-heading z-index-10">
-                  <i
-                    className="icon fa-refresh manual-txhistory-refresh pointer"
-                    onClick={ this.refreshTxHistory }></i>
+                    <i
+                      className={ 'icon fa-refresh manual-txhistory-refresh pointer' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? '' : ' hide') }
+                      onClick={ this.refreshTxHistory }></i>
                     <div className={ 'panel-actions' + (this.props.ActiveCoin.mode === 'basilisk' ? '' : ' hide') }>
-                      <div className={ 'margin-bottom-3 ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
-                        <div
-                          className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent"
-                          style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%' }}>
-                          { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
-                        </div>
-                      </div>
                       { !this.isNativeMode() ?
                         <div
                           className={ 'dropdown basilisk-actions' + (this.state.basiliskActionsMenu ? ' open' : '') }
diff --git a/react/src/components/dashboard/walletsNav/walletsNav.render.js b/react/src/components/dashboard/walletsNav/walletsNav.render.js
index b17f82d..76fc023 100644
--- a/react/src/components/dashboard/walletsNav/walletsNav.render.js
+++ b/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' }>
+        <ol className={ this.state.nativeOnly ? 'hide' : 'breadcrumb' + (this.props.ActiveCoin.mode === 'basilisk' ? ' breadcrumb--basilisk' : '') }>
           <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
diff --git a/react/src/components/overrides.scss b/react/src/components/overrides.scss
index 3b9c82a..3d0aad3 100644
--- a/react/src/components/overrides.scss
+++ b/react/src/components/overrides.scss
@@ -894,6 +894,15 @@ select{
   }
 }
 
+.basilisk-progress-bar {
+  position: absolute;
+  width: calc(100% - 100px);
+}
+
+.breadcrumb--basilisk {
+  top: 0;
+}
+
 .ReactTable {
   border: none;
 
@@ -920,6 +929,11 @@ select{
   .rt-thead .rt-td {
     padding: 10px 5px;
   }
+  .rt-tr.-odd div,
+  .rt-tr.-even div {
+    padding-top: 7px;
+    padding-bottom: 7px;
+  }
   .colum--direction {
     width: 40px !important;
     flex: 40 0 auto !important;

From fb0f846eac0612927089320da5041e9a391c6d3d Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Fri, 18 Aug 2017 14:31:03 +0300
Subject: [PATCH 13/16] read assetchain ports from window

---
 react/src/components/addcoin/payload.js | 198 +++++++++++++-----------
 1 file changed, 104 insertions(+), 94 deletions(-)

diff --git a/react/src/components/addcoin/payload.js b/react/src/components/addcoin/payload.js
index 7e727f6..e167e1d 100644
--- a/react/src/components/addcoin/payload.js
+++ b/react/src/components/addcoin/payload.js
@@ -182,6 +182,11 @@ export function startCurrencyAssetChain(confpath, coin, mode) {
 	let AddCoinDataPayload = {};
 	let tmpPendValue = 1;
 	let tmpIguanaRPCAuth = `tmpIgRPCUser@${sessionStorage.getItem('IguanaRPCAuth')}`;
+	let assetChainPorts;
+
+  try {
+    assetChainPorts = window.require('electron').remote.getCurrentWindow().assetChainPorts;
+  } catch (e) {}
 
 	if (coin !== 'BTC' &&
       coin !== 'LTC' &&
@@ -424,218 +429,218 @@ export function startCurrencyAssetChain(confpath, coin, mode) {
 	} else {
 		const USDDiff = {
 			'netmagic': '2d8e7803',
-			'p2p': 13966,
-			'rpc': 13967
+			'p2p': assetChainPorts.USD,
+			'rpc': assetChainPorts.USD - 1
 		};
 		AddCoinDataPayload.USDVar = Object.assign({}, _payloadVar, USDDiff);
 
 		const CHFDiff = {
 			'netmagic': '59fbeb5c',
-			'p2p': 15311,
-			'rpc': 15312
+			'p2p': assetChainPorts.CHF,
+			'rpc': assetChainPorts.CHF - 1
 		};
 		AddCoinDataPayload.CHFVar = Object.assign({}, _payloadVar, CHFDiff);
 
 		const CADDiff = {
 			'netmagic': '3c212763',
-			'p2p': 8719,
-			'rpc': 8720
+			'p2p': assetChainPorts.CAD,
+			'rpc': assetChainPorts.CAD - 1
 		};
 		AddCoinDataPayload.CADVar = Object.assign({}, _payloadVar, CADDiff);
 
 		const BRLDiff = {
 			'netmagic': 'ab82d10d',
-			'p2p': 9913,
-			'rpc': 9914
+			'p2p': assetChainPorts.BRL,
+			'rpc': assetChainPorts.BRL - 1
 		};
 		AddCoinDataPayload.BRLVar = Object.assign({}, _payloadVar, BRLDiff);
 
 		const BGNDiff = {
 			'netmagic': '93056ad4',
-			'p2p': 9109,
-			'rpc': 9110
+			'p2p': assetChainPorts.BGN,
+			'rpc': assetChainPorts.BGN - 1
 		};
 		AddCoinDataPayload.BGNVar = Object.assign({}, _payloadVar, BGNDiff);
 
 		const AUDDiff = {
 			'netmagic': '07220d4e',
-			'p2p': 8044,
-			'rpc': 8045
+			'p2p': assetChainPorts.AUD,
+			'rpc': assetChainPorts.AUD - 1
 		};
 		AddCoinDataPayload.AUDVar = Object.assign({}, _payloadVar, AUDDiff);
 
 		const PLNDiff = {
 			'netmagic': '46ab3c28',
-			'p2p': 13492,
-			'rpc': 13493
+			'p2p': assetChainPorts.PLN,
+			'rpc': assetChainPorts.PLN - 1
 		};
 		AddCoinDataPayload.PLNVar = Object.assign({}, _payloadVar, PLNDiff);
 
 		const PHPDiff = {
 			'netmagic': '21535fb6',
-			'p2p': 11180,
-			'rpc': 11181
+			'p2p': assetChainPorts.PHP,
+			'rpc': assetChainPorts.PHP - 1
 		};
 		AddCoinDataPayload.PHPVar = Object.assign({}, _payloadVar, PHPDiff);
 
 		const NZDDiff = {
 			'netmagic': 'f579c9c2',
-			'p2p': 10914,
-			'rpc': 10915
+			'p2p': assetChainPorts.NZD,
+			'rpc': assetChainPorts.NZD - 1
 		};
 		AddCoinDataPayload.NZDVar = Object.assign({}, _payloadVar, NZDDiff);
 
 		const NOKDiff = {
 			'netmagic': '7082c365',
-			'p2p': 11587,
-			'rpc': 11588
+			'p2p': assetChainPorts.NOK,
+			'rpc': assetChainPorts.NOK - 1
 		};
 		AddCoinDataPayload.NOKVar = Object.assign({}, _payloadVar, NOKDiff);
 
 		const MYRDiff = {
 			'netmagic': '3e21761f',
-			'p2p': 10687,
-			'rpc': 10688
+			'p2p': assetChainPorts.MYR,
+			'rpc': assetChainPorts.MYR - 1
 		};
 		AddCoinDataPayload.MYRVar = Object.assign({}, _payloadVar, MYRDiff);
 
 		const MXNDiff = {
 			'netmagic': '304c6c12',
-			'p2p': 13969,
-			'rpc': 13970
+			'p2p': assetChainPorts.MXN,
+			'rpc': assetChainPorts.MXN - 1
 		};
 		AddCoinDataPayload.MXNVar = Object.assign({}, _payloadVar, MXNDiff);
 
 		const KRWDiff = {
 			'netmagic': 'c8706588',
-			'p2p': 14019,
-			'rpc': 14020
+			'p2p': assetChainPorts.KRW,
+			'rpc': assetChainPorts.KRW - 1
 		};
 		AddCoinDataPayload.KRWVar = Object.assign({}, _payloadVar, KRWDiff);
 
 		const JPYDiff = {
 			'netmagic': '7a55295c',
-			'p2p': 13144,
-			'rpc': 13145
+			'p2p': assetChainPorts.JPY,
+			'rpc': assetChainPorts.JPY - 1
 		};
 		AddCoinDataPayload.JPYVar = Object.assign({}, _payloadVar, JPYDiff);
 
 		const INRDiff = {
 			'netmagic': '740dfc1d',
-			'p2p': 10535,
-			'rpc': 10536
+			'p2p': assetChainPorts.INR,
+			'rpc': assetChainPorts.INR - 1
 		};
 		AddCoinDataPayload.INRVar = Object.assign({}, _payloadVar, INRDiff);
 
 		const ILSDiff = {
 			'netmagic': '605fcd58',
-			'p2p': 14637,
-			'rpc': 14638
+			'p2p': assetChainPorts.ILS,
+			'rpc': assetChainPorts.ILS - 1
 		};
 		AddCoinDataPayload.ILSVar = Object.assign({}, _payloadVar, ILSDiff);
 
 		const IDRDiff = {
 			'netmagic': 'fee513e7',
-			'p2p': 14458,
-			'rpc': 14459
+			'p2p': assetChainPorts.IDR,
+			'rpc': assetChainPorts.IDR - 1
 		};
 		AddCoinDataPayload.IDRVar = Object.assign({}, _payloadVar, IDRDiff);
 
 		const HKDDiff = {
 			'netmagic': '57269d95',
-			'p2p': 15408,
-			'rpc': 15409
+			'p2p': assetChainPorts.HKD,
+			'rpc': assetChainPorts.HKD - 1
 		};
 		AddCoinDataPayload.HKDVar = Object.assign({}, _payloadVar, HKDDiff);
 
 		const HUFDiff = {
 			'netmagic': 'a478d2af',
-			'p2p': 13698,
-			'rpc': 13699
+			'p2p': assetChainPorts.HUF,
+			'rpc': assetChainPorts.HUF - 1
 		};
 		AddCoinDataPayload.HUFVar = Object.assign({}, _payloadVar, HUFDiff);
 
 		const GBPDiff = {
 			'netmagic': '5e0ed955',
-			'p2p': 11504,
-			'rpc': 11505
+			'p2p': assetChainPorts.GBP,
+			'rpc': assetChainPorts.GBP - 1
 		};
 		AddCoinDataPayload.GBPVar = Object.assign({}, _payloadVar, GBPDiff);
 
 		const EURDiff = {
 			'netmagic': '8a3fd0bd',
-			'p2p': 8064,
-			'rpc': 8065
+			'p2p': assetChainPorts.EUR,
+			'rpc': assetChainPorts.EUR - 1
 		};
 		AddCoinDataPayload.EURVar = Object.assign({}, _payloadVar, EURDiff);
 
 		const DKKDiff = {
 			'netmagic': 'a2c2380c',
-			'p2p': 13829,
-			'rpc': 13830
+			'p2p': assetChainPorts.DKK,
+			'rpc': assetChainPorts.DKK - 1
 		};
 		AddCoinDataPayload.DKKVar = Object.assign({}, _payloadVar, DKKDiff);
 
 		const CNYDiff = {
 			'netmagic': '2a51b987',
-			'p2p': 10383,
-			'rpc': 10384
+			'p2p': assetChainPorts.CNY,
+			'rpc': assetChainPorts.CNY - 1
 		};
 		AddCoinDataPayload.CNYVar = Object.assign({}, _payloadVar, CNYDiff);
 
 		const ZARDiff = {
 			'netmagic': '920c0484',
-			'p2p': 15159,
-			'rpc': 15160
+			'p2p': assetChainPorts.ZAR,
+			'rpc': assetChainPorts.ZAR - 1
 		};
 		AddCoinDataPayload.ZARVar = Object.assign({}, _payloadVar, ZARDiff);
 
 		const TRYDiff = {
 			'netmagic': '82b9a778',
-			'p2p': 13923,
-			'rpc': 13924
+			'p2p': assetChainPorts.TRY,
+			'rpc': assetChainPorts.TRY - 1
 		};
 		AddCoinDataPayload.TRYVar = Object.assign({}, _payloadVar, TRYDiff);
 
 		const THBDiff = {
 			'netmagic': 'b58aef42',
-			'p2p': 11846,
-			'rpc': 11847
+			'p2p': assetChainPorts.THB,
+			'rpc': assetChainPorts.THB - 1
 		};
 		AddCoinDataPayload.THBVar = Object.assign({}, _payloadVar, THBDiff);
 
 		const SGDDiff = {
 			'netmagic': 'ca255b29',
-			'p2p': 14474,
-			'rpc': 14475
+			'p2p': assetChainPorts.SGD,
+			'rpc': assetChainPorts.SGD - 1
 		};
 		AddCoinDataPayload.SGDVar = Object.assign({}, _payloadVar, SGDDiff);
 
 		const SEKDiff = {
 			'netmagic': 'd95ad28b',
-			'p2p': 11446,
-			'rpc': 11447
+			'p2p': assetChainPorts.SEK,
+			'rpc': assetChainPorts.SEK - 1
 		};
 		AddCoinDataPayload.SEKVar = Object.assign({}, _payloadVar, SEKDiff);
 
 		const RONDiff = {
 			'netmagic': 'eb2c9500',
-			'p2p': 8674,
-			'rpc': 8675
+			'p2p': assetChainPorts.RON,
+			'rpc': assetChainPorts.RON - 1
 		};
 		AddCoinDataPayload.RONVar = Object.assign({}, _payloadVar, RONDiff);
 
 		const RUBDiff = {
 			'netmagic': '1b9a0eb9',
-			'p2p': 8198,
-			'rpc': 8199
+			'p2p': assetChainPorts.RUB,
+			'rpc': assetChainPorts.RUB - 1
 		};
 		AddCoinDataPayload.RUBVar = Object.assign({}, _payloadVar, RUBDiff);
 
 		const CZKDiff = {
 			'netmagic': '37f7ae5a',
-			'p2p': 9481,
-			'rpc': 9482
+			'p2p': assetChainPorts.CZK,
+			'rpc': assetChainPorts.CZK - 1
 		};
 		AddCoinDataPayload.CZKVar = Object.assign({}, _payloadVar, CZKDiff);
 
@@ -646,6 +651,11 @@ export function startCurrencyAssetChain(confpath, coin, mode) {
 export function startAssetChain(confpath, coin, mode, getSuppyOnly) {
 	let tmpIguanaRPCAuth = `tmpIgRPCUser@${sessionStorage.getItem('IguanaRPCAuth')}`;
 	let tmpPendValue;
+	let assetChainPorts;
+
+  try {
+    assetChainPorts = window.require('electron').remote.getCurrentWindow().assetChainPorts;
+  } catch (e) {}
 
 	if (coin !== 'BTC' &&
       coin !== 'LTC' &&
@@ -682,74 +692,74 @@ export function startAssetChain(confpath, coin, mode, getSuppyOnly) {
 		'SUPERNET': {
 			'name': 'SUPERNET',
 			'supply': 816061,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"SUPERNET","conf":"SUPERNET.conf","path":confpath,"RELAY":-1,"VALIDATE":0,"startpend":4,"endpend":4,"maxpeers":32,"newcoin":"SUPERNET","name":"SUPERNET","netmagic":"cc55d9d4","p2p":11340,"rpc":11341}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":32,"newcoin":"SUPERNET","name":"SUPERNET","netmagic":"cc55d9d4","p2p":11340,"rpc":11341})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"SUPERNET","conf":"SUPERNET.conf","path":confpath,"RELAY":-1,"VALIDATE":0,"startpend":4,"endpend":4,"maxpeers":32,"newcoin":"SUPERNET","name":"SUPERNET","netmagic":"cc55d9d4","p2p":assetChainPorts.SUPERNET - 1,"rpc":assetChainPorts.SUPERNET}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":32,"newcoin":"SUPERNET","name":"SUPERNET","netmagic":"cc55d9d4","p2p":assetChainPorts.SUPERNET - 1,"rpc":assetChainPorts.SUPERNET})
 		},
 		'REVS': {
 			'name': 'REVS',
 			'supply': 1300000,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"REVS","conf":"REVS.conf","path":confpath,"RELAY":-1,"VALIDATE":0,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"REVS","name":"REVS","netmagic":"905c3498","p2p":10195,"rpc":10196}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"REVS","name":"REVS","netmagic":"905c3498","p2p":10195,"rpc":10196})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"REVS","conf":"REVS.conf","path":confpath,"RELAY":-1,"VALIDATE":0,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"REVS","name":"REVS","netmagic":"905c3498","p2p":assetChainPorts.REVS - 1,"rpc":assetChainPorts.REVS}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"REVS","name":"REVS","netmagic":"905c3498","p2p":assetChainPorts.REVS - 1,"rpc":assetChainPorts.REVS})
 		},
 		'WLC': {
 			'name': 'WIRELESS',
 			'supply': 210000000,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"WLC","conf":"WLC.conf","path":confpath,"RELAY":-1,"VALIDATE":0,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"WLC","name":"WIRELESS","netmagic":"62071ed3","p2p":11666,"rpc":11667}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"WLC","name":"WIRELESS","netmagic":"62071ed3","p2p":11666,"rpc":11667})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"WLC","conf":"WLC.conf","path":confpath,"RELAY":-1,"VALIDATE":0,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"WLC","name":"WIRELESS","netmagic":"62071ed3","p2p":assetChainPorts.WIRELESS - 1,"rpc":assetChainPorts.WIRELESS}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"WLC","name":"WIRELESS","netmagic":"62071ed3","p2p":assetChainPorts.WIRELESS - 1,"rpc":assetChainPorts.WIRELESS})
 		},
 		'PANGEA': {
 			'name': 'PANGEA',
 			'supply': 999999,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"PANGEA","conf":"PANGEA.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"PANGEA","name":"PANGEA","netmagic":"5fa45ae8","p2p":10073,"rpc":10074}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"PANGEA","name":"PANGEA","netmagic":"5fa45ae8","p2p":10073,"rpc":10074})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"PANGEA","conf":"PANGEA.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"PANGEA","name":"PANGEA","netmagic":"5fa45ae8","p2p":assetChainPorts.PANGEA - 1,"rpc":assetChainPorts.PANGEA}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"PANGEA","name":"PANGEA","netmagic":"5fa45ae8","p2p":assetChainPorts.PANGEA - 1,"rpc":assetChainPorts.PANGEA})
 		},
 		'DEX': {
 			'name': 'DEX',
 			'supply': 999999,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"DEX","conf":"DEX.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"DEX","name":"DEX","netmagic":"f2ae0516","p2p":9502,"rpc":9503}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"DEX","name":"DEX","netmagic":"f2ae0516","p2p":9502,"rpc":9503})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"DEX","conf":"DEX.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"DEX","name":"DEX","netmagic":"f2ae0516","p2p":assetChainPorts.DEX - 1,"rpc":assetChainPorts.DEX}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"DEX","name":"DEX","netmagic":"f2ae0516","p2p":assetChainPorts.DEX - 1,"rpc":assetChainPorts.DEX})
 		},
 		'JUMBLR': {
 			'name': 'JUMBLR',
 			'supply': 999999,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"JUMBLR","conf":"JUMBLR.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"JUMBLR","name":"JUMBLR","netmagic":"7223759e","p2p":10788,"rpc":10789}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"JUMBLR","name":"JUMBLR","netmagic":"7223759e","p2p":10788,"rpc":10789})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"JUMBLR","conf":"JUMBLR.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"JUMBLR","name":"JUMBLR","netmagic":"7223759e","p2p":assetChainPorts.JUMBLR - 1,"rpc":assetChainPorts.JUMBLR}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"JUMBLR","name":"JUMBLR","netmagic":"7223759e","p2p":assetChainPorts.JUMBLR - 1,"rpc":assetChainPorts.JUMBLR})
 		},
 		'BET': {
 			'name': 'BET',
 			'supply': 999999,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"BET","conf":"BET.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"BET","name":"BET","netmagic":"6b9e3e1b","p2p":11221,"rpc":11222}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"BET","name":"BET","netmagic":"6b9e3e1b","p2p":11221,"rpc":11222})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"BET","conf":"BET.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"BET","name":"BET","netmagic":"6b9e3e1b","p2p":assetChainPorts.BET - 1,"rpc":assetChainPorts.BET}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"BET","name":"BET","netmagic":"6b9e3e1b","p2p":assetChainPorts.BET - 1,"rpc":assetChainPorts.BET})
 		},
 		'CRYPTO': {
 			'name': 'CRYPTO',
 			'supply': 999999,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"CRYPTO","conf":"CRYPTO.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"CRYPTO","name":"CRYPTO","netmagic":"fced9e2a","p2p":10419,"rpc":10420}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"CRYPTO","name":"CRYPTO","netmagic":"fced9e2a","p2p":10419,"rpc":10420})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"CRYPTO","conf":"CRYPTO.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"CRYPTO","name":"CRYPTO","netmagic":"fced9e2a","p2p":assetChainPorts.CRYPTO - 1,"rpc":assetChainPorts.CRYPTO}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"CRYPTO","name":"CRYPTO","netmagic":"fced9e2a","p2p":assetChainPorts.CRYPTO - 1,"rpc":assetChainPorts.CRYPTO})
 		},
 		'HODL': {
 			'name': 'HODL',
 			'supply': 9999999,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"HODL","conf":"HODL.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"HODL","name":"HODL","netmagic":"9b13fb5f","p2p":8009,"rpc":8010}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"HODL","name":"HODL","netmagic":"9b13fb5f","p2p":8009,"rpc":8010})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"HODL","conf":"HODL.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"HODL","name":"HODL","netmagic":"9b13fb5f","p2p":assetChainPorts.HODL - 1,"rpc":assetChainPorts.HODL}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"HODL","name":"HODL","netmagic":"9b13fb5f","p2p":assetChainPorts.HODL - 1,"rpc":assetChainPorts.HODL})
 		},
 		'SHARK': {
 			'name': 'SHARK',
 			'supply': 1401,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"SHARK","conf":"SHARK.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"SHARK","name":"SHARK","netmagic":"54a5e30c","p2p":14103,"rpc":14104}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"SHARK","name":"SHARK","netmagic":"54a5e30c","p2p":14103,"rpc":14104})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"SHARK","conf":"SHARK.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"SHARK","name":"SHARK","netmagic":"54a5e30c","p2p":assetChainPorts.SHARK - 1,"rpc":assetChainPorts.SHARK}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"SHARK","name":"SHARK","netmagic":"54a5e30c","p2p":assetChainPorts.SHARK - 1,"rpc":assetChainPorts.SHARK})
 		},
 		'BOTS': {
 			'name': 'BOTS',
 			'supply': 999999,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"BOTS","conf":"BOTS.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"BOTS","name":"BOTS","netmagic":"5bec8cf7","p2p":10150,"rpc":10151}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"BOTS","name":"BOTS","netmagic":"5bec8cf7","p2p":10150,"rpc":10151})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"BOTS","conf":"BOTS.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"BOTS","name":"BOTS","netmagic":"5bec8cf7","p2p":assetChainPorts.BOTS - 1,"rpc":assetChainPorts.BOTS}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"BOTS","name":"BOTS","netmagic":"5bec8cf7","p2p":assetChainPorts.BOTS - 1,"rpc":assetChainPorts.BOTS})
 		},
 		'MGW': {
 			'name': 'MGW',
 			'supply': 999999,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"MGW","conf":"MGW.conf","path":confpath,"unitval":"20","zcash":1,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"MGW","name":"MGW","netmagic":"6eea5dbb","p2p":15523,"rpc":15524}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"unitval":"20","zcash":1,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"MGW","name":"MGW","netmagic":"6eea5dbb","p2p":15523,"rpc":15524})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"MGW","conf":"MGW.conf","path":confpath,"unitval":"20","zcash":1,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"MGW","name":"MGW","netmagic":"6eea5dbb","p2p":assetChainPorts.MGW - 1,"rpc":assetChainPorts.MGW}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"unitval":"20","zcash":1,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"MGW","name":"MGW","netmagic":"6eea5dbb","p2p":assetChainPorts.MGW - 1,"rpc":assetChainPorts.MGW})
 		},
 		'MVP': {
 			'name': 'MVP',
@@ -760,26 +770,26 @@ export function startAssetChain(confpath, coin, mode, getSuppyOnly) {
 		'KV': {
 			'name': 'KV',
 			'supply': 1000000,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"KV","conf":"KV.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"KV","name":"KV","netmagic":"b09a2d65","p2p":9746,"rpc":9747}) : {},
-			'AddCoinDataVar': Object.assign(_acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"KV","name":"KV","netmagic":"b09a2d65","p2p":9746,"rpc":9747})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"KV","conf":"KV.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"KV","name":"KV","netmagic":"b09a2d65","p2p":assetChainPorts.KV - 1,"rpc":assetChainPorts.KV}) : {},
+			'AddCoinDataVar': Object.assign(_acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"KV","name":"KV","netmagic":"b09a2d65","p2p":assetChainPorts.KV - 1,"rpc":assetChainPorts.KV})
 		},
 		'CEAL': {
 			'name': 'CEAL',
 			'supply': 366666666,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"CEAL","conf":"CEAL.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"CEAL","name":"CEAL","netmagic":"09e51af8","p2p":13096,"rpc":13097}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"CEAL","name":"CEAL","netmagic":"09e51af8","p2p":13096,"rpc":13097})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"CEAL","conf":"CEAL.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"CEAL","name":"CEAL","netmagic":"09e51af8","p2p":assetChainPorts.CEAL - 1,"rpc":assetChainPorts.CEAL}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"CEAL","name":"CEAL","netmagic":"09e51af8","p2p":assetChainPorts.CEAL - 1,"rpc":assetChainPorts.CEAL})
 		},
 		'MESH': {
 			'name': 'MESH',
 			'supply': 1000007,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"MESH","conf":"MESH.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"MESH","name":"MESH","netmagic":"f0265c67","p2p":8399,"rpc":8400}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"MESH","name":"MESH","netmagic":"f0265c67","p2p":8399,"rpc":8400})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"MESH","conf":"MESH.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"MESH","name":"MESH","netmagic":"f0265c67","p2p":assetChainPorts.MESH - 1,"rpc":assetChainPorts.MESH}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"MESH","name":"MESH","netmagic":"f0265c67","p2p":assetChainPorts.MESH - 1,"rpc":assetChainPorts.MESH})
 		},
 		'COQUI': {
 			'name': 'COQUI',
 			'supply': 72000000,
-			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"COQUI","conf":"COQUI.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"COQUI","name":"COQUI","netmagic":"4cbd5ef4","p2p":14275,"rpc":14276}) : {},
-			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"COQUI","name":"COQUI","netmagic":"4cbd5ef4","p2p":14275,"rpc":14276})
+			'AddCoinData': confpath ? Object.assign({}, _acPayloadOrigin, {"coin":"COQUI","conf":"COQUI.conf","path":confpath,"RELAY":-1,"VALIDATE":1,"startpend":4,"endpend":4,"maxpeers":8,"newcoin":"COQUI","name":"COQUI","netmagic":"4cbd5ef4","p2p":assetChainPorts.COQUI - 1,"rpc":assetChainPorts.COQUI}) : {},
+			'AddCoinDataVar': Object.assign({}, _acPayloadOrigin, {'userpass':tmpIguanaRPCAuth,"RELAY":mode,"VALIDATE":mode,"startpend":tmpPendValue,"endpend":tmpPendValue,"maxpeers":8,"newcoin":"COQUI","name":"COQUI","netmagic":"4cbd5ef4","p2p":assetChainPorts.COQUI - 1,"rpc":assetChainPorts.COQUI})
 		}
 	};
 

From 0f180d57eb585aef9f4ccf796297ec44c3aaa5dc Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Fri, 18 Aug 2017 14:39:50 +0300
Subject: [PATCH 14/16] update iguanaActiveHandle

---
 react/src/actions/actions/addressBalance.js | 2 +-
 react/src/actions/actions/walletAuth.js     | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/react/src/actions/actions/addressBalance.js b/react/src/actions/actions/addressBalance.js
index a420575..9ec636b 100644
--- a/react/src/actions/actions/addressBalance.js
+++ b/react/src/actions/actions/addressBalance.js
@@ -222,7 +222,7 @@ export function getKMDAddressesNative(coin, mode, currentAddress) {
 
             let isNewAddr = true;
             for (let x = 0; x < result.length && isNewAddr; x++) {
-              for (let y=0; y < result[x].length && isNewAddr; y++) {
+              for (let y = 0; y < result[x].length && isNewAddr; y++) {
                 if (allAddrArray[a] === result[x][y]) {
                   isNewAddr = false;
                 }
diff --git a/react/src/actions/actions/walletAuth.js b/react/src/actions/actions/walletAuth.js
index 31f2332..80798ac 100644
--- a/react/src/actions/actions/walletAuth.js
+++ b/react/src/actions/actions/walletAuth.js
@@ -255,6 +255,12 @@ export function iguanaActiveHandle(getMainAddress) {
           'response': json,
         }));
       }
+      if (!Config.iguanaLessMode &&
+          sessionStorage.getItem('IguanaActiveAccount') &&
+          JSON.parse(sessionStorage.getItem('IguanaActiveAccount')).pubkey === json.pubkey &&
+          json.status === 'unlocked') {
+        sessionStorage.setItem('IguanaActiveAccount', JSON.stringify(json));
+      }
       dispatch(getMainAddress ? getMainAddressState(json) : iguanaActiveHandleState(json));
     });
   }

From 0ad219fd138d89134743a553f33f3d500a89c153 Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Sat, 19 Aug 2017 19:10:02 +0300
Subject: [PATCH 15/16] refactored transactions history table

---
 .../walletsData/pagination.render.js          | 11 ++-
 .../dashboard/walletsData/walletsData.js      | 40 ++++++---
 .../walletsData/walletsData.render.js         | 69 ++++++++------
 .../walletsNative/walletsNative.render.js     |  2 +-
 .../dashboard/walletsNav/walletsNav.render.js |  2 +-
 react/src/components/overrides.scss           | 89 +++++++++++++++----
 6 files changed, 153 insertions(+), 60 deletions(-)

diff --git a/react/src/components/dashboard/walletsData/pagination.render.js b/react/src/components/dashboard/walletsData/pagination.render.js
index e7535de..c4d1de6 100644
--- a/react/src/components/dashboard/walletsData/pagination.render.js
+++ b/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}
diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js
index 2480162..43c0e1d 100644
--- a/react/src/components/dashboard/walletsData/walletsData.js
+++ b/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;
-    return this.props.Dashboard &&
+    if (this.props.ActiveCoin.mode === 'basilisk') {
+      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) {
diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js
index 792db46..51f0f8a 100644
--- a/react/src/components/dashboard/walletsData/walletsData.render.js
+++ b/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">
-              <a><span className="text"> - { translate('KMD_NATIVE.SELECT_ADDRESS') } - </span></a>
+            <li className="no--hover">
+              <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}
-      columns={this.state.itemsListColumns}
-      sortable={true}
+      data={ this.state.filteredItemsList }
+      columns={ this.state.itemsListColumns }
+      minRows="0"
+      sortable={ true }
       className="-striped -highlight"
-      PaginationComponent={TablePaginationRenderer}
-      nextText={translate('INDEX.NEXT_PAGE')}
-      previousText={translate('INDEX.PREVIOUS_PAGE')}
-      showPaginationBottom={this.state.showPagination}
-      showPaginationTop={this.state.showPagination}
-      pageSize={this.pageSize}
-      onPageSizeChange={(pageSize, pageIndex) => this.onPageSizeChange(pageSize, pageIndex)} />
+      PaginationComponent={ TablePaginationRenderer }
+      nextText={ translate('INDEX.NEXT_PAGE') }
+      previousText={ translate('INDEX.PREVIOUS_PAGE') }
+      showPaginationBottom={ this.state.showPagination }
+      pageSize={ this.pageSize }
+      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">
-                          {this.renderAddressList()}
+                        <div className="col-sm-8 no-padding-left">
+                          { 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>
diff --git a/react/src/components/dashboard/walletsNative/walletsNative.render.js b/react/src/components/dashboard/walletsNative/walletsNative.render.js
index e9202c2..deacd2f 100644
--- a/react/src/components/dashboard/walletsNative/walletsNative.render.js
+++ b/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') } />
diff --git a/react/src/components/dashboard/walletsNav/walletsNav.render.js b/react/src/components/dashboard/walletsNav/walletsNav.render.js
index 76fc023..58e7cf1 100644
--- a/react/src/components/dashboard/walletsNav/walletsNav.render.js
+++ b/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
diff --git a/react/src/components/overrides.scss b/react/src/components/overrides.scss
index 3d0aad3..11c0ee8 100644
--- a/react/src/components/overrides.scss
+++ b/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 {
-    display: none;
+  .pagination-bottom {
+    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-bottom: 7px;
+    padding-top: 10px;
+    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);
+  }
 }
\ No newline at end of file

From 6bc4dc0dce973e946a274bc56accb8cf8da1a424 Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Sat, 19 Aug 2017 19:11:43 +0300
Subject: [PATCH 16/16] updated change.log

---
 react/change.log | 1 +
 1 file changed, 1 insertion(+)

diff --git a/react/change.log b/react/change.log
index 5ee34f5..ca49259 100644
--- a/react/change.log
+++ b/react/change.log
@@ -20,6 +20,7 @@ UI:
 - jumblr
 - zcashparams folder check
 - claim interest modal
+- renewed transactions history look
 
 v0.2.0.21a-beta
 --------------