diff --git a/react/src/actions/actionCreators.js b/react/src/actions/actionCreators.js index 5214535..ae83cb5 100644 --- a/react/src/actions/actionCreators.js +++ b/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 { diff --git a/react/src/actions/actions/getTxDetails.js b/react/src/actions/actions/getTxDetails.js new file mode 100644 index 0000000..cc032a8 --- /dev/null +++ b/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); + }) + }); +} \ No newline at end of file diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js index d566912..ae78891 100644 --- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.js +++ b/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, diff --git a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js index e2ab0d7..dbd1e50 100644 --- a/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js +++ b/react/src/components/dashboard/walletsTxInfo/walletsTxInfo.render.js @@ -36,120 +36,131 @@ const WalletsTxInfoRender = function(txInfo) {
-
- { this.state.activeTab === 0 && -
+ { this.state.txDetails && +
+ { this.state.activeTab === 0 && +
- - - - - - - - - - - - - - - - - - { txInfo.blockhash && + + - + - } - { (txInfo.blocktime || txInfo.timestamp) && - + - } - - - - - - - - + + + + + + + + + { this.state.txDetails.blockindex && + + + + + } + { this.state.txDetails.blockhash && + + + + + } + { (this.state.txDetails.blocktime || this.state.txDetails.timestamp) && + + + + + } + + + + + + + + + + + + + + + + + +
{ translate('TX_INFO.ADDRESS') } - { txInfo.address } -
{ translate('TX_INFO.AMOUNT') } - { txInfo.amount } -
{ translate('TX_INFO.CATEGORY') } - { txInfo.category || txInfo.type } -
{ translate('TX_INFO.CONFIRMATIONS') } - { txInfo.confirmations } -
blockhash{ translate('TX_INFO.ADDRESS') } - { txInfo.blockhash } + { this.state.txDetails.details[0].address }
blocktime{ translate('TX_INFO.AMOUNT') } - { secondsToString(txInfo.blocktime || txInfo.timestamp) } + { txInfo.amount }
txid - { txInfo.txid } -
walletconflicts - { txInfo.walletconflicts.length } -
{ translate('TX_INFO.CATEGORY') } + { this.state.txDetails.details[0].category || txInfo.type } +
{ translate('TX_INFO.CONFIRMATIONS') } + { this.state.txDetails.confirmations } +
blockindex + { this.state.txDetails.blockindex } +
blockhash + { this.state.txDetails.blockhash } +
blocktime + { secondsToString(this.state.txDetails.blocktime || this.state.txDetails.timestamp) } +
txid + { this.state.txDetails.txid } +
walletconflicts + { this.state.txDetails.walletconflicts.length } +
time + { secondsToString(this.state.txDetails.time) } +
timereceived + { secondsToString(this.state.txDetails.timereceived) } +
+
+ } + { this.state.activeTab === 1 && +
+ + - + - + - -
timevjoinsplit - { secondsToString(txInfo.time) } + { txInfo.vjoinsplit }
timereceiveddetails - { secondsToString(txInfo.timereceived) } + { txInfo.details }
-
- } - { this.state.activeTab === 1 && -
- - - - - - - - - - - -
vjoinsplit - { txInfo.vjoinsplit } -
details - { txInfo.details } -
-
- } - { this.state.activeTab === 2 && -
- -
- } - { this.state.activeTab === 3 && -
- -
- } -
+ + +
+ } + { this.state.activeTab === 2 && +
+ +
+ } + { this.state.activeTab === 3 && +
+ +
+ } +
+ }