petitPapillon
8 years ago
24 changed files with 1151 additions and 1018 deletions
@ -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; |
||||
@ -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; |
||||
@ -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; |
||||
@ -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; |
||||
@ -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; |
||||
@ -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; |
||||
@ -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; |
||||
@ -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> |
||||
|
); |
||||
|
}; |
||||
@ -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> |
||||
|
); |
||||
|
}; |
||||
@ -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">×</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; |
||||
@ -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…
Reference in new issue