Browse Source

Decouple jsx out of js - dashboard and login pages

all-modes
petitPapillon 8 years ago
parent
commit
3feb00f2b2
  1. 4
      react/src/components/addcoin/addcoin.js
  2. 4
      react/src/components/addcoin/coin-selectors.render.js
  3. 73
      react/src/components/dashboard/atomic.js
  4. 77
      react/src/components/dashboard/atomic.render.js
  5. 36
      react/src/components/dashboard/coinTile.js
  6. 39
      react/src/components/dashboard/coinTile.render.js
  7. 24
      react/src/components/dashboard/coinTileItem.js
  8. 26
      react/src/components/dashboard/coinTileItem.render.js
  9. 69
      react/src/components/dashboard/dashboard.js
  10. 59
      react/src/components/dashboard/dashboard.render.js
  11. 1
      react/src/components/dashboard/edex.js
  12. 259
      react/src/components/dashboard/jumblr.js
  13. 264
      react/src/components/dashboard/jumblr.render.js
  14. 72
      react/src/components/dashboard/loginModal.js
  15. 68
      react/src/components/dashboard/loginModal.render.js
  16. 121
      react/src/components/dashboard/navbar.js
  17. 124
      react/src/components/dashboard/navbar.render.js
  18. 125
      react/src/components/dashboard/notifications.js
  19. 121
      react/src/components/dashboard/notifications.render.js
  20. 100
      react/src/components/dashboard/receiveCoin.js
  21. 98
      react/src/components/dashboard/receiveCoin.render.js
  22. 202
      react/src/components/login/login.js
  23. 179
      react/src/components/login/login.render.js
  24. 24
      react/src/components/login/swall-modal.render.js

4
react/src/components/addcoin/addcoin.js

