Browse Source

AGP-299, Hook to gettransaction & getrawtransaction & print return values in UI

v0.25
Miika Turunen 7 years ago
parent
commit
862f6d80a5
  1. 1
      react/src/actions/actionCreators.js
  2. 79
      react/src/actions/actions/getTxDetails.js
  3. 39
      react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js
  4. 205
      react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js

1
react/src/actions/actionCreators.js

@ -54,6 +54,7 @@ export * from './actions/update';
export * from './actions/jumblr';
export * from './actions/interest';
export * from './actions/nativeDashboardUpdate';
export * from './actions/getTxDetails';
export function changeActiveAddress(address) {
return {

79
react/src/actions/actions/getTxDetails.js

@ -0,0 +1,79 @@
import {
triggerToaster
} from '../actionCreators';
import Config from '../../config';
export function getTxDetails(coin, txid, type) {
return new Promise((resolve, reject) => {
const payload = {
mode: null,
chain: coin,
cmd: 'gettransaction',
params: [
txid
],
};
fetch(
`http://127.0.0.1:${Config.agamaPort}/shepherd/cli`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ payload: payload })
},
)
.catch(function(error) {
console.log(error);
dispatch(
triggerToaster(
'getTransaction',
'Error',
'error'
)
);
})
.then(response => response.json())
.then(json => {
resolve(json.result ? json.result : json);
})
});
}
export function getRawTxDetails(coin, txid) {
return new Promise((resolve, reject) => {
const payload = {
mode: null,
chain: coin,
cmd: 'getrawtransaction',
params: [
txid,
1
],
};
fetch(
`http://127.0.0.1:${Config.agamaPort}/shepherd/cli`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ payload: payload })
},
)
.catch(function(error) {
console.log(error);
dispatch(
triggerToaster(
'getTransaction',
'Error',
'error'
)
);
})
.then(response => response.json())
.then(json => {
resolve(json.result ? json.result : json);
})
});
}

39
react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js

