Browse Source
# Conflicts: # react/src/components/dashboard/main/dashboard.render.js # react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js # react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.render.jsall-modes
petitPapillon
8 years ago
34 changed files with 1145 additions and 541 deletions
@ -1,15 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import WalletsNativeBalanceRender from './walletsNativeBalance.render'; |
|
||||
|
|
||||
class WalletsNativeBalance extends React.Component { |
|
||||
render() { |
|
||||
if (this.props && |
|
||||
this.props.ActiveCoin.nativeActiveSection === 'default') { |
|
||||
return WalletsNativeBalanceRender.call(this); |
|
||||
} |
|
||||
|
|
||||
return null; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default WalletsNativeBalance; |
|
||||
@ -1,82 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { translate } from '../../../translate/translate'; |
|
||||
|
|
||||
const WalletsNativeBalanceRender = function() { |
|
||||
return ( |
|
||||
<div className="col-xs-12"> |
|
||||
<div className="col-lg-3 col-xs-12"> |
|
||||
<div className="widget widget-shadow"> |
|
||||
<div className="widget-content white bg-yellow-800"> |
|
||||
<div className="padding-20 padding-top-10"> |
|
||||
<div className="clearfix"> |
|
||||
<div className="pull-left padding-vertical-10"> |
|
||||
<i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i> |
|
||||
{ translate('INDEX.TRANSPARENT_BALANCE') } |
|
||||
</div> |
|
||||
<span className="pull-right padding-top-10 font-size-22"> |
|
||||
{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' } |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div className="col-lg-3 col-xs-12"> |
|
||||
<div className="widget widget-shadow"> |
|
||||
<div className="widget-content white bg-blue-grey-800"> |
|
||||
<div className="padding-20 padding-top-10"> |
|
||||
<div className="clearfix"> |
|
||||
<div className="pull-left padding-vertical-10"> |
|
||||
<i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i> |
|
||||
{ translate('INDEX.Z_BALANCE') } |
|
||||
</div> |
|
||||
<span className="pull-right padding-top-10 font-size-22"> |
|
||||
{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' } |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div className="col-lg-3 col-xs-12"> |
|
||||
<div className="widget widget-shadow"> |
|
||||
<div className="widget-content white bg-cyan-700"> |
|
||||
<div className="padding-20 padding-top-10"> |
|
||||
<div className="clearfix"> |
|
||||
<div className="pull-left padding-vertical-10"> |
|
||||
<i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i> |
|
||||
{ translate('INDEX.INTEREST_EARNED') } |
|
||||
</div> |
|
||||
<span className="pull-right padding-top-10 font-size-22"> |
|
||||
{ this.props.Dashboard.progress && this.props.Dashboard.progress.interest ? this.props.Dashboard.progress.interest : '-' } |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div className="col-lg-3 col-xs-12"> |
|
||||
<div className="widget widget-shadow"> |
|
||||
<div className="widget-content white bg-green-600"> |
|
||||
<div className="padding-20 padding-top-10"> |
|
||||
<div className="clearfix"> |
|
||||
<div className="pull-left padding-vertical-10"> |
|
||||
<i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i> |
|
||||
{ translate('INDEX.ZT_BALANCE') } |
|
||||
</div> |
|
||||
<span className="pull-right padding-top-10 font-size-22"> |
|
||||
{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' } |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default WalletsNativeBalanceRender; |
|
||||
@ -1,94 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { |
|
||||
copyCoinAddress, |
|
||||
getNewKMDAddresses |
|
||||
} from '../../../actions/actionCreators'; |
|
||||
import Store from '../../../store'; |
|
||||
import { |
|
||||
AddressListRender, |
|
||||
WalletsNativeReceiveRender |
|
||||
} from './walletsNativeReceive.render'; |
|
||||
|
|
||||
class WalletsNativeReceive extends React.Component { |
|
||||
constructor(props) { |
|
||||
super(props); |
|
||||
this.state = { |
|
||||
openDropMenu: false, |
|
||||
}; |
|
||||
this.openDropMenu = this.openDropMenu.bind(this); |
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this); |
|
||||
} |
|
||||
|
|
||||
componentWillMount() { |
|
||||
document.addEventListener( |
|
||||
'click', |
|
||||
this.handleClickOutside, |
|
||||
false |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
componentWillUnmount() { |
|
||||
document.removeEventListener( |
|
||||
'click', |
|
||||
this.handleClickOutside, |
|
||||
false |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
handleClickOutside(e) { |
|
||||
if (e.srcElement.className.indexOf('dropdown') === -1 && |
|
||||
(e.srcElement.offsetParent && e.srcElement.offsetParent.className.indexOf('dropdown') === -1)) { |
|
||||
this.setState({ |
|
||||
openDropMenu: false, |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
openDropMenu() { |
|
||||
this.setState(Object.assign({}, this.state, { |
|
||||
openDropMenu: !this.state.openDropMenu, |
|
||||
})); |
|
||||
} |
|
||||
|
|
||||
copyZAddress(address) { |
|
||||
Store.dispatch(copyCoinAddress(address)); |
|
||||
} |
|
||||
|
|
||||
renderAddressList(type) { |
|
||||
if (this.props.ActiveCoin.addresses && |
|
||||
this.props.ActiveCoin.addresses[type] && |
|
||||
this.props.ActiveCoin.addresses[type].length) { |
|
||||
return this.props.ActiveCoin.addresses[type].map( |
|
||||
(address) => |
|
||||
AddressListRender.call( |
|
||||
this, |
|
||||
address, |
|
||||
type |
|
||||
) |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
return null; |
|
||||
} |
|
||||
|
|
||||
getNewAddress(type) { |
|
||||
Store.dispatch( |
|
||||
getNewKMDAddresses( |
|
||||
this.props.ActiveCoin.coin, |
|
||||
type |
|
||||
) |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
render() { |
|
||||
if (this.props && |
|
||||
this.props.ActiveCoin && |
|
||||
this.props.ActiveCoin.nativeActiveSection === 'receive') { |
|
||||
return WalletsNativeReceiveRender.call(this); |
|
||||
} |
|
||||
|
|
||||
return null; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default WalletsNativeReceive; |
|
||||
@ -1,90 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { translate } from '../../../translate/translate'; |
|
||||
|
|
||||
export const AddressListRender = function(address, type) { |
|
||||
return ( |
|
||||
<tr key={ address.address }> |
|
||||
<td> |
|
||||
<span className={ type === 'public' ? 'label label-default' : 'label label-dark' }> |
|
||||
<i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> |
|
||||
{ type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') } |
|
||||
</span> |
|
||||
<button |
|
||||
className="btn btn-default btn-xs clipboard-edexaddr margin-left-10" |
|
||||
onClick={ () => this.copyZAddress(address.address) }> |
|
||||
<i className="icon wb-copy"></i> { translate('INDEX.COPY') } |
|
||||
</button> |
|
||||
</td> |
|
||||
<td>{ type === 'public' ? address.address : address.address.substring(0, 34) + '...' }</td> |
|
||||
<td>{ address.amount }</td> |
|
||||
<td></td> |
|
||||
</tr> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export const WalletsNativeReceiveRender = function() { |
|
||||
return ( |
|
||||
<div> |
|
||||
<div className="col-xs-12 margin-top-20"> |
|
||||
<div className="panel nav-tabs-horizontal"> |
|
||||
<div> |
|
||||
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12"> |
|
||||
<div className="panel"> |
|
||||
<header className="panel-heading"> |
|
||||
<div className="panel-actions"> |
|
||||
<div |
|
||||
className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') } |
|
||||
onClick={ this.openDropMenu }> |
|
||||
<a className="dropdown-toggle white btn btn-warning"> |
|
||||
<i className="icon md-arrows margin-right-10"></i> |
|
||||
{ translate('INDEX.GET_NEW_ADDRESS') } |
|
||||
<span className="caret"></span> |
|
||||
</a> |
|
||||
<ul className="dropdown-menu dropdown-menu-right"> |
|
||||
<li> |
|
||||
<a onClick={ () => this.getNewAddress('public') }> |
|
||||
<i className="icon fa-eye"></i> |
|
||||
{ translate('INDEX.TRANSPARENT_ADDRESS') } |
|
||||
</a> |
|
||||
</li> |
|
||||
<li> |
|
||||
<a onClick={ () => this.getNewAddress('private') }> |
|
||||
<i className="icon fa-eye-slash"></i> |
|
||||
{ translate('INDEX.PRIVATE_Z_ADDRESS') } |
|
||||
</a> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</div> |
|
||||
<h3 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h3> |
|
||||
</header> |
|
||||
<div className="panel-body"> |
|
||||
<table className="table table-hover dataTable table-striped"> |
|
||||
<thead> |
|
||||
<tr> |
|
||||
<th>{ translate('INDEX.TYPE') }</th> |
|
||||
<th>{ translate('INDEX.ADDRESS') }</th> |
|
||||
<th>{ translate('INDEX.AMOUNT') }</th> |
|
||||
</tr> |
|
||||
</thead> |
|
||||
<tbody> |
|
||||
{ this.renderAddressList('public') } |
|
||||
{ this.renderAddressList('private') } |
|
||||
</tbody> |
|
||||
<tfoot> |
|
||||
<tr> |
|
||||
<th>{ translate('INDEX.TYPE') }</th> |
|
||||
<th>{ translate('INDEX.ADDRESS') }</th> |
|
||||
<th>{ translate('INDEX.AMOUNT') }</th> |
|
||||
</tr> |
|
||||
</tfoot> |
|
||||
</table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
@ -0,0 +1,139 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../../translate/translate'; |
||||
|
import { |
||||
|
ChainActivationNotificationRender, |
||||
|
WalletsNativeSyncProgressRender |
||||
|
} from './walletsNativeSyncProgress.render'; |
||||
|
|
||||
|
class WalletsNativeSyncProgress extends React.Component { |
||||
|
renderSyncPercentagePlaceholder() { |
||||
|
if (this.props.Dashboard.progress && |
||||
|
this.props.Dashboard.progress.blocks > 0 && |
||||
|
this.props.Dashboard.progress.longestchain === 0) { |
||||
|
return ( |
||||
|
<div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent"> |
||||
|
<span className="full-width">{ translate('INDEX.SYNC_ERR_LONGESTCHAIN') }</span> |
||||
|
</div> |
||||
|
); |
||||
|
} else if (this.props.Dashboard.progress && this.props.Dashboard.progress.blocks === 0) { |
||||
|
return ( |
||||
|
<div className="progress-bar progress-bar-info progress-bar-striped active full-width font-size-80-percent"> |
||||
|
<span className="full-width">{ translate('INDEX.SYNC_ERR_BLOCKS') }</span> |
||||
|
</div> |
||||
|
); |
||||
|
} else { |
||||
|
if (this.props.Dashboard.progress && |
||||
|
this.props.Dashboard.progress.blocks) { |
||||
|
const syncPercentage = (parseFloat(parseInt(this.props.Dashboard.progress.blocks, 10) * 100 / parseInt(this.props.Dashboard.progress.longestchain, 10)).toFixed(2) + '%').replace('NaN', 0); |
||||
|
|
||||
|
return ( |
||||
|
<div |
||||
|
className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent" |
||||
|
style={{ width: syncPercentage }}> |
||||
|
<span style={{ width: syncPercentage }}>{ syncPercentage }</span> | { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.longestchain } | { translate('INDEX.CONNECTIONS') }: { this.props.Dashboard.progress.connections } |
||||
|
</div> |
||||
|
); |
||||
|
} else { |
||||
|
return ( |
||||
|
<div |
||||
|
className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent" |
||||
|
style={{ width: '100%' }}> |
||||
|
<span style={{ width: '100%' }}>Loading blocks...it can take up to 15 min to load blocks</span> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
renderActivatingBestChainProgress() { |
||||
|
if (this.props.Settings && |
||||
|
this.props.Settings.debugLog) { |
||||
|
console.log('debugLog'); |
||||
|
if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1 && |
||||
|
!this.props.Dashboard.progress && |
||||
|
!this.props.Dashboard.progress.blocks) { |
||||
|
const temp = this.props.Settings.debugLog.split(' '); |
||||
|
let currentBestChain; |
||||
|
let currentProgress; |
||||
|
|
||||
|
for (let i = 0; i < temp.length; i++) { |
||||
|
if (temp[i].indexOf('height=') > -1) { |
||||
|
currentBestChain = temp[i].replace('height=', ''); |
||||
|
} |
||||
|
if (temp[i].indexOf('progress=') > -1) { |
||||
|
currentProgress = Number(temp[i].replace('progress=', '')) * 100; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// fallback to local data if remote node is inaccessible
|
||||
|
if (this.props.Dashboard.progress.remoteKMDNode && |
||||
|
!this.props.Dashboard.progress.remoteKMDNode.blocks) { |
||||
|
return ( |
||||
|
`: ${currentProgress}% (activating)` |
||||
|
); |
||||
|
} else { |
||||
|
if (this.props.Dashboard.progress.remoteKMDNode && |
||||
|
this.props.Dashboard.progress.remoteKMDNode.blocks) { |
||||
|
return( |
||||
|
`: ${Math.floor(currentBestChain * 100 / this.props.Dashboard.progress.remoteKMDNode.blocks)}% (blocks ${currentBestChain} / ${this.props.Dashboard.progress.remoteKMDNode.blocks})` |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} else if ( |
||||
|
this.props.Settings.debugLog.indexOf('Still rescanning') > -1 && |
||||
|
!this.props.Dashboard.progress || |
||||
|
!this.props.Dashboard.progress.blocks |
||||
|
) { |
||||
|
const temp = this.props.Settings.debugLog.split(' '); |
||||
|
let currentProgress; |
||||
|
|
||||
|
for (let i = 0; i < temp.length; i++) { |
||||
|
if (temp[i].indexOf('Progress=') > -1) { |
||||
|
currentProgress = Number(temp[i].replace('Progress=', '')) * 100; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
`: ${currentProgress}% (rescanning blocks)` |
||||
|
); |
||||
|
} else { |
||||
|
return ( |
||||
|
<span> (downloading blocks)</span> |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
renderLB(_translationID) { |
||||
|
const _translationComponents = translate(_translationID).split('<br>'); |
||||
|
|
||||
|
return _translationComponents.map((_translation) => |
||||
|
<span> |
||||
|
{ _translation } |
||||
|
<br /> |
||||
|
</span> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
renderChainActivationNotification() { |
||||
|
if (this.props.Dashboard.progress) { |
||||
|
if ((!this.props.Dashboard.progress.blocks && !this.props.Dashboard.progress.longestchain) || |
||||
|
(this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain)) { |
||||
|
return ChainActivationNotificationRender.call(this); |
||||
|
} |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
if (this.props && |
||||
|
this.props.Dashboard) { |
||||
|
return WalletsNativeSyncProgressRender.call(this); |
||||
|
} |
||||
|
|
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default WalletsNativeSyncProgress; |
||||
@ -0,0 +1,34 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../../translate/translate'; |
||||
|
|
||||
|
export const ChainActivationNotificationRender = function() { |
||||
|
return ( |
||||
|
<div className="alert alert-info alert-dismissible margin-bottom-40"> |
||||
|
<button |
||||
|
className="close" |
||||
|
type="button"> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<h4> |
||||
|
{ translate('INDEX.ACTIVATING_CHAIN') } |
||||
|
{ this.renderActivatingBestChainProgress() } |
||||
|
</h4> |
||||
|
<p>{ this.renderLB('INDEX.KMD_STARTED') }</p> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const WalletsNativeSyncProgressRender = function() { |
||||
|
return ( |
||||
|
<div> |
||||
|
{ this.renderChainActivationNotification() } |
||||
|
<div className="row sync-progress-container"> |
||||
|
<div className="col-xs-12"> |
||||
|
<div className="progress"> |
||||
|
{ this.renderSyncPercentagePlaceholder() } |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
Loading…
Reference in new issue