From 394f34e46ffa586e093943cec86f1340c1abf548 Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Sat, 22 Jul 2017 18:55:12 +0200 Subject: [PATCH 01/18] 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('
'); return _translationComponents.map((_translation) => - + {_translation}
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 => + + +const PaginationRender = function() { + const { + // Computed + pages, + // Props + page, + showPageSizeOptions, + pageSizeOptions, + pageSize, + showPageJump, + canPrevious, + canNext, + onPageSizeChange, + className, + PreviousComponent = defaultButton, + NextComponent = defaultButton, + } = this.props; + + return ( +
+
+ { + if (!canPrevious) return; + this.changePage(page - 1) + }} + disabled={!canPrevious} + > + {this.props.previousText} + +
+
+ + {this.props.pageText}{' '} + {showPageJump + ? +
+ { + 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(); + } + }} + /> +
+ : + + {page + 1} + }{' '} + {this.props.ofText}{' '} + {pages || 1} + + {showPageSizeOptions && + + + } +
+
+ { + if (!canNext) return; + this.changePage(page + 1) + }} + disabled={!canNext} + > + {this.props.nextText} + +
+
+ ) +}; + +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 (
{ translate('INDEX.NO_DATA') }
); - } 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( -
  • - this.updateAddressSelection(address, type, _amount) }> -    - [ { _amount } { _coin } ]  { address } - - -
    • + 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 ( -
  • - this.updateCurrentPage(i + 1) : null }>{ i + 1 } -
    • + + + { translate('IAPI.PUBLIC_SM') } + + ); }; -export const PaginationItemsPerPageSelectorRender = function() { +export const TransactionDetailRender = function(transactionIndex) { return ( -
    - -
    + ); }; -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 ( -
    -
    -
    - { translate('INDEX.SHOWING') }  - { paginationFrom }  - { translate('INDEX.TO_ALT') }  - { paginationTo }  - { translate('INDEX.OF') }  - { this.props.ActiveCoin.txhistory.length }  - { translate('INDEX.ENTRIES_SM') } -
    -
    -
    -
    - -
    -
    -
    - ); -}; - -export const TxHistoryListRender = function(tx, index) { - return ( - - { this.isNativeMode() ? - - - { translate('IAPI.PUBLIC_SM') } - - - : - null - } - { this.renderTxType(tx.category || tx.type) } - { tx.confirmations } - { tx.amount || translate('DASHBOARD.UNKNOWN') } - { secondsToString(tx.blocktime || tx.timestamp || tx.time) } - { tx.address } - { this.renderAddress(tx) } - - - - +
  • + this.updateAddressSelection(address, type, amount) }> +    + [ { amount } { coin } ]  { address } + + +
    • ); }; @@ -128,6 +67,21 @@ export const AddressListRender = function() { ); }; +export const TxHistoryListRender = function() { + return ( + + ); +}; + export const WalletsDataRender = function() { return ( @@ -210,58 +164,9 @@ export const WalletsDataRender = function() { { this.renderAddressList() } -
    -
    - { this.renderPaginationItemsPerPageSelector() } -
    -
    -
    - -
    -
    -
    - - - - { this.isNativeMode() ? - - : - null - } - - - - - - - - - - { this.renderTxHistoryList() } - - - - { this.isNativeMode() ? - - : - null - } - - - - - - - - -
    { translate('INDEX.TYPE') }{ translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    { translate('INDEX.TYPE') }{ translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    + { this.renderTxHistoryList() }
    - { this.renderPagination() } 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 Date: Sat, 22 Jul 2017 19:04:46 +0200 Subject: [PATCH 02/18] 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 Date: Sun, 23 Jul 2017 18:40:44 +0200 Subject: [PATCH 03/18] 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 ( - - { translate('DASHBOARD.OUT') } - - ); - } - if (category === 'receive' || - category === 'received') { - return ( - - { translate('DASHBOARD.IN') } - - ); - } - if (category === 'generate') { - return ( - - { translate('DASHBOARD.MINED') } - - ); - } - if (category === 'immature') { - return ( - - { translate('DASHBOARD.IMMATURE') } - - ); - } - if (category === 'unknown') { - return ( - - { translate('DASHBOARD.UNKNOWN') } - - ); - } - } - 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 ( + + { translate('DASHBOARD.OUT') } + + ); + } + if (category === 'receive' || + category === 'received') { + return ( + + { translate('DASHBOARD.IN') } + + ); + } + if (category === 'generate') { + return ( + + { translate('DASHBOARD.MINED') } + + ); + } + if (category === 'immature') { + return ( + + { translate('DASHBOARD.IMMATURE') } + + ); + } + if (category === 'unknown') { + return ( + + { translate('DASHBOARD.UNKNOWN') } + + ); + } +}; + export const TxHistoryListRender = function() { return ( From 8124d9ade1bfcbaaa87860becc9f16559176fe71 Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Mon, 24 Jul 2017 21:35:05 +0200 Subject: [PATCH 04/18] 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 (
    { translate('INDEX.NO_DATA') }
    ); + } 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 ( - - { translate('DASHBOARD.ZADDR_NOT_LISTED') } - - ); - } - - 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 ( + + + + { translate('DASHBOARD.ZADDR_NOT_LISTED') } + + + ); + } + + return tx.address; +}; + export const AddressItemRender = function(address, type, amount, coin) { return (
  • - this.updateAddressSelection(address, type, amount) }> + this.updateAddressSelection(address) }>    [ { amount } { coin } ]  { address } From 228ef080106d4259659dcf565f47026785944fd4 Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Mon, 24 Jul 2017 21:48:09 +0200 Subject: [PATCH 05/18] 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 (
    { translate('INDEX.NO_DATA') }
    ); - } 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 Date: Wed, 26 Jul 2017 22:52:35 +0200 Subject: [PATCH 06/18] 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 ( + { formatValue('round', tx.amount, -6) || translate('DASHBOARD.UNKNOWN') } + ); + } + + return ( + { tx.amount || translate('DASHBOARD.UNKNOWN') } + ); +}; + export const TxHistoryListRender = function() { return ( Date: Thu, 3 Aug 2017 00:02:54 +0200 Subject: [PATCH 07/18] 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 { ); } - } else if (this.state.itemsList === 'no data') { + } else if (this.state.itemsList === 'no data' || this.state.itemsList.length == 0) { return ( { translate('INDEX.NO_DATA') } ); - } 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 Date: Thu, 3 Aug 2017 22:29:52 +0200 Subject: [PATCH 08/18] 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() {
    -
    +
    { this.renderAddressList() }
    From b99e8d2a0866068e91abce13a9e77c798f12dc8b Mon Sep 17 00:00:00 2001 From: Ivana Trajanovska Date: Mon, 7 Aug 2017 19:04:31 +0200 Subject: [PATCH 09/18] 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 ( -

    { translate('INDEX.TRANSACTION_HISTORY') }

    +

    { translate('INDEX.TRANSACTION_HISTORY') }

    -
    -
    -
    - { this.renderAddressList() } +
    +
    + {this.shouldDisplayAddressList() && +
    + {this.renderAddressList()} +
    + } +
    + this.onSearchTermChange(e.target.value)} + placeholder='Search' />
    -
    +
    { this.renderTxHistoryList() }
    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) { walletconflicts - { txInfo.walletconflicts.length } + { txInfo.walletconflicts ? txInfo.walletconflicts.length : null } } From c8ef1ace7adea8a7cb9253789d447adb1c834f7c Mon Sep 17 00:00:00 2001 From: Ivana Trajanovska Date: Mon, 7 Aug 2017 19:57:53 +0200 Subject: [PATCH 10/18] 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 ( -
  • +
  • this.updateAddressSelection(address) }>    [ { amount } { coin } ]  { address } From c1d156ab76ca96a2f86d02e7ba3d4fe3a23cdd49 Mon Sep 17 00:00:00 2001 From: Ivana Trajanovska Date: Mon, 7 Aug 2017 20:35:17 +0200 Subject: [PATCH 11/18] 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 e993de152d53143d1f1359ffa65180b613ad6204 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Thu, 17 Aug 2017 12:09:54 +0300 Subject: [PATCH 12/18] fixed hodl typo; removed mvp ac --- react/src/components/addcoin/addcoinOptionsAC.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/src/components/addcoin/addcoinOptionsAC.js b/react/src/components/addcoin/addcoinOptionsAC.js index 020a097..811f186 100644 --- a/react/src/components/addcoin/addcoinOptionsAC.js +++ b/react/src/components/addcoin/addcoinOptionsAC.js @@ -10,12 +10,12 @@ class AddCoinOptionsAC extends React.Component { - + - + From 9a07e920aee2804804b5cbdfd7245f44bc312452 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Thu, 17 Aug 2017 14:05:24 +0300 Subject: [PATCH 13/18] 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() {
    + { this.props.ActiveCoin.mode === 'basilisk' && +
    +
    + { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength } +
    +
    + }
    - +
    -
    -
    - { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength } -
    -
    { !this.isNativeMode() ?
    -
      +
        { translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' } @@ -72,7 +75,9 @@ const PaginationRender = function() { value={pageSize}> { pageSizeOptions.map((option, i) => { return ( - ); @@ -85,7 +90,7 @@ const PaginationRender = function() { { 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 ( @@ -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 ( - - { translate('KMD_NATIVE.SELECT_ADDRESS') } - + Filter by address ); } } 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 ( @@ -72,7 +70,7 @@ export const AddressListRender = function() { @@ -96,7 +102,7 @@ export const AddressListRender = function() { export const TxTypeRender = function(category) { if (category === 'send' || - category === 'sent') { + category === 'sent') { return ( { translate('DASHBOARD.OUT') } @@ -104,10 +110,10 @@ export const TxTypeRender = function(category) { ); } if (category === 'receive' || - category === 'received') { + category === 'received') { return ( - { translate('DASHBOARD.IN') } + { translate('DASHBOARD.IN') }     ); } @@ -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 ( - { formatValue('round', tx.amount, -6) || translate('DASHBOARD.UNKNOWN') } + { formatValue('round', tx.amount, -6) * _amountNegative || translate('DASHBOARD.UNKNOWN') } ); } return ( - { tx.amount || translate('DASHBOARD.UNKNOWN') } + { tx.amount * _amountNegative || translate('DASHBOARD.UNKNOWN') } ); }; export const TxHistoryListRender = function() { return ( 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() {

        { translate('INDEX.TRANSACTION_HISTORY') }

    -
    +
    { this.shouldDisplayAddressList() && -
    - {this.renderAddressList()} +
    + { this.renderAddressList() }
    } -
    +
    this.onSearchTermChange(e.target.value)} + onChange={ e => this.onSearchTermChange(e.target.value) } placeholder="Search" />
    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') }> -
      +
      1. { 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') }}> -
          +
            { translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }
    } -
    - this.onSearchTermChange(e.target.value) } - placeholder="Search" /> -
    + { this.props.ActiveCoin.txhistory !== 'loading' && +
    + this.onSearchTermChange(e.target.value) } + placeholder="Search" /> +
    + }
    { this.renderTxHistoryList() }