@ -9,7 +9,7 @@ import {
} from '../../actions/actionCreators';
import Store from '../../store';
import RenderCoinSelectors from './render-coin-selectors.render';
import CoinSelectorsRender from './coin-selectors.render';
import AddCoinRender from './addcoin.render';
class AddCoin extends React.Component {
@ -249,7 +249,7 @@ class AddCoin extends React.Component {
const _coin = _item.selectedCoin || '';
items.push(
RenderCoinSelectors.call(this, _item, _coin, i)
CoinSelectorsRender.call(this, _item, _coin, i)
);
}

4
react/src/components/addcoin/render-coin-selectors.render.js → react/src/components/addcoin/coin-selectors.render.js

@ -5,7 +5,7 @@ import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
const RenderCoinSelectors = function(item, coin, i) {
const CoinSelectorsRender = function(item, coin, i) {
return (
<div className={ this.hasMoreThanOneCoin() ? 'multi' : 'single' } key={ `add-coin-${i}` }>
<div className="col-sm-8">
@ -136,4 +136,4 @@ const RenderCoinSelectors = function(item, coin, i) {
</div>
)
};
export default RenderCoinSelectors;
export default CoinSelectorsRender;

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

@ -1,10 +1,8 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { atomic } from '../../actions/actionCreators';
import Store from '../../store';
import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
import AtomicRender from './atomic.render';
/*
TODO:
@ -480,72 +478,7 @@ class Atomic extends React.Component {
}
render() {
return (
<div className="page margin-left-0">
<div className="page-content" id="section-iguana-atomic-explorer">
<div className="row" id="atomic-explorer">
<div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">Atomic Explorer</h4>
<div className="panel panel-bordered">
<div className="panel-body">
<div className="col-sm-4 col-xs-12">
<div className="form-group">
<select
className="form-control
form-material"
id="atomic_explorer_select_coin_options"
onChange={ this.updateSelectedCoin }>
<option value="-">{ translate('INDEX.SELECT_COIN') }</option>
<AddCoinOptionsCrypto />
<AddCoinOptionsAC />
<AddCoinOptionsACFiat />
</select>
</div>
</div>
<div className="col-sm-4 col-xs-12 text-align-center">
<select
className="form-control form-material"
id="atomic_explorer_select_command_options"
onChange={ this.updateSelectedAPI }>
<option value="">-{ translate('ATOMIC.SELECT_COMMAND') }-</option>
{ this.renderAtomicOptions() }
</select>
</div>
<div className="col-sm-4 col-xs-12 text-align-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 } />
</div>
<div className="col-sm-12 col-xs-12 text-align-center">
<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 className="col-xlg-4 col-md-12">
<div className="panel">
<div className="panel-heading">
<h3 className="panel-title">{ translate('ATOMIC.RAW_OUTPUT') }</h3>
</div>
<div className="panel-body">
<div className="tab-content">
<pre id="atomic-explorer-commands-output">{ this.state.output }</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
return AtomicRender.call(this);
}
}

77
react/src/components/dashboard/atomic.render.js

@ -0,0 +1,77 @@
import React from 'react';
import { translate } from '../../translate/translate';
import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
const AtomicRender = function () {
return (
<div className="page margin-left-0">
<div className="page-content" id="section-iguana-atomic-explorer">
<div className="row" id="atomic-explorer">
<div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">Atomic Explorer</h4>
<div className="panel panel-bordered">
<div className="panel-body">
<div className="col-sm-4 col-xs-12">
<div className="form-group">
<select
className="form-control
form-material"
id="atomic_explorer_select_coin_options"
onChange={ this.updateSelectedCoin }>
<option value="-">{ translate('INDEX.SELECT_COIN') }</option>
<AddCoinOptionsCrypto />
<AddCoinOptionsAC />
<AddCoinOptionsACFiat />
</select>
</div>
</div>
<div className="col-sm-4 col-xs-12 text-align-center">
<select
className="form-control form-material"
id="atomic_explorer_select_command_options"
onChange={ this.updateSelectedAPI }>
<option value="">-{ translate('ATOMIC.SELECT_COMMAND') }-</option>
{ this.renderAtomicOptions() }
</select>
</div>
<div className="col-sm-4 col-xs-12 text-align-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 } />
</div>
<div className="col-sm-12 col-xs-12 text-align-center">
<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 className="col-xlg-4 col-md-12">
<div className="panel">
<div className="panel-heading">
<h3 className="panel-title">{ translate('ATOMIC.RAW_OUTPUT') }</h3>
</div>
<div className="panel-body">
<div className="tab-content">
<pre id="atomic-explorer-commands-output">{ this.state.output }</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
};
export default AtomicRender;

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

@ -1,11 +1,12 @@
import React from 'react';
import { translate } from '../../translate/translate';
import {
getCoinTitle,
getModeInfo
} from '../../util/coinHelper';
import CoinTileItem from './coinTileItem';
import CoinTileRender from './coinTile.render';
class CoinTile extends React.Component {
constructor(props) {
super(props);
@ -56,38 +57,7 @@ class CoinTile extends React.Component {
}
render() {
return (
<div className="page-aside padding-top-80">
<div className="page-aside-switch">
<i className="icon md-chevron-left" aria-hidden="true"></i>
<i className="icon md-chevron-right" aria-hidden="true"></i>
</div>
<div className="page-aside-inner">
<div className="search-wallet-widgets panel display-none">
<div className="panel-heading">
<div className="panel-actions">
<div className="input-search input-group-sm">
<button type="submit" className="input-search-btn">
<i className="icon md-search" aria-hidden="true"></i>
</button>
<input type="text" className="form-control" name="" placeholder="Search..." disabled />
</div>
</div>
<h3 className="panel-title">{ translate('INDEX.ACTIVE_COINS') }</h3>
</div>
</div>
<div className="wallet-widgets-list">
<div data-role="container">
<div data-role="content">
<div className="list-group row wallet-widgets-row">
{ this.renderTiles() }
</div>
</div>
</div>
</div>
</div>
</div>
);
return CoinTileRender.call(this);
}
}

39
react/src/components/dashboard/coinTile.render.js

@ -0,0 +1,39 @@
import React from 'react';
import { translate } from '../../translate/translate';
const CoinTileRender = function () {
return (
<div className="page-aside padding-top-80">
<div className="page-aside-switch">
<i className="icon md-chevron-left" aria-hidden="true"></i>
<i className="icon md-chevron-right" aria-hidden="true"></i>
</div>
<div className="page-aside-inner">
<div className="search-wallet-widgets panel display-none">
<div className="panel-heading">
<div className="panel-actions">
<div className="input-search input-group-sm">
<button type="submit" className="input-search-btn">
<i className="icon md-search" aria-hidden="true"></i>
</button>
<input type="text" className="form-control" name="" placeholder="Search..." disabled />
</div>
</div>
<h3 className="panel-title">{ translate('INDEX.ACTIVE_COINS') }</h3>
</div>
</div>
<div className="wallet-widgets-list">
<div data-role="container">
<div data-role="content">
<div className="list-group row wallet-widgets-row">
{ this.renderTiles() }
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default CoinTileRender;

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

@ -1,5 +1,4 @@
import React from 'react';
import { translate } from '../../translate/translate';
import {
dashboardChangeActiveCoin,
iguanaActiveHandle,
@ -21,6 +20,8 @@ import {
} from '../../actions/actionCreators';
import Store from '../../store';
import CoinTileItemRender from './coinTileItem.render';
const BASILISK_CACHE_UPDATE_TIMEOUT = 240000;
const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000;
const IGUNA_ACTIVE_HANDLE_TIMEOUT_KMD_NATIVE = 15000;
@ -141,26 +142,7 @@ class CoinTileItem extends React.Component {
}
render() {
const { item } = this.props;
return (
<div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info pointer">
<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"
onClick={ () => this.dashboardChangeActiveCoin(item.coin, item.mode) }>
<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>
<div className="coin-name">{ item.coinname } ({ item.coinlogo.toUpperCase() })</div>
</div>
</div>
</div>
);
return CoinTileItemRender.call(this);
}
}

26
react/src/components/dashboard/coinTileItem.render.js

@ -0,0 +1,26 @@
import React from 'react';
const CoinTileItemRender = function () {
const { item } = this.props;
return (
<div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info pointer">
<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"
onClick={ () => this.dashboardChangeActiveCoin(item.coin, item.mode) }>
<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>
<div className="coin-name">{ item.coinname } ({ item.coinlogo.toUpperCase() })</div>
</div>
</div>
</div>
);
};
export default CoinTileItemRender;

69
react/src/components/dashboard/dashboard.js

@ -1,20 +1,6 @@
import React from 'react';
import Navbar from './navbar';
import CoinTile from './coinTile';
import EDEX from './edex';
import WalletsBalance from './walletsBalance';
import WalletsProgress from './walletsProgress';
import WalletsNav from './walletsNav';
import SendCoin from './sendCoin';
import WalletsData from './walletsData';
import Atomic from './atomic';
import Jumblr from './jumblr';
import Settings from './settings';
import ReceiveCoin from './receiveCoin';
import About from './about';
import WalletsNative from './walletsNative';
import WalletsNativeTxInfo from './walletsNativeTxInfo';
import WalletsTxInfo from './walletsTxInfo';
import DashboardRender from './dashboard.render';
class Dashboard extends React.Component {
constructor(props) {
@ -31,52 +17,21 @@ class Dashboard extends React.Component {
renderDashboard() {
document.body.className = '';
return (
<div className="full-height">
<div
className={ this.isSectionActive('wallets') ? 'page-main' : '' }
id="section-dashboard">
<Navbar {...this.props} />
<div className={ this.isSectionActive('wallets') ? 'show' : 'hide' }>
<CoinTile {...this.props} />
<WalletsNav {...this.props} />
<WalletsProgress {...this.props} />
<WalletsBalance {...this.props} />
<SendCoin {...this.props} />
<ReceiveCoin {...this.props.ActiveCoin} />
<WalletsData {...this.props} />
<WalletsTxInfo {...this.props} />
<WalletsNative {...this.props} />
<WalletsNativeTxInfo {...this.props} />
</div>
<div className={ this.isSectionActive('edex') ? 'show' : 'hide' }>
<EDEX {...this.props} />
</div>
<div className={ this.isSectionActive('atomic') ? 'show' : 'hide' }>
<Atomic {...this.props} />
</div>
<div className={ this.isSectionActive('jumblr') ? 'show' : 'hide' }>
<Jumblr {...this.props} />
</div>
<div className={ this.isSectionActive('settings') ? 'show' : 'hide' }>
<Settings {...this.props} />
</div>
<div className={ this.isSectionActive('about') ? 'show' : 'hide' }>
<About {...this.props} />
</div>
</div>
</div>
);
return DashboardRender.call(this);
}
isLoggedIn() {
return this.props &&
this.props.Main &&
this.props.Main.isLoggedIn;
}
render() {
if (this.props &&
this.props.Main &&
this.props.Main.isLoggedIn) {
if (this.isLoggedIn()) {
return this.renderDashboard();
} else {
return null;
}
return null;
}
}

59
react/src/components/dashboard/dashboard.render.js

@ -0,0 +1,59 @@
import React from 'react';
import Navbar from './navbar';
import CoinTile from './coinTile';
import EDEX from './edex';
import WalletsBalance from './walletsBalance';
import WalletsProgress from './walletsProgress';
import WalletsNav from './walletsNav';
import SendCoin from './sendCoin';
import WalletsData from './walletsData';
import Atomic from './atomic';
import Jumblr from './jumblr';
import Settings from './settings';
import ReceiveCoin from './receiveCoin';
import About from './about';
import WalletsNative from './walletsNative';
import WalletsNativeTxInfo from './walletsNativeTxInfo';
import WalletsTxInfo from './walletsTxInfo';
const DashboardRender = function () {
return (
<div className="full-height">
<div
className={ this.isSectionActive('wallets') ? 'page-main' : '' }
id="section-dashboard">
<Navbar {...this.props} />
<div className={ this.isSectionActive('wallets') ? 'show' : 'hide' }>
<CoinTile {...this.props} />
<WalletsNav {...this.props} />
<WalletsProgress {...this.props} />
<WalletsBalance {...this.props} />
<SendCoin {...this.props} />
<ReceiveCoin {...this.props.ActiveCoin} />
<WalletsData {...this.props} />
<WalletsTxInfo {...this.props} />
<WalletsNative {...this.props} />
<WalletsNativeTxInfo {...this.props} />
</div>
<div className={ this.isSectionActive('edex') ? 'show' : 'hide' }>
<EDEX {...this.props} />
</div>
<div className={ this.isSectionActive('atomic') ? 'show' : 'hide' }>
<Atomic {...this.props} />
</div>
<div className={ this.isSectionActive('jumblr') ? 'show' : 'hide' }>
<Jumblr {...this.props} />
</div>
<div className={ this.isSectionActive('settings') ? 'show' : 'hide' }>
<Settings {...this.props} />
</div>
<div className={ this.isSectionActive('about') ? 'show' : 'hide' }>
<About {...this.props} />
</div>
</div>
</div>
);
};
export default DashboardRender;

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

@ -1,5 +1,4 @@
import React from 'react';
import { translate } from '../../translate/translate';
class EDEX extends React.Component {
render() {

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

@ -1,9 +1,10 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsHeader from './walletsHeader';
/*import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators';
import Store from '../../store';*/
import JumblrRender from './jumblr.render';
class Jumblr extends React.Component {
constructor(props) {
super(props);
@ -30,261 +31,7 @@ class Jumblr extends React.Component {
}
render() {
return (
<div className="page margin-left-0">
<WalletsHeader activeSection="jumblr" />
<div className="page-content margin-top-30" id="section-jumblr">
<div className="row" id="jumblr_dashboard">
<div className="col-xs-12" id="jumblr_testing_alert">
<div className="alert alert-danger" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<span className="jumblr-header">
<i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NOTICE') }
</span>
<br />
{ translate('JUMBLR.DESCRIPTION') }
</div>
</div>
<div className="col-xs-12" id="jumblr_no_native_kmd_alert">
<div className="alert alert-info alert-dismissible" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<span className="jumblr-header">
<i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NEED_NATIVE') }
</span>
<br />
{ translate('JUMBLR.TO_USE_JUMBLR') }
<br />
{ translate('JUMBLR.IF_YOU_ALREADY_RUNNING') }
</div>
</div>
<div className="col-xlg-12 col-md-12">
<p>{ translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH') }</p>
</div>
<div className="col-xs-12">
<div className="panel-group" id="jumber_quick_info" aria-multiselectable="true" role="tablist">
<div className="panel">
<div
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
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">
<ul>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }</li>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC2') }</li>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC3') }</li>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC4') }</li>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC5') }</li>
</ul>
</div>
</div>
</div>
<div className="panel">
<div
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
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">
<p>{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }</p>
<ul>
<code>duck dog cat donkey</code>
</ul>
<ol>
<li>{ translate('JUMBLR.TO_ACCESS') }</li>
<li>{ translate('JUMBLR.CLOSE_IAPP') }</li>
<li>{ translate('JUMBLR.START_IAPP') }</li>
<li>{ translate('JUMBLR.START_KMD') }</li>
<li>{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }
<ul>
<li>{ translate('JUMBLR.SMALL_LETTERS') }</li>
<li>{ translate('JUMBLR.WHITE_SPACE') }</li>
</ul>
</li>
<li>
{ translate('JUMBLR.PER_EXAMPLE') }
<br />
<code>jumblr duck dog cat donkey</code>
</li>
<li>{ translate('JUMBLR.LOGIN_WITH_JUMBLR') }</li>
</ol>
<h4>{ translate('JUMBLR.AGAIN_DONT_SHARE') }</h4>
</div>
</div>
</div>
<div className="panel">
<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' }
aria-expanded="false"
aria-controls="jumblr_using_jumblr_3">{ translate('JUMBLR.USING_JUMBLR') }</a>
</div>
<div
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">
<ul>
<li>{ translate('JUMBLR.RUN_KMD') }</li>
<li>{ translate('JUMBLR.LOGIN_KMD') }</li>
<li>{ translate('JUMBLR.GO_TO') }</li>
<li>{ translate('JUMBLR.FIND_DEPOSIT_ADDR') }</li>
<li>{ translate('JUMBLR.YOU_SEND_FUNDS') }</li>
<li>{ translate('JUMBLR.KEEP_WALLET_OPEN') }</li>
<li>{ translate('JUMBLR.IMPORTANT_FUNDS') }</li>
<li>{ translate('JUMBLR.LARGE_LOT') }</li>
</ul>
<p>{ this.renderLB('JUMBLR.EG') }</p>
<p>{ translate('JUMBLR.93_KMD') }</p>
<p>{ translate('JUMBLR.TO_CLEAR_THEM') }</p>
<p>{ translate('JUMBLR.WHEN_IT_TOTALS') }</p>
</div>
</div>
</div>
</div>
</div>
<div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JADDR') }</h4>
<div className="panel" id="projects">
<div className="table-responsive">
<table className="table table-striped">
<tbody>
<tr>
<td width="20%">{ translate('JUMBLR.BTC_DEPOSIT') }</td>
<td>
<span id="jumblr_BTCdeposit"></span>
</td>
</tr>
<tr>
<td>BTC Jumblr</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">
<span><i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }</span>
</button>
<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>
</tr>
<tr>
<td>{ translate('JUMBLR.KMD_DEPOSIT') }</td>
<td>
<span id="jumblr_KMDdeposit"></span>
</td>
</tr>
<tr>
<td>KMD Jumblr</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">
<span>
<i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }
</span>
</button>
<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>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JSTATUS') }</h4>
<div className="panel" id="projects">
<div className="table-responsive">
<table className="table table-striped">
<tbody>
<tr>
<td width="20%">{ translate('JUMBLR.RESULT') }</td>
<td>
<span id="jumblr_status_result" className="label label-success"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.DEPOSITED') }</td>
<td>
<span id="jumblr_status_deposited"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.PUB_TO_PRIV') }</td>
<td>
<span id="jumblr_status_t_to_z"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.PRIV_TO_PRIV') }</td>
<td>
<span id="jumblr_status_z_to_z"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.PRIV_TO_PUB') }</td>
<td>
<span id="jumblr_status_z_to_t"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.FINISHED') }</td>
<td>
<span id="jumblr_status_finished"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.PENDING') }</td>
<td>
<span id="jumblr_status_pending"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
)
return JumblrRender.call(this);
}
}

