Miika Turunen
8 years ago
12 changed files with 902 additions and 322 deletions
@ -0,0 +1,140 @@ |
|||
import React from 'react'; |
|||
import AnimateMixin from 'react-animate'; |
|||
/** |
|||
* Accordion object that maintains a list of content containers and their collapsed or expanded state |
|||
* @type {*|Function} |
|||
*/ |
|||
class Accordion extends React.Component { |
|||
/** |
|||
* Mixin the AnimateMixin |
|||
*/ |
|||
mixins: [AnimateMixin], |
|||
/** |
|||
* Get the initial state |
|||
* @returns {{itemMap: {}}} |
|||
*/ |
|||
getInitialState: function() { |
|||
//map item indexes and their initial states
|
|||
var itemMap = this.props.items.map(function( i, idx ) { |
|||
return { |
|||
animating: false, |
|||
open: idx === 0, |
|||
content:i.content, |
|||
header:i.header |
|||
}; |
|||
}); |
|||
|
|||
return { |
|||
itemMap: itemMap |
|||
} |
|||
|
|||
}, |
|||
/** |
|||
* Event handler for clicking on an accordion header |
|||
* @param idx |
|||
* @param event |
|||
*/ |
|||
toggle: function( idx, event ) { |
|||
var _this = this, currentHeight = this.getParentHeight(event), |
|||
scrollHeight = this.getParentScrollHeight(event), newHeight, |
|||
itemMap = this.state.itemMap; |
|||
|
|||
//toggle animation for this item
|
|||
itemMap[idx].animating = true; |
|||
this.setState({itemMap: itemMap}); |
|||
|
|||
//choose the right the new height
|
|||
newHeight = currentHeight >= 25 ? "25px" : scrollHeight + "px"; |
|||
|
|||
//send off to the animation library
|
|||
this.animate( |
|||
idx + "toggle", |
|||
{height: currentHeight + "px"}, |
|||
{height: newHeight}, |
|||
250, |
|||
{ |
|||
//when it's done, toggle animating bool
|
|||
onComplete: function() { |
|||
var newMap = _this.state.itemMap; |
|||
newMap[idx].animating = false; |
|||
newMap[idx].open = newHeight !== "25px"; |
|||
_this.setState({itemMap: newMap}); |
|||
} |
|||
} |
|||
); |
|||
|
|||
}, |
|||
/** |
|||
* Get the clientHeight of the parent element from a triggered event |
|||
* @param event |
|||
* @returns {number} |
|||
*/ |
|||
getParentHeight: function( event ) { |
|||
return event.target.parentNode.clientHeight; |
|||
}, |
|||
/** |
|||
* Get the scrollHeight of the parent element from a trigger event |
|||
* @param event |
|||
* @returns {number} |
|||
*/ |
|||
getParentScrollHeight: function( event ) { |
|||
return event.target.parentNode.scrollHeight; |
|||
}, |
|||
/** |
|||
* Define our default header style |
|||
* @returns {{height: string, backgroundColor: string, cursor: string}} |
|||
*/ |
|||
getItemHeaderStyle: function() { |
|||
return { |
|||
height: "25px", |
|||
backgroundColor: "#f9f9f9", |
|||
cursor: "pointer" |
|||
}; |
|||
}, |
|||
/** |
|||
*The default style for each accordion item |
|||
*/ |
|||
getDefaultItemStyle: function() { |
|||
return { |
|||
borderRadius: "3px", |
|||
marginBottom: "5px", |
|||
overflow: "hidden", |
|||
border: "1px solid #cecece" |
|||
} |
|||
}, |
|||
/** |
|||
* Render |
|||
* @returns {XML} |
|||
*/ |
|||
render: function() { |
|||
var _this = this; |
|||
var items = this.props.items; |
|||
|
|||
//add the content to the accordion container
|
|||
var contents = items.map(function( i, idx ) { |
|||
|
|||
//calculate the current style
|
|||
var itemStyle = _this.getDefaultItemStyle(); |
|||
if ( _this.state.itemMap[idx].animating ) { |
|||
itemStyle.height = _this.getAnimatedStyle(idx + "toggle").height; |
|||
} else { |
|||
itemStyle.height = _this.state.itemMap[idx].open ? "auto" : "25px" |
|||
} |
|||
|
|||
return <div style={itemStyle} className={_this.props.itemClassName} key={idx}> |
|||
<div style={_this.getItemHeaderStyle()} onClick={_this.toggle.bind(_this, idx)}> |
|||
{i.header} |
|||
</div> |
|||
{i.content} |
|||
</div> |
|||
}); |
|||
|
|||
return ( |
|||
<div className={this.props.className}> |
|||
{contents} |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
export default Accordion; |
|||
@ -0,0 +1,67 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
|
|||
const LoginModalRender = function () { |
|||
return ( |
|||
<div> |
|||
<div |
|||
className={ 'modal modal-3d-sign add-coin-modal ' + (this.state.display ? 'show in' : 'fade hide') } |
|||
id="AddCoinDilogModel-login" |
|||
aria-hidden="true" |
|||
aria-labelledby="AddCoinDilogModel-login" |
|||
role="dialog" |
|||
tabIndex="-1"> |
|||
<div className="modal-dialog modal-center modal-lg"> |
|||
<div className="modal-content"> |
|||
<div className="modal-header bg-orange-a400 wallet-send-header"> |
|||
<button |
|||
type="button" |
|||
className="close white" |
|||
aria-label="Close" |
|||
onClick={ this.dismiss }> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
<h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4> |
|||
</div> |
|||
<div className="modal-body"> |
|||
<div id="wallet-login"> |
|||
<div className="page animsition vertical-align text-center fade-in"> |
|||
<div className="page-content vertical-align-middle"> |
|||
<div className="brand"> |
|||
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" /> |
|||
</div> |
|||
<div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }> |
|||
<h4 className="color-white" id="login-welcome">{ translate('INDEX.WELCOME_LOGIN') }</h4> |
|||
<div className="login-form"> |
|||
<div className="form-group form-material floating"> |
|||
<input |
|||
type={ this.state.seedInputVisibility ? 'text' : 'password' } |
|||
className="form-control" |
|||
name="loginPassphrase" |
|||
id="password" |
|||
onChange={ this.updateInput } /> |
|||
<i |
|||
className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' } |
|||
onClick={ this.toggleSeedInputVisibility }></i> |
|||
<label className="floating-label" htmlFor="inputPassword">{translate('INDEX.WALLET_SEED')}</label> |
|||
</div> |
|||
<button |
|||
type="button" |
|||
className="btn btn-primary btn-block" |
|||
id="loginbtn" |
|||
onClick={ this.loginSeed } |
|||
disabled={ this.isLoginPassphraseEmpty() }>{ translate('INDEX.SIGN_IN') }</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default LoginModalRender; |
|||
@ -0,0 +1,201 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
import { connect } from 'react-redux'; |
|||
|
|||
import { |
|||
addPeerNode, |
|||
getPeersList, |
|||
getPeersListState, |
|||
} from '../../../actions/actionCreators'; |
|||
import Store from '../../../store'; |
|||
|
|||
import AddCoinOptionsCrypto from '../../addcoin/addcoinOptionsCrypto'; |
|||
import AddCoinOptionsAC from '../../addcoin/addcoinOptionsAC'; |
|||
import AddCoinOptionsACFiat from '../../addcoin/addcoinOptionsACFiat'; |
|||
|
|||
class AppNodeTab extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
addNodeCoin: null, |
|||
addPeerIP: null, |
|||
getPeersCoin: null, |
|||
trimPassphraseTimer: null, |
|||
wifkeysPassphrase:'', |
|||
}; |
|||
this.renderSNPeersList = this.renderSNPeersList.bind(this); |
|||
this.renderPeersList = this.renderPeersList.bind(this); |
|||
this.checkNodes = this.checkNodes.bind(this); |
|||
this.addNode = this.addNode.bind(this); |
|||
this.updateInput = this.updateInput.bind(this); |
|||
} |
|||
|
|||
renderSNPeersList() { |
|||
if (this.state.getPeersCoin) { |
|||
const _getPeersCoin = this.state.getPeersCoin; |
|||
const _supernetPeers = this.props.Settings.supernetPeers; |
|||
const coin = _getPeersCoin.split('|')[0]; |
|||
|
|||
if (_supernetPeers && |
|||
_getPeersCoin && |
|||
_supernetPeers[coin]) { |
|||
return _supernetPeers[coin].map((ip) => |
|||
<div key={ ip }>{ ip }</div> |
|||
); |
|||
} else { |
|||
return null; |
|||
} |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
renderPeersList() { |
|||
if (this.state.getPeersCoin) { |
|||
const _getPeersCoin = this.state.getPeersCoin; |
|||
const _rawPeers = this.props.Settings.rawPeers; |
|||
const coin = _getPeersCoin.split('|')[0]; |
|||
|
|||
if (_rawPeers && |
|||
_getPeersCoin && |
|||
_rawPeers[coin]) { |
|||
return _rawPeers[coin].map((ip) => |
|||
<div key={ ip }>{ ip }</div> |
|||
); |
|||
} else { |
|||
return null; |
|||
} |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
checkNodes() { |
|||
if (this.state.getPeersCoin) { |
|||
console.warn(this.state.getPeersCoin.split('|')[0]); |
|||
Store.dispatch(getPeersList(this.state.getPeersCoin.split('|')[0])); |
|||
} |
|||
} |
|||
|
|||
addNode() { |
|||
if (this.state.addNodeCoin) { |
|||
Store.dispatch( |
|||
addPeerNode( |
|||
this.state.addNodeCoin.split('|')[0], |
|||
this.state.addPeerIP |
|||
) |
|||
); |
|||
} |
|||
} |
|||
|
|||
updateInput(e) { |
|||
if (e.target.name === 'wifkeysPassphrase') { |
|||
// remove any empty chars from the start/end of the string
|
|||
const newValue = e.target.value; |
|||
|
|||
clearTimeout(this.state.trimPassphraseTimer); |
|||
|
|||
const _trimPassphraseTimer = setTimeout(() => { |
|||
this.setState({ |
|||
wifkeysPassphrase: newValue ? newValue.trim() : '', // hardcoded field name
|
|||
}); |
|||
}, 2000); |
|||
|
|||
this.resizeLoginTextarea(); |
|||
|
|||
this.setState({ |
|||
trimPassphraseTimer: _trimPassphraseTimer, |
|||
[e.target.name]: newValue, |
|||
}); |
|||
} else { |
|||
this.setState({ |
|||
[e.target.name]: e.target.value, |
|||
}); |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="panel-body"> |
|||
<div className="row"> |
|||
<div className="col-sm-6"> |
|||
<div className="col-sm-12"> |
|||
<p>{ translate('INDEX.USE_THIS_SECTION') }</p> |
|||
</div> |
|||
<div className="col-sm-8 col-xs-12"> |
|||
<div className="form-group"> |
|||
<select |
|||
className="form-control form-material" |
|||
name="getPeersCoin" |
|||
onChange={ this.updateInput }> |
|||
<option>{ translate('INDEX.SELECT_COIN') }</option> |
|||
<AddCoinOptionsCrypto /> |
|||
<AddCoinOptionsAC /> |
|||
<AddCoinOptionsACFiat /> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-4 col-xs-12 text-align-center"> |
|||
<button |
|||
type="button" |
|||
className="btn btn-primary waves-effect waves-light" |
|||
onClick={ this.checkNodes }>{ translate('INDEX.CHECK_NODES') }</button> |
|||
</div> |
|||
<div className="col-sm-12"> |
|||
<h5> |
|||
SuperNET Peers: |
|||
</h5> |
|||
<p>{ this.renderSNPeersList() }</p> |
|||
<h5> |
|||
Raw Peers: |
|||
</h5> |
|||
<p>{ this.renderPeersList() }</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="col-sm-6"> |
|||
<div className="col-sm-12"> |
|||
<p>{ translate('INDEX.USE_THIS_SECTION_PEER') }</p> |
|||
</div> |
|||
<div className="col-sm-8 col-xs-12"> |
|||
<div className="form-group"> |
|||
<select |
|||
className="form-control form-material" |
|||
name="addNodeCoin" |
|||
onChange={ this.updateInput }> |
|||
<option>{ translate('INDEX.SELECT_COIN') }</option> |
|||
<AddCoinOptionsCrypto /> |
|||
<AddCoinOptionsAC /> |
|||
<AddCoinOptionsACFiat /> |
|||
</select> |
|||
</div> |
|||
<div className="form-group"> |
|||
<input |
|||
type="text" |
|||
className="form-control" |
|||
name="addPeerIP" |
|||
placeholder={ translate('SETTINGS.ADD_PEER_IP') } |
|||
onChange={ this.updateInput } /> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-4 col-xs-12 text-align-center"> |
|||
<button |
|||
type="button" |
|||
className="btn btn-primary waves-effect waves-light" |
|||
onClick={ this.addNode }>{ translate('INDEX.ADD_NODE') }</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
} |
|||
|
|||
const mapStateToProps = (state) => { |
|||
return { |
|||
Settings: state.Settings, |
|||
}; |
|||
|
|||
}; |
|||
|
|||
export default connect(mapStateToProps)(AppNodeTab); |
|||
@ -0,0 +1,91 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
import AddCoinOptionsCrypto from '../../addcoin/addcoinOptionsCrypto'; |
|||
import AddCoinOptionsAC from '../../addcoin/addcoinOptionsAC'; |
|||
import AddCoinOptionsACFiat from '../../addcoin/addcoinOptionsACFiat'; |
|||
|
|||
<div |
|||
id="AddNodeforCoin" |
|||
onClick={ () => this.openTab('AddNodeforCoin', 1) } |
|||
className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> |
|||
<div className="panel-heading"> |
|||
<a className={ 'panel-title' + (this.state.activeTab === 1 ? '' : ' collapsed') }> |
|||
<i className="icon md-plus-square"></i>{ translate('INDEX.ADD_NODE') } |
|||
</a> |
|||
</div> |
|||
<div |
|||
className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') } |
|||
style={{ height: this.state.activeTab === 1 ? `${this.state.activeTabHeight}px` : '0' }}> |
|||
<div className="panel-body"> |
|||
<div className="row"> |
|||
<div className="col-sm-6"> |
|||
<div className="col-sm-12"> |
|||
<p>{ translate('INDEX.USE_THIS_SECTION') }</p> |
|||
</div> |
|||
<div className="col-sm-8 col-xs-12"> |
|||
<div className="form-group"> |
|||
<select |
|||
className="form-control form-material" |
|||
name="getPeersCoin" |
|||
onChange={ this.updateInput }> |
|||
<option>{ translate('INDEX.SELECT_COIN') }</option> |
|||
<AddCoinOptionsCrypto /> |
|||
<AddCoinOptionsAC /> |
|||
<AddCoinOptionsACFiat /> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-4 col-xs-12 text-align-center"> |
|||
<button |
|||
type="button" |
|||
className="btn btn-primary waves-effect waves-light" |
|||
onClick={ this.checkNodes }>{ translate('INDEX.CHECK_NODES') }</button> |
|||
</div> |
|||
<div className="col-sm-12"> |
|||
<h5> |
|||
SuperNET Peers: |
|||
</h5> |
|||
<p>{ this.renderSNPeersList() }</p> |
|||
<h5> |
|||
Raw Peers: |
|||
</h5> |
|||
<p>{ this.renderPeersList() }</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="col-sm-6"> |
|||
<div className="col-sm-12"> |
|||
<p>{ translate('INDEX.USE_THIS_SECTION_PEER') }</p> |
|||
</div> |
|||
<div className="col-sm-8 col-xs-12"> |
|||
<div className="form-group"> |
|||
<select |
|||
className="form-control form-material" |
|||
name="addNodeCoin" |
|||
onChange={ this.updateInput }> |
|||
<option>{ translate('INDEX.SELECT_COIN') }</option> |
|||
<AddCoinOptionsCrypto /> |
|||
<AddCoinOptionsAC /> |
|||
<AddCoinOptionsACFiat /> |
|||
</select> |
|||
</div> |
|||
<div className="form-group"> |
|||
<input |
|||
type="text" |
|||
className="form-control" |
|||
name="addPeerIP" |
|||
placeholder={ translate('SETTINGS.ADD_PEER_IP') } |
|||
onChange={ this.updateInput } /> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-4 col-xs-12 text-align-center"> |
|||
<button |
|||
type="button" |
|||
className="btn btn-primary waves-effect waves-light" |
|||
onClick={ this.addNode }>{ translate('INDEX.ADD_NODE') }</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,91 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
import { connect } from 'react-redux'; |
|||
|
|||
class AppInfoTab extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="panel-body"> |
|||
<div className="col-sm-12 padding-top-15"> |
|||
<div className="row"> |
|||
<h5>{ translate('SETTINGS.APP_RELEASE') }</h5> |
|||
<div> |
|||
{ translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.VERSION') }: { `${this.props.Settings.appInfo.releaseInfo.version.replace('version=', '')}-beta` } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-12 padding-top-20"> |
|||
<div className="row"> |
|||
<h5>{ translate('SETTINGS.SYS_INFO') }</h5> |
|||
<div> |
|||
{ translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-12 padding-top-20"> |
|||
<div className="row"> |
|||
<h5>{ translate('SETTINGS.LOCATIONS') }</h5> |
|||
<div> |
|||
{ translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } |
|||
</div> |
|||
<div> |
|||
{ translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } |
|||
</div> |
|||
<div> |
|||
Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } |
|||
</div> |
|||
<div> |
|||
Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } |
|||
</div> |
|||
<div> |
|||
Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } |
|||
</div> |
|||
<div> |
|||
Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } |
|||
</div> |
|||
<div> |
|||
Komodo wallet.dat: { this.props.Settings.appInfo.dirs.komodoDir } |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
} |
|||
|
|||
const mapStateToProps = (state) => { |
|||
return { |
|||
Settings: state.Settings, |
|||
}; |
|||
|
|||
}; |
|||
|
|||
export default connect(mapStateToProps)(AppInfoTab); |
|||
@ -0,0 +1,136 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
import { connect } from 'react-redux'; |
|||
import Config from '../../../config'; |
|||
import { |
|||
getPeersList, |
|||
checkForUpdateUIPromise, |
|||
} from '../../../actions/actionCreators'; |
|||
|
|||
let updateProgressBar = { |
|||
patch: -1, |
|||
}; |
|||
|
|||
class AppUpdateTab extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
updatePatch: null, |
|||
updateLog: [], |
|||
}; |
|||
this._checkForUpdateUIPromise = this._checkForUpdateUIPromise.bind(this); |
|||
this._updateUIPromise = this._updateUIPromise.bind(this); |
|||
this.checkNodes = this.checkNodes.bind(this); |
|||
|
|||
} |
|||
|
|||
checkNodes() { |
|||
if (this.state.getPeersCoin) { |
|||
Store.dispatch(getPeersList(this.state.getPeersCoin.split('|')[0])); |
|||
} |
|||
} |
|||
|
|||
_updateUIPromise() { |
|||
updateProgressBar.patch = 0; |
|||
let _updateLog = []; |
|||
_updateLog.push(`${translate('INDEX.DOWNLOADING_UI_UPDATE')}...`); |
|||
this.setState(Object.assign({}, this.state, { |
|||
updateLog: _updateLog, |
|||
})); |
|||
|
|||
updateUIPromise(); |
|||
} |
|||
|
|||
_checkForUpdateUIPromise() { |
|||
let _updateLog = []; |
|||
_updateLog.push(translate('INDEX.CHECKING_UI_UPDATE')); |
|||
this.setState(Object.assign({}, this.state, { |
|||
updateLog: _updateLog, |
|||
})); |
|||
|
|||
checkForUpdateUIPromise() |
|||
.then((res) => { |
|||
let _updateLog = this.state.updateLog; |
|||
_updateLog.push(res.result === 'update' ? (`${translate('INDEX.NEW_UI_UPDATE')} ${res.version.remote}`) : translate('INDEX.YOU_HAVE_LATEST_UI')); |
|||
this.setState(Object.assign({}, this.state, { |
|||
updatePatch: res.result === 'update' ? true : false, |
|||
updateLog: _updateLog, |
|||
})); |
|||
}); |
|||
} |
|||
|
|||
renderUpdateStatus() { |
|||
let items = []; |
|||
let patchProgressBar = null; |
|||
const _updateLogLength = this.state.updateLog.length; |
|||
|
|||
for (let i = 0; i < _updateLogLength; i++) { |
|||
items.push( |
|||
<div key={ `settings-update-log-${i}` }>{ this.state.updateLog[i] }</div> |
|||
); |
|||
} |
|||
|
|||
if (_updateLogLength) { |
|||
return ( |
|||
<div style={{ minHeight: '200px' }}> |
|||
<hr /> |
|||
<h5>{ translate('SETTINGS.PROGRESS') }:</h5> |
|||
<div className="padding-bottom-15">{ items }</div> |
|||
<div className={ updateProgressBar.patch > -1 ? 'progress progress-sm' : 'hide' }> |
|||
<div |
|||
className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent" |
|||
style={{ width: `${updateProgressBar.patch}%` }}> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="panel-body"> |
|||
<div className="col-sm-4 padding-top-15"> |
|||
<h5>{ translate('INDEX.UI_UPDATE') }</h5> |
|||
<div className="padding-top-15"> |
|||
<button |
|||
type="button" |
|||
className="btn btn-info waves-effect waves-light" |
|||
onClick={ this._checkForUpdateUIPromise }>{ translate('INDEX.CHECK_FOR_UPDATE') }</button> |
|||
<button |
|||
type="button" |
|||
className="btn btn-primary waves-effect waves-light margin-left-20" |
|||
onClick={ this._updateUIPromise } |
|||
disabled={ !this.state.updatePatch }>{ translate('INDEX.UPDATE_UI_NOW') }</button> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-4 padding-top-15 hide"> |
|||
<h5>{ translate('INDEX.BINS_UPDATE') }</h5> |
|||
<div className="padding-top-15"> |
|||
<button |
|||
type="button" |
|||
className="btn btn-info waves-effect waves-light" |
|||
onClick={ this._checkForUpdateUIPromise }>{ translate('INDEX.CHECK_FOR_UPDATE') }</button> |
|||
<button |
|||
type="button" |
|||
className="btn btn-primary waves-effect waves-light margin-left-20" |
|||
onClick={ this.checkNodes }>{ translate('INDEX.UPDATE_BINS_NOW') }</button> |
|||
</div> |
|||
</div> |
|||
<div className="col-sm-12 padding-top-15"> |
|||
{ this.renderUpdateStatus() } |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
} |
|||
const mapStateToProps = (state) => { |
|||
return { |
|||
Settings: state.Settings, |
|||
}; |
|||
|
|||
}; |
|||
|
|||
export default connect(mapStateToProps)(AppUpdateTab); |
|||
@ -0,0 +1,24 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
import { connect } from 'react-redux'; |
|||
|
|||
class FiatCurrencyTab extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="panel-body">Fiat currency settings section to be updated soon.</div> |
|||
); |
|||
}; |
|||
} |
|||
|
|||
const mapStateToProps = (state) => { |
|||
return { |
|||
Settings: state.Settings, |
|||
}; |
|||
|
|||
}; |
|||
|
|||
export default connect(mapStateToProps)(FiatCurrencyTab); |
|||
@ -0,0 +1,24 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
import { connect } from 'react-redux'; |
|||
|
|||
class WalletBackupTab extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="panel-body">Wallet Backup section to be updated soon.</div> |
|||
); |
|||
}; |
|||
} |
|||
|
|||
const mapStateToProps = (state) => { |
|||
return { |
|||
Settings: state.Settings, |
|||
}; |
|||
|
|||
}; |
|||
|
|||
export default connect(mapStateToProps)(WalletBackupTab); |
|||
@ -0,0 +1,61 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../../translate/translate'; |
|||
import { connect } from 'react-redux'; |
|||
|
|||
class WalletInfoTab extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="panel-body"> |
|||
<table className="table"> |
|||
<thead> |
|||
<tr> |
|||
<th width="10%">{ translate('INDEX.KEY') }</th> |
|||
<th>{ translate('INDEX.VALUE') }</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td className="wallet-info-key">pubkey</td> |
|||
<td>{ this.props.Main.activeHandle.pubkey }</td> |
|||
</tr> |
|||
<tr> |
|||
<td className="wallet-info-key">btcpubkey</td> |
|||
<td>{ this.props.Main.activeHandle.btcpubkey }</td> |
|||
</tr> |
|||
<tr> |
|||
<td className="wallet-info-key">rmd160</td> |
|||
<td>{ this.props.Main.activeHandle.rmd160 }</td> |
|||
</tr> |
|||
<tr> |
|||
<td className="wallet-info-key">NXT</td> |
|||
<td>{ this.props.Main.activeHandle.NXT }</td> |
|||
</tr> |
|||
<tr> |
|||
<td className="wallet-info-key">notary</td> |
|||
<td>{ this.props.Main.activeHandle.notary }</td> |
|||
</tr> |
|||
<tr> |
|||
<td className="wallet-info-key">status</td> |
|||
<td>{ this.props.Main.activeHandle.status }</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
); |
|||
}; |
|||
} |
|||
|
|||
const mapStateToProps = (state) => { |
|||
return { |
|||
Main: { |
|||
activeHandle: state.Main.activeHandle, |
|||
} |
|||
}; |
|||
|
|||
}; |
|||
|
|||
export default connect(mapStateToProps)(WalletInfoTab); |
|||
Loading…
Reference in new issue