From 84f1979530f06da416ad3a86e024c6d37448e870 Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Wed, 6 Sep 2017 23:20:52 +0300 Subject: [PATCH] Split settings tabs to components --- react/src/actions/actions/settings.js | 2 +- .../dashboard/accordion/accordion.js | 140 +++++++++ .../dashboard/accordion/loginModal.render.js | 67 ++++ .../dashboard/settings/settings.addNodeTab.js | 201 ++++++++++++ .../settings.addNodeforCoin.render.js | 91 ++++++ .../dashboard/settings/settings.appInfoTab.js | 91 ++++++ .../settings/settings.appUpdateTab.js | 136 ++++++++ .../settings/settings.fiatCurrency.js | 24 ++ .../components/dashboard/settings/settings.js | 94 ++---- .../dashboard/settings/settings.render.js | 293 +++--------------- .../settings/settings.walletBackupTab.js | 24 ++ .../dashboard/settings/settings.walletInfo.js | 61 ++++ 12 files changed, 902 insertions(+), 322 deletions(-) create mode 100755 react/src/components/dashboard/accordion/accordion.js create mode 100644 react/src/components/dashboard/accordion/loginModal.render.js create mode 100644 react/src/components/dashboard/settings/settings.addNodeTab.js create mode 100644 react/src/components/dashboard/settings/settings.addNodeforCoin.render.js create mode 100644 react/src/components/dashboard/settings/settings.appInfoTab.js create mode 100644 react/src/components/dashboard/settings/settings.appUpdateTab.js create mode 100644 react/src/components/dashboard/settings/settings.fiatCurrency.js create mode 100644 react/src/components/dashboard/settings/settings.walletBackupTab.js create mode 100644 react/src/components/dashboard/settings/settings.walletInfo.js diff --git a/react/src/actions/actions/settings.js b/react/src/actions/actions/settings.js index f4cdab3..1e0d9dc 100644 --- a/react/src/actions/actions/settings.js +++ b/react/src/actions/actions/settings.js @@ -269,7 +269,7 @@ export function getPeersListState(json) { return { type: GET_PEERS_LIST, - supernetPeers: json && json.supernet[0] ? json.supernet : null, + supernetPeers: json && !json.error && json.supernet[0] ? json.supernet : null, rawPeers: peersList, } } diff --git a/react/src/components/dashboard/accordion/accordion.js b/react/src/components/dashboard/accordion/accordion.js new file mode 100755 index 0000000..631f815 --- /dev/null +++ b/react/src/components/dashboard/accordion/accordion.js @@ -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
+
+ {i.header} +
+ {i.content} +
+ }); + + return ( +
+ {contents} +
+ ); + } +}); + +export default Accordion; \ No newline at end of file diff --git a/react/src/components/dashboard/accordion/loginModal.render.js b/react/src/components/dashboard/accordion/loginModal.render.js new file mode 100644 index 0000000..6933a95 --- /dev/null +++ b/react/src/components/dashboard/accordion/loginModal.render.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { translate } from '../../../translate/translate'; + +const LoginModalRender = function () { + return ( +
+ +
+ ); +}; + +export default LoginModalRender; \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.addNodeTab.js b/react/src/components/dashboard/settings/settings.addNodeTab.js new file mode 100644 index 0000000..796f239 --- /dev/null +++ b/react/src/components/dashboard/settings/settings.addNodeTab.js @@ -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) => +
{ ip }
+ ); + } 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) => +
{ ip }
+ ); + } 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 ( +
+
+
+
+

{ translate('INDEX.USE_THIS_SECTION') }

+
+
+
+ +
+
+
+ +
+
+
+ SuperNET Peers: +
+

{ this.renderSNPeersList() }

+
+ Raw Peers: +
+

{ this.renderPeersList() }

+
+
+ +
+
+

{ translate('INDEX.USE_THIS_SECTION_PEER') }

+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+ ); + }; +} + +const mapStateToProps = (state) => { + return { + Settings: state.Settings, + }; + +}; + +export default connect(mapStateToProps)(AppNodeTab); \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.addNodeforCoin.render.js b/react/src/components/dashboard/settings/settings.addNodeforCoin.render.js new file mode 100644 index 0000000..14236e7 --- /dev/null +++ b/react/src/components/dashboard/settings/settings.addNodeforCoin.render.js @@ -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'; + +
this.openTab('AddNodeforCoin', 1) } + className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> +
+ + { translate('INDEX.ADD_NODE') } + +
+
+
+
+
+
+

