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> - <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') } - <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> - { 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') } - { paginationFrom } - { translate('INDEX.TO_ALT') } - { paginationTo } - { translate('INDEX.OF') } - { this.props.ActiveCoin.txhistory.length } - { 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> + <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> <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> <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> <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') } </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 --------------