Browse Source

dashboard components #3

all-modes
pbca26 8 years ago
parent
commit
232de8a17f
  1. 132
      react/src/actions/actionCreators.js
  2. 40
      react/src/components/addcoin/payload.js
  3. 162
      react/src/components/dashboard/atomic.js
  4. 4
      react/src/components/dashboard/coinTile.js
  5. 20
      react/src/components/dashboard/coinTileItem.js
  6. 19
      react/src/components/dashboard/dashboard.js
  7. 4
      react/src/components/dashboard/navbar.js
  8. 173
      react/src/components/dashboard/sendCoin.js
  9. 18
      react/src/components/dashboard/walletsBalance.js
  10. 104
      react/src/components/dashboard/walletsData.js
  11. 2
      react/src/components/dashboard/walletsHeader.js
  12. 50
      react/src/components/dashboard/walletsNav.js
  13. 16
      react/src/components/dashboard/walletsProgress.js
  14. 2
      react/src/components/main/walletMain.js
  15. 12
      react/src/components/toaster/toaster.js
  16. 26
      react/src/reducers/activeCoin.js
  17. 7
      react/src/reducers/dashboard.js
  18. 20
      react/src/styles/index.scss
  19. 16
      react/src/util/copyToClipboard.js
  20. 4
      react/www/index.html

132
react/src/actions/actionCreators.js

