pbca26
8 years ago
committed by
GitHub
GitHub
69 changed files with 4116 additions and 3648 deletions
@ -0,0 +1,70 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const AddCoinRender = function() { |
||||
|
return ( |
||||
|
<div onKeyDown={ (event) => this.handleKeydown(event) }> |
||||
|
<div className={ `modal modal-3d-sign add-coin-modal ${this.state.modalClassName}` }> |
||||
|
<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" |
||||
|
onClick={ this.dismiss }> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<h4 className="modal-title white">{ translate('INDEX.SELECT_A_COIN') }</h4> |
||||
|
</div> |
||||
|
<div className="modal-body"> |
||||
|
<button |
||||
|
className="btn btn-primary btn-add-coin-item" |
||||
|
onClick={ this.addNewItem }>+</button> |
||||
|
<button |
||||
|
className="btn btn-outline-primary btn-add-coin-item-options" |
||||
|
onClick={ this.toggleActionsMenu }> |
||||
|
<i className={ this.state.actionsMenu ? 'fa-chevron-up' : 'fa-chevron-down' }></i> |
||||
|
</button> |
||||
|
<span className={ !this.state.actionsMenu ? 'hide' : '' }> |
||||
|
<button |
||||
|
className="btn btn-outline-primary btn-save-coin-selection" |
||||
|
onClick={ this.saveCoinSelection }>{ translate('ADD_COIN.SAVE_SELECTION') }</button> |
||||
|
<button |
||||
|
className="btn btn-outline-primary btn-load-coin-selection" |
||||
|
onClick={ this.loadCoinSelection }>{ translate('ADD_COIN.LOAD_SELECTION') }</button> |
||||
|
</span> |
||||
|
{ this.renderCoinSelectors() } |
||||
|
<div |
||||
|
className={ 'text-align-center vertical-margin-20 horizontal-margin-0 ' + (this.hasMoreThanOneCoin() ? 'col-sm-12' : 'hide') }> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary col-sm-4 float-none" |
||||
|
onClick={ this.activateAllCoins }>{ translate('ADD_COIN.ACTIVATE_ALL') }</button> |
||||
|
</div> |
||||
|
<div className="col-sm-12"> |
||||
|
<p> |
||||
|
<strong>{ translate('INDEX.FULL_MODE') }:</strong> { translate('INDEX.FULL_MODE_DESC') } |
||||
|
</p> |
||||
|
<p> |
||||
|
<strong>{ translate('INDEX.BASILISK_MODE') }:</strong> { translate('INDEX.BASILISK_MODE_DESC') } |
||||
|
</p> |
||||
|
<p> |
||||
|
<strong>{ translate('INDEX.NATIVE_MODE') }:</strong> { translate('INDEX.NATIVE_MODE_DESC1') } <strong>Komodo Daemon</strong> { translate('INDEX.NATIVE_MODE_DESC2') } <i>Iguana Daemon</i> { translate('INDEX.NATIVE_MODE_DESC3') }. |
||||
|
</p> |
||||
|
<div className="alert alert-icon alert-primary"> |
||||
|
<button type="button" className="close"> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<i className="icon md-info-outline"></i> <strong>{ translate('INDEX.NATIVE_MODE') }</strong> { translate('INDEX.NATIVE_MODE_DESC4') } <strong>{ translate('INDEX.NATIVE_MODE_DESC5') }</strong>, <i>{ translate('INDEX.NATIVE_MODE_DESC5') }</i>. |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className={ 'modal-backdrop ' + (this.state.display ? 'show in' : 'fade hide') }></div> |
||||
|
</div> |
||||
|
) |
||||
|
}; |
||||
|
|
||||
|
export default AddCoinRender; |
||||
@ -0,0 +1,139 @@ |
|||||
|
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 CoinSelectorsRender = function(item, coin, i) { |
||||
|
return ( |
||||
|
<div |
||||
|
className={ this.hasMoreThanOneCoin() ? 'multi' : 'single' } |
||||
|
key={ `add-coin-${i}` }> |
||||
|
<div className="col-sm-8"> |
||||
|
<div className="form-group"> |
||||
|
<select |
||||
|
className="form-control form-material" |
||||
|
name="selectedCoin" |
||||
|
value={ coin } |
||||
|
onChange={ (event) => this.updateSelectedCoin(event, i) } |
||||
|
autoFocus> |
||||
|
<option>{ translate('INDEX.SELECT') }</option> |
||||
|
<AddCoinOptionsCrypto /> |
||||
|
<AddCoinOptionsAC /> |
||||
|
<AddCoinOptionsACFiat /> |
||||
|
</select> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className={ this.hasMoreThanOneCoin() ? 'hide' : 'col-sm-4' }> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary" |
||||
|
onClick={ () => this.activateCoin(i) } |
||||
|
disabled={ item.mode === -2 }>{ translate('INDEX.ACTIVATE_COIN') }</button> |
||||
|
</div> |
||||
|
<div className="col-sm-12 text-center"> |
||||
|
<div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login"> |
||||
|
<input |
||||
|
type="radio" |
||||
|
className="to-labelauty labelauty" |
||||
|
name={ `mode-${i}` } |
||||
|
id={ `addcoin_mdl_full_mode_login-${i}` } |
||||
|
disabled={ item.fullMode.disabled } |
||||
|
checked={ item.fullMode.checked } /> |
||||
|
<label |
||||
|
htmlFor={ `addcoin_mdl_full_mode_login-${i}` } |
||||
|
onClick={ () => this.updateSelectedMode('1', i) } |
||||
|
style={{ pointerEvents: item.fullMode.disabled ? 'none' : 'all' }}> |
||||
|
<span |
||||
|
className="labelauty-unchecked-image" |
||||
|
style={{ display: item.fullMode.checked ? 'none' : 'inline-block' }}></span> |
||||
|
<span |
||||
|
className="labelauty-unchecked" |
||||
|
style={{ display: item.fullMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.FULL_MODE') }</span> |
||||
|
<span |
||||
|
className="labelauty-checked-image" |
||||
|
style={{ display: item.fullMode.checked ? 'inline-block' : 'none' }}></span> |
||||
|
<span |
||||
|
className="labelauty-checked" |
||||
|
style={{ display: item.fullMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.FULL_MODE') }</span> |
||||
|
</label> |
||||
|
</div> |
||||
|
<div className="form-group col-lg-4 col-md-4 col-sm-6 col-xs-6 style-addcoin-lbl-mdl-login"> |
||||
|
<input |
||||
|
type="radio" |
||||
|
className="to-labelauty labelauty" |
||||
|
name={ `mode-${i}` } |
||||
|
id={ `addcoin_mdl_basilisk_mode_login-${i}` } |
||||
|
disabled={ item.basiliskMode.disabled } |
||||
|
checked={ item.basiliskMode.checked } /> |
||||
|
<label |
||||
|
htmlFor={ `addcoin_mdl_basilisk_mode_login-${i}` } |
||||
|
onClick={ () => this.updateSelectedMode('0', i) } |
||||
|
style={{ pointerEvents: item.basiliskMode.disabled ? 'none' : 'all' }}> |
||||
|
<span |
||||
|
className="labelauty-unchecked-image" |
||||
|
style={{ display: item.basiliskMode.checked ? 'none' : 'inline-block' }}></span> |
||||
|
<span |
||||
|
className="labelauty-unchecked" |
||||
|
style={{ display: item.basiliskMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.BASILISK_MODE') }</span> |
||||
|
<span |
||||
|
className="labelauty-checked-image" |
||||
|
style={{ display: item.basiliskMode.checked ? 'inline-block' : 'none' }}></span> |
||||
|
<span |
||||
|
className="labelauty-checked" |
||||
|
style={{ display: item.basiliskMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.BASILISK_MODE') }</span> |
||||
|
</label> |
||||
|
</div> |
||||
|
<div className="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 style-addcoin-lbl-mdl-login"> |
||||
|
<input |
||||
|
type="radio" |
||||
|
className="to-labelauty labelauty" |
||||
|
name={ `mode-${i}` } |
||||
|
id={ `addcoin_mdl_native_mode_login-${i}` } |
||||
|
disabled={ item.nativeMode.disabled } |
||||
|
checked={ item.nativeMode.checked } /> |
||||
|
<label |
||||
|
htmlFor={ `addcoin_mdl_native_mode_login-${i}` } |
||||
|
onClick={ () => this.updateSelectedMode('-1', i) } |
||||
|
style={{ pointerEvents: item.nativeMode.disabled ? 'none' : 'all' }}> |
||||
|
<span |
||||
|
className="labelauty-unchecked-image" |
||||
|
style={{ display: item.nativeMode.checked ? 'none' : 'inline-block' }}></span> |
||||
|
<span |
||||
|
className="labelauty-unchecked" |
||||
|
style={{ display: item.nativeMode.checked ? 'none' : 'inline-block' }}>{ translate('INDEX.NATIVE_MODE') }</span> |
||||
|
<span |
||||
|
className="labelauty-checked-image" |
||||
|
style={{ display: item.nativeMode.checked ? 'inline-block' : 'none' }}></span> |
||||
|
<span |
||||
|
className="labelauty-checked" |
||||
|
style={{ display: item.nativeMode.checked ? 'inline-block' : 'none' }}>{ translate('INDEX.NATIVE_MODE') }</span> |
||||
|
</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className={ this.hasMoreThanOneCoin() && i !== 0 ? 'col-sm-1' : 'hide' }> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary" |
||||
|
onClick={ () => this.removeCoin(i) }> |
||||
|
<i className="fa fa-trash-o"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div className={ item.mode === '1' || item.mode === 1 ? 'col-sm-12' : 'hide' }> |
||||
|
<div className="toggle-box padding-top-3 padding-bottom-10"> |
||||
|
<span className="pointer"> |
||||
|
<label className="switch"> |
||||
|
<input type="checkbox" checked={ item.syncOnly } /> |
||||
|
<div className="slider" onClick={ () => this.toggleSyncOnlyMode(i) }></div> |
||||
|
</label> |
||||
|
<div |
||||
|
className="toggle-label" |
||||
|
onClick={ () => this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
}; |
||||
|
export default CoinSelectorsRender; |
||||
@ -0,0 +1,72 @@ |
|||||
|
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"> |
||||
|
<div className="row"> |
||||
|
<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" |
||||
|
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" |
||||
|
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" |
||||
|
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" |
||||
|
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>{ 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"></i> |
||||
|
<i className="icon md-chevron-right"></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"></i> |
||||
|
</button> |
||||
|
<input type="text" className="form-control" placeholder="Search..." disabled /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<h3 className="panel-title">{ translate('INDEX.ACTIVE_COINS') }</h3> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="wallet-widgets-list"> |
||||
|
<div> |
||||
|
<div> |
||||
|
<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" |
||||
|
onClick={ () => this.dashboardChangeActiveCoin(item.coin, item.mode) }> |
||||
|
<a className="avatar margin-bottom-5"> |
||||
|
<img |
||||
|
className="img-responsive" |
||||
|
src={ `assets/images/cryptologo/${item.coinlogo}.png` } |
||||
|
alt={ item.coinname }/> |
||||
|
<span className={ `badge up badge-${item.modecolor}` }>{ 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,221 @@ |
|||||
|
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"> |
||||
|
<div className="row"> |
||||
|
<div className="col-xs-12"> |
||||
|
<div className="alert alert-danger"> |
||||
|
<button type="button" className="close"> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<span className="jumblr-header"> |
||||
|
<i className="icon fa-paw"></i> { translate('JUMBLR.NOTICE') } |
||||
|
</span> |
||||
|
<br /> |
||||
|
{ translate('JUMBLR.DESCRIPTION') } |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="col-xs-12"> |
||||
|
<div className="alert alert-info alert-dismissible"> |
||||
|
<button type="button" className="close"> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<span className="jumblr-header"> |
||||
|
<i className="icon fa-paw"></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"> |
||||
|
<div className="panel"> |
||||
|
<div |
||||
|
className="panel-heading" |
||||
|
onClick={ () => this.openTab(0) }> |
||||
|
<a className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed' }>{ translate('JUMBLR.FEW_SECURITY_NOTES') }</a> |
||||
|
</div> |
||||
|
<div className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }> |
||||
|
<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" |
||||
|
onClick={ () => this.openTab(1) }> |
||||
|
<a className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }>{ translate('JUMBLR.ACCESS_JUMBLR_FUNDS') }</a> |
||||
|
</div> |
||||
|
<div className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }> |
||||
|
<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" onClick={ () => this.openTab(2) }> |
||||
|
<a className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed' }>{ translate('JUMBLR.USING_JUMBLR') }</a> |
||||
|
</div> |
||||
|
<div className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }> |
||||
|
<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"> |
||||
|
<div className="table-responsive"> |
||||
|
<table className="table table-striped"> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td width="20%">{ translate('JUMBLR.BTC_DEPOSIT') }</td> |
||||
|
<td> |
||||
|
<span></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"> |
||||
|
<span> |
||||
|
<i className="icon fa-eye"></i> { translate('JUMBLR.SHOW_HIDE') } |
||||
|
</span> |
||||
|
</button> |
||||
|
<span |
||||
|
className="label label-lg label-outline label-success" |
||||
|
style={{ display: 'none' }}></span> |
||||
|
<span className="label label-lg label-outline label-default">{ translate('JUMBLR.HIDDEN') }</span> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('JUMBLR.KMD_DEPOSIT') }</td> |
||||
|
<td></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"> |
||||
|
<span> |
||||
|
<i className="icon fa-eye"></i> { translate('JUMBLR.SHOW_HIDE') } |
||||
|
</span> |
||||
|
</button> |
||||
|
<span |
||||
|
className="label label-lg label-outline label-success" |
||||
|
style={{ display: 'none' }}></span> |
||||
|
<span className="label label-lg label-outline label-default">{ 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"> |
||||
|
<div className="table-responsive"> |
||||
|
<table className="table table-striped"> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td width="20%">{ translate('JUMBLR.RESULT') }</td> |
||||
|
<td> |
||||
|
<span className="label label-success"></span> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('JUMBLR.DEPOSITED') }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('JUMBLR.PUB_TO_PRIV') }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('JUMBLR.PRIV_TO_PRIV') }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('JUMBLR.PRIV_TO_PUB') }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('JUMBLR.FINISHED') }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('JUMBLR.PENDING') }</td> |
||||
|
<td></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,112 @@ |
|||||
|
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"> |
||||
|
<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"></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"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div className="navbar-container container-fluid"> |
||||
|
<div className="collapse navbar-collapse navbar-collapse-toolbar"> |
||||
|
<ul className="nav navbar-toolbar"> |
||||
|
<li className="hidden-float display-none"> |
||||
|
<a> |
||||
|
<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 onClick={ () => this.dashboardChangeSection('wallets') }> |
||||
|
<i className="site-menu-icon"></i> { translate('INDEX.WALLETS') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ this.isSectionActive('edex') ? 'active nav-top-menu' : 'nav-top-menu' }> |
||||
|
<a onClick={ () => this.dashboardChangeSection('edex') }> |
||||
|
<i className="site-menu-icon"></i> EasyDEX |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ 'display-none ' + (this.isSectionActive('jumblr') ? 'active nav-top-menu' : 'nav-top-menu') }> |
||||
|
<a onClick={ () => this.dashboardChangeSection('jumblr') }> |
||||
|
<i className="site-menu-icon"></i> Jumblr |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ this.isSectionActive('atomic') ? 'active nav-top-menu' : 'nav-top-menu' }> |
||||
|
<a onClick={ () => this.dashboardChangeSection('atomic') }> |
||||
|
<i className="site-menu-icon"></i> Atomic Explorer |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<ul className="nav navbar-toolbar navbar-right navbar-toolbar-right"> |
||||
|
<li> |
||||
|
<a |
||||
|
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={ 'pointer dropdown' + (this.state.openDropMenu ? ' open' : '') } |
||||
|
onClick={ this.openDropMenu }> |
||||
|
<a className="navbar-avatar dropdown-toggle"> |
||||
|
<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"> |
||||
|
<li> |
||||
|
<a onClick={ () => this.dashboardChangeSection('settings') }> |
||||
|
<i className="icon md-settings"></i> { translate('INDEX.SETTINGS') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a onClick={ () => this.openSyncOnlyModal() }> |
||||
|
<i className="icon fa-cubes"></i> { translate('ADD_COIN.SYNC_ONLY') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a onClick={ () => this.dashboardChangeSection('about') }> |
||||
|
<i className="icon fa-users"></i> { translate('INDEX.ABOUT_IGUANA') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className="divider"></li> |
||||
|
<li> |
||||
|
<a onClick={ this.logout }> |
||||
|
<i className="icon md-power"></i> { translate('INDEX.LOGOUT') } |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default NavbarRender; |
||||
@ -0,0 +1,114 @@ |
|||||
|
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"> |
||||
|
<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"> |
||||
|
<li className={ this.state.activeTab === 0 ? 'active' : 'pointer' }> |
||||
|
<a |
||||
|
onClick={ () => this.openTab(0) }> |
||||
|
<i className="icon fa fa-thumbs-o-up"></i> Success ({ this.state.calls.success }) |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ this.state.activeTab === 1 ? 'active' : 'pointer' }> |
||||
|
<a |
||||
|
onClick={ () => this.openTab(1) }> |
||||
|
<i className="icon fa fa-exclamation-triangle"></i> Error ({ this.state.calls.error }) |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ this.state.activeTab === 2 ? 'active' : 'pointer' }> |
||||
|
<a |
||||
|
onClick={ () => this.openTab(2) }> |
||||
|
<i className="icon fa fa-clock-o"></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' }> |
||||
|
{ this.renderNotificationsByType('success') } |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }> |
||||
|
{ this.renderNotificationsByType('error') } |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }> |
||||
|
{ this.renderNotificationsByType('pending') } |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-footer"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-default" |
||||
|
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,96 @@ |
|||||
|
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" |
||||
|
title={ translate('INDEX.COPY_TO_CLIPBOARD') } |
||||
|
onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button> |
||||
|
<span |
||||
|
className="label label-default margin-left-10 action" |
||||
|
title={ translate('INDEX.CHECK') } |
||||
|
onClick={ () => this._checkAddressBasilisk(address) }> |
||||
|
<i className="icon fa-database"></i> |
||||
|
</span> |
||||
|
<span |
||||
|
className="label label-default margin-left-10 action" |
||||
|
title={ translate('INDEX.VALIDATE') } |
||||
|
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" |
||||
|
onClick={ () => this._copyCoinAddress(address) }><i className="icon wb-copy"></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> |
||||
|
<div className="col-xs-12 margin-top-20"> |
||||
|
<div className="panel nav-tabs-horizontal"> |
||||
|
<div> |
||||
|
<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"> |
||||
|
<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,336 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
import { |
||||
|
secondsElapsedToString, |
||||
|
secondsToString |
||||
|
} from '../../util/time'; |
||||
|
|
||||
|
export const UTXOCacheInfoRender = function(refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp) { |
||||
|
return ( |
||||
|
<div className="col-lg-12"> |
||||
|
<hr /> |
||||
|
{ translate('SEND.TOTAL_UTXO_AVAILABLE') }: { refreshCacheData ? refreshCacheData.data && refreshCacheData.data.length : translate('SEND.PRESS_UPDATE_BTN') }<br /> |
||||
|
<div className={ !timestamp ? 'hide' : '' }> |
||||
|
{ translate('SEND.LAST_UPDATED') } @ { secondsToString(refreshCacheData ? refreshCacheData.timestamp : 0, true) } | { secondsElapsedToString(timestamp || 0) } { translate('SEND.AGO') }<br /> |
||||
|
</div> |
||||
|
<div className={ isReadyToUpdate ? 'hide' : '' }>{ translate('SEND.NEXT_UPDATE_IN') } { secondsElapsedToString(600 - timestamp) }s</div> |
||||
|
<div |
||||
|
className={ 'full-width margin-bottom-10 margin-top-10 ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }> |
||||
|
<div |
||||
|
className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent" |
||||
|
style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%' }}> |
||||
|
{ translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength } |
||||
|
</div> |
||||
|
</div> |
||||
|
<button |
||||
|
type="button" |
||||
|
className={ 'margin-top-10 ' + (isReadyToUpdate ? 'btn btn-primary waves-effect waves-light' : 'hide') } |
||||
|
onClick={ this._fetchNewUTXOData } |
||||
|
disabled={ waitUntilCallIsFinished }> |
||||
|
{ waitUntilCallIsFinished ? translate('SEND.LOCKED_PLEASE_WAIT') + '...' : translate('SEND.UPDATE') } |
||||
|
</button> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const SendCoinResponseRender = function () { |
||||
|
if (this.props.ActiveCoin.lastSendToResponse) { |
||||
|
let items = []; |
||||
|
const _response = this.props.ActiveCoin.lastSendToResponse; |
||||
|
|
||||
|
for (let key in _response) { |
||||
|
if (key !== 'tag') { |
||||
|
items.push( |
||||
|
<tr key={ key }> |
||||
|
<td>{ key }</td> |
||||
|
<td>{ this.renderKey(key) }</td> |
||||
|
</tr> |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return items; |
||||
|
} else { |
||||
|
return ( |
||||
|
<div className="padding-20 text-align-center"> |
||||
|
<div className="vertical-padding-10 horizontal-padding-0"> |
||||
|
{ translate('SEND.PROCESSING_TRANSACTION') }...<br /> |
||||
|
{ translate('SEND.NOTE_IT_WILL_TAKE') }. |
||||
|
</div> |
||||
|
<div className="loader-wrapper active"> |
||||
|
<div className="loader-layer loader-blue"> |
||||
|
<div className="loader-circle-left"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
<div className="loader-circle-gap"></div> |
||||
|
<div className="loader-circle-right"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="loader-layer loader-red"> |
||||
|
<div className="loader-circle-left"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
<div className="loader-circle-gap"></div> |
||||
|
<div className="loader-circle-right"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="loader-layer loader-green"> |
||||
|
<div className="loader-circle-left"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
<div className="loader-circle-gap"></div> |
||||
|
<div className="loader-circle-right"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="loader-layer loader-yellow"> |
||||
|
<div className="loader-circle-left"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
<div className="loader-circle-gap"></div> |
||||
|
<div className="loader-circle-right"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export const OASendUIRender = function () { |
||||
|
return ( |
||||
|
<div className="row"> |
||||
|
<div className="col-lg-6 form-group form-material"> |
||||
|
<label |
||||
|
className="control-label" |
||||
|
htmlFor="kmdWalletSendTo">Fetch OpenAlias recipient address</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="sendToOA" |
||||
|
onChange={ this.updateInput } |
||||
|
id="kmdWalletSendTo" |
||||
|
placeholder="Enter an alias as address@site.com" |
||||
|
autoComplete="off" |
||||
|
required /> |
||||
|
</div> |
||||
|
<div className="col-lg-6 form-group form-material"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ this.getOAdress }> |
||||
|
Get address |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const SendApiTypeSelectorRender = function () { |
||||
|
return ( |
||||
|
<div className="row"> |
||||
|
<div className="col-lg-10 margin-bottom-10"> |
||||
|
<span className="pointer"> |
||||
|
<label className="switch"> |
||||
|
<input type="checkbox" checked={ this.state.sendApiType } /> |
||||
|
<div className="slider" onClick={ this.toggleSendAPIType }></div> |
||||
|
</label> |
||||
|
<div className="toggle-label" onClick={ this.toggleSendAPIType }>{ translate('SEND.SEND_VIA') } (sendtoaddress API)</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const SendCoinRender = function () { |
||||
|
return ( |
||||
|
<div className="col-sm-12 padding-top-10"> |
||||
|
<div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12"> |
||||
|
<div className="steps row margin-top-10"> |
||||
|
<div className={ this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4' }> |
||||
|
<span className="step-number">1</span> |
||||
|
<div className="step-desc"> |
||||
|
<span className="step-title">{ translate('INDEX.FILL_SEND_FORM') }</span> |
||||
|
<p>{ translate('INDEX.FILL_SEND_DETAILS') }</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className={ this.state.currentStep === 1 ? 'step col-md-4 current' : 'step col-md-4' }> |
||||
|
<span className="step-number">2</span> |
||||
|
<div className="step-desc"> |
||||
|
<span className="step-title">{ translate('INDEX.CONFIRMING') }</span> |
||||
|
<p>{ translate('INDEX.CONFIRM_DETAILS') }</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className={ this.state.currentStep === 2 ? 'step col-md-4 current' : 'step col-md-4' }> |
||||
|
<span className="step-number">3</span> |
||||
|
<div className="step-desc"> |
||||
|
<span className="step-title">{ translate('INDEX.PROCESSING_TX') }</span> |
||||
|
<p>{ translate('INDEX.PROCESSING_DETAILS') }</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className={ this.state.currentStep === 0 ? 'panel' : 'panel hide' }> |
||||
|
<div className="panel-heading"> |
||||
|
<h3 className="panel-title"> |
||||
|
{ translate('INDEX.SEND') } { this.props.ActiveCoin.coin } |
||||
|
</h3> |
||||
|
</div> |
||||
|
<div className="panel-body container-fluid"> |
||||
|
<form className="edexcoin-send-form" method="post" autoComplete="off"> |
||||
|
{ this.renderSendApiTypeSelector() } |
||||
|
<div className="row"> |
||||
|
<div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'col-xlg-12 form-group form-material' : 'hide' }> |
||||
|
<label className="control-label" htmlFor="edexcoinSendFrom">{ translate('INDEX.SEND_FROM') }</label> |
||||
|
{ this.renderAddressList() } |
||||
|
</div> |
||||
|
</div> |
||||
|
{ this.renderOASendUI() } |
||||
|
<div className="row"> |
||||
|
<div className="col-xlg-12 form-group form-material"> |
||||
|
<label className="control-label" htmlFor="edexcoinSendTo">{ translate('INDEX.SEND_TO') }</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
id="edexcoinSendTo" |
||||
|
name="sendTo" |
||||
|
placeholder={ translate('SEND.ENTER_AN_ADDRESS') } |
||||
|
autoComplete="off" |
||||
|
value={ this.state.sendTo } |
||||
|
onChange={ this.updateInput } |
||||
|
required /> |
||||
|
</div> |
||||
|
<div className="col-lg-6 form-group form-material"> |
||||
|
<label className="control-label" htmlFor="edexcoinAmount"> |
||||
|
{ this.props.ActiveCoin.coin } |
||||
|
</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
id="edexcoinAmount" |
||||
|
name="amount" |
||||
|
placeholder="0.000" |
||||
|
autoComplete="off" |
||||
|
onChange={ this.updateInput } /> |
||||
|
</div> |
||||
|
<div className="col-lg-6 form-group form-material"> |
||||
|
<label className="control-label" htmlFor="edexcoinFee">{ translate('INDEX.FEE') }</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
id="edexcoinFee" |
||||
|
name="fee" |
||||
|
defaultValue={ this.state.fee } |
||||
|
value={ this.state.fee } |
||||
|
placeholder="0.000" |
||||
|
autoComplete="off" |
||||
|
onChange={ this.updateInput } /> |
||||
|
</div> |
||||
|
<div className="col-lg-12"> |
||||
|
<span> |
||||
|
<strong>{ translate('INDEX.TOTAL') } ({ translate('INDEX.AMOUNT_SM') } - txfee):</strong> { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className={ this.state.sendApiType ? 'hide' : 'col-lg-10 margin-top-30' }> |
||||
|
<span className="pointer"> |
||||
|
<label className="switch"> |
||||
|
<input type="checkbox" checked={ this.state.sendSig } /> |
||||
|
<div className="slider" onClick={ this.toggleSendSig }></div> |
||||
|
</label> |
||||
|
<div className="toggle-label" onClick={ this.toggleSendSig }>{ translate('INDEX.DONT_SEND') }</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
{ this.renderUTXOCacheInfo()} |
||||
|
<div className="col-lg-12"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light pull-right" |
||||
|
onClick={ () => this.changeSendCoinStep(1) } |
||||
|
disabled={ !this.state.sendFrom || !this.state.sendTo || !this.state.amount }> |
||||
|
{ translate('INDEX.SEND') } { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className={ this.state.currentStep === 1 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide' }> |
||||
|
<div className="panel"> |
||||
|
<div className="panel-body"> |
||||
|
<div className="row"> |
||||
|
<div className="col-xs-12"> |
||||
|
<strong>{ translate('INDEX.TO') }</strong> |
||||
|
</div> |
||||
|
<div className="col-lg-6 col-sm-6 col-xs-12">{ this.state.sendTo }</div> |
||||
|
<div className="col-lg-6 col-sm-6 col-xs-6"> |
||||
|
{ this.state.amount } { this.props.ActiveCoin.coin } |
||||
|
</div> |
||||
|
<div className="col-lg-6 col-sm-6 col-xs-12">{ translate('INDEX.TX_FEE_REQ') }</div> |
||||
|
<div className="col-lg-6 col-sm-6 col-xs-6"> |
||||
|
{ this.state.fee } { this.props.ActiveCoin.coin } |
||||
|
</div> |
||||
|
</div> |
||||
|
<br /> |
||||
|
|
||||
|
<div className="row"> |
||||
|
<div className="col-xs-12"> |
||||
|
<strong>{ translate('INDEX.FROM') }</strong> |
||||
|
</div> |
||||
|
<div className="col-lg-6 col-sm-6 col-xs-12">{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }</div> |
||||
|
<div className="col-lg-6 col-sm-6 col-xs-6 confirm-currency-send-container"> |
||||
|
{ Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="widget-body-footer"> |
||||
|
<a |
||||
|
className="btn btn-default waves-effect waves-light" |
||||
|
onClick={ () => this.changeSendCoinStep(0) }>{ translate('INDEX.BACK') }</a> |
||||
|
<div className="widget-actions pull-right"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary" |
||||
|
onClick={ () => this.changeSendCoinStep(2) }>{ translate('INDEX.CONFIRM') }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className={ this.state.currentStep === 2 ? 'col-xlg-12 col-md-12 col-sm-12 col-xs-12' : 'col-xlg-12 col-md-12 col-sm-12 col-xs-12 hide' }> |
||||
|
<div className="panel"> |
||||
|
<div className="panel-heading"> |
||||
|
<h4 className="panel-title">{ translate('INDEX.TRANSACTION_RESULT') }</h4> |
||||
|
<div className={ !this.state.sendSig ? 'hide' : 'center' }> |
||||
|
{ translate('SEND.YOU_PICKED_OPT') } |
||||
|
</div> |
||||
|
<table className="table table-hover table-striped"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.KEY') }</th> |
||||
|
<th>{ translate('INDEX.INFO') }</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
{ this.renderSendCoinResponse() } |
||||
|
</tbody> |
||||
|
</table> |
||||
|
<div className="widget-body-footer"> |
||||
|
<div className="widget-actions margin-bottom-15 margin-right-15"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary" |
||||
|
onClick={ () => this.changeSendCoinStep(0) } |
||||
|
disabled={ this.state.utxoMethodInProgress }>{ !this.state.utxoMethodInProgress ? translate('INDEX.MAKE_ANOTHER_TX') : translate('SEND.PLEASE_WAIT') + '...' }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,534 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; |
||||
|
import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; |
||||
|
import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; |
||||
|
|
||||
|
export const AppInfoTabRender = function() { |
||||
|
return ( |
||||
|
<div className="panel" id="AppInfo" onClick={ () => this.openTab('AppInfo', 8) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 8 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon md-info"></i>{ translate('SETTINGS.APP_INFO') } |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 8 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 8 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body"> |
||||
|
<div className="col-sm-12 padding-top-15"> |
||||
|
<div className="row"> |
||||
|
<h5>{ translate('SETTINGS.APP_RELEASE') }</h5> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="col-sm-12 padding-top-20"> |
||||
|
<div className="row"> |
||||
|
<h5>{ translate('SETTINGS.SYS_INFO') }</h5> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="col-sm-12 padding-top-20"> |
||||
|
<div className="row"> |
||||
|
<h5>{ translate('SETTINGS.LOCATIONS') }</h5> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } |
||||
|
</div> |
||||
|
<div> |
||||
|
{ translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } |
||||
|
</div> |
||||
|
<div> |
||||
|
Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } |
||||
|
</div> |
||||
|
<div> |
||||
|
Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } |
||||
|
</div> |
||||
|
<div> |
||||
|
Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } |
||||
|
</div> |
||||
|
<div> |
||||
|
Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const SettingsRender = function() { |
||||
|
return ( |
||||
|
<div className="margin-left-0"> |
||||
|
<div className="page-content" id="section-iguana-wallet-settings"> |
||||
|
<div className="row"> |
||||
|
<div className="col-xlg-12 col-md-12"> |
||||
|
<div className="row"> |
||||
|
<div className="col-xlg-12 col-md-12"> |
||||
|
<h4 className="font-size-14 text-uppercase">{ translate('INDEX.WALLET_SETTINGS') }</h4> |
||||
|
<div className="panel-group" id="SettingsAccordion"> |
||||
|
<div |
||||
|
className="panel" |
||||
|
id="WalletInfo" |
||||
|
onClick={ () => this.openTab('WalletInfo', 0) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon md-balance-wallet"></i>{ translate('INDEX.WALLET_INFO') } |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body"> |
||||
|
<table className="table"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th width="10%">{ translate('INDEX.KEY') }</th> |
||||
|
<th>{ translate('INDEX.VALUE') }</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td className="wallet-info-key">pubkey</td> |
||||
|
<td>{ this.props.Main.activeHandle.pubkey }</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td className="wallet-info-key">btcpubkey</td> |
||||
|
<td>{ this.props.Main.activeHandle.btcpubkey }</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td className="wallet-info-key">rmd160</td> |
||||
|
<td>{ this.props.Main.activeHandle.rmd160 }</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td className="wallet-info-key">NXT</td> |
||||
|
<td>{ this.props.Main.activeHandle.NXT }</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td className="wallet-info-key">notary</td> |
||||
|
<td>{ this.props.Main.activeHandle.notary }</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td className="wallet-info-key">status</td> |
||||
|
<td>{ this.props.Main.activeHandle.status }</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
className="panel" |
||||
|
id="AddNodeforCoin" |
||||
|
onClick={ () => this.openTab('AddNodeforCoin', 1) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon md-plus-square"></i>{ translate('INDEX.ADD_NODE') } |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body"> |
||||
|
<div className="row"> |
||||
|
<div className="col-sm-6"> |
||||
|
<div className="col-sm-12"> |
||||
|
<p>{ translate('INDEX.USE_THIS_SECTION') }</p> |
||||
|
</div> |
||||
|
<div className="col-sm-8 col-xs-12"> |
||||
|
<div className="form-group"> |
||||
|
<select |
||||
|
className="form-control form-material" |
||||
|
name="getPeersCoin" |
||||
|
onChange={ this.updateInput }> |
||||
|
<option>{ translate('INDEX.SELECT_COIN') }</option> |
||||
|
<AddCoinOptionsCrypto /> |
||||
|
<AddCoinOptionsAC /> |
||||
|
<AddCoinOptionsACFiat /> |
||||
|
</select> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="col-sm-4 col-xs-12 text-align-center"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ this.checkNodes }>{ translate('INDEX.CHECK_NODES') }</button> |
||||
|
</div> |
||||
|
<div className="col-sm-12"> |
||||
|
<h5> |
||||
|
SuperNET Peers: |
||||
|
</h5> |
||||
|
<p>{ this.renderSNPeersList() }</p> |
||||
|
<h5> |
||||
|
Raw Peers: |
||||
|
</h5> |
||||
|
<p>{ this.renderPeersList() }</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="col-sm-6"> |
||||
|
<div className="col-sm-12"> |
||||
|
<p>{ translate('INDEX.USE_THIS_SECTION_PEER') }</p> |
||||
|
</div> |
||||
|
<div className="col-sm-8 col-xs-12"> |
||||
|
<div className="form-group"> |
||||
|
<select |
||||
|
className="form-control form-material" |
||||
|
name="addNodeCoin" |
||||
|
onChange={ this.updateInput }> |
||||
|
<option>{ translate('INDEX.SELECT_COIN') }</option> |
||||
|
<AddCoinOptionsCrypto /> |
||||
|
<AddCoinOptionsAC /> |
||||
|
<AddCoinOptionsACFiat /> |
||||
|
</select> |
||||
|
</div> |
||||
|
<div className="form-group"> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="addPeerIP" |
||||
|
placeholder={ translate('SETTINGS.ADD_PEER_IP') } |
||||
|
onChange={ this.updateInput } /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="col-sm-4 col-xs-12 text-align-center"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ this.addNode }>{ translate('INDEX.ADD_NODE') }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
className="panel" |
||||
|
id="DumpWallet" |
||||
|
onClick={ () => this.openTab('DumpWallet', 2) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon wb-briefcase"></i>{ translate('INDEX.WALLET_BACKUP') } |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body">Wallet Backup section to be updated soon.</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
className="panel" |
||||
|
id="FiatCurrencySettings" |
||||
|
onClick={ () => this.openTab('FiatCurrencySettings', 3) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 3 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon fa-money"></i>{ translate('INDEX.FIAT_CURRENCY') } |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 3 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 3 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body">Fiat currency settings section to be updated soon.</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
className="panel" |
||||
|
id="ExportKeys" |
||||
|
onClick={ () => this.openTab('ExportKeys', 4) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 4 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon md-key"></i>{ translate('INDEX.EXPORT_KEYS') } |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 4 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 4 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body"> |
||||
|
<p> |
||||
|
<div>{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }</div><br/> |
||||
|
<strong> |
||||
|
<i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i> |
||||
|
</strong> |
||||
|
</p> |
||||
|
<div className="col-sm-12"></div> |
||||
|
<form className="wifkeys-form" method="post" action="javascript:" autoComplete="off"> |
||||
|
<div className="form-group form-material floating"> |
||||
|
<input |
||||
|
type="password" |
||||
|
className="form-control" |
||||
|
name="wifkeysPassphrase" |
||||
|
id="wifkeysPassphrase" |
||||
|
onChange={ this.updateInput } /> |
||||
|
<label className="floating-label" htmlFor="wifkeysPassphrase">{ translate('INDEX.PASSPHRASE') }</label> |
||||
|
</div> |
||||
|
<div className="col-sm-12 col-xs-12 text-align-center"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ this.exportWifKeys }>{ translate('INDEX.GET_WIF_KEYS') }</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
|
||||
|
<div className="col-sm-12 padding-top-15"> |
||||
|
<div className="row"> |
||||
|
<table className={ this.props.Settings && this.props.Settings.address ? 'table show' : 'table hide' }> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<strong>{ this.props.ActiveCoin.coin }</strong> |
||||
|
</td> |
||||
|
<td className="padding-left-15">{ this.props.Settings.address }</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<strong>{ this.props.ActiveCoin.coin }Wif</strong> |
||||
|
</td> |
||||
|
<td className="padding-left-15">{ this.props.Settings.wifkey }</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
className="panel" |
||||
|
id="ImportKeys" |
||||
|
onClick={ () => this.openTab('ImportKeys', 5) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 5 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon md-key"></i>{ translate('INDEX.IMPORT_KEYS') } |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 5 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 5 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body"> |
||||
|
<p> |
||||
|
<div>{ translate('INDEX.IMPORT_KEYS_DESC_P1') }</div><br/> |
||||
|
<div>{ translate('INDEX.IMPORT_KEYS_DESC_P2') }</div><br/> |
||||
|
<div>{ translate('INDEX.IMPORT_KEYS_DESC_P3') }</div><br/> |
||||
|
<strong> |
||||
|
<i>{ translate('INDEX.PLEASE_KEEP_KEYS_SAFE') }</i> |
||||
|
</strong> |
||||
|
</p> |
||||
|
<div className="col-sm-12"></div> |
||||
|
<form className="wifkeys-import-form" method="post" action="javascript:" autoComplete="off"> |
||||
|
<div className="form-group form-material floating"> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="importWifKey" |
||||
|
id="importWifkey" |
||||
|
onChange={ this.updateInput } /> |
||||
|
<label |
||||
|
className="floating-label" |
||||
|
htmlFor="importWifkey">{ translate('INDEX.INPUT_PRIV_KEY') }</label> |
||||
|
</div> |
||||
|
<div className="col-sm-12 col-xs-12 text-align-center"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ this.importWifKey }>{ translate('INDEX.IMPORT_PRIV_KEY') }</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
className="panel" |
||||
|
id="DebugLog" |
||||
|
onClick={ () => this.openTab('DebugLog', 6) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 6 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon fa-bug"></i>{ translate('INDEX.DEBUG_LOG') } |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body"> |
||||
|
<p>{ translate('INDEX.DEBUG_LOG_DESC') }</p> |
||||
|
<div className="col-sm-12"></div> |
||||
|
<form |
||||
|
className="read-debug-log-import-form" |
||||
|
method="post" |
||||
|
action="javascript:" |
||||
|
autoComplete="off"> |
||||
|
<div className="form-group form-material floating"> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="debugLinesCount" |
||||
|
id="readDebugLogLines" |
||||
|
value={ this.state.debugLinesCount } |
||||
|
onChange={ this.updateInput } /> |
||||
|
<label |
||||
|
className="floating-label" |
||||
|
htmlFor="readDebugLogLines">{ translate('INDEX.DEBUG_LOG_LINES') }</label> |
||||
|
</div> |
||||
|
<div className="form-group form-material floating"> |
||||
|
<select |
||||
|
className="form-control form-material" |
||||
|
name="debugTarget" |
||||
|
id="settingsDelectDebugLogOptions" |
||||
|
onChange={ this.updateInput }> |
||||
|
<option value="iguana">Iguana</option> |
||||
|
<option value="komodo">Komodo</option> |
||||
|
</select> |
||||
|
<label |
||||
|
className="floating-label" |
||||
|
htmlFor="settingsDelectDebugLogOptions">{ translate('INDEX.TARGET') }</label> |
||||
|
</div> |
||||
|
<div className="col-sm-12 col-xs-12 text-align-center"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ this.readDebugLog }>{ translate('INDEX.LOAD_DEBUG_LOG') }</button> |
||||
|
</div> |
||||
|
<div className="col-sm-12 col-xs-12 text-align-left"> |
||||
|
<div className="padding-top-40 padding-bottom-20 horizontal-padding-0">{ this.renderDebugLogData() }</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
className="panel" |
||||
|
id="AppSettings" |
||||
|
onClick={ () => this.openTab('AppSettings', 7) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 7 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon fa-wrench"></i>{ translate('SETTINGS.APP_CONFIG') } (config.json) |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 7 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 7 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body"> |
||||
|
<p> |
||||
|
<strong>{ translate('SETTINGS.CONFIG_RESTART_REQUIRED') }</strong> |
||||
|
</p> |
||||
|
<div className="col-sm-12 padding-top-15"> |
||||
|
<table> |
||||
|
<tbody> |
||||
|
{ this.renderConfigEditForm() } |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
<div className="col-sm-12 col-xs-12 text-align-center padding-top-25 padding-bottom-25"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ this._saveAppConfig }>{ translate('SETTINGS.SAVE_APP_CONFIG') }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
{ this.renderAppInfoTab() } |
||||
|
|
||||
|
<div |
||||
|
className="panel" |
||||
|
id="Cli" |
||||
|
onClick={ () => this.openTab('Cli', 9) }> |
||||
|
<div className="panel-heading"> |
||||
|
<a className={ this.state.activeTab === 9 ? 'panel-title' : 'panel-title collapsed' }> |
||||
|
<i className="icon fa-code"></i> CLI |
||||
|
</a> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.activeTab === 9 ? 'panel-collapse collapse in' : 'panel-collapse collapse' } |
||||
|
style={{ height: this.state.activeTab === 9 ? this.state.activeTabHeight + 'px' : '0' }}> |
||||
|
<div className="panel-body"> |
||||
|
<p>Select a coin and type in CLI compatible command</p> |
||||
|
<div className="col-sm-12"></div> |
||||
|
<form |
||||
|
className="execute-cli-cmd-form" |
||||
|
method="post" |
||||
|
action="javascript:" |
||||
|
autoComplete="off"> |
||||
|
<div className="form-group form-material floating"> |
||||
|
<select |
||||
|
className="form-control form-material" |
||||
|
name="cliCoin" |
||||
|
id="settingsCliOptions" |
||||
|
onChange={ this.updateInput }> |
||||
|
<option value="">Select coin</option> |
||||
|
{ this.renderActiveCoinsList('native') } |
||||
|
</select> |
||||
|
<label |
||||
|
className="floating-label" |
||||
|
htmlFor="settingsDelectDebugLogOptions">Coin</label> |
||||
|
</div> |
||||
|
<div className="form-group form-material floating"> |
||||
|
<textarea |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="cliCmd" |
||||
|
id="cliCmd" |
||||
|
value={ this.state.cliCmdString } |
||||
|
onChange={ this.updateInput }></textarea> |
||||
|
<label |
||||
|
className="floating-label" |
||||
|
htmlFor="readDebugLogLines">Type in CLI compatible cmd</label> |
||||
|
</div> |
||||
|
<div className="col-sm-12 col-xs-12 text-align-center"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
disabled={ !this.state.cliCoin || !this.state.cliCmd } |
||||
|
onClick={ () => this.execCliCmd() }>Execute</button> |
||||
|
</div> |
||||
|
<div className="col-sm-12 col-xs-12 text-align-left"> |
||||
|
<div className="padding-top-40 padding-bottom-20 horizontal-padding-0"> |
||||
|
{ this.renderCliResponse() } |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,98 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
export const ProgressRender = function (fork) { |
||||
|
return ( |
||||
|
<div> |
||||
|
<div> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div |
||||
|
className={'font-size-80-percent full-width ' + (this.isFullySynced(fork) ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }> |
||||
|
{ translate('INDEX.BUNDLES') } ({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==>> RT{ fork.RTheight } |
||||
|
</div> |
||||
|
<div |
||||
|
className={ 'font-size-80-percent ' + (this.isFullySynced(fork) ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') } |
||||
|
style={{ width: fork.bundles + '%' }}> |
||||
|
{ translate('INDEX.BUNDLES') } { fork.bundles }% |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div id="additional-progress-bars" className={ this.isFullySynced(fork) ? 'hide' : '' }> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div |
||||
|
className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent" |
||||
|
style={{ width: fork.utxo + '%' }}> |
||||
|
utxo { fork.utxo }% |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div |
||||
|
className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent" |
||||
|
style={{ width: fork.balances + '%' }}> |
||||
|
{ translate('INDEX.BALANCES') } { fork.balances }% |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div |
||||
|
className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent" |
||||
|
style={{ width: fork.validated + '%' }}> |
||||
|
{ translate('INDEX.VALIDATED') } { fork.validated }% |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const ForkItemRender = function (forkInfo, port) { |
||||
|
return ( |
||||
|
<div key={ port } className="padding-bottom-60 full-width"> |
||||
|
<div className="avatar"> |
||||
|
<img |
||||
|
className="img-responsive margin-bottom-5" |
||||
|
src={ `assets/images/cryptologo/${this.renderCoinName(forkInfo.registry.coin).logo}.png` } |
||||
|
alt={ forkInfo.registry.coin }/> |
||||
|
<span className="badge up badge-success margin-bottom-5">Full</span> |
||||
|
<div className="coin-name">{ this.renderCoinName(forkInfo.registry.coin).name } ({ forkInfo.registry.coin.toUpperCase() })</div> |
||||
|
<div className="margin-top-10"> |
||||
|
<span |
||||
|
className="btn btn-primary" |
||||
|
onClick={ () => this._stopIguanaFork(forkInfo.registry.pmid) }> |
||||
|
<span className="fa fa-stop"></span> { translate('INDEX.STOP') } |
||||
|
</span> |
||||
|
<span |
||||
|
className="btn btn-primary margin-left-10" |
||||
|
onClick={ () => this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port) }> |
||||
|
<span className="fa fa-undo"></span> { translate('INDEX.RESTART') } |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="progress-bars"> |
||||
|
{ this.renderProgress(forkInfo.getinfo) } |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const SyncOnlyRender = function() { |
||||
|
return ( |
||||
|
<div> |
||||
|
<div className="modal show sync-only-forks"> |
||||
|
<div className="modal-dialog modal-center modal-lg"> |
||||
|
<div className="modal-content"> |
||||
|
<div className="modal-body modal-body-container"> |
||||
|
{ this.renderForksList() } |
||||
|
</div> |
||||
|
<div className="modal-footer"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-default" |
||||
|
onClick={ this.closeSyncOnlyModal }>{ translate('INDEX.CLOSE') }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-backdrop show in"></div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,85 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const WalletsBalanceRender = function() { |
||||
|
return ( |
||||
|
<div id="wallet-widgets"> |
||||
|
<div className="col-xs-12"> |
||||
|
<div className={ this.isActiveCoinMode('native') || (this.isActiveCoinMode('full') && !this.isFullySynced()) ? 'col-xs-12' : 'col-xs-12 hide' }> |
||||
|
<div className="alert alert-info alert-dismissible"> |
||||
|
<button className="close" type="button"> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<h4>{ translate('INDEX.ACTIVATING_WALLET_RT') }</h4> |
||||
|
<p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p> |
||||
|
<p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p> |
||||
|
<p className="font-weight-600">{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p> |
||||
|
</div> |
||||
|
|
||||
|
<div className="alert alert-info alert-dismissible"> |
||||
|
<button className="close" type="button"> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<h4>{ translate('INDEX.FETCHING_COIN_DATA') }</h4> |
||||
|
<p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }</p> |
||||
|
<p>{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }</p> |
||||
|
<p className="font-weight-600">{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-12 col-xs-12' }> |
||||
|
<div className="widget widget-shadow"> |
||||
|
<div className="widget-content"> |
||||
|
<div className="padding-20 padding-top-10"> |
||||
|
<div className="clearfix"> |
||||
|
<div className="pull-left padding-vertical-10"> |
||||
|
<i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.BALANCE')} |
||||
|
</div> |
||||
|
<span className="pull-right padding-top-10 font-size-22"> |
||||
|
{ this.renderBalance('main') } { this.props.ActiveCoin.coin } |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }> |
||||
|
<div className="widget widget-shadow"> |
||||
|
<div className="widget-content"> |
||||
|
<div className="padding-20 padding-top-10"> |
||||
|
<div className="clearfix"> |
||||
|
<div className="pull-left padding-vertical-10"> |
||||
|
<i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') } |
||||
|
</div> |
||||
|
<span className="pull-right padding-top-10 font-size-22"> |
||||
|
{ this.renderBalance('interest') } { this.props.ActiveCoin.coin } |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className={ this.isNativeOrBasiliskCoinMode() ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide' }> |
||||
|
<div className="widget widget-shadow"> |
||||
|
<div className="widget-content"> |
||||
|
<div className="padding-20 padding-top-10"> |
||||
|
<div className="clearfix"> |
||||
|
<div className="pull-left padding-vertical-10"> |
||||
|
<i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TOTAL_BALANCE') } |
||||
|
</div> |
||||
|
<span className="pull-right padding-top-10 font-size-22"> |
||||
|
{ this.renderBalance('total') } { this.props.ActiveCoin.coin } |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsBalanceRender; |
||||
@ -0,0 +1,76 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const WalletsBasiliskConnectionRender = function() { |
||||
|
return ( |
||||
|
<div onKeyDown={ (event) => this.handleKeydown(event) }> |
||||
|
<div className="modal show" id="RefreshBasiliskConnectionsMdl"> |
||||
|
<div className="modal-dialog modal-center modal-md"> |
||||
|
<div className="modal-content"> |
||||
|
<div className="modal-header bg-orange-a400 wallet-send-header"> |
||||
|
<h4 className="modal-title white"> |
||||
|
<span className="icon fa-refresh no-margin"></span> { translate('INDEX.REFRESHING_BASILISK_NET') }... |
||||
|
</h4> |
||||
|
<button type="button" className="close btn-close" onClick={ this.basiliskConnectionAction }> |
||||
|
<span>×</span> |
||||
|
<span className="sr-only">{ translate('INDEX.CLOSE') }</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div className="modal-body text-align-center"> |
||||
|
<div className="loader-wrapper active"> |
||||
|
<div className="loader-layer loader-blue"> |
||||
|
<div className="loader-circle-left"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
<div className="loader-circle-gap"></div> |
||||
|
<div className="loader-circle-right"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="loader-layer loader-red"> |
||||
|
<div className="loader-circle-left"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
<div className="loader-circle-gap"></div> |
||||
|
<div className="loader-circle-right"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="loader-layer loader-green"> |
||||
|
<div className="loader-circle-left"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
<div className="loader-circle-gap"></div> |
||||
|
<div className="loader-circle-right"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="loader-layer loader-yellow"> |
||||
|
<div className="loader-circle-left"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
<div className="loader-circle-gap"></div> |
||||
|
<div className="loader-circle-right"> |
||||
|
<div className="circle"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<h5 className="text-left"> |
||||
|
{ `${translate('IAPI.CON_STATUS')}... ${this.props.Dashboard.connectedNotaries.current}/${this.props.Dashboard.connectedNotaries.total}:${this.props.Dashboard.connectedNotaries.currentNodeName}` } <span className="pull-right" id="basilisk-connections-refresh-percent">{ Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }%</span> |
||||
|
</h5> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div className="progress-bar progress-bar-info progress-bar-striped active font-size-80-percent" style={{ width: Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) + '%' }} role="progressbar" id="basilisk-connections-refresh-progress-bar"></div> |
||||
|
</div> |
||||
|
<pre id="basilisk-connections-refresh-status-output no-padding"> |
||||
|
{ this.props.Dashboard.connectedNotaries.failedToConnectNodes ? `Failed: ${this.props.Dashboard.connectedNotaries.failedToConnectNodes}` : null } |
||||
|
</pre> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-backdrop show in"></div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsBasiliskConnectionRender; |
||||
@ -0,0 +1,36 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const WalletsBasiliskRefreshRender = function() { |
||||
|
return ( |
||||
|
<div id="edexcoin_dashboard_basilisk_refresh_status"> |
||||
|
<div className="col-xs-12 margin-top-20"> |
||||
|
<div className="col-xs-12"> |
||||
|
<div className="panel"> |
||||
|
<div className="panel-heading"> |
||||
|
<h3 className="panel-title">{ translate('INDEX.FETCHING_BASILISK_DATA') }</h3> |
||||
|
<div className="panel-actions"> |
||||
|
<a className="panel-action icon md-refresh-alt"></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="table-responsive"> |
||||
|
<table className="table table-hover table-striped"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.ADDRESS') }</th> |
||||
|
<th>{ translate('INDEX.LIST_UNSPENT') }</th> |
||||
|
<th>{ translate('INDEX.LIST_TRANSACTIONS') }</th> |
||||
|
<th>{ translate('INDEX.GET_BALANCE') }</th> |
||||
|
<th>{ translate('INDEX.REFRESH') }</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsBasiliskRefreshRender; |
||||
@ -0,0 +1,40 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
import { animation } from '../../util/rc-tree-animate'; |
||||
|
import { TreeNode } from 'rc-tree'; |
||||
|
|
||||
|
const WalletsCacheDataRender = function() { |
||||
|
return ( |
||||
|
<div> |
||||
|
<div className="modal show"> |
||||
|
<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"> |
||||
|
<div className="panel-body"> |
||||
|
<div className="tab-content"> |
||||
|
<div className="tab-pane active"> |
||||
|
{ this.renderNotariesFetching() } |
||||
|
<Tree defaultExpandAll={ false } openAnimation={ animation }> |
||||
|
{ this.renderCoinRootNodes() } |
||||
|
</Tree> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-footer"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-default" |
||||
|
onClick={ this.closeViewCacheModal }>{ translate('INDEX.CLOSE') }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-backdrop show in"></div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsCacheDataRender; |
||||
@ -0,0 +1,245 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
import WalletsBasiliskRefresh from './walletsBasiliskRefresh'; |
||||
|
import WalletsBasiliskConnection from './walletsBasiliskConnection'; |
||||
|
import WalletsNotariesList from './walletsNotariesList'; |
||||
|
import WalletsCacheData from './walletsCacheData'; |
||||
|
import { secondsToString } from '../../util/time'; |
||||
|
|
||||
|
export const PaginationItemRender = function(i) { |
||||
|
return ( |
||||
|
<li |
||||
|
key={ `${i}-pagination-link` } |
||||
|
className={ this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button' }> |
||||
|
<a |
||||
|
key={ `${i}-pagination` } |
||||
|
onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a> |
||||
|
</li> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const PaginationItemsPerPageSelectorRender = function() { |
||||
|
return ( |
||||
|
<div className="dataTables_length"> |
||||
|
<label> |
||||
|
{ translate('INDEX.SHOW') } |
||||
|
<select |
||||
|
name="itemsPerPage" |
||||
|
className="form-control input-sm" |
||||
|
onChange={ this.updateInput }> |
||||
|
<option value="10">10</option> |
||||
|
<option value="25">25</option> |
||||
|
<option value="50">50</option> |
||||
|
<option value="100">100</option> |
||||
|
</select> |
||||
|
{ translate('INDEX.ENTRIES_SM') } |
||||
|
</label> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const PaginationRender = function(paginationFrom, paginationTo) { |
||||
|
return ( |
||||
|
<div className="row unselectable"> |
||||
|
<div className="col-sm-5"> |
||||
|
<div className="dataTables_info">{ translate('INDEX.SHOWING') } { paginationFrom } { translate('INDEX.TO_ALT') } { paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div> |
||||
|
</div> |
||||
|
<div className="col-sm-7"> |
||||
|
<div className="dataTables_paginate paging_simple_numbers"> |
||||
|
<ul className="pagination"> |
||||
|
<li className={ this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }> |
||||
|
<a onClick={ () => this.updateCurrentPage(this.state.activePage - 1) }>{ translate('INDEX.PREVIOUS') }</a> |
||||
|
</li> |
||||
|
{ this.renderPaginationItems() } |
||||
|
<li className={ this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage) ? 'paginate_button next disabled' : 'paginate_button next' }> |
||||
|
<a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const TxHistoryListRender = function(tx, index) { |
||||
|
return ( |
||||
|
<tr key={ tx.txid + tx.amount }> |
||||
|
<td>{ this.renderTxType(tx.category || tx.type) }</td> |
||||
|
<td>{ tx.confirmations }</td> |
||||
|
<td>{ tx.amount || translate('DASHBOARD.UNKNOWN') }</td> |
||||
|
<td>{ secondsToString(tx.blocktime || tx.timestamp) }</td> |
||||
|
<td className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hide' : '' }>{ tx.address }</td> |
||||
|
<td className={ this.props.ActiveCoin.mode === 'basilisk' ? 'text-center' : '' }> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid" |
||||
|
onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index) }> |
||||
|
<i className="icon fa-search"></i> |
||||
|
</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const UseCacheToggleRender = function() { |
||||
|
return ( |
||||
|
<div className="col-sm-2"> |
||||
|
<div className="pull-left margin-right-10"> |
||||
|
<input type="checkbox" id="edexcoin_cache_api" checked={this.state.useCache} /> |
||||
|
</div> |
||||
|
<label className="padding-top-3" htmlFor="edexcoin_cache_api" onClick={this.toggleCacheApi}>Use cache</label> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const AddressListRender = function() { |
||||
|
return ( |
||||
|
<div className={ `btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ${(this.state.addressSelectorOpen ? 'open' : '')}` }> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn dropdown-toggle btn-info" |
||||
|
title={ `-${translate('KMD_NATIVE.SELECT_ADDRESS')}-` } |
||||
|
onClick={ this.openDropMenu }> |
||||
|
<span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span> |
||||
|
<span className="bs-caret"> |
||||
|
<span className="caret"></span> |
||||
|
</span> |
||||
|
</button> |
||||
|
<div className="dropdown-menu open"> |
||||
|
<ul className="dropdown-menu inner"> |
||||
|
<li className="selected"> |
||||
|
<a><span className="text"> - { translate('KMD_NATIVE.SELECT_ADDRESS') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a> |
||||
|
</li> |
||||
|
{ this.renderAddressByType('public') } |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const WalletsDataRender = function() { |
||||
|
return ( |
||||
|
<span> |
||||
|
<WalletsBasiliskRefresh {...this.props} /> |
||||
|
<WalletsBasiliskConnection {...this.props} /> |
||||
|
<WalletsNotariesList {...this.props} /> |
||||
|
<WalletsCacheData {...this.props} /> |
||||
|
<div id="edexcoin_dashboardinfo"> |
||||
|
<div className="col-xs-12 margin-top-20"> |
||||
|
<div className="panel nav-tabs-horizontal"> |
||||
|
<div> |
||||
|
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12"> |
||||
|
<div className="panel"> |
||||
|
<header className="panel-heading z-index-10"> |
||||
|
<div className={ this.props.ActiveCoin.mode === 'basilisk' ? 'panel-actions' : 'panel-actions hide' }> |
||||
|
<div className={ 'margin-bottom-3 ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }> |
||||
|
<div |
||||
|
className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent" |
||||
|
style={{ width: 100 - (this.state.currentStackLength * 100 / this.state.totalStackLength) + '%'}}> |
||||
|
{ translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength } |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ this.state.basiliskActionsMenu ? 'dropdown open' : 'dropdown' } |
||||
|
onClick={ this.toggleBasiliskActionsMenu }> |
||||
|
<a className="dropdown-toggle btn-xs btn-default"> |
||||
|
<i className="icon fa-magic margin-right-10"></i> { translate('INDEX.BASILISK_ACTIONS') } <span className="caret"></span> |
||||
|
</a> |
||||
|
<ul className="dropdown-menu dropdown-menu-right"> |
||||
|
<li> |
||||
|
<a onClick={ this.getDexNotariesAction }> |
||||
|
<i className="icon fa-sitemap"></i> { translate('INDEX.GET_NOTARY_NODES_LIST') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a onClick={ this.basiliskConnectionAction }> |
||||
|
<i className="icon wb-refresh"></i> { translate('INDEX.REFRESH_BASILISK_CONNECTIONS') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ !this.state.useCache ? 'hide' : '' }> |
||||
|
<a onClick={ this.basiliskRefreshActionOne }> |
||||
|
<i className="icon fa-cloud-download"></i> { translate('INDEX.FETCH_WALLET_DATA') } ({ translate('INDEX.ACTIVE_ADDRESS') }) |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ !this.state.useCache || this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses.public.length === 1 ? 'hide' : '' }> |
||||
|
<a onClick={ this.basiliskRefreshAction }> |
||||
|
<i className="icon fa-cloud-download"></i> { translate('INDEX.FETCH_ALL_ADDR') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ !this.state.useCache ? 'hide' : '' }> |
||||
|
<a onClick={ this.removeAndFetchNewCache }> |
||||
|
<i className="icon fa-history"></i> { translate('INDEX.REFETCH_WALLET_DATA') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ 'display-none ' + (!this.state.useCache ? 'hide' : '') }> |
||||
|
<a onClick={ this.restartBasiliskInstance }> |
||||
|
<i className="icon fa-refresh"></i> Restart Basilisk Instance (unsafe!) |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ !this.state.useCache ? 'hide' : '' }> |
||||
|
<a onClick={ this._toggleViewCacheModal }> |
||||
|
<i className="icon fa-list-alt"></i> { translate('INDEX.VIEW_CACHE_DATA') } |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
<h4 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h4> |
||||
|
</header> |
||||
|
<div className="panel-body"> |
||||
|
<div className="row"> |
||||
|
<div className="col-sm-8"> |
||||
|
{ this.renderAddressList() } |
||||
|
</div> |
||||
|
{ this.renderUseCacheToggle } |
||||
|
</div> |
||||
|
<div className="row pagination-container"> |
||||
|
<div className="col-sm-6"> |
||||
|
{ this.renderPaginationItemsPerPageSelector() } |
||||
|
</div> |
||||
|
<div className="col-sm-6"> |
||||
|
<div className="dataTables_filter"> |
||||
|
<label> |
||||
|
{ translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" disabled="true" /> |
||||
|
</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="row"> |
||||
|
<table className="table table-hover dataTable table-striped" width="100%"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.DIRECTION') }</th> |
||||
|
<th className="hidden-xs hidden-sm">{ translate('INDEX.CONFIRMATIONS') }</th> |
||||
|
<th>{ translate('INDEX.AMOUNT') }</th> |
||||
|
<th>{ translate('INDEX.TIME') }</th> |
||||
|
<th className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hide' : '' }>{ translate('INDEX.DEST_ADDRESS') }</th> |
||||
|
<th className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hidden-xs hidden-sm text-center' : 'hidden-xs hidden-sm' }>{ translate('INDEX.TX_DETAIL') }</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
{ this.renderTxHistoryList() } |
||||
|
</tbody> |
||||
|
<tfoot> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.DIRECTION') }</th> |
||||
|
<th>{ translate('INDEX.CONFIRMATIONS') }</th> |
||||
|
<th>{ translate('INDEX.AMOUNT') }</th> |
||||
|
<th>{ translate('INDEX.TIME') }</th> |
||||
|
<th className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hide' : '' }>{ translate('INDEX.DEST_ADDRESS') }</th> |
||||
|
<th className={ this.props.ActiveCoin.mode === 'basilisk' ? 'hidden-xs hidden-sm text-center' : 'hidden-xs hidden-sm' }>{ translate('INDEX.TX_DETAIL') }</th> |
||||
|
</tr> |
||||
|
</tfoot> |
||||
|
</table> |
||||
|
</div> |
||||
|
{ this.renderPagination() } |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</span> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,114 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const WalletsHeaderRender = function() { |
||||
|
return ( |
||||
|
<div |
||||
|
className="page-header page-header-bordered header-easydex margin-bottom-0" |
||||
|
id="easydex-header-div" |
||||
|
style={{ backgroundImage: `url("assets/images/bg/${this.props.activeSection}_transparent_header_bg.png")`, backgroundRepeat: 'no-repeat', backgroundPosition: '0%' }}> |
||||
|
<h1 className={ this.isActiveSectionJumblr() ? 'hide' : 'page-title' }>EasyDEX</h1> |
||||
|
<ol className="breadcrumb"> |
||||
|
<li className={ this.isActiveSectionJumblr() ? 'hide' : 'header-easydex-section' }>{ translate('INDEX.DASHBOARD') }</li> |
||||
|
<li className={ !this.isActiveSectionJumblr() ? 'hide' : 'header-easydex-section' }> |
||||
|
<img src="assets/images/native/jumblr_header_title_logo.png" /><br /> { translate('SIDEBAR.JUMBLR_MOTTO') } |
||||
|
</li> |
||||
|
</ol> |
||||
|
<div className="page-header-actions z-index-1 display-none"> |
||||
|
<div id="kmd_header_button"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light"> |
||||
|
<i className="icon md-plus"></i> |
||||
|
</button> |
||||
|
<ul className="dropdown-menu animate dropdown-menu-right"> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.DASHBOARD') }</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.SEND') }</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.RECEIVE') }</a> |
||||
|
</li> |
||||
|
<li className="divider"></li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.SETTINGS') }</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
<div id="zec_header_button" className="display-none"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="bg-yellow-600 btn btn-floating white waves-effect waves-float waves-light"> |
||||
|
<i className="icon md-plus"></i> |
||||
|
</button> |
||||
|
<ul className="dropdown-menu animate dropdown-menu-right"> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.DASHBOARD') }</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.SEND') }</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.RECEIVE') }</a> |
||||
|
</li> |
||||
|
<li className="divider"></li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.SETTINGS') }</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
<div id="kmd_header_button"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn white waves-effect waves-light"> |
||||
|
<i className="icon fa-refresh"></i>{ translate('INDEX.REFRESH') } |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div id="kmd_header_button" className="display-none"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light"> |
||||
|
<i className="icon md-plus"></i> |
||||
|
</button> |
||||
|
<ul className="dropdown-menu animate dropdown-menu-right"> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.DASHBOARD') }</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.SEND') }</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.RECEIVE') }</a> |
||||
|
</li> |
||||
|
<li className="divider"></li> |
||||
|
<li> |
||||
|
<a>{ translate('INDEX.SETTINGS') }</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
|
||||
|
<div className="row no-space width-350 hidden-xs display-none"> |
||||
|
<div className="col-xs-6"> |
||||
|
<div className="counter"> |
||||
|
<span className="font-weight-medium"> - BTC</span> |
||||
|
<span className="counter-label small"> - USD</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="col-xs-6"> |
||||
|
<div className="counter"> |
||||
|
<span className="font-weight-medium"> - BTCD</span> |
||||
|
<span className="counter-label small"> - USD</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsHeaderRender; |
||||
@ -0,0 +1,35 @@ |
|||||
|
import React from 'react'; |
||||
|
import WalletsNativeBalance from './walletsNativeBalance'; |
||||
|
import WalletsNativeInfo from './walletsNativeInfo'; |
||||
|
import WalletsNativeReceive from './walletsNativeReceive'; |
||||
|
import WalletsNativeSend from './walletsNativeSend'; |
||||
|
import WalletsNativeSyncProgress from './walletsNativeSyncProgress'; |
||||
|
import WalletsNativeTxHistory from './walletsNativeTxHistory'; |
||||
|
|
||||
|
const WalletsNativeRender = function() { |
||||
|
return ( |
||||
|
<div className="page margin-left-0"> |
||||
|
<div className="padding-top-0"> |
||||
|
<div id="easydex-header-div" className="background-color-white" style={{ 'backgroundImage': `url("assets/images/bg/${this.defaultBG()}_transparent_header_bg.png")` }}> |
||||
|
<ol className="breadcrumb"> |
||||
|
<li className="header-easydex-section"> |
||||
|
<img src={ `assets/images/native/${this.defaultBG()}_header_title_logo.png` } /> <span className={ `easydex-section-image ${(this.props.ActiveCoin.coin === 'KMD' ? 'hide' : '')}` }>{ this.props.ActiveCoin.coin }</span> |
||||
|
</li> |
||||
|
</ol> |
||||
|
</div> |
||||
|
<div className="page-content"> |
||||
|
<WalletsNativeSyncProgress {...this.props} /> |
||||
|
<div className="row"> |
||||
|
<WalletsNativeBalance {...this.props} /> |
||||
|
<WalletsNativeTxHistory {...this.props} /> |
||||
|
<WalletsNativeReceive {...this.props} /> |
||||
|
<WalletsNativeSend {...this.props} /> |
||||
|
<WalletsNativeInfo {...this.props} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsNativeRender; |
||||
@ -0,0 +1,22 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const WalletsNativeAlertRender = function() { |
||||
|
return ( |
||||
|
<div className="alert alert-danger alert-dismissible"> |
||||
|
<button className="close" type="button"> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<h4>{ translate('INDEX.OOPS_ERROR') }</h4> |
||||
|
<p> |
||||
|
<span>{ translate('INDEX.OOPS_ERROR_DESC') }</span> |
||||
|
<code>server=1</code><br/> |
||||
|
<code>rpcport=</code><br/> |
||||
|
<code>rpcuser=</code><br/> |
||||
|
<code>rpcpassword=</code> |
||||
|
</p> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsNativeAlertRender; |
||||
@ -0,0 +1,70 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const WalletsNativeBalanceRender = function() { |
||||
|
return ( |
||||
|
<div className="col-xs-12"> |
||||
|
<div className="col-lg-3 col-xs-12"> |
||||
|
<div className="widget widget-shadow"> |
||||
|
<div className="widget-content white bg-yellow-800"> |
||||
|
<div className="padding-20 padding-top-10"> |
||||
|
<div className="clearfix"> |
||||
|
<div className="pull-left padding-vertical-10"> |
||||
|
<i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.TRANSPARENT_BALANCE') } |
||||
|
</div> |
||||
|
<span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="col-lg-3 col-xs-12"> |
||||
|
<div className="widget widget-shadow"> |
||||
|
<div className="widget-content white bg-blue-grey-800"> |
||||
|
<div className="padding-20 padding-top-10"> |
||||
|
<div className="clearfix"> |
||||
|
<div className="pull-left padding-vertical-10"> |
||||
|
<i className="icon fa-eye-slash font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.Z_BALANCE') } |
||||
|
</div> |
||||
|
<span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="col-lg-3 col-xs-12"> |
||||
|
<div className="widget widget-shadow"> |
||||
|
<div className="widget-content white bg-cyan-700"> |
||||
|
<div className="padding-20 padding-top-10"> |
||||
|
<div className="clearfix"> |
||||
|
<div className="pull-left padding-vertical-10"> |
||||
|
<i className="icon fa-money font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.INTEREST_EARNED') } |
||||
|
</div> |
||||
|
<span className="pull-right padding-top-10 font-size-22">{ this.props.Dashboard.progress && this.props.Dashboard.progress.interest ? this.props.Dashboard.progress.interest : '-' }</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="col-lg-3 col-xs-12"> |
||||
|
<div className="widget widget-shadow"> |
||||
|
<div className="widget-content white bg-green-600"> |
||||
|
<div className="padding-20 padding-top-10"> |
||||
|
<div className="clearfix"> |
||||
|
<div className="pull-left padding-vertical-10"> |
||||
|
<i className="icon fa-bullseye font-size-24 vertical-align-bottom margin-right-5"></i>{ translate('INDEX.ZT_BALANCE') } |
||||
|
</div> |
||||
|
<span className="pull-right padding-top-10 font-size-22">{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsNativeBalanceRender; |
||||
@ -0,0 +1,143 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const WalletsNativeInfoRender = function() { |
||||
|
return ( |
||||
|
<div> |
||||
|
<div className="col-xlg-6 col-md-4"> |
||||
|
<div className="panel"> |
||||
|
<div className="panel-heading"> |
||||
|
<h3 className="panel-title">{ translate('INDEX.WALLET_INFO') }</h3> |
||||
|
</div> |
||||
|
<div className="table-responsive"> |
||||
|
<table className="table table-striped"> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.WALLET_VERSION') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.walletversion } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.BALANCE') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.balance } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.UNCONFIRMED_BALANCE') }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.IMMATURE_BALANCE') }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.TOTAL_TX_COUNT') }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="col-xlg-6 col-md-8"> |
||||
|
<div className="panel"> |
||||
|
<div className="panel-heading"> |
||||
|
<h3 className="panel-title"> |
||||
|
Komodo { translate('INDEX.INFO') } |
||||
|
</h3> |
||||
|
</div> |
||||
|
<div className="table-responsive"> |
||||
|
<table className="table table-striped"> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.VERSION') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.KMDversion } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.PROTOCOL_VERSION') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.protocolversion } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.NOTARIZED') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.notarized } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
{ translate('INDEX.NOTARIZED') } Hash |
||||
|
</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.notarizedhash ? |
||||
|
this.props.Dashboard.progress.notarizedhash.substring(0, Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2)) + |
||||
|
'\t' + |
||||
|
this.props.Dashboard.progress.notarizedhash.substring(Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2), this.props.Dashboard.progress.notarizedhash.length) |
||||
|
: '' |
||||
|
} |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
{ translate('INDEX.NOTARIZED') } BTC |
||||
|
</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.BLOCKS') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.blocks } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.CONNECTIONS') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.connections } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.DIFFICULTY') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.difficulty } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>Testnet</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.testnet } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.PAY_TX_FEE') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.paytxfee } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.RELAY_FEE') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.relayfee } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('INDEX.ERRORS') }</td> |
||||
|
<td> |
||||
|
{ this.props.Dashboard.progress.errors } |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsNativeInfoRender; |
||||
@ -0,0 +1,82 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
export const AddressListRender = function(address, type) { |
||||
|
return ( |
||||
|
<tr key={ address.address }> |
||||
|
<td> |
||||
|
<span className={ type === 'public' ? 'label label-default' : 'label label-dark' }> |
||||
|
<i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> { type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') } |
||||
|
</span> |
||||
|
<button |
||||
|
className="btn btn-default btn-xs clipboard-edexaddr margin-left-10" |
||||
|
onClick={ () => this.copyZAddress(address.address) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button> |
||||
|
</td> |
||||
|
<td>{ type === 'public' ? address.address : address.address.substring(0, 34) + '...' }</td> |
||||
|
<td>{ address.amount }</td> |
||||
|
<td></td> |
||||
|
</tr> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const WalletsNativeReceiveRender = function() { |
||||
|
return ( |
||||
|
<div> |
||||
|
<div className="col-xs-12 margin-top-20"> |
||||
|
<div className="panel nav-tabs-horizontal"> |
||||
|
<div> |
||||
|
<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 className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') } onClick={ this.openDropMenu }> |
||||
|
<a className="dropdown-toggle white btn btn-warning"> |
||||
|
<i className="icon md-arrows margin-right-10"></i> { translate('INDEX.GET_NEW_ADDRESS') } <span className="caret"></span> |
||||
|
</a> |
||||
|
<ul |
||||
|
className="dropdown-menu dropdown-menu-right"> |
||||
|
<li> |
||||
|
<a onClick={ () => this.getNewAddress('public') }> |
||||
|
<i className="icon fa-eye"></i> { translate('INDEX.TRANSPARENT_ADDRESS') } |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a onClick={ () => this.getNewAddress('private') }> |
||||
|
<i className="icon fa-eye-slash"></i> { translate('INDEX.PRIVATE_Z_ADDRESS') } |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
<h3 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h3> |
||||
|
</header> |
||||
|
<div className="panel-body"> |
||||
|
<table className="table table-hover dataTable table-striped"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.TYPE') }</th> |
||||
|
<th>{ translate('INDEX.ADDRESS') }</th> |
||||
|
<th>{ translate('INDEX.AMOUNT') }</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
{ this.renderAddressList('public') } |
||||
|
{ this.renderAddressList('private') } |
||||
|
</tbody> |
||||
|
<tfoot> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.TYPE') }</th> |
||||
|
<th>{ translate('INDEX.ADDRESS') }</th> |
||||
|
<th>{ translate('INDEX.AMOUNT') }</th> |
||||
|
</tr> |
||||
|
</tfoot> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,179 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
export const AddressListRender = function() { |
||||
|
return ( |
||||
|
<div className={ `btn-group bootstrap-select form-control form-material showkmdwalletaddrs show-tick ${(this.state.addressSelectorOpen ? 'open' : '')}` }> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn dropdown-toggle btn-info" |
||||
|
title="- { translate('SEND.SELECT_T_OR_Z_ADDR') } -" |
||||
|
onClick={ this.openDropMenu }> |
||||
|
<span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span> |
||||
|
<span className="bs-caret"> |
||||
|
<span className="caret"></span> |
||||
|
</span> |
||||
|
</button> |
||||
|
<div className="dropdown-menu open"> |
||||
|
<ul className="dropdown-menu inner"> |
||||
|
<li className="selected"> |
||||
|
<a><span className="text"> - { translate('SEND.SELECT_T_OR_Z_ADDR') } - </span><span className="glyphicon glyphicon-ok check-mark"></span></a> |
||||
|
</li> |
||||
|
{ this.renderAddressByType('public') } |
||||
|
{ this.renderAddressByType('private') } |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const OASendUIRender = function() { |
||||
|
return ( |
||||
|
<div className="row"> |
||||
|
<div className="col-lg-6 form-group form-material"> |
||||
|
<label |
||||
|
className="control-label" |
||||
|
htmlFor="kmdWalletSendTo">{ translate('INDEX.SEND_TO') } via Openalias address</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="sendToOA" |
||||
|
onChange={ this.updateInput } |
||||
|
id="kmdWalletSendTo" |
||||
|
placeholder="Enter an alias as address@site.com" |
||||
|
autoComplete="off" |
||||
|
required /> |
||||
|
</div> |
||||
|
<div className="col-lg-6 form-group form-material"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ this.getOAdress }> |
||||
|
Get address |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const WalletsNativeSendRender = function() { |
||||
|
return ( |
||||
|
<div id="kmd_wallet_send"> |
||||
|
<div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12"> |
||||
|
<div className="panel" id="projects"> |
||||
|
<div className="panel-heading"> |
||||
|
<h3 className="panel-title"> |
||||
|
{ translate('INDEX.SEND') } { this.props.ActiveCoin.coin } |
||||
|
</h3> |
||||
|
</div> |
||||
|
<div className="panel-body container-fluid"> |
||||
|
<form className="extcoin-send-form" method="post" autoComplete="off"> |
||||
|
<div className="row"> |
||||
|
<div className="col-xlg-12 form-group form-material"> |
||||
|
<label className="control-label">{ translate('INDEX.SEND_FROM') }</label> |
||||
|
{ this.renderAddressList() } |
||||
|
</div> |
||||
|
</div> |
||||
|
{ this.renderOASendUI() } |
||||
|
<div className="row"> |
||||
|
<div className="col-xlg-12 form-group form-material"> |
||||
|
<label className="control-label" htmlFor="kmdWalletSendTo">{ translate('INDEX.SEND_TO') }</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="sendTo" |
||||
|
onChange={ this.updateInput } |
||||
|
value={ this.state.sendTo } |
||||
|
id="kmdWalletSendTo" |
||||
|
placeholder={ translate('SEND.ENTER_T_OR_Z_ADDR') } |
||||
|
autoComplete="off" |
||||
|
required /> |
||||
|
</div> |
||||
|
<div className="col-lg-6 form-group form-material"> |
||||
|
<label className="control-label" htmlFor="kmdWalletAmount"> |
||||
|
{ this.props.ActiveCoin.coin } |
||||
|
</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="amount" |
||||
|
onChange={ this.updateInput } |
||||
|
id="kmdWalletAmount" |
||||
|
placeholder="0.000" |
||||
|
autoComplete="off" /> |
||||
|
</div> |
||||
|
<div className="col-lg-6 form-group form-material"> |
||||
|
<label className="control-label" htmlFor="kmdWalletFee">{ translate('INDEX.FEE') }</label> |
||||
|
<input |
||||
|
type="text" |
||||
|
className="form-control" |
||||
|
name="fee" |
||||
|
onChange={ this.updateInput } |
||||
|
id="kmdWalletFee" |
||||
|
placeholder="0.000" |
||||
|
value={ this.state.fee } |
||||
|
autoComplete="off" /> |
||||
|
</div> |
||||
|
<div className="col-lg-12"> |
||||
|
<span> |
||||
|
<strong>{ translate('INDEX.TOTAL') }:</strong> { this.state.amount } - { this.state.fee }/kb = { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="col-lg-12"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light pull-right" |
||||
|
onClick={ this.handleSubmit } |
||||
|
disabled={ !this.state.sendFrom || !this.state.sendTo || !this.state.amount }> |
||||
|
{ translate('INDEX.SEND') } { this.state.amount } { this.props.ActiveCoin.coin } |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="col-xs-12"> |
||||
|
<div className="row"> |
||||
|
<div className="panel nav-tabs-horizontal"> |
||||
|
<div> |
||||
|
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12"> |
||||
|
<div className="panel"> |
||||
|
<header className="panel-heading"> |
||||
|
<h3 className="panel-title">{ translate('INDEX.OPERATIONS_STATUSES') }</h3> |
||||
|
</header> |
||||
|
<div className="panel-body"> |
||||
|
<table |
||||
|
className="table table-hover dataTable table-striped" |
||||
|
width="100%"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.STATUS') }</th> |
||||
|
<th>ID</th> |
||||
|
<th>{ translate('INDEX.TIME') }</th> |
||||
|
<th>{ translate('INDEX.RESULT') }</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
{ this.renderOPIDList() } |
||||
|
</tbody> |
||||
|
<tfoot> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.STATUS') }</th> |
||||
|
<th>ID</th> |
||||
|
<th>{ translate('INDEX.TIME') }</th> |
||||
|
<th>{ translate('INDEX.RESULT') }</th> |
||||
|
</tr> |
||||
|
</tfoot> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,31 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
export const ChainActivationNotificationRender = function() { |
||||
|
return ( |
||||
|
<div className="alert alert-info alert-dismissible margin-bottom-40"> |
||||
|
<button className="close" type="button"> |
||||
|
<span>×</span> |
||||
|
</button> |
||||
|
<h4> |
||||
|
{ translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() } |
||||
|
</h4> |
||||
|
<p>{ this.renderLB('INDEX.KMD_STARTED') }</p> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const WalletsNativeSyncProgressRender = function() { |
||||
|
return ( |
||||
|
<div> |
||||
|
{ this.renderChainActivationNotification() } |
||||
|
<div className="row sync-progress-container"> |
||||
|
<div className="col-xs-12"> |
||||
|
<div className="progress"> |
||||
|
{ this.renderSyncPercentagePlaceholder() } |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,137 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
import { secondsToString } from '../../util/time'; |
||||
|
|
||||
|
export const PaginationItemsPerPageSelectorRender = function() { |
||||
|
return ( |
||||
|
<div className="dataTables_length"> |
||||
|
<label> |
||||
|
{ translate('INDEX.SHOW') } |
||||
|
<select |
||||
|
name="itemsPerPage" |
||||
|
className="form-control input-sm" |
||||
|
onChange={ this.updateInput }> |
||||
|
<option value="10">10</option> |
||||
|
<option value="25">25</option> |
||||
|
<option value="50">50</option> |
||||
|
<option value="100">100</option> |
||||
|
</select> |
||||
|
{ translate('INDEX.ENTRIES_SM') } |
||||
|
</label> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const PaginationRender = function(paginationStart, paginationEnd, paginationNextState) { |
||||
|
return ( |
||||
|
<div className="row unselectable"> |
||||
|
<div className="col-sm-5"> |
||||
|
<div |
||||
|
className="dataTables_info">{ translate('INDEX.SHOWING') } { paginationStart } { translate('INDEX.TO') } { paginationEnd } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div> |
||||
|
</div> |
||||
|
<div className="col-sm-7"> |
||||
|
<div className="dataTables_paginate paging_simple_numbers"> |
||||
|
<ul className="pagination"> |
||||
|
<li className={ this.state.activePage |
||||
|
=== 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }> |
||||
|
<a onClick={ () => this.updateCurrentPage(this.state.activePage - 1) }>{ translate('INDEX.PREVIOUS') }</a> |
||||
|
</li> |
||||
|
{this.renderPaginationItems()} |
||||
|
<li className={ paginationNextState ? 'paginate_button next disabled' : 'paginate_button next' }> |
||||
|
<a onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const TxHistoryListRender = function() { |
||||
|
return this.state.itemsList.map((tx, index) => |
||||
|
<tr key={ tx.txid + tx.amount }> |
||||
|
<td> |
||||
|
<span className="label label-default"> |
||||
|
<i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') } |
||||
|
</span> |
||||
|
</td> |
||||
|
<td>{ this.renderTxType(tx.category) }</td> |
||||
|
<td>{ tx.confirmations }</td> |
||||
|
<td>{ tx.amount }</td> |
||||
|
<td>{ secondsToString(tx.time) }</td> |
||||
|
<td>{ this.renderAddress(tx) }</td> |
||||
|
<td> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-xs white btn-info waves-effect waves-light btn-kmdtxid" |
||||
|
onClick={ () => this.toggleTxInfoModal(!this.props.ActiveCoin.showTransactionInfo, index) }><i className="icon fa-search"></i></button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const WalletsNativeTxHistoryRender = function() { |
||||
|
return ( |
||||
|
<div className="native-transactions"> |
||||
|
<div> |
||||
|
<div className="col-xs-12 margin-top-20"> |
||||
|
<div className="panel nav-tabs-horizontal"> |
||||
|
<div> |
||||
|
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12"> |
||||
|
<div className="panel"> |
||||
|
<header className="panel-heading"> |
||||
|
<h3 className="panel-title">{ translate('INDEX.TRANSACTION_HISTORY') }</h3> |
||||
|
</header> |
||||
|
<div className="panel-body"> |
||||
|
<div className="row"> |
||||
|
<div className="col-sm-6"> |
||||
|
{ this.renderPaginationItemsPerPageSelector() } |
||||
|
</div> |
||||
|
<div className="col-sm-6"> |
||||
|
<div className="dataTables_filter"> |
||||
|
<label> |
||||
|
{ translate('INDEX.SEARCH') }: <input type="search" className="form-control input-sm" disabled="true" /> |
||||
|
</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="row"> |
||||
|
<table className="table table-hover dataTable table-striped" width="100%"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.TYPE') }</th> |
||||
|
<th>{ translate('INDEX.DIRECTION') }</th> |
||||
|
<th>{ translate('INDEX.CONFIRMATIONS') }</th> |
||||
|
<th>{ translate('INDEX.AMOUNT') }</th> |
||||
|
<th>{ translate('INDEX.TIME') }</th> |
||||
|
<th>{ translate('INDEX.DEST_ADDRESS') }</th> |
||||
|
<th>{ translate('INDEX.TX_DETAIL') }</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
{ this.renderTxHistoryList() } |
||||
|
</tbody> |
||||
|
<tfoot> |
||||
|
<tr> |
||||
|
<th>{ translate('INDEX.TYPE') }</th> |
||||
|
<th>{ translate('INDEX.DIRECTION') }</th> |
||||
|
<th>{ translate('INDEX.CONFIRMATIONS') }</th> |
||||
|
<th>{ translate('INDEX.AMOUNT') }</th> |
||||
|
<th>{ translate('INDEX.TIME') }</th> |
||||
|
<th>{ translate('INDEX.DEST_ADDRESS') }</th> |
||||
|
<th>{ translate('INDEX.TX_DETAIL') }</th> |
||||
|
</tr> |
||||
|
</tfoot> |
||||
|
</table> |
||||
|
</div> |
||||
|
{ this.renderPagination() } |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,154 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
import { secondsToString } from '../../util/time'; |
||||
|
|
||||
|
const WalletsNativeTxInfoRender = function(txInfo) { |
||||
|
return ( |
||||
|
<div onKeyDown={ (event) => this.handleKeydown(event) }> |
||||
|
<div className="modal show" id="kmd_txid_info_mdl"> |
||||
|
<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"> |
||||
|
<li className={ this.state.activeTab === 0 ? 'active' : '' }> |
||||
|
<a onClick={ () => this.openTab(0) }> |
||||
|
<i className="icon md-balance-wallet"></i>TxID Info |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ this.state.activeTab === 1 ? 'active' : '' }> |
||||
|
<a onClick={ () => this.openTab(1) }> |
||||
|
<i className="icon md-plus-square"></i>Vjointsplits, Details |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ this.state.activeTab === 2 ? 'active' : '' }> |
||||
|
<a onClick={ () => this.openTab(2) }> |
||||
|
<i className="icon wb-briefcase"></i>Hex |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ this.state.activeTab === 3 ? 'active' : '' }> |
||||
|
<a onClick={ () => this.openTab(3) }> |
||||
|
<i className="icon wb-file"></i>Raw info |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div className="panel-body"> |
||||
|
<div className="tab-content"> |
||||
|
<div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }> |
||||
|
<table className="table table-striped"> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td>amount</td> |
||||
|
<td> |
||||
|
{ txInfo.amount } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>fee</td> |
||||
|
<td> |
||||
|
{ txInfo.fee } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>confirmations</td> |
||||
|
<td> |
||||
|
{ txInfo.confirmations } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>blockhash</td> |
||||
|
<td> |
||||
|
{ txInfo.blockhash } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>blockindex</td> |
||||
|
<td> |
||||
|
{txInfo.blockindex} |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>blocktime</td> |
||||
|
<td> |
||||
|
{ secondsToString(txInfo.blocktime) } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>txid</td> |
||||
|
<td> |
||||
|
{ txInfo.txid } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>walletconflicts</td> |
||||
|
<td> |
||||
|
{ txInfo.walletconflicts.length } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>time</td> |
||||
|
<td> |
||||
|
{ secondsToString(txInfo.time) } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>timereceived</td> |
||||
|
<td> |
||||
|
{ secondsToString(txInfo.timereceived) } |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
<div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }> |
||||
|
<table className="table table-striped"> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td>vjoinsplit</td> |
||||
|
<td> |
||||
|
{ txInfo.vjoinsplit } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>details</td> |
||||
|
<td> |
||||
|
{ txInfo.details } |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
<div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }> |
||||
|
<textarea |
||||
|
className="full-width height-170" |
||||
|
rows="10" |
||||
|
cols="80" |
||||
|
defaultValue={ txInfo.hex } disabled></textarea> |
||||
|
</div> |
||||
|
<div className={ this.state.activeTab === 3 ? 'tab-pane active' : 'tab-pane' }> |
||||
|
<textarea |
||||
|
className="full-width height-400" |
||||
|
rows="40" |
||||
|
cols="80" |
||||
|
defaultValue={ JSON.stringify(txInfo, null, '\t') } |
||||
|
disabled></textarea> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-footer"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-default" |
||||
|
onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-backdrop show in"></div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsNativeTxInfoRender; |
||||
@ -0,0 +1,56 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
export const WalletsNavNoWalletRender = function () { |
||||
|
return ( |
||||
|
<div> |
||||
|
<div className="col-xs-12 padding-top-20"> |
||||
|
<div className="alert alert-info alert-dismissible"> |
||||
|
<button type="button" className="close"></button> |
||||
|
<span className="font-size-24 text-align-center"> |
||||
|
<i className="icon fa-paw"></i> { translate('INDEX.NO_WALLET_CAPS') } |
||||
|
</span> |
||||
|
<br/> |
||||
|
{ translate('INDEX.PLEASE_SELECT_A_WALLET') }. |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export const WalletsNavWithWalletRender = function () { |
||||
|
return ( |
||||
|
<div> |
||||
|
<div |
||||
|
className="page-header page-header-bordered header-easydex padding-bottom-20" |
||||
|
id="header-dashboard" |
||||
|
style={{ marginBottom: this.props.ActiveCoin.mode === 'basilisk' ? '30px' : '0' }}> |
||||
|
<ol className="breadcrumb"> |
||||
|
<strong>{ translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: </strong> { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' } <button className="btn btn-default btn-xs clipboard-edexaddr" onClick={ () => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin]) }><i className="icon wb-copy"></i> { translate('INDEX.COPY') }</button> |
||||
|
</ol> |
||||
|
<div className="page-header-actions"> |
||||
|
<div id="kmd_header_button"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-dark waves-effect waves-light" |
||||
|
onClick={ this.toggleSendReceiveCoinForms }> |
||||
|
<i className="icon md-view-dashboard"></i> { this.props.ActiveCoin.mode !== 'native' ? translate('INDEX.DASHBOARD') : translate('INDEX.WALLET_INFO') } |
||||
|
</button> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-primary waves-effect waves-light" |
||||
|
onClick={ () => this.toggleSendCoinForm(!this.props.ActiveCoin.send) }> |
||||
|
<i className="icon fa-send"></i> { translate('INDEX.SEND') } |
||||
|
</button> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-info waves-effect waves-light" |
||||
|
onClick={ () => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive) }> |
||||
|
<i className="icon fa-inbox"></i> { translate('INDEX.RECEIVE') } |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,46 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
import Tree, { TreeNode } from 'rc-tree'; |
||||
|
import { animation } from '../../util/rc-tree-animate'; |
||||
|
|
||||
|
export const NotariesListRender = function (node, index) { |
||||
|
<TreeNode title={ `Node ${index}` } key={ `node-${index}` }> |
||||
|
<TreeNode key={ `node-${index}-btc` } title={ `BTC: ${node.BTCaddress}` } /> |
||||
|
<TreeNode key={ `node-${index}-kmd` } title={ `KMD: ${node.KMDaddress}` } /> |
||||
|
<TreeNode key={ `node-${index}-pubkey` } title={ `Pubkey: ${node.pubkey}` } /> |
||||
|
</TreeNode> |
||||
|
}; |
||||
|
|
||||
|
export const WalletsNotariesListRender = function () { |
||||
|
return ( |
||||
|
<div onKeyDown={ (event) => this.handleKeydown(event) }> |
||||
|
<div className="modal show" id="kmd_txid_info_mdl"> |
||||
|
<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"> |
||||
|
<div className="panel-body"> |
||||
|
<div className="tab-content"> |
||||
|
<div className="tab-pane active"> |
||||
|
{ this.renderNotariesFetching() } |
||||
|
<Tree defaultExpandAll={ false } openAnimation={ animation }> |
||||
|
{ this.renderNotariesList() } |
||||
|
</Tree> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-footer"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-default" |
||||
|
onClick={ this.closeNotariesModal }>{ translate('INDEX.CLOSE') }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-backdrop show in"></div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,48 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const WalletsProgressRender = function () { |
||||
|
return ( |
||||
|
<div id="edex-footer" className="margin-bottom-20"> |
||||
|
<div className="row no-space"> |
||||
|
<div id="currency-progressbars"> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div className={ 'full-width font-size-80-percent ' + (this.isFullySynced() ? 'progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success' : 'hide') }> |
||||
|
{ translate('INDEX.BUNDLES') } <span id="currency-bundles-percent">({ this.props.ActiveCoin.coin }) 100.00% - ( { this.props.Dashboard.progress.blocks } / { this.props.Dashboard.progress.blocks } ) ==>> RT{ this.props.Dashboard.progress.RTheight }</span> |
||||
|
</div> |
||||
|
<div |
||||
|
className={ 'font-size-80-percent ' + (this.isFullySynced() ? 'hide' : 'progress-bar progress-bar-info progress-bar-striped active') } |
||||
|
style={{ width: this.props.Dashboard.progress.bundles + '%' }}> |
||||
|
{ translate('INDEX.BUNDLES') } { this.props.Dashboard.progress.bundles }% |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className={ this.isFullySynced() ? 'hide' : '' }> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div |
||||
|
className="progress-bar progress-bar-warning progress-bar-striped active font-size-80-percent" |
||||
|
style={{ width: this.props.Dashboard.progress.utxo + '%' }}> |
||||
|
utxo { this.props.Dashboard.progress.utxo }% |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div |
||||
|
className="progress-bar progress-bar-danger progress-bar-striped active font-size-80-percent" |
||||
|
style={{ width: this.props.Dashboard.progress.balances + '%' }}> |
||||
|
{ translate('INDEX.BALANCES') } { this.props.Dashboard.progress.balances }% |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="progress progress-sm"> |
||||
|
<div |
||||
|
className="progress-bar progress-bar-success progress-bar-striped active font-size-80-percent" |
||||
|
style={{ width: this.props.Dashboard.progress.validated + '%' }}> |
||||
|
{ translate('INDEX.VALIDATED') } { this.props.Dashboard.progress.validated }% |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsProgressRender; |
||||
@ -0,0 +1,100 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
import { secondsToString } from '../../util/time'; |
||||
|
|
||||
|
const WalletsTxInfoRender = function(txInfo) { |
||||
|
return ( |
||||
|
<div onKeyDown={ (event) => this.handleKeydown(event) }> |
||||
|
<div className="modal show" id="kmd_txid_info_mdl"> |
||||
|
<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"> |
||||
|
<li className={ this.state.activeTab === 0 ? 'active' : '' }> |
||||
|
<a onClick={ () => this.openTab(0) }> |
||||
|
<i className="icon md-balance-wallet"></i>TxID Info |
||||
|
</a> |
||||
|
</li> |
||||
|
<li className={ this.state.activeTab === 1 ? 'active' : '' }> |
||||
|
<a onClick={ () => this.openTab(1) }> |
||||
|
<i className="icon wb-file"></i>Raw info |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div className="panel-body"> |
||||
|
<div className="tab-content"> |
||||
|
<div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }> |
||||
|
<table className="table table-striped"> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td>{ translate('TX_INFO.ADDRESS') }</td> |
||||
|
<td> |
||||
|
{ txInfo.address } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('TX_INFO.AMOUNT') }</td> |
||||
|
<td> |
||||
|
{ txInfo.amount } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('TX_INFO.CATEGORY') }</td> |
||||
|
<td> |
||||
|
{ txInfo.category || txInfo.type } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>{ translate('TX_INFO.CONFIRMATIONS') }</td> |
||||
|
<td> |
||||
|
{ txInfo.confirmations } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>blockhash</td> |
||||
|
<td> |
||||
|
{ txInfo.blockhash } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>blocktime</td> |
||||
|
<td> |
||||
|
{ secondsToString(txInfo.blocktime || txInfo.timestamp) } |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>txid</td> |
||||
|
<td> |
||||
|
{ txInfo.txid } |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
<div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }> |
||||
|
<textarea |
||||
|
className="full-width height-400" |
||||
|
rows="40" |
||||
|
cols="80" |
||||
|
defaultValue={ JSON.stringify(txInfo, null, '\t') } disabled></textarea> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-footer"> |
||||
|
<button |
||||
|
type="button" |
||||
|
className="btn btn-default" |
||||
|
onClick={ this.toggleTxInfoModal }>{ translate('INDEX.CLOSE') }</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="modal-backdrop show in"></div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default WalletsTxInfoRender; |
||||
@ -0,0 +1,168 @@ |
|||||
|
import React from 'react'; |
||||
|
import { translate } from '../../translate/translate'; |
||||
|
|
||||
|
const LoginRender = function () { |
||||
|
return ( |
||||
|
<div> |
||||
|
{ 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 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"> |
||||
|
<button type="button"> |
||||
|
<span>×</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 className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }> |
||||
|
<h4 className="color-white">{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" |
||||
|
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" |
||||
|
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" |
||||
|
onClick={ this.toggleActivateCoinForm } |
||||
|
disabled={ !this.props.Main }> |
||||
|
<span className="ladda-label">{ translate('ADD_COIN.ADD_ANOTHER_COIN') }</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }> |
||||
|
<h4 className="color-white">{ 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" |
||||
|
onClick={ this.toggleActivateCoinForm } |
||||
|
disabled={ !this.props.Main }> |
||||
|
<span className="ladda-label">{ translate('INDEX.ACTIVATE_COIN') }</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div 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" |
||||
|
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"></div> |
||||
|
<div className="swal2-modal show-swal2 visible swal2-modal-container"> |
||||
|
<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