lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

code refactoring #1

all-modes
Petr Balashov 8 years ago
parent
34e0cf171c
commit
4e31cc1bd7
7 changed files with 407 additions and 188 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 106
      react/src/components/dashboard/walletsData.js
  2. 117
      react/src/components/dashboard/walletsHeader.js
  3. 11
      react/src/components/dashboard/walletsNative.js
  4. 31
      react/src/components/dashboard/walletsNativeBalance.js
  5. 48
      react/src/components/dashboard/walletsNativeReceive.js
  6. 132
      react/src/components/dashboard/walletsNativeSend.js
  7. 8
      react/src/translate/en.js

106
react/src/components/dashboard/walletsData.js
View File

@ -83,19 +83,25 @@ class WalletsData extends React.Component {
}
updateSocketsData(data) {
if (data && data.message && data.message.shepherd.iguanaAPI &&
if (data &&
data.message &&
data.message.shepherd.iguanaAPI &&
data.message.shepherd.iguanaAPI.totalStackLength) {
this.setState(Object.assign({}, this.state, {
totalStackLength: data.message.shepherd.iguanaAPI.totalStackLength,
}));
}
if (data && data.message && data.message.shepherd.iguanaAPI &&
if (data &&
data.message &&
data.message.shepherd.iguanaAPI &&
data.message.shepherd.iguanaAPI.currentStackLength) {
this.setState(Object.assign({}, this.state, {
currentStackLength: data.message.shepherd.iguanaAPI.currentStackLength,
}));
}
if (data && data.message && data.message.shepherd.method &&
if (data &&
data.message &&
data.message.shepherd.method &&
data.message.shepherd.method === 'cache-one' &&
data.message.shepherd.status === 'done') {
Store.dispatch(basiliskRefresh(false));
@ -120,13 +126,6 @@ class WalletsData extends React.Component {
'calls': 'refresh',
'address': this.state.currentAddress,
}));
console.log('_fetchUtxoCache', {
'pubkey': this.props.Dashboard.activeHandle.pubkey,
'allcoins': false,
'coin': this.props.ActiveCoin.coin,
'calls': 'refresh',
'address': this.state.currentAddress,
});
}
toggleBasiliskActionsMenu() {
@ -182,7 +181,8 @@ class WalletsData extends React.Component {
}
componentWillReceiveProps(props) {
if (!this.state.currentAddress && this.props.ActiveCoin.activeAddress) {
if (!this.state.currentAddress &&
this.props.ActiveCoin.activeAddress) {
this.setState(Object.assign({}, this.state, {
currentAddress: this.props.ActiveCoin.activeAddress,
}));
@ -192,7 +192,9 @@ class WalletsData extends React.Component {
this.props.ActiveCoin.txhistory !== 'loading' &&
this.props.ActiveCoin.txhistory !== 'no data' &&
this.props.ActiveCoin.txhistory.length) {
if (!this.state.itemsList || (this.state.itemsList && !this.state.itemsList.length) || (props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
if (!this.state.itemsList ||
(this.state.itemsList && !this.state.itemsList.length) ||
(props.ActiveCoin.txhistory !== this.props.ActiveCoin.txhistory)) {
let historyToSplit = sortByDate(this.props.ActiveCoin.txhistory);
historyToSplit = historyToSplit.slice((this.state.activePage - 1) * this.state.itemsPerPage, this.state.activePage * this.state.itemsPerPage);
@ -202,7 +204,8 @@ class WalletsData extends React.Component {
}
}
if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory === 'no data') {
if (this.props.ActiveCoin.txhistory &&
this.props.ActiveCoin.txhistory === 'no data') {
this.setState(Object.assign({}, this.state, {
itemsList: 'no data',
}));
@ -228,8 +231,13 @@ class WalletsData extends React.Component {
for (let i=0; i < Math.ceil(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); i++) {
items.push(
<li key={i + '-pagination-link'} className={this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button'}>
<a aria-controls="kmd-tx-history-tbl" data-dt-idx="1" tabIndex="0" key={i + '-pagination'} onClick={this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null}>{i + 1}</a>
<li
key={ `${i}-pagination-link` }
className={ this.state.activePage === i + 1 ? 'paginate_button active' : 'paginate_button' }>
<a
aria-controls="kmd-tx-history-tbl"
tabIndex="0" key={ `${i}-pagination` }
onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
</li>
);
}
@ -238,18 +246,24 @@ class WalletsData extends React.Component {
}
renderPaginationItemsPerPageSelector() {
if (this.props.ActiveCoin.txhistory && this.state.itemsList !== 'loading' && this.props.ActiveCoin.txhistory.length > 10) {
if (this.props.ActiveCoin.txhistory &&
this.state.itemsList !== 'loading' &&
this.props.ActiveCoin.txhistory.length > 10) {
return (
<div className="dataTables_length" id="kmd-tx-history-tbl_length">
<label>
Show&nbsp;
<select name="itemsPerPage" aria-controls="kmd-tx-history-tbl" className="form-control input-sm" onChange={this.updateInput}>
{ translate('INDEX.SHOW') }&nbsp;
<select
name="itemsPerPage"
aria-controls="kmd-tx-history-tbl"
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>&nbsp;
entries
{ translate('INDEX.ENTRIES_SM') }
</label>
</div>
);
@ -259,21 +273,40 @@ class WalletsData extends React.Component {
}
renderPagination() {
if (this.props.ActiveCoin.txhistory && this.state.itemsList !== 'loading' && this.props.ActiveCoin.txhistory.length > 10) {
if (this.props.ActiveCoin.txhistory &&
this.state.itemsList !== 'loading' &&
this.props.ActiveCoin.txhistory.length > 10) {
const _paginationFrom = ((this.state.activePage - 1) * this.state.itemsPerPage) + 1;
const _paginationTo = this.state.activePage * this.state.itemsPerPage;
return (
<div className="row unselectable">
<div className="col-sm-5">
<div className="dataTables_info" id="kmd-tx-history-tbl_info" role="status" aria-live="polite">Showing {((this.state.activePage - 1) * this.state.itemsPerPage) + 1} to {this.state.activePage * this.state.itemsPerPage} of {this.props.ActiveCoin.txhistory.length} entries</div>
<div
className="dataTables_info"
id="kmd-tx-history-tbl_info"
role="status"
aria-live="polite">{ translate('INDEX.SHOWING') } { _paginationFrom } { translate('INDEX.TO') } { _paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }</div>
</div>
<div className="col-sm-7">
<div className="dataTables_paginate paging_simple_numbers" id="kmd-tx-history-tbl_paginate">
<ul className="pagination">
<li className={this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous'} id="kmd-tx-history-tbl_previous">
<a aria-controls="kmd-tx-history-tbl" data-dt-idx="0" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage - 1)}>Previous</a>
<li
className={ this.state.activePage === 1 ? 'paginate_button previous disabled' : 'paginate_button previous' }
id="kmd-tx-history-tbl_previous">
<a
aria-controls="kmd-tx-history-tbl"
tabIndex="0"
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'} id="kmd-tx-history-tbl_next">
<a aria-controls="kmd-tx-history-tbl" data-dt-idx="2" tabIndex="0" onClick={() => this.updateCurrentPage(this.state.activePage + 1)}>Next</a>
<li
className={ this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage) ? 'paginate_button next disabled' : 'paginate_button next' }
id="kmd-tx-history-tbl_next">
<a
aria-controls="kmd-tx-history-tbl"
tabIndex="0"
onClick={ () => this.updateCurrentPage(this.state.activePage + 1) }>{ translate('INDEX.NEXT') }</a>
</li>
</ul>
</div>
@ -286,14 +319,16 @@ class WalletsData extends React.Component {
}
renderTxType(category) {
if ( category === 'send' || category === 'sent' ) {
if (category === 'send' ||
category === 'sent') {
return (
<span className="label label-danger">
<i className="icon fa-arrow-circle-left"></i> <span>{ translate('DASHBOARD.OUT') }</span>
</span>
);
}
if ( category === 'receive' || category === 'received' ) {
if (category === 'receive' ||
category === 'received') {
return (
<span className="label label-success">
<i className="icon fa-arrow-circle-right"></i> <span>{ translate('DASHBOARD.IN') }</span>
@ -326,14 +361,16 @@ class WalletsData extends React.Component {
renderTxHistoryList() {
if (this.state.itemsList === 'loading') {
return (
<div>Loading history...</div>
<div>{ translate('INDEX.LOADING_HISTORY') }...</div>
);
} else if (this.state.itemsList === 'no data') {
return (
<div>No data</div>
<div>{ translate('INDEX.NO_DATA') }</div>
);
} else {
if (this.state.itemsList && this.state.itemsList.length && this.state.itemsList !== 'no data') {
if (this.state.itemsList &&
this.state.itemsList.length &&
this.state.itemsList !== 'no data') {
return this.state.itemsList.map((tx, index) =>
<tr key={ tx.txid + tx.amount }>
<td>{ this.renderTxType(tx.category || tx.type) }</td>
@ -342,7 +379,12 @@ class WalletsData extends React.Component {
<td>{ secondsToString(tx.blocktime || tx.timestamp) }</td>
<td>{ tx.address }</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>
<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>
);
@ -409,7 +451,7 @@ class WalletsData extends React.Component {
return (
<div className="col-sm-2">
<div className="pull-left margin-right-10">
<input type="checkbox" id="edexcoin_cache_api" checked={this.state.useCache} data-plugin="switchery" data-size="small" />
<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>

117
react/src/components/dashboard/walletsHeader.js
View File

@ -5,7 +5,8 @@ import { translate } from '../../translate/translate';
class WalletsHeader extends React.Component {
render() {
if (this.props && this.props.coin) {
if (this.props &&
this.props.coin) {
return (
<div className="page-header page-header-bordered header-easydex margin-bottom-0" id="easydex-header-div">
<h1 className="page-title">EasyDEX</h1>
@ -14,70 +15,138 @@ class WalletsHeader extends React.Component {
</ol>
<div className="page-header-actions" style={{ zIndex: '1' }}>
<div id="kmd_header_button">
<button type="button" id="easydex_kmd_wallet_actions_header" className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light" data-toggle="dropdown" aria-expanded="false">
<button
type="button"
id="easydex_kmd_wallet_actions_header"
className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light"
aria-expanded="false">
<i className="icon md-plus" aria-hidden="true"></i>
</button>
<ul className="dropdown-menu animate dropdown-menu-right" aria-labelledby="easydex_kmd_wallet_actions_header" role="menu">
<ul
className="dropdown-menu animate dropdown-menu-right"
aria-labelledby="easydex_kmd_wallet_actions_header"
role="menu">
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_dashboard">{translate('INDEX.DASHBOARD')}</a>
<a
href="javascript:void(0)"
role="menuitem"
id="btn_kmd_wallet_dashboard">{ translate('INDEX.DASHBOARD') }</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_send">{translate('INDEX.SEND')}</a>
<a
href="javascript:void(0)"
role="menuitem"
id="btn_kmd_wallet_send">{ translate('INDEX.SEND') }</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_recieve">{translate('INDEX.RECEIVE')}</a>
<a
href="javascript:void(0)"
role="menuitem"
id="btn_kmd_wallet_recieve">{ translate('INDEX.RECEIVE') }</a>
</li>
<li className="divider" role="presentation"></li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_settings">{translate('INDEX.SETTINGS')}</a>
<a
href="javascript:void(0)"
role="menuitem"
id="btn_kmd_wallet_settings">{ translate('INDEX.SETTINGS') }</a>
</li>
</ul>
</div>
<div id="zec_header_button">
<button type="button" id="easydex_zec_wallet_actions_header" className="bg-yellow-600 btn btn-floating white waves-effect waves-float waves-light" data-toggle="dropdown" aria-expanded="false">
<button
type="button"
id="easydex_zec_wallet_actions_header"
className="bg-yellow-600 btn btn-floating white waves-effect waves-float waves-light"
aria-expanded="false">
<i className="icon md-plus" aria-hidden="true"></i>
</button>
<ul className="dropdown-menu animate dropdown-menu-right" aria-labelledby="easydex_zec_wallet_actions_header" role="menu">
<ul
className="dropdown-menu animate dropdown-menu-right"
aria-labelledby="easydex_zec_wallet_actions_header"
role="menu">
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="ZEC" id="btn_zec_wallet_dashboard">{translate('INDEX.DASHBOARD')}</a>
<a
href="javascript:void(0)"
role="menuitem"
data-extcoin-menu="ZEC"
id="btn_zec_wallet_dashboard">{ translate('INDEX.DASHBOARD') }</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="ZEC" id="btn_zec_wallet_send">{translate('INDEX.SEND')}</a>
<a
href="javascript:void(0)"
role="menuitem"
data-extcoin-menu="ZEC"
id="btn_zec_wallet_send">{ translate('INDEX.SEND') }</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="ZEC" id="btn_zec_wallet_recieve">{translate('INDEX.RECEIVE')}</a>
<a
href="javascript:void(0)"
role="menuitem"
data-extcoin-menu="ZEC"
id="btn_zec_wallet_recieve">{ translate('INDEX.RECEIVE') }</a>
</li>
<li className="divider" role="presentation"></li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="ZEC" id="btn_zec_wallet_settings">{translate('INDEX.SETTINGS')}</a>
<a
href="javascript:void(0)"
role="menuitem"
data-extcoin-menu="ZEC"
id="btn_zec_wallet_settings">{ translate('INDEX.SETTINGS') }</a>
</li>
</ul>
</div>
<div id="kmd_header_button">
<button type="button" id="jumblr_actions_header" className="btn white waves-effect waves-light">
<button
type="button"
id="jumblr_actions_header"
className="btn white waves-effect waves-light">
<i className="icon fa-refresh" aria-hidden="true"></i>{ translate('INDEX.REFRESH') }
</button>
</div>
<div id="kmd_header_button">
<button type="button" id="easydex_acpax_wallet_actions_header" className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light" data-toggle="dropdown" aria-expanded="false">
<button
type="button"
id="easydex_acpax_wallet_actions_header"
className="bg-teal-500 btn btn-floating white waves-effect waves-float waves-light"
aria-expanded="false">
<i className="icon md-plus" aria-hidden="true"></i>
</button>
<ul className="dropdown-menu animate dropdown-menu-right" aria-labelledby="easydex_acpax_wallet_actions_header" role="menu">
<ul
className="dropdown-menu animate dropdown-menu-right"
aria-labelledby="easydex_acpax_wallet_actions_header"
role="menu">
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_acpax_wallet_dashboard">{translate('INDEX.DASHBOARD')}</a>
<a
href="javascript:void(0)"
role="menuitem"
data-extcoin-menu="KMD"
id="btn_acpax_wallet_dashboard">{ translate('INDEX.DASHBOARD') }</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_acpax_wallet_send">{translate('INDEX.SEND')}</a>
<a
href="javascript:void(0)"
role="menuitem"
data-extcoin-menu="KMD"
id="btn_acpax_wallet_send">{ translate('INDEX.SEND') }</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_acpax_wallet_recieve">{translate('INDEX.RECEIVE')}</a>
<a
href="javascript:void(0)"
role="menuitem"
data-extcoin-menu="KMD"
id="btn_acpax_wallet_recieve">{ translate('INDEX.RECEIVE') }</a>
</li>
<li className="divider" role="presentation"></li>
<li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_acpax_wallet_settings">{translate('INDEX.SETTINGS')}</a>
<a
href="javascript:void(0)"
role="menuitem"
data-extcoin-menu="KMD"
id="btn_acpax_wallet_settings">{ translate('INDEX.SETTINGS') }</a>
</li>
</ul>
</div>
@ -85,14 +154,14 @@ class WalletsHeader extends React.Component {
<div className="row no-space width-350 hidden-xs" id="easydex_btc_btcd_balances_header">
<div className="col-xs-6">
<div className="counter">
<span className="font-weight-medium" data-currency="BTC" id="header_coinname_balance"> - BTC</span>
<span className="counter-label small" data-currency="BTC" id="header_coinfiatbalance"> - USD</span>
<span className="font-weight-medium" id="header_coinname_balance"> - BTC</span>
<span className="counter-label small" id="header_coinfiatbalance"> - USD</span>
</div>
</div>
<div className="col-xs-6">
<div className="counter">
<span className="font-weight-medium" data-currency="BTCD" id="header_coinname_balance"> - BTCD</span>
<span className="counter-label small" data-currency="BTCD" id="header_coinfiatbalance"> - USD</span>
<span className="font-weight-medium" id="header_coinname_balance"> - BTCD</span>
<span className="counter-label small" id="header_coinfiatbalance"> - USD</span>
</div>
</div>
</div>

11
react/src/components/dashboard/walletsNative.js
View File

@ -15,10 +15,12 @@ class WalletsNative extends React.Component {
// <WalletsNativeAlert {...this.props} />
render() {
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'native') {
if (this.props &&
this.props.ActiveCoin &&
this.props.ActiveCoin.mode === 'native') {
return (
<div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
<div data-extcoin="COIN" id="section-extcoin" style={{paddingTop: '0'}}>
<div className="page" style={{ marginLeft: '0' }}>
<div id="section-extcoin" style={{ paddingTop: '0' }}>
<div id="easydex-header-div" style={{ 'backgroundImage': 'url("assets/images/bg/' + this.props.ActiveCoin.coin.toLowerCase() + '_transparent_header_bg.png")' }}>
<ol className="breadcrumb">
<li className="header-easydex-section">
@ -28,8 +30,7 @@ class WalletsNative extends React.Component {
</div>
<div className="page-content">
<WalletsNativeSyncProgress {...this.props} />
<div className="row" data-extcoin="COIN" id="extcoin-wallet" data-plugin="masonry">
<div className="row" id="extcoin-wallet">
<WalletsNativeBalance {...this.props} />
<WalletsNativeTxHistory {...this.props} />
<WalletsNativeReceive {...this.props} />

31
react/src/components/dashboard/walletsNativeBalance.js
View File

@ -3,10 +3,11 @@ import { translate } from '../../translate/translate';
class WalletsNativeBalance extends React.Component {
render() {
if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') {
if (this.props &&
this.props.ActiveCoin.nativeActiveSection === 'default') {
return (
<div className="col-xs-12">
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_t">
<div className="col-lg-3 col-xs-12" id="kmd_widget_get_total_balance_t">
<div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content white bg-yellow-800">
<div className="padding-20 padding-top-10">
@ -14,14 +15,17 @@ class WalletsNativeBalance extends React.Component {
<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" data-extcoin="COIN" id="kmd_transparent_balance" style={{fontSize: '22px'}}>{this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-'}</span>
<span
className="pull-right padding-top-10"
id="kmd_transparent_balance"
style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' }</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_z">
<div className="col-lg-3 col-xs-12" id="kmd_widget_get_total_balance_z">
<div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content white bg-blue-grey-800">
<div className="padding-20 padding-top-10">
@ -29,14 +33,17 @@ class WalletsNativeBalance extends React.Component {
<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" data-extcoin="COIN" id="kmd_private_balance" style={{fontSize: '22px'}}>{this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-'}</span>
<span
className="pull-right padding-top-10"
id="kmd_private_balance"
style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' }</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_i">
<div className="col-lg-3 col-xs-12" id="kmd_widget_get_total_balance_i">
<div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content white bg-cyan-700">
<div className="padding-20 padding-top-10">
@ -44,14 +51,17 @@ class WalletsNativeBalance extends React.Component {
<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" data-extcoin="COIN" id="kmd_total_interest_balance" style={{fontSize: '22px'}}>{this.props.ActiveCoin.balance.interest ? this.props.ActiveCoin.balance.interest : '-'}</span>
<span
className="pull-right padding-top-10"
id="kmd_total_interest_balance"
style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.interest ? this.props.ActiveCoin.balance.interest : '-' }</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_tzi">
<div className="col-lg-3 col-xs-12" id="kmd_widget_get_total_balance_tzi">
<div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content white bg-green-600">
<div className="padding-20 padding-top-10">
@ -59,7 +69,10 @@ class WalletsNativeBalance extends React.Component {
<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" data-extcoin="COIN" id="kmd_total_tz_balance" style={{fontSize: '22px'}}>{this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-'}</span>
<span
className="pull-right padding-top-10"
id="kmd_total_tz_balance"
style={{ fontSize: '22px' }}>{ this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' }</span>
</div>
</div>
</div>

48
react/src/components/dashboard/walletsNativeReceive.js
View File

@ -1,6 +1,9 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { getNewKMDAddresses, copyCoinAddress } from '../../actions/actionCreators';
import {
getNewKMDAddresses,
copyCoinAddress
} from '../../actions/actionCreators';
import Store from '../../store';
// TODO: implement sorting
@ -26,14 +29,19 @@ class WalletsNativeReceive extends React.Component {
}
renderAddressList(type) {
if (this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses[type] && this.props.ActiveCoin.addresses[type].length) {
if (this.props.ActiveCoin.addresses &&
this.props.ActiveCoin.addresses[type] &&
this.props.ActiveCoin.addresses[type].length) {
return this.props.ActiveCoin.addresses[type].map((address) =>
<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" data-edexcoin="COIN" id="edexcoin_active_addr_clipboard" data-clipboard-text="" onClick={() => this.copyZAddress(address.address)}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button>
<button
className="btn btn-default btn-xs clipboard-edexaddr margin-left-10"
id="edexcoin_active_addr_clipboard"
onClick={ () => this.copyZAddress(address.address) }><i className="icon wb-copy" aria-hidden="true"></i> { translate('INDEX.COPY') }</button>
</td>
<td>{ type === 'public' ? address.address : address.address.substring(0, 34) + '...' }</td>
<td>{ address.amount }</td>
@ -50,28 +58,46 @@ class WalletsNativeReceive extends React.Component {
}
render() {
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.nativeActiveSection === 'receive') {
if (this.props &&
this.props.ActiveCoin &&
this.props.ActiveCoin.nativeActiveSection === 'receive') {
return (
<div data-extcoin="COIN" id="kmd_wallet_recieve">
<div id="kmd_wallet_recieve">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_recieve_section">
<div id="kmd_wallet_recieve_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<div className="panel-actions">
<div className={ 'dropdown' + (this.state.openDropMenu ? ' open' : '') } onClick={ this.openDropMenu }>
<a className="dropdown-toggle white btn btn-warning" data-extcoin="COIN" id="GetNewRecievingAddress" data-toggle="dropdown" href="javascript:void(0)" aria-expanded="false" role="button">
<a
className="dropdown-toggle white btn btn-warning"
id="GetNewRecievingAddress"
href="javascript:void(0)"
aria-expanded="false"
role="button">
<i className="icon md-arrows margin-right-10" aria-hidden="true"></i> { translate('INDEX.GET_NEW_ADDRESS') } <span className="caret"></span>
</a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="GetNewRecievingAddress" role="menu">
<ul
className="dropdown-menu dropdown-menu-right"
aria-labelledby="GetNewRecievingAddress"
role="menu">
<li role="presentation">
<a href="javascript:void(0)" data-extcoin="COIN" id="kmd_get_new_taddr" role="menuitem" onClick={() => this.getNewAddress('public')}>
<a
href="javascript:void(0)"
id="kmd_get_new_taddr"
role="menuitem"
onClick={ () => this.getNewAddress('public') }>
<i className="icon fa-eye" aria-hidden="true"></i> { translate('INDEX.TRANSPARENT_ADDRESS') }
</a>
</li>
<li data-extcoin="COIN" role="presentation">
<a href="javascript:void(0)" data-extcoin="COIN" id="kmd_get_new_zaddr" role="menuitem" onClick={() => this.getNewAddress('private')}>
<a
href="javascript:void(0)"
id="kmd_get_new_zaddr"
role="menuitem"
onClick={ () => this.getNewAddress('private') }>
<i className="icon fa-eye-slash" aria-hidden="true"></i> { translate('INDEX.PRIVATE_Z_ADDRESS') }
</a>
</li>
@ -81,7 +107,7 @@ class WalletsNativeReceive extends React.Component {
<h3 className="panel-title">{ translate('INDEX.RECEIVING_ADDRESS') }</h3>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-recieve-addr-tbl">
<table className="table table-hover dataTable table-striped" id="kmd-recieve-addr-tbl">
<thead>
<tr>
<th>{ translate('INDEX.TYPE') }</th>

132
react/src/components/dashboard/walletsNativeSend.js
View File

@ -30,10 +30,14 @@ class WalletsNativeSend extends React.Component {
}
renderAddressByType(type) {
if (this.props.ActiveCoin.addresses && this.props.ActiveCoin.addresses[type] && this.props.ActiveCoin.addresses[type].length) {
if (this.props.ActiveCoin.addresses &&
this.props.ActiveCoin.addresses[type] &&
this.props.ActiveCoin.addresses[type].length) {
return this.props.ActiveCoin.addresses[type].map((address) =>
<li data-original-index="2" key={ address.address } className={ address.amount <= 0 ? 'hide' : '' }>
<a tabIndex="0" onClick={() => this.updateAddressSelection(address.address, type, address.amount)}><i className={type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash'}></i> <span className="text">[ {address.amount} {this.props.ActiveCoin.coin} ]  {address.address}</span><span className="glyphicon glyphicon-ok check-mark"></span></a>
<a
tabIndex="0"
onClick={ () => this.updateAddressSelection(address.address, type, address.amount) }><i className={ type === 'public' ? 'icon fa-eye' : 'icon fa-eye-slash' }></i> <span className="text">[ { address.amount } { this.props.ActiveCoin.coin } ]  { address.address }</span><span className="glyphicon glyphicon-ok check-mark"></span></a>
</li>
);
} else {
@ -50,7 +54,7 @@ class WalletsNativeSend extends React.Component {
);
} else {
return (
<span>- Select Transparent or Private Address -</span>
<span>- { translate('SEND.SELECT_T_OR_Z_ADDR') } -</span>
);
}
}
@ -58,13 +62,21 @@ class WalletsNativeSend extends React.Component {
renderAddressList() {
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" data-toggle="dropdown" data-id="kmd_wallet_send_from" title="- Select Transparent or Private Address -" aria-expanded="true" onClick={this.openDropMenu}>
<span className="filter-option pull-left">{this.renderSelectorCurrentLabel()} </span>&nbsp;<span className="bs-caret"><span className="caret"></span></span>
<button
type="button"
className="btn dropdown-toggle btn-info"
title="- { translate('SEND.SELECT_T_OR_Z_ADDR') } -"
aria-expanded="true"
onClick={ this.openDropMenu }>
<span className="filter-option pull-left">{ this.renderSelectorCurrentLabel() } </span>
<span className="bs-caret">
<span className="caret"></span>
</span>
</button>
<div className="dropdown-menu open">
<ul className="dropdown-menu inner" role="menu">
<li data-original-index="1" className="selected">
<a tabIndex="0" data-tokens="null"><span className="text"> - Select Transparent or Private Address - </span><span className="glyphicon glyphicon-ok check-mark"></span></a>
<li className="selected">
<a tabIndex="0"><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') }
@ -106,27 +118,27 @@ class WalletsNativeSend extends React.Component {
}
renderOPIDResult(opid) {
var isWaitingStatus = true;
let isWaitingStatus = true;
if (opid.status === 'queued') {
isWaitingStatus = false;
return (
<i>Awaiting in queue...</i>
<i>{ translate('SEND.AWAITING') }...</i>
);
}
if (opid.status === 'executing') {
isWaitingStatus = false;
return (
<i>Processing...</i>
<i>{ translate('SEND.PROCESSING') }...</i>
);
}
if (opid.status === 'failed') {
isWaitingStatus = false;
return (
<span>
<b>Error Code:</b> <span>{opid.error.code}</span>
<strong>{ translate('SEND.ERROR_CODE') }:</strong> <span>{ opid.error.code }</span>
<br />
<b>{translate('KMD_NATIVE.MESSAGE')}:</b> <span>{opid.error.message}</span>
<strong>{ translate('KMD_NATIVE.MESSAGE') }:</strong> <span>{ opid.error.message }</span>
</span>
);
}
@ -134,21 +146,22 @@ class WalletsNativeSend extends React.Component {
isWaitingStatus = false;
return (
<span>
<b>txid:</b> <span>{opid.result.txid}</span>
<strong>txid:</strong> <span>{ opid.result.txid }</span>
<br />
<b>{translate('KMD_NATIVE.EXECUTION_SECONDS')}:</b> <span>{opid.execution_secs}</span>
<strong>{ translate('KMD_NATIVE.EXECUTION_SECONDS') }:</strong> <span>{ opid.execution_secs }</span>
</span>
);
}
if (isWaitingStatus) {
return (
<span>Waiting...</span>
<span>{ translate('SEND.WAITING') }...</span>
);
}
}
renderOPIDList() {
if (this.props.ActiveCoin.opids && this.props.ActiveCoin.opids.length) {
if (this.props.ActiveCoin.opids &&
this.props.ActiveCoin.opids.length) {
return this.props.ActiveCoin.opids.map((opid) =>
<tr key={ opid.id }>
<td>{ this.renderOPIDLabel(opid) }</td>
@ -222,11 +235,25 @@ class WalletsNativeSend extends React.Component {
return (
<div className="row">
<div className="col-lg-6 form-group form-material">
<label className="control-label" data-extcoin="COIN" htmlFor="kmd_wallet_sendto">{translate('INDEX.SEND_TO')} via Openalias address</label>
<input type="text" className="form-control" data-extcoin="COIN" name="sendToOA" onChange={this.updateInput} id="kmd_wallet_sendto" placeholder="Enter an alias as address@site.com" autoComplete="off" required />
<label
className="control-label"
htmlFor="kmd_wallet_sendto">{ translate('INDEX.SEND_TO') } via Openalias address</label>
<input
type="text"
className="form-control"
name="sendToOA"
onChange={ this.updateInput }
id="kmd_wallet_sendto"
placeholder="Enter an alias as address@site.com"
autoComplete="off"
required />
</div>
<div className="col-lg-6 form-group form-material">
<button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" id="kmd_wallet_send_coins_btn" onClick={this.getOAdress}>
<button
type="button"
className="btn btn-primary waves-effect waves-light"
id="kmd_wallet_send_coins_btn"
onClick={ this.getOAdress }>
Get address
</button>
</div>
@ -238,47 +265,79 @@ class WalletsNativeSend extends React.Component {
}
render() {
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.nativeActiveSection === 'send') {
if (this.props &&
this.props.ActiveCoin &&
this.props.ActiveCoin.nativeActiveSection === 'send') {
return (
<div data-extcoin="COIN" id="kmd_wallet_send">
<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 data-extcoin="COIN" className="panel-title">
{translate('INDEX.SEND')} <span data-extcoinname="COIN"></span>
{ translate('INDEX.SEND') } { this.props.ActiveCoin.coin }
</h3>
</div>
<div className="panel-body container-fluid">
<form className="extcoin-send-form" data-extcoin="COIN" method="post" role="form" autoComplete="off">
<form className="extcoin-send-form" method="post" role="form" autoComplete="off">
<div className="row">
<div className="col-xlg-12 form-group form-material">
<label className="control-label" data-extcoin="COIN" htmlFor="kmd_wallet_send_from">{translate('INDEX.SEND_FROM')}</label>
<label
className="control-label"
htmlFor="kmd_wallet_send_from">{ 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" data-extcoin="COIN" htmlFor="kmd_wallet_sendto">{translate('INDEX.SEND_TO')}</label>
<input type="text" className="form-control" data-extcoin="COIN" name="sendTo" onChange={this.updateInput} value={this.state.sendTo} id="kmd_wallet_sendto" placeholder="Enter Transparent or Private address" autoComplete="off" required />
<label className="control-label" htmlFor="kmd_wallet_sendto">{ translate('INDEX.SEND_TO') }</label>
<input
type="text"
className="form-control"
name="sendTo"
onChange={ this.updateInput }
value={ this.state.sendTo }
id="kmd_wallet_sendto"
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="kmd_wallet_amount" data-extcoin="COIN" id="kmd_wallet_amount_label">
<label className="control-label" htmlFor="kmd_wallet_amount" id="kmd_wallet_amount_label">
{ this.props.ActiveCoin.coin }
</label>
<input type="text" className="form-control" name="amount" onChange={this.updateInput} data-extcoin="COIN" id="kmd_wallet_amount" placeholder="0.000" autoComplete="off" />
<input
type="text"
className="form-control"
name="amount"
onChange={ this.updateInput }
id="kmd_wallet_amount"
placeholder="0.000"
autoComplete="off" />
</div>
<div className="col-lg-6 form-group form-material">
<label className="control-label" data-extcoin="COIN" htmlFor="kmd_wallet_fee">{translate('INDEX.FEE')}</label>
<input type="text" className="form-control" name="fee" onChange={this.updateInput} data-extcoin="COIN" id="kmd_wallet_fee" placeholder="0.000" value={this.state.fee} autoComplete="off" />
<label className="control-label" htmlFor="kmd_wallet_fee">{ translate('INDEX.FEE') }</label>
<input
type="text"
className="form-control"
name="fee"
onChange={ this.updateInput }
id="kmd_wallet_fee"
placeholder="0.000"
value={ this.state.fee }
autoComplete="off" />
</div>
<div className="col-lg-12">
<span data-extcoin="KMD">
<b>{translate('INDEX.TOTAL')}:</b> {this.state.amount} - {this.state.fee}/kb = {Number(this.state.amount) - Number(this.state.fee)} {this.props.ActiveCoin.coin}
<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" data-toggle="modal" id="kmd_wallet_send_coins_btn" onClick={this.handleSubmit}>
<button
type="button"
className="btn btn-primary waves-effect waves-light pull-right"
id="kmd_wallet_send_coins_btn"
onClick={ this.handleSubmit }>
{ translate('INDEX.SEND') } { this.state.amount } { this.props.ActiveCoin.coin }
</button>
</div>
@ -291,14 +350,17 @@ class WalletsNativeSend extends React.Component {
<div className="col-xs-12">
<div className="row">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_opids_status_section">
<div id="kmd_wallet_opids_status_section">
<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" data-extcoin="COIN" id="kmd-opid-status-tbl" width="100%">
<table
className="table table-hover dataTable table-striped"
id="kmd-opid-status-tbl"
width="100%">
<thead>
<tr>
<th>{ translate('INDEX.STATUS') }</th>

8
react/src/translate/en.js
View File

@ -403,7 +403,13 @@ export const _lang = {
'AGO': 'ago',
'PROCESSING_REQ': 'Processing requests',
'LOCKED_PLEASE_WAIT': 'Locked, please wait',
'UPDATE': 'Update'
'UPDATE': 'Update',
'SELECT_T_OR_Z_ADDR': 'Select Transparent or Private Address',
'ENTER_T_OR_Z_ADDR': 'Enter Transparent or Private address',
'AWAITING': 'Awaiting in queue',
'PROCESSING': 'Processing',
'ERROR_CODE': 'Error Code',
'WAITING': 'Waiting'
}
}
};
Write Preview
Loading…
Cancel
Save