lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

cleanup

all-modes
Petr Balashov 8 years ago
parent
dbbd75d983
commit
78ccbca117
8 changed files with 334 additions and 154 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      react/src/components/dashboard/walletsNativeSyncProgress.js
  2. 136
      react/src/components/dashboard/walletsNativeTxHistory.js
  3. 99
      react/src/components/dashboard/walletsNativeTxInfo.js
  4. 43
      react/src/components/dashboard/walletsNav.js
  5. 29
      react/src/components/dashboard/walletsNotariesList.js
  6. 51
      react/src/components/dashboard/walletsProgress.js
  7. 62
      react/src/components/dashboard/walletsTxInfo.js
  8. 8
      react/src/translate/en.js

60
react/src/components/dashboard/walletsNativeSyncProgress.js
View File

@ -3,31 +3,52 @@ import { translate } from '../../translate/translate';
class WalletsNativeSyncProgress extends React.Component {
renderSyncPercentagePlaceholder() {
if (this.props.Dashboard.progress.blocks > 0 && this.props.Dashboard.progress.longestchain === 0) {
if (this.props.Dashboard.progress.blocks > 0 &&
this.props.Dashboard.progress.longestchain === 0) {
return (
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '100%', fontSize: '80%'}} role="progressbar" id="extcoin-sync">
<span id="extcoin-sync-percent" style={{width: '100%'}}>{translate('INDEX.SYNC_ERR_LONGESTCHAIN')}</span>
<div
className="progress-bar progress-bar-info progress-bar-striped active"
style={{ width: '100%', fontSize: '80%' }}
role="progressbar"
id="extcoin-sync">
<span
id="extcoin-sync-percent"
style={{ width: '100%' }}>{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span>
</div>
);
} else if (this.props.Dashboard.progress.blocks === 0) {
return (
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '100%', fontSize: '80%'}} role="progressbar" id="extcoin-sync">
<span id="extcoin-sync-percent" style={{width: '100%'}}>{translate('INDEX.SYNC_ERR_BLOCKS')}</span>
<div
className="progress-bar progress-bar-info progress-bar-striped active"
style={{ width: '100%', fontSize: '80%' }}
role="progressbar"
id="extcoin-sync">
<span
id="extcoin-sync-percent"
style={{ width: '100%' }}>{ translate('INDEX.SYNC_ERR_BLOCKS') }</span>
</div>
);
} else {
var syncPercentage = (parseFloat(parseInt(this.props.Dashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2) + '%').replace('NaN', 0);
return (
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: syncPercentage, fontSize: '80%'}} role="progressbar" id="extcoin-sync">
<span id="extcoin-sync-percent" style={{width: syncPercentage}}>{syncPercentage}</span> | <span id="extcoin-synced-blocks">{this.props.Dashboard.progress.blocks}</span> / <span id="extcoin-longestchain">{this.props.Dashboard.progress.longestchain}</span> | {translate('INDEX.CONNECTIONS')}: <span id="extcoin-connections">{this.props.Dashboard.progress.connections}</span>
<div
className="progress-bar progress-bar-info progress-bar-striped active"
style={{ width: syncPercentage, fontSize: '80%' }}
role="progressbar"
id="extcoin-sync">
<span
id="extcoin-sync-percent"
style={{ width: syncPercentage }}>{ syncPercentage }</span> | <span id="extcoin-synced-blocks">{ this.props.Dashboard.progress.blocks }</span> / <span id="extcoin-longestchain">{ this.props.Dashboard.progress.longestchain }</span> | { translate('INDEX.CONNECTIONS') }: <span id="extcoin-connections">{ this.props.Dashboard.progress.connections }</span>
</div>
);
}
}
renderActivatingBestChainProgress() {
if (this.props.Settings && this.props.Settings.debugLog && this.props.Dashboard.progress.remoteKMDNode) {
if (this.props.Settings &&
this.props.Settings.debugLog &&
this.props.Dashboard.progress.remoteKMDNode) {
if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1) {
let temp = this.props.Settings.debugLog.split(' ');
let currentBestChain;
@ -46,16 +67,21 @@ class WalletsNativeSyncProgress extends React.Component {
}
renderChainActivationNotification() {
if ((this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain) || this.props.Dashboard.progress.remoteKMDNode) {
if ((this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain) ||
this.props.Dashboard.progress.remoteKMDNode) {
return (
<div role="alert" className="alert alert-info alert-dismissible" id="extcoin-wallet-activating-alert" style={{marginBottom: '40px'}}>
<div
role="alert"
className="alert alert-info alert-dismissible"
id="extcoin-wallet-activating-alert"
style={{ marginBottom: '40px' }}>
<button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span>
</button>
<h4>
{translate('INDEX.ACTIVATING_CHAIN')}{this.renderActivatingBestChainProgress()}
{ translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() }
</h4>
<p id="extcoin-wallet-connection-alert-text">{translate('INDEX.KMD_STARTED')}</p>
<p id="extcoin-wallet-connection-alert-text">{ translate('INDEX.KMD_STARTED') }</p>
</div>
);
} else {
@ -64,14 +90,16 @@ class WalletsNativeSyncProgress extends React.Component {
}
render() {
if (this.props && this.props.Dashboard && this.props.Dashboard.progress) {
if (this.props &&
this.props.Dashboard &&
this.props.Dashboard.progress) {
return (
<div>
{this.renderChainActivationNotification()}
<div className="row" style={{margin: '-20px 0px 10px 0px'}}>
{ this.renderChainActivationNotification() }
<div className="row" style={{ margin: '-20px 0px 10px 0px' }}>
<div className="col-xs-12" id="extcoin-progressbars">
<div className="progress">
{this.renderSyncPercentagePlaceholder()}
{ this.renderSyncPercentagePlaceholder() }
</div>
</div>
</div>

136
react/src/components/dashboard/walletsNativeTxHistory.js
View File

@ -37,31 +37,31 @@ class WalletsNativeTxHistory extends React.Component {
}
renderTxType(category) {
if ( category === 'send' ) {
if (category === 'send') {
return (
<span className="label label-danger">
<i className="icon fa-arrow-circle-left"></i> <span>{translate('DASHBOARD.OUT')}</span>
<i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
</span>
);
}
if ( category === 'receive' ) {
if (category === 'receive') {
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>
);
}
if ( category === 'generate' ) {
if (category === 'generate') {
return (
<span>
<i className="icon fa-cogs"></i> <span>{translate('DASHBOARD.MINED')}</span>
<i className="icon fa-cogs"></i> <span>{ translate('DASHBOARD.MINED') }</span>
</span>
);
}
if ( category === 'immature' ) {
if (category === 'immature') {
return (
<span>
<i className="icon fa-clock-o"></i> <span>{translate('DASHBOARD.IMMATURE')}</span>
<i className="icon fa-clock-o"></i> <span>{ translate('DASHBOARD.IMMATURE') }</span>
</span>
);
}
@ -71,7 +71,7 @@ class WalletsNativeTxHistory extends React.Component {
if (!tx.address) {
return (
<span>
<i className="icon fa-bullseye"></i> <span className="label label-dark">{translate('DASHBOARD.ZADDR_NOT_LISTED')}</span>
<i className="icon fa-bullseye"></i> <span className="label label-dark">{ translate('DASHBOARD.ZADDR_NOT_LISTED') }</span>
</span>
);
} else {
@ -109,8 +109,11 @@ class WalletsNativeTxHistory extends React.Component {
for (let i=0; i < Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); i++) {
items.push(
<li className={this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button'}>
<a aria-controls="kmd-tx-history-tbl" tabIndex="0" key={i + '-pagination'} onClick={this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null}>{i + 1}</a>
<li className={ this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button' }>
<a
aria-controls="kmd-tx-history-tbl"
tabIndex="0" key={i + '-pagination'}
onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
</li>
);
}
@ -126,7 +129,11 @@ class WalletsNativeTxHistory extends React.Component {
<div className="dataTables_length" id="kmd-tx-history-tbl_length">
<label>
{translate('INDEX.SHOW')}&nbsp;
<select name="itemsPerPage" aria-controls="kmd-tx-history-tbl" className="form-control input-sm" onChange={this.updateInput}>
<select
name="itemsPerPage"
aria-controls="kmd-tx-history-tbl"
className="form-control input-sm"
onChange={this.updateInput}>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
@ -145,20 +152,38 @@ class WalletsNativeTxHistory extends React.Component {
if (this.props.ActiveCoin.txhistory &&
this.props.ActiveCoin.txhistory !== 'loading' &&
this.props.ActiveCoin.txhistory.length > 10) {
const _paginationStart = ((this.state.activePage - 1) * this.state.itemsPerPage) + 1;
const _paginationEnd = this.state.activePage * this.state.itemsPerPage;
const _paginationNextState = this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage);
return (
<div className="row unselectable">
<div className="col-sm-5">
<div className="dataTables_info" id="kmd-tx-history-tbl_info" role="status" aria-live="polite">{translate('INDEX.SHOWING')} {((this.state.activePage - 1) * this.state.itemsPerPage) + 1} {translate('INDEX.TO')} {this.state.activePage * this.state.itemsPerPage} {translate('INDEX.OF')} {this.props.ActiveCoin.txhistory.length} {translate('INDEX.ENTRIES_SM')}</div>
<div
className="dataTables_info"
id="kmd-tx-history-tbl_info"
role="status"
aria-live="polite">{ translate('INDEX.SHOWING') } { _paginationStart } { translate('INDEX.TO') } { _paginationEnd } { 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" id="kmd-tx-history-tbl_paginate">
<ul className="pagination">
<li className={this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous'} id="kmd-tx-history-tbl_previous">
<a aria-controls="kmd-tx-history-tbl" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage - 1)}>{translate('INDEX.PREVIOUS')}</a>
<li
className={ this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }
id="kmd-tx-history-tbl_previous">
<a
aria-controls="kmd-tx-history-tbl"
tabIndex="0"
onClick={ () => this.updateCurrentPage(this.state.activePage - 1) }>{ translate('INDEX.PREVIOUS') }</a>
</li>
{this.renderPaginationItems()}
<li className={this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage) ? 'paginate_button next disabled' : 'paginate_button next'} id="kmd-tx-history-tbl_next">
<a aria-controls="kmd-tx-history-tbl" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage + 1)}>{translate('INDEX.NEXT')}</a>
<li
className={ _paginationNextState ? 'paginate_button next disabled' : 'paginate_button next' }
id="kmd-tx-history-tbl_next">
<a
aria-controls="kmd-tx-history-tbl"
tabIndex="0"
onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
</li>
</ul>
</div>
@ -171,28 +196,36 @@ class WalletsNativeTxHistory extends React.Component {
}
renderTxHistoryList() {
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory === 'no data') {
return 'no data';
} else if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory === 'loading') {
return 'loading history...';
if (this.props.ActiveCoin.txhistory &&
this.props.ActiveCoin.txhistory === 'no data') {
return translate('INDEX.NO_DATA');
} else if (
this.props.ActiveCoin.txhistory &&
this.props.ActiveCoin.txhistory === 'loading') {
return translate('INDEX.LOADING_HISTORY');
} else if (
this.props.ActiveCoin.txhistory &&
(this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory !== 'no data')) {
if (this.state.itemsList && this.state.itemsList.length && this.props.ActiveCoin.nativeActiveSection === 'default') {
if (this.state.itemsList &&
this.state.itemsList.length &&
this.props.ActiveCoin.nativeActiveSection === 'default') {
return this.state.itemsList.map((tx, index) =>
<tr key={tx.txid + tx.amount}>
<td>
<span className="label label-default">
<i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')}
<i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span>
</td>
<td>{this.renderTxType(tx.category)}</td>
<td>{tx.confirmations}</td>
<td>{tx.amount}</td>
<td>{secondsToString(tx.time)}</td>
<td>{this.renderAddress(tx)}</td>
<td>{ this.renderTxType(tx.category) }</td>
<td>{ tx.confirmations }</td>
<td>{ tx.amount }</td>
<td>{ secondsToString(tx.time) }</td>
<td>{ this.renderAddress(tx) }</td>
<td>
<button type="button" className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid" onClick={() => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index)}><i className="icon fa-search"></i></button>
<button
type="button"
className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid"
onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index) }><i className="icon fa-search"></i></button>
</td>
</tr>
);
@ -203,27 +236,28 @@ class WalletsNativeTxHistory extends React.Component {
}
render() {
if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') {
if (this.props &&
this.props.ActiveCoin.nativeActiveSection === 'default') {
return (
<div className="native-transactions">
<div data-extcoin="COIN" id="kmd_wallet_dashboardinfo">
<div id="kmd_wallet_dashboardinfo">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_dashoard_section">
<div id="kmd_wallet_dashoard_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<h3 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h3>
<h3 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h3>
</header>
<div className="panel-body">
<div className="row">
<div className="col-sm-6">
{this.renderPaginationItemsPerPageSelector()}
{ this.renderPaginationItemsPerPageSelector() }
</div>
<div className="col-sm-6">
<div id="kmd-tx-history-tbl_filter" className="dataTables_filter">
<label>
{translate('INDEX.SEARCH')}: <input type="search" className="form-control input-sm" aria-controls="kmd-tx-history-tbl" disabled="true" />
{ translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" aria-controls="kmd-tx-history-tbl" disabled="true" />
</label>
</div>
</div>
@ -232,32 +266,32 @@ class WalletsNativeTxHistory extends React.Component {
<table className="table table-hover dataTable table-striped" id="kmd-tx-history-tbl" width="100%">
<thead>
<tr>
<th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.DIRECTION')}</th>
<th>{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th>
<th>{translate('INDEX.TX_DETAIL')}</th>
<th>{ translate('INDEX.TYPE') }</th>
<th>{ translate('INDEX.DIRECTION') }</th>
<th>{ translate('INDEX.CONFIRMATIONS') }</th>
<th>{ translate('INDEX.AMOUNT') }</th>
<th>{ translate('INDEX.TIME') }</th>
<th>{ translate('INDEX.DEST_ADDRESS') }</th>
<th>{ translate('INDEX.TX_DETAIL') }</th>
</tr>
</thead>
<tbody>
{this.renderTxHistoryList()}
{ this.renderTxHistoryList() }
</tbody>
<tfoot>
<tr>
<th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.DIRECTION')}</th>
<th>{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th>
<th>{translate('INDEX.TX_DETAIL')}</th>
<th>{ translate('INDEX.TYPE') }</th>
<th>{ translate('INDEX.DIRECTION') }</th>
<th>{ translate('INDEX.CONFIRMATIONS') }</th>
<th>{ translate('INDEX.AMOUNT') }</th>
<th>{ translate('INDEX.TIME') }</th>
<th>{ translate('INDEX.DEST_ADDRESS') }</th>
<th>{ translate('INDEX.TX_DETAIL') }</th>
</tr>
</tfoot>
</table>
</div>
{this.renderPagination()}
{ this.renderPagination() }
</div>
</div>
</div>

99
react/src/components/dashboard/walletsNativeTxInfo.js
View File

@ -35,57 +35,76 @@ class WalletsNativeTxInfo extends React.Component {
<div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-body" style={{height: '590px'}}>
<div className="modal-body" style={{ height: '590px' }}>
<div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
<li className={this.state.activeTab === 0 ? 'active' : ''} role="presentation">
<a data-toggle="tab" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
<ul className="nav nav-tabs nav-tabs-line" role="tablist">
<li className={ this.state.activeTab === 0 ? 'active' : '' } role="presentation">
<a
data-toggle="tab"
aria-controls="KmdTxIDInfotab1"
role="tab"
onClick={ () => this.openTab(0) }>
<i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
</a>
</li>
<li className={this.state.activeTab === 1 ? 'active' : ''} role="presentation">
<a data-toggle="tab" aria-controls="KmdTxIDInfotab2" role="tab" onClick={() => this.openTab(1)}>
<li className={ this.state.activeTab === 1 ? 'active' : '' } role="presentation">
<a
data-toggle="tab"
aria-controls="KmdTxIDInfotab2"
role="tab"
onClick={ () => this.openTab(1) }>
<i className="icon md-plus-square" aria-hidden="true"></i>Vjointsplits, Details
</a>
</li>
<li className={this.state.activeTab === 2 ? 'active' : ''} role="presentation">
<a data-toggle="tab" aria-controls="KmdTxIDInfotab3" role="tab" onClick={() => this.openTab(2)}>
<li className={ this.state.activeTab === 2 ? 'active' : '' } role="presentation">
<a
data-toggle="tab"
aria-controls="KmdTxIDInfotab3"
role="tab"
onClick={ () => this.openTab(2) }>
<i className="icon wb-briefcase" aria-hidden="true"></i>Hex
</a>
</li>
<li className={this.state.activeTab === 3 ? 'active' : ''} role="presentation">
<a data-toggle="tab" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(3)}>
<li className={ this.state.activeTab === 3 ? 'active' : '' } role="presentation">
<a
data-toggle="tab"
aria-controls="KmdTxIDInfotab4"
role="tab"
onClick={ () => this.openTab(3) }>
<i className="icon wb-file" aria-hidden="true"></i>Raw info
</a>
</li>
</ul>
<div className="panel-body">
<div className="tab-content">
<div className={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" role="tabpanel">
<div
className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }
id="KmdTxIDInfotab1"
role="tabpanel">
<table className="table table-striped">
<tbody>
<tr>
<td>amount</td>
<td>
{txInfo.amount}
{ txInfo.amount }
</td>
</tr>
<tr>
<td>fee</td>
<td>
{txInfo.fee}
{ txInfo.fee }
</td>
</tr>
<tr>
<td>confirmations</td>
<td>
{txInfo.confirmations}
{ txInfo.confirmations }
</td>
</tr>
<tr>
<td>blockhash</td>
<td>
{txInfo.blockhash}
{ txInfo.blockhash }
</td>
</tr>
<tr>
@ -97,66 +116,90 @@ class WalletsNativeTxInfo extends React.Component {
<tr>
<td>blocktime</td>
<td>
{secondsToString(txInfo.blocktime)}
{ secondsToString(txInfo.blocktime) }
</td>
</tr>
<tr>
<td>txid</td>
<td>
{txInfo.txid}
{ txInfo.txid }
</td>
</tr>
<tr>
<td>walletconflicts</td>
<td>
{txInfo.walletconflicts.length}
{ txInfo.walletconflicts.length }
</td>
</tr>
<tr>
<td>time</td>
<td>
{secondsToString(txInfo.time)}
{ secondsToString(txInfo.time) }
</td>
</tr>
<tr>
<td>timereceived</td>
<td>
{secondsToString(txInfo.timereceived)}
{ secondsToString(txInfo.timereceived) }
</td>
</tr>
</tbody>
</table>
</div>
<div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab2" role="tabpanel">
<div
className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }
id="KmdTxIDInfotab2"
role="tabpanel">
<table className="table table-striped">
<tbody>
<tr>
<td>vjoinsplit</td>
<td>
{txInfo.vjoinsplit}
{ txInfo.vjoinsplit }
</td>
</tr>
<tr>
<td>details</td>
<td>
{txInfo.details}
{ txInfo.details }
</td>
</tr>
</tbody>
</table>
</div>
<div className={this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab3" role="tabpanel">
<textarea id="kmd_txid_info_hex" style={{width: '100%', height: '170px'}} rows="10" cols="80" defaultValue={txInfo.hex} disabled></textarea>
<div
className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }
id="KmdTxIDInfotab3"
role="tabpanel">
<textarea
id="kmd_txid_info_hex"
style={{ width: '100%', height: '170px' }}
rows="10"
cols="80"
defaultValue={ txInfo.hex } disabled></textarea>
</div>
<div className={this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" role="tabpanel">
<textarea id="kmd_txid_info_hex" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
<div
className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }
id="KmdTxIDInfotab4"
role="tabpanel">
<textarea
id="kmd_txid_info_hex"
style={{ width: '100%', height: '400px' }}
rows="40"
cols="80"
defaultValue={ JSON.stringify(txInfo, null, '\t') }
disabled></textarea>
</div>
</div>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.toggleTxInfoModal}>{translate('INDEX.CLOSE')}</button>
<button
type="button"
className="btn btn-default"
data-dismiss="modal"
onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
</div>
</div>
</div>

43
react/src/components/dashboard/walletsNav.js
View File

@ -49,17 +49,19 @@ class WalletsNav extends React.Component {
}
render() {
if (this.props && this.props.ActiveCoin && !this.props.ActiveCoin.coin) {
if (this.props &&
this.props.ActiveCoin &&
!this.props.ActiveCoin.coin) {
return (
<div>
<div className="col-xs-12 padding-top-20" id="no_wallet_selected">
<div className="alert alert-info alert-dismissible" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close"></button>
<span style={{fontSize: '24px', textAlign: 'center'}}>
<i className="icon fa-paw" aria-hidden="true"></i> {translate('INDEX.NO_WALLET_CAPS')}
<span style={{ fontSize: '24px', textAlign: 'center' }}>
<i className="icon fa-paw" aria-hidden="true"></i> { translate('INDEX.NO_WALLET_CAPS') }
</span>
<br/>
{translate('INDEX.PLEASE_SELECT_A_WALLET')}.
{ translate('INDEX.PLEASE_SELECT_A_WALLET') }.
</div>
</div>
</div>
@ -67,20 +69,35 @@ class WalletsNav extends React.Component {
} else {
return (
<div>
<div className="page-header page-header-bordered header-easydex" id="header-dashboard" style={{paddingBottom: '20px', marginBottom: this.props.ActiveCoin.mode !== 'basilisk' && this.props.Dashboard.progress ? '0' : '30px'}}>
<div
className="page-header page-header-bordered header-easydex"
id="header-dashboard"
style={{ paddingBottom: '20px', marginBottom: this.props.ActiveCoin.mode !== 'basilisk' && this.props.Dashboard.progress ? '0' : '30px' }}>
<ol className="breadcrumb">
<strong>{translate('INDEX.MY')} <span data-edexcoin="COIN" id="edexcoin-active">{this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-'}</span> {translate('INDEX.ADDRESS')}: </strong> <span id="edexcoin_active_addr">{this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-'}</span> <button className="btn btn-default btn-xs clipboard-edexaddr" id="edexcoin_active_addr_clipboard" onClick={() => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin])}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button>
<strong>{ translate('INDEX.MY') } <span id="edexcoin-active">{ this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' }</span> { translate('INDEX.ADDRESS') }: </strong> <span id="edexcoin_active_addr">{ this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' }</span> <button className="btn btn-default btn-xs clipboard-edexaddr" id="edexcoin_active_addr_clipboard" onClick={ () => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
</ol>
<div className="page-header-actions" data-edexcoin="COIN" id="edexcoin-actions">
<div className="page-header-actions" id="edexcoin-actions">
<div id="kmd_header_button">
<button type="button" className="btn btn-dark waves-effect waves-light" id="btn_edexcoin_dashboard" onClick={this.toggleSendReceiveCoinForms}>
<i className="icon md-view-dashboard" aria-hidden="true"></i> {this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : 'Settings'}
<button
type="button"
className="btn btn-dark waves-effect waves-light"
id="btn_edexcoin_dashboard"
onClick={ this.toggleSendReceiveCoinForms }>
<i className="icon md-view-dashboard" aria-hidden="true"></i> { this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : 'Settings' }
</button>
<button type="button" className="btn btn-primary waves-effect waves-light" id="btn_edexcoin_send" onClick={() => this.toggleSendCoinForm(!this.props.ActiveCoin.send)}>
<i className="icon fa-send" aria-hidden="true"></i> {translate('INDEX.SEND')}
<button
type="button"
className="btn btn-primary waves-effect waves-light"
id="btn_edexcoin_send"
onClick={ () => this.toggleSendCoinForm(!this.props.ActiveCoin.send) }>
<i className="icon fa-send" aria-hidden="true"></i> { translate('INDEX.SEND') }
</button>
<button type="button" className="btn btn-info waves-effect waves-light" id="btn_edexcoin_recieve" onClick={() => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive)}>
<i className="icon fa-inbox" aria-hidden="true"></i> {translate('INDEX.RECEIVE')}
<button
type="button"
className="btn btn-info waves-effect waves-light"
id="btn_edexcoin_recieve"
onClick={ () => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive) }>
<i className="icon fa-inbox" aria-hidden="true"></i> { translate('INDEX.RECEIVE') }
</button>
</div>
</div>

29
react/src/components/dashboard/walletsNotariesList.js
View File

@ -18,11 +18,11 @@ class WalletsNotariesList extends React.Component {
renderNotariesFetching() {
if (!this.props.ActiveCoin.notaries) {
return (
<div>{translate('INDEX.FETCHING_NOTARIES_LIST')}...</div>
<div>{ translate('INDEX.FETCHING_NOTARIES_LIST') }...</div>
);
} else {
return (
<div>{translate('INDEX.TOTAL_NOTARIES')}: {this.props.ActiveCoin.notaries.numnotaries}</div>
<div>{ translate('INDEX.TOTAL_NOTARIES') }: { this.props.ActiveCoin.notaries.numnotaries }</div>
);
}
}
@ -32,10 +32,10 @@ class WalletsNotariesList extends React.Component {
this.props.ActiveCoin.notaries.notaries &&
this.props.ActiveCoin.notaries.notaries.length) {
return this.props.ActiveCoin.notaries.notaries.map((node, index) =>
<TreeNode title={`Node ${index}`} key={`node-${index}`}>
<TreeNode key={`node-${index}-btc`} title={`BTC: ${node.BTCaddress}`} />
<TreeNode key={`node-${index}-kmd`} title={`KMD: ${node.KMDaddress}`} />
<TreeNode key={`node-${index}-pubkey`} title={`Pubkey: ${node.pubkey}`} />
<TreeNode title={ `Node ${index}` } key={ `node-${index}` }>
<TreeNode key={ `node-${index}-btc` } title={ `BTC: ${node.BTCaddress}` } />
<TreeNode key={ `node-${index}-kmd` } title={ `KMD: ${node.KMDaddress}` } />
<TreeNode key={ `node-${index}-pubkey` } title={ `Pubkey: ${node.pubkey}` } />
</TreeNode>
);
} else {
@ -44,7 +44,9 @@ class WalletsNotariesList extends React.Component {
}
render() {
if (this.props && this.props.ActiveCoin.mode === 'basilisk' && this.props.ActiveCoin.displayNotariesModal) {
if (this.props &&
this.props.ActiveCoin.mode === 'basilisk' &&
this.props.ActiveCoin.displayNotariesModal) {
const notariesData = this.props.ActiveCoin.notaries ? this.props.ActiveCoin.notaries.notaries : null;
return (
@ -52,14 +54,14 @@ class WalletsNotariesList extends React.Component {
<div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-body" style={{height: '590px'}}>
<div className="modal-body" style={{ height: '590px' }}>
<div className="panel nav-tabs-horizontal">
<div className="panel-body">
<div className="tab-content">
<div className="tab-pane active" role="tabpanel">
{this.renderNotariesFetching()}
<Tree defaultExpandAll={false} openAnimation={animation}>
{this.renderNotariesList()}
{ this.renderNotariesFetching() }
<Tree defaultExpandAll={ false } openAnimation={ animation }>
{ this.renderNotariesList() }
</Tree>
</div>
</div>
@ -67,7 +69,10 @@ class WalletsNotariesList extends React.Component {
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" onClick={this.closeNotariesModal}>{translate('INDEX.CLOSE')}</button>
<button
type="button"
className="btn btn-default"
onClick={ this.closeNotariesModal }>{ translate('INDEX.CLOSE') }</button>
</div>
</div>
</div>

51
react/src/components/dashboard/walletsProgress.js
View File

@ -23,36 +23,59 @@ class WalletsProgress extends React.Component {
this.props.ActiveCoin &&
this.props.ActiveCoin.mode === 'full' &&
this.props.Dashboard.progress) {
if (this.props.Dashboard.progress && this.props.Dashboard.progress.error) {
return (<div style={{textAlign: 'center', padding: '10px'}}>{translate('INDEX.COIN_IS_BUSY')}</div>);
if (this.props.Dashboard.progress &&
this.props.Dashboard.progress.error) {
return (
<div style={{ textAlign: 'center', padding: '10px' }}>{ translate('INDEX.COIN_IS_BUSY') }</div>
);
} else {
return (
<div id="edex-footer" style={{marginBottom: '20px'}}>
<div id="edex-footer" style={{ marginBottom: '20px' }}>
<div className="row no-space">
<div id="currency-progressbars">
<div className="progress progress-sm">
<div className={this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide'} style={{width: '100%', fontSize: '80%'}} role="progressbar" id="currency-bundles">
{translate('INDEX.BUNDLES')} <span id="currency-bundles-percent">({this.props.ActiveCoin.coin}) 100.00% - ( {this.props.Dashboard.progress.blocks} / {this.props.Dashboard.progress.blocks} ) ==&gt;&gt; RT{this.props.Dashboard.progress.RTheight}</span>
<div
className={ this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide' }
style={{ width: '100%', fontSize: '80%' }}
role="progressbar"
id="currency-bundles">
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ this.props.ActiveCoin.coin }) 100.00% - ( { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.blocks } ) ==&gt;&gt; RT{ this.props.Dashboard.progress.RTheight }</span>
</div>
<div className={this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active'} style={{width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%'}} role="progressbar" id="currency-bundles">
{translate('INDEX.BUNDLES')} <span id="currency-bundles-percent">{this.props.Dashboard.progress.bundles}%</span>
<div
className={ this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active' }
style={{ width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%' }}
role="progressbar"
id="currency-bundles">
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">{ this.props.Dashboard.progress.bundles }%</span>
</div>
</div>
</div>
<div id="additional-progress-bars" className={this.isFullySynced() ? 'hide' : ''}>
<div id="additional-progress-bars" className={ this.isFullySynced() ? 'hide' : '' }>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%'}} role="progressbar" id="currency-utxo">
utxo <span id="currency-utxo-percent">{this.props.Dashboard.progress.utxo}%</span>
<div
className="progress-bar progress-bar-warning progress-bar-striped active"
style={{ width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%' }}
role="progressbar"
id="currency-utxo">
utxo <span id="currency-utxo-percent">{ this.props.Dashboard.progress.utxo }%</span>
</div>
</div>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-danger progress-bar-striped active" style={{width: this.props.Dashboard.progress.balances + '%', fontSize: '80%'}} role="progressbar" id="currency-balances">
{translate('INDEX.BALANCES')} <span id="currency-balances-percent">{this.props.Dashboard.progress.balances}%</span>
<div
className="progress-bar progress-bar-danger progress-bar-striped active"
style={{ width: this.props.Dashboard.progress.balances + '%', fontSize: '80%' }}
role="progressbar"
id="currency-balances">
{ translate('INDEX.BALANCES') } <span id="currency-balances-percent">{ this.props.Dashboard.progress.balances }%</span>
</div>
</div>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-success progress-bar-striped active" style={{width: this.props.Dashboard.progress.validated + '%', fontSize: '80%'}} role="progressbar" id="currency-validated">
{translate('INDEX.VALIDATED')} <span id="currency-validated-percent">{this.props.Dashboard.progress.validated}%</span>
<div
className="progress-bar progress-bar-success progress-bar-striped active"
style={{ width: this.props.Dashboard.progress.validated + '%', fontSize: '80%' }}
role="progressbar"
id="currency-validated">
{ translate('INDEX.VALIDATED') } <span id="currency-validated-percent">{ this.props.Dashboard.progress.validated }%</span>
</div>
</div>
</div>

62
react/src/components/dashboard/walletsTxInfo.js
View File

@ -34,79 +34,101 @@ class WalletsTxInfo extends React.Component {
<div className="modal show" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-body" style={{height: '590px'}}>
<div className="modal-body" style={{ height: '590px' }}>
<div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" role="tablist">
<li className={this.state.activeTab === 0 ? 'active' : ''} role="presentation">
<a data-toggle="tab" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
<li className={ this.state.activeTab === 0 ? 'active' : '' } role="presentation">
<a
data-toggle="tab"
aria-controls="KmdTxIDInfotab1"
role="tab"
onClick={ () => this.openTab(0) }>
<i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
</a>
</li>
<li className={this.state.activeTab === 1 ? 'active' : ''} role="presentation">
<a data-toggle="tab" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(1)}>
<li className={ this.state.activeTab === 1 ? 'active' : '' } role="presentation">
<a
data-toggle="tab"
aria-controls="KmdTxIDInfotab4"
role="tab"
onClick={ () => this.openTab(1) }>
<i className="icon wb-file" aria-hidden="true"></i>Raw info
</a>
</li>
</ul>
<div className="panel-body">
<div className="tab-content">
<div className={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" role="tabpanel">
<div
className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }
id="KmdTxIDInfotab1"
role="tabpanel">
<table className="table table-striped">
<tbody>
<tr>
<td>address</td>
<td>{ translate('TX_INFO.ADDRESS') }</td>
<td>
{txInfo.address}
{ txInfo.address }
</td>
</tr>
<tr>
<td>amount</td>
<td>{ translate('TX_INFO.AMOUNT') }</td>
<td>
{txInfo.amount}
{ txInfo.amount }
</td>
</tr>
<tr>
<td>category</td>
<td>{ translate('TX_INFO.CATEGORY') }</td>
<td>
{txInfo.category || txInfo.type}
{ txInfo.category || txInfo.type }
</td>
</tr>
<tr>
<td>confirmations</td>
<td>{ translate('TX_INFO.CONFIRMATIONS') }</td>
<td>
{txInfo.confirmations}
{ txInfo.confirmations }
</td>
</tr>
<tr>
<td>blockhash</td>
<td>
{txInfo.blockhash}
{ txInfo.blockhash }
</td>
</tr>
<tr>
<td>blocktime</td>
<td>
{secondsToString(txInfo.blocktime || txInfo.timestamp)}
{ secondsToString(txInfo.blocktime || txInfo.timestamp) }
</td>
</tr>
<tr>
<td>txid</td>
<td>
{txInfo.txid}
{ txInfo.txid }
</td>
</tr>
</tbody>
</table>
</div>
<div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" role="tabpanel">
<textarea id="kmd_txid_info_hex" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
<div
className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }
id="KmdTxIDInfotab4" role="tabpanel">
<textarea
id="kmd_txid_info_hex"
style={{ width: '100%', height: '400px' }}
rows="40"
cols="80"
defaultValue={ JSON.stringify(txInfo, null, '\t') } disabled></textarea>
</div>
</div>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.toggleTxInfoModal}>Close</button>
<button
type="button"
className="btn btn-default"
data-dismiss="modal"
onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button>
</div>
</div>
</div>

8
react/src/translate/en.js
View File

@ -1,6 +1,8 @@
export const _lang = {
'EN': {
'INDEX': {
'NO_DATA': 'No history available',
'LOADING_HISTORY': 'Loading transaction history',
'FETCHING_NOTARIES_LIST': 'Fetching notaries list data',
'TOTAL_NOTARIES': 'Notaries list. Total nodes count',
'CLOSE': 'Close',
@ -386,6 +388,12 @@ export const _lang = {
'SAVE_APP_CONFIG': 'Save app config',
'CONFIG_RESTART_REQUIRED': 'Most changes to app config require wallet restart!',
'APP_CONFIG': 'App Config',
},
'TX_INFO': {
'ADDRESS': 'address',
'AMOUNT': 'amount',
'CATEGORY': 'category',
'CONFIRMATIONS': 'confirmations'
}
}
};
Write Preview
Loading…
Cancel
Save