{ translate('INDEX.USE_THIS_SECTION') }

+
+
+
+ +
+
+
+ +
+
+
+ SuperNET Peers: +
+

{ this.renderSNPeersList() }

+
+ Raw Peers: +
+

{ this.renderPeersList() }

+
+
+ +
+
+

{ translate('INDEX.USE_THIS_SECTION_PEER') }

+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
\ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.appInfoTab.js b/react/src/components/dashboard/settings/settings.appInfoTab.js new file mode 100644 index 0000000..48122e5 --- /dev/null +++ b/react/src/components/dashboard/settings/settings.appInfoTab.js @@ -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 ( +
+
+
+
{ translate('SETTINGS.APP_RELEASE') }
+
+ { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } +
+
+ { translate('SETTINGS.VERSION') }: { `${this.props.Settings.appInfo.releaseInfo.version.replace('version=', '')}-beta` } +
+
+ { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } +
+
+
+
+
+
{ translate('SETTINGS.SYS_INFO') }
+
+ { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } +
+
+ { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } +
+
+ { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } +
+
+ { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } +
+
+ { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } +
+
+ { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } +
+
+ { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } +
+
+
+
+
+
{ translate('SETTINGS.LOCATIONS') }
+
+ { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } +
+
+ { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } +
+
+ Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } +
+
+ Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } +
+
+ Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } +
+
+ Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } +
+
+ Komodo wallet.dat: { this.props.Settings.appInfo.dirs.komodoDir } +
+
+
+
+ ); + }; +} + +const mapStateToProps = (state) => { + return { + Settings: state.Settings, + }; + +}; + +export default connect(mapStateToProps)(AppInfoTab); \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.appUpdateTab.js b/react/src/components/dashboard/settings/settings.appUpdateTab.js new file mode 100644 index 0000000..0319d9e --- /dev/null +++ b/react/src/components/dashboard/settings/settings.appUpdateTab.js @@ -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( +
{ this.state.updateLog[i] }
+ ); + } + + if (_updateLogLength) { + return ( +
+
+
{ translate('SETTINGS.PROGRESS') }:
+
{ items }
+
-1 ? 'progress progress-sm' : 'hide' }> +
+
+
+
+ ); + } else { + return null; + } + } + + render() { + return ( +
+
+
{ translate('INDEX.UI_UPDATE') }
+
+ + +
+
+
+
{ translate('INDEX.BINS_UPDATE') }
+
+ + +
+
+
+ { this.renderUpdateStatus() } +
+
+ ); + }; +} +const mapStateToProps = (state) => { + return { + Settings: state.Settings, + }; + +}; + +export default connect(mapStateToProps)(AppUpdateTab); diff --git a/react/src/components/dashboard/settings/settings.fiatCurrency.js b/react/src/components/dashboard/settings/settings.fiatCurrency.js new file mode 100644 index 0000000..28c4310 --- /dev/null +++ b/react/src/components/dashboard/settings/settings.fiatCurrency.js @@ -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 ( +
Fiat currency settings section to be updated soon.
+ ); + }; +} + +const mapStateToProps = (state) => { + return { + Settings: state.Settings, + }; + +}; + +export default connect(mapStateToProps)(FiatCurrencyTab); \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.js b/react/src/components/dashboard/settings/settings.js index 8db8120..9fe0631 100644 --- a/react/src/components/dashboard/settings/settings.js +++ b/react/src/components/dashboard/settings/settings.js @@ -22,11 +22,16 @@ import { import Store from '../../../store'; import { - AppInfoTabRender, SettingsRender, - AppUpdateTabRender, } from './settings.render'; +import AppUpdateTab from './settings.appUpdateTab'; +import AppInfoTab from './settings.appInfoTab'; +import WalletInfoTab from './settings.walletInfo'; +import AddNodeTab from './settings.addNodeTab'; +import WalletBackupTab from './settings.walletBackupTab'; +import FiatCurrencyTab from './settings.fiatCurrency'; + import { SocketProvider } from 'socket.io-react'; import io from 'socket.io-client'; @@ -72,10 +77,6 @@ class Settings extends React.Component { // this.updateInputSettings = this.updateInputSettings.bind(this); this.importWifKey = this.importWifKey.bind(this); this.readDebugLog = this.readDebugLog.bind(this); - this.checkNodes = this.checkNodes.bind(this); - this.addNode = this.addNode.bind(this); - this.renderPeersList = this.renderPeersList.bind(this); - this.renderSNPeersList = this.renderSNPeersList.bind(this); this._saveAppConfig = this._saveAppConfig.bind(this); this._resetAppConfig = this._resetAppConfig.bind(this); this.exportWifKeysRaw = this.exportWifKeysRaw.bind(this); @@ -83,6 +84,10 @@ class Settings extends React.Component { this._checkForUpdateUIPromise = this._checkForUpdateUIPromise.bind(this); this._updateUIPromise = this._updateUIPromise.bind(this); this.updateTabDimensions = this.updateTabDimensions.bind(this); + this.renderWalletInfo = this.renderWalletInfo.bind(this); + this.renderAddNode = this.renderAddNode.bind(this); + this.renderWalletBackup = this.renderWalletBackup.bind(this); + this.renderFiatCurrency = this.renderFiatCurrency.bind(this); } updateTabDimensions() { @@ -102,7 +107,7 @@ class Settings extends React.Component { try { const _appConfigSchema = window.require('electron').remote.getCurrentWindow().appConfigSchema; const _appSettings = this.props.Settings.appSettings ? this.props.Settings.appSettings : Object.assign({}, window.require('electron').remote.getCurrentWindow().appConfig); - console.warn(_appConfigSchema); + this.setState(Object.assign({}, this.state, { appConfigSchema: _appConfigSchema, appSettings: _appSettings, @@ -351,75 +356,33 @@ class Settings extends React.Component { ); } - checkNodes() { - if (this.state.getPeersCoin) { - Store.dispatch(getPeersList(this.state.getPeersCoin.split('|')[0])); - } - } - - addNode() { - if (this.state.addNodeCoin) { - Store.dispatch( - addPeerNode( - this.state.addNodeCoin.split('|')[0], - this.state.addPeerIP - ) - ); - } - } - - 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) => -
{ ip }
- ); - } else { - return null; - } - } else { - return null; - } - } - renderAppInfoTab() { const releaseInfo = this.props.Settings.appInfo && this.props.Settings.appInfo.releaseInfo; if (releaseInfo) { - return AppInfoTabRender.call(this); + return } return null; } renderAppUpdateTab() { - return AppUpdateTabRender.call(this); + return } - renderSNPeersList() { - if (this.state.getPeersCoin) { - const _getPeersCoin = this.state.getPeersCoin; - const _supernetPeers = this.props.Settings.supernetPeers; - const coin = _getPeersCoin.split('|')[0]; + renderWalletInfo() { + return + } + renderAddNode() { + return + } - if (_supernetPeers && - _getPeersCoin && - _supernetPeers[coin]) { - return _supernetPeers[coin].map((ip) => -
{ ip }
- ); - } else { - return null; - } - } else { - return null; - } + renderWalletBackup() { + return + } + + renderFiatCurrency() { + return } updateInputSettings(e, parentKey, childKey) { @@ -500,10 +463,9 @@ class Settings extends React.Component { renderConfigEditForm() { let items = []; const _appConfig = this.state.appSettings; - for (let key in _appConfig) { - if (typeof _appConfig[key] === 'object') { - if (this.state.appConfigSchema[key] && this.state.appConfigSchema[key].display) { + if (this.state.appConfigSchema[key] && typeof _appConfig[key] === 'object') { + if (this.state.appConfigSchema[key].display) { items.push( diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js index 227a581..40d8fad 100644 --- a/react/src/components/dashboard/settings/settings.render.js +++ b/react/src/components/dashboard/settings/settings.render.js @@ -1,146 +1,5 @@ import React from 'react'; import { translate } from '../../../translate/translate'; -import AddCoinOptionsCrypto from '../../addcoin/addcoinOptionsCrypto'; -import AddCoinOptionsAC from '../../addcoin/addcoinOptionsAC'; -import AddCoinOptionsACFiat from '../../addcoin/addcoinOptionsACFiat'; - -export const AppUpdateTabRender = function() { - return ( -
this.openTab('AppUpdate', 10) }> - -
-
-
-
{ translate('INDEX.UI_UPDATE') }
-
- - -
-
-
-
{ translate('INDEX.BINS_UPDATE') }
-
- - -
-
-
- { this.renderUpdateStatus() } -
-
-
-
- ); -}; - -export const AppInfoTabRender = function() { - return ( -
this.openTab('AppInfo', 8) }> - -
-
-
-
-
{ translate('SETTINGS.APP_RELEASE') }
-
- { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } -
-
- { translate('SETTINGS.VERSION') }: { `${this.props.Settings.appInfo.releaseInfo.version.replace('version=', '')}-beta` } -
-
- { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } -
-
-
-
-
-
{ translate('SETTINGS.SYS_INFO') }
-
- { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } -
-
- { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } -
-
- { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } -
-
- { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } -
-
- { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } -
-
- { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } -
-
- { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } -
-
-
-
-
-
{ translate('SETTINGS.LOCATIONS') }
-
- { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } -
-
- { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } -
-
- Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } -
-
- Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } -
-
- Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } -
-
- Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } -
-
- Komodo wallet.dat: { this.props.Settings.appInfo.dirs.komodoDir } -
-
-
-
-
-
- ); -}; export const SettingsRender = function() { return ( @@ -156,6 +15,7 @@ export const SettingsRender = function() {
+ { !this.props.disableWalletSpecificUI &&
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{ translate('INDEX.KEY') }{ translate('INDEX.VALUE') }
pubkey{ this.props.Main.activeHandle.pubkey }
btcpubkey{ this.props.Main.activeHandle.btcpubkey }
rmd160{ this.props.Main.activeHandle.rmd160 }
NXT{ this.props.Main.activeHandle.NXT }
notary{ this.props.Main.activeHandle.notary }
status{ this.props.Main.activeHandle.status }
-
+ { this.renderWalletInfo() }
} @@ -221,77 +46,7 @@ export const SettingsRender = function() {
-
-
-
-
-

{ translate('INDEX.USE_THIS_SECTION') }

-
-
-
- -
-
-
- -
-
-
- SuperNET Peers: -
-

{ this.renderSNPeersList() }

-
- Raw Peers: -
-

{ this.renderPeersList() }

-
-
- -
-
-

{ translate('INDEX.USE_THIS_SECTION_PEER') }

-
-
-
- -
-
- -
-
-
- -
-
-
-
+ { this.renderAddNode() }
} @@ -308,8 +63,8 @@ export const SettingsRender = function() {
-
Wallet Backup section to be updated soon.
-
+ { this.renderWalletBackup() } + } { !this.props.disableWalletSpecificUI && @@ -325,8 +80,7 @@ export const SettingsRender = function() {
-
Fiat currency settings section to be updated soon.
-
+ { this.renderFiatCurrency() } } { !this.props.disableWalletSpecificUI && @@ -553,7 +307,22 @@ export const SettingsRender = function() { - { this.renderAppInfoTab() } + +
this.openTab('AppInfo', 8) }> + +
+ { this.renderAppInfoTab() } +
+
{ this.props.Main && this.props.Main.coins.native &&
} - { this.renderAppUpdateTab() } - +
this.openTab('AppUpdate', 10) }> + +
+ { this.renderAppUpdateTab() } +
+
+
Wallet Backup section to be updated soon.
+ ); + }; +} + +const mapStateToProps = (state) => { + return { + Settings: state.Settings, + }; + +}; + +export default connect(mapStateToProps)(WalletBackupTab); \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.walletInfo.js b/react/src/components/dashboard/settings/settings.walletInfo.js new file mode 100644 index 0000000..e0c12eb --- /dev/null +++ b/react/src/components/dashboard/settings/settings.walletInfo.js @@ -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 ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{ translate('INDEX.KEY') }{ translate('INDEX.VALUE') }
pubkey{ this.props.Main.activeHandle.pubkey }
btcpubkey{ this.props.Main.activeHandle.btcpubkey }
rmd160{ this.props.Main.activeHandle.rmd160 }
NXT{ this.props.Main.activeHandle.NXT }
notary{ this.props.Main.activeHandle.notary }
status{ this.props.Main.activeHandle.status }
+
+ ); + }; +} + +const mapStateToProps = (state) => { + return { + Main: { + activeHandle: state.Main.activeHandle, + } + }; + +}; + +export default connect(mapStateToProps)(WalletInfoTab); \ No newline at end of file