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

full mode tx info modal

all-modes
pbca26 8 years ago
parent
c3699228e4
commit
511a95fae3
4 changed files with 142 additions and 4 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. 2
      react/src/components/dashboard/dashboard.js
  2. 11
      react/src/components/dashboard/walletsData.js
  3. 6
      react/src/components/dashboard/walletsNativeTxInfo.js
  4. 127
      react/src/components/dashboard/walletsTxInfo.js

2
react/src/components/dashboard/dashboard.js
View File

@ -17,6 +17,7 @@ import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
import WalletsBasiliskConnection from './walletsBasiliskConnection';
import WalletsNative from './walletsNative';
import WalletsNativeTxInfo from './walletsNativeTxInfo';
import WalletsTxInfo from './walletsTxInfo';
class Dashboard extends React.Component {
constructor(props) {
@ -42,6 +43,7 @@ class Dashboard extends React.Component {
<WalletsData {...this.props} />
<WalletsBasiliskRefresh {...this.props} />
<WalletsBasiliskConnection {...this.props} />
<WalletsTxInfo {...this.props} />
<WalletsNative {...this.props} />
<WalletsNativeTxInfo {...this.props} />
</div>

11
react/src/components/dashboard/walletsData.js
View File

@ -1,7 +1,12 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { basiliskRefresh, basiliskConnection, getDexNotaries } from '../../actions/actionCreators';
import {
basiliskRefresh,
basiliskConnection,
getDexNotaries,
toggleDashboardTxInfoModal
} from '../../actions/actionCreators';
import Store from '../../store';
class WalletsData extends React.Component {
@ -53,6 +58,10 @@ class WalletsData extends React.Component {
});
}
toggleTxInfoModal(display, txIndex) {
Store.dispatch(toggleDashboardTxInfoModal(display, txIndex));
}
componentWillReceiveProps(props) {
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length) {
if (!this.state.itemsList || (this.state.itemsList && !this.state.itemsList.length) || (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {

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

@ -24,7 +24,7 @@ class WalletsNativeTxInfo extends React.Component {
}
render() {
if (this.props && this.props.ActiveCoin.showTransactionInfo && this.props.ActiveCoin.nativeActiveSection === 'default') {
if (this.props && this.props.ActiveCoin.showTransactionInfo && this.props.ActiveCoin.nativeActiveSection === 'default' && this.props.ActiveCoin.mode === 'native') {
const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
return (
@ -143,10 +143,10 @@ class WalletsNativeTxInfo extends React.Component {
</table>
</div>
<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>{txInfo.hex}</textarea>
<textarea id="kmd_txid_info_hex" data-extcoin="COIN" 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" 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>
<textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '400px'}} rows="40" cols="80" defaultValue={JSON.stringify(txInfo, null, '\t')} disabled></textarea>
</div>
</div>
</div>

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

@ -0,0 +1,127 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
import Store from '../../store';
class WalletsTxInfo 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() {
if (this.props && this.props.ActiveCoin.showTransactionInfo && this.props.ActiveCoin.mode !== 'native') {
const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
return (
<div>
<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-content">
<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" data-extcoin="COIN" 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" data-extcoin="COIN" 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" data-extcoin="COIN" role="tabpanel">
<table className="table table-striped">
<tbody>
<tr>
<td>amount</td>
<td>
{txInfo.amount}
</td>
</tr>
<tr>
<td>category</td>
<td>
{txInfo.category}
</td>
</tr>
<tr>
<td>confirmations</td>
<td>
{txInfo.confirmations}
</td>
</tr>
<tr>
<td>blockhash</td>
<td>
{txInfo.blockhash}
</td>
</tr>
<tr>
<td>blocktime</td>
<td>
{secondsToString(txInfo.blocktime)}
</td>
</tr>
<tr>
<td>txid</td>
<td>
{txInfo.txid}
</td>
</tr>
<tr>
<td>time</td>
<td>
{secondsToString(txInfo.time)}
</td>
</tr>
<tr>
<td>timereceived</td>
<td>
{secondsToString(txInfo.timereceived)}
</td>
</tr>
</tbody>
</table>
</div>
<div className={this.state.activeTab === 1 ? '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" 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>
</div>
</div>
</div>
</div>
<div className="modal-backdrop show in"></div>
</div>
);
} else {
return null;
}
}
}
export default WalletsTxInfo;
Write Preview
Loading…
Cancel
Save