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

Decouple jsx out of js - dashboard pages

all-modes
petitPapillon 8 years ago
parent
93c8d90329
commit
983658ccae
36 changed files with 2019 additions and 1768 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. 361
      react/src/components/dashboard/sendCoin.js
  2. 336
      react/src/components/dashboard/sendCoin.render.js
  3. 38
      react/src/components/dashboard/walletsBasiliskRefresh.js
  4. 38
      react/src/components/dashboard/walletsBasiliskRefresh.render.js
  5. 37
      react/src/components/dashboard/walletsCacheData.js
  6. 40
      react/src/components/dashboard/walletsCacheData.render.js
  7. 239
      react/src/components/dashboard/walletsData.js
  8. 245
      react/src/components/dashboard/walletsData.render.js
  9. 110
      react/src/components/dashboard/walletsHeader.js
  10. 114
      react/src/components/dashboard/walletsHeader.render.js
  11. 33
      react/src/components/dashboard/walletsNative.js
  12. 35
      react/src/components/dashboard/walletsNative.render.js
  13. 22
      react/src/components/dashboard/walletsNativeAlert.js
  14. 22
      react/src/components/dashboard/walletsNativeAlert.render.js
  15. 70
      react/src/components/dashboard/walletsNativeBalance.js
  16. 70
      react/src/components/dashboard/walletsNativeBalance.render.js
  17. 143
      react/src/components/dashboard/walletsNativeInfo.js
  18. 143
      react/src/components/dashboard/walletsNativeInfo.render.js
  19. 87
      react/src/components/dashboard/walletsNativeReceive.js
  20. 82
      react/src/components/dashboard/walletsNativeReceive.render.js
  21. 184
      react/src/components/dashboard/walletsNativeSend.js
  22. 179
      react/src/components/dashboard/walletsNativeSend.render.js
  23. 37
      react/src/components/dashboard/walletsNativeSyncProgress.js
  24. 31
      react/src/components/dashboard/walletsNativeSyncProgress.render.js
  25. 143
      react/src/components/dashboard/walletsNativeTxHistory.js
  26. 137
      react/src/components/dashboard/walletsNativeTxHistory.render.js
  27. 149
      react/src/components/dashboard/walletsNativeTxInfo.js
  28. 154
      react/src/components/dashboard/walletsNativeTxInfo.render.js
  29. 57
      react/src/components/dashboard/walletsNav.js
  30. 56
      react/src/components/dashboard/walletsNav.render.js
  31. 51
      react/src/components/dashboard/walletsNotariesList.js
  32. 46
      react/src/components/dashboard/walletsNotariesList.render.js
  33. 49
      react/src/components/dashboard/walletsProgress.js
  34. 48
      react/src/components/dashboard/walletsProgress.render.js
  35. 101
      react/src/components/dashboard/walletsTxInfo.js
  36. 100
      react/src/components/dashboard/walletsTxInfo.render.js

361
react/src/components/dashboard/sendCoin.js
View File