@ -2,7 +2,11 @@ import React from 'react';
import { connect } from 'react-redux';
import { translate } from '../../../translate/translate';
import { sortByDate } from '../../../util/sort';
import { toggleDashboardTxInfoModal } from '../../../actions/actionCreators';
import {
toggleDashboardTxInfoModal,
getTxDetails,
getRawTxDetails,
} from '../../../actions/actionCreators';
import Store from '../../../store';
import WalletsTxInfoRender from './walletsTxInfo.render';
@ -11,8 +15,12 @@ class WalletsTxInfo extends React.Component {
super();
this.state = {
activeTab: 0,
txDetails: null,
rawTxDetails: null,
};
this.toggleTxInfoModal = this.toggleTxInfoModal.bind(this);
this.loadTxDetails = this.loadTxDetails.bind(this);
this.loadRawTxDetails = this.loadRawTxDetails.bind(this);
}
toggleTxInfoModal() {
@ -23,6 +31,35 @@ class WalletsTxInfo extends React.Component {
}));
}
componentWillReceiveProps(nextProps) {
const texInfo = nextProps.ActiveCoin.txhistory[nextProps.ActiveCoin.showTransactionInfoTxIndex];
if (texInfo &&
this.props.ActiveCoin.showTransactionInfoTxIndex !== nextProps.ActiveCoin.showTransactionInfoTxIndex) {
this.loadTxDetails(nextProps.ActiveCoin.coin, texInfo.txid);
this.loadRawTxDetails(nextProps.ActiveCoin.coin, texInfo.txid);
}
}
loadTxDetails(coin, txid) {
getTxDetails(coin, txid)
.then((json) => {
this.setState(Object.assign({}, this.state, {
txDetails: json,
}));
});
}
loadRawTxDetails(coin, txid) {
getRawTxDetails(coin, txid)
.then((json) => {
this.setState(Object.assign({}, this.state, {
rawTxDetails: json,
}));
});
}
openTab(tab) {
this.setState(Object.assign({}, this.state, {
activeTab: tab,

205
react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js

@ -36,120 +36,131 @@ const WalletsTxInfoRender = function(txInfo) {
</li>
</ul>
<div className="panel-body">
<div className="tab-content">
{ this.state.activeTab === 0 &&
<div className="tab-pane active">
{ this.state.txDetails &&
<div className="tab-content">
{ this.state.activeTab === 0 &&
<div className="tab-pane active">
<table className="table table-striped">
<tbody>
<tr>
<td>{ translate('TX_INFO.ADDRESS') }</td>
<td>
{ txInfo.address }
</td>
</tr>
<tr>
<td>{ translate('TX_INFO.AMOUNT') }</td>
<td>
{ txInfo.amount }
</td>
</tr>
<tr>
<td>{ translate('TX_INFO.CATEGORY') }</td>
<td>
{ txInfo.category || txInfo.type }
</td>
</tr>
<tr>
<td>{ translate('TX_INFO.CONFIRMATIONS') }</td>
<td>
{ txInfo.confirmations }
</td>
</tr>
{ txInfo.blockhash &&
<tbody>
<tr>
<td>blockhash</td>
<td>{ translate('TX_INFO.ADDRESS') }</td>
<td>
{ txInfo.blockhash }
{ this.state.txDetails.details[0].address }
</td>
</tr>
}
{ (txInfo.blocktime || txInfo.timestamp) &&
<tr>
<td>blocktime</td>
<td>{ translate('TX_INFO.AMOUNT') }</td>
<td>
{ secondsToString(txInfo.blocktime || txInfo.timestamp) }
{ txInfo.amount }
</td>
</tr>
}
<tr>
<td>txid</td>
<td>
{ txInfo.txid }
</td>
</tr>
<tr>
<td>walletconflicts</td>
<td>
{ txInfo.walletconflicts.length }
</td>
</tr>
<tr>
<td>{ translate('TX_INFO.CATEGORY') }</td>
<td>
{ this.state.txDetails.details[0].category || txInfo.type }
</td>
</tr>
<tr>
<td>{ translate('TX_INFO.CONFIRMATIONS') }</td>
<td>
{ this.state.txDetails.confirmations }
</td>
</tr>
{ this.state.txDetails.blockindex &&
<tr>
<td>blockindex</td>
<td>
{ this.state.txDetails.blockindex }
</td>
</tr>
}
{ this.state.txDetails.blockhash &&
<tr>
<td>blockhash</td>
<td>
{ this.state.txDetails.blockhash }
</td>
</tr>
}
{ (this.state.txDetails.blocktime || this.state.txDetails.timestamp) &&
<tr>
<td>blocktime</td>
<td>
{ secondsToString(this.state.txDetails.blocktime || this.state.txDetails.timestamp) }
</td>
</tr>
}
<tr>
<td>txid</td>
<td>
{ this.state.txDetails.txid }
</td>
</tr>
<tr>
<td>walletconflicts</td>
<td>
{ this.state.txDetails.walletconflicts.length }
</td>
</tr>
<tr>
<td>time</td>
<td>
{ secondsToString(this.state.txDetails.time) }
</td>
</tr>
<tr>
<td>timereceived</td>
<td>
{ secondsToString(this.state.txDetails.timereceived) }
</td>
</tr>
</tbody>
</table>
</div>
}
{ this.state.activeTab === 1 &&
<div className="tab-pane active">
<table className="table table-striped">
<tbody>
<tr>
<td>time</td>
<td>vjoinsplit</td>
<td>
{ secondsToString(txInfo.time) }
{ txInfo.vjoinsplit }
</td>
</tr>
<tr>
<td>timereceived</td>
<td>details</td>
<td>
{ secondsToString(txInfo.timereceived) }
{ txInfo.details }
</td>
</tr>
</tbody>
</table>
</div>
}
{ this.state.activeTab === 1 &&
<div className="tab-pane active">
<table className="table table-striped">
<tbody>
<tr>
<td>vjoinsplit</td>
<td>
{ txInfo.vjoinsplit }
</td>
</tr>
<tr>
<td>details</td>
<td>
{ txInfo.details }
</td>
</tr>
</tbody>
</table>
</div>
}
{ this.state.activeTab === 2 &&
<div className="tab-pane active">
<textarea
className="full-width height-170"
rows="10"
cols="80"
defaultValue={ txInfo.hex }
disabled></textarea>
</div>
}
{ this.state.activeTab === 3 &&
<div className="tab-pane active">
<textarea
className="full-width height-400"
rows="40"
cols="80"
defaultValue={ JSON.stringify(txInfo, null, '\t') }
disabled></textarea>
</div>
}
</div>
</tbody>
</table>
</div>
}
{ this.state.activeTab === 2 &&
<div className="tab-pane active">
<textarea
className="full-width height-170"
rows="10"
cols="80"
defaultValue={ txInfo.hex }
disabled></textarea>
</div>
}
{ this.state.activeTab === 3 &&
<div className="tab-pane active">
<textarea
className="full-width height-400"
rows="40"
cols="80"
defaultValue={ JSON.stringify(this.state.rawTxDetails, null, '\t') }
disabled></textarea>
</div>
}
</div>
}
</div>
</div>
</div>

Loading…
Cancel
Save