Feature/tx info modal

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 {

react/src/actions/actions/getTxDetails.js

@@ -0,0 +1,53 @@
+import {
+  triggerToaster
+} from '../actionCreators';
+import Config from '../../config';
+
+export function getTxDetails(coin, txid, type) {
+  return new Promise((resolve, reject) => {
+    let payload = {
+      mode: null,
+      chain: coin,
+      cmd: 'gettransaction',
+      params: [
+        txid
+      ],
+    };
+
+    if(type==='raw') {
+      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);
+    })
+  });
+}

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

@@ -1,7 +1,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,
+ } from '../../../actions/actionCreators';
 import Store from '../../../store';
 import WalletsTxInfoRender from './walletsTxInfo.render';
 
@@ -10,8 +14,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() {
@@ -22,6 +30,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) {
+    getTxDetails(coin, txid, 'raw')
+    .then((json) => {
+      this.setState(Object.assign({}, this.state, {
+        rawTxDetails: json,
+      }));
+    });
+  }
+
   openTab(tab) {
     this.setState(Object.assign({}, this.state, {
       activeTab: tab,
@@ -34,6 +71,29 @@ class WalletsTxInfo extends React.Component {
     }
   }
 
+  openExplorerWindow(txid) {
+    const url = 'http://' + this.props.ActiveCoin.coin + '.explorer.supernet.org/tx/' + txid;
+    const remote = window.require('electron').remote;
+    const BrowserWindow = remote.BrowserWindow;
+
+    const externalWindow = new BrowserWindow({
+      width: 1280,
+      height: 800,
+      title: `${translate('INDEX.LOADING')}...`,
+      icon: remote.getCurrentWindow().iguanaIcon,
+      webPreferences: {
+        "nodeIntegration": false
+      },
+    });
+
+    externalWindow.loadURL(url);
+    externalWindow.webContents.on('did-finish-load', function() {
+      setTimeout(function() {
+        externalWindow.show();
+      }, 40);
+    });
+  }
+
   render() {
     if (this.props &&
         this.props.ActiveCoin.showTransactionInfo &&
@@ -52,6 +112,7 @@ const mapStateToProps = (state) => {
   return {
     ActiveCoin: {
       mode: state.ActiveCoin.mode,
+      coin: state.ActiveCoin.coin,
       txhistory: state.ActiveCoin.txhistory,
       showTransactionInfo: state.ActiveCoin.showTransactionInfo,
       activeSection: state.ActiveCoin.activeSection,