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

dashboard components #4

all-modes
pbca26 8 years ago
parent
aca94eae04
commit
c463afabf4
17 changed files with 1056 additions and 591 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. 1
      react/package.json
  2. 191
      react/src/actions/actionCreators.js
  3. 1
      react/src/components/app/app.js
  4. 28
      react/src/components/dashboard/coinTileItem.js
  5. 8
      react/src/components/dashboard/dashboard.js
  6. 575
      react/src/components/dashboard/receiveCoin.js
  7. 1
      react/src/components/dashboard/settings.js
  8. 76
      react/src/components/dashboard/walletsBasiliskConnection.js
  9. 54
      react/src/components/dashboard/walletsBasiliskRefresh.js
  10. 35
      react/src/components/dashboard/walletsData.js
  11. 556
      react/src/components/dashboard/walletsNative.js
  12. 50
      react/src/components/dashboard/walletsProgress.js
  13. 7
      react/src/reducers/activeCoin.js
  14. 31
      react/src/reducers/dashboard.js
  15. 2
      react/src/reducers/index.js
  16. 26
      react/src/reducers/interval.js
  17. 5
      react/src/styles/index.scss

1
react/package.json
View File

@ -33,6 +33,7 @@
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"bluebird": "^3.5.0",
"express": "^4.14.0",
"file-loader": "^0.10.0",
"react": "^15.3.1",

191
react/src/actions/actionCreators.js
View File

