@ -20,9 +20,9 @@ import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
/ *
TODO :
1 ) pre - select active coin in add node tab
2 ) add agama config section
3 ) add fia tsection
4 ) kickstart section
2 ) add fiat section
3 ) kickstar tsection
4 ) batch export / import wallet addresses
* /
class Settings extends React . Component {
constructor ( props ) {
@ -32,16 +32,18 @@ class Settings extends React.Component {
debugLinesCount : 10 ,
debugTarget : 'iguana' ,
activeTabHeight : '10px' ,
appSettings : [ ] ,
appSettings : { } ,
} ;
this . exportWifKeys = this . exportWifKeys . bind ( this ) ;
this . updateInput = this . updateInput . bind ( this ) ;
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 ) ;
}
componentDidMount ( ) {
@ -50,10 +52,6 @@ class Settings extends React.Component {
Store . dispatch ( getAppInfo ( ) ) ;
}
_ saveAppConfig ( ) {
Store . dispatch ( saveAppConfig ) ;
}
openTab ( elemId , tab ) {
const _ height = document . querySelector ( '#' + elemId + ' .panel-collapse .panel-body' ) . offsetHeight ;
@ -201,13 +199,42 @@ class Settings extends React.Component {
}
}
updateInputSettings ( e ) {
let _ appSettings = this . state . appSettings ;
_ appSettings [ e . target . name ] = e . target . value ;
this . setState ( {
appSettings : _ appSettings ,
} ) ;
console . log ( this . state . appSettings ) ;
}
_ saveAppConfig ( ) {
const _ appSettings = this . state . appSettings ;
let _ appSettingsPristine = Object . assign ( { } , this . props . Settings . appSettings ) ;
for ( let key in _ appSettings ) {
if ( key . indexOf ( '__' ) === - 1 ) {
_ appSettingsPristine [ key ] = _ appSettings [ key ] ;
// console.log('key changed: ' + key + ', value: ' + _appSettings[key]);
} else {
const _ nestedKey = key . split ( '__' ) ;
_ appSettingsPristine [ _ nestedKey [ 0 ] ] [ _ nestedKey [ 1 ] ] = _ appSettings [ key ] ;
// console.log('key changed: ' + _nestedKey[0] + '.' + _nestedKey[1] + ', value: ' + _appSettings[key]);
}
}
// console.log('changed settings obj', _appSettingsPristine);
Store . dispatch ( saveAppConfig ( _ appSettingsPristine ) ) ;
}
renderConfigEditForm ( ) {
console . log ( this . props . Settings . appSettings ) ;
let items = [ ] ;
const _ appConfig = this . props . Settings . appSettings ;
for ( let key in this . props . Settings . appSettings ) {
if ( Object . keys ( this . props . Settings . appSettings [ key ] ) . length && key !== 'host' ) {
for ( let key in _ appConfig ) {
if ( typeof _ appConfig [ key ] === 'objec t') {
items . push (
< tr key = { ` app-settings- ${ key } ` } >
< td style = { { padding : '15px' } } >
@ -217,14 +244,14 @@ class Settings extends React.Component {
< / t r >
) ;
for ( let _ key in this . props . Settings . appSettings [ key ] ) {
for ( let _ key in _ appConfig [ key ] ) {
items . push (
< tr key = { ` app-settings- ${ key } - ${ _ key } ` } >
< td style = { { padding : '15px' , paddingLeft : '30px' } } >
{ _ key }
< / t d >
< td style = { { padding : '15px' } } >
< input type = "text" name = { ` app-settings- ${ _ key } -edit ` } defaultValue = { _ appConfig [ key ] [ _ key ] } / >
< input type = "text" name = { ` ${ key } __ ${ _ key } ` } defaultValue = { _ appConfig [ key ] [ _ key ] } onChange = { this . updateInputSettings } / >
< / t d >
< / t r >
) ;
@ -236,7 +263,7 @@ class Settings extends React.Component {
{ key }
< / t d >
< td style = { { padding : '15px' } } >
< input type = "text" name = { ` app-settings- ${ key } -edit ` } defaultValue = { _ appConfig [ key ] } / >
< input type = "text" name = { ` ${ key } ` } defaultValue = { _ appConfig [ key ] } onChange = { this . updateInputSettings } / >
< / t d >
< / t r >
) ;
@ -252,19 +279,30 @@ class Settings extends React.Component {
} ) ;
}
renderLB ( _ translationID ) {
const _ translationComponents = translate ( _ translationID ) . split ( '<br>' ) ;
return _ translationComponents . map ( ( _ translation ) =>
< span >
{ _ translation }
< br / >
< / s p a n >
) ;
}
render ( ) {
return (
< div data - animsition - in = "fade-in" data - animsition - out = "fade-out" style = { { marginLeft : '0' } } >
< div style = { { marginLeft : '0' } } >
< div className = "page-content" id = "section-iguana-wallet-settings" >
< div className = "row" id = "iguana-wallet-settings" data - plugin = "masonry" >
< div className = "row" id = "iguana-wallet-settings" >
< div className = "col-xlg-12 col-md-12" >
< div className = "row" id = "iguana-wallet-settings" data - plugin = "masonry" >
< div className = "row" id = "iguana-wallet-settings" >
< div className = "col-xlg-12 col-md-12" >
< h4 className = "font-size-14 text-uppercase" > { translate ( 'INDEX.WALLET_SETTINGS' ) } < / h 4 >
< div className = "panel-group" id = "SettingsAccordion" aria - multiselectable = "true" role = "tablist" >
< div className = "panel" id = "WalletInfo" >
< div className = "panel-heading" role = "tab" onClick = { ( ) => this . openTab ( 'WalletInfo' , 0 ) } >
< a className = { this . state . activeTab === 0 ? 'panel-title' : 'panel-title collapsed' } data - toggle = "collapse" data - parent = "#SettingsAccordion" >
< a className = { this . state . activeTab === 0 ? 'panel-title' : 'panel-title collapsed' } >
< i className = "icon md-balance-wallet" aria - hidden = "true" > < / i > { t r a n s l a t e ( ' I N D E X . W A L L E T _ I N F O ' ) }
< / a >
< / d i v >
@ -415,10 +453,10 @@ class Settings extends React.Component {
< div className = { this . state . activeTab === 4 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } style = { { height : this . state . activeTab === 4 ? this . state . activeTabHeight + 'px' : '10px' } } id = "ExportKeysTab" aria - labelledby = "ExportKeys" role = "tabpanel" >
< div className = "panel-body" >
< p >
< div > { translate ( 'INDEX.ONLY_ACTIVE_WIF_KEYS' ) } < /div><br/ >
< b >
< div > { this . renderLB ( 'INDEX.ONLY_ACTIVE_WIF_KEYS' ) } < /div><br/ >
< strong >
< i > { translate ( 'INDEX.PLEASE_KEEP_KEYS_SAFE' ) } < / i >
< / b >
< / s t r o n g >
< / p >
< div className = "col-sm-12" > < / d i v >
< form className = "wifkeys-form" method = "post" action = "javascript:" autoComplete = "off" >
@ -436,13 +474,13 @@ class Settings extends React.Component {
< table className = { this . props . Settings && this . props . Settings . address ? 'table show' : 'table hide' } >
< tr >
< td style = { { width : '5%' } } >
< b > { this . props . ActiveCoin . coin } < / b >
< strong > { this . props . ActiveCoin . coin } < / s t r o n g >
< / t d >
< td > { this . props . Settings . address } < / t d >
< / t r >
< tr >
< td >
< b > { this . props . ActiveCoin . coin } Wif < / b >
< strong > { this . props . ActiveCoin . coin } Wif < / s t r o n g >
< / t d >
< td > { this . props . Settings . wifkey } < / t d >
< / t r >
@ -462,96 +500,108 @@ class Settings extends React.Component {
< div className = { this . state . activeTab === 5 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } style = { { height : this . state . activeTab === 5 ? this . state . activeTabHeight + 'px' : '10px' } } id = "ImportKeysTab" aria - labelledby = "ImportKeys" role = "tabpanel" >
< div className = "panel-body" >
< p >
< div > { translate ( 'INDEX.IMPORT_KEYS_DESC_P1' ) } < /div><br/ >
< div > { translate ( 'INDEX.IMPORT_KEYS_DESC_P2' ) } < /div><br/ >
< div > { translate ( 'INDEX.IMPORT_KEYS_DESC_P3' ) } < /div><br/ >
< b >
< i > { translate ( 'INDEX.PLEASE_KEEP_KEYS_SAFE' ) } < / i >
< / b >
< div > { translate ( 'INDEX.IMPORT_KEYS_DESC_P1' ) } < /div><br/ >
< div > { translate ( 'INDEX.IMPORT_KEYS_DESC_P2' ) } < /div><br/ >
< div > { translate ( 'INDEX.IMPORT_KEYS_DESC_P3' ) } < /div><br/ >
< strong >
< i > { translate ( 'INDEX.PLEASE_KEEP_KEYS_SAFE' ) } < / i >
< / s t r o n g >
< / p >
< div className = "col-sm-12" > < / d i v >
< form className = "wifkeys-import-form" method = "post" action = "javascript:" autoComplete = "off" >
< div className = "form-group form-material floating" >
< input type = "text" className = "form-control" name = "importWifKey" id = "import_wifkey" onChange = { this . updateInput } / >
< label className = "floating-label" htmlFor = "import_wifkey" > { translate ( 'INDEX.INPUT_PRIV_KEY' ) } < / l a b e l >
< input type = "text" className = "form-control" name = "importWifKey" id = "import_wifkey" onChange = { this . updateInput } / >
< label className = "floating-label" htmlFor = "import_wifkey" > { translate ( 'INDEX.INPUT_PRIV_KEY' ) } < / l a b e l >
< / d i v >
< div className = "col-sm-12 col-xs-12" style = { { textAlign : 'center' } } >
< button type = "button" className = "btn btn-primary waves-effect waves-light" data - toggle = "modal" data - dismiss = "modal" id = "import_wifkey_btn" onClick = { this . importWifKey } > { translate ( 'INDEX.IMPORT_PRIV_KEY' ) } < / b u t t o n >
< div className = "col-sm-12 col-xs-12" style = { { textAlign : 'center' } } >
< button
type = "button"
className = "btn btn-primary waves-effect waves-light"
id = "import_wifkey_btn"
onClick = { this . importWifKey } > { translate ( 'INDEX.IMPORT_PRIV_KEY' ) } < / b u t t o n >
< / d i v >
< / f o r m >
< div className = "col-sm-12" style = { { paddingTop : '15px' } } >
< div className = "row" id = "wif-priv-keys" data - plugin = "masonry" >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< div className = "panel" id = "DebugLog" >
< div className = "panel-heading" role = "tab" onClick = { ( ) => this . openTab ( 'DebugLog' , 6 ) } >
< a className = { this . state . activeTab === 6 ? 'panel-title' : 'panel-title collapsed' } data - toggle = "collapse" data - parent = "#SettingsAccordion" >
< i className = "icon md-info " aria - hidden = "true" > < / i > { t r a n s l a t e ( ' I N D E X . D E B U G _ L O G ' ) }
< div className = "panel-heading" role = "tab" onClick = { ( ) => this . openTab ( 'DebugLog' , 6 ) } >
< a className = { this . state . activeTab === 6 ? 'panel-title' : 'panel-title collapsed' } >
< i className = "icon fa-bug " aria - hidden = "true" > < / i > { t r a n s l a t e ( ' I N D E X . D E B U G _ L O G ' ) }
< / a >
< / d i v >
< div className = { this . state . activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } style = { { height : this . state . activeTab === 6 ? this . state . activeTabHeight + 'px' : '10px' } } id = "DebugLogTab" aria - labelledby = "DebugLog" role = "tabpanel" >
< div className = { this . state . activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style = { { height : this . state . activeTab === 6 ? this . state . activeTabHeight + 'px' : '10px' } }
id = "DebugLogTab" aria - labelledby = "DebugLog" role = "tabpanel" >
< div className = "panel-body" >
< p > { translate ( 'INDEX.DEBUG_LOG_DESC' ) } < / p >
< p > { translate ( 'INDEX.DEBUG_LOG_DESC' ) } < / p >
< div className = "col-sm-12" > < / d i v >
< form className = "read-debug-log-import-form" method = "post" action = "javascript:" autoComplete = "off" >
< div className = "form-group form-material floating" >
< input type = "text" className = "form-control" name = "debugLinesCount" id = "read_debug_log_lines" value = { this . state . debugLinesCount } onChange = { this . updateInput } / >
< label className = "floating-label" htmlFor = "read_debug_log_lines" > { translate ( 'INDEX.DEBUG_LOG_LINES' ) } < / l a b e l >
< input
type = "text"
className = "form-control"
name = "debugLinesCount"
id = "read_debug_log_lines"
value = { this . state . debugLinesCount }
onChange = { this . updateInput } / >
< label className = "floating-label" htmlFor = "read_debug_log_lines" > { translate ( 'INDEX.DEBUG_LOG_LINES' ) } < / l a b e l >
< / d i v >
< div className = "form-group form-material floating" >
< select className = "form-control form-material" name = "debugTarget" id = "settings_select_debuglog_options" onChange = { this . updateInput } >
< select className = "form-control form-material" name = "debugTarget" id = "settings_select_debuglog_options" onChange = { this . updateInput } >
< option value = "iguana" > Iguana < / o p t i o n >
< option value = "komodo" > Komodo < / o p t i o n >
< / s e l e c t >
< label className = "floating-label" htmlFor = "settings_select_debuglog_options" > { translate ( 'INDEX.TARGET' ) } < / l a b e l >
< label className = "floating-label" htmlFor = "settings_select_debuglog_options" > { translate ( 'INDEX.TARGET' ) } < / l a b e l >
< / d i v >
< div className = "col-sm-12 col-xs-12" style = { { textAlign : 'center' } } >
< button type = "button" className = "btn btn-primary waves-effect waves-light" data - toggle = "modal" data - dismiss = "modal" id = "read_debug_log_btn" onClick = { this . readDebugLog } > { translate ( 'INDEX.LOAD_DEBUG_LOG' ) } < / b u t t o n >
< div className = "col-sm-12 col-xs-12" style = { { textAlign : 'center' } } >
< button
type = "button"
className = "btn btn-primary waves-effect waves-light"
id = "read_debug_log_btn"
onClick = { this . readDebugLog } > { translate ( 'INDEX.LOAD_DEBUG_LOG' ) } < / b u t t o n >
< / d i v >
< div className = "col-sm-12 col-xs-12" style = { { textAlign : 'left' } } >
< br / >
< div style = { { padding : '20px 0' } } > { this . props . Settings . debugLog } < / d i v >
< div className = "col-sm-12 col-xs-12" style = { { textAlign : 'left' } } >
< div style = { { padding : '20px 0' , paddingTop : '40px' } } > { this . props . Settings . debugLog } < / d i v >
< / d i v >
< / f o r m >
< div className = "col-sm-12" style = { { paddingTop : '15px' } } >
< div className = "row" data - plugin = "masonry" > < / d i v >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< div className = "panel" id = "AppSettings" >
< div className = "panel-heading" role = "tab" onClick = { ( ) => this . openTab ( 'AppSettings' , 7 ) } >
< a className = { this . state . activeTab === 7 ? 'panel-title' : 'panel-title collapsed' } data - toggle = "collapse" data - parent = "#AppSettings" >
< i className = "icon md-info " aria - hidden = "true" > < / i > A p p C o n f i g ( c o n f i g . j s o n )
< div className = "panel-heading" role = "tab" onClick = { ( ) => this . openTab ( 'AppSettings' , 7 ) } >
< a className = { this . state . activeTab === 7 ? 'panel-title' : 'panel-title collapsed' } >
< i className = "icon fa-wrench " aria - hidden = "true" > < / i > { t r a n s l a t e ( ' S E T T I N G S . A P P _ C O N F I G ' ) } ( c o n f i g . j s o n )
< / a >
< / d i v >
< div className = { this . state . activeTab === 7 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } style = { { height : this . state . activeTab === 7 ? this . state . activeTabHeight + 'px' : '10px' } } id = "DebugLogTab" aria - labelledby = "DebugLog" role = "tabpanel" >
< div
className = { this . state . activeTab === 7 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style = { { height : this . state . activeTab === 7 ? this . state . activeTabHeight + 'px' : '10px' } }
id = "DebugLogTab" aria - labelledby = "DebugLog" role = "tabpanel" >
< div className = "panel-body" >
< p >
< strong > Most changes to app config require wallet restart ! < / s t r o n g >
< strong > { translate ( 'SETTINGS.CONFIG_RESTART_REQUIRED' ) } < / s t r o n g >
< / p >
< form className = "read-debug-log-import-form" method = "post" action = "javascript:" autoComplete = "off" >
< div className = "col-sm-12" style = { { paddingTop : '15px' } } >
< table >
< tbody >
{ this . renderConfigEditForm ( ) }
< / t b o d y >
< / t a b l e >
< / d i v >
< div className = "col-sm-12 col-xs-12" style = { { textAlign : 'center' , paddingTop : '25px' , paddingBottom : '25px' } } >
< button type = "button" className = "btn btn-primary waves-effect waves-light" data - toggle = "modal" data - dismiss = "modal" id = "read_debug_log_btn" onClick = { this . _ saveAppConfig } > Save app config < / b u t t o n >
< / d i v >
< / f o r m >
< div className = "col-sm-12" style = { { paddingTop : '15px' } } >
< table >
< tbody >
{ this . renderConfigEditForm ( ) }
< / t b o d y >
< / t a b l e >
< / d i v >
< div className = "col-sm-12 col-xs-12" style = { { textAlign : 'center' , paddingTop : '25px' , paddingBottom : '25px' } } >
< button
type = "button"
className = "btn btn-primary waves-effect waves-light"
id = "read_debug_log_btn"
onClick = { this . _ saveAppConfig } > { translate ( 'SETTINGS.SAVE_APP_CONFIG' ) } < / b u t t o n >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
{ this . renderAppInfoTab ( ) }
{ this . renderAppInfoTab ( ) }
< / d i v >
< / d i v >
< / d i v >
@ -559,7 +609,7 @@ class Settings extends React.Component {
< / d i v >
< / d i v >
< / d i v >
)
) ;
}
}
pbca26
8 years ago
GitHub