From 3efc0aa9e330014d31028923770343e289fed55c Mon Sep 17 00:00:00 2001 From: pbca26 Date: Thu, 13 Apr 2017 08:55:31 +0300 Subject: [PATCH 1/4] native wallet components #1 --- react/src/actions/actionCreators.js | 90 +++++++++++++++++++ .../src/components/dashboard/coinTileItem.js | 10 ++- .../dashboard/walletsNativeReceive.js | 38 +++++++- .../dashboard/walletsNativeTxHistory.js | 53 +++++++++++ 4 files changed, 187 insertions(+), 4 deletions(-) diff --git a/react/src/actions/actionCreators.js b/react/src/actions/actionCreators.js index 8ba7978..12c2321 100644 --- a/react/src/actions/actionCreators.js +++ b/react/src/actions/actionCreators.js @@ -801,6 +801,96 @@ export function getSyncInfo(coin) { } } +function getKMDAddressesNativeState(json) { + return { + type: ACTIVE_COIN_GET_ADDRESSES, + addresses: json, + } +} + +export function getKMDAddressesNative(coin, pubpriv) { + var payload, + ajax_data_to_hex = '', + ajax_function_input = '', + tmplistaddr_hex_input = '', + passthru_agent = getPassthruAgent(coin), + tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'); + + if ( pubpriv === 'public' ) { + ajax_function_input = 'getaddressesbyaccount'; + tmplistaddr_hex_input = '222200'; + } + if ( pubpriv === 'private' ) { + ajax_function_input = 'z_listaddresses'; + tmplistaddr_hex_input = ''; + } + + if (passthru_agent === 'iguana') { + payload = { + 'userpass': tmpIguanaRPCAuth, + 'agent': passthru_agent, + 'method': 'passthru', + 'asset': coin, + 'function': ajax_function_input, + 'hex': tmplistaddr_hex_input + }; + } else { + payload = { + 'userpass': tmpIguanaRPCAuth, + 'agent': passthru_agent, + 'method': 'passthru', + 'function': ajax_function_input, + 'hex': tmplistaddr_hex_input + }; + } + + return dispatch => { + return fetch('http://127.0.0.1:' + Config.iguanaCorePort, { + method: 'POST', + body: JSON.stringify(payload), + }) + .catch(function(error) { + console.log(error); + dispatch(triggerToaster(true, 'getKMDAddressesNative', 'Error', 'error')); + }) + .then(response => response.json()) + .then(json => dispatch(getKMDAddressesNativeState(json, dispatch))) + } +} + +/*function KMDListAddresses(pubpriv) { + NProgress.done(true); + NProgress.configure({ + template: templates.nprogressBar + }); + NProgress.start(); + + + + $.ajax({ + async: false, + type: 'POST', + data: JSON.stringify(ajax_data), + url: 'http://127.0.0.1:' + config.iguanaPort, + success: function(data, textStatus, jqXHR) { + var AjaxOutputData = JSON.parse(data); // Ajax output gets the whole list of unspent coin with addresses + result = AjaxOutputData; + }, + error: function(xhr, textStatus, error) { + console.log('failed getting Coin History.'); + console.log(xhr.statusText); + if ( xhr.readyState == 0 ) { + Iguana_ServiceUnavailable(); + } + console.log(textStatus); + console.log(error); + } + }); + + NProgress.done(); + return result; +}*/ + function getDebugLogState(json) { const _data = json.result.replace('\n', '\r\n'); diff --git a/react/src/components/dashboard/coinTileItem.js b/react/src/components/dashboard/coinTileItem.js index d0bf865..3130125 100644 --- a/react/src/components/dashboard/coinTileItem.js +++ b/react/src/components/dashboard/coinTileItem.js @@ -10,7 +10,8 @@ import { iguanaEdexBalance, getSyncInfoNative, getKMDBalanceTotal, - getNativeTxHistory + getNativeTxHistory, + getKMDAddressesNative } from '../../actions/actionCreators'; import Store from '../../store'; @@ -27,24 +28,27 @@ class CoinTileItem extends React.Component { var _iguanaActiveHandle = setInterval(function() { Store.dispatch(getSyncInfo(coin)); Store.dispatch(iguanaEdexBalance(coin, mode)); + Store.dispatch(getAddressesByAccount(coin)); }, 3000); Store.dispatch(startInterval('sync', _iguanaActiveHandle)); } else if (mode === 'native' && coin !== this.props.ActiveCoin.coin) { Store.dispatch(stopInterval('sync', this.props.Interval.interval)); + // TODO: add conditions to skip txhistory, balances, addresses while "activating best chain" var _iguanaActiveHandle = setInterval(function() { Store.dispatch(getSyncInfoNative(coin)); Store.dispatch(getKMDBalanceTotal(coin)); Store.dispatch(getNativeTxHistory(coin)); - }, 3000); + Store.dispatch(getKMDAddressesNative(coin, 'public')); + }, coin === 'KMD' ? 15000 : 3000); Store.dispatch(startInterval('sync', _iguanaActiveHandle)); } else { Store.dispatch(stopInterval('sync', this.props.Interval.interval)); + Store.dispatch(getAddressesByAccount(coin)); // basilisk } Store.dispatch(dashboardChangeActiveCoin(coin, mode)); Store.dispatch(iguanaActiveHandle(true)); - Store.dispatch(getAddressesByAccount(coin)); /*this.setState(Object.assign({}, this.state, { activeHandleInterval: _iguanaActiveHandle, diff --git a/react/src/components/dashboard/walletsNativeReceive.js b/react/src/components/dashboard/walletsNativeReceive.js index ab8f962..bd9ab28 100644 --- a/react/src/components/dashboard/walletsNativeReceive.js +++ b/react/src/components/dashboard/walletsNativeReceive.js @@ -2,6 +2,39 @@ import React from 'react'; import { translate } from '../../translate/translate'; class WalletsNativeReceive extends React.Component { + constructor(props) { + super(props); + this.state = { + openDropMenu: false, + }; + this.openDropMenu = this.openDropMenu.bind(this); + } + + openDropMenu() { + this.setState(Object.assign({}, this.state, { + openDropMenu: !this.state.openDropMenu, + })); + } + + renderAddressList() { + if (this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses.length) { + return this.props.ActiveCoin.addresses.map((address) => + + + + {translate('IAPI.PUBLIC_SM')} + + + {address} + + + + ); + } else { + return null; + } + } + render() { if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.receive) { return ( @@ -13,7 +46,7 @@ class WalletsNativeReceive extends React.Component {
-
+
@@ -41,6 +74,9 @@ class WalletsNativeReceive extends React.Component { {translate('INDEX.ADDRESS')} + + {this.renderAddressList()} + {translate('INDEX.TYPE')} diff --git a/react/src/components/dashboard/walletsNativeTxHistory.js b/react/src/components/dashboard/walletsNativeTxHistory.js index 4cff475..ef5c096 100644 --- a/react/src/components/dashboard/walletsNativeTxHistory.js +++ b/react/src/components/dashboard/walletsNativeTxHistory.js @@ -2,6 +2,56 @@ import React from 'react'; import { translate } from '../../translate/translate'; class WalletsNativeTxHistory extends React.Component { + renderTxType(category) { + if ( category == 'send' ) { + return ( + + {translate('DASHBOARD.OUT')} + + ); + } + if ( category == 'receive' ) { + return ( + + {translate('DASHBOARD.IN')} + + ); + } + if ( category == 'generate' ) { + return ( + + {translate('DASHBOARD.MINED')} + + ); + } + if ( category == 'immature' ) { + return ( + + {translate('DASHBOARD.IMMATURE')} + + ); + } + } + + renderTxHistoryList() { + if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length) { + return this.props.ActiveCoin.txhistory.map((tx) => + + + + {translate('IAPI.PUBLIC_SM')} + + + {this.renderTxType(tx.category)} + + + + ); + } else { + return null; + } + } + render() { return (
@@ -26,6 +76,9 @@ class WalletsNativeTxHistory extends React.Component { {translate('INDEX.TX_DETAIL')} + + {this.renderTxHistoryList()} + {translate('INDEX.TYPE')} From c6da87c160544603a6fc8eb873f98abc1b526a0f Mon Sep 17 00:00:00 2001 From: pbca26 Date: Fri, 14 Apr 2017 09:58:17 +0300 Subject: [PATCH 2/4] native nav bar --- react/src/components/dashboard/walletsNav.js | 21 ++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/react/src/components/dashboard/walletsNav.js b/react/src/components/dashboard/walletsNav.js index 6d409ee..b30c428 100644 --- a/react/src/components/dashboard/walletsNav.js +++ b/react/src/components/dashboard/walletsNav.js @@ -5,7 +5,8 @@ import { iguanaEdexBalance, toggleSendCoinForm, toggleReceiveCoinForm, - toggleSendReceiveCoinForms + toggleSendReceiveCoinForms, + toggleDashboardActiveSection } from '../../actions/actionCreators'; import Store from '../../store'; @@ -24,15 +25,27 @@ class WalletsNav extends React.Component { } toggleSendReceiveCoinForms() { - Store.dispatch(toggleSendReceiveCoinForms()); + if (this.props.ActiveCoin.mode === 'native') { + Store.dispatch(toggleDashboardActiveSection(this.props.ActiveCoin.nativeActiveSection === 'settings' ? 'default' : 'settings')); + } else { + Store.dispatch(toggleSendReceiveCoinForms()); + } } toggleSendCoinForm(display) { - Store.dispatch(toggleSendCoinForm(display)); + if (this.props.ActiveCoin.mode === 'native') { + Store.dispatch(toggleDashboardActiveSection(this.props.ActiveCoin.nativeActiveSection === 'send' ? 'default' : 'send')); + } else { + Store.dispatch(toggleSendCoinForm(display)); + } } toggleReceiveCoinForm(display) { - Store.dispatch(toggleReceiveCoinForm(display)); + if (this.props.ActiveCoin.mode === 'native') { + Store.dispatch(toggleDashboardActiveSection(this.props.ActiveCoin.nativeActiveSection === 'receive' ? 'default' : 'receive')); + } else { + Store.dispatch(toggleReceiveCoinForm(display)); + } } render() { From 20031e5e6e33cec1b03f53ab1097a62494b27be4 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Fri, 14 Apr 2017 09:58:45 +0300 Subject: [PATCH 3/4] native tx history, tx info modal --- .../dashboard/walletsNativeTxHistory.js | 132 +++++++++++------- .../dashboard/walletsNativeTxInfo.js | 85 +++++++---- 2 files changed, 142 insertions(+), 75 deletions(-) diff --git a/react/src/components/dashboard/walletsNativeTxHistory.js b/react/src/components/dashboard/walletsNativeTxHistory.js index ef5c096..4f333f8 100644 --- a/react/src/components/dashboard/walletsNativeTxHistory.js +++ b/react/src/components/dashboard/walletsNativeTxHistory.js @@ -1,30 +1,43 @@ import React from 'react'; import { translate } from '../../translate/translate'; +import { secondsToString } from '../../util/time'; +import { toggleDashboardTxInfoModal } from '../../actions/actionCreators'; +import Store from '../../store'; class WalletsNativeTxHistory extends React.Component { + constructor(props) { + super(props); + } + + // TODO: implement sorting and pagination + + toggleTxInfoModal(display, txIndex) { + Store.dispatch(toggleDashboardTxInfoModal(display, txIndex)); + } + renderTxType(category) { - if ( category == 'send' ) { + if ( category === 'send' ) { return ( {translate('DASHBOARD.OUT')} ); } - if ( category == 'receive' ) { + if ( category === 'receive' ) { return ( {translate('DASHBOARD.IN')} ); } - if ( category == 'generate' ) { + if ( category === 'generate' ) { return ( {translate('DASHBOARD.MINED')} ); } - if ( category == 'immature' ) { + if ( category === 'immature' ) { return ( {translate('DASHBOARD.IMMATURE')} @@ -33,9 +46,21 @@ class WalletsNativeTxHistory extends React.Component { } } + renderAddress(tx) { + if (!tx.address) { + return ( + + {translate('DASHBOARD.ZADDR_NOT_LISTED')} + + ); + } else { + return (tx.address); + } + } + renderTxHistoryList() { - if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length) { - return this.props.ActiveCoin.txhistory.map((tx) => + if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length && this.props.ActiveCoin.nativeActiveSection === 'default') { + return this.props.ActiveCoin.txhistory.map((tx, index) => @@ -43,8 +68,13 @@ class WalletsNativeTxHistory extends React.Component { {this.renderTxType(tx.category)} - - + {tx.confirmations} + {tx.amount} + {secondsToString(tx.time)} + {this.renderAddress(tx)} + + + ); } else { @@ -53,52 +83,58 @@ class WalletsNativeTxHistory extends React.Component { } render() { - return ( -
-
-
-
-
-
-
-

{translate('INDEX.TRANSACTION_HISTORY')}

-
-
- - - - - - - - - - - - - - {this.renderTxHistoryList()} - - - - - - - - - - - - -
{translate('INDEX.TYPE')}{translate('INDEX.DIRECTION')}{translate('INDEX.CONFIRMATIONS')}{translate('INDEX.AMOUNT')}{translate('INDEX.TIME')}{translate('INDEX.DEST_ADDRESS')}{translate('INDEX.TX_DETAIL')}
{translate('INDEX.TYPE')}{translate('INDEX.DIRECTION')}{translate('INDEX.CONFIRMATIONS')}{translate('INDEX.AMOUNT')}{translate('INDEX.TIME')}{translate('INDEX.DEST_ADDRESS')}{translate('INDEX.TX_DETAIL')}
+ if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') { + return ( +
+
+
+
+
+
+
+
+

{translate('INDEX.TRANSACTION_HISTORY')}

+
+
+ + + + + + + + + + + + + + {this.renderTxHistoryList()} + + + + + + + + + + + + +
{translate('INDEX.TYPE')}{translate('INDEX.DIRECTION')}{translate('INDEX.CONFIRMATIONS')}{translate('INDEX.AMOUNT')}{translate('INDEX.TIME')}{translate('INDEX.DEST_ADDRESS')}{translate('INDEX.TX_DETAIL')}
{translate('INDEX.TYPE')}{translate('INDEX.DIRECTION')}{translate('INDEX.CONFIRMATIONS')}{translate('INDEX.AMOUNT')}{translate('INDEX.TIME')}{translate('INDEX.DEST_ADDRESS')}{translate('INDEX.TX_DETAIL')}
+
+
-
- ); + ); + } else { + return null; + } } } diff --git a/react/src/components/dashboard/walletsNativeTxInfo.js b/react/src/components/dashboard/walletsNativeTxInfo.js index c9f4ab2..dda1b3f 100644 --- a/react/src/components/dashboard/walletsNativeTxInfo.js +++ b/react/src/components/dashboard/walletsNativeTxInfo.js @@ -1,128 +1,159 @@ import React from 'react'; import { translate } from '../../translate/translate'; +import { secondsToString } from '../../util/time'; +import { toggleDashboardTxInfoModal } from '../../actions/actionCreators'; +import Store from '../../store'; 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() { - 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 (