264
react/src/components/dashboard/jumblr.render.js

@ -0,0 +1,264 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsHeader from './walletsHeader';
const JumblrRender = function () {
return (
<div className="page margin-left-0">
<WalletsHeader activeSection="jumblr" />
<div className="page-content margin-top-30" id="section-jumblr">
<div className="row" id="jumblr_dashboard">
<div className="col-xs-12" id="jumblr_testing_alert">
<div className="alert alert-danger" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<span className="jumblr-header">
<i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NOTICE') }
</span>
<br />
{ translate('JUMBLR.DESCRIPTION') }
</div>
</div>
<div className="col-xs-12" id="jumblr_no_native_kmd_alert">
<div className="alert alert-info alert-dismissible" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<span className="jumblr-header">
<i className="icon fa-paw" aria-hidden="true"></i> { translate('JUMBLR.NEED_NATIVE') }
</span>
<br />
{ translate('JUMBLR.TO_USE_JUMBLR') }
<br />
{ translate('JUMBLR.IF_YOU_ALREADY_RUNNING') }
</div>
</div>
<div className="col-xlg-12 col-md-12">
<p>{ translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH') }</p>
</div>
<div className="col-xs-12">
<div className="panel-group" id="jumber_quick_info" aria-multiselectable="true" role="tablist">
<div className="panel">
<div
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
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">
<ul>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }</li>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC2') }</li>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC3') }</li>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC4') }</li>
<li>{ translate('JUMBLR.FEW_SECURITY_NOTES_DESC5') }</li>
</ul>
</div>
</div>
</div>
<div className="panel">
<div
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
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">
<p>{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }</p>
<ul>
<code>duck dog cat donkey</code>
</ul>
<ol>
<li>{ translate('JUMBLR.TO_ACCESS') }</li>
<li>{ translate('JUMBLR.CLOSE_IAPP') }</li>
<li>{ translate('JUMBLR.START_IAPP') }</li>
<li>{ translate('JUMBLR.START_KMD') }</li>
<li>{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }
<ul>
<li>{ translate('JUMBLR.SMALL_LETTERS') }</li>
<li>{ translate('JUMBLR.WHITE_SPACE') }</li>
</ul>
</li>
<li>
{ translate('JUMBLR.PER_EXAMPLE') }
<br />
<code>jumblr duck dog cat donkey</code>
</li>
<li>{ translate('JUMBLR.LOGIN_WITH_JUMBLR') }</li>
</ol>
<h4>{ translate('JUMBLR.AGAIN_DONT_SHARE') }</h4>
</div>
</div>
</div>
<div className="panel">
<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' }
aria-expanded="false"
aria-controls="jumblr_using_jumblr_3">{ translate('JUMBLR.USING_JUMBLR') }</a>
</div>
<div
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">
<ul>
<li>{ translate('JUMBLR.RUN_KMD') }</li>
<li>{ translate('JUMBLR.LOGIN_KMD') }</li>
<li>{ translate('JUMBLR.GO_TO') }</li>
<li>{ translate('JUMBLR.FIND_DEPOSIT_ADDR') }</li>
<li>{ translate('JUMBLR.YOU_SEND_FUNDS') }</li>
<li>{ translate('JUMBLR.KEEP_WALLET_OPEN') }</li>
<li>{ translate('JUMBLR.IMPORTANT_FUNDS') }</li>
<li>{ translate('JUMBLR.LARGE_LOT') }</li>
</ul>
<p>{ this.renderLB('JUMBLR.EG') }</p>
<p>{ translate('JUMBLR.93_KMD') }</p>
<p>{ translate('JUMBLR.TO_CLEAR_THEM') }</p>
<p>{ translate('JUMBLR.WHEN_IT_TOTALS') }</p>
</div>
</div>
</div>
</div>
</div>
<div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JADDR') }</h4>
<div className="panel" id="projects">
<div className="table-responsive">
<table className="table table-striped">
<tbody>
<tr>
<td width="20%">{ translate('JUMBLR.BTC_DEPOSIT') }</td>
<td>
<span id="jumblr_BTCdeposit"></span>
</td>
</tr>
<tr>
<td>BTC Jumblr</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">
<span><i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }</span>
</button>
<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>
</tr>
<tr>
<td>{ translate('JUMBLR.KMD_DEPOSIT') }</td>
<td>
<span id="jumblr_KMDdeposit"></span>
</td>
</tr>
<tr>
<td>KMD Jumblr</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">
<span>
<i className="icon fa-eye" aria-hidden="true"></i> { translate('JUMBLR.SHOW_HIDE') }
</span>
</button>
<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>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">{ translate('JUMBLR.JSTATUS') }</h4>
<div className="panel" id="projects">
<div className="table-responsive">
<table className="table table-striped">
<tbody>
<tr>
<td width="20%">{ translate('JUMBLR.RESULT') }</td>
<td>
<span id="jumblr_status_result" className="label label-success"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.DEPOSITED') }</td>
<td>
<span id="jumblr_status_deposited"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.PUB_TO_PRIV') }</td>
<td>
<span id="jumblr_status_t_to_z"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.PRIV_TO_PRIV') }</td>
<td>
<span id="jumblr_status_z_to_z"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.PRIV_TO_PUB') }</td>
<td>
<span id="jumblr_status_z_to_t"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.FINISHED') }</td>
<td>
<span id="jumblr_status_finished"></span>
</td>
</tr>
<tr>
<td>{ translate('JUMBLR.PENDING') }</td>
<td>
<span id="jumblr_status_pending"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default JumblrRender;

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