@ -1,20 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Config from '../../config';
import { translate } from '../../translate/translate';
import {
checkTimestamp,
secondsElapsedToString,
secondsToString
checkTimestamp
} from '../../util/time';
import {
edexGetTxIDList,
edexRemoveTXID
} from '../../util/cacheFormat';
import {
sendFromAddress,
sendNativeTx,
getKMDOPID,
resolveOpenAliasAddress,
triggerToaster,
basiliskRefresh,
@ -29,6 +23,13 @@ import {
dexSendRawTX
} from '../../actions/actionCreators';
import Store from '../../store';
import {
UTXOCacheInfoRender,
SendCoinResponseRender,
OASendUIRender,
SendApiTypeSelectorRender,
SendCoinRender
} from './sendCoin.render';
import { SocketProvider } from 'socket.io-react';
import io from 'socket.io-client';
@ -133,6 +134,7 @@ class SendCoin extends React.Component {
if (this.props.ActiveCoin.mode === 'basilisk' &&
this.state.sendFrom &&
!this.state.sendApiType &&
this.props.ActiveCoin.cache &&
this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom]) {
let refreshCacheData,
timestamp,
@ -155,34 +157,10 @@ class SendCoin extends React.Component {
timestamp = null;
}
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>
);
} else {
return null;
return UTXOCacheInfoRender.call(this, refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp);
}
return null;
/*
<hr />
<div>
@ -230,7 +208,8 @@ class SendCoin extends React.Component {
const address = this.props.ActiveCoin.addresses[type][i];
let _amount = address.amount;
if (this.props.ActiveCoin.mode === 'basilisk') {
if (this.props.ActiveCoin.mode === 'basilisk' &&
this.props.ActiveCoin.cache) {
_amount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address] && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data.balance : 'N/A';
}
@ -257,7 +236,8 @@ class SendCoin extends React.Component {
let _amount;
if (this.state.sendFromAmount === 0 &&
this.props.ActiveCoin.mode === 'basilisk') {
this.props.ActiveCoin.mode === 'basilisk' &&
this.props.ActiveCoin.cache) {
_amount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data.balance : 'N/A';
} else {
_amount = this.state.sendFromAmount;
@ -318,7 +298,8 @@ class SendCoin extends React.Component {
updateAddressSelection(address, type, amount) {
let _sendFromAmount = amount ? amount : this.props.ActiveCoin.addresses[type][address].amount;
if (this.props.ActiveCoin.mode === 'basilisk') {
if (this.props.ActiveCoin.mode === 'basilisk' &&
this.props.ActiveCoin.cache) {
_sendFromAmount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data.balance : 'N/A';
}
@ -618,70 +599,7 @@ class SendCoin extends React.Component {
}
renderSendCoinResponse() {
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>
);
}
return SendCoinResponseRender.call(this);
}
getOAdress() {
@ -714,251 +632,28 @@ class SendCoin extends React.Component {
renderOASendUI() {
if (Config.openAlias) {
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>
);
} else {
return null;
return OASendUIRender.call(this);
}
return null;
}
renderSendApiTypeSelector() {
if (this.props.ActiveCoin.mode === 'basilisk') {
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>
);
} else {
return null;
return SendApiTypeSelectorRender.call(this);
}
return null;
}
render() {
if (this.props.ActiveCoin &&
this.props.ActiveCoin.send &&
this.props.ActiveCoin.mode !== 'native') {
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>
);
} else {
return null;
return SendCoinRender.call(this);
}
return null;
}
}

336
react/src/components/dashboard/sendCoin.render.js
View File

@ -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>
);
};

38
react/src/components/dashboard/walletsBasiliskRefresh.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsBasiliskRefreshRender from './walletsBasiliskRefresh.render';
class WalletsBasiliskRefresh extends React.Component {
isBasiliskRefresh() {
@ -9,40 +9,10 @@ class WalletsBasiliskRefresh extends React.Component {
render() {
if (this.isBasiliskRefresh()) {
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>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
return WalletsBasiliskRefreshRender.call(this);
}
return null;
}
}

38
react/src/components/dashboard/walletsBasiliskRefresh.render.js
View File

@ -0,0 +1,38 @@
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>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
};
export default WalletsBasiliskRefreshRender;

37
react/src/components/dashboard/walletsCacheData.js
View File

@ -1,10 +1,9 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { toggleViewCacheModal } from '../../actions/actionCreators';
import Store from '../../store';
import Tree, { TreeNode } from 'rc-tree';
import { animation } from '../../util/rc-tree-animate';
import { TreeNode } from 'rc-tree';
import WalletsCacheDataRender from './walletsCacheData.render';
// TODO: refresh data render
@ -160,37 +159,7 @@ class WalletsCacheData extends React.Component {
this.props.ActiveCoin.mode === 'basilisk' &&
this.props.Dashboard.displayViewCacheModal) {
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>
);
return WalletsCacheDataRender.call(this);
} else {
return null;
}

40
react/src/components/dashboard/walletsCacheData.render.js
View File

@ -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;

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

@ -1,7 +1,6 @@
import React from 'react';
import Config from '../../config';
import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { sortByDate } from '../../util/sort';
import {
basiliskRefresh,
@ -20,11 +19,15 @@ import {
fetchUtxoCache
} from '../../actions/actionCreators';
import Store from '../../store';
import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
import WalletsBasiliskConnection from './walletsBasiliskConnection';
import WalletsNotariesList from './walletsNotariesList';
import WalletsCacheData from './walletsCacheData';
import {
PaginationItemRender,
PaginationItemsPerPageSelectorRender,
PaginationRender,
TxHistoryListRender,
UseCacheToggleRender,
AddressListRender,
WalletsDataRender
} from './walletsData.render';
import { SocketProvider } from 'socket.io-react';
import io from 'socket.io-client';
@ -249,13 +252,7 @@ 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
key={ `${i}-pagination` }
onClick={ this.state.activePage !== (i + 1) ? () => this.updateCurrentPage(i + 1) : null }>{ i + 1 }</a>
</li>
PaginationItemRender.call(this, i)
);
}
@ -266,23 +263,7 @@ class WalletsData extends React.Component {
if (this.props.ActiveCoin.txhistory &&
this.state.itemsList !== 'loading' &&
this.props.ActiveCoin.txhistory.length > 10) {
return (
<div className="dataTables_length">
<label>
{ translate('INDEX.SHOW') }&nbsp;
<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>&nbsp;
{ translate('INDEX.ENTRIES_SM') }
</label>
</div>
);
return PaginationItemsPerPageSelectorRender.call(this);
} else {
return null;
}
@ -295,26 +276,7 @@ class WalletsData extends React.Component {
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">{ 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>
);
return PaginationRender.call(this, _paginationFrom, _paginationTo);
} else {
return null;
}
@ -374,21 +336,7 @@ class WalletsData extends React.Component {
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>
<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>
TxHistoryListRender.call(this, tx, index)
);
}
}
@ -451,17 +399,10 @@ class WalletsData extends React.Component {
// deprecated
renderUseCacheToggle() {
if (this.props.ActiveCoin.mode === 'basilisk') {
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>
);
} else {
return null;
return UseCacheToggleRender.call(this);
}
return null;
}
renderAddressByType(type) {
@ -535,28 +476,7 @@ class WalletsData extends React.Component {
this.props.Dashboard.activeHandle &&
this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] &&
this.props.ActiveCoin.mode === 'basilisk') {
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>&nbsp;
<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>
);
return AddressListRender.call(this);
} else {
return null;
}
@ -569,130 +489,7 @@ class WalletsData extends React.Component {
this.props.ActiveCoin.mode !== 'native' &&
!this.props.ActiveCoin.send &&
!this.props.ActiveCoin.receive) {
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>
);
return WalletsDataRender.call(this);
} else {
return null;
}

245
react/src/components/dashboard/walletsData.render.js
View File

@ -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') }&nbsp;
<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>&nbsp;
{ 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>&nbsp;
<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>
);
};

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

@ -1,5 +1,5 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsHeaderRender from './walletsHeader.render';
class WalletsHeader extends React.Component {
hasActiveSection() {
@ -13,113 +13,7 @@ class WalletsHeader extends React.Component {
render() {
if (this.hasActiveSection()) {
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>
);
return WalletsHeaderRender.call(this);
} else {
return null;
}

114
react/src/components/dashboard/walletsHeader.render.js
View File

@ -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;

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

@ -1,12 +1,5 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsNativeAlert from './walletsNativeAlert';
import WalletsNativeBalance from './walletsNativeBalance';
import WalletsNativeInfo from './walletsNativeInfo';
import WalletsNativeReceive from './walletsNativeReceive';
import WalletsNativeSend from './walletsNativeSend';
import WalletsNativeSyncProgress from './walletsNativeSyncProgress';
import WalletsNativeTxHistory from './walletsNativeTxHistory';
import WalletsNativeRender from './walletsNative.render';
class WalletsNative extends React.Component {
constructor(props) {
@ -30,29 +23,7 @@ class WalletsNative extends React.Component {
// <WalletsNativeAlert {...this.props} />
render() {
if (this.isActiveCoinModeNative()) {
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>
);
return WalletsNativeRender.call(this);
} else {
return null;
}

35
react/src/components/dashboard/walletsNative.render.js
View File

@ -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;

22
react/src/components/dashboard/walletsNativeAlert.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsNativeAlertRender from './walletsNativeAlert.render';
class WalletsNativeAlert extends React.Component {
hasNoProgress() {
@ -10,24 +10,10 @@ class WalletsNativeAlert extends React.Component {
render() {
if (this.hasNoProgress()) {
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>
);
} else {
return null;
return WalletsNativeAlertRender.call(this);
}
return null;
}
}

22
react/src/components/dashboard/walletsNativeAlert.render.js
View File

@ -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;

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

@ -1,76 +1,14 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsNativeBalanceRender from './walletsNativeBalance.render';
class WalletsNativeBalance extends React.Component {
render() {
if (this.props &&
this.props.ActiveCoin.nativeActiveSection === 'default') {
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>
);
} else {
return null;
return WalletsNativeBalanceRender.call(this);
}
return null;
}
}

70
react/src/components/dashboard/walletsNativeBalance.render.js
View File

@ -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;

143
react/src/components/dashboard/walletsNativeInfo.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsNativeInfoRender from './walletsNativeInfo.render';
class WalletsNativeInfo extends React.Component {
constructor(props) {
@ -11,145 +11,10 @@ class WalletsNativeInfo extends React.Component {
this.props.Dashboard &&
this.props.Dashboard.progress &&
this.props.ActiveCoin.nativeActiveSection === 'settings') {
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>
);
} else {
return null;
return WalletsNativeInfoRender.call(this);
}
return null;
}
}

143
react/src/components/dashboard/walletsNativeInfo.render.js
View File

@ -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;

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

@ -1,10 +1,13 @@
import React from 'react';
import { translate } from '../../translate/translate';
import {
copyCoinAddress,
getNewKMDAddresses
} from '../../actions/actionCreators';
import Store from '../../store';
import {
AddressListRender,
WalletsNativeReceiveRender
} from './walletsNativeReceive.render';
class WalletsNativeReceive extends React.Component {
constructor(props) {
@ -48,23 +51,11 @@ class WalletsNativeReceive extends React.Component {
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"
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>
AddressListRender.call(this, address, type)
);
} else {
return null;
}
return null;
}
getNewAddress(type) {
@ -75,68 +66,10 @@ class WalletsNativeReceive extends React.Component {
if (this.props &&
this.props.ActiveCoin &&
this.props.ActiveCoin.nativeActiveSection === 'receive') {
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>
);
} else {
return null;
WalletsNativeReceiveRender.call(this);
}
return null;
}
}

82
react/src/components/dashboard/walletsNativeReceive.render.js
View File

@ -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>
);
};

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

@ -9,6 +9,11 @@ import {
getKMDOPID
} from '../../actions/actionCreators';
import Store from '../../store';
import {
AddressListRender,
OASendUIRender,
WalletsNativeSendRender
} from './walletsNativeSend.render';
class WalletsNativeSend extends React.Component {
constructor(props) {
@ -77,29 +82,7 @@ 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"
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>
);
return AddressListRender.call(this);
}
renderOPIDLabel(opid) {
@ -245,163 +228,20 @@ class WalletsNativeSend extends React.Component {
renderOASendUI() {
if (Config.openAlias) {
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>
);
} else {
return null;
return OASendUIRender.call(this);
}
return null;
}
render() {
if (this.props &&
this.props.ActiveCoin &&
this.props.ActiveCoin.nativeActiveSection === 'send') {
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>
);
} else {
return null;
return WalletsNativeSendRender.call(this);
}
return null;
}
}

179
react/src/components/dashboard/walletsNativeSend.render.js
View File

@ -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>
);
};

37
react/src/components/dashboard/walletsNativeSyncProgress.js
View File

@ -1,5 +1,9 @@
import React from 'react';
import { translate } from '../../translate/translate';
import {
ChainActivationNotificationRender,
WalletsNativeSyncProgressRender
} from './walletsNativeSyncProgress.render';
class WalletsNativeSyncProgress extends React.Component {
renderSyncPercentagePlaceholder() {
@ -79,41 +83,20 @@ class WalletsNativeSyncProgress extends React.Component {
renderChainActivationNotification() {
if ((!this.props.Dashboard.progress.blocks && !this.props.Dashboard.progress.longestchain) ||
(this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain)) {
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>
);
} else {
return null;
return ChainActivationNotificationRender.call(this);
}
return null;
}
render() {
if (this.props &&
this.props.Dashboard &&
this.props.Dashboard.progress) {
return (
<div>
{ this.renderChainActivationNotification() }
<div className="row sync-progress-container">
<div className="col-xs-12">
<div className="progress">
{ this.renderSyncPercentagePlaceholder() }
</div>
</div>
</div>
</div>
);
} else {
return null;
return WalletsNativeSyncProgressRender.call(this);
}
return null;
}
}

31
react/src/components/dashboard/walletsNativeSyncProgress.render.js
View File

@ -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>
);
};

143
react/src/components/dashboard/walletsNativeTxHistory.js
View File

@ -1,9 +1,14 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { sortByDate } from '../../util/sort';
import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
import Store from '../../store';
import {
PaginationItemsPerPageSelectorRender,
PaginationRender,
TxHistoryListRender,
WalletsNativeTxHistoryRender
} from './walletsNativeTxHistory.render';
class WalletsNativeTxHistory extends React.Component {
constructor(props) {
@ -138,23 +143,7 @@ class WalletsNativeTxHistory extends React.Component {
if (this.props.ActiveCoin.txhistory &&
this.props.ActiveCoin.txhistory !== 'loading' &&
this.props.ActiveCoin.txhistory.length > 10) {
return (
<div className="dataTables_length">
<label>
{ translate('INDEX.SHOW') }&nbsp;
<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>&nbsp;
{ translate('INDEX.ENTRIES_SM') }
</label>
</div>
);
return PaginationItemsPerPageSelectorRender.call(this);
} else {
return null;
}
@ -168,29 +157,10 @@ class WalletsNativeTxHistory extends React.Component {
const _paginationEnd = this.state.activePage * this.state.itemsPerPage;
const _paginationNextState = this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage);
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>
);
} else {
return null;
return PaginationRender.call(this, _paginationStart, _paginationEnd, _paginationNextState);
}
return null;
}
renderTxHistoryList() {
@ -211,101 +181,20 @@ class WalletsNativeTxHistory extends React.Component {
if (this.state.itemsList &&
this.state.itemsList.length &&
this.props.ActiveCoin.nativeActiveSection === 'default') {
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>
);
} else {
return null;
return TxHistoryListRender.call(this);
}
return null;
}
}
render() {
if (this.props &&
this.props.ActiveCoin.nativeActiveSection === 'default') {
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>
);
} else {
return null;
return WalletsNativeTxHistoryRender.call(this);
}
return null;
}
}

137
react/src/components/dashboard/walletsNativeTxHistory.render.js
View File

@ -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') }&nbsp;
<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>&nbsp;
{ 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>
);
};

149
react/src/components/dashboard/walletsNativeTxInfo.js
View File

@ -1,6 +1,4 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
import Store from '../../store';
@ -36,152 +34,7 @@ class WalletsNativeTxInfo extends React.Component {
this.props.ActiveCoin.mode === 'native') {
const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
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>
);
return WalletsNativeTxInfoRender.call(this, txInfo);
} else {
return null;
}

154
react/src/components/dashboard/walletsNativeTxInfo.render.js
View File

@ -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;

57
react/src/components/dashboard/walletsNav.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { translate } from '../../translate/translate';
import {
copyCoinAddress,
iguanaEdexBalance,
@ -9,6 +8,10 @@ import {
toggleDashboardActiveSection
} from '../../actions/actionCreators';
import Store from '../../store';
import {
WalletsNavNoWalletRender,
WalletsNavWithWalletRender
} from './walletsNav.render';
class WalletsNav extends React.Component {
constructor(props) {
@ -52,56 +55,10 @@ class WalletsNav extends React.Component {
if (this.props &&
this.props.ActiveCoin &&
!this.props.ActiveCoin.coin) {
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>
);
} else {
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>
);
return WalletsNavNoWalletRender.call(this);
}
return WalletsNavWithWalletRender.call(this);
}
}

56
react/src/components/dashboard/walletsNav.render.js
View File

@ -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>
);
};

51
react/src/components/dashboard/walletsNotariesList.js
View File

@ -2,8 +2,11 @@ import React from 'react';
import { translate } from '../../translate/translate';
import { displayNotariesModal } from '../../actions/actionCreators';
import Store from '../../store';
import Tree, { TreeNode } from 'rc-tree';
import { animation } from '../../util/rc-tree-animate';
import { TreeNode } from 'rc-tree';
import {
NotariesListRender,
WalletsNotariesListRender
} from './walletsNotariesList.render';
class WalletsNotariesList extends React.Component {
constructor(props) {
@ -38,11 +41,7 @@ class WalletsNotariesList extends React.Component {
this.props.ActiveCoin.notaries.notaries &&
this.props.ActiveCoin.notaries.notaries.length) {
return this.props.ActiveCoin.notaries.notaries.map((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>
NotariesListRender.call(this, node, index)
);
} else {
return null;
@ -53,42 +52,10 @@ class WalletsNotariesList extends React.Component {
if (this.props &&
this.props.ActiveCoin.mode === 'basilisk' &&
this.props.ActiveCoin.displayNotariesModal) {
const notariesData = this.props.ActiveCoin.notaries ? this.props.ActiveCoin.notaries.notaries : null;
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>
);
} else {
return null;
return WalletsNotariesListRender.call(this);
}
return null;
}
}

46
react/src/components/dashboard/walletsNotariesList.render.js
View File

@ -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>
);
};

49
react/src/components/dashboard/walletsProgress.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { translate } from '../../translate/translate';
import WalletsProgressRender from './walletsProgress.render';
class WalletsProgress extends React.Component {
constructor(props) {
@ -28,52 +29,12 @@ class WalletsProgress extends React.Component {
return (
<div className="text-align-center padding-10">{ translate('INDEX.COIN_IS_BUSY') }</div>
);
} else {
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 } ) ==&gt;&gt; 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>
);
}
} else {
return null;
return WalletsProgressRender.call(this);
}
return null;
}
}

48
react/src/components/dashboard/walletsProgress.render.js
View File

@ -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 } ) ==&gt;&gt; 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;

101
react/src/components/dashboard/walletsTxInfo.js
View File

@ -1,8 +1,7 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { secondsToString } from '../../util/time';
import { toggleDashboardTxInfoModal } from '../../actions/actionCreators';
import Store from '../../store';
import WalletsTxInfoRender from './walletsTxInfo.render';
class WalletsTxInfo extends React.Component {
constructor(props) {
@ -34,102 +33,10 @@ class WalletsTxInfo extends React.Component {
this.props.ActiveCoin.showTransactionInfo &&
this.props.ActiveCoin.mode !== 'native') {
const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex];
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>
);
} else {
return null;
return WalletsTxInfoRender.call(this, txInfo);
}
return null;
}
}

100
react/src/components/dashboard/walletsTxInfo.render.js
View File

@ -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;
Write Preview
Loading…
Cancel
Save