@ -1,4 +1,6 @@
import 'whatwg-fetch';
import 'bluebird';
import Config from '../config';
import { startCurrencyAssetChain, startAssetChain, startCrypto, checkCoinType } from '../components/addcoin/payload';
import { copyToClipboard } from '../util/copyToClipboard';
@ -20,6 +22,57 @@ export const ATOMIC = 'ATOMIC';
export const GET_WIF_KEY = 'GET_WIF_KEY';
export const GET_PEERS_LIST = 'GET_PEERS_LIST';
export const GET_DEBUG_LOG = 'GET_DEBUG_LOG';
export const BASILISK_REFRESH = 'BASILISK_REFRESH';
export const BASILISK_CONNECTION = 'BASILISK_CONNECTION';
export const SYNCING_FULL_MODE = 'SYNCING_FULL_MODE';
export const SYNCING_NATIVE_MODE = 'SYNCING_NATIVE_MODE';
export const ACTIVE_COIN_GET_ADDRESSES = 'ACTIVE_COIN_GET_ADDRESSES';
export const START_INTERVAL= 'START_INTERVAL';
export const STOP_INTERVAL= 'STOP_INTERVAL';
function basiliskConnectionState(display, json) {
return {
type: BASILISK_CONNECTION,
basiliskConnection: display,
progress: json,
}
}
function basiliskRefreshState(display, json) {
return {
type: BASILISK_REFRESH,
basiliskRefresh: display,
progress: json,
}
}
export function basiliskRefresh(display) {
return dispatch => {
dispatch(basiliskRefreshState(display));
}
}
export function basiliskConnection(display) {
return dispatch => {
dispatch(basiliskConnectionState(display));
}
}
export function syncingNativeModeState(display, json) {
return {
type: SYNCING_FULL_MODE,
syncingNativeMode: display,
progress: json,
}
}
export function syncingFullModeState(display, json) {
return {
type: SYNCING_NATIVE_MODE,
syncingFullMode: display,
progress: json,
}
}
function atomicState(json) {
return {
@ -390,7 +443,7 @@ export function iguanaActiveHandle(getMainAddress) {
})
.catch(function(error) {
console.log(error);
dispatch(triggerToaster(true, 'Error iguanaActiveHandle', 'Error', 'error'));
dispatch(triggerToaster(true, translate('TOASTR.IGUANA_ARE_YOU_SURE'), translate('TOASTR.SERVICE_NOTIFICATION'), 'error'));
})
.then(response => response.json())
.then(json => dispatch(getMainAddress ? getMainAddressState(json) : iguanaActiveHandleState(json)));
@ -566,6 +619,113 @@ export function addPeerNode(coin, ip) {
}
}
export function getAddressesByAccountState(json, coin) {
test(['123', '456']);
return {
type: ACTIVE_COIN_GET_ADDRESSES,
addresses: json.result,
}
}
export function getAddressesByAccount(coin) {
const payload = {
'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
'coin': coin,
'agent': 'bitcoinrpc',
'method': 'getaddressesbyaccount',
'account': '*'
};
return dispatch => {
return fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
method: 'POST',
body: JSON.stringify(payload),
})
.catch(function(error) {
console.log(error);
dispatch(triggerToaster(true, 'getAddressesByAccount', 'Error', 'error'));
})
.then(response => response.json())
.then(json => dispatch(getAddressesByAccountState(json, dispatch)))
}
}
function getDexNotariesState(json, dispatch) {
return dispatch => {
dispatch(triggerToaster(true, 'Notaries list received', translate('TOASTR.BASILISK_NOTIFICATION'), 'success'));
}
}
export function getDexNotaries(coin) {
const payload = {
'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
'agent': 'dex',
'method': 'getnotaries',
'symbol': coin
};
return dispatch => {
return fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
method: 'POST',
body: JSON.stringify(payload),
})
.catch(function(error) {
console.log(error);
dispatch(triggerToaster(true, 'getDexNotaries', 'Error', 'error'));
})
.then(response => response.json())
.then(json => dispatch(getDexNotariesState(json, dispatch)))
}
}
export function startInterval(name, handle) {
return {
type: START_INTERVAL,
name,
handle,
}
}
export function stopInterval(name, intervals) {
clearInterval(intervals[name]);
return {
type: STOP_INTERVAL,
name,
}
}
function getSyncInfoState(json) {
return {
type: SYNCING_FULL_MODE,
progress: json,
}
}
export function getSyncInfo(coin) {
const payload = {
'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
'coin': coin,
'agent': 'bitcoinrpc',
'method': 'getinfo',
'immediate': 100,
'timeout': 4000
};
return dispatch => {
return fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
method: 'POST',
body: JSON.stringify(payload),
})
.catch(function(error) {
console.log(error);
dispatch(triggerToaster(true, 'getSyncInfo', 'Error', 'error'));
})
.then(response => response.json())
.then(json => dispatch(getSyncInfoState(json, dispatch)))
}
}
function getDebugLogState(json) {
const _data = json.result.replace('\n', '\r\n');
@ -661,6 +821,35 @@ export function shepherdGetSysInfo() {
}
}
/*export function test(coin, addr) {
Promise.all(addr.map((_addr, index) => {
const payload = {
'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
'agent': 'dex',
'method': 'listunspent',
'address': _addr,
'symbol': coin
}
console.log('addr', _addr);
return new Promise((resolve, reject) => {
fetch('http://127.0.0.1:' + Config.iguanaCorePort, {
method: 'POST',
body: JSON.stringify(payload),
})
.catch(function(error) {
console.log(error);
dispatch(triggerToaster(true, 'getSyncInfo', 'Error', 'error'));
})
.then(response => response.json())
.then(json => dispatch(getSyncInfoState(json, dispatch)))
resolve(index);
});
}))
.then(result => {
console.log(result);
});
}
/*function Shepherd_SendPendValue() {
Shepherd_SysInfo().then(function(result){
var ram_data = formatBytes(result.totalmem_bytes)

1
react/src/components/app/app.js
View File

@ -12,6 +12,7 @@ function mapStateToProps(state) {
ActiveCoin: state.ActiveCoin,
Atomic: state.Atomic,
Settings: state.Settings,
Interval: state.Interval,
};
}

28
react/src/components/dashboard/coinTileItem.js
View File

@ -1,6 +1,14 @@
import React from 'react';
import { translate } from '../../translate/translate';
import { dashboardChangeActiveCoin, iguanaActiveHandle } from '../../actions/actionCreators';
import {
dashboardChangeActiveCoin,
iguanaActiveHandle,
getAddressesByAccount,
getSyncInfo,
startInterval,
stopInterval,
iguanaEdexBalance
} from '../../actions/actionCreators';
import Store from '../../store';
class CoinTileItem extends React.Component {
@ -11,13 +19,29 @@ class CoinTileItem extends React.Component {
}
dashboardChangeActiveCoin(coin, mode) {
if (mode === 'full' && coin !== this.props.ActiveCoin.coin) {
Store.dispatch(stopInterval('sync', this.props.Interval.interval));
var _iguanaActiveHandle = setInterval(function() {
Store.dispatch(getSyncInfo(coin));
}, 3000);
Store.dispatch(startInterval('sync', _iguanaActiveHandle));
} else {
Store.dispatch(stopInterval('sync', this.props.Interval.interval));
}
Store.dispatch(dashboardChangeActiveCoin(coin, mode));
Store.dispatch(iguanaActiveHandle(true));
Store.dispatch(getAddressesByAccount(coin));
Store.dispatch(iguanaEdexBalance(coin));
/*this.setState(Object.assign({}, this.state, {
activeHandleInterval: _iguanaActiveHandle,
}));*/
}
render() {
const { item } = this.props;
return (
<div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info" data-edexcoincode="{item.coin}">
<div className={this.props.ActiveCoin.coin === item.coin ? 'widget widget-shadow active' : 'widget widget-shadow'}>

8
react/src/components/dashboard/dashboard.js
View File

@ -13,6 +13,9 @@ import Jumblr from './jumblr';
import Settings from './settings';
import ReceiveCoin from './receiveCoin';
import About from './about';
import WalletsBasiliskRefresh from './walletsBasiliskRefresh';
import WalletsBasiliskConnection from './walletsBasiliskConnection';
import WalletsNative from './walletsNative';
class Dashboard extends React.Component {
constructor(props) {
@ -36,7 +39,10 @@ class Dashboard extends React.Component {
<WalletsBalance {...this.props.ActiveCoin} />
<SendCoin {...this.props.ActiveCoin} />
<ReceiveCoin {...this.props.ActiveCoin} />
<WalletsData {...this.props.ActiveCoin} />
<WalletsData {...this.props} />
<WalletsBasiliskRefresh {...this.props} />
<WalletsBasiliskConnection {...this.props} />
<WalletsNative {...this.props} />
</div>
<div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}>
<EDEX {...this.props} />

575
react/src/components/dashboard/receiveCoin.js
View File

@ -2,549 +2,66 @@ import React from 'react';
import { translate } from '../../translate/translate';
class ReceiveCoin extends React.Component {
renderAddressList() {
if (this.props.addresses && this.props.addresses.length) {
return this.props.addresses.map((address) =>
<tr key={address}>
<td>
<span className="label label-default">
<i className="icon fa-eye"></i> {translate('IAPI.PUBLIC_SM')}
</span>
</td>
<td>{address}</td>
<td></td>
<td></td>
</tr>
);
} else {
return null;
}
}
render() {
console.log('receiveprops', this.props);
if (this.props && this.props.receive) {
return (
<div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
<div className="page-content" data-extcoin="COIN" id="section-extcoin">
<div role="alert" className="alert alert-danger alert-dismissible" data-extcoin="COIN" id="extcoin-wallet-connection-alert">
<button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span>
</button>
<h4>{translate('INDEX.OOPS_ERROR')}</h4>
<p data-extcoin="COIN" id="extcoin-wallet-connection-alert-text">
<span data-lang="INDEX.OOPS_ERROR_DESC"></span>
<code>server=1</code><br/>
<code>rpcport=</code><br/>
<code>rpcuser=</code><br/>
<code>rpcpassword=</code>
</p>
</div>
<div role="alert" className="alert alert-info alert-dismissible" data-extcoin="COIN" id="extcoin-wallet-activating-alert">
<button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span>
</button>
<h4>
{translate('INDEX.ACTIVATING_CHAIN')}<span id="activating-komodod-tridot">...</span><span id="activating-komodod-progress"></span>
</h4>
<p data-extcoin="COIN" id="extcoin-wallet-connection-alert-text">{translate('INDEX.KMD_STARTED')}</p>
</div>
<div className="row" data-extcoin="COIN" style={{margin: '-20px 0px 10px 0px'}}>
<div className="col-xs-12" data-extcoin="COIN" id="extcoin-progressbars">
<div className="progress">
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '0%', fontSize: '80%'}} role="progressbar" data-extcoin="COIN" id="extcoin-sync">
<span data-extcoin="COIN" id="extcoin-sync-percent">-</span> | <span data-extcoin="COIN" id="extcoin-synced-blocks">-</span> / <span data-extcoin="COIN" id="extcoin-longestchain">-</span> | <span data-lang="INDEX.CONNECTIONS"></span>: <span data-extcoin="COIN" id="extcoin-connections">-</span>
</div>
</div>
</div>
</div>
<div className="row" data-extcoin="COIN" id="extcoin-wallet" data-plugin="masonry">
<div className="col-xs-12">
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_t">
<div className="widget widget-shadow" id="widgetLineareaOne">
<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" data-extcoin="COIN" id="kmd_transparent_balance" style={{fontSize: '22px'}}>-</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_z">
<div className="widget widget-shadow" id="widgetLineareaOne">
<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" data-extcoin="COIN" id="kmd_private_balance" style={{fontSize: '22px'}}>-</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_i">
<div className="widget widget-shadow" id="widgetLineareaOne">
<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" data-extcoin="COIN" id="kmd_total_interest_balance" style={{fontSize: '22px'}}>-</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_tzi">
<div className="widget widget-shadow" id="widgetLineareaOne">
<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" data-extcoin="COIN" id="kmd_total_tz_balance" style={{fontSize: '22px'}}>-</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-extcoin="COIN" id="kmd_wallet_dashboardinfo">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_dashoard_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<h3 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h3>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-tx-history-tbl" 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>
<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>
</div>
<div data-edexcoin="COIN" id="edexcoin_recieve">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div data-edexcoin="COIN" id="edexcoin_recieve_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<div className="panel-actions">
</div>
</div>
</div>
</div>
</div>
<div data-extcoin="COIN" id="kmd_wallet_recieve">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_recieve_section">
<div 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">
<a className="dropdown-toggle white btn btn-warning" data-extcoin="COIN" id="GetNewRecievingAddress" data-toggle="dropdown" href="javascript:void(0)" aria-expanded="false" role="button">
<i className="icon md-arrows margin-right-10" aria-hidden="true"></i> {translate('INDEX.GET_NEW_ADDRESS')} <span className="caret"></span>
</a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="GetNewRecievingAddress" role="menu">
<li role="presentation">
<a href="javascript:void(0)" data-extcoin="COIN" id="kmd_get_new_taddr" role="menuitem">
<i className="icon fa-eye" aria-hidden="true"></i> {translate('INDEX.TRANSPARENT_ADDRESS')}
</a>
</li>
<li data-extcoin="COIN" role="presentation">
<a href="javascript:void(0)" data-extcoin="COIN" id="kmd_get_new_zaddr" role="menuitem">
<i className="icon fa-eye-slash" aria-hidden="true"></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" data-extcoin="COIN" id="kmd-recieve-addr-tbl">
<thead>
<tr>
<th data-lang="INDEX.TYPE">{translate('INDEX.TYPE')}</th>
<th data-lang="INDEX.ADDRESS">{translate('INDEX.ADDRESS')}</th>
</tr>
</thead>
<tfoot>
<tr>
<th data-lang="INDEX.TYPE">{translate('INDEX.TYPE')}</th>
<th data-lang="INDEX.ADDRESS">{translate('INDEX.ADDRESS')}</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-extcoin="COIN" id="kmd_wallet_send">
<div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
<div className="panel" id="projects">
<div className="panel-heading">
<h3 data-extcoin="COIN" className="panel-title">
{translate('INDEX.SEND')} <span data-extcoinname="COIN"></span>
</h3>
</div>
<div className="panel-body container-fluid">
<form className="extcoin-send-form" data-extcoin="COIN" method="post" role="form" autocomplete="off" onsubmit="return false">
<div className="row">
<div className="col-xlg-12 form-group form-material">
<label className="control-label" data-extcoin="COIN" for="kmd_wallet_send_from">{translate('INDEX.SEND_FROM')}</label>
<select className="form-control form-material showkmdwalletaddrs show-tick" data-extcoin="COIN" id="kmd_wallet_send_from" title="Select Transparent or Private Address" data-size="5"></select>
</div>
<div className="col-xlg-12 form-group form-material">
<label className="control-label" data-extcoin="COIN" for="kmd_wallet_sendto">{translate('INDEX.SEND_TO')}</label>
<input type="text" className="form-control" data-extcoin="COIN" id="kmd_wallet_sendto" name="kmd_wallet_sendto" placeholder="Enter Transparent or Private address" autocomplete="off" required />
</div>
<div className="col-lg-6 form-group form-material">
<label className="control-label" for="kmd_wallet_amount" data-extcoin="COIN" id="kmd_wallet_amount_label">
<span data-extcoinname="COIN"></span>
</label>
<input type="text" className="form-control" data-extcoin="COIN" id="kmd_wallet_amount" name="kmd_wallet_amount" placeholder="0.000" autocomplete="off" />
</div>
<div className="col-lg-6 form-group form-material">
<label className="control-label" data-extcoin="COIN" for="kmd_wallet_fee">{translate('INDEX.FEE')}</label>
<input type="text" className="form-control" data-extcoin="COIN" id="kmd_wallet_fee" name="kmd_wallet_fee" placeholder="0.000" value="0.0001" autocomplete="off" />
</div>
<div className="col-lg-12">
<span data-extcoin="KMD">
<b>{translate('INDEX.TOTAL')} (<span data-extcoinname="COIN"></span> - txfee):</b> <span data-extcoin="COIN" id="kmd_wallet_total_value">0.000</span> <span data-extcoin="COIN" id="kmd_wallet_total_coinname" data-extcoinname="COIN"></span>
</span>
</div>
<div className="col-lg-12">
<button type="submit" className="btn btn-primary waves-effect waves-light pull-right" data-toggle="modal" id="kmd_wallet_send_coins_btn">
{translate('INDEX.SEND')} <span data-extcoinname="COIN"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className="col-xs-12">
<div className="row">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_opids_status_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<div className="panel-actions">
<button className="btn btn-info btn-block" id="kmd_opids_status_btn" type="button">
<i className="icon fa-repeat" aria-hidden="true"></i> {translate('INDEX.REFRESH')}
</button>
</div>
<h3 className="panel-title">{translate('INDEX.OPERATIONS_STATUSES')}</h3>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-opid-status-tbl" width="100%">
<thead>
<tr>
<th data-lang="INDEX.STATUS">{translate('INDEX.STATUS')}</th>
<th>ID</th>
<th data-lang="INDEX.TIME">{translate('INDEX.TIME')}</th>
<th data-lang="INDEX.RESULT">{translate('INDEX.RESULT')}</th>
</tr>
</thead>
<tfoot>
<tr>
<th data-lang="INDEX.STATUS">{translate('INDEX.STATUS')}</th>
<th>ID</th>
<th data-lang="INDEX.TIME">{translate('INDEX.TIME')}</th>
<th data-lang="INDEX.RESULT">{translate('INDEX.RESULT')}</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-extcoin="COIN" id="kmd_wallet_settings">
<div className="col-xlg-6 col-md-4">
<div className="panel" id="projects">
<div className="panel-heading">
<h3 className="panel-title">{translate('INDEX.WALLET_INFO')}</h3>
</div>
<div className="table-responsive">
<table className="table table-striped">
<h4 className="panel-title">{translate('INDEX.RECEIVING_ADDRESS')}</h4>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" data-edexcoin="COIN" id="edexcoin-recieve-addr-tbl">
<thead>
<tr>
<th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.ADDRESS')}</th>
<th>{translate('INDEX.BALANCE')}</th>
<th>{translate('INDEX.INTEREST')}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{translate('INDEX.WALLET_VERSION')}</td>
<td>
<span data-extcoin="COIN" id="kmd_walletversion"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.BALANCE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_balance"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.UNCONFIRMED_BALANCE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_unconfirmed_balance"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.IMMATURE_BALANCE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_immature_balance"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.TOTAL_TX_COUNT')}</td>
<td>
<span data-extcoin="COIN" id="KMDTotalTransactionsCount"></span>
</td>
</tr>
{this.renderAddressList()}
</tbody>
</table>
</div>
</div>
</div>
<div className="col-xlg-6 col-md-8">
<div className="panel" id="projects">
<div className="panel-heading">
<h3 className="panel-title">
<span data-extcointitle="COIN">Komodo</span> {translate('INDEX.INFO')}
</h3>
</div>
<div className="table-responsive">
<table className="table table-striped">
<tbody>
<tr>
<td>{translate('INDEX.VERSION')}</td>
<td>
<span data-extcoin="COIN" id="kmd_version"></span>
</td>
</tr>
<tfoot>
<tr>
<td>{translate('INDEX.PROTOCOL_VERSION')}</td>
<td>
<span data-extcoin="COIN" id="kmd_protocolversion"></span>
</td>
<th>{translate('INDEX.TYPE')}</th>
<th>{translate('INDEX.ADDRESS')}</th>
<th>{translate('INDEX.BALANCE')}</th>
<th>{translate('INDEX.INTEREST')}</th>
</tr>
<tr>
<td>{translate('INDEX.NOTARIZED')}</td>
<td>
<span data-extcoin="COIN" id="kmd_notarized"></span>
</td>
</tr>
<tr>
<td>
{translate('INDEX.NOTARIZED')} Hash
</td>
<td>
<span data-extcoin="COIN" id="kmd_notarizedhash"></span>
</td>
</tr>
<tr>
<td>
{translate('INDEX.NOTARIZED')} BTC
</td>
<td>
<span data-extcoin="COIN" id="kmd_notarizedbtc"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.BLOCKS')}</td>
<td>
<span data-extcoin="COIN" id="kmd_blocks"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.CONNECTIONS')}</td>
<td>
<span data-extcoin="COIN" id="kmd_connections"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.DIFFICULTY')}</td>
<td>
<span data-extcoin="COIN" id="kmd_difficulty"></span>
</td>
</tr>
<tr>
<td>Testnet</td>
<td>
<span data-extcoin="COIN" id="kmd_testnet"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.PAY_TX_FEE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_paytxfee"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.RELAY_FEE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_relayfee"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.ERRORS')}</td>
<td>
<span data-extcoin="COIN" id="kmd_errors"></span>
</td>
</tr>
</tbody>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div className="modal fade modal-3d-sign" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog" tabindex="-1">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-body">
<div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
<li className="active" role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab1" data-extcoin="COIN" aria-controls="KmdTxIDInfotab1" role="tab">
<i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab2" data-extcoin="COIN" aria-controls="KmdTxIDInfotab2" role="tab">
<i className="icon md-plus-square" aria-hidden="true"></i>vjointsplits, details
</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab3" data-extcoin="COIN" aria-controls="KmdTxIDInfotab3" role="tab">
<i className="icon wb-briefcase" aria-hidden="true"></i>hex
</a>
</li>
</ul>
<div className="panel-body">
<div className="tab-content">
<div className="tab-pane active" id="KmdTxIDInfotab1" data-extcoin="COIN" role="tabpanel">
<table className="table table-striped">
<tbody>
<tr>
<td>amount</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_amount"></span>
</td>
</tr>
<tr>
<td>fee</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_fee"></span>
</td>
</tr>
<tr>
<td>confirmations</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_confirmations"></span>
</td>
</tr>
<tr>
<td>blockhash</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_blockhash"></span>
</td>
</tr>
<tr>
<td>blockindex</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_blockindex"></span>
</td>
</tr>
<tr>
<td>blocktime</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_blocktime"></span>
</td>
</tr>
<tr>
<td>txid</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_txid"></span>
</td>
</tr>
<tr>
<td>walletconflicts</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_walletconflicts"></span>
</td>
</tr>
<tr>
<td>time</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_time"></span>
</td>
</tr>
<tr>
<td>timereceived</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_timereceived"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div className="tab-pane" id="KmdTxIDInfotab2" data-extcoin="COIN" role="tabpanel">
<table className="table table-striped">
<tbody>
<tr>
<td>vjoinsplit</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_vjoinsplit"></span>
</td>
</tr>
<tr>
<td>details</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_details"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div className="tab-pane" id="KmdTxIDInfotab3" data-extcoin="COIN" role="tabpanel">
<textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '170px'}} rows="10" cols="80" disabled></textarea>
</div>
</div>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
);

1
react/src/components/dashboard/settings.js
View File

@ -19,6 +19,7 @@ import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
1) pre-select active coin in add node tab
2) add agama config section
3) add fiat section
4) kickstart section
*/
class Settings extends React.Component {
constructor(props) {

76
react/src/components/dashboard/walletsBasiliskConnection.js
View File

@ -0,0 +1,76 @@
import React from 'react';
import { translate } from '../../translate/translate';
class WalletsBasiliskConnection extends React.Component {
render() {
if (this.props && this.props.Dashboard.basiliskConnection) {
return (
<div>
<div className="modal show" id="RefreshBasiliskConnectionsMdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-md">
<div className="modal-content">
<div className="modal-header bg-orange-a400 wallet-send-header" style={{borderRadius: '3px 3px 0 0'}}>
<h4 className="modal-title white">
<span className="icon fa-refresh" style={{margin: '0'}}></span> {translate('INDEX.REFRESHING_BASILISK_NET')}... <span id="mdl_receive_coin_name"></span>
</h4>
</div>
<div className="modal-body" style={{textAlign: 'center'}}>
<div className="loader-wrapper active">
<div className="loader-layer loader-blue">
<div className="loader-circle-left">
<div className="circle"></div>
</div>
<div className="loader-circle-gap"></div>
<div className="loader-circle-right">
<div className="circle"></div>
</div>
</div>
<div className="loader-layer loader-red">
<div className="loader-circle-left">
<div className="circle"></div>
</div>
<div className="loader-circle-gap"></div>
<div className="loader-circle-right">
<div className="circle"></div>
</div>
</div>
<div className="loader-layer loader-green">
<div className="loader-circle-left">
<div className="circle"></div>
</div>
<div className="loader-circle-gap"></div>
<div className="loader-circle-right">
<div className="circle"></div>
</div>
</div>
<div className="loader-layer loader-yellow">
<div className="loader-circle-left">
<div className="circle"></div>
</div>
<div className="loader-circle-gap"></div>
<div className="loader-circle-right">
<div className="circle"></div>
</div>
</div>
</div>
<h5 className="text-left">
<span id="basilisk-connections-refresh-title">-</span> <span className="pull-right" id="basilisk-connections-refresh-percent">-</span>
</h5>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '10%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="basilisk-connections-refresh-progress-bar"></div>
</div>
<pre data-edexcoin="COIN" id="basilisk-connections-refresh-status-output"></pre>
</div>
</div>
</div>
</div>
<div className="modal-backdrop show in"></div>
</div>
);
} else {
return null;
}
}
}
export default WalletsBasiliskConnection;

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

@ -3,36 +3,40 @@ import { translate } from '../../translate/translate';
class WalletsBasiliskRefresh extends React.Component {
render() {
return (
<div data-edexcoin="COIN" 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" data-toggle="panel-refresh" data-load-type="blue-only" aria-hidden="true"></a>
if (this.props && this.props.Dashboard.basiliskRefresh) {
return (
<div data-edexcoin="COIN" 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" data-toggle="panel-refresh" data-load-type="blue-only" aria-hidden="true"></a>
</div>
</div>
<div className="table-responsive">
<table className="table table-hover table-striped tbl_edexcoin_dashboard_basilisk_refresh_status">
<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 className="table-responsive">
<table className="table table-hover table-striped tbl_edexcoin_dashboard_basilisk_refresh_status">
<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;
}
}
}

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

@ -1,7 +1,7 @@
import React from 'react';
import { translate } from '../../translate/translate';
/*import { } from '../../actions/actionCreators';
import Store from '../../store';*/
import { basiliskRefresh, basiliskConnection, getDexNotaries } from '../../actions/actionCreators';
import Store from '../../store';
class WalletsData extends React.Component {
constructor(props) {
@ -10,6 +10,9 @@ class WalletsData extends React.Component {
basiliskActionsMenu: false,
};
this.toggleBasiliskActionsMenu = this.toggleBasiliskActionsMenu.bind(this);
this.basiliskRefreshAction = this.basiliskRefreshAction.bind(this);
this.basiliskConnectionAction = this.basiliskConnectionAction.bind(this);
this.getDexNotariesAction = this.getDexNotariesAction.bind(this);
}
toggleBasiliskActionsMenu() {
@ -18,8 +21,24 @@ class WalletsData extends React.Component {
}));
}
basiliskRefreshAction() {
if (this.props.Dashboard) {
Store.dispatch(basiliskRefresh(!this.props.Dashboard.basiliskRefresh));
}
}
basiliskConnectionAction() {
if (this.props.Dashboard) {
Store.dispatch(basiliskConnection(!this.props.Dashboard.basiliskConnection));
}
}
getDexNotariesAction() {
Store.dispatch(getDexNotaries(this.props.ActiveCoin.coin));
}
render() {
if (this.props && this.props.coin) {
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.coin) {
return (
<div data-edexcoin="COIN" id="edexcoin_dashboardinfo">
<div className="col-xs-12 margin-top-20">
@ -28,7 +47,7 @@ class WalletsData extends React.Component {
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12 edexcoin_dashoard_section_main_div">
<div id="edexcoin_txhistory" className="panel">
<header className="panel-heading" style={{zIndex: '10'}}>
<div className="panel-actions">
<div className={this.props.ActiveCoin.mode === 'basilisk' ? 'panel-actions' : 'panel-actions hide'}>
<a href="javascript:void(0)" className="dropdown-toggle white btn-xs btn-info btn_refresh_edexcoin_dashboard" data-edexcoin="COIN" aria-expanded="false" role="button">
<i className="icon fa-refresh margin-right-10" aria-hidden="true"></i> {translate('INDEX.REFRESH')}
</a>
@ -40,22 +59,22 @@ class WalletsData extends React.Component {
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="btn_edexcoin_basilisk"
role="menu">
<li role="presentation">
<a href="javascript:void(0)" className="btn_edexcoin_dashboard_getnotaries" data-edexcoin="COIN" id="btn_edexcoin_dashboard_getnotaries" role="menuitem">
<a className="btn_edexcoin_dashboard_getnotaries" data-edexcoin="COIN" id="btn_edexcoin_dashboard_getnotaries" role="menuitem" onClick={this.getDexNotariesAction}>
<i className="icon fa-sitemap" aria-hidden="true"></i> {translate('INDEX.GET_NOTARY_NODES_LIST')}
</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" className="btn_edexcoin_dashboard_refresh_basilisk_conn" data-edexcoin="COIN" id="btn_edexcoin_dashboard_refresh_basilisk_conn" role="menuitem">
<a className="btn_edexcoin_dashboard_refresh_basilisk_conn" data-edexcoin="COIN" id="btn_edexcoin_dashboard_refresh_basilisk_conn" role="menuitem" onClick={this.basiliskConnectionAction}>
<i className="icon wb-refresh" aria-hidden="true"></i> {translate('INDEX.REFRESH_BASILISK_CONNECTIONS')}
</a>
</li>
<li data-edexcoin="COIN" role="presentation">
<a href="javascript:void(0)" className="btn_edexcoin_dashboard_fetchdata" data-edexcoin="COIN" id="btn_edexcoin_dashboard_fetchdata" role="menuitem">
<a className="btn_edexcoin_dashboard_fetchdata" data-edexcoin="COIN" id="btn_edexcoin_dashboard_fetchdata" role="menuitem" onClick={this.basiliskRefreshAction}>
<i className="icon fa-cloud-download" aria-hidden="true"></i> {translate('INDEX.FETCH_WALLET_DATA')}
</a>
</li>
<li data-edexcoin="COIN" role="presentation">
<a href="javascript:void(0)" className="btn_edexcoin_dashboard_refetchdata" data-edexcoin="COIN" id="btn_edexcoin_dashboard_refetchdata" role="menuitem">
<a className="btn_edexcoin_dashboard_refetchdata" data-edexcoin="COIN" id="btn_edexcoin_dashboard_refetchdata" role="menuitem">
<i className="icon fa-cloud-download" aria-hidden="true"></i> {translate('INDEX.REFETCH_WALLET_DATA')}
</a>
</li>

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

@ -0,0 +1,556 @@
import React from 'react';
import { translate } from '../../translate/translate';
class WalletsNative extends React.Component {
render() {
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'native') {
return (
<div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
<div className="page-content" data-extcoin="COIN" id="section-extcoin">
<div role="alert" className="alert alert-danger alert-dismissible" data-extcoin="COIN" id="extcoin-wallet-connection-alert">
<button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span>
</button>
<h4>{translate('INDEX.OOPS_ERROR')}</h4>
<p data-extcoin="COIN" id="extcoin-wallet-connection-alert-text">
<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>
<div role="alert" className="alert alert-info alert-dismissible" data-extcoin="COIN" id="extcoin-wallet-activating-alert">
<button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span>
</button>
<h4>
{translate('INDEX.ACTIVATING_CHAIN')}<span id="activating-komodod-tridot">...</span><span id="activating-komodod-progress"></span>
</h4>
<p data-extcoin="COIN" id="extcoin-wallet-connection-alert-text">{translate('INDEX.KMD_STARTED')}</p>
</div>
<div className="row" data-extcoin="COIN" style={{margin: '-20px 0px 10px 0px'}}>
<div className="col-xs-12" data-extcoin="COIN" id="extcoin-progressbars">
<div className="progress">
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '0%', fontSize: '80%'}} role="progressbar" data-extcoin="COIN" id="extcoin-sync">
<span data-extcoin="COIN" id="extcoin-sync-percent">-</span> | <span data-extcoin="COIN" id="extcoin-synced-blocks">-</span> / <span data-extcoin="COIN" id="extcoin-longestchain">-</span> | {translate('INDEX.CONNECTIONS')}: <span data-extcoin="COIN" id="extcoin-connections">-</span>
</div>
</div>
</div>
</div>
<div className="row" data-extcoin="COIN" id="extcoin-wallet" data-plugin="masonry">
<div className="col-xs-12">
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_t">
<div className="widget widget-shadow" id="widgetLineareaOne">
<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" data-extcoin="COIN" id="kmd_transparent_balance" style={{fontSize: '22px'}}>-</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_z">
<div className="widget widget-shadow" id="widgetLineareaOne">
<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" data-extcoin="COIN" id="kmd_private_balance" style={{fontSize: '22px'}}>-</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_i">
<div className="widget widget-shadow" id="widgetLineareaOne">
<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" data-extcoin="COIN" id="kmd_total_interest_balance" style={{fontSize: '22px'}}>-</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-xs-12" data-extcoin="COIN" id="kmd_widget_get_total_balance_tzi">
<div className="widget widget-shadow" id="widgetLineareaOne">
<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" data-extcoin="COIN" id="kmd_total_tz_balance" style={{fontSize: '22px'}}>-</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-extcoin="COIN" id="kmd_wallet_dashboardinfo">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_dashoard_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<h3 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h3>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-tx-history-tbl" 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>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-extcoin="COIN" id="kmd_wallet_recieve">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_recieve_section">
<div 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">
<a className="dropdown-toggle white btn btn-warning" data-extcoin="COIN" id="GetNewRecievingAddress" data-toggle="dropdown" href="javascript:void(0)" aria-expanded="false" role="button">
<i className="icon md-arrows margin-right-10" aria-hidden="true"></i> {translate('INDEX.GET_NEW_ADDRESS')} <span className="caret"></span>
</a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="GetNewRecievingAddress" role="menu">
<li role="presentation">
<a href="javascript:void(0)" data-extcoin="COIN" id="kmd_get_new_taddr" role="menuitem">
<i className="icon fa-eye" aria-hidden="true"></i> {translate('INDEX.TRANSPARENT_ADDRESS')}
</a>
</li>
<li data-extcoin="COIN" role="presentation">
<a href="javascript:void(0)" data-extcoin="COIN" id="kmd_get_new_zaddr" role="menuitem">
<i className="icon fa-eye-slash" aria-hidden="true"></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" data-extcoin="COIN" id="kmd-recieve-addr-tbl">
<thead>
<tr>
<th>{translate('INDEX.TYPE')}</th>
<th data-lang="INDEX.ADDRESS">{translate('INDEX.ADDRESS')}</th>
</tr>
</thead>
<tfoot>
<tr>
<th data-lang="INDEX.TYPE">{translate('INDEX.TYPE')}</th>
<th data-lang="INDEX.ADDRESS">{translate('INDEX.ADDRESS')}</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-extcoin="COIN" id="kmd_wallet_send">
<div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
<div className="panel" id="projects">
<div className="panel-heading">
<h3 data-extcoin="COIN" className="panel-title">
{translate('INDEX.SEND')} <span data-extcoinname="COIN"></span>
</h3>
</div>
<div className="panel-body container-fluid">
<form className="extcoin-send-form" data-extcoin="COIN" method="post" role="form" autocomplete="off" onsubmit="return false">
<div className="row">
<div className="col-xlg-12 form-group form-material">
<label className="control-label" data-extcoin="COIN" for="kmd_wallet_send_from">{translate('INDEX.SEND_FROM')}</label>
<select className="form-control form-material showkmdwalletaddrs show-tick" data-extcoin="COIN" id="kmd_wallet_send_from" title="Select Transparent or Private Address" data-size="5"></select>
</div>
<div className="col-xlg-12 form-group form-material">
<label className="control-label" data-extcoin="COIN" for="kmd_wallet_sendto">{translate('INDEX.SEND_TO')}</label>
<input type="text" className="form-control" data-extcoin="COIN" id="kmd_wallet_sendto" name="kmd_wallet_sendto" placeholder="Enter Transparent or Private address" autocomplete="off" required />
</div>
<div className="col-lg-6 form-group form-material">
<label className="control-label" for="kmd_wallet_amount" data-extcoin="COIN" id="kmd_wallet_amount_label">
<span data-extcoinname="COIN"></span>
</label>
<input type="text" className="form-control" data-extcoin="COIN" id="kmd_wallet_amount" name="kmd_wallet_amount" placeholder="0.000" autocomplete="off" />
</div>
<div className="col-lg-6 form-group form-material">
<label className="control-label" data-extcoin="COIN" for="kmd_wallet_fee">{translate('INDEX.FEE')}</label>
<input type="text" className="form-control" data-extcoin="COIN" id="kmd_wallet_fee" name="kmd_wallet_fee" placeholder="0.000" value="0.0001" autocomplete="off" />
</div>
<div className="col-lg-12">
<span data-extcoin="KMD">
<b>{translate('INDEX.TOTAL')} (<span data-extcoinname="COIN"></span> - txfee):</b> <span data-extcoin="COIN" id="kmd_wallet_total_value">0.000</span> <span data-extcoin="COIN" id="kmd_wallet_total_coinname" data-extcoinname="COIN"></span>
</span>
</div>
<div className="col-lg-12">
<button type="submit" className="btn btn-primary waves-effect waves-light pull-right" data-toggle="modal" id="kmd_wallet_send_coins_btn">
{translate('INDEX.SEND')} <span data-extcoinname="COIN"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div className="col-xs-12">
<div className="row">
<div className="panel nav-tabs-horizontal">
<div data-extcoin="COIN" id="kmd_wallet_opids_status_section">
<div className="col-xlg-12 col-lg-12 col-sm-12 col-xs-12">
<div className="panel">
<header className="panel-heading">
<div className="panel-actions">
<button className="btn btn-info btn-block" id="kmd_opids_status_btn" type="button">
<i className="icon fa-repeat" aria-hidden="true"></i> {translate('INDEX.REFRESH')}
</button>
</div>
<h3 className="panel-title">{translate('INDEX.OPERATIONS_STATUSES')}</h3>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" data-extcoin="COIN" id="kmd-opid-status-tbl" width="100%">
<thead>
<tr>
<th>{translate('INDEX.STATUS')}</th>
<th>ID</th>
<th>{translate('INDEX.TIME')}</th>
<th>{translate('INDEX.RESULT')}</th>
</tr>
</thead>
<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>
<div data-extcoin="COIN" id="kmd_wallet_settings">
<div className="col-xlg-6 col-md-4">
<div className="panel" id="projects">
<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>
<span data-extcoin="COIN" id="kmd_walletversion"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.BALANCE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_balance"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.UNCONFIRMED_BALANCE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_unconfirmed_balance"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.IMMATURE_BALANCE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_immature_balance"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.TOTAL_TX_COUNT')}</td>
<td>
<span data-extcoin="COIN" id="KMDTotalTransactionsCount"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="col-xlg-6 col-md-8">
<div className="panel" id="projects">
<div className="panel-heading">
<h3 className="panel-title">
<span data-extcointitle="COIN">Komodo</span> {translate('INDEX.INFO')}
</h3>
</div>
<div className="table-responsive">
<table className="table table-striped">
<tbody>
<tr>
<td>{translate('INDEX.VERSION')}</td>
<td>
<span data-extcoin="COIN" id="kmd_version"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.PROTOCOL_VERSION')}</td>
<td>
<span data-extcoin="COIN" id="kmd_protocolversion"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.NOTARIZED')}</td>
<td>
<span data-extcoin="COIN" id="kmd_notarized"></span>
</td>
</tr>
<tr>
<td>
{translate('INDEX.NOTARIZED')} Hash
</td>
<td>
<span data-extcoin="COIN" id="kmd_notarizedhash"></span>
</td>
</tr>
<tr>
<td>
{translate('INDEX.NOTARIZED')} BTC
</td>
<td>
<span data-extcoin="COIN" id="kmd_notarizedbtc"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.BLOCKS')}</td>
<td>
<span data-extcoin="COIN" id="kmd_blocks"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.CONNECTIONS')}</td>
<td>
<span data-extcoin="COIN" id="kmd_connections"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.DIFFICULTY')}</td>
<td>
<span data-extcoin="COIN" id="kmd_difficulty"></span>
</td>
</tr>
<tr>
<td>Testnet</td>
<td>
<span data-extcoin="COIN" id="kmd_testnet"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.PAY_TX_FEE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_paytxfee"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.RELAY_FEE')}</td>
<td>
<span data-extcoin="COIN" id="kmd_relayfee"></span>
</td>
</tr>
<tr>
<td>{translate('INDEX.ERRORS')}</td>
<td>
<span data-extcoin="COIN" id="kmd_errors"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div className="modal fade modal-3d-sign" data-extcoin="COIN" id="kmd_txid_info_mdl" aria-hidden="false" role="dialog">
<div className="modal-dialog modal-center modal-lg">
<div className="modal-content">
<div className="modal-body">
<div className="panel nav-tabs-horizontal">
<ul className="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
<li className="active" role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab1" data-extcoin="COIN" aria-controls="KmdTxIDInfotab1" role="tab">
<i className="icon md-balance-wallet" aria-hidden="true"></i>TxID Info
</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab2" data-extcoin="COIN" aria-controls="KmdTxIDInfotab2" role="tab">
<i className="icon md-plus-square" aria-hidden="true"></i>vjointsplits, details
</a>
</li>
<li role="presentation">
<a data-toggle="tab" href="#KmdTxIDInfotab3" data-extcoin="COIN" aria-controls="KmdTxIDInfotab3" role="tab">
<i className="icon wb-briefcase" aria-hidden="true"></i>hex
</a>
</li>
</ul>
<div className="panel-body">
<div className="tab-content">
<div className="tab-pane active" id="KmdTxIDInfotab1" data-extcoin="COIN" role="tabpanel">
<table className="table table-striped">
<tbody>
<tr>
<td>amount</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_amount"></span>
</td>
</tr>
<tr>
<td>fee</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_fee"></span>
</td>
</tr>
<tr>
<td>confirmations</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_confirmations"></span>
</td>
</tr>
<tr>
<td>blockhash</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_blockhash"></span>
</td>
</tr>
<tr>
<td>blockindex</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_blockindex"></span>
</td>
</tr>
<tr>
<td>blocktime</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_blocktime"></span>
</td>
</tr>
<tr>
<td>txid</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_txid"></span>
</td>
</tr>
<tr>
<td>walletconflicts</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_walletconflicts"></span>
</td>
</tr>
<tr>
<td>time</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_time"></span>
</td>
</tr>
<tr>
<td>timereceived</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_timereceived"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div className="tab-pane" id="KmdTxIDInfotab2" data-extcoin="COIN" role="tabpanel">
<table className="table table-striped">
<tbody>
<tr>
<td>vjoinsplit</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_vjoinsplit"></span>
</td>
</tr>
<tr>
<td>details</td>
<td>
<span data-extcoin="COIN" id="kmd_txid_info_details"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div className="tab-pane" id="KmdTxIDInfotab3" data-extcoin="COIN" role="tabpanel">
<textarea id="kmd_txid_info_hex" data-extcoin="COIN" style={{width: '100%', height: '170px'}} rows="10" cols="80" disabled></textarea>
</div>
</div>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
}
}
}
export default WalletsNative;

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

@ -3,37 +3,41 @@ import { translate } from '../../translate/translate';
class WalletsProgress extends React.Component {
render() {
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'full') {
return (
<div id="edex-footer" data-edexcoin="COIN">
<div className="row no-space" data-edexcoin="COIN">
<div data-edexcoin="COIN" id="currency-progressbars">
<div className="progress progress-sm">
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '10%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-bundles">
<span data-lang="INDEX.BUNDLES"></span> <span data-edexcoin="COIN" id="currency-bundles-percent">0%</span>
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'full' && this.props.Dashboard.progress) {
if (this.props.Dashboard.progress && this.props.Dashboard.progress.error) {
return (<div style={{textAlign: 'center', padding: '10px'}}>Coin is busy processing</div>);
} else {
return (
<div id="edex-footer" data-edexcoin="COIN">
<div className="row no-space" data-edexcoin="COIN">
<div data-edexcoin="COIN" id="currency-progressbars">
<div className="progress progress-sm">
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: this.props.Dashboard.progress.bundles + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-bundles">
{translate('INDEX.BUNDLES')} <span data-edexcoin="COIN" id="currency-bundles-percent">{this.props.Dashboard.progress.bundles}%</span>
</div>
</div>
</div>
</div>
<div data-edexcoin="COIN" id="additional-progress-bars">
<div className="progress progress-sm">
<div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: '20%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-utxo">
utxo <span data-edexcoin="COIN" id="currency-utxo-percent">0%</span>
<div data-edexcoin="COIN" id="additional-progress-bars">
<div className="progress progress-sm">
<div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: this.props.Dashboard.progress.utxo + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-utxo">
utxo <span data-edexcoin="COIN" id="currency-utxo-percent">{this.props.Dashboard.progress.utxo}%</span>
</div>
</div>
</div>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-danger progress-bar-striped active" style={{width: '20%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-balances">
<span data-lang="INDEX.BALANCES"></span> <span data-edexcoin="COIN" id="currency-balances-percent">0%</span>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-danger progress-bar-striped active" style={{width: this.props.Dashboard.progress.balances + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-balances">
{translate('INDEX.BALANCES')} <span data-edexcoin="COIN" id="currency-balances-percent">{this.props.Dashboard.progress.balances}%</span>
</div>
</div>
</div>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-success progress-bar-striped active" style={{width: '20%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-validated">
<span data-lang="INDEX.VALIDATED"></span> <span data-edexcoin="COIN" id="currency-validated-percent">0%</span>
<div className="progress progress-sm">
<div className="progress-bar progress-bar-success progress-bar-striped active" style={{width: this.props.Dashboard.progress.validated + '%', fontSize: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-validated">
{translate('INDEX.VALIDATED')} <span data-edexcoin="COIN" id="currency-validated-percent">{this.props.Dashboard.progress.validated}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
}
} else {
return null;
}

7
react/src/reducers/activeCoin.js
View File

@ -3,7 +3,8 @@ import {
DASHBOARD_ACTIVE_COIN_BALANCE,
DASHBOARD_ACTIVE_COIN_SEND_FORM,
DASHBOARD_ACTIVE_COIN_RECEIVE_FORM,
DASHBOARD_ACTIVE_COIN_RESET_FORMS
DASHBOARD_ACTIVE_COIN_RESET_FORMS,
ACTIVE_COIN_GET_ADDRESSES
} from '../actions/actionCreators';
export function ActiveCoin(state = {
@ -38,6 +39,10 @@ export function ActiveCoin(state = {
send: false,
receive: false,
});
case ACTIVE_COIN_GET_ADDRESSES:
return Object.assign({}, state, {
addresses: action.addresses,
});
default:
return state;
}

31
react/src/reducers/dashboard.js
View File

@ -1,8 +1,17 @@
import { DASHBOARD_SECTION_CHANGE, GET_MAIN_ADDRESS } from '../actions/actionCreators';
import {
DASHBOARD_SECTION_CHANGE,
GET_MAIN_ADDRESS,
BASILISK_REFRESH,
SYNCING_FULL_MODE,
SYNCING_NATIVE_MODE,
BASILISK_CONNECTION
} from '../actions/actionCreators';
export function Dashboard(state = {
activeSection: 'wallets',
activeHandle: null,
basiliskRefresh: false,
basiliskConnection: false,
}, action) {
switch (action.type) {
case DASHBOARD_SECTION_CHANGE:
@ -13,6 +22,26 @@ export function Dashboard(state = {
return Object.assign({}, state, {
activeHandle: action.activeHandle,
});
case BASILISK_REFRESH:
return Object.assign({}, state, {
basiliskRefresh: action.basiliskRefresh,
progress: action.progress,
});
case BASILISK_CONNECTION:
return Object.assign({}, state, {
basiliskConnection: action.basiliskConnection,
progress: action.progress,
});
case SYNCING_FULL_MODE:
return Object.assign({}, state, {
syncingFullMode: action.syncingFullMode,
progress: action.progress,
});
case SYNCING_NATIVE_MODE:
return Object.assign({}, state, {
syncingNativeMode: action.syncingNativeMode,
progress: action.progress,
});
default:
return state;
}

2
react/src/reducers/index.js
View File

@ -8,6 +8,7 @@ import { Dashboard } from './dashboard';
import { ActiveCoin } from './activeCoin';
import { Atomic } from './atomic';
import { Settings } from './settings';
import { Interval } from './interval';
const rootReducer = combineReducers({
AddCoin,
@ -17,6 +18,7 @@ const rootReducer = combineReducers({
ActiveCoin,
Atomic,
Settings,
Interval,
routing: routerReducer,
});

26
react/src/reducers/interval.js
View File

@ -0,0 +1,26 @@
import { START_INTERVAL, STOP_INTERVAL } from '../actions/actionCreators'
export function Interval(state = {
interval: {},
}, action) {
switch (action.type) {
case START_INTERVAL:
var newIntervalState = Object.assign({}, state.interval);
newIntervalState[action.name] = action.handle;
return Object.assign({}, state, {
interval: newIntervalState,
});
case STOP_INTERVAL:
var newIntervalState = Object.assign({}, state.interval);
newIntervalState[action.name] = null;
return Object.assign({}, state, {
interval: newIntervalState,
});
default:
return state;
}
}
export default Interval;

5
react/src/styles/index.scss
View File

@ -76,6 +76,11 @@ body {
background: #f3f4f5;
}
#edexcoin_dashboardinfo a {
cursor: pointer;
cursor: hand;
}
/*.toaster .single-toast:nth-child(0) {
bottom: 12px;
}

Write Preview
Loading…
Cancel
Save