@ -1,12 +1,12 @@
import React from 'react';
import { translate } from '../../translate/translate';
import {
toggleAddcoinModal,
iguanaWalletPassphrase,
iguanaActiveHandle
iguanaWalletPassphrase
} from '../../actions/actionCreators';
import Store from '../../store';
import LoginModalRender from './loginModal.render';
class LoginModal extends React.Component {
constructor(props) {
super(props);
@ -50,70 +50,10 @@ class LoginModal extends React.Component {
render() {
if (this.props.Dashboard.activateLoginModal) {
return (
<div>
<div
className={ 'modal modal-3d-sign add-coin-modal ' + (this.state.display ? 'show in' : 'fade hide') }
id="AddCoinDilogModel-login"
aria-hidden="true"
aria-labelledby="AddCoinDilogModel-login"
role="dialog"
tabIndex="-1">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header">
<button
type="button"
className="close white"
aria-label="Close"
onClick={ this.dismiss }>
<span aria-hidden="true">×</span>
</button>
<h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4>
</div>
<div className="modal-body">
<div id="wallet-login">
<div className="page animsition vertical-align text-center fade-in">
<div className="page-content vertical-align-middle">
<div className="brand">
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
</div>
<div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
<h4 className="color-white" id="login-welcome">{ translate('INDEX.WELCOME_LOGIN') }</h4>
<div className="login-form">
<div className="form-group form-material floating">
<input
type={ this.state.seedInputVisibility ? 'text' : 'password' }
className="form-control"
name="loginPassphrase"
id="password"
onChange={ this.updateInput } />
<i
className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
onClick={ this.toggleSeedInputVisibility }></i>
<label className="floating-label" htmlFor="inputPassword">{translate('INDEX.WALLET_SEED')}</label>
</div>
<button
type="button"
className="btn btn-primary btn-block"
id="loginbtn"
onClick={ this.loginSeed }
disabled={ this.isLoginPassphraseEmpty() }>{ translate('INDEX.SIGN_IN') }</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
return LoginModalRender.call(this);
}
return null;
}
}

68
react/src/components/dashboard/loginModal.render.js

@ -0,0 +1,68 @@
import React from 'react';
import { translate } from '../../translate/translate';
const LoginModalRender = function () {
return (
<div>
<div
className={ 'modal modal-3d-sign add-coin-modal ' + (this.state.display ? 'show in' : 'fade hide') }
id="AddCoinDilogModel-login"
aria-hidden="true"
aria-labelledby="AddCoinDilogModel-login"
role="dialog"
tabIndex="-1">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header">
<button
type="button"
className="close white"
aria-label="Close"
onClick={ this.dismiss }>
<span aria-hidden="true">×</span>
</button>
<h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4>
</div>
<div className="modal-body">
<div id="wallet-login">
<div className="page animsition vertical-align text-center fade-in">
<div className="page-content vertical-align-middle">
<div className="brand">
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
</div>
<div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
<h4 className="color-white" id="login-welcome">{ translate('INDEX.WELCOME_LOGIN') }</h4>
<div className="login-form">
<div className="form-group form-material floating">
<input
type={ this.state.seedInputVisibility ? 'text' : 'password' }
className="form-control"
name="loginPassphrase"
id="password"
onChange={ this.updateInput } />
<i
className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
onClick={ this.toggleSeedInputVisibility }></i>
<label className="floating-label" htmlFor="inputPassword">{translate('INDEX.WALLET_SEED')}</label>
</div>
<button
type="button"
className="btn btn-primary btn-block"
id="loginbtn"
onClick={ this.loginSeed }
disabled={ this.isLoginPassphraseEmpty() }>{ translate('INDEX.SIGN_IN') }</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default LoginModalRender;

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

@ -1,5 +1,4 @@
import React from 'react';
import { translate } from '../../translate/translate';
import {
dashboardChangeSection,
toggleAddcoinModal,
@ -11,6 +10,8 @@ import {
} from '../../actions/actionCreators';
import Store from '../../store';
import NavbarRender from './navbar.render';
class Navbar extends React.Component {
constructor(props) {
super(props);
@ -78,123 +79,7 @@ class Navbar extends React.Component {
}
render() {
return (
<nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">
<div className="navbar-header">
<button type="button" className="navbar-toggle hamburger hamburger-close navbar-toggle-left hided">
<span className="sr-only">{ translate('INDEX.TOGGLE_NAV') }</span>
<span className="hamburger-bar"></span>
</button>
<button type="button" className="navbar-toggle collapsed">
<i className="icon md-more" aria-hidden="true"></i>
</button>
<div className="navbar-brand navbar-brand-center site-gridmenu-toggle">
<img
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>
</div>
<button type="button" className="navbar-toggle collapsed">
<span className="sr-only">{ translate('INDEX.TOGGLE_SEARCH') }</span>
<i className="icon md-search" aria-hidden="true"></i>
</button>
</div>
<div className="navbar-container container-fluid">
<div className="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
<ul className="nav navbar-toolbar">
<li className="hidden-float display-none" id="toggleMenubar">
<a role="button">
<i className="icon hamburger hamburger-arrow-left">
<span className="sr-only">{ translate('INDEX.TOGGLE_MENUBAR') }</span>
<span className="hamburger-bar"></span>
</i>
</a>
</li>
<li className={ this.isSectionActive('wallets') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-dashboard" onClick={ () => this.dashboardChangeSection('wallets') }>
<i className="site-menu-icon" aria-hidden="true"></i> { translate('INDEX.WALLETS') }
</a>
</li>
<li className={ this.isSectionActive('edex') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-easydex" onClick={ () => this.dashboardChangeSection('edex') }>
<i className="site-menu-icon" aria-hidden="true"></i> EasyDEX
</a>
</li>
<li
className={'display-none ' + (this.isSectionActive('jumblr') ? 'active nav-top-menu' : 'nav-top-menu') }>
<a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
<i className="site-menu-icon" aria-hidden="true"></i> Jumblr
</a>
</li>
<li className={ this.isSectionActive('atomic') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-iguana-atomic-explorer" onClick={ () => this.dashboardChangeSection('atomic') }>
<i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
</a>
</li>
</ul>
<ul className="nav navbar-toolbar navbar-right navbar-toolbar-right">
<li role="presentation">
<a
role="menuitem"
id="btn_edexcoin_addcoin"
className="pointer padding-bottom-10 padding-top-16"
onClick={ this.toggleAddCoinModal }>
<span>
<img src="assets/images/icons/activatecoin.png" alt={ translate('INDEX.ADD_COIN') } />
</span>
</a>
</li>
<li
className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') }
onClick={ this.openDropMenu }>
<a className="navbar-avatar dropdown-toggle" aria-expanded="false" role="button">
<span className="avatar avatar-online">
<img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" />
<i></i>
</span>
</a>
<ul className="dropdown-menu" role="menu">
<li role="presentation">
<a
role="menuitem"
id="nav-iguana-wallet-settings"
onClick={ () => this.dashboardChangeSection('settings') }>
<i className="icon md-settings" aria-hidden="true"></i> { translate('INDEX.SETTINGS') }
</a>
</li>
<li role="presentation">
<a
role="menuitem"
id="nav-iguana-sync-only"
onClick={ () => this.openSyncOnlyModal() }>
<i className="icon fa-cubes" aria-hidden="true"></i> { translate('ADD_COIN.SYNC_ONLY') }
</a>
</li>
<li role="presentation">
<a
role="menuitem"
id="nav-about-iguana"
onClick={ () => this.dashboardChangeSection('about') }>
<i className="icon fa-users" aria-hidden="true"></i> { translate('INDEX.ABOUT_IGUANA') }
</a>
</li>
<li className="divider" role="presentation"></li>
<li role="presentation">
<a role="menuitem" id="logout-account" onClick={ this.logout }>
<i className="icon md-power" aria-hidden="true"></i> { translate('INDEX.LOGOUT') }
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
);
return NavbarRender.call(this);
}
}

124
react/src/components/dashboard/navbar.render.js

@ -0,0 +1,124 @@
import React from 'react';
import { translate } from '../../translate/translate';
const NavbarRender = function () {
return (
<nav className="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">
<div className="navbar-header">
<button type="button" className="navbar-toggle hamburger hamburger-close navbar-toggle-left hided">
<span className="sr-only">{ translate('INDEX.TOGGLE_NAV') }</span>
<span className="hamburger-bar"></span>
</button>
<button type="button" className="navbar-toggle collapsed">
<i className="icon md-more" aria-hidden="true"></i>
</button>
<div className="navbar-brand navbar-brand-center site-gridmenu-toggle">
<img
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>
</div>
<button type="button" className="navbar-toggle collapsed">
<span className="sr-only">{ translate('INDEX.TOGGLE_SEARCH') }</span>
<i className="icon md-search" aria-hidden="true"></i>
</button>
</div>
<div className="navbar-container container-fluid">
<div className="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
<ul className="nav navbar-toolbar">
<li className="hidden-float display-none" id="toggleMenubar">
<a role="button">
<i className="icon hamburger hamburger-arrow-left">
<span className="sr-only">{ translate('INDEX.TOGGLE_MENUBAR') }</span>
<span className="hamburger-bar"></span>
</i>
</a>
</li>
<li className={ this.isSectionActive('wallets') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-dashboard" onClick={ () => this.dashboardChangeSection('wallets') }>
<i className="site-menu-icon" aria-hidden="true"></i> { translate('INDEX.WALLETS') }
</a>
</li>
<li className={ this.isSectionActive('edex') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-easydex" onClick={ () => this.dashboardChangeSection('edex') }>
<i className="site-menu-icon" aria-hidden="true"></i> EasyDEX
</a>
</li>
<li
className={'display-none ' + (this.isSectionActive('jumblr') ? 'active nav-top-menu' : 'nav-top-menu') }>
<a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
<i className="site-menu-icon" aria-hidden="true"></i> Jumblr
</a>
</li>
<li className={ this.isSectionActive('atomic') ? 'active nav-top-menu' : 'nav-top-menu' }>
<a id="nav-iguana-atomic-explorer" onClick={ () => this.dashboardChangeSection('atomic') }>
<i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
</a>
</li>
</ul>
<ul className="nav navbar-toolbar navbar-right navbar-toolbar-right">
<li role="presentation">
<a
role="menuitem"
id="btn_edexcoin_addcoin"
className="pointer padding-bottom-10 padding-top-16"
onClick={ this.toggleAddCoinModal }>
<span>
<img src="assets/images/icons/activatecoin.png" alt={ translate('INDEX.ADD_COIN') } />
</span>
</a>
</li>
<li
className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') }
onClick={ this.openDropMenu }>
<a className="navbar-avatar dropdown-toggle" aria-expanded="false" role="button">
<span className="avatar avatar-online">
<img src="assets/images/iguana_profile_02.jpg" alt="iguana profile pic" />
<i></i>
</span>
</a>
<ul className="dropdown-menu" role="menu">
<li role="presentation">
<a
role="menuitem"
id="nav-iguana-wallet-settings"
onClick={ () => this.dashboardChangeSection('settings') }>
<i className="icon md-settings" aria-hidden="true"></i> { translate('INDEX.SETTINGS') }
</a>
</li>
<li role="presentation">
<a
role="menuitem"
id="nav-iguana-sync-only"
onClick={ () => this.openSyncOnlyModal() }>
<i className="icon fa-cubes" aria-hidden="true"></i> { translate('ADD_COIN.SYNC_ONLY') }
</a>
</li>
<li role="presentation">
<a
role="menuitem"
id="nav-about-iguana"
onClick={ () => this.dashboardChangeSection('about') }>
<i className="icon fa-users" aria-hidden="true"></i> { translate('INDEX.ABOUT_IGUANA') }
</a>
</li>
<li className="divider" role="presentation"></li>
<li role="presentation">
<a role="menuitem" id="logout-account" onClick={ this.logout }>
<i className="icon md-power" aria-hidden="true"></i> { translate('INDEX.LOGOUT') }
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default NavbarRender;

125
react/src/components/dashboard/notifications.js

@ -1,11 +1,12 @@
import React from 'react';
import {
checkTimestamp,
secondsElapsedToString,
secondsToString
} from '../../util/time';
import { sortByDate } from '../../util/sort';
import { translate } from '../../translate/translate';
import {
NotificationsByTypeRender,
NotificationsModalRender,
NotificationsRender
} from './notifications.render';
class Notifications extends React.Component {
constructor(props) {
@ -74,28 +75,7 @@ class Notifications extends React.Component {
const _logItem = _guiLog[i];
items.push(
<div key={ _logItem.timestamp }>
<div>{ i + 1 }.</div>
<div>
<strong>Time:</strong> { secondsToString(_logItem.timestamp, true, true) }
</div>
<div>
<strong>GUI Function:</strong> { _logItem.function }
</div>
<div>
<strong>HTTP:</strong> { _logItem.httpMethod.toUpperCase() }
</div>
<div>
<strong>URL:</strong> { _logItem.url }
</div>
<div>
<strong>Payload:</strong> { JSON.stringify(_logItem.payload, null, '\t') }
</div>
<div className={ type !== 'pending' ? '' : 'hide' }>
<strong>Response:</strong> { JSON.stringify(_logItem.response, null, '\t') }
</div>
<hr />
</div>
NotificationsByTypeRender.call(this, _logItem, type, i)
);
}
}
@ -106,73 +86,10 @@ class Notifications extends React.Component {
renderNotificationsModal() {
if (this.state.displayModal) {
return (
<div onKeyDown={ (event) => this.handleKeydown(event) }>
<div className="modal show notifications-modal" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-body modal-body-container">
<div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" role="tablist">
<li className={ this.state.activeTab === 0 ? 'active' : 'pointer' } role="presentation">
<a
role="tab"
onClick={ () => this.openTab(0) }>
<i className="icon fa fa-thumbs-o-up" aria-hidden="true"></i> Success ({ this.state.calls.success })
</a>
</li>
<li className={ this.state.activeTab === 1 ? 'active' : 'pointer' } role="presentation">
<a
role="tab"
onClick={ () => this.openTab(1) }>
<i className="icon fa fa-exclamation-triangle" aria-hidden="true"></i> Error ({ this.state.calls.error })
</a>
</li>
<li className={ this.state.activeTab === 2 ? 'active' : 'pointer' } role="presentation">
<a
role="tab"
onClick={ () => this.openTab(2) }>
<i className="icon fa fa-clock-o" aria-hidden="true"></i> Pending ({ this.state.calls.pending })
</a>
</li>
</ul>
<div className="panel-body panel-body-container">
<div className="tab-content">
<div
className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }
role="tabpanel">
{ this.renderNotificationsByType('success') }
</div>
<div
className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }
role="tabpanel">
{ this.renderNotificationsByType('error') }
</div>
<div
className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }
role="tabpanel">
{ this.renderNotificationsByType('pending') }
</div>
</div>
</div>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-default"
data-dismiss="modal"
onClick={ this.toggleNotificationsModal }>{ translate('INDEX.CLOSE') }</button>
</div>
</div>
</div>
</div>
<div className="modal-backdrop show in"></div>
</div>
);
} else {
return null;
return NotificationsModalRender.call(this);
}
return null;
}
toggleNotificationsModal() {
@ -182,25 +99,7 @@ class Notifications extends React.Component {
}
render() {
return (
<div>
<div
className={ this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle.status === 'unlocked' ? 'notifications-badge stick-to-top' : 'notifications-badge' }
onClick={ this.toggleNotificationsModal }>
<span className="badge success">{ this.state.calls.success }</span>
<span className="badge error">{ this.state.calls.error }</span>
<span className="badge pending">{ this.state.calls.pending }</span>
<div className={ this.state.calls.pending === 0 ? 'spinner spinner-hide' : 'spinner' }>
<div className="rect1"></div>
<div className="rect2"></div>
<div className="rect3"></div>
<div className="rect4"></div>
<div className="rect5"></div>
</div>
</div>
{ this.renderNotificationsModal() }
</div>
);
return NotificationsRender.call(this);
}
}

121
react/src/components/dashboard/notifications.render.js

@ -0,0 +1,121 @@
import React from 'react';
import {
secondsToString
} from '../../util/time';
import { translate } from '../../translate/translate';
export const NotificationsByTypeRender = function (logItem, type, index) {
return (
<div key={ logItem.timestamp }>
<div>{ index + 1 }.</div>
<div>
<strong>Time:</strong> { secondsToString(logItem.timestamp, true, true) }
</div>
<div>
<strong>GUI Function:</strong> { logItem.function }
</div>
<div>
<strong>HTTP:</strong> { logItem.httpMethod.toUpperCase() }
</div>
<div>
<strong>URL:</strong> { logItem.url }
</div>
<div>
<strong>Payload:</strong> { JSON.stringify(logItem.payload, null, '\t') }
</div>
<div className={ type !== 'pending' ? '' : 'hide' }>
<strong>Response:</strong> { JSON.stringify(logItem.response, null, '\t') }
</div>
<hr />
</div>
);
}
export const NotificationsModalRender = function () {
return (
<div onKeyDown={ (event) => this.handleKeydown(event) }>
<div className="modal show notifications-modal" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-body modal-body-container">
<div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" role="tablist">
<li className={ this.state.activeTab === 0 ? 'active' : 'pointer' } role="presentation">
<a
role="tab"
onClick={ () => this.openTab(0) }>
<i className="icon fa fa-thumbs-o-up" aria-hidden="true"></i> Success ({ this.state.calls.success })
</a>
</li>
<li className={ this.state.activeTab === 1 ? 'active' : 'pointer' } role="presentation">
<a
role="tab"
onClick={ () => this.openTab(1) }>
<i className="icon fa fa-exclamation-triangle" aria-hidden="true"></i> Error ({ this.state.calls.error })
</a>
</li>
<li className={ this.state.activeTab === 2 ? 'active' : 'pointer' } role="presentation">
<a
role="tab"
onClick={ () => this.openTab(2) }>
<i className="icon fa fa-clock-o" aria-hidden="true"></i> Pending ({ this.state.calls.pending })
</a>
</li>
</ul>
<div className="panel-body panel-body-container">
<div className="tab-content">
<div
className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }
role="tabpanel">
{ this.renderNotificationsByType('success') }
</div>
<div
className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }
role="tabpanel">
{ this.renderNotificationsByType('error') }
</div>
<div
className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }
role="tabpanel">
{ this.renderNotificationsByType('pending') }
</div>
</div>
</div>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-default"
data-dismiss="modal"
onClick={ this.toggleNotificationsModal }>{ translate('INDEX.CLOSE') }</button>
</div>
</div>
</div>
</div>
<div className="modal-backdrop show in"></div>
</div>
);
};
export const NotificationsRender = function () {
return (
<div>
<div
className={ this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle.status === 'unlocked' ? 'notifications-badge stick-to-top' : 'notifications-badge' }
onClick={ this.toggleNotificationsModal }>
<span className="badge success">{ this.state.calls.success }</span>
<span className="badge error">{ this.state.calls.error }</span>
<span className="badge pending">{ this.state.calls.pending }</span>
<div className={ this.state.calls.pending === 0 ? 'spinner spinner-hide' : 'spinner' }>
<div className="rect1"></div>
<div className="rect2"></div>
<div className="rect3"></div>
<div className="rect4"></div>
<div className="rect5"></div>
</div>
</div>
{ this.renderNotificationsModal() }
</div>
);
};

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

@ -1,5 +1,4 @@
import React from 'react';
import { translate } from '../../translate/translate';
import {
copyCoinAddress,
checkAddressBasilisk,
@ -7,6 +6,13 @@ import {
} from '../../actions/actionCreators';
import Store from '../../store';
import {
AddressActionsBasiliskModeRender,
AddressActionsNonBasiliskModeRender,
AddressItemRender,
ReceiveCoinRender
} from './receiveCoin.render';
// TODO: implement sorting
// TODO: fallback to localstorage/stores data in case iguana is taking too long to respond
@ -33,42 +39,10 @@ class ReceiveCoin extends React.Component {
renderAddressActions(address) {
if (this.isBasiliskMode()) {
return (
<td>
<span className="label label-default">
<i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span>
<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>
<span
className="label label-default margin-left-10 action"
title="Check"
onClick={ () => this._checkAddressBasilisk(address) }>
<i className="icon fa-database"></i>
</span>
<span
className="label label-default margin-left-10 action"
title="Import"
onClick={ () => this._validateAddressBasilisk(address) }>
<i className="icon fa-info-circle"></i>
</span>
</td>
);
} else {
return (
<td>
<span className="label label-default">
<i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span>
<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>
);
return AddressActionsBasiliskModeRender.call(this, address);
}
return AddressActionsNonBasiliskModeRender.call(this, address);
}
hasNoAmount(address) {
@ -96,12 +70,7 @@ class ReceiveCoin extends React.Component {
}
items.push(
<tr key={ address.address }>
{ this.renderAddressActions(address.address) }
<td>{ address.address }</td>
<td>{ address.amount }</td>
<td>{ address.interest ? address.interest : 'N/A' }</td>
</tr>
AddressItemRender.call(this, address)
);
}
@ -115,51 +84,10 @@ class ReceiveCoin extends React.Component {
if (this.props &&
this.props.receive &&
this.props.mode !== 'native') {
return (
<div id="edexcoin_recieve">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div id="edexcoin_recieve_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<div className="panel-actions">
</div>
<h4 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h4>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" id="edexcoin-recieve-addr-tbl">
<thead>
<tr>
<th>{ translate('INDEX.TYPE') }</th>
<th>{ translate('INDEX.ADDRESS') }</th>
<th>{ translate('INDEX.BALANCE') }</th>
<th>{ translate('INDEX.INTEREST') }</th>
</tr>
</thead>
<tbody>
{ this.renderAddressList() }
</tbody>
<tfoot>
<tr>
<th>{ translate('INDEX.TYPE') }</th>
<th>{ translate('INDEX.ADDRESS') }</th>
<th>{ translate('INDEX.BALANCE') }</th>
<th>{ translate('INDEX.INTEREST') }</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
return ReceiveCoinRender.call(this);
}
return null;
}
}

98
react/src/components/dashboard/receiveCoin.render.js

@ -0,0 +1,98 @@
import React from 'react';
import { translate } from '../../translate/translate';
export const AddressActionsBasiliskModeRender = function (address) {
return (
<td>
<span className="label label-default">
<i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span>
<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>
<span
className="label label-default margin-left-10 action"
title="Check"
onClick={ () => this._checkAddressBasilisk(address) }>
<i className="icon fa-database"></i>
</span>
<span
className="label label-default margin-left-10 action"
title="Import"
onClick={ () => this._validateAddressBasilisk(address) }>
<i className="icon fa-info-circle"></i>
</span>
</td>
);
};
export const AddressActionsNonBasiliskModeRender = function (address) {
return (
<td>
<span className="label label-default">
<i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
</span>
<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>
);
};
export const AddressItemRender = function (address) {
return (
<tr key={ address.address }>
{ this.renderAddressActions(address.address) }
<td>{ address.address }</td>
<td>{ address.amount }</td>
<td>{ address.interest ? address.interest : 'N/A' }</td>
</tr>
);
};
export const ReceiveCoinRender = function () {
return (
<div id="edexcoin_recieve">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div id="edexcoin_recieve_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<div className="panel-actions">
</div>
<h4 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h4>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" id="edexcoin-recieve-addr-tbl">
<thead>
<tr>
<th>{ translate('INDEX.TYPE') }</th>
<th>{ translate('INDEX.ADDRESS') }</th>
<th>{ translate('INDEX.BALANCE') }</th>
<th>{ translate('INDEX.INTEREST') }</th>
</tr>
</thead>
<tbody>
{ this.renderAddressList() }
</tbody>
<tfoot>
<tr>
<th>{ translate('INDEX.TYPE') }</th>
<th>{ translate('INDEX.ADDRESS') }</th>
<th>{ translate('INDEX.BALANCE') }</th>
<th>{ translate('INDEX.INTEREST') }</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};

202
react/src/components/login/login.js

@ -14,6 +14,9 @@ import {
import Store from '../../store';
import { PassPhraseGenerator } from '../../util/crypto/passphrasegenerator';
import SwallModalRender from './swall-modal.render';
import LoginRender from './login.render';
const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000;
const IGUNA_ACTIVE_COINS_TIMEOUT = 10000;
@ -165,205 +168,18 @@ class Login extends React.Component {
renderSwallModal() {
if (this.state.displaySeedBackupModal) {
return (
<div className="swal2-container">
<div className="swal2-overlay full-opacity display-block" tabIndex="-1"></div>
<div className="swal2-modal show-swal2 visible swal2-modal-container" tabIndex="-1">
<div className="swal2-icon swal2-warning pulse-warning display-block">!</div>
<h2>{ translate('LOGIN.SAVED_WALLET_SEED') }</h2>
<div className="swal2-content display-block">{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }</div>
<hr className="swal2-spacer display-block" />
<button
className="swal2-confirm styled swal2-confirm-container"
onClick={ this.execWalletCreate }>{ translate('LOGIN.YES_I_BACKUP') }</button>
<button
className="swal2-cancel styled swal2-cancel-container"
onClick={ this.toggleSeedBackupModal }>{ translate('LOGIN.CANCEL') }</button>
</div>
</div>
);
} else {
return null;
return SwallModalRender.call(this);
}
return null;
}
render() {
if ((this.state && this.state.display) || !this.props.Main) {
return (
<div id="wallet-login">
{ this.renderSwallModal() }
<div className="page animsition vertical-align text-center fade-in">
<div className="page-content vertical-align-middle">
<div className="brand">
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
</div>
<div className="vertical-padding-20 horizontal-padding-0">
<span className="display-sync-only-coins-toggle" onClick={ this.openSyncOnlyModal }>
<i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') }
</span>
</div>
<div id="section-ie-warning" className={ this.state.activeLoginSection === 'ieWarning' ? 'show' : 'hide' }>
<div className="panel">
<div className="panel-heading">
<h3 className="panel-title">{ translate('INDEX.UNSUPPORTED_BROWSER') }</h3>
</div>
<div className="alert alert-danger alert-dismissible" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span className="sr-only">{ translate('INDEX.CLOSE') }</span>
</button>
{ translate('INDEX.IE_UNSUPPORTED') }
</div>
<div className="panel-body">
<p className="browser-usage-container">
{ translate('INDEX.PLEASE_USE') } <a href="https://www.google.com/chrome/">Google Chrome</a> { translate('INDEX.OR') } <a href="https://www.firefox.com">Mozilla FireFox</a> { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }.
</p>
<div className="col-sm-6 col-xs-6">
<a href="https://www.google.com/chrome/"><img className="brand-img" src="assets/images/browsers/chrome.png" alt="Google Chrome" /></a>
</div>
<div className="col-sm-6 col-xs-6">
<a href="https://www.firefox.com"><img className="brand-img" src="assets/images/browsers/firefox.png" alt="Mozilla FireFox" /></a>
</div>
</div>
</div>
</div>
<div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
<h4 className="color-white" id="login-welcome">{translate('INDEX.WELCOME_LOGIN')}</h4>
<div className="login-form">
<div className="form-group form-material floating">
<input
type={ this.state.seedInputVisibility ? 'text' : 'password' }
className="form-control"
name="loginPassphrase"
id="password"
onChange={ this.updateInput }
onKeyDown={ (event) => this.handleKeydown(event) } />
<i
className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
onClick={ this.toggleSeedInputVisibility }></i>
<label className="floating-label" htmlFor="inputPassword">{ translate('INDEX.WALLET_SEED') }</label>
</div>
<button
type="button"
className="btn btn-primary btn-block"
id="loginbtn"
onClick={ this.loginSeed }
disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
<div className="form-group form-material floating">
<button
className="btn btn-lg btn-flat btn-block waves-effect"
id="register-btn"
onClick={ () => this.updateActiveLoginSection('signup') }>{ translate('INDEX.CREATE_WALLET') }</button>
<button
className="btn btn-lg btn-flat btn-block waves-effect hide"
id="logint-another-wallet">{ translate('INDEX.LOGIN_ANOTHER_WALLET') }</button>
<button
className="btn btn-lg btn-flat btn-block waves-effect margin-top-20"
id="register-btn"
role="menuitem"
onClick={ this.toggleActivateCoinForm }
disabled={ !this.props.Main }>
<span className="ladda-label">{ translate('ADD_COIN.ADD_ANOTHER_COIN') }</span>
</button>
</div>
</div>
</div>
<div
id="section-login-addcoin-btn"
className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }>
<h4 className="color-white" id="login-welcome">{ translate('INDEX.WELCOME_PLEASE_ADD') }</h4>
<div
className="form-group form-material floating width-540 vertical-margin-30 horizontal-margin-0">
<button
className="btn btn-lg btn-primary btn-block ladda-button"
id="start-coin-login"
role="menuitem"
onClick={ this.toggleActivateCoinForm }
disabled={ !this.props.Main }>
<span className="ladda-label">{ translate('INDEX.ACTIVATE_COIN') }</span>
</button>
</div>
</div>
<div
id="section-register"
className={ this.state.activeLoginSection === 'signup' ? 'show' : 'hide' }>
<div className="register-form">
<h4 className="hint color-white">
{ translate('INDEX.SELECT_SEED_TYPE') }:
</h4>
<div className="form-group form-material floating">
<div
className="radio-custom radio-default radio-inline"
onClick={ () => this.generateNewSeed(256) }>
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 256 ? true : false } />
<label htmlFor="PassPhraseOptionsIguana">Iguana (256 bits)</label>
</div>
<div
className="radio-custom radio-default radio-inline"
onClick={ () => this.generateNewSeed(160) }>
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 160 ? true : false } />
<label htmlFor="PassPhraseOptionsWaves">Waves</label>
</div>
<div
className="radio-custom radio-default radio-inline"
onClick={ () => this.generateNewSeed(128) }>
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 128 ? true : false } />
<label htmlFor="PassPhraseOptionsNXT">NXT</label>
</div>
</div>
<div className="form-group form-material floating">
<textarea
className="form-control placeholder-no-fix height-100"
type="text"
id="walletseed"
value={ this.state.randomSeed }
readOnly="true"></textarea>
<label className="floating-label" htmlFor="walletseed">{ translate('INDEX.WALLET_SEED') }</label>
</div>
<div className="form-group form-material floating">
<textarea
className="form-control placeholder-no-fix height-100"
type="text"
name="randomSeedConfirm"
onChange={ this.updateInput }
id="rwalletseed"></textarea>
<span className={ this.state.isSeedConfirmError ? 'help-block' : 'hide' }>{ translate('LOGIN.ENTER_VALUE_AGAIN') }.</span>
<label className="floating-label" htmlFor="rwalletseed">{ translate('INDEX.CONFIRM_SEED') }</label>
</div>
<button
type="button"
id="register-submit-btn"
className="btn btn-primary btn-block"
onClick={ this.handleRegisterWallet }>{ translate('INDEX.REGISTER') }</button>
<div className="form-group form-material floating">
<button
className="btn btn-lg btn-flat btn-block waves-effect"
id="register-back-btn"
onClick={ () => this.updateActiveLoginSection('login') }>{ translate('INDEX.BACK_TO_LOGIN') }</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
return LoginRender.call(this);
}
return null;
}
}

179
react/src/components/login/login.render.js

@ -0,0 +1,179 @@
import React from "react";
import { translate } from "../../translate/translate";
const LoginRender = function () {
return (
<div id="wallet-login">
{ this.renderSwallModal() }
<div className="page animsition vertical-align text-center fade-in">
<div className="page-content vertical-align-middle">
<div className="brand">
<img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
</div>
<div className="vertical-padding-20 horizontal-padding-0">
<span className="display-sync-only-coins-toggle" onClick={ this.openSyncOnlyModal }>
<i className="fa fa-cubes"></i> { translate('LOGIN.DISPLAY_SYNC_ONLY') }
</span>
</div>
<div id="section-ie-warning" className={ this.state.activeLoginSection === 'ieWarning' ? 'show' : 'hide' }>
<div className="panel">
<div className="panel-heading">
<h3 className="panel-title">{ translate('INDEX.UNSUPPORTED_BROWSER') }</h3>
</div>
<div className="alert alert-danger alert-dismissible" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
<span className="sr-only">{ translate('INDEX.CLOSE') }</span>
</button>
{ translate('INDEX.IE_UNSUPPORTED') }
</div>
<div className="panel-body">
<p className="browser-usage-container">
{ translate('INDEX.PLEASE_USE') } <a href="https://www.google.com/chrome/">Google Chrome</a> { translate('INDEX.OR') } <a href="https://www.firefox.com">Mozilla FireFox</a> { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }.
</p>
<div className="col-sm-6 col-xs-6">
<a href="https://www.google.com/chrome/"><img className="brand-img" src="assets/images/browsers/chrome.png" alt="Google Chrome" /></a>
</div>
<div className="col-sm-6 col-xs-6">
<a href="https://www.firefox.com"><img className="brand-img" src="assets/images/browsers/firefox.png" alt="Mozilla FireFox" /></a>
</div>
</div>
</div>
</div>
<div id="section-login" className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
<h4 className="color-white" id="login-welcome">{translate('INDEX.WELCOME_LOGIN')}</h4>
<div className="login-form">
<div className="form-group form-material floating">
<input
type={ this.state.seedInputVisibility ? 'text' : 'password' }
className="form-control"
name="loginPassphrase"
id="password"
onChange={ this.updateInput }
onKeyDown={ (event) => this.handleKeydown(event) } />
<i
className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
onClick={ this.toggleSeedInputVisibility }></i>
<label className="floating-label" htmlFor="inputPassword">{ translate('INDEX.WALLET_SEED') }</label>
</div>
<button
type="button"
className="btn btn-primary btn-block"
id="loginbtn"
onClick={ this.loginSeed }
disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
<div className="form-group form-material floating">
<button
className="btn btn-lg btn-flat btn-block waves-effect"
id="register-btn"
onClick={ () => this.updateActiveLoginSection('signup') }>{ translate('INDEX.CREATE_WALLET') }</button>
<button
className="btn btn-lg btn-flat btn-block waves-effect hide"
id="logint-another-wallet">{ translate('INDEX.LOGIN_ANOTHER_WALLET') }</button>
<button
className="btn btn-lg btn-flat btn-block waves-effect margin-top-20"
id="register-btn"
role="menuitem"
onClick={ this.toggleActivateCoinForm }
disabled={ !this.props.Main }>
<span className="ladda-label">{ translate('ADD_COIN.ADD_ANOTHER_COIN') }</span>
</button>
</div>
</div>
</div>
<div
id="section-login-addcoin-btn"
className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }>
<h4 className="color-white" id="login-welcome">{ translate('INDEX.WELCOME_PLEASE_ADD') }</h4>
<div
className="form-group form-material floating width-540 vertical-margin-30 horizontal-margin-0">
<button
className="btn btn-lg btn-primary btn-block ladda-button"
id="start-coin-login"
role="menuitem"
onClick={ this.toggleActivateCoinForm }
disabled={ !this.props.Main }>
<span className="ladda-label">{ translate('INDEX.ACTIVATE_COIN') }</span>
</button>
</div>
</div>
<div
id="section-register"
className={ this.state.activeLoginSection === 'signup' ? 'show' : 'hide' }>
<div className="register-form">
<h4 className="hint color-white">
{ translate('INDEX.SELECT_SEED_TYPE') }:
</h4>
<div className="form-group form-material floating">
<div
className="radio-custom radio-default radio-inline"
onClick={ () => this.generateNewSeed(256) }>
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 256 ? true : false } />
<label htmlFor="PassPhraseOptionsIguana">Iguana (256 bits)</label>
</div>
<div
className="radio-custom radio-default radio-inline"
onClick={ () => this.generateNewSeed(160) }>
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 160 ? true : false } />
<label htmlFor="PassPhraseOptionsWaves">Waves</label>
</div>
<div
className="radio-custom radio-default radio-inline"
onClick={ () => this.generateNewSeed(128) }>
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 128 ? true : false } />
<label htmlFor="PassPhraseOptionsNXT">NXT</label>
</div>
</div>
<div className="form-group form-material floating">
<textarea
className="form-control placeholder-no-fix height-100"
type="text"
id="walletseed"
value={ this.state.randomSeed }
readOnly="true"></textarea>
<label className="floating-label" htmlFor="walletseed">{ translate('INDEX.WALLET_SEED') }</label>
</div>
<div className="form-group form-material floating">
<textarea
className="form-control placeholder-no-fix height-100"
type="text"
name="randomSeedConfirm"
onChange={ this.updateInput }
id="rwalletseed"></textarea>
<span className={ this.state.isSeedConfirmError ? 'help-block' : 'hide' }>{ translate('LOGIN.ENTER_VALUE_AGAIN') }.</span>
<label className="floating-label" htmlFor="rwalletseed">{ translate('INDEX.CONFIRM_SEED') }</label>
</div>
<button
type="button"
id="register-submit-btn"
className="btn btn-primary btn-block"
onClick={ this.handleRegisterWallet }>{ translate('INDEX.REGISTER') }</button>
<div className="form-group form-material floating">
<button
className="btn btn-lg btn-flat btn-block waves-effect"
id="register-back-btn"
onClick={ () => this.updateActiveLoginSection('login') }>{ translate('INDEX.BACK_TO_LOGIN') }</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default LoginRender;

24
react/src/components/login/swall-modal.render.js

@ -0,0 +1,24 @@
import React from "react";
import {translate} from "../../translate/translate";
const SwallModalRender = function () {
return (
<div className="swal2-container">
<div className="swal2-overlay full-opacity display-block" tabIndex="-1"></div>
<div className="swal2-modal show-swal2 visible swal2-modal-container" tabIndex="-1">
<div className="swal2-icon swal2-warning pulse-warning display-block">!</div>
<h2>{ translate('LOGIN.SAVED_WALLET_SEED') }</h2>
<div className="swal2-content display-block">{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }</div>
<hr className="swal2-spacer display-block"/>
<button
className="swal2-confirm styled swal2-confirm-container"
onClick={ this.execWalletCreate }>{ translate('LOGIN.YES_I_BACKUP') }</button>
<button
className="swal2-cancel styled swal2-cancel-container"
onClick={ this.toggleSeedBackupModal }>{ translate('LOGIN.CANCEL') }</button>
</div>
</div>
);
};
export default SwallModalRender;
Loading…
Cancel
Save