@ -1,5 +1,6 @@
import 'whatwg-fetch'; import 'whatwg-fetch';
import { startCurrencyAssetChain } from '../components/addcoin/payload'; import { startCurrencyAssetChain } from '../components/addcoin/payload';
import { copyToClipboard } from '../util/copyToClipboard';
import { translate } from '../translate/translate'; import { translate } from '../translate/translate';
export const TOASTER_MESSAGE = 'TOASTER_MESSAGE'; export const TOASTER_MESSAGE = 'TOASTER_MESSAGE';
@ -9,6 +10,33 @@ export const LOGIN = 'LOGIN';
export const ACTIVE_HANDLE = 'ACTIVE_HANDLE'; export const ACTIVE_HANDLE = 'ACTIVE_HANDLE';
export const DASHBOARD_SECTION_CHANGE = 'DASHBOARD_SECTION_CHANGE'; export const DASHBOARD_SECTION_CHANGE = 'DASHBOARD_SECTION_CHANGE';
export const DASHBOARD_ACTIVE_COIN_CHANGE = 'DASHBOARD_ACTIVE_COIN_CHANGE'; export const DASHBOARD_ACTIVE_COIN_CHANGE = 'DASHBOARD_ACTIVE_COIN_CHANGE';
export const GET_MAIN_ADDRESS = 'GET_MAIN_ADDRESS';
export const DASHBOARD_ACTIVE_COIN_BALANCE = 'DASHBOARD_ACTIVE_COIN_BALANCE';
export const DASHBOARD_ACTIVE_COIN_SEND_FORM = 'DASHBOARD_ACTIVE_COIN_SEND_FORM';
export const DASHBOARD_ACTIVE_COIN_RECEIVE_FORM = 'DASHBOARD_ACTIVE_COIN_RECEIVE_FORM';
export const DASHBOARD_ACTIVE_COIN_RESET_FORMS = 'DASHBOARD_ACTIVE_COIN_RESET_FORMS';
function toggleSendCoinFormState(display) {
return {
type: DASHBOARD_ACTIVE_COIN_SEND_FORM,
send: display,
}
}
function toggleReceiveCoinFormState(display) {
return {
type: DASHBOARD_ACTIVE_COIN_SEND_FORM,
send: display,
}
}
function toggleSendReceiveCoinFormsState() {
return {
type: DASHBOARD_ACTIVE_COIN_RESET_FORMS,
send: false,
receive: false,
}
}
function triggerToaster(display, message, title, _type) { function triggerToaster(display, message, title, _type) {
return { return {
@ -55,6 +83,47 @@ function iguanaActiveHandleState(json) {
} }
} }
function getMainAddressState(json) {
return {
type: GET_MAIN_ADDRESS,
activeHandle: json,
}
}
export function toggleSendCoinForm(display) {
return dispatch => {
dispatch(toggleSendCoinFormState(display));
}
}
export function toggleReceiveCoinForm(display) {
return dispatch => {
dispatch(toggleReceiveCoinFormState(display));
}
}
export function toggleSendReceiveCoinForms() {
return dispatch => {
dispatch(toggleSendReceiveCoinFormsState());
}
}
function logoutState(json, dispatch) {
console.log('passp', json);
sessionStorage.removeItem('IguanaActiveAccount');
return {
type: LOGIN,
isLoggedIn: false,
}
}
export function logout() {
return dispatch => {
dispatch(logoutState());
}
}
function dashboardChangeSectionState(sectionName) { function dashboardChangeSectionState(sectionName) {
return { return {
type: DASHBOARD_SECTION_CHANGE, type: DASHBOARD_SECTION_CHANGE,
@ -68,16 +137,24 @@ export function dashboardChangeSection(sectionName) {
} }
} }
function dashboardChangeActiveCoinState(coin) { function dashboardChangeActiveCoinState(coin, mode) {
return { return {
type: DASHBOARD_SECTION_CHANGE, type: DASHBOARD_ACTIVE_COIN_CHANGE,
coin: coin, coin: coin,
mode: mode,
} }
} }
export function dashboardChangeActiveCoin(coin) { function iguanaEdexBalanceState(json) {
return {
type: DASHBOARD_ACTIVE_COIN_BALANCE,
balance: json && json.result ? json.result : 0,
}
}
export function dashboardChangeActiveCoin(coin, mode) {
return dispatch => { return dispatch => {
dispatch(dashboardChangeSectionState(coin)); dispatch(dashboardChangeActiveCoinState(coin, mode));
} }
} }
@ -87,6 +164,26 @@ export function toggleAddcoinModal(display, isLogin) {
} }
} }
export function copyCoinAddress(address) {
var _result = copyToClipboard(address);
if (_result) {
return dispatch => {
dispatch(triggerToaster(true, translate('DASHBOARD.ADDR_COPIED'), translate('TOASTR.COIN_NOTIFICATION'), 'success'))
}
} else {
return dispatch => {
dispatch(triggerToaster(true, 'Couldn\'t copy address to clipboard', translate('TOASTR.COIN_NOTIFICATION'), 'error'))
}
}
}
export function dismissToasterMessage() {
return dispatch => {
dispatch(triggerToaster(false))
}
}
export function addCoin(coin, mode) { export function addCoin(coin, mode) {
console.log('coin, mode', coin + ' ' + mode); console.log('coin, mode', coin + ' ' + mode);
return dispatch => { return dispatch => {
@ -149,10 +246,11 @@ export function addCoinResult(coin, mode) {
'0': 'basilisk', '0': 'basilisk',
'-1': 'native' '-1': 'native'
}; };
console.log('mode', mode);
return dispatch => { return dispatch => {
dispatch(triggerToaster(true, coin + ' ' + translate('TOASTR.STARTED_IN') + ' ' + modeToValue[mode] + ' ' + translate('TOASTR.MODE'), translate('TOASTR.COIN_NOTIFICATION'), 'success')); dispatch(triggerToaster(true, coin + ' ' + translate('TOASTR.STARTED_IN') + ' ' + modeToValue[mode] + ' ' + translate('TOASTR.MODE'), translate('TOASTR.COIN_NOTIFICATION'), 'success'));
dispatch(toggleAddcoinModal(false, false));
dispatch(getDexCoins());
} }
} }
@ -226,7 +324,7 @@ export function iguanaWalletPassphrase(_passphrase) {
} }
} }
export function iguanaActiveHandle() { export function iguanaActiveHandle(getMainAddress) {
return dispatch => { return dispatch => {
return fetch('http://127.0.0.1:7778', { return fetch('http://127.0.0.1:7778', {
method: 'POST', method: 'POST',
@ -241,7 +339,27 @@ export function iguanaActiveHandle() {
dispatch(triggerToaster(true, 'Error iguanaActiveHandle', 'Error', 'error')) dispatch(triggerToaster(true, 'Error iguanaActiveHandle', 'Error', 'error'))
}) })
.then(response => response.json()) .then(response => response.json())
.then(json => dispatch(iguanaActiveHandleState(json))); .then(json => dispatch(getMainAddress ? getMainAddressState(json) : iguanaActiveHandleState(json)));
}
}
export function iguanaEdexBalance(coin) {
return dispatch => {
return fetch('http://127.0.0.1:7778', {
method: 'POST',
body: JSON.stringify({
'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
'agent': 'bitcoinrpc',
'method': 'getbalance',
'coin': coin
}),
})
.catch(function(error) {
console.log(error);
dispatch(triggerToaster(true, 'Error iguanaEdexBalance', 'Error', 'error'))
})
.then(response => response.json())
.then(json => dispatch(iguanaEdexBalanceState(json)));
} }
} }

40
react/src/components/addcoin/payload.js

@ -1,4 +1,4 @@
function checkCoinType(coin) { export function checkCoinType(coin) {
if (coin === 'USD' || if (coin === 'USD' ||
coin === 'RON' || coin === 'RON' ||
coin === 'RUB' || coin === 'RUB' ||
@ -59,7 +59,6 @@ export function startCurrencyAssetChain(confpath, coin, mode) {
var tmpPendValue = 4; var tmpPendValue = 4;
var tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'); var tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth');
if ( checkCoinType(coin) === 'currency_ac' ) {
var _payloadVar = { var _payloadVar = {
'userpass': tmpIguanaRPCAuth, 'userpass': tmpIguanaRPCAuth,
'unitval': '20', 'unitval': '20',
@ -96,42 +95,6 @@ export function startCurrencyAssetChain(confpath, coin, mode) {
'seedipaddr': '78.47.196.146' 'seedipaddr': '78.47.196.146'
}; };
/*if ( mode == '-1' ) {
console.log('native');
logincoinmodeinfo = 'Native';
var confpath = Shepherd_getConf(coin);
console.log(confpath[0].path);
var setconfig = function() {
return new Promise(function(resolve, reject) {
Shepherd_setConf(coin);
var result = 'setconfig: DONE';
console.log(result);
resolve(result);
});
}
var startcoin = function() {
return new Promise(function(resolve, reject) {
Shepherd_herd('komodod', {
'ac_name': coin,
'ac_options': [
'-daemon=0',
'-server',
'-ac_name=' + coin,
'-addnode=78.47.196.146'
]
});
var result = 'startcoin: DONE';
console.log(result);
resolve(result);
});
}
startcoin();*/
//var AddCoinData = AddCoinDataPayload[coin + 'Var'];
if (mode === '-1') { if (mode === '-1') {
var _payloadVarRegular = Object.assign({}, _payloadVar); var _payloadVarRegular = Object.assign({}, _payloadVar);
delete _payloadVarRegular.userpass; delete _payloadVarRegular.userpass;
@ -549,4 +512,3 @@ export function startCurrencyAssetChain(confpath, coin, mode) {
return AddCoinDataPayload[coin + 'Var']; return AddCoinDataPayload[coin + 'Var'];
} }
} }
}

162
react/src/components/dashboard/atomic.js

@ -0,0 +1,162 @@
import React from 'react';
import { translate } from '../../translate/translate';
/*import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators';
import Store from '../../store';*/
class Atomic extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
<div className="page-content" id="section-iguana-atomic-explorer">
<div className="row" id="atomic-explorer" data-plugin="masonry">
<div className="col-xlg-12 col-md-12">
<h4 className="font-size-14 text-uppercase">Atomic Explorer</h4>
<div className="panel panel-bordered">
<div className="panel-body">
<div className="col-sm-4 col-xs-12">
<div className="form-group">
<select className="form-control form-material" id="atomic_explorer_select_coin_options">
<option value="-">{translate('INDEX.SELECT_COIN')}</option>
<optgroup label="Crypto Currencies">
<option value="ANC|full" data-full-mode="true">AnonCoin (ANC)</option>
<option value="BTC|full|basilisk">Bitcoin (BTC)</option>
<option value="BTCD|full">BitcoinDark (BTCD)</option>
<option value="BTM|full">Bitmark (BTM)</option>
<option value="CARB|full">Carboncoin (CARB)</option>
<option value="DGB|full">Digibyte (DGB)</option>
<option value="DOGE|full">Dogecoin (DOGE)</option>
<option value="FRK|full">Franko (FRK)</option>
<option value="GMC|full">Gamerscoin (GMC)</option>
<option value="KMD|basilisk|native">Komodo (KMD)</option>
<option value="LTC|full">Litecoin (LTC)</option>
<option value="MZC|full">MazaCoin (MZC)</option>
<option value="SYS|full">SysCoin (SYS)</option>
<option value="UNO|full">Unobtanium (UNO)</option>
<option value="ZEC|full">Zcash (ZEC)</option>
<option value="ZET|full">Zetacoin (ZET)</option>
</optgroup>
<optgroup label="Assetchains">
<option value="BET|basilisk|native">BET (BET)</option>
<option value="BOTS|basilisk|native">BOTS (BOTS)</option>
<option value="CEAL|basilisk|native">CEAL NET (CEAL)</option>
<option value="CRYPTO|basilisk|native">CRYPTO (CRYPTO)</option>
<option value="HOD|basilisk|native">HODL (HODL)</option>
<option value="DEX|basilisk|native">InstantDEX (DEX)</option>
<option value="JUMBLR|basilisk|native">JUMBLR (JUMBLR)</option>
<option value="KV|basilisk|native">KV (KV)</option>
<option value="MGW|basilisk|native">MultiGateway (MGW)</option>
<option value="MVP|basilisk|native">MVP Lineup (MVP)</option>
<option value="PANGEA|basilisk|native">PANGEA (PANGEA)</option>
<option value="REVS|basilisk|native">REVS (REVS)</option>
<option value="SHARK|basilisk|native">SHARK (SHARK)</option>
<option value="MESH|basilisk|native">SpaceMesh (MESH)</option>
<option value="SUPERNET|basilisk|native">SUPERNET (SUPERNET)</option>
<option value="WIRELESS|basilisk|native">WIRELESS (WIRELESS)</option>
</optgroup>
<optgroup label="Fiat Currencies">
<option value="AUD|basilisk|native">Australian Dollar (AUD)</option>
<option value="BRL|basilisk|native">Brazilian Real (BRL)</option>
<option value="GBP|basilisk|native">British Pound (GBP)</option>
<option value="BGN|basilisk|native">Bulgarian Lev (BGN)</option>
<option value="CAD|basilisk|native">Canadian Dollar (CAD)</option>
<option value="HRK|basilisk|native">Croatian Kuna (HRK)</option>
<option value="CZK|basilisk|native">Czech Koruna (CZK)</option>
<option value="CNY|basilisk|native">Chinese Yuan (CNY)</option>
<option value="DKK|basilisk|native">Danish Krone (DKK)</option>
<option value="EUR|basilisk|native">Euro (EUR)</option>
<option value="HKD|basilisk|native">Hong Kong Dollar (HKD)</option>
<option value="HUF|basilisk|native">Hungarian Forint (HUF)</option>
<option value="INR|basilisk|native">Indian Rupee (INR)</option>
<option value="IDR|basilisk|native">Indonesian Rupiah (IDR)</option>
<option value="ILS|basilisk|native">Israeli Shekel (ILS)</option>
<option value="JPY|basilisk|native">Japanese Yen (JPY)</option>
<option value="KRW|basilisk|native">Korean Won (KRW)</option>
<option value="MYR|basilisk|native">Malaysian Ringgit (MYR)</option>
<option value="MXN|basilisk|native">Mexican peso (MXN)</option>
<option value="NZD|basilisk|native">New Zealand Dollar (NZD)</option>
<option value="NOK|basilisk|native">Norwegian Krone (NOK)</option>
<option value="PHP|basilisk|native">Philippine Peso (PHP)</option>
<option value="PLN|basilisk|native">Polish Zloty (PLN)</option>
<option value="RON|basilisk|native">Romanian Leu (RON)</option>
<option value="RUB|basilisk|native">Russian Ruble (RUB)</option>
<option value="SGD|basilisk|native">Singapore Dollar (SGD)</option>
<option value="ZAR|basilisk|native">South African Rand (ZAR)</option>
<option value="SEK|basilisk|native">Swedish Krona (SEK)</option>
<option value="CHF|basilisk|native">Swiss Franc (CHF)</option>
<option value="THB|basilisk|native">Thai Baht (THB)</option>
<option value="TRY|basilisk|native">Turkish Lira (TRY)</option>
<option value="USD|basilisk|native">US Dollar (USD)</option>
</optgroup>
</select>
</div>
</div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}>
<select className="form-control form-material" id="atomic_explorer_select_command_options">
<option value="">-Select Command-</option>
<option value="history">Address History</option>
<option value="getbalance">Get Balance</option>
<option value="listunspent">List Unspent</option>
<option value="txid">Transaction ID</option>
<option value="blockash">Block Hash</option>
<option value="chaintip">Chain Tip</option>
<option value="activehandle">Active Handle</option>
<option value="gettransaction">Get Transaction</option>
<option value="dex_alladdresses">DEX All Addresses</option>
<option value="dex_importaddress">DEX Import Address</option>
<option value="dex_checkaddress">DEX Check Address</option>
<option value="dex_validateaddress">DEX Validate Address</option>
<option value="dex_getinfo">DEX Get Info</option>
<option value="dex_getnotaries">DEX Get Notaries</option>
<option value="dex_getbestblockhash">DEX Get Best Block Hash</option>
<option value="dex_getblockhash">DEX Get Block Hash</option>
<option value="dex_getblock">DEX Get Block</option>
<option value="dex_gettxin">DEX Get txin</option>
<option value="dex_gettxout">DEX Get txout</option>
<option value="dex_gettransaction">DEX Get Transaction</option>
<option value="dex_getbalance">DEX Get Balance</option>
<option value="dex_getsupply">DEX Get Supply</option>
<option value="dex_listtransactions">DEX List Transactions</option>
<option value="dex_listtransactions2">DEX List Transactions 2</option>
<option value="dex_listspent">DEX List Spent</option>
<option value="dex_listunspent">DEX List Unspent</option>
<option value="dex_listunspent2">DEX List Unspent 2</option>
<option value="dex_sendrawtransaction">DEX Send Raw Transaction</option>
<option value="basilisk_refresh">Basilisk Refresh</option>
<option value="jumblr_status">Jumbler Status</option>
</select>
</div>
<div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}>
<input type="text" className="form-control" id="atomic_explorer_input_data" name="atomic_explorer_input_data" placeholder="addr, txid, blockash etc." />
</div>
<div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}>
<button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="atomic_explorer_getcoinpeers_btn">Submit</button>
</div>
</div>
</div>
</div>
<div className="col-xlg-4 col-md-12">
<div className="panel">
<div className="panel-heading">
<h3 className="panel-title">Raw Output</h3>
</div>
<div className="panel-body">
<div className="tab-content">
<pre id="atomic-explorer-commands-output"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Atomic;

4
react/src/components/dashboard/coinTile.js

@ -340,7 +340,7 @@ class CoinTile extends React.Component {
return ( return (
items.map((item, i) => items.map((item, i) =>
<CoinTileItem key={i} i={i} item={item} />) <CoinTileItem key={i} i={i} item={item} {...this.props} />)
); );
} }
@ -362,7 +362,7 @@ class CoinTile extends React.Component {
<input type="text" className="form-control" name="" placeholder="Search..." disabled /> <input type="text" className="form-control" name="" placeholder="Search..." disabled />
</div> </div>
</div> </div>
<h3 className="panel-title" data-lang="INDEX.ACTIVE_COINS"></h3> <h3 className="panel-title">{translate('INDEX.ACTIVE_COINS')}</h3>
</div> </div>
</div> </div>
<div className="wallet-widgets-list" data-plugin="pageAsideScroll"> <div className="wallet-widgets-list" data-plugin="pageAsideScroll">

20
react/src/components/dashboard/coinTileItem.js

@ -1,19 +1,29 @@
import React from 'react'; import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import { dashboardChangeSection, toggleAddcoinModal } from '../../actions/actionCreators'; import { dashboardChangeActiveCoin, iguanaActiveHandle } from '../../actions/actionCreators';
import Store from '../../store'; import Store from '../../store';
class CoinTileItem extends React.Component { class CoinTileItem extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
dashboardChangeActiveCoin(coin, mode) {
Store.dispatch(dashboardChangeActiveCoin(coin, mode));
Store.dispatch(iguanaActiveHandle(true));
}
render() { render() {
const { item } = this.props; const { item } = this.props;
return ( return (
<div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info" data-edexcoincode="{item.coin}"> <div className="list-group-item col-xlg-6 col-lg-12 wallet-widgets-info" data-edexcoincode="{item.coin}">
<div className="widget widget-shadow"> <div className={this.props.ActiveCoin.coin === item.coin ? 'widget widget-shadow active' : 'widget widget-shadow'}>
<div className="widget-content text-center bg-white padding-20 edexcoin-logo" data-edexcoincode="{item.coin}" data-edexcoinmodecode="{item.modecode}" data-edexcoinname="{item.coinname}" onClick={this.switchActiveCoin}> <div className="widget-content text-center bg-white padding-20 edexcoin-logo" data-edexcoincode="{item.coin}" data-edexcoinmodecode="{item.modecode}" data-edexcoinname="{item.coinname}" onClick={() => this.dashboardChangeActiveCoin(item.coin, item.mode)}>
<a className="avatar margin-bottom-5" href="javascript:void(0)" id="edexcoin-logo"> <a className="avatar margin-bottom-5" href="javascript:void(0)" id="edexcoin-logo">
<img className="img-responsive" src={'assets/images/cryptologo/' + item.coinlogo + '.png'} alt="{item.coinname}"/> <img className="img-responsive" src={'assets/images/cryptologo/' + item.coinlogo + '.png'} alt="{item.coinname}"/>
<span className="badge up badge-{item.modecolor}" id="basfull" data-edexcoincode="{item.coin}" data-toggle="tooltip" data-placement="top" data-original-title="{item.modetip}">{item.modecode}</span> <span className={'badge up badge-' + item.modecolor} id="basfull" data-edexcoincode="{item.coin}" data-toggle="tooltip" data-placement="top" data-original-title="{item.modetip}">{item.modecode}</span>
</a> </a>
<div className="coin-name">{item.coinname} ({item.coinlogo})</div> <div className="coin-name">{item.coinname} ({item.coinlogo})</div>
</div> </div>

19
react/src/components/dashboard/dashboard.js

@ -4,6 +4,11 @@ import CoinTile from './coinTile';
import EDEX from './edex'; import EDEX from './edex';
import WalletsBalance from './walletsBalance'; import WalletsBalance from './walletsBalance';
import WalletsHeader from './walletsHeader'; import WalletsHeader from './walletsHeader';
import WalletsProgress from './walletsProgress';
import WalletsNav from './walletsNav';
import SendCoin from './sendCoin';
import WalletsData from './walletsData';
import Atomic from './atomic';
class Dashboard extends React.Component { class Dashboard extends React.Component {
constructor(props) { constructor(props) {
@ -15,18 +20,26 @@ class Dashboard extends React.Component {
renderDashboard() { renderDashboard() {
document.body.className = 'page-login'; document.body.className = 'page-login';
// <WalletsHeader {...this.props.ActiveCoin} />
return ( return (
<div> <div style={{height: '100%'}}>
<div className={this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : ''} id="section-dashboard" data-edexcoin="COIN">
<Navbar {...this.props} /> <Navbar {...this.props} />
<div className={this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide'}> <div className={this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide'}>
<CoinTile {...this.props} /> <CoinTile {...this.props} />
<WalletsNav {...this.props} />
<WalletsProgress {...this.props} />
<WalletsBalance {...this.props.ActiveCoin} /> <WalletsBalance {...this.props.ActiveCoin} />
<WalletsHeader {...this.props.ActiveCoin} /> <SendCoin {...this.props.ActiveCoin} />
<WalletsData {...this.props.ActiveCoin} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}> <div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}>
<EDEX {...this.props} /> <EDEX {...this.props} />
</div> </div>
<div className={this.props.Dashboard.activeSection === 'atomic' ? 'show' : 'hide'}>
<Atomic {...this.props} />
</div>
</div>
</div> </div>
); );
} }

4
react/src/components/dashboard/navbar.js

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import { dashboardChangeSection, toggleAddcoinModal } from '../../actions/actionCreators'; import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators';
import Store from '../../store'; import Store from '../../store';
class Navbar extends React.Component { class Navbar extends React.Component {
@ -28,7 +28,7 @@ class Navbar extends React.Component {
} }
logout() { logout() {
// logout Store.dispatch(logout());
} }
render() { render() {

173
react/src/components/dashboard/sendCoin.js

@ -0,0 +1,173 @@
import React from 'react';
import { translate } from '../../translate/translate';
//import { } from '../../actions/actionCreators';
//import Store from '../../store';
// TODO: implement logic
class SendCoin extends React.Component {
constructor(props) {
super(props);
this.state = {
currentStep: 0,
};
}
changeSendCoinStep(step) {
this.setState(Object.assign({}, this.state, {
currentStep: step,
}));
}
render() {
console.log('sendcoin', this.props);
if (this.props && this.props.send) {
return (
<div className="col-sm-12 padding-top-10" data-edexcoin="COIN" id="edexcoin_send">
<div className="col-xlg-12 col-md-12 col-sm-12 col-xs-12">
<div className="steps row" style={{marginTop: '10px'}}>
<div className={this.state.currentStep === 0 ? 'step col-md-4 current' : 'step col-md-4'} id="edexcoin_send_step_1">
<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'} id="edexcoin_send_step_2">
<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'} id="edexcoin_send_step_3">
<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'} id="edexcoin-send-screen">
<div className="panel-heading">
<h3 data-edexcoin="COIN" className="panel-title">
{translate('INDEX.SEND')} <span data-edexcoin="COIN"></span>
</h3>
<div className="panel-actions">
<a href="javascript:void(0)" className="dropdown-toggle white btn-xs btn-info btn_refresh_edexcoin_send" data-edexcoin="COIN" aria-expanded="false" role="button">
<i className="icon fa-refresh margin-right-10" aria-hidden="true"></i> {translate('INDEX.REFRESH_FUNDS')}
</a>
</div>
</div>
<div className="panel-body container-fluid">
<form className="edexcoin-send-form" data-edexcoin="COIN" method="post" role="form" autoComplete="off">
<div className="row">
<div className="col-xlg-12 form-group form-material edexcoin_send_from_for_basilisk">
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_send_from">{translate('INDEX.SEND_FROM')}</label>
<select className="form-control form-material showedexcoinaddrs show-tick" data-edexcoin="COIN" id="edexcoin_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-edexcoin="COIN" htmlFor="edexcoin_sendto">{translate('INDEX.SEND_TO')}</label>
<input type="text" className="form-control" data-edexcoin="COIN" id="edexcoin_sendto" name="edexcoin_sendto" placeholder="Enter address" autoComplete="off" required />
</div>
<div className="col-lg-6 form-group form-material">
<label className="control-label" htmlFor="edexcoin_amount" data-edexcoin="COIN" id="edexcoin_amount_label">
<span data-edexcoin="COIN"></span>
</label>
<input type="text" className="form-control" data-edexcoin="COIN" id="edexcoin_amount" name="edexcoin_amount" placeholder="0.000" autoComplete="off" />
</div>
<div className="col-lg-6 form-group form-material">
<label className="control-label" data-edexcoin="COIN" htmlFor="edexcoin_fee">{translate('INDEX.FEE')}</label>
<input type="text" className="form-control" data-edexcoin="COIN" id="edexcoin_fee" name="edexcoin_fee" placeholder="0.000" autoComplete="off" />
</div>
<div className="col-lg-12">
<span data-edexcoin="KMD">
<b>{translate('INDEX.TOTAL')} (<span data-edexcoin="COIN">{translate('INDEX.AMOUNT_SM')}</span> - txfee):</b> <span data-edexcoin="COIN" id="edexcoin_total_value">0.000</span> <span data-edexcoin="COIN" id="edexcoin_total_coinname" data-edexcoin="COIN"></span>
</span>
</div>
<div className="col-lg-10 margin-top-10">
<div className="pull-left margin-right-10">
<input type="checkbox" id="edexcoin_send_sig" name="edexcoin_send_sig" data-plugin="switchery" data-size="small" />
</div>
<label className="padding-top-3" htmlFor="edexcoin_send_sig">{translate('INDEX.DONT_SEND')}</label>
</div>
<div className="col-lg-2">
<button type="button" className="btn btn-primary waves-effect waves-light pull-right edexcoin_send_coins_btn_step1" onClick={() => this.changeSendCoinStep(1)}>
{translate('INDEX.SEND')} <span data-edexcoin="COIN"></span>
</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" id="edexcoin-send-confirm-screen">
<div className="panel-body">
<div className="row">
<div className="col-xs-12">
<b>{translate('INDEX.TO')}</b>
</div>
<div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendto_addr">[coin-address-goes-here]</div>
<div className="col-lg-6 col-sm-6 col-xs-6">
<span id="mdl_confirm_currency_send_amount">0.00000000</span> <span id="mdl_confirm_currency_coinname">[COIN]</span>
</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">
<span id="mdl_confirm_currency_send_fee">0.00000000</span> <span id="mdl_confirm_currency_coinname_fee">[COIN]</span>
</div>
</div>
<br />
<div className="row">
<div className="col-xs-12">
<b>{translate('INDEX.FROM')}</b>
</div>
<div className="col-lg-6 col-sm-6 col-xs-12" id="mdl_confirm_currency_sendfrom_addr">[coin-address-goes-here]</div>
<div className="col-lg-6 col-sm-6 col-xs-6" style={{color: '#f44336'}}>
<span id="mdl_confirm_currency_sendfrom_total_dedcut">-0.00000000</span> <span id="mdl_confirm_currency_coinname_total">[COIN]</span>
</div>
</div>
<div className="widget-body-footer">
<a className="btn btn-default waves-effect waves-light" id="edexcoin_send_coins_back_btn" onClick={() => this.changeSendCoinStep(0)}>{translate('INDEX.BACK')}</a>
<div className="widget-actions pull-right">
<button type="button" className="btn btn-primary" id="edexcoin_send_coins_btn" 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" id="edexcoin-send-txdetails-screen">
<div className="panel-heading">
<h4 className="panel-title">{translate('INDEX.TRANSACTION_RESULT')}</h4>
<table className="table table-hover table-striped edexcoin_sendto_result" data-edexcoin="COIN" id="edexcoin_sendto_result">
<thead>
<tr>
<th>{translate('INDEX.KEY')}</th>
<th>{translate('INDEX.INFO')}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div className="widget-body-footer">
<div className="widget-actions margin-bottom-15 margin-right-15">
<button type="button" className="btn btn-primary" id="edexcoin_send_coins_anothertx_btn" onClick={() => this.changeSendCoinStep(0)}>{translate('INDEX.MAKE_ANOTHER_TX')}</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
}
}
}
export default SendCoin;

18
react/src/components/dashboard/walletsBalance.js

@ -7,25 +7,25 @@ class WalletsBalance extends React.Component {
return ( return (
<div id="wallet-widgets" data-plugin="masonry" data-edexcoin="COIN"> <div id="wallet-widgets" data-plugin="masonry" data-edexcoin="COIN">
<div className="col-xs-12"> <div className="col-xs-12">
<div className="col-xs-12"> <div className={this.props.coin.mode === 'native' || this.props.coin.mode === 'full' ? 'col-xs-12' : 'col-xs-12 hide'}>
<div role="alert" className="alert alert-info alert-dismissible" data-edexcoin="COIN" id="edexcoin-wallet-waitingrt-alert"> <div role="alert" className="alert alert-info alert-dismissible" data-edexcoin="COIN" id="edexcoin-wallet-waitingrt-alert">
<button aria-label="Close" data-dismiss="alert" className="close" type="button"> <button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<h4>{translate('INDEX.ACTIVATING_WALLET_RT')}</h4> <h4>{translate('INDEX.ACTIVATING_WALLET_RT')}</h4>
<p data-edexcoin="COIN" id="edexcoin-wallet-waitingrt-alert-text">{translate('INDEX.IGUANA_FULL_MODE_SYNC_P1')}</p> <p data-edexcoin="COIN" id="edexcoin-wallet-waitingrt-alert-text">{translate('INDEX.IGUANA_FULL_MODE_SYNC_P1')}</p>
<p data-lang="INDEX.IGUANA_FULL_MODE_SYNC_P2"></p> <p>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P2')}</p>
<p data-lang="INDEX.IGUANA_FULL_MODE_SYNC_P3" style={{fontWeight: '600'}}></p> <p style={{fontWeight: '600'}}>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p>
</div> </div>
<div role="alert" className="alert alert-info alert-dismissible" data-edexcoin="COIN" id="edexcoin-wallet-waitingcache-alert"> <div role="alert" className="alert alert-info alert-dismissible" data-edexcoin="COIN" id="edexcoin-wallet-waitingcache-alert">
<button aria-label="Close" data-dismiss="alert" className="close" type="button"> <button aria-label="Close" data-dismiss="alert" className="close" type="button">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
<h4 data-lang="INDEX.FETCHING_COIN_DATA"></h4> <h4>{translate('INDEX.FETCHING_COIN_DATA')}</h4>
<p data-edexcoin="COIN" id="edexcoin-wallet-waitingcache-alert-text">{translate('INDEX.IGUANA_FULL_MODE_SYNC_P1')}</p> <p data-edexcoin="COIN" id="edexcoin-wallet-waitingcache-alert-text">{translate('INDEX.IGUANA_FULL_MODE_SYNC_P1')}</p>
<p data-lang="INDEX.IGUANA_FULL_MODE_SYNC_P2"></p> <p>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P2')}</p>
<p data-lang="INDEX.IGUANA_FULL_MODE_SYNC_P3" style={{fontWeight: '600'}}></p> <p style={{fontWeight: '600'}}>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p>
</div> </div>
</div> </div>
<div className="col-lg-12 col-xs-12" data-edexcoin="COIN" id="edexcoin_getbalance_t"> <div className="col-lg-12 col-xs-12" data-edexcoin="COIN" id="edexcoin_getbalance_t">
@ -37,7 +37,7 @@ class WalletsBalance extends React.Component {
<i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{translate('INDEX.BALANCE')} <i className="icon fa-eye font-size-24 vertical-align-bottom margin-right-5"></i>{translate('INDEX.BALANCE')}
</div> </div>
<span className="pull-right padding-top-10" data-edexcoin="COIN" style={{fontSize: '22px'}}> <span className="pull-right padding-top-10" data-edexcoin="COIN" style={{fontSize: '22px'}}>
<span data-edexcoin="COIN" id="edex_total_balance"></span> <span data-edexcoin="COIN" id="edex_total_balance_coincode"></span> <span data-edexcoin="COIN" id="edex_total_balance"></span> <span data-edexcoin="COIN" id="edex_total_balance_coincode">{this.props && this.props.ActiveCoin && this.props.ActiveCoin.balance ? this.props.ActiveCoin.balance : 0}</span>
</span> </span>
</div> </div>
</div> </div>
@ -45,7 +45,7 @@ class WalletsBalance extends React.Component {
</div> </div>
</div> </div>
<div className="col-lg-4 col-xs-12" data-edexcoin="COIN" id="edexcoin_getbalance_interest"> <div className={this.props.coin.mode === 'native' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide'} data-edexcoin="COIN" id="edexcoin_getbalance_interest">
<div className="widget widget-shadow" id="widgetLineareaOne"> <div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content"> <div className="widget-content">
<div className="padding-20 padding-top-10"> <div className="padding-20 padding-top-10">
@ -62,7 +62,7 @@ class WalletsBalance extends React.Component {
</div> </div>
</div> </div>
<div className="col-lg-4 col-xs-12" data-edexcoin="COIN" id="edexcoin_getbalance_total_interest"> <div className={this.props.coin.mode === 'native' ? 'col-lg-4 col-xs-12' : 'col-lg-4 col-xs-12 hide'} data-edexcoin="COIN" id="edexcoin_getbalance_total_interest">
<div className="widget widget-shadow" id="widgetLineareaOne"> <div className="widget widget-shadow" id="widgetLineareaOne">
<div className="widget-content"> <div className="widget-content">
<div className="padding-20 padding-top-10"> <div className="padding-20 padding-top-10">

104
react/src/components/dashboard/walletsData.js

@ -0,0 +1,104 @@
import React from 'react';
import { translate } from '../../translate/translate';
/*import { } from '../../actions/actionCreators';
import Store from '../../store';*/
class WalletsData extends React.Component {
constructor(props) {
super(props);
this.state = {
basiliskActionsMenu: false,
};
this.toggleBasiliskActionsMenu = this.toggleBasiliskActionsMenu.bind(this);
}
toggleBasiliskActionsMenu() {
this.setState(Object.assign({}, this.state, {
basiliskActionsMenu: !this.state.basiliskActionsMenu,
}));
}
render() {
if (this.props && this.props.coin) {
return (
<div data-edexcoin="COIN" id="edexcoin_dashboardinfo">
<div className="col-xs-12 margin-top-20">
<div className="panel nav-tabs-horizontal">
<div data-edexcoin="COIN" id="edexcoin_dashoard_section">
<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">
<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>
<div className={this.state.basiliskActionsMenu ? 'dropdown open' : 'dropdown'} onClick={this.toggleBasiliskActionsMenu}>
<a className="dropdown-toggle btn-xs btn-default" data-edexcoin="COIN" id="btn_edexcoin_basilisk" data-toggle="dropdown" href="javascript:void(0)"
aria-expanded="false" role="button">
<i className="icon fa-magic margin-right-10" aria-hidden="true"></i> {translate('INDEX.BASILISK_ACTIONS')} <span className="caret"></span>
</a>
<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">
<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">
<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">
<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">
<i className="icon fa-cloud-download" aria-hidden="true"></i> {translate('INDEX.REFETCH_WALLET_DATA')}
</a>
</li>
</ul>
</div>
</div>
<h4 className="panel-title">{translate('INDEX.TRANSACTION_HISTORY')}</h4>
</header>
<div className="panel-body">
<table className="table table-hover dataTable table-striped" data-edexcoin="COIN" id="edex-tx-history-tbl" 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>{translate('INDEX.DEST_ADDRESS')}</th>
<th className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th>
</tr>
</thead>
<tfoot>
<tr>
<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 className="hidden-xs hidden-sm">{translate('INDEX.TX_DETAIL')}</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
} else {
return null;
}
}
}
export default WalletsData;

2
react/src/components/dashboard/walletsHeader.js

@ -19,7 +19,7 @@ class WalletsHeader extends React.Component {
</button> </button>
<ul className="dropdown-menu animate dropdown-menu-right" aria-labelledby="easydex_kmd_wallet_actions_header" role="menu"> <ul className="dropdown-menu animate dropdown-menu-right" aria-labelledby="easydex_kmd_wallet_actions_header" role="menu">
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_dashboard" data-lang="INDEX.DASHBOARD">{translate('INDEX.DASHBOARD')}</a> <a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_dashboard">{translate('INDEX.DASHBOARD')}</a>
</li> </li>
<li role="presentation"> <li role="presentation">
<a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_send">{translate('INDEX.SEND')}</a> <a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_send">{translate('INDEX.SEND')}</a>

50
react/src/components/dashboard/walletsNav.js

@ -1,21 +1,36 @@
import React from 'react'; import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import { copyCoinAddress, iguanaEdexBalance, toggleSendCoinForm, toggleReceiveCoinForm, toggleSendReceiveCoinForms } from '../../actions/actionCreators';
import Store from '../../store';
class WalletsNav extends React.Component { class WalletsNav extends React.Component {
constructor(props) {
super(props);
this.toggleSendReceiveCoinForms = this.toggleSendReceiveCoinForms.bind(this);
}
componentWillMount() {
Store.dispatch(iguanaEdexBalance(this.props.ActiveCoin.coin));
}
copyMyAddress(address) {
Store.dispatch(copyCoinAddress(address));
}
toggleSendReceiveCoinForms() {
Store.dispatch(toggleSendReceiveCoinForms());
}
toggleSendCoinForm(display) {
console.log(display);
Store.dispatch(toggleSendCoinForm(display));
}
render() { render() {
if (this.props && this.props.ActiveCoin && !this.props.ActiveCoin.coin) {
return ( return (
<div className="page-main" id="section-dashboard" data-edexcoin="COIN"> <div>
<div className="col-xs-12 padding-top-20" id="no_wallet_selected"> <div className="col-xs-12 padding-top-20" id="no_wallet_selected">
<div className="alert alert-danger alert-dismissible agamainfo_alert" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close">
</button>
<span style={{fontSize: '24px', textAlign: 'center'}}>
<i className="icon fa-exclamation-triangle" aria-hidden="true"></i> <span className="agamainfo_msgtitle">Custom Title</span>
</span>
<br/>
<span className="agamainfo_msg">Custom Message</span>.
</div>
<div className="alert alert-info alert-dismissible" role="alert"> <div className="alert alert-info alert-dismissible" role="alert">
<button type="button" className="close" data-dismiss="alert" aria-label="Close"> <button type="button" className="close" data-dismiss="alert" aria-label="Close">
</button> </button>
@ -26,16 +41,21 @@ class WalletsNav extends React.Component {
{translate('INDEX.PLEASE_SELECT_A_WALLET')}. {translate('INDEX.PLEASE_SELECT_A_WALLET')}.
</div> </div>
</div> </div>
</div>
);
} else {
return (
<div>
<div className="page-header page-header-bordered header-easydex" id="header-dashboard" data-edexcoin="COIN"> <div className="page-header page-header-bordered header-easydex" id="header-dashboard" data-edexcoin="COIN">
<ol className="breadcrumb" data-edexcoin="COIN"> <ol className="breadcrumb" data-edexcoin="COIN">
<b>{translate('INDEX.MY')} <span data-edexcoin="COIN" id="edexcoin-active">-</span> {translate('INDEX.ADDRESS')}: </b> <span data-edexcoin="COIN" id="edexcoin_active_addr">-</span> <button className="btn btn-default btn-xs clipboard-edexaddr" data-edexcoin="COIN" id="edexcoin_active_addr_clipboard" data-clipboard-text=""><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button> <b>{translate('INDEX.MY')} <span data-edexcoin="COIN" id="edexcoin-active">{this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-'}</span> {translate('INDEX.ADDRESS')}: </b> <span data-edexcoin="COIN" id="edexcoin_active_addr">{this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-'}</span> <button className="btn btn-default btn-xs clipboard-edexaddr" data-edexcoin="COIN" id="edexcoin_active_addr_clipboard" data-clipboard-text="" onClick={() => this.copyMyAddress(this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin])}><i className="icon wb-copy" aria-hidden="true"></i> {translate('INDEX.COPY')}</button>
</ol> </ol>
<div className="page-header-actions" data-edexcoin="COIN" id="edexcoin-actions"> <div className="page-header-actions" data-edexcoin="COIN" id="edexcoin-actions">
<div id="kmd_header_button"> <div id="kmd_header_button">
<button type="button" className="btn btn-dark waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_dashboard" style="display: none"> <button type="button" className="btn btn-dark waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_dashboard" onClick={this.toggleSendReceiveCoinForms}>
<i className="icon md-view-dashboard" aria-hidden="true"></i> {translate('INDEX.DASHBOARD')} <i className="icon md-view-dashboard" aria-hidden="true"></i> {translate('INDEX.DASHBOARD')}
</button> </button>
<button type="button" className="btn btn-primary waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_send"> <button type="button" className="btn btn-primary waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_send" onClick={() => this.toggleSendCoinForm(!this.props.ActiveCoin.send)}>
<i className="icon fa-send" aria-hidden="true"></i> {translate('INDEX.SEND')} <i className="icon fa-send" aria-hidden="true"></i> {translate('INDEX.SEND')}
</button> </button>
<button type="button" className="btn btn-info waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_recieve"> <button type="button" className="btn btn-info waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_recieve">
@ -44,8 +64,10 @@ class WalletsNav extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }
} }
}
export default WalletsNav; export default WalletsNav;

16
react/src/components/dashboard/walletsProgress.js

@ -3,29 +3,30 @@ import { translate } from '../../translate/translate';
class WalletsProgress extends React.Component { class WalletsProgress extends React.Component {
render() { render() {
if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'full') {
return ( return (
<div id="edex-footer" data-edexcoin="COIN"> <div id="edex-footer" data-edexcoin="COIN">
<div className="row no-space" data-edexcoin="COIN"> <div className="row no-space" data-edexcoin="COIN">
<div data-edexcoin="COIN" id="currency-progressbars" style={{display: 'none'}}> <div data-edexcoin="COIN" id="currency-progressbars">
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className="progress-bar progress-bar-info progress-bar-striped active" style={{width: '0%', font-size: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-bundles"> <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> <span data-lang="INDEX.BUNDLES"></span> <span data-edexcoin="COIN" id="currency-bundles-percent">0%</span>
</div> </div>
</div> </div>
</div> </div>
<div data-edexcoin="COIN" id="additional-progress-bars" style={{display: 'none'}}> <div data-edexcoin="COIN" id="additional-progress-bars">
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className="progress-bar progress-bar-warning progress-bar-striped active" style={{width: '0%', font-size: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-utxo"> <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> utxo <span data-edexcoin="COIN" id="currency-utxo-percent">0%</span>
</div> </div>
</div> </div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className="progress-bar progress-bar-danger progress-bar-striped active" style={{width: '0%', font-size: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-balances"> <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> <span data-lang="INDEX.BALANCES"></span> <span data-edexcoin="COIN" id="currency-balances-percent">0%</span>
</div> </div>
</div> </div>
<div className="progress progress-sm"> <div className="progress progress-sm">
<div className="progress-bar progress-bar-success progress-bar-striped active" style={{width: '0%', font-size: '80%'}} role="progressbar" data-edexcoin="COIN" id="currency-validated"> <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> <span data-lang="INDEX.VALIDATED"></span> <span data-edexcoin="COIN" id="currency-validated-percent">0%</span>
</div> </div>
</div> </div>
@ -33,6 +34,9 @@ class WalletsProgress extends React.Component {
</div> </div>
</div> </div>
); );
} else {
return null;
}
} }
} }

2
react/src/components/main/walletMain.js

@ -7,7 +7,7 @@ import Dashboard from '../dashboard/dashboard';
class WalletMain extends React.Component { class WalletMain extends React.Component {
render() { render() {
return ( return (
<div> <div style={{height: '100%'}}>
<Dashboard {...this.props} /> <Dashboard {...this.props} />
<AddCoin {...this.props.AddCoin} /> <AddCoin {...this.props.AddCoin} />
<Login {...this.props} /> <Login {...this.props} />

12
react/src/components/toaster/toaster.js

@ -1,4 +1,6 @@
import React from 'react'; import React from 'react';
import { dismissToasterMessage } from '../../actions/actionCreators';
import Store from '../../store';
class Toaster extends React.Component { class Toaster extends React.Component {
constructor(props) { constructor(props) {
@ -20,10 +22,7 @@ class Toaster extends React.Component {
type: props.type, type: props.type,
title: props.title, title: props.title,
}); });
} } else {
}
setInitialState() {
this.setState({ this.setState({
display: false, display: false,
message: null, message: null,
@ -31,15 +30,16 @@ class Toaster extends React.Component {
title: null, title: null,
}); });
} }
}
dismissToast() { dismissToast() {
this.setInitialState(); Store.dispatch(dismissToasterMessage());
} }
// TODO: multiple toasts // TODO: multiple toasts
renderToast() { renderToast() {
setTimeout(() => { setTimeout(() => {
this.setInitialState(); Store.dispatch(dismissToasterMessage());
}, 5000); }, 5000);
return ( return (

26
react/src/reducers/activeCoin.js

@ -1,12 +1,36 @@
import { DASHBOARD_ACTIVE_COIN_CHANGE } from '../actions/actionCreators'; import { DASHBOARD_ACTIVE_COIN_CHANGE, DASHBOARD_ACTIVE_COIN_BALANCE, DASHBOARD_ACTIVE_COIN_SEND_FORM, DASHBOARD_ACTIVE_COIN_RECEIVE_FORM, DASHBOARD_ACTIVE_COIN_RESET_FORMS } from '../actions/actionCreators';
export function ActiveCoin(state = { export function ActiveCoin(state = {
coin: null, coin: null,
mode: null,
send: false,
receive: false,
balance: 0,
}, action) { }, action) {
switch (action.type) { switch (action.type) {
case DASHBOARD_ACTIVE_COIN_CHANGE: case DASHBOARD_ACTIVE_COIN_CHANGE:
return Object.assign({}, state, { return Object.assign({}, state, {
coin: action.coin, coin: action.coin,
mode: action.mode,
});
case DASHBOARD_ACTIVE_COIN_BALANCE:
return Object.assign({}, state, {
balance: action.balance,
});
case DASHBOARD_ACTIVE_COIN_SEND_FORM:
return Object.assign({}, state, {
send: action.send,
receive: false,
});
case DASHBOARD_ACTIVE_COIN_RECEIVE_FORM:
return Object.assign({}, state, {
send: false,
receive: action.receive,
});
case DASHBOARD_ACTIVE_COIN_RESET_FORMS:
return Object.assign({}, state, {
send: false,
receive: false,
}); });
default: default:
return state; return state;

7
react/src/reducers/dashboard.js

@ -1,13 +1,18 @@
import { DASHBOARD_SECTION_CHANGE } from '../actions/actionCreators'; import { DASHBOARD_SECTION_CHANGE, GET_MAIN_ADDRESS } from '../actions/actionCreators';
export function Dashboard(state = { export function Dashboard(state = {
activeSection: 'wallets', activeSection: 'wallets',
activeHandle: null,
}, action) { }, action) {
switch (action.type) { switch (action.type) {
case DASHBOARD_SECTION_CHANGE: case DASHBOARD_SECTION_CHANGE:
return Object.assign({}, state, { return Object.assign({}, state, {
activeSection: action.activeSection, activeSection: action.activeSection,
}); });
case GET_MAIN_ADDRESS:
return Object.assign({}, state, {
activeHandle: action.activeHandle,
});
default: default:
return state; return state;
} }

20
react/src/styles/index.scss

@ -31,6 +31,26 @@
@import '../assets/global/fonts/brand-icons/brand-icons.min.css'; @import '../assets/global/fonts/brand-icons/brand-icons.min.css';
@import '../assets/skins/orange.min.css'; @import '../assets/skins/orange.min.css';
#app > div {
height: 100%;
}
.page-main {
background: #f3f4f5;
}
#kmd_header_button button {
margin-right: 5px;
}
.widget.active .bg-white {
box-shadow: inset 1px 1px 10px #ccc;
}
body {
padding-top: 44px;
}
/*.toaster .single-toast:nth-child(0) { /*.toaster .single-toast:nth-child(0) {
bottom: 12px; bottom: 12px;
} }

16
react/src/util/copyToClipboard.js

@ -0,0 +1,16 @@
export function copyToClipboard(value) {
var result;
var copyTextarea = document.querySelector('#js-copytextarea');
document.getElementById('js-copytextarea').value = value;
copyTextarea.select();
try {
var successful = document.execCommand('copy');
result = 1;
} catch (err) {
result = 0;
}
return result;
};

4
react/www/index.html

@ -15,6 +15,8 @@
<link rel="icon" type="image/png" href="assets/images/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="assets/images/favicon-16x16.png" sizes="16x16">
</head> </head>
<body id="body" class="page-login layout-full page-dark"> <body id="body" class="page-login layout-full page-dark">
<div id="app"></div> <!-- style="opacity: 0; height: 1px; width: 1px" -->
<input type="text" id="js-copytextarea" style="opacity: 0; height: 10px; width: 200px" />
<div id="app" style="height: 100%"></div>
</body> </body>
</html> </html>

Loading…
Cancel
Save