Browse Source

code styling update

all-modes
Petr Balashov 8 years ago
parent
commit
01d54b5581
  1. 2
      react/src/components/dashboard/about.js
  2. 45
      react/src/components/dashboard/atomic.js
  3. 12
      react/src/components/dashboard/coinTile.js
  4. 24
      react/src/components/dashboard/coinTileItem.js
  5. 22
      react/src/components/dashboard/dashboard.js
  6. 2
      react/src/components/dashboard/edex.js
  7. 174
      react/src/components/dashboard/jumblr.js
  8. 41
      react/src/components/dashboard/loginModal.js
  9. 66
      react/src/components/dashboard/navbar.js
  10. 70
      react/src/components/dashboard/receiveCoin.js
  11. 250
      react/src/components/dashboard/sendCoin.js
  12. 337
      react/src/components/dashboard/settings.js
  13. 4
      react/src/components/dashboard/walletsData.js
  14. 34
      react/src/translate/en.js

2
react/src/components/dashboard/about.js

@ -4,7 +4,7 @@ import { translate } from '../../translate/translate';
class About extends React.Component { class About extends React.Component {
render() { render() {
return( return(
<div className="page" style={{marginLeft: '0'}}> <div className="page" style={{ marginLeft: '0' }}>
<div className="page-content" id="section-about-iguana"> <div className="page-content" id="section-about-iguana">
<h2>About Iguana</h2> <h2>About Iguana</h2>
<p>Page content goes here</p> <p>Page content goes here</p>

45
react/src/components/dashboard/atomic.js

@ -481,34 +481,51 @@ class Atomic extends React.Component {
render() { render() {
return ( return (
<div className="page" style={{marginLeft: '0'}}> <div className="page" style={{ marginLeft: '0' }}>
<div className="page-content" id="section-iguana-atomic-explorer"> <div className="page-content" id="section-iguana-atomic-explorer">
<div className="row" id="atomic-explorer" data-plugin="masonry"> <div className="row" id="atomic-explorer">
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">Atomic Explorer</h4> <h4 className="font-size-14 text-uppercase">Atomic Explorer</h4>
<div className="panel panel-bordered"> <div className="panel panel-bordered">
<div className="panel-body"> <div className="panel-body">
<div className="col-sm-4 col-xs-12"> <div className="col-sm-4 col-xs-12">
<div className="form-group"> <div className="form-group">
<select className="form-control form-material" id="atomic_explorer_select_coin_options" onChange={this.updateSelectedCoin}> <select
<option value="-">{translate('INDEX.SELECT_COIN')}</option> className="form-control
form-material"
id="atomic_explorer_select_coin_options"
onChange={ this.updateSelectedCoin }>
<option value="-">{ translate('INDEX.SELECT_COIN') }</option>
<AddCoinOptionsCrypto /> <AddCoinOptionsCrypto />
<AddCoinOptionsAC /> <AddCoinOptionsAC />
<AddCoinOptionsACFiat /> <AddCoinOptionsACFiat />
</select> </select>
</div> </div>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}> <div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}>
<select className="form-control form-material" id="atomic_explorer_select_command_options" onChange={this.updateSelectedAPI}> <select
<option value="">-{translate('ATOMIC.SELECT_COMMAND')}-</option> className="form-control form-material"
{this.renderAtomicOptions()} id="atomic_explorer_select_command_options"
onChange={this.updateSelectedAPI}>
<option value="">-{ translate('ATOMIC.SELECT_COMMAND') }-</option>
{ this.renderAtomicOptions() }
</select> </select>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}> <div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}>
<input type="text" className="form-control" id="atomic_explorer_input_data" name="atomic_explorer_input_data" placeholder={translate('ATOMIC.INPUT_PLACEHOLDER')} onChange={this.updateInput} /> <input
type="text"
className="form-control"
id="atomic_explorer_input_data"
name="atomic_explorer_input_data"
placeholder={ translate('ATOMIC.INPUT_PLACEHOLDER') }
onChange={ this.updateInput } />
</div> </div>
<div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}> <div className="col-sm-12 col-xs-12" style={{ textAlign: 'center' }}>
<button type="button" className="btn btn-primary waves-effect waves-light" id="atomic_explorer_getcoinpeers_btn" onClick={this.getAtomicData}>{translate('ATOMIC.SUBMIT')}</button> <button
type="button"
className="btn btn-primary waves-effect waves-light"
id="atomic_explorer_getcoinpeers_btn"
onClick={ this.getAtomicData }>{ translate('ATOMIC.SUBMIT') }</button>
</div> </div>
</div> </div>
</div> </div>
@ -516,11 +533,11 @@ class Atomic extends React.Component {
<div className="col-xlg-4 col-md-12"> <div className="col-xlg-4 col-md-12">
<div className="panel"> <div className="panel">
<div className="panel-heading"> <div className="panel-heading">
<h3 className="panel-title">{translate('ATOMIC.RAW_OUTPUT')}</h3> <h3 className="panel-title">{ translate('ATOMIC.RAW_OUTPUT') }</h3>
</div> </div>
<div className="panel-body"> <div className="panel-body">
<div className="tab-content"> <div className="tab-content">
<pre id="atomic-explorer-commands-output">{this.state.output}</pre> <pre id="atomic-explorer-commands-output">{ this.state.output }</pre>
</div> </div>
</div> </div>
</div> </div>

12
react/src/components/dashboard/coinTile.js

@ -338,19 +338,19 @@ class CoinTile extends React.Component {
return ( return (
items.map((item, i) => items.map((item, i) =>
<CoinTileItem key={i} i={i} item={item} {...this.props} />) <CoinTileItem key={ i } i={ i } item={ item } {...this.props} />)
); );
} }
render() { render() {
return ( return (
<div className="page-aside" style={{paddingTop: '80px'}}> <div className="page-aside" style={{ paddingTop: '80px' }}>
<div className="page-aside-switch"> <div className="page-aside-switch">
<i className="icon md-chevron-left" aria-hidden="true"></i> <i className="icon md-chevron-left" aria-hidden="true"></i>
<i className="icon md-chevron-right" aria-hidden="true"></i> <i className="icon md-chevron-right" aria-hidden="true"></i>
</div> </div>
<div className="page-aside-inner"> <div className="page-aside-inner">
<div className="search-wallet-widgets panel" style={{display: 'none'}}> <div className="search-wallet-widgets panel" style={{ display: 'none' }}>
<div className="panel-heading"> <div className="panel-heading">
<div className="panel-actions"> <div className="panel-actions">
<div className="input-search input-group-sm"> <div className="input-search input-group-sm">
@ -360,14 +360,14 @@ class CoinTile extends React.Component {
<input type="text" className="form-control" name="" placeholder="Search..." disabled /> <input type="text" className="form-control" name="" placeholder="Search..." disabled />
</div> </div>
</div> </div>
<h3 className="panel-title">{translate('INDEX.ACTIVE_COINS')}</h3> <h3 className="panel-title">{ translate('INDEX.ACTIVE_COINS') }</h3>
</div> </div>
</div> </div>
<div className="wallet-widgets-list" data-plugin="pageAsideScroll"> <div className="wallet-widgets-list">
<div data-role="container"> <div data-role="container">
<div data-role="content"> <div data-role="content">
<div className="list-group row wallet-widgets-row"> <div className="list-group row wallet-widgets-row">
{this.renderTiles()} { this.renderTiles() }
</div> </div>
</div> </div>
</div> </div>

24
react/src/components/dashboard/coinTileItem.js

@ -65,7 +65,10 @@ class CoinTileItem extends React.Component {
Store.dispatch(getKMDAddressesNative(coin, mode, useAddress)); Store.dispatch(getKMDAddressesNative(coin, mode, useAddress));
Store.dispatch(getShepherdCache(JSON.parse(sessionStorage.getItem('IguanaActiveAccount')).pubkey, coin)); Store.dispatch(getShepherdCache(JSON.parse(sessionStorage.getItem('IguanaActiveAccount')).pubkey, coin));
if (this.props && this.props.Dashboard && this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle[coin]) { if (this.props &&
this.props.Dashboard &&
this.props.Dashboard.activeHandle &&
this.props.Dashboard.activeHandle[coin]) {
if (!this.props.ActiveCoin.addresses) { if (!this.props.ActiveCoin.addresses) {
Store.dispatch(getAddressesByAccount(coin, mode)); Store.dispatch(getAddressesByAccount(coin, mode));
} }
@ -134,14 +137,19 @@ class CoinTileItem extends React.Component {
const { item } = this.props; const { item } = this.props;
return ( return (
<div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info" data-edexcoincode="{item.coin}"> <div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info">
<div className={this.props.ActiveCoin.coin === item.coin ? 'widget widget-shadow active' : 'widget widget-shadow'}> <div className={ this.props.ActiveCoin.coin === item.coin ? 'widget widget-shadow active' : 'widget widget-shadow' }>
<div className="widget-content text-center bg-white padding-20 edexcoin-logo" data-edexcoincode="{item.coin}" data-edexcoinmodecode="{item.modecode}" data-edexcoinname="{item.coinname}" onClick={() => this.dashboardChangeActiveCoin(item.coin, item.mode)}> <div
<a className="avatar margin-bottom-5" href="javascript:void(0)" id="edexcoin-logo"> className="widget-content text-center bg-white padding-20 edexcoin-logo"
<img className="img-responsive" src={'assets/images/cryptologo/' + item.coinlogo + '.png'} alt="{item.coinname}"/> onClick={ () => this.dashboardChangeActiveCoin(item.coin, item.mode) }>
<span className={'badge up badge-' + item.modecolor} id="basfull" data-edexcoincode="{item.coin}" data-toggle="tooltip" data-placement="top" data-original-title="{item.modetip}">{item.modecode}</span> <a className="avatar margin-bottom-5" id="edexcoin-logo">
<img
className="img-responsive"
src={ 'assets/images/cryptologo/' + item.coinlogo + '.png' }
alt={ item.coinname }/>
<span className={ 'badge up badge-' + item.modecolor } id="basfull">{ item.modecode }</span>
</a> </a>
<div className="coin-name">{item.coinname} ({item.coinlogo.toUpperCase()})</div> <div className="coin-name">{ item.coinname } ({ item.coinlogo.toUpperCase() })</div>
</div> </div>
</div> </div>
</div> </div>

22
react/src/components/dashboard/dashboard.js

@ -29,10 +29,12 @@ class Dashboard extends React.Component {
document.body.className = ''; document.body.className = '';
return ( return (
<div style={{height: '100%'}}> <div style={{ height: '100%' }}>
<div className={this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : ''} id="section-dashboard" data-edexcoin="COIN"> <div
className={ this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : '' }
id="section-dashboard">
<Navbar {...this.props} /> <Navbar {...this.props} />
<div className={this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide' }>
<CoinTile {...this.props} /> <CoinTile {...this.props} />
<WalletsNav {...this.props} /> <WalletsNav {...this.props} />
<WalletsProgress {...this.props} /> <WalletsProgress {...this.props} />
@ -44,19 +46,19 @@ class Dashboard extends React.Component {
<WalletsNative {...this.props} /> <WalletsNative {...this.props} />
<WalletsNativeTxInfo {...this.props} /> <WalletsNativeTxInfo {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide' }>
<EDEX {...this.props} /> <EDEX {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'atomic' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'atomic' ? 'show' : 'hide' }>
<Atomic {...this.props} /> <Atomic {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'jumblr' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'jumblr' ? 'show' : 'hide' }>
<Jumblr {...this.props} /> <Jumblr {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'settings' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'settings' ? 'show' : 'hide' }>
<Settings {...this.props} /> <Settings {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'about' ? 'show' : 'hide'}> <div className={ this.props.Dashboard.activeSection === 'about' ? 'show' : 'hide' }>
<About {...this.props} /> <About {...this.props} />
</div> </div>
</div> </div>
@ -65,7 +67,9 @@ class Dashboard extends React.Component {
} }
render() { render() {
if (this.props && this.props.Main && this.props.Main.isLoggedIn) { if (this.props &&
this.props.Main &&
this.props.Main.isLoggedIn) {
return this.renderDashboard(); return this.renderDashboard();
} else { } else {
return null; return null;

2
react/src/components/dashboard/edex.js

@ -4,7 +4,7 @@ import { translate } from '../../translate/translate';
class EDEX extends React.Component { class EDEX extends React.Component {
render() { render() {
return ( return (
<div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0px'}}> <div className="page" style={{ marginLeft: '0px' }}>
<div className="page-content" id="section-easydex"> <div className="page-content" id="section-easydex">
<h2>Coming Soon!</h2> <h2>Coming Soon!</h2>
</div> </div>

174
react/src/components/dashboard/jumblr.js

@ -30,19 +30,19 @@ class Jumblr extends React.Component {
render() { render() {
return ( return (
<div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}> <div className="page" style={{ marginLeft: '0' }}>
<div className="page-content" id="section-jumblr"> <div className="page-content" id="section-jumblr">
<div className="row" id="jumblr_dashboard" data-plugin="masonry"> <div className="row" id="jumblr_dashboard">
<div className="col-xs-12" id="jumblr_testing_alert"> <div className="col-xs-12" id="jumblr_testing_alert">
<div className="alert alert-danger" role="alert"> <div className="alert alert-danger" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close"> <button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<span style={{fontSize: '24px', textAlign: 'center'}}> <span style={{ fontSize: '24px', textAlign: 'center' }}>
<i className="icon fa-paw" aria-hidden="true"></i> {translate('JUMBLR.NOTICE')} <i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NOTICE') }
</span> </span>
<br /> <br />
{translate('JUMBLR.DESCRIPTION')} { translate('JUMBLR.DESCRIPTION') }
</div> </div>
</div> </div>
@ -51,91 +51,119 @@ class Jumblr extends React.Component {
<button type="button" className="close" data-dismiss="alert" aria-label="Close"> <button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<span style={{fontSize: '24px', textAlign: 'center'}}> <span style={{ fontSize: '24px', textAlign: 'center' }}>
<i className="icon fa-paw" aria-hidden="true"></i> {translate('JUMBLR.NEED_NATIVE')} <i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NEED_NATIVE') }
</span> </span>
<br /> <br />
{translate('JUMBLR.TO_USE_JUMBLR')} { translate('JUMBLR.TO_USE_JUMBLR') }
<br /> <br />
{translate('JUMBLR.IF_YOU_ALREADY_RUNNING')} { translate('JUMBLR.IF_YOU_ALREADY_RUNNING') }
</div> </div>
</div> </div>
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<p>{translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH')}</p> <p>{ translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH') }</p>
</div> </div>
<div className="col-xs-12"> <div className="col-xs-12">
<div className="panel-group" id="jumber_quick_info" aria-multiselectable="true" role="tablist"> <div className="panel-group" id="jumber_quick_info" aria-multiselectable="true" role="tablist">
<div className="panel"> <div className="panel">
<div className="panel-heading" id="jumblr_security_notes" role="tab" onClick={() => this.openTab(0)}> <div
<a className={this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#jumber_quick_info" aria-expanded="true" aria-controls="jumblr_security_notes_1">{translate('JUMBLR.FEW_SECURITY_NOTES')}</a> className="panel-heading"
id="jumblr_security_notes"
role="tab"
onClick={ () => this.openTab(0) }>
<a
className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed' }
aria-expanded="true"
aria-controls="jumblr_security_notes_1">{ translate('JUMBLR.FEW_SECURITY_NOTES') }</a>
</div> </div>
<div className={this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="jumblr_security_notes_1" aria-labelledby="jumblr_security_notes" role="tabpanel"> <div
className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
id="jumblr_security_notes_1"
aria-labelledby="jumblr_security_notes"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<ul> <ul>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC1')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }</li>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC2')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC2') }</li>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC3')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC3') }</li>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC4')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC4') }</li>
<li>{translate('JUMBLR.FEW_SECURITY_NOTES_DESC5')}</li> <li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC5') }</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div className="panel"> <div className="panel">
<div className="panel-heading" id="jumblr_access_funds" role="tab" onClick={() => this.openTab(1)}> <div
<a className={this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#jumber_quick_info" aria-expanded="false" aria-controls="jumblr_access_funds_2">{translate('JUMBLR.ACCESS_JUMBLR_FUNDS')}</a> className="panel-heading"
id="jumblr_access_funds"
role="tab"
onClick={ () => this.openTab(1) }>
<a
className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }
aria-expanded="false"
aria-controls="jumblr_access_funds_2">{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }</a>
</div> </div>
<div className={this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="jumblr_access_funds_2" aria-labelledby="jumblr_access_funds" role="tabpanel"> <div
className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
id="jumblr_access_funds_2"
aria-labelledby="jumblr_access_funds"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<p>{translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY')}</p> <p>{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }</p>
<ul> <ul>
<code>duck dog cat donkey</code> <code>duck dog cat donkey</code>
</ul> </ul>
<ol> <ol>
<li>{translate('JUMBLR.TO_ACCESS')}</li> <li>{ translate('JUMBLR.TO_ACCESS') }</li>
<li>{translate('JUMBLR.CLOSE_IAPP')}</li> <li>{ translate('JUMBLR.CLOSE_IAPP') }</li>
<li>{translate('JUMBLR.START_IAPP')}</li> <li>{ translate('JUMBLR.START_IAPP') }</li>
<li>{translate('JUMBLR.START_KMD')}</li> <li>{ translate('JUMBLR.START_KMD') }</li>
<li>{translate('JUMBLR.ACCESS_JUMBLR_FUNDS')} <li>{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }
<ul> <ul>
<li>{translate('JUMBLR.SMALL_LETTERS')}</li> <li>{ translate('JUMBLR.SMALL_LETTERS') }</li>
<li>{translate('JUMBLR.WHITE_SPACE')}</li> <li>{ translate('JUMBLR.WHITE_SPACE') }</li>
</ul> </ul>
</li> </li>
<li> <li>
{translate('JUMBLR.PER_EXAMPLE')} { translate('JUMBLR.PER_EXAMPLE') }
<br /> <br />
<code>jumblr duck dog cat donkey</code> <code>jumblr duck dog cat donkey</code>
</li> </li>
<li>{translate('JUMBLR.LOGIN_WITH_JUMBLR')}</li> <li>{ translate('JUMBLR.LOGIN_WITH_JUMBLR') }</li>
</ol> </ol>
<h4>{translate('JUMBLR.AGAIN_DONT_SHARE')}</h4> <h4>{ translate('JUMBLR.AGAIN_DONT_SHARE') }</h4>
</div> </div>
</div> </div>
</div> </div>
<div className="panel"> <div className="panel">
<div className="panel-heading" id="jumblr_using_jumblr" role="tab" onClick={() => this.openTab(2)}> <div className="panel-heading" id="jumblr_using_jumblr" role="tab" onClick={ () => this.openTab(2) }>
<a className={this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#jumber_quick_info" aria-expanded="false" aria-controls="jumblr_using_jumblr_3">{translate('JUMBLR.USING_JUMBLR')}</a> <a
className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed' }
aria-expanded="false"
aria-controls="jumblr_using_jumblr_3">{ translate('JUMBLR.USING_JUMBLR') }</a>
</div> </div>
<div className={this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="jumblr_using_jumblr_3" aria-labelledby="jumblr_using_jumblr" <div
role="tabpanel"> className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
id="jumblr_using_jumblr_3"
aria-labelledby="jumblr_using_jumblr"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<ul> <ul>
<li>{translate('JUMBLR.RUN_KMD')}</li> <li>{ translate('JUMBLR.RUN_KMD') }</li>
<li>{translate('JUMBLR.LOGIN_KMD')}</li> <li>{ translate('JUMBLR.LOGIN_KMD') }</li>
<li>{translate('JUMBLR.GO_TO')}</li> <li>{ translate('JUMBLR.GO_TO') }</li>
<li>{translate('JUMBLR.FIND_DEPOSIT_ADDR')}</li> <li>{ translate('JUMBLR.FIND_DEPOSIT_ADDR') }</li>
<li>{translate('JUMBLR.YOU_SEND_FUNDS')}</li> <li>{ translate('JUMBLR.YOU_SEND_FUNDS') }</li>
<li>{translate('JUMBLR.KEEP_WALLET_OPEN')}</li> <li>{ translate('JUMBLR.KEEP_WALLET_OPEN') }</li>
<li>{translate('JUMBLR.IMPORTANT_FUNDS')}</li> <li>{ translate('JUMBLR.IMPORTANT_FUNDS') }</li>
<li>{translate('JUMBLR.LARGE_LOT')}</li> <li>{ translate('JUMBLR.LARGE_LOT') }</li>
</ul> </ul>
<p>{this.renderLB('JUMBLR.EG')}</p> <p>{ this.renderLB('JUMBLR.EG') }</p>
<p>{translate('JUMBLR.93_KMD')}</p> <p>{ translate('JUMBLR.93_KMD') }</p>
<p>{translate('JUMBLR.TO_CLEAR_THEM')}</p> <p>{ translate('JUMBLR.TO_CLEAR_THEM') }</p>
<p>{translate('JUMBLR.WHEN_IT_TOTALS')}</p> <p>{ translate('JUMBLR.WHEN_IT_TOTALS') }</p>
</div> </div>
</div> </div>
</div> </div>
@ -143,13 +171,13 @@ class Jumblr extends React.Component {
</div> </div>
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{translate('JUMBLR.JADDR')}</h4> <h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JADDR') }</h4>
<div className="panel" id="projects"> <div className="panel" id="projects">
<div className="table-responsive"> <div className="table-responsive">
<table className="table table-striped"> <table className="table table-striped">
<tbody> <tbody>
<tr> <tr>
<td width="20%">{translate('JUMBLR.BTC_DEPOSIT')}</td> <td width="20%">{ translate('JUMBLR.BTC_DEPOSIT') }</td>
<td> <td>
<span id="jumblr_BTCdeposit"></span> <span id="jumblr_BTCdeposit"></span>
</td> </td>
@ -157,15 +185,20 @@ class Jumblr extends React.Component {
<tr> <tr>
<td>BTC Jumblr</td> <td>BTC Jumblr</td>
<td> <td>
<button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_btc_btn" data-jumblr="BTCjumblr"> <button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_btc_btn">
<span><i className="icon fa-eye" aria-hidden="true"></i> {translate('JUMBLR.SHOW_HIDE')}</span> <span><i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }</span>
</button> </button>
<span className="label label-lg label-outline label-success" id="jumblr_BTCjumblr" style={{display: 'none'}}></span> <span
<span className="label label-lg label-outline label-default" id="jumblr_BTCjumblr_showhide">{translate('JUMBLR.HIDDEN')}</span> className="label label-lg label-outline label-success"
id="jumblr_BTCjumblr"
style={{ display: 'none' }}></span>
<span
className="label label-lg label-outline label-default"
id="jumblr_BTCjumblr_showhide">{ translate('JUMBLR.HIDDEN') }</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.KMD_DEPOSIT')}</td> <td>{ translate('JUMBLR.KMD_DEPOSIT') }</td>
<td> <td>
<span id="jumblr_KMDdeposit"></span> <span id="jumblr_KMDdeposit"></span>
</td> </td>
@ -173,11 +206,18 @@ class Jumblr extends React.Component {
<tr> <tr>
<td>KMD Jumblr</td> <td>KMD Jumblr</td>
<td> <td>
<button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_kmd_btn" data-jumblr="KMDjumblr"> <button type="button" className="btn btn-animate btn-animate-side btn-default btn-sm waves-effect waves-light jumblr_show_hide_addr_kmd_btn">
<span><i className="icon fa-eye" aria-hidden="true"></i> {translate('JUMBLR.SHOW_HIDE')}</span> <span>
<i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }
</span>
</button> </button>
<span className="label label-lg label-outline label-success" id="jumblr_KMDjumblr" style={{display: 'none'}}></span> <span
<span className="label label-lg label-outline label-default" id="jumblr_KMDjumblr_showhide">{translate('JUMBLR.HIDDEN')}</span> className="label label-lg label-outline label-success"
id="jumblr_KMDjumblr"
style={{ display: 'none' }}></span>
<span
className="label label-lg label-outline label-default"
id="jumblr_KMDjumblr_showhide">{ translate('JUMBLR.HIDDEN') }</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -187,49 +227,49 @@ class Jumblr extends React.Component {
</div> </div>
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{translate('JUMBLR.JSTATUS')}</h4> <h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JSTATUS') }</h4>
<div className="panel" id="projects"> <div className="panel" id="projects">
<div className="table-responsive"> <div className="table-responsive">
<table className="table table-striped"> <table className="table table-striped">
<tbody> <tbody>
<tr> <tr>
<td width="20%">{translate('JUMBLR.RESULT')}</td> <td width="20%">{ translate('JUMBLR.RESULT') }</td>
<td> <td>
<span id="jumblr_status_result" className="label label-success"></span> <span id="jumblr_status_result" className="label label-success"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.DEPOSITED')}</td> <td>{ translate('JUMBLR.DEPOSITED') }</td>
<td> <td>
<span id="jumblr_status_deposited"></span> <span id="jumblr_status_deposited"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.PUB_TO_PRIV')}</td> <td>{ translate('JUMBLR.PUB_TO_PRIV') }</td>
<td> <td>
<span id="jumblr_status_t_to_z"></span> <span id="jumblr_status_t_to_z"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.PRIV_TO_PRIV')}</td> <td>{ translate('JUMBLR.PRIV_TO_PRIV') }</td>
<td> <td>
<span id="jumblr_status_z_to_z"></span> <span id="jumblr_status_z_to_z"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.PRIV_TO_PUB')}</td> <td>{ translate('JUMBLR.PRIV_TO_PUB') }</td>
<td> <td>
<span id="jumblr_status_z_to_t"></span> <span id="jumblr_status_z_to_t"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.FINISHED')}</td> <td>{ translate('JUMBLR.FINISHED') }</td>
<td> <td>
<span id="jumblr_status_finished"></span> <span id="jumblr_status_finished"></span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{translate('JUMBLR.PENDING')}</td> <td>{ translate('JUMBLR.PENDING') }</td>
<td> <td>
<span id="jumblr_status_pending"></span> <span id="jumblr_status_pending"></span>
</td> </td>

41
react/src/components/dashboard/loginModal.js

@ -48,35 +48,56 @@ class LoginModal extends React.Component {
if (this.props.Dashboard.activateLoginModal) { if (this.props.Dashboard.activateLoginModal) {
return ( return (
<div> <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 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-dialog modal-center modal-lg">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header"> <div className="modal-header bg-orange-a400 wallet-send-header">
<button type="button" className="close white" data-dismiss="modal" aria-label="Close" onClick={this.dismiss}> <button
type="button"
className="close white"
aria-label="Close"
onClick={ this.dismiss }>
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<h4 className="modal-title white">{translate('INDEX.SELECT_A_COIN')}</h4> <h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div id="wallet-login"> <div id="wallet-login">
<div className="page animsition vertical-align text-center fade-in" data-animsition-in="fade-in" data-animsition-out="fade-out"> <div className="page animsition vertical-align text-center fade-in">
<div className="page-content vertical-align-middle"> <div className="page-content vertical-align-middle">
<div className="brand"> <div className="brand">
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" /> <img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
</div> </div>
<div id="section-login" className={this.state.activeLoginSection === 'login' ? 'show' : 'hide'}> <div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
<h4 style={{ color: '#fff' }} id="login-welcome">{translate('INDEX.WELCOME_LOGIN')}</h4> <h4 style={{ color: '#fff' }} id="login-welcome">{ translate('INDEX.WELCOME_LOGIN') }</h4>
<div className="login-form"> <div className="login-form">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input type={this.state.seedInputVisibility ? 'text' : 'password'} className="form-control" name="loginPassphrase" id="password" onChange={this.updateInput} /> <input
<i className={this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye'} onClick={this.toggleSeedInputVisibility}></i> 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> <label className="floating-label" htmlFor="inputPassword">{translate('INDEX.WALLET_SEED')}</label>
</div> </div>
<button type="button" className="btn btn-primary btn-block" id="loginbtn" onClick={this.loginSeed} disabled={!this.state.loginPassphrase || !this.state.loginPassphrase.length}>{translate('INDEX.SIGN_IN')}</button> <button
type="button"
className="btn btn-primary btn-block"
id="loginbtn"
onClick={ this.loginSeed }
disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

66
react/src/components/dashboard/navbar.js

@ -43,19 +43,24 @@ class Navbar extends React.Component {
<nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation"> <nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">
<div className="navbar-header"> <div className="navbar-header">
<button type="button" className="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"> <button type="button" className="navbar-toggle hamburger hamburger-close navbar-toggle-left hided">
<span className="sr-only">{translate('INDEX.TOGGLE_NAV')}</span> <span className="sr-only">{ translate('INDEX.TOGGLE_NAV') }</span>
<span className="hamburger-bar"></span> <span className="hamburger-bar"></span>
</button> </button>
<button type="button" className="navbar-toggle collapsed"> <button type="button" className="navbar-toggle collapsed">
<i className="icon md-more" aria-hidden="true"></i> <i className="icon md-more" aria-hidden="true"></i>
</button> </button>
<div className="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu"> <div className="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
<img className="navbar-brand-logo hidden-xs" src="assets/images/easydex-logo-dashboard.png" title="SuperNET Igauana" /> <img
<img className="navbar-brand-logo hidden-md hidden-sm hidden-lg" src="assets/images/easydex-logo-dashboard-white.png" title="SuperNET Igauana white" /> className="navbar-brand-logo hidden-xs" src="assets/images/easydex-logo-dashboard.png"
title="SuperNET Iguana" />
<img
className="navbar-brand-logo hidden-md hidden-sm hidden-lg"
src="assets/images/easydex-logo-dashboard-white.png"
title="SuperNET Iguana white" />
<span className="navbar-brand-text hidden-xs"></span> <span className="navbar-brand-text hidden-xs"></span>
</div> </div>
<button type="button" className="navbar-toggle collapsed"> <button type="button" className="navbar-toggle collapsed">
<span className="sr-only">{translate('INDEX.TOGGLE_SEARCH')}</span> <span className="sr-only">{ translate('INDEX.TOGGLE_SEARCH') }</span>
<i className="icon md-search" aria-hidden="true"></i> <i className="icon md-search" aria-hidden="true"></i>
</button> </button>
</div> </div>
@ -63,45 +68,48 @@ class Navbar extends React.Component {
<div className="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse"> <div className="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
<ul className="nav navbar-toolbar"> <ul className="nav navbar-toolbar">
<li className="hidden-float" id="toggleMenubar" style={{ display: 'none' }}> <li className="hidden-float" id="toggleMenubar" style={{ display: 'none' }}>
<a data-toggle="menubar" href="#" role="button"> <a role="button">
<i className="icon hamburger hamburger-arrow-left"> <i className="icon hamburger hamburger-arrow-left">
<span className="sr-only">{translate('INDEX.TOGGLE_MENUBAR')}</span> <span className="sr-only">{ translate('INDEX.TOGGLE_MENUBAR') }</span>
<span className="hamburger-bar"></span> <span className="hamburger-bar"></span>
</i> </i>
</a> </a>
</li> </li>
<li className={this.props.Dashboard.activeSection === 'wallets' ? 'active nav-top-menu' : 'nav-top-menu'}> <li className={ this.props.Dashboard.activeSection === 'wallets' ? 'active nav-top-menu' : 'nav-top-menu' }>
<a href="javascript:void(0)" id="nav-dashboard" onClick={() => this.dashboardChangeSection('wallets')}> <a id="nav-dashboard" onClick={ () => this.dashboardChangeSection('wallets') }>
<i className="site-menu-icon" aria-hidden="true"></i> {translate('INDEX.WALLETS')} <i className="site-menu-icon" aria-hidden="true"></i> { translate('INDEX.WALLETS') }
</a> </a>
</li> </li>
<li className={this.props.Dashboard.activeSection === 'edex' ? 'active nav-top-menu' : 'nav-top-menu'}> <li className={ this.props.Dashboard.activeSection === 'edex' ? 'active nav-top-menu' : 'nav-top-menu' }>
<a href="javascript:void(0)" id="nav-easydex" onClick={() => this.dashboardChangeSection('edex')}> <a id="nav-easydex" onClick={ () => this.dashboardChangeSection('edex') }>
<i className="site-menu-icon" aria-hidden="true"></i> EasyDEX <i className="site-menu-icon" aria-hidden="true"></i> EasyDEX
</a> </a>
</li> </li>
<li className={this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu'} style={{display: 'none'}}> <li className={ this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu' } style={{ display: 'none' }}>
<a href="javascript:void(0)" id="nav-jumblr" onClick={() => this.dashboardChangeSection('jumblr')}> <a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
<i className="site-menu-icon" aria-hidden="true"></i> Jumblr <i className="site-menu-icon" aria-hidden="true"></i> Jumblr
</a> </a>
</li> </li>
<li className={this.props.Dashboard.activeSection === 'atomic' ? 'active nav-top-menu' : 'nav-top-menu'}> <li className={ this.props.Dashboard.activeSection === 'atomic' ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-iguana-atomic-explorer" onClick={() => this.dashboardChangeSection('atomic')}> <a id="nav-iguana-atomic-explorer" onClick={ () => this.dashboardChangeSection('atomic') }>
<i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer <i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
</a> </a>
</li> </li>
</ul> </ul>
<ul className="nav navbar-toolbar navbar-right navbar-toolbar-right"> <ul className="nav navbar-toolbar navbar-right navbar-toolbar-right">
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" id="btn_edexcoin_addcoin" data-toggle="modal" style={{ paddingBottom: '10px', paddingTop: '16px' }} onClick={this.toggleAddCoinModal}> <a
role="menuitem"
id="btn_edexcoin_addcoin"
style={{ paddingBottom: '10px', paddingTop: '16px' }}
onClick={ this.toggleAddCoinModal }>
<span> <span>
<img src="assets/images/icons/activatecoin.png" alt="Add Coin" /> <img src="assets/images/icons/activatecoin.png" alt={ translate('INDEX.ADD_COIN') } />
</span> </span>
</a> </a>
</li> </li>
<li className={'dropdown' + (this.state.openDropMenu ? ' open' : '')} onClick={this.openDropMenu}> <li className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') } onClick={ this.openDropMenu }>
<a className="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false" <a className="navbar-avatar dropdown-toggle" aria-expanded="false" role="button">
data-animation="scale-up" role="button">
<span className="avatar avatar-online"> <span className="avatar avatar-online">
<img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" /> <img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" />
<i></i> <i></i>
@ -109,19 +117,25 @@ class Navbar extends React.Component {
</a> </a>
<ul className="dropdown-menu" role="menu"> <ul className="dropdown-menu" role="menu">
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" id="nav-iguana-wallet-settings" onClick={() => this.dashboardChangeSection('settings')}> <a
<i className="icon md-settings" aria-hidden="true"></i> {translate('INDEX.SETTINGS')} role="menuitem"
id="nav-iguana-wallet-settings"
onClick={ () => this.dashboardChangeSection('settings') }>
<i className="icon md-settings" aria-hidden="true"></i> { translate('INDEX.SETTINGS') }
</a> </a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" id="nav-about-iguana" onClick={() => this.dashboardChangeSection('about')}> <a
<i className="icon fa-users" aria-hidden="true"></i> {translate('INDEX.ABOUT_IGUANA')} role="menuitem"
id="nav-about-iguana"
onClick={ () => this.dashboardChangeSection('about') }>
<i className="icon fa-users" aria-hidden="true"></i> { translate('INDEX.ABOUT_IGUANA') }
</a> </a>
</li> </li>
<li className="divider" role="presentation"></li> <li className="divider" role="presentation"></li>
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" id="logout-account" onClick={this.logout}> <a role="menuitem" id="logout-account" onClick={ this.logout }>
<i className="icon md-power" aria-hidden="true"></i> {translate('INDEX.LOGOUT')} <i className="icon md-power" aria-hidden="true"></i> { translate('INDEX.LOGOUT') }
</a> </a>
</li> </li>
</ul> </ul>

70
react/src/components/dashboard/receiveCoin.js

@ -33,13 +33,22 @@ class ReceiveCoin extends React.Component {
return ( return (
<td> <td>
<span className="label label-default"> <span className="label label-default">
<i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')} <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span> </span>
<button className="btn btn-default btn-xs clipboard-edexaddr margin-left-10" data-edexcoin="COIN" id="edexcoin_active_addr_clipboard" onClick={() => this._copyCoinAddress(address)}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button> <button
<span className="label label-default margin-left-10 action" title="Check" onClick={() => this._checkAddressBasilisk(address)}> className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
id="edexcoin_active_addr_clipboard"
onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
<span
className="label label-default margin-left-10 action"
title="Check"
onClick={ () => this._checkAddressBasilisk(address) }>
<i className="icon fa-database"></i> <i className="icon fa-database"></i>
</span> </span>
<span className="label label-default margin-left-10 action" title="Import" onClick={() => this._validateAddressBasilisk(address)}> <span
className="label label-default margin-left-10 action"
title="Import"
onClick={ () => this._validateAddressBasilisk(address) }>
<i className="icon fa-info-circle"></i> <i className="icon fa-info-circle"></i>
</span> </span>
</td> </td>
@ -48,9 +57,12 @@ class ReceiveCoin extends React.Component {
return ( return (
<td> <td>
<span className="label label-default"> <span className="label label-default">
<i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')} <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span> </span>
<button className="btn btn-default btn-xs clipboard-edexaddr margin-left-10" data-edexcoin="COIN" id="edexcoin_active_addr_clipboard" onClick={() => this._copyCoinAddress(address)}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button> <button
className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
id="edexcoin_active_addr_clipboard"
onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
</td> </td>
); );
} }
@ -65,19 +77,21 @@ class ReceiveCoin extends React.Component {
for (let i = 0; i < this.props.addresses.public.length; i++) { for (let i = 0; i < this.props.addresses.public.length; i++) {
let address = this.props.addresses.public[i]; let address = this.props.addresses.public[i];
if (this.props.mode === 'basilisk' && address.amount === 'N/A') { if (this.props.mode === 'basilisk' &&
address.amount === 'N/A') {
address.amount = this.props.cache && this.props.cache[this.props.coin][address.address] && this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.balance ? this.props.cache[this.props.coin][address.address].getbalance.data.balance : 'N/A'; address.amount = this.props.cache && this.props.cache[this.props.coin][address.address] && this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.balance ? this.props.cache[this.props.coin][address.address].getbalance.data.balance : 'N/A';
} }
if (this.props.mode === 'basilisk' && (address.interest === 'N/A' || !address.interest)) { if (this.props.mode === 'basilisk' &&
(address.interest === 'N/A' || !address.interest)) {
address.interest = this.props.cache && this.props.cache[this.props.coin][address.address] && this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.interest ? this.props.cache[this.props.coin][address.address].getbalance.data.interest : 'N/A'; address.interest = this.props.cache && this.props.cache[this.props.coin][address.address] && this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.interest ? this.props.cache[this.props.coin][address.address].getbalance.data.interest : 'N/A';
} }
items.push( items.push(
<tr key={address.address}> <tr key={ address.address }>
{this.renderAddressActions(address.address)} { this.renderAddressActions(address.address) }
<td>{address.address}</td> <td>{ address.address }</td>
<td>{address.amount}</td> <td>{ address.amount }</td>
<td>{address.interest ? address.interest : 'N/A'}</td> <td>{ address.interest ? address.interest : 'N/A' }</td>
</tr> </tr>
); );
} }
@ -89,38 +103,40 @@ class ReceiveCoin extends React.Component {
} }
render() { render() {
if (this.props && this.props.receive && this.props.mode !== 'native') { if (this.props &&
this.props.receive &&
this.props.mode !== 'native') {
return ( return (
<div data-edexcoin="COIN" id="edexcoin_recieve"> <div id="edexcoin_recieve">
<div className="col-xs-12 margin-top-20"> <div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal"> <div className="panel nav-tabs-horizontal">
<div data-edexcoin="COIN" id="edexcoin_recieve_section"> <div id="edexcoin_recieve_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12"> <div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel"> <div className="panel">
<header className="panel-heading"> <header className="panel-heading">
<div className="panel-actions"> <div className="panel-actions">
</div> </div>
<h4 className="panel-title">{translate('INDEX.RECEIVING_ADDRESS')}</h4> <h4 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h4>
</header> </header>
<div className="panel-body"> <div className="panel-body">
<table className="table table-hover dataTable table-striped" data-edexcoin="COIN" id="edexcoin-recieve-addr-tbl"> <table className="table table-hover dataTable table-striped" id="edexcoin-recieve-addr-tbl">
<thead> <thead>
<tr> <tr>
<th>{translate('INDEX.TYPE')}</th> <th>{ translate('INDEX.TYPE') }</th>
<th>{translate('INDEX.ADDRESS')}</th> <th>{ translate('INDEX.ADDRESS') }</th>
<th>{translate('INDEX.BALANCE')}</th> <th>{ translate('INDEX.BALANCE') }</th>
<th>{translate('INDEX.INTEREST')}</th> <th>{ translate('INDEX.INTEREST') }</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.renderAddressList()} { this.renderAddressList() }
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<th>{translate('INDEX.TYPE')}</th> <th>{ translate('INDEX.TYPE') }</th>
<th>{translate('INDEX.ADDRESS')}</th> <th>{ translate('INDEX.ADDRESS') }</th>
<th>{translate('INDEX.BALANCE')}</th> <th>{ translate('INDEX.BALANCE') }</th>
<th>{translate('INDEX.INTEREST')}</th> <th>{ translate('INDEX.INTEREST') }</th>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>

250
react/src/components/dashboard/sendCoin.js

@ -154,7 +154,7 @@ class SendCoin extends React.Component {
style={{ marginTop: '10px' }} style={{ marginTop: '10px' }}
className={ isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide' } className={ isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide' }
onClick={ this._fetchNewUTXOData } disabled={ waitUntilCallIsFinished }> onClick={ this._fetchNewUTXOData } disabled={ waitUntilCallIsFinished }>
{waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE')} { waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE') }
</button> </button>
</div> </div>
); );
@ -249,7 +249,7 @@ class SendCoin extends React.Component {
return ( return (
<span> <span>
<i className={this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i> <span className="text">[ { _amount } {this.props.ActiveCoin.coin} ] {this.state.sendFrom}</span> <i className={ this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> <span className="text">[ { _amount } { this.props.ActiveCoin.coin } ] { this.state.sendFrom }</span>
</span> </span>
); );
} else if (this.state.sendApiType) { } else if (this.state.sendApiType) {
@ -258,28 +258,36 @@ class SendCoin extends React.Component {
return ( return (
<span> <span>
<i className={this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i> <span className="text">[ {mainAddressAmount} {this.props.ActiveCoin.coin} ] {mainAddress}</span> <i className={ this.state.addressType === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> <span className="text">[ { mainAddressAmount } { this.props.ActiveCoin.coin } ] { mainAddress }</span>
</span> </span>
); );
} else { } else {
return ( return (
<span>- Select Transparent or Private Address -</span> <span>- { translate('SEND.SELECT_T_OR_Z_ADDR') } -</span>
); );
} }
} }
renderAddressList() { renderAddressList() {
return ( return (
<div className={'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '')}> <div className={ 'btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ' + (this.state.addressSelectorOpen ? 'open' : '') }>
<button type="button" className="btn dropdown-toggle btn-info" data-toggle="dropdown" data-id="kmd_wallet_send_from" title="- Select Transparent or Private Address -" aria-expanded="true" onClick={this.openDropMenu}> <button
<span className="filter-option pull-left">{this.renderSelectorCurrentLabel()} </span>&nbsp;<span className="bs-caret"><span className="caret"></span></span> type="button"
className="btn dropdown-toggle btn-info"
title={ '-' + translate('SEND.SELECT_T_OR_Z_ADDR') + '-' }
aria-expanded="true"
onClick={ this.openDropMenu }>
<span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>&nbsp;
<span className="bs-caret">
<span className="caret"></span>
</span>
</button> </button>
<div className="dropdown-menu open"> <div className="dropdown-menu open">
<ul className="dropdown-menu inner" role="menu"> <ul className="dropdown-menu inner" role="menu">
<li className="selected"> <li className="selected">
<a tabIndex="0"><span className="text"> - Select Transparent or Private Address - </span><span className="glyphicon glyphicon-ok check-mark"></span></a> <a tabIndex="0"><span className="text"> - { translate('SEND.SELECT_T_OR_Z_ADDR') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
</li> </li>
{this.renderAddressByType('public')} { this.renderAddressByType('public') }
</ul> </ul>
</div> </div>
</div> </div>
@ -386,7 +394,8 @@ class SendCoin extends React.Component {
.then(function(json) { .then(function(json) {
console.log('sendData', sendData); console.log('sendData', sendData);
console.log('iguanaUTXORawTXJSON', json); console.log('iguanaUTXORawTXJSON', json);
if (json.result === 'success' && json.completed === true) { if (json.result === 'success' &&
json.completed === true) {
Store.dispatch(triggerToaster(true, translate('TOASTR.SIGNED_TX_GENERATED') + '.', translate('TOASTR.WALLET_NOTIFICATION'), 'success')); Store.dispatch(triggerToaster(true, translate('TOASTR.SIGNED_TX_GENERATED') + '.', translate('TOASTR.WALLET_NOTIFICATION'), 'success'));
if (sendData.sendsig === 1) { if (sendData.sendsig === 1) {
@ -457,7 +466,7 @@ class SendCoin extends React.Component {
console.log(result); console.log(result);
resolve(result); resolve(result);
forceUpdateCache(); forceUpdateCache();
Store.dispatch(triggerToaster(true, 'Local UTXO data is updated. Ready to send new transaction.', translate('TOASTR.WALLET_NOTIFICATION'), 'info')); Store.dispatch(triggerToaster(true, translate('TOASTR.LOCAL_UTXO_UPDATED'), translate('TOASTR.WALLET_NOTIFICATION'), 'info'));
this.setState(Object.assign({}, this.state, { this.setState(Object.assign({}, this.state, {
utxoMethodInProgress: false, utxoMethodInProgress: false,
@ -466,10 +475,10 @@ class SendCoin extends React.Component {
}.bind(this)); }.bind(this));
}.bind(this); }.bind(this);
Store.dispatch(triggerToaster(true, 'Awaiting transaction data response...', translate('TOASTR.WALLET_NOTIFICATION'), 'info')); Store.dispatch(triggerToaster(true, translate('TOASTR.AWAITING_TX_RESP') + '...', translate('TOASTR.WALLET_NOTIFICATION'), 'info'));
function waterfallUTXOProcess() { function waterfallUTXOProcess() {
Store.dispatch(triggerToaster(true, 'Processing UTXO...', translate('TOASTR.WALLET_NOTIFICATION'), 'info')); Store.dispatch(triggerToaster(true, translate('TOASTR.PROCESSING_UTXO') + '...', translate('TOASTR.WALLET_NOTIFICATION'), 'info'));
getTxidData() getTxidData()
.then(function(gettxdata) { .then(function(gettxdata) {
@ -544,14 +553,17 @@ class SendCoin extends React.Component {
} else if (key === 'rawtx') { } else if (key === 'rawtx') {
return this.renderSignedTx(true); return this.renderSignedTx(true);
} else if (key === 'complete' || key === 'completed' || key === 'result') { } else if (key === 'complete' || key === 'completed' || key === 'result') {
if (this.props.ActiveCoin.lastSendToResponse[key] === true || this.props.ActiveCoin.lastSendToResponse[key] === 'success') { if (this.props.ActiveCoin.lastSendToResponse[key] === true ||
this.props.ActiveCoin.lastSendToResponse[key] === 'success') {
return ( return (
<span className="label label-success">{this.props.ActiveCoin.lastSendToResponse[key] === true ? 'true' : 'success'}</span> <span className="label label-success">{ this.props.ActiveCoin.lastSendToResponse[key] === true ? 'true' : 'success' }</span>
); );
} else { } else {
if (key === 'result' && this.props.ActiveCoin.lastSendToResponse.result && typeof this.props.ActiveCoin.lastSendToResponse.result !== 'object') { if (key === 'result' &&
this.props.ActiveCoin.lastSendToResponse.result &&
typeof this.props.ActiveCoin.lastSendToResponse.result !== 'object') {
return ( return (
<span>{this.props.ActiveCoin.lastSendToResponse.result}</span> <span>{ this.props.ActiveCoin.lastSendToResponse.result }</span>
); );
} else { } else {
return ( return (
@ -562,11 +574,11 @@ class SendCoin extends React.Component {
} else if (key === 'error') { } else if (key === 'error') {
if (Object.keys(this.props.ActiveCoin.lastSendToResponse[key]).length) { if (Object.keys(this.props.ActiveCoin.lastSendToResponse[key]).length) {
return ( return (
<span>{JSON.stringify(this.props.ActiveCoin.lastSendToResponse[key], null, '\t')}</span> <span>{ JSON.stringify(this.props.ActiveCoin.lastSendToResponse[key], null, '\t') }</span>
); );
} else { } else {
return ( return (
<span className="label label-danger">{this.props.ActiveCoin.lastSendToResponse[key]}</span> <span className="label label-danger">{ this.props.ActiveCoin.lastSendToResponse[key] }</span>
); );
} }
} else if (key === 'sendrawtransaction') { } else if (key === 'sendrawtransaction') {
@ -581,7 +593,7 @@ class SendCoin extends React.Component {
} }
} else if (key === 'txid' || key === 'sent') { } else if (key === 'txid' || key === 'sent') {
return ( return (
<span>{this.props.ActiveCoin.lastSendToResponse[key]}</span> <span>{ this.props.ActiveCoin.lastSendToResponse[key] }</span>
); );
} else if (key === 'tag') { } else if (key === 'tag') {
return null; return null;
@ -596,9 +608,9 @@ class SendCoin extends React.Component {
for (let key in _response) { for (let key in _response) {
if (key !== 'tag') { if (key !== 'tag') {
items.push( items.push(
<tr key={key}> <tr key={ key }>
<td>{key}</td> <td>{ key }</td>
<td>{this.renderKey(key)}</td> <td>{ this.renderKey(key) }</td>
</tr> </tr>
); );
} }
@ -607,10 +619,10 @@ class SendCoin extends React.Component {
return items; return items;
} else { } else {
return ( return (
<div style={{padding: '20px', textAlign: 'center'}}> <div style={{ padding: '20px', textAlign: 'center' }}>
<div style={{padding: '10px 0'}}> <div style={{ padding: '10px 0' }}>
Processing transaction...<br /> { translate('SEND.PROCESSING_TRANSACTION') }...<br />
Note: it may take a few minutes to complete the transaction. { translate('SEND.NOTE_IT_WILL_TAKE') }.
</div> </div>
<div className="loader-wrapper active"> <div className="loader-wrapper active">
<div className="loader-layer loader-blue"> <div className="loader-layer loader-blue">
@ -687,11 +699,25 @@ class SendCoin extends React.Component {
return ( return (
<div className="row"> <div className="row">
<div className="col-lg-6 form-group form-material"> <div className="col-lg-6 form-group form-material">
<label className="control-label" htmlFor="kmd_wallet_sendto">Fetch OpenAlias recipient address</label> <label
<input type="text" className="form-control" name="sendToOA" onChange={this.updateInput} id="kmd_wallet_sendto" placeholder="Enter an alias as address@site.com" autoComplete="off" required /> className="control-label"
htmlFor="kmd_wallet_sendto">Fetch OpenAlias recipient address</label>
<input
type="text"
className="form-control"
name="sendToOA"
onChange={ this.updateInput }
id="kmd_wallet_sendto"
placeholder="Enter an alias as address@site.com"
autoComplete="off"
required />
</div> </div>
<div className="col-lg-6 form-group form-material"> <div className="col-lg-6 form-group form-material">
<button type="button" className="btn btn-primary waves-effect waves-light" id="kmd_wallet_send_coins_btn" onClick={this.getOAdress}> <button
type="button"
className="btn btn-primary waves-effect waves-light"
id="kmd_wallet_send_coins_btn"
onClick={ this.getOAdress }>
Get address Get address
</button> </button>
</div> </div>
@ -710,7 +736,10 @@ class SendCoin extends React.Component {
<div className="pull-left margin-right-10"> <div className="pull-left margin-right-10">
<input type="checkbox" id="edexcoin_send_api_type" /> <input type="checkbox" id="edexcoin_send_api_type" />
</div> </div>
<label className="padding-top-3" htmlFor="edexcoin_send_api_type" onClick={this.toggleSendAPIType}>Send via sendtoaddress API</label> <label
className="padding-top-3"
htmlFor="edexcoin_send_api_type"
onClick={ this.toggleSendAPIType }>{ translate('SEND.SEND_VIA') } sendtoaddress API</label>
</div> </div>
</div> </div>
); );
@ -720,80 +749,119 @@ class SendCoin extends React.Component {
} }
render() { render() {
if (this.props.ActiveCoin && this.props.ActiveCoin.send && this.props.ActiveCoin.mode !== 'native') { if (this.props.ActiveCoin &&
this.props.ActiveCoin.send &&
this.props.ActiveCoin.mode !== 'native') {
return ( return (
<div className="col-sm-12 padding-top-10" id="edexcoin_send"> <div className="col-sm-12 padding-top-10" id="edexcoin_send">
<div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12"> <div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
<div className="steps row" style={{marginTop: '10px'}}> <div className="steps row" style={{ marginTop: '10px' }}>
<div className={this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4'} id="edexcoin_send_step_1"> <div
className={ this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4' }
id="edexcoin_send_step_1">
<span className="step-number">1</span> <span className="step-number">1</span>
<div className="step-desc"> <div className="step-desc">
<span className="step-title">{translate('INDEX.FILL_SEND_FORM')}</span> <span className="step-title">{ translate('INDEX.FILL_SEND_FORM') }</span>
<p>{translate('INDEX.FILL_SEND_DETAILS')}</p> <p>{ translate('INDEX.FILL_SEND_DETAILS') }</p>
</div> </div>
</div> </div>
<div className={this.state.currentStep === 1 ? 'step col-md-4 current' : 'step col-md-4'} id="edexcoin_send_step_2"> <div
className={ this.state.currentStep === 1 ? 'step col-md-4 current' : 'step col-md-4' }
id="edexcoin_send_step_2">
<span className="step-number">2</span> <span className="step-number">2</span>
<div className="step-desc"> <div className="step-desc">
<span className="step-title">{translate('INDEX.CONFIRMING')}</span> <span className="step-title">{ translate('INDEX.CONFIRMING') }</span>
<p>{translate('INDEX.CONFIRM_DETAILS')}</p> <p>{ translate('INDEX.CONFIRM_DETAILS') }</p>
</div> </div>
</div> </div>
<div className={this.state.currentStep === 2 ? 'step col-md-4 current' : 'step col-md-4'} id="edexcoin_send_step_3"> <div
className={ this.state.currentStep === 2 ? 'step col-md-4 current' : 'step col-md-4' }
id="edexcoin_send_step_3">
<span className="step-number">3</span> <span className="step-number">3</span>
<div className="step-desc"> <div className="step-desc">
<span className="step-title">{translate('INDEX.PROCESSING_TX')}</span> <span className="step-title">{ translate('INDEX.PROCESSING_TX') }</span>
<p>{translate('INDEX.PROCESSING_DETAILS')}</p> <p>{ translate('INDEX.PROCESSING_DETAILS') }</p>
</div> </div>
</div> </div>
</div> </div>
<div className={this.state.currentStep === 0 ? 'panel' : 'panel hide'} id="edexcoin-send-screen"> <div className={ this.state.currentStep === 0 ? 'panel' : 'panel hide' } id="edexcoin-send-screen">
<div className="panel-heading"> <div className="panel-heading">
<h3 data-edexcoin="COIN" className="panel-title"> <h3 className="panel-title">
{translate('INDEX.SEND')} {this.props.ActiveCoin.coin} { translate('INDEX.SEND') } { this.props.ActiveCoin.coin }
</h3> </h3>
</div> </div>
<div className="panel-body container-fluid"> <div className="panel-body container-fluid">
<form className="edexcoin-send-form" data-edexcoin="COIN" method="post" role="form" autoComplete="off"> <form className="edexcoin-send-form" method="post" role="form" autoComplete="off">
{this.renderSendApiTypeSelector()} {this.renderSendApiTypeSelector()}
<div className="row"> <div className="row">
<div className={this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide'}> <div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide' }>
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_send_from">{translate('INDEX.SEND_FROM')}</label> <label className="control-label" htmlFor="edexcoin_send_from">{ translate('INDEX.SEND_FROM') }</label>
{this.renderAddressList()} { this.renderAddressList() }
</div> </div>
</div> </div>
{this.renderOASendUI()} { this.renderOASendUI() }
<div className="row"> <div className="row">
<div className="col-xlg-12 form-group form-material"> <div className="col-xlg-12 form-group form-material">
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_sendto">{translate('INDEX.SEND_TO')}</label> <label className="control-label" htmlFor="edexcoin_sendto">{ translate('INDEX.SEND_TO') }</label>
<input type="text" className="form-control" id="edexcoin_sendto" name="sendTo" placeholder="Enter address" autoComplete="off" value={this.state.sendTo} onChange={this.updateInput} required /> <input
type="text"
className="form-control"
id="edexcoin_sendto"
name="sendTo"
placeholder={ translate('SEND.ENTER_AN_ADDRESS') }
autoComplete="off"
value={ this.state.sendTo }
onChange={ this.updateInput }
required />
</div> </div>
<div className="col-lg-6 form-group form-material"> <div className="col-lg-6 form-group form-material">
<label className="control-label" htmlFor="edexcoin_amount" data-edexcoin="COIN" id="edexcoin_amount_label"> <label className="control-label" htmlFor="edexcoin_amount" id="edexcoin_amount_label">
{this.props.ActiveCoin.coin} { this.props.ActiveCoin.coin }
</label> </label>
<input type="text" className="form-control" id="edexcoin_amount" name="amount" placeholder="0.000" autoComplete="off" onChange={this.updateInput} /> <input
type="text"
className="form-control"
id="edexcoin_amount"
name="amount"
placeholder="0.000"
autoComplete="off"
onChange={ this.updateInput } />
</div> </div>
<div className="col-lg-6 form-group form-material"> <div className="col-lg-6 form-group form-material">
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_fee">{translate('INDEX.FEE')}</label> <label className="control-label" htmlFor="edexcoin_fee">{ translate('INDEX.FEE') }</label>
<input type="text" className="form-control" id="edexcoin_fee" name="fee" defaultValue={this.state.fee} value={this.state.fee} placeholder="0.000" autoComplete="off" onChange={this.updateInput} /> <input
type="text"
className="form-control"
id="edexcoin_fee"
name="fee"
defaultValue={ this.state.fee }
value={ this.state.fee }
placeholder="0.000"
autoComplete="off"
onChange={ this.updateInput } />
</div> </div>
<div className="col-lg-12"> <div className="col-lg-12">
<span data-edexcoin="KMD"> <span data-edexcoin="KMD">
<b>{translate('INDEX.TOTAL')} ({translate('INDEX.AMOUNT_SM')} - txfee):</b> <span id="edexcoin_total_value">{Number(this.state.amount) - Number(this.state.fee)}</span> {this.props.ActiveCoin.coin} <strong>{ translate('INDEX.TOTAL') } ({ translate('INDEX.AMOUNT_SM') } - txfee):</strong> <span id="edexcoin_total_value">{ Number(this.state.amount) - Number(this.state.fee) }</span> { this.props.ActiveCoin.coin }
</span> </span>
</div> </div>
<div className="col-lg-10 margin-top-10"> <div className="col-lg-10 margin-top-10">
<div className="pull-left margin-right-10"> <div className="pull-left margin-right-10">
<input type="checkbox" id="edexcoin_send_sig" data-plugin="switchery" data-size="small" /> <input type="checkbox" id="edexcoin_send_sig" />
</div> </div>
<label className="padding-top-3" htmlFor="edexcoin_send_sig" onClick={this.toggleSendSig}>{translate('INDEX.DONT_SEND')}</label> <label
className="padding-top-3"
htmlFor="edexcoin_send_sig"
onClick={ this.toggleSendSig }>{ translate('INDEX.DONT_SEND') }</label>
</div> </div>
{this.renderUTXOCacheInfo()} { this.renderUTXOCacheInfo()}
<div className="col-lg-12"> <div className="col-lg-12">
<button type="button" className="btn btn-primary waves-effect waves-light pull-right edexcoin_send_coins_btn_step1" onClick={() => this.changeSendCoinStep(1)}> <button
{translate('INDEX.SEND')} {Number(this.state.amount) - Number(this.state.fee)} {this.props.ActiveCoin.coin} type="button"
className="btn btn-primary waves-effect waves-light pull-right edexcoin_send_coins_btn_step1"
onClick={ () => this.changeSendCoinStep(1) }>
{ translate('INDEX.SEND') } { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin }
</button> </button>
</div> </div>
</div> </div>
@ -802,64 +870,78 @@ class SendCoin extends React.Component {
</div> </div>
</div> </div>
<div className={this.state.currentStep === 1 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide'}> <div className={ this.state.currentStep === 1 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide' }>
<div className="panel" id="edexcoin-send-confirm-screen"> <div className="panel" id="edexcoin-send-confirm-screen">
<div className="panel-body"> <div className="panel-body">
<div className="row"> <div className="row">
<div className="col-xs-12"> <div className="col-xs-12">
<b>{translate('INDEX.TO')}</b> <strong>{translate('INDEX.TO')}</strong>
</div> </div>
<div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendto_addr">{this.state.sendTo}</div> <div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendto_addr">{ this.state.sendTo }</div>
<div className="col-lg-6 col-sm-6 col-xs-6"> <div className="col-lg-6 col-sm-6 col-xs-6">
<span id="mdl_confirm_currency_send_amount">{this.state.amount}</span> {this.props.ActiveCoin.coin} <span id="mdl_confirm_currency_send_amount">{this.state.amount}</span> { this.props.ActiveCoin.coin }
</div> </div>
<div className="col-lg-6 col-sm-6 col-xs-12">{translate('INDEX.TX_FEE_REQ')}</div> <div className="col-lg-6 col-sm-6 col-xs-12">{ translate('INDEX.TX_FEE_REQ') }</div>
<div className="col-lg-6 col-sm-6 col-xs-6"> <div className="col-lg-6 col-sm-6 col-xs-6">
<span id="mdl_confirm_currency_send_fee">{this.state.fee}</span> {this.props.ActiveCoin.coin} <span id="mdl_confirm_currency_send_fee">{ this.state.fee }</span> { this.props.ActiveCoin.coin }
</div> </div>
</div> </div>
<br /> <br />
<div className="row"> <div className="row">
<div className="col-xs-12"> <div className="col-xs-12">
<b>{translate('INDEX.FROM')}</b> <strong>{ translate('INDEX.FROM') }</strong>
</div> </div>
<div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendfrom_addr">{this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]}</div> <div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendfrom_addr">{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }</div>
<div className="col-lg-6 col-sm-6 col-xs-6" style={{color: '#f44336'}}> <div className="col-lg-6 col-sm-6 col-xs-6" style={{ color: '#f44336' }}>
<span id="mdl_confirm_currency_sendfrom_total_dedcut">{Number(this.state.amount) - Number(this.state.fee)}</span> {this.props.ActiveCoin.coin} <span id="mdl_confirm_currency_sendfrom_total_dedcut">{ Number(this.state.amount) - Number(this.state.fee) }</span> { this.props.ActiveCoin.coin }
</div> </div>
</div> </div>
<div className="widget-body-footer"> <div className="widget-body-footer">
<a className="btn btn-default waves-effect waves-light" id="edexcoin_send_coins_back_btn" onClick={() => this.changeSendCoinStep(0)}>{translate('INDEX.BACK')}</a> <a
className="btn btn-default waves-effect waves-light"
id="edexcoin_send_coins_back_btn"
onClick={ () => this.changeSendCoinStep(0) }>{ translate('INDEX.BACK') }</a>
<div className="widget-actions pull-right"> <div className="widget-actions pull-right">
<button type="button" className="btn btn-primary" id="edexcoin_send_coins_btn" onClick={() => this.changeSendCoinStep(2)}>{translate('INDEX.CONFIRM')}</button> <button
type="button"
className="btn btn-primary"
id="edexcoin_send_coins_btn"
onClick={ () => this.changeSendCoinStep(2) }>{ translate('INDEX.CONFIRM') }</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className={this.state.currentStep === 2 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide'}> <div className={ this.state.currentStep === 2 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide' }>
<div className="panel" id="edexcoin-send-txdetails-screen"> <div className="panel" id="edexcoin-send-txdetails-screen">
<div className="panel-heading"> <div className="panel-heading">
<h4 className="panel-title">{translate('INDEX.TRANSACTION_RESULT')}</h4> <h4 className="panel-title">{ translate('INDEX.TRANSACTION_RESULT') }</h4>
<div className={!this.state.sendSig ? 'hide' : 'center'}> <div className={ !this.state.sendSig ? 'hide' : 'center' }>
You picked option "{translate('INDEX.DONT_SEND')}" { translate('INDEX.YOU_PICKED_OPT') } "{ translate('INDEX.DONT_SEND') }"
</div> </div>
<table className="table table-hover table-striped edexcoin_sendto_result" id="edexcoin_sendto_result"> <table
className="table table-hover table-striped edexcoin_sendto_result"
id="edexcoin_sendto_result">
<thead> <thead>
<tr> <tr>
<th>{translate('INDEX.KEY')}</th> <th>{ translate('INDEX.KEY') }</th>
<th>{translate('INDEX.INFO')}</th> <th>{ translate('INDEX.INFO') }</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.renderSendCoinResponse()} { this.renderSendCoinResponse() }
</tbody> </tbody>
</table> </table>
<div className="widget-body-footer"> <div className="widget-body-footer">
<div className="widget-actions margin-bottom-15 margin-right-15"> <div className="widget-actions margin-bottom-15 margin-right-15">
<button type="button" className="btn btn-primary" id="edexcoin_send_coins_anothertx_btn" onClick={() => this.changeSendCoinStep(0)} disabled={this.state.utxoMethodInProgress}>{!this.state.utxoMethodInProgress ? translate('INDEX.MAKE_ANOTHER_TX') : 'Please wait...'}</button> <button
type="button"
className="btn btn-primary"
id="edexcoin_send_coins_anothertx_btn"
onClick={ () => this.changeSendCoinStep(0) }
disabled={ this.state.utxoMethodInProgress }>{ !this.state.utxoMethodInProgress ? translate('INDEX.MAKE_ANOTHER_TX') : translate('SEND.PLEASE_WAIT') + '...' }</button>
</div> </div>
</div> </div>
</div> </div>

337
react/src/components/dashboard/settings.js

@ -92,7 +92,9 @@ class Settings extends React.Component {
if (this.props.Settings.rawPeers && if (this.props.Settings.rawPeers &&
this.state.getPeersCoin && this.state.getPeersCoin &&
this.props.Settings.rawPeers[coin]) { this.props.Settings.rawPeers[coin]) {
return this.props.Settings.rawPeers[coin].map((ip) => <div key={ip}>{ip}</div>); return this.props.Settings.rawPeers[coin].map((ip) =>
<div key={ ip }>{ ip }</div>
);
} else { } else {
return null; return null;
} }
@ -107,70 +109,74 @@ class Settings extends React.Component {
if (releaseInfo) { if (releaseInfo) {
return ( return (
<div className="panel" id="AppInfo"> <div className="panel" id="AppInfo">
<div className="panel-heading" role="tab" onClick={() => this.openTab('AppInfo', 8)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('AppInfo', 8) }>
<a className={this.state.activeTab === 8 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#AppInfoAccordion"> <a className={this.state.activeTab === 8 ? 'panel-title' : 'panel-title collapsed'}>
<i className="icon md-info" aria-hidden="true"></i>App Info <i className="icon md-info" aria-hidden="true"></i>{ translate('SETTINGS.APP_INFO') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 8 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 8 ? this.state.activeTabHeight + 'px' : '10px'}} aria-labelledby="DebugLog" role="tabpanel"> <div
className={ this.state.activeTab === 8 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 8 ? this.state.activeTabHeight + 'px' : '10px' }}
aria-labelledby="DebugLog"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<div className="col-sm-12" style={{paddingTop: '15px'}}> <div className="col-sm-12" style={{ paddingTop: '15px' }}>
<div className="row"> <div className="row">
<h5>App Release</h5> <h5>{ translate('SETTINGS.APP_RELEASE') }</h5>
<div> <div>
Name: {this.props.Settings.appInfo.releaseInfo.name} { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name }
</div> </div>
<div> <div>
Version: {this.props.Settings.appInfo.releaseInfo.version} { translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version }
</div> </div>
</div> </div>
</div> </div>
<div className="col-sm-12" style={{paddingTop: '20px'}}> <div className="col-sm-12" style={{ paddingTop: '20px' }}>
<div className="row"> <div className="row">
<h5>System Info</h5> <h5>{ translate('SETTINGS.SYS_INFO') }</h5>
<div> <div>
Architecture: {this.props.Settings.appInfo.sysInfo.arch} { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch }
</div> </div>
<div> <div>
OS Type: {this.props.Settings.appInfo.sysInfo.os_type} { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type }
</div> </div>
<div> <div>
OS Platfrom: {this.props.Settings.appInfo.sysInfo.platform} { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform }
</div> </div>
<div> <div>
OS Release: {this.props.Settings.appInfo.sysInfo.os_release} { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release }
</div> </div>
<div> <div>
CPU: {this.props.Settings.appInfo.sysInfo.cpu} { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu }
</div> </div>
<div> <div>
CPU Cores: {this.props.Settings.appInfo.sysInfo.cpu_cores} { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores }
</div> </div>
<div> <div>
Memory: {this.props.Settings.appInfo.sysInfo.totalmem_readable} { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable }
</div> </div>
</div> </div>
</div> </div>
<div className="col-sm-12" style={{paddingTop: '20px'}}> <div className="col-sm-12" style={{ paddingTop: '20px' }}>
<div className="row"> <div className="row">
<h5>Locations</h5> <h5>{ translate('SETTINGS.LOCATIONS') }</h5>
<div> <div>
Cache: {this.props.Settings.appInfo.dirs.cacheLocation} { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation }
</div> </div>
<div> <div>
Config: {this.props.Settings.appInfo.dirs.configLocation} { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation }
</div> </div>
<div> <div>
Iguana Bin: {this.props.Settings.appInfo.dirs.iguanaBin} Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin }
</div> </div>
<div> <div>
Iguana Dir: {this.props.Settings.appInfo.dirs.iguanaDir} Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir }
</div> </div>
<div> <div>
Komodo Bin: {this.props.Settings.appInfo.dirs.komododBin} Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin }
</div> </div>
<div> <div>
Komodo Dir: {this.props.Settings.appInfo.dirs.komodoDir} Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir }
</div> </div>
</div> </div>
</div> </div>
@ -190,7 +196,9 @@ class Settings extends React.Component {
if (this.props.Settings.supernetPeers && if (this.props.Settings.supernetPeers &&
this.state.getPeersCoin && this.state.getPeersCoin &&
this.props.Settings.supernetPeers[coin]) { this.props.Settings.supernetPeers[coin]) {
return this.props.Settings.supernetPeers[coin].map((ip) => <div key={ip}>{ip}</div>); return this.props.Settings.supernetPeers[coin].map((ip) =>
<div key={ ip }>{ ip }</div>
);
} else { } else {
return null; return null;
} }
@ -217,15 +225,12 @@ class Settings extends React.Component {
for (let key in _appSettings) { for (let key in _appSettings) {
if (key.indexOf('__') === -1) { if (key.indexOf('__') === -1) {
_appSettingsPristine[key] = _appSettings[key]; _appSettingsPristine[key] = _appSettings[key];
// console.log('key changed: ' + key + ', value: ' + _appSettings[key]);
} else { } else {
const _nestedKey = key.split('__'); const _nestedKey = key.split('__');
_appSettingsPristine[_nestedKey[0]][_nestedKey[1]] = _appSettings[key]; _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)); Store.dispatch(saveAppConfig(_appSettingsPristine));
} }
@ -236,34 +241,42 @@ class Settings extends React.Component {
for (let key in _appConfig) { for (let key in _appConfig) {
if (typeof _appConfig[key] === 'object') { if (typeof _appConfig[key] === 'object') {
items.push( items.push(
<tr key={`app-settings-${key}`}> <tr key={ `app-settings-${key}` }>
<td style={{padding: '15px'}}> <td style={{ padding: '15px' }}>
{key} { key }
</td> </td>
<td style={{padding: '15px'}}></td> <td style={{ padding: '15px' }}></td>
</tr> </tr>
); );
for (let _key in _appConfig[key]) { for (let _key in _appConfig[key]) {
items.push( items.push(
<tr key={`app-settings-${key}-${_key}`}> <tr key={ `app-settings-${key}-${_key}` }>
<td style={{padding: '15px', paddingLeft: '30px'}}> <td style={{ padding: '15px', paddingLeft: '30px' }}>
{_key} { _key }
</td> </td>
<td style={{padding: '15px'}}> <td style={{ padding: '15px' }}>
<input type="text" name={`${key}__${_key}`} defaultValue={_appConfig[key][_key]} onChange={this.updateInputSettings} /> <input
type="text"
name={ `${key}__${_key}` }
defaultValue={ _appConfig[key][_key] }
onChange={ this.updateInputSettings } />
</td> </td>
</tr> </tr>
); );
} }
} else { } else {
items.push( items.push(
<tr key={`app-settings-${key}`}> <tr key={ `app-settings-${key}` }>
<td style={{padding: '15px'}}> <td style={{ padding: '15px' }}>
{key} { key }
</td> </td>
<td style={{padding: '15px'}}> <td style={{ padding: '15px' }}>
<input type="text" name={`${key}`} defaultValue={_appConfig[key]} onChange={this.updateInputSettings} /> <input
type="text"
name={ `${key}` }
defaultValue={ _appConfig[key] }
onChange={ this.updateInputSettings } />
</td> </td>
</tr> </tr>
); );
@ -284,7 +297,7 @@ class Settings extends React.Component {
return _translationComponents.map((_translation) => return _translationComponents.map((_translation) =>
<span> <span>
{_translation} { _translation }
<br /> <br />
</span> </span>
); );
@ -298,58 +311,63 @@ class Settings extends React.Component {
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<div className="row" id="iguana-wallet-settings"> <div className="row" id="iguana-wallet-settings">
<div className="col-xlg-12 col-md-12"> <div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{translate('INDEX.WALLET_SETTINGS')}</h4> <h4 className="font-size-14 text-uppercase">{ translate('INDEX.WALLET_SETTINGS') }</h4>
<div className="panel-group" id="SettingsAccordion" aria-multiselectable="true" role="tablist"> <div className="panel-group" id="SettingsAccordion" aria-multiselectable="true" role="tablist">
<div className="panel" id="WalletInfo"> <div className="panel" id="WalletInfo">
<div className="panel-heading" role="tab" onClick={() => this.openTab('WalletInfo', 0)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('WalletInfo', 0) }>
<a className={this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed'}> <a className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon md-balance-wallet" aria-hidden="true"></i>{translate('INDEX.WALLET_INFO')} <i className="icon md-balance-wallet" aria-hidden="true"></i>{ translate('INDEX.WALLET_INFO') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '10px'}} id="WalletInfoTab" aria-labelledby="WalletInfo" role="tabpanel"> <div
className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '10px' }}
id="WalletInfoTab"
aria-labelledby="WalletInfo"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<table className="table" id="wallet-info-table"> <table className="table" id="wallet-info-table">
<thead> <thead>
<tr> <tr>
<th width="10%">{translate('INDEX.KEY')}</th> <th width="10%">{ translate('INDEX.KEY') }</th>
<th>{translate('INDEX.VALUE')}</th> <th>{ translate('INDEX.VALUE') }</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>pubkey</td> <td style={{ fontWeight: 'bold' }}>pubkey</td>
<td> <td>
<div id="winfo_pubkey_value">{this.props.Main.activeHandle.pubkey}</div> <div id="winfo_pubkey_value">{ this.props.Main.activeHandle.pubkey }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>btcpubkey</td> <td style={{ fontWeight: 'bold' }}>btcpubkey</td>
<td> <td>
<div id="winfo_btcpubkey_value">{this.props.Main.activeHandle.btcpubkey}</div> <div id="winfo_btcpubkey_value">{ this.props.Main.activeHandle.btcpubkey }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>rmd160</td> <td style={{ fontWeight: 'bold' }}>rmd160</td>
<td> <td>
<div id="winfo_rmd160_value">{this.props.Main.activeHandle.rmd160}</div> <div id="winfo_rmd160_value">{ this.props.Main.activeHandle.rmd160 }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>NXT</td> <td style={{ fontWeight: 'bold' }}>NXT</td>
<td> <td>
<div id="winfo_NXT_value">{this.props.Main.activeHandle.NXT}</div> <div id="winfo_NXT_value">{ this.props.Main.activeHandle.NXT }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>notary</td> <td style={{ fontWeight: 'bold' }}>notary</td>
<td> <td>
<div id="winfo_notary_value">{this.props.Main.activeHandle.notary}</div> <div id="winfo_notary_value">{ this.props.Main.activeHandle.notary }</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={{fontWeight: 'bold'}}>status</td> <td style={{ fontWeight: 'bold' }}>status</td>
<td> <td>
<div id="winfo_status_value">{this.props.Main.activeHandle.status}</div> <div id="winfo_status_value">{ this.props.Main.activeHandle.status }</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -359,62 +377,89 @@ class Settings extends React.Component {
</div> </div>
<div className="panel" id="AddNodeforCoin"> <div className="panel" id="AddNodeforCoin">
<div className="panel-heading" role="tab" onClick={() => this.openTab('AddNodeforCoin', 1)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('AddNodeforCoin', 1) }>
<a className={this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion"> <a className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon md-plus-square" aria-hidden="true"></i>{translate('INDEX.ADD_NODE')} <i className="icon md-plus-square" aria-hidden="true"></i>{ translate('INDEX.ADD_NODE') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '10px'}} id="AddNodeforCoinTab" aria-labelledby="AddNodeforCoin" role="tabpanel"> <div
className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '10px' }}
id="AddNodeforCoinTab"
aria-labelledby="AddNodeforCoin"
role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<div className="row"> <div className="row">
<div className="col-sm-6"> <div className="col-sm-6">
<div className="col-sm-12"> <div className="col-sm-12">
<p>{translate('INDEX.USE_THIS_SECTION')}</p> <p>{ translate('INDEX.USE_THIS_SECTION') }</p>
</div> </div>
<div className="col-sm-8 col-xs-12"> <div className="col-sm-8 col-xs-12">
<div className="form-group"> <div className="form-group">
<select className="form-control form-material" id="settings_select_coin_options" name="getPeersCoin" onChange={this.updateInput}> <select
<option>{translate('INDEX.SELECT_COIN')}</option> className="form-control form-material"
id="settings_select_coin_options"
name="getPeersCoin"
onChange={ this.updateInput }>
<option>{ translate('INDEX.SELECT_COIN') }</option>
<AddCoinOptionsCrypto /> <AddCoinOptionsCrypto />
<AddCoinOptionsAC /> <AddCoinOptionsAC />
<AddCoinOptionsACFiat /> <AddCoinOptionsACFiat />
</select> </select>
</div> </div>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}> <div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}>
<button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="settings_getcoinpeers_btn" onClick={this.checkNodes}>{translate('INDEX.CHECK_NODES')}</button> <button
type="button"
className="btn btn-primary waves-effect waves-light"
id="settings_getcoinpeers_btn"
onClick={ this.checkNodes }>{ translate('INDEX.CHECK_NODES') }</button>
</div> </div>
<div className="col-sm-12"> <div className="col-sm-12">
<h5> <h5>
SuperNET Peers: <span id="coin_supernetpeers_h"></span> SuperNET Peers: <span id="coin_supernetpeers_h"></span>
</h5> </h5>
<p id="coin_supernetpeers">{this.renderSNPeersList()}</p> <p id="coin_supernetpeers">{ this.renderSNPeersList() }</p>
<h5> <h5>
Raw Peers: <span id="coin_rawpeers_h"></span> Raw Peers: <span id="coin_rawpeers_h"></span>
</h5> </h5>
<p id="coin_rawpeers">{this.renderPeersList()}</p> <p id="coin_rawpeers">{ this.renderPeersList() }</p>
</div> </div>
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<div className="col-sm-12"> <div className="col-sm-12">
<p>{translate('INDEX.USE_THIS_SECTION_PEER')}</p> <p>{ translate('INDEX.USE_THIS_SECTION_PEER') }</p>
</div> </div>
<div className="col-sm-8 col-xs-12"> <div className="col-sm-8 col-xs-12">
<div className="form-group"> <div className="form-group">
<select className="form-control form-material" id="settings_select_coin_addpeer_options" name="addNodeCoin" onChange={this.updateInput}> <select
<option>{translate('INDEX.SELECT_COIN')}</option> className="form-control form-material"
id="settings_select_coin_addpeer_options"
name="addNodeCoin"
onChange={ this.updateInput }>
<option>{ translate('INDEX.SELECT_COIN') }</option>
<AddCoinOptionsCrypto /> <AddCoinOptionsCrypto />
<AddCoinOptionsAC /> <AddCoinOptionsAC />
<AddCoinOptionsACFiat /> <AddCoinOptionsACFiat />
</select> </select>
</div> </div>
<div className="form-group"> <div className="form-group">
<input type="text" className="form-control" id="settings_add_peer_ip" name="addPeerIP" placeholder="Add Peer IP" onChange={this.updateInput} /> <input
type="text"
className="form-control"
id="settings_add_peer_ip"
name="addPeerIP"
placeholder={ translate('SETTINGS.ADD_PEER_IP') }
onChange={ this.updateInput } />
</div> </div>
</div> </div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}> <div className="col-sm-4 col-xs-12" style={{ textAlign: 'center' }}>
<button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="settings_addcoinpeers_btn" onClick={this.addNode}>{translate('INDEX.ADD_NODE')}</button> <button
type="button"
className="btn btn-primary waves-effect waves-light"
id="settings_addcoinpeers_btn"
onClick={ this.addNode }>{ translate('INDEX.ADD_NODE') }</button>
</div> </div>
</div> </div>
</div> </div>
@ -423,66 +468,93 @@ class Settings extends React.Component {
</div> </div>
<div className="panel" id="DumpWallet"> <div className="panel" id="DumpWallet">
<div className="panel-heading" role="tab" onClick={() => this.openTab('DumpWallet', 2)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('DumpWallet', 2) }>
<a className={this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion"> <a className={this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed'}>
<i className="icon wb-briefcase" aria-hidden="true"></i>{translate('INDEX.WALLET_BACKUP')} <i className="icon wb-briefcase" aria-hidden="true"></i>{ translate('INDEX.WALLET_BACKUP') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '10px'}} id="DumpWalletTab" aria-labelledby="DumpWallet" role="tabpanel"> <div
className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '10px' }}
id="DumpWalletTab"
aria-labelledby="DumpWallet"
role="tabpanel">
<div className="panel-body">Wallet Backup section to be updated soon.</div> <div className="panel-body">Wallet Backup section to be updated soon.</div>
</div> </div>
</div> </div>
<div className="panel" id="FiatCurrencySettings"> <div className="panel" id="FiatCurrencySettings">
<div className="panel-heading" role="tab" onClick={() => this.openTab('FiatCurrencySettings', 3)}> <div
<a className={this.state.activeTab === 3 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion"> className="panel-heading"
<i className="icon fa-money" aria-hidden="true"></i>{translate('INDEX.FIAT_CURRENCY')} role="tab"
onClick={ () => this.openTab('FiatCurrencySettings', 3) }>
<a className={ this.state.activeTab === 3 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon fa-money" aria-hidden="true"></i>{ translate('INDEX.FIAT_CURRENCY') }
</a> </a>
</div> </div>
<div className={this.state.activeTab === 3 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} style={{height: this.state.activeTab === 3 ? this.state.activeTabHeight + 'px' : '10px'}} id="FiatCurrencySettingsTab" aria-labelledby="FiatCurrencySettings" role="tabpanel"> <div
className={ this.state.activeTab === 3 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
style={{ height: this.state.activeTab === 3 ? this.state.activeTabHeight + 'px' : '10px' }}
id="FiatCurrencySettingsTab"
aria-labelledby="FiatCurrencySettings"
role="tabpanel">
<div className="panel-body">Fiat currency settings section to be updated soon.</div> <div className="panel-body">Fiat currency settings section to be updated soon.</div>
</div> </div>
</div> </div>
<div className="panel" id="ExportKeys"> <div className="panel" id="ExportKeys">
<div className="panel-heading" role="tab" onClick={() => this.openTab('ExportKeys', 4)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('ExportKeys', 4) }>
<a className={this.state.activeTab === 4 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion"> <a className={ this.state.activeTab === 4 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon md-key" aria-hidden="true"></i>{translate('INDEX.EXPORT_KEYS')} <i className="icon md-key" aria-hidden="true"></i>{ translate('INDEX.EXPORT_KEYS') }
</a> </a>
</div> </div>
<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={ 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"> <div className="panel-body">
<p> <p>
<div>{this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS')}</div><br/> <div>{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div><br/>
<strong> <strong>
<i>{translate('INDEX.PLEASE_KEEP_KEYS_SAFE')}</i> <i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i>
</strong> </strong>
</p> </p>
<div className="col-sm-12"></div> <div className="col-sm-12"></div>
<form className="wifkeys-form" method="post" action="javascript:" autoComplete="off"> <form className="wifkeys-form" method="post" action="javascript:" autoComplete="off">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input type="password" className="form-control" name="wifkeysPassphrase" id="wifkeys_passphrase" onChange={this.updateInput} /> <input
<label className="floating-label" htmlFor="wifkeys_passphrase">{translate('INDEX.PASSPHRASE')}</label> type="password"
className="form-control"
name="wifkeysPassphrase"
id="wifkeys_passphrase"
onChange={ this.updateInput } />
<label className="floating-label" htmlFor="wifkeys_passphrase">{ translate('INDEX.PASSPHRASE') }</label>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}> <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="wifkeys_passphrase_btn" onClick={this.exportWifKeys}>{translate('INDEX.GET_WIF_KEYS')}</button> <button
type="button"
className="btn btn-primary waves-effect waves-light"
id="wifkeys_passphrase_btn"
onClick={ this.exportWifKeys }>{ translate('INDEX.GET_WIF_KEYS') }</button>
</div> </div>
</form> </form>
<div className="col-sm-12" style={{paddingTop: '15px'}}> <div className="col-sm-12" style={{ paddingTop: '15px' }}>
<div className="row" id="wif-priv-keys" data-plugin="masonry"> <div className="row" id="wif-priv-keys">
<table className={this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide'}> <table className={ this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide' }>
<tr> <tr>
<td style={{width: '5%'}}> <td style={{ width: '5%' }}>
<strong>{this.props.ActiveCoin.coin}</strong> <strong>{ this.props.ActiveCoin.coin }</strong>
</td> </td>
<td>{this.props.Settings.address}</td> <td>{ this.props.Settings.address }</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<strong>{this.props.ActiveCoin.coin}Wif</strong> <strong>{ this.props.ActiveCoin.coin }Wif</strong>
</td> </td>
<td>{this.props.Settings.wifkey}</td> <td>{ this.props.Settings.wifkey }</td>
</tr> </tr>
</table> </table>
</div> </div>
@ -492,12 +564,17 @@ class Settings extends React.Component {
</div> </div>
<div className="panel" id="ImportKeys"> <div className="panel" id="ImportKeys">
<div className="panel-heading" role="tab" onClick={() => this.openTab('ImportKeys', 5)}> <div className="panel-heading" role="tab" onClick={ () => this.openTab('ImportKeys', 5) }>
<a className={this.state.activeTab === 5 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse"> <a className={ this.state.activeTab === 5 ? 'panel-title' : 'panel-title collapsed' }>
<i className="icon md-key" aria-hidden="true"></i>{translate('INDEX.IMPORT_KEYS')} <i className="icon md-key" aria-hidden="true"></i>{ translate('INDEX.IMPORT_KEYS') }
</a> </a>
</div> </div>
<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={ 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"> <div className="panel-body">
<p> <p>
<div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/> <div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/>
@ -510,8 +587,15 @@ class Settings extends React.Component {
<div className="col-sm-12"></div> <div className="col-sm-12"></div>
<form className="wifkeys-import-form" method="post" action="javascript:" autoComplete="off"> <form className="wifkeys-import-form" method="post" action="javascript:" autoComplete="off">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input type="text" className="form-control" name="importWifKey" id="import_wifkey" onChange={ this.updateInput } /> <input
<label className="floating-label" htmlFor="import_wifkey">{ translate('INDEX.INPUT_PRIV_KEY') }</label> 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') }</label>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'center' }}> <div className="col-sm-12 col-xs-12" style={{ textAlign: 'center' }}>
<button <button
@ -531,13 +615,18 @@ class Settings extends React.Component {
<i className="icon fa-bug" aria-hidden="true"></i>{ translate('INDEX.DEBUG_LOG') } <i className="icon fa-bug" aria-hidden="true"></i>{ translate('INDEX.DEBUG_LOG') }
</a> </a>
</div> </div>
<div className={ this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } <div
style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '10px' }} className={ this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel"> style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '10px' }}
id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
<div className="panel-body"> <div className="panel-body">
<p>{ translate('INDEX.DEBUG_LOG_DESC') }</p> <p>{ translate('INDEX.DEBUG_LOG_DESC') }</p>
<div className="col-sm-12"></div> <div className="col-sm-12"></div>
<form className="read-debug-log-import-form" method="post" action="javascript:" autoComplete="off"> <form
className="read-debug-log-import-form"
method="post"
action="javascript:"
autoComplete="off">
<div className="form-group form-material floating"> <div className="form-group form-material floating">
<input <input
type="text" type="text"
@ -546,14 +635,22 @@ class Settings extends React.Component {
id="read_debug_log_lines" id="read_debug_log_lines"
value={ this.state.debugLinesCount } value={ this.state.debugLinesCount }
onChange={ this.updateInput } /> onChange={ this.updateInput } />
<label className="floating-label" htmlFor="read_debug_log_lines">{ translate('INDEX.DEBUG_LOG_LINES') }</label> <label
className="floating-label"
htmlFor="read_debug_log_lines">{ translate('INDEX.DEBUG_LOG_LINES') }</label>
</div> </div>
<div className="form-group form-material floating"> <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</option> <option value="iguana">Iguana</option>
<option value="komodo">Komodo</option> <option value="komodo">Komodo</option>
</select> </select>
<label className="floating-label" htmlFor="settings_select_debuglog_options">{ translate('INDEX.TARGET') }</label> <label
className="floating-label"
htmlFor="settings_select_debuglog_options">{ translate('INDEX.TARGET') }</label>
</div> </div>
<div className="col-sm-12 col-xs-12" style={{ textAlign: 'center'}}> <div className="col-sm-12 col-xs-12" style={{ textAlign: 'center'}}>
<button <button

4
react/src/components/dashboard/walletsData.js

@ -286,7 +286,7 @@ class WalletsData extends React.Component {
className="dataTables_info" className="dataTables_info"
id="kmd-tx-history-tbl_info" id="kmd-tx-history-tbl_info"
role="status" role="status"
aria-live="polite">{ translate('INDEX.SHOWING') } { _paginationFrom } { translate('INDEX.TO') } { _paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div> aria-live="polite">{ translate('INDEX.SHOWING') } { _paginationFrom } { translate('INDEX.TO_ALT') } { _paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div>
</div> </div>
<div className="col-sm-7"> <div className="col-sm-7">
<div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate"> <div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate">
@ -628,7 +628,7 @@ class WalletsData extends React.Component {
</li> </li>
<li <li
role="presentation" role="presentation"
className={ !this.state.useCache || this.props.ActiveCoin.addresses.public.length === 1 ? 'hide' : '' }> className={ !this.state.useCache || this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses.public.length === 1 ? 'hide' : '' }>
<a role="menuitem" onClick={ this.basiliskRefreshAction }> <a role="menuitem" onClick={ this.basiliskRefreshAction }>
<i className="icon fa-cloud-download" aria-hidden="true"></i> { translate('INDEX.FETCH_ALL_ADDR') } <i className="icon fa-cloud-download" aria-hidden="true"></i> { translate('INDEX.FETCH_ALL_ADDR') }
</a> </a>

34
react/src/translate/en.js

@ -1,6 +1,7 @@
export const _lang = { export const _lang = {
'EN': { 'EN': {
'INDEX': { 'INDEX': {
'ADD_COIN': 'Add Coin',
'STOP': 'Stop', 'STOP': 'Stop',
'START': 'Start', 'START': 'Start',
'UPDATE_UTXO': 'Update UTXO', 'UPDATE_UTXO': 'Update UTXO',
@ -15,7 +16,7 @@ export const _lang = {
'SHOW': 'Show', 'SHOW': 'Show',
'SHOWING': 'Showing', 'SHOWING': 'Showing',
'OF': 'of', 'OF': 'of',
'TO': 'to', 'TO_ALT': 'to',
'SEARCH': 'Search', 'SEARCH': 'Search',
'PREVIOUS': 'Previous', 'PREVIOUS': 'Previous',
'NEXT': 'Next', 'NEXT': 'Next',
@ -349,7 +350,10 @@ export const _lang = {
'FAILED_TO_ADDCOIN': 'Failed to add iguana coin', 'FAILED_TO_ADDCOIN': 'Failed to add iguana coin',
'FAILED_SHEPHERD_HERD': 'Failed to get execute shepherd herd', 'FAILED_SHEPHERD_HERD': 'Failed to get execute shepherd herd',
'COIN_SELECTION': 'Coin Selection', 'COIN_SELECTION': 'Coin Selection',
'SELECTION_NOT_FOUND': 'Local coin list is not found' 'SELECTION_NOT_FOUND': 'Local coin list is not found',
'LOCAL_UTXO_UPDATED': 'Local UTXO data is updated. Ready to send new transaction.',
'PROCESSING_UTXO': 'Processing UTXO',
'AWAITING_TX_RESP': 'Awaiting transaction data response'
}, },
'COIN_WALLETS': { 'COIN_WALLETS': {
'TX_FAILED': 'Transaction Failed', 'TX_FAILED': 'Transaction Failed',
@ -397,6 +401,24 @@ export const _lang = {
'SAVE_APP_CONFIG': 'Save app config', 'SAVE_APP_CONFIG': 'Save app config',
'CONFIG_RESTART_REQUIRED': 'Most changes to app config require wallet restart!', 'CONFIG_RESTART_REQUIRED': 'Most changes to app config require wallet restart!',
'APP_CONFIG': 'App Config', 'APP_CONFIG': 'App Config',
'APP_INFO': 'App Info',
'APP_RELEASE': 'App Release',
'NAME': 'Name',
'VERSION': 'Version',
'SYS_INFO': 'System Info',
'ARCH': 'Architecture',
'OS_TYPE': 'OS Type',
'OS_PLATFORM': 'OS Platfrom',
'OS_RELEASE': 'OS Release',
'CPU': 'CPU',
'CPU_CORES': 'CPU Cores',
'MEM': 'Memory',
'LOCATIONS': 'Locations',
'CACHE': 'Cache',
'CONFIG': 'Config',
'BIN': 'Bin',
'DIR': 'Dir',
'ADD_PEER_IP': 'Add Peer IP'
}, },
'TX_INFO': { 'TX_INFO': {
'ADDRESS': 'address', 'ADDRESS': 'address',
@ -418,7 +440,13 @@ export const _lang = {
'AWAITING': 'Awaiting in queue', 'AWAITING': 'Awaiting in queue',
'PROCESSING': 'Processing', 'PROCESSING': 'Processing',
'ERROR_CODE': 'Error Code', 'ERROR_CODE': 'Error Code',
'WAITING': 'Waiting' 'WAITING': 'Waiting',
'PROCESSING_TRANSACTION': 'Processing transaction',
'NOTE_IT_WILL_TAKE': 'Note: it may take a few minutes to complete the transaction',
'SEND_VIA': 'Send via',
'ENTER_AN_ADDRESS': 'Enter an address',
'YOU_PICKED_OPT': 'You picked option',
'PLEASE_WAIT': 'Please wait'
} }
} }
}; };
Loading…
Cancel
Save