diff --git a/react/src/actions/actionCreators.js b/react/src/actions/actionCreators.js index 8ba7978..6f030a3 100644 --- a/react/src/actions/actionCreators.js +++ b/react/src/actions/actionCreators.js @@ -47,10 +47,13 @@ export function toggleDashboardActiveSection(name) { } } -export function toggleDashboardTxInfoModal(display) { +export function toggleDashboardTxInfoModal(display, txIndex) { + console.log('toggleTxInfoModal', txIndex); + return { type: DASHBOARD_ACTIVE_TXINFO_MODAL, showTransactionInfo: display, + showTransactionInfoTxIndex: txIndex, } } @@ -801,6 +804,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/dashboard.js b/react/src/components/dashboard/dashboard.js index 4078db8..fbbbe17 100644 --- a/react/src/components/dashboard/dashboard.js +++ b/react/src/components/dashboard/dashboard.js @@ -16,6 +16,7 @@ import About from './about'; import WalletsBasiliskRefresh from './walletsBasiliskRefresh'; import WalletsBasiliskConnection from './walletsBasiliskConnection'; import WalletsNative from './walletsNative'; +import WalletsNativeTxInfo from './walletsNativeTxInfo'; class Dashboard extends React.Component { constructor(props) { @@ -42,6 +43,7 @@ class Dashboard extends React.Component { +
diff --git a/react/src/components/dashboard/walletsNative.js b/react/src/components/dashboard/walletsNative.js index 5ae1845..9f1640f 100644 --- a/react/src/components/dashboard/walletsNative.js +++ b/react/src/components/dashboard/walletsNative.js @@ -7,17 +7,12 @@ import WalletsNativeReceive from './walletsNativeReceive'; import WalletsNativeSend from './walletsNativeSend'; import WalletsNativeSyncProgress from './walletsNativeSyncProgress'; import WalletsNativeTxHistory from './walletsNativeTxHistory'; -import WalletsNativeTxInfo from './walletsNativeTxInfo'; class WalletsNative extends React.Component { constructor(props) { super(props); } - /*$('.header-easydex-section') - .html(' ' + _coin + ''); - $('#easydex-header-div').css('background-image', 'url("assets/images/bg/' + imgBgName + '_transparent_header_bg.png")');*/ - render() { if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'native') { return ( @@ -42,7 +37,6 @@ class WalletsNative extends React.Component {
- ); diff --git a/react/src/components/dashboard/walletsNativeBalance.js b/react/src/components/dashboard/walletsNativeBalance.js index 3d23b32..818cf51 100644 --- a/react/src/components/dashboard/walletsNativeBalance.js +++ b/react/src/components/dashboard/walletsNativeBalance.js @@ -3,69 +3,73 @@ import { translate } from '../../translate/translate'; class WalletsNativeBalance extends React.Component { render() { - return ( -
-
-
-
-
-
-
- {translate('INDEX.TRANSPARENT_BALANCE')} + if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') { + return ( +
+
+
+
+
+
+
+ {translate('INDEX.TRANSPARENT_BALANCE')} +
+ {this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-'}
- {this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-'}
-
-
-
-
-
-
-
- {translate('INDEX.Z_BALANCE')} +
+
+
+
+
+
+ {translate('INDEX.Z_BALANCE')} +
+ {this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-'}
- {this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-'}
-
-
-
-
-
-
-
- {translate('INDEX.INTEREST_EARNED')} +
+
+
+
+
+
+ {translate('INDEX.INTEREST_EARNED')} +
+ {this.props.ActiveCoin.balance.interest ? this.props.ActiveCoin.balance.interest : '-'}
- {this.props.ActiveCoin.balance.interest ? this.props.ActiveCoin.balance.interest : '-'}
-
-
-
-
-
-
-
- {translate('INDEX.ZT_BALANCE')} +
+
+
+
+
+
+ {translate('INDEX.ZT_BALANCE')} +
+ {this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-'}
- {this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-'}
-
- ); + ); + } else { + return null; + } } } diff --git a/react/src/components/dashboard/walletsNativeInfo.js b/react/src/components/dashboard/walletsNativeInfo.js index 3a3ed03..fd5baaa 100644 --- a/react/src/components/dashboard/walletsNativeInfo.js +++ b/react/src/components/dashboard/walletsNativeInfo.js @@ -7,7 +7,7 @@ class WalletsNativeInfo extends React.Component { } render() { - if (this.props && this.props.Dashboard && this.props.Dashboard.progress) { + if (this.props && this.props.Dashboard && this.props.Dashboard.progress && this.props.ActiveCoin.nativeActiveSection === 'settings') { return (
diff --git a/react/src/components/dashboard/walletsNativeReceive.js b/react/src/components/dashboard/walletsNativeReceive.js index ab8f962..7649309 100644 --- a/react/src/components/dashboard/walletsNativeReceive.js +++ b/react/src/components/dashboard/walletsNativeReceive.js @@ -2,8 +2,41 @@ 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) { + if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.nativeActiveSection === '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/walletsNativeSend.js b/react/src/components/dashboard/walletsNativeSend.js index abba5f3..05c337a 100644 --- a/react/src/components/dashboard/walletsNativeSend.js +++ b/react/src/components/dashboard/walletsNativeSend.js @@ -3,7 +3,7 @@ import { translate } from '../../translate/translate'; class WalletsNativeSend extends React.Component { render() { - if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.send) { + if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.nativeActiveSection === 'send') { return (
diff --git a/react/src/components/dashboard/walletsNativeTxHistory.js b/react/src/components/dashboard/walletsNativeTxHistory.js index 4cff475..4f333f8 100644 --- a/react/src/components/dashboard/walletsNativeTxHistory.js +++ b/react/src/components/dashboard/walletsNativeTxHistory.js @@ -1,51 +1,140 @@ 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' ) { + 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')} + + ); + } + } + + 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 && this.props.ActiveCoin.nativeActiveSection === 'default') { + return this.props.ActiveCoin.txhistory.map((tx, index) => + + + + {translate('IAPI.PUBLIC_SM')} + + + {this.renderTxType(tx.category)} + {tx.confirmations} + {tx.amount} + {secondsToString(tx.time)} + {this.renderAddress(tx)} + + + + + ); + } else { + return null; + } + } + render() { - return ( -
-
-
-
-
-
-
-

{translate('INDEX.TRANSACTION_HISTORY')}

-
-
- - - - - - - - - - - - - - - - - - - - - - - -
{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 (