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

native tx history, tx info modal

all-modes
pbca26 8 years ago
parent
c6da87c160
commit
20031e5e6e
2 changed files with 142 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 132
      react/src/components/dashboard/walletsNativeTxHistory.js
  2. 85
      react/src/components/dashboard/walletsNativeTxInfo.js

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

@ -1,30 +1,43 @@
import React from 'react'; import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
import Store from '../../store';
class WalletsNativeTxHistory extends React.Component { class WalletsNativeTxHistory extends React.Component {
constructor(props) {
super(props);
}
// TODO: implement sorting and pagination
toggleTxInfoModal(display, txIndex) {
Store.dispatch(toggleDashboardTxInfoModal(display, txIndex));
}
renderTxType(category) { renderTxType(category) {
if ( category == 'send' ) { if ( category === 'send' ) {
return ( return (
<span> <span>
<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> </span>
); );
} }
if ( category == 'receive' ) { if ( category === 'receive' ) {
return ( return (
<span> <span>
<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> </span>
); );
} }
if ( category == 'generate' ) { if ( category === 'generate' ) {
return ( return (
<span> <span>
<i className="icon fa-cogs"></i> <span>{translate('DASHBOARD.MINED')}</span> <i className="icon fa-cogs"></i> <span>{translate('DASHBOARD.MINED')}</span>
</span> </span>
); );
} }
if ( category == 'immature' ) { if ( category === 'immature' ) {
return ( return (
<span> <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>
@ -33,9 +46,21 @@ class WalletsNativeTxHistory 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>
);
} else {
return (tx.address);
}
}
renderTxHistoryList() { renderTxHistoryList() {
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length) { if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length && this.props.ActiveCoin.nativeActiveSection === 'default') {
return this.props.ActiveCoin.txhistory.map((tx) => return this.props.ActiveCoin.txhistory.map((tx, index) =>
<tr key={tx.txid}> <tr key={tx.txid}>
<td> <td>
<span className="label label-default"> <span className="label label-default">
@ -43,8 +68,13 @@ class WalletsNativeTxHistory extends React.Component {
</span> </span>
</td> </td>
<td>{this.renderTxType(tx.category)}</td> <td>{this.renderTxType(tx.category)}</td>
<td></td> <td>{tx.confirmations}</td>
<td></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>
</td>
</tr> </tr>
); );
} else { } else {
@ -53,52 +83,58 @@ class WalletsNativeTxHistory extends React.Component {
} }
render() { render() {
return ( if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') {
<div data-extcoin="COIN" id="kmd_wallet_dashboardinfo"> return (
<div className="col-xs-12 margin-top-20"> <div className="native-transactions">
<div className="panel nav-tabs-horizontal"> <div data-extcoin="COIN" id="kmd_wallet_dashboardinfo">
<div data-extcoin="COIN" id="kmd_wallet_dashoard_section"> <div className="col-xs-12 margin-top-20">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12"> <div className="panel nav-tabs-horizontal">
<div className="panel"> <div data-extcoin="COIN" id="kmd_wallet_dashoard_section">
<header className="panel-heading"> <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<h3 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h3> <div className="panel">
</header> <header className="panel-heading">
<div className="panel-body"> <h3 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h3>
<table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-tx-history-tbl" width="100%"> </header>
<thead> <div className="panel-body">
<tr> <table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-tx-history-tbl" width="100%">
<th>{translate('INDEX.TYPE')}</th> <thead>
<th>{translate('INDEX.DIRECTION')}</th> <tr>
<th>{translate('INDEX.CONFIRMATIONS')}</th> <th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.AMOUNT')}</th> <th>{translate('INDEX.DIRECTION')}</th>
<th>{translate('INDEX.TIME')}</th> <th>{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th> <th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TX_DETAIL')}</th> <th>{translate('INDEX.TIME')}</th>
</tr> <th>{translate('INDEX.DEST_ADDRESS')}</th>
</thead> <th>{translate('INDEX.TX_DETAIL')}</th>
<tbody> </tr>
{this.renderTxHistoryList()} </thead>
</tbody> <tbody>
<tfoot> {this.renderTxHistoryList()}
<tr> </tbody>
<th>{translate('INDEX.TYPE')}</th> <tfoot>
<th>{translate('INDEX.DIRECTION')}</th> <tr>
<th>{translate('INDEX.CONFIRMATIONS')}</th> <th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.AMOUNT')}</th> <th>{translate('INDEX.DIRECTION')}</th>
<th>{translate('INDEX.TIME')}</th> <th>{translate('INDEX.CONFIRMATIONS')}</th>
<th>{translate('INDEX.DEST_ADDRESS')}</th> <th>{translate('INDEX.AMOUNT')}</th>
<th>{translate('INDEX.TX_DETAIL')}</th> <th>{translate('INDEX.TIME')}</th>
</tr> <th>{translate('INDEX.DEST_ADDRESS')}</th>
</tfoot> <th>{translate('INDEX.TX_DETAIL')}</th>
</table> </tr>
</tfoot>
</table>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> );
); } else {
return null;
}
} }
} }

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

@ -1,128 +1,159 @@
import React from 'react'; import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
import Store from '../../store';
class WalletsNativeTxInfo extends React.Component { class WalletsNativeTxInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTab: 0,
};
this.toggleTxInfoModal = this.toggleTxInfoModal.bind(this);
}
toggleTxInfoModal() {
Store.dispatch(toggleDashboardTxInfoModal(false));
}
openTab(tab) {
this.setState(Object.assign({}, this.state, {
activeTab: tab,
}));
}
render() { render() {
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.showTransactionInfo) { if (this.props && this.props.ActiveCoin.showTransactionInfo && this.props.ActiveCoin.nativeActiveSection === 'default') {
const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
return ( return (
<div> <div>
<div className="modal show" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog"> <div className="modal show" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg"> <div className="modal-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-body"> <div className="modal-body" style={{height: '590px'}}>
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist"> <ul className="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
<li className="active" role="presentation"> <li className={this.state.activeTab === 0 ? 'active' : ''} role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab1" data-extcoin="COIN" aria-controls="KmdTxIDInfotab1" role="tab"> <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab1" role="tab" onClick={() => this.openTab(0)}>
<i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info <i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
</a> </a>
</li> </li>
<li role="presentation"> <li className={this.state.activeTab === 1 ? 'active' : ''} role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab2" data-extcoin="COIN" aria-controls="KmdTxIDInfotab2" role="tab"> <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab2" role="tab" onClick={() => this.openTab(1)}>
<i className="icon md-plus-square" aria-hidden="true"></i>vjointsplits, details <i className="icon md-plus-square" aria-hidden="true"></i>Vjointsplits, Details
</a> </a>
</li> </li>
<li role="presentation"> <li className={this.state.activeTab === 2 ? 'active' : ''} role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab3" data-extcoin="COIN" aria-controls="KmdTxIDInfotab3" role="tab"> <a data-toggle="tab" data-extcoin="COIN" aria-controls="KmdTxIDInfotab3" role="tab" onClick={() => this.openTab(2)}>
<i className="icon wb-briefcase" aria-hidden="true"></i>hex <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" data-extcoin="COIN" aria-controls="KmdTxIDInfotab4" role="tab" onClick={() => this.openTab(3)}>
<i className="icon wb-file" aria-hidden="true"></i>Raw info
</a> </a>
</li> </li>
</ul> </ul>
<div className="panel-body"> <div className="panel-body">
<div className="tab-content"> <div className="tab-content">
<div className="tab-pane active" id="KmdTxIDInfotab1" data-extcoin="COIN" role="tabpanel"> <div className={this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab1" data-extcoin="COIN" role="tabpanel">
<table className="table table-striped"> <table className="table table-striped">
<tbody> <tbody>
<tr> <tr>
<td>amount</td> <td>amount</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_amount"></span> {txInfo.amount}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>fee</td> <td>fee</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_fee"></span> {txInfo.fee}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>confirmations</td> <td>confirmations</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_confirmations"></span> {txInfo.confirmations}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>blockhash</td> <td>blockhash</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_blockhash"></span> {txInfo.blockhash}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>blockindex</td> <td>blockindex</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_blockindex"></span> {txInfo.blockindex}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>blocktime</td> <td>blocktime</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_blocktime"></span> {secondsToString(txInfo.blocktime)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>txid</td> <td>txid</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_txid"></span> {txInfo.txid}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>walletconflicts</td> <td>walletconflicts</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_walletconflicts"></span> {txInfo.walletconflicts.length}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>time</td> <td>time</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_time"></span> {secondsToString(txInfo.time)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>timereceived</td> <td>timereceived</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_timereceived"></span> {secondsToString(txInfo.timereceived)}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div className="tab-pane" id="KmdTxIDInfotab2" data-extcoin="COIN" role="tabpanel"> <div className={this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab2" data-extcoin="COIN" role="tabpanel">
<table className="table table-striped"> <table className="table table-striped">
<tbody> <tbody>
<tr> <tr>
<td>vjoinsplit</td> <td>vjoinsplit</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_vjoinsplit"></span> {txInfo.vjoinsplit}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>details</td> <td>details</td>
<td> <td>
<span data-extcoin="COIN" id="kmd_txid_info_details"></span> {txInfo.details}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div className="tab-pane" id="KmdTxIDInfotab3" data-extcoin="COIN" role="tabpanel"> <div className={this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab3" data-extcoin="COIN" role="tabpanel">
<textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '170px'}} rows="10" cols="80" disabled></textarea> <textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '170px'}} rows="10" cols="80" disabled>{txInfo.hex}</textarea>
</div>
<div className={this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane'} id="KmdTxIDInfotab4" data-extcoin="COIN" role="tabpanel">
<textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '400px'}} rows="40" cols="80" disabled>{JSON.stringify(txInfo, null, '\t')}</textarea>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button> <button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.toggleTxInfoModal}>Close</button>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save