jumblr header

react/src/actions/actionCreators.js

@@ -1,7 +1,7 @@
 import 'whatwg-fetch';
 import 'bluebird';
 
-import Config from '../config';
+import _config from '../config';
 import {
   startCurrencyAssetChain,
   startAssetChain,
@@ -12,6 +12,14 @@ import {
 import { copyToClipboard } from '../util/copyToClipboard';
 import { translate } from '../translate/translate';
 
+let Config;
+
+try {
+  Config = window.require('electron').remote.getCurrentWindow();
+} catch (e) {
+  Config = _config;
+}
+
 export const TOASTER_MESSAGE = 'TOASTER_MESSAGE';
 export const DISPLAY_ADDCOIN_MODAL = 'DISPLAY_ADDCOIN_MODAL';
 export const GET_ACTIVE_COINS = 'GET_ACTIVE_COINS';
@@ -3423,7 +3431,6 @@ export function getAgamaLog(type) {
 }
 
 export function guiLogState(logData) {
-  console.log(logData);
   return {
     type: LOG_GUI_HTTP,
     timestamp: logData.timestamp,

react/src/components/dashboard/about.js

@@ -3,7 +3,7 @@ import { translate } from '../../translate/translate';
 
 class About extends React.Component {
   render() {
-    return(
+    return (
       <div className="page" style={{ marginLeft: '0' }}>
         <div className="page-content" id="section-about-iguana">
           <h2>About Iguana</h2>

react/src/components/dashboard/dashboard.js

@@ -3,7 +3,6 @@ import Navbar from './navbar';
 import CoinTile from './coinTile';
 import EDEX from './edex';
 import WalletsBalance from './walletsBalance';
-import WalletsHeader from './walletsHeader';
 import WalletsProgress from './walletsProgress';
 import WalletsNav from './walletsNav';
 import SendCoin from './sendCoin';

react/src/components/dashboard/jumblr.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import WalletsHeader from './walletsHeader';
 /*import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators';
 import Store from '../../store';*/
 
@@ -31,7 +32,8 @@ class Jumblr extends React.Component {
   render() {
     return (
       <div className="page" style={{ marginLeft: '0' }}>
-        <div className="page-content" id="section-jumblr">
+        <WalletsHeader activeSection="jumblr" />
+        <div className="page-content" id="section-jumblr" style={{ marginTop: '30px' }}>
           <div className="row" id="jumblr_dashboard">
             <div className="col-xs-12" id="jumblr_testing_alert">
               <div className="alert alert-danger" role="alert">

react/src/components/dashboard/navbar.js

@@ -100,8 +100,7 @@ class Navbar extends React.Component {
                 </a>
               </li>
               <li
-                className={ this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu' }
-                style={{ display: 'none' }}>
+                className={ this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu' }>
                 <a id="nav-jumblr" onClick={ () => this.dashboardChangeSection('jumblr') }>
                   <i className="site-menu-icon" aria-hidden="true"></i> Jumblr
                 </a>

react/src/components/dashboard/notifications.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+class Notifications extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      displayModal: false,
+      totalCalls: 0,
+      totalErrorCalls: 0,
+      totalSuccessCalls: 0,
+      totalPendingCalls: 0,
+    };
+    this.toggleNotificationsModal = this.toggleNotificationsModal.bind(this);
+  }
+
+  componentWillReceiveProps(props) {
+    // get total number of calls per type
+    if (this.props.Dashboard &&
+        this.props.Dashboard.guiLog) {
+      const _guiLog = this.props.Dashboard.guiLog;
+      let totalCalls = Object.keys(_guiLog).length;
+      let totalErrorCalls = 0;
+      let totalSuccessCalls = 0;
+      let totalPendingCalls = 0;
+
+      for (let timestamp in _guiLog) {
+        if (_guiLog[timestamp].status === 'error') {
+          totalErrorCalls++;
+        }
+        if (_guiLog[timestamp].status === 'success') {
+          totalSuccessCalls++;
+        }
+        if (_guiLog[timestamp].status === 'pending') {
+          totalPendingCalls++;
+        }
+      }
+
+      this.setState(Object.assign({}, this.state, {
+        totalCalls,
+        totalErrorCalls,
+        totalSuccessCalls,
+        totalPendingCalls,
+      }));
+    }
+  }
+
+  toggleNotificationsModal() {
+
+  }
+
+  render() {
+    return (
+      <div className="notifications-badge" onClick={ this.toggleNotificationsModal }>
+        <span className="badge success">{ this.state.totalSuccessCalls }</span>
+        <span className="badge error">{ this.state.totalErrorCalls }</span>
+        <span className="badge pending">{ this.state.totalPendingCalls }</span>
+      </div>
+    );
+  }
+}
+
+export default Notifications;

react/src/components/dashboard/walletsHeader.js

@@ -6,14 +6,20 @@ import { translate } from '../../translate/translate';
 class WalletsHeader extends React.Component {
   render() {
     if (this.props &&
-        this.props.coin) {
+        this.props.activeSection) {
       return (
-        <div className="page-header page-header-bordered header-easydex margin-bottom-0" id="easydex-header-div">
-          <h1 className="page-title">EasyDEX</h1>
+        <div
+          className="page-header page-header-bordered header-easydex margin-bottom-0"
+          id="easydex-header-div"
+          style={{ backgroundImage: 'url("assets/images/bg/' + this.props.activeSection + '_transparent_header_bg.png")', backgroundRepeat: 'no-repeat', backgroundPosition: '0%' }}>
+          <h1 className={ this.props.activeSection === 'jumblr' ? 'hide' : 'page-title' }>EasyDEX</h1>
           <ol className="breadcrumb">
-            <li className="header-easydex-section">{ translate('INDEX.DASHBOARD') }</li>
+            <li className={ this.props.activeSection === 'jumblr' ? 'hide' : 'header-easydex-section' }>{ translate('INDEX.DASHBOARD') }</li>
+            <li className={ this.props.activeSection !== 'jumblr' ? 'hide' : 'header-easydex-section' }>
+              <img src="assets/images/native/jumblr_header_title_logo.png" /><br /> { translate('SIDEBAR.JUMBLR_MOTTO') }
+            </li>
           </ol>
-          <div className="page-header-actions" style={{ zIndex: '1' }}>
+          <div className="page-header-actions" style={{ zIndex: '1', display: 'none' }}>
             <div id="kmd_header_button">
               <button
                 type="button"
@@ -54,7 +60,7 @@ class WalletsHeader extends React.Component {
               </ul>
             </div>
 
-            <div id="zec_header_button">
+            <div id="zec_header_button" style={{ display: 'none' }}>
               <button
                 type="button"
                 id="easydex_zec_wallet_actions_header"
@@ -107,7 +113,7 @@ class WalletsHeader extends React.Component {
               </button>
             </div>
 
-            <div id="kmd_header_button">
+            <div id="kmd_header_button" style={{ display: 'none' }}>
               <button
                 type="button"
                 id="easydex_acpax_wallet_actions_header"
@@ -151,7 +157,7 @@ class WalletsHeader extends React.Component {
               </ul>
             </div>
 
-            <div className="row no-space width-350 hidden-xs" id="easydex_btc_btcd_balances_header">
+            <div className="row no-space width-350 hidden-xs" id="easydex_btc_btcd_balances_header" style={{ display: 'none' }}>
               <div className="col-xs-6">
                 <div className="counter">
                   <span className="font-weight-medium" id="header_coinname_balance"> - BTC</span>

react/src/components/main/walletMain.js

@@ -4,6 +4,7 @@ import AddCoin from '../addcoin/addcoin';
 import Login from '../login/login';
 import Dashboard from '../dashboard/dashboard';
 import SyncOnly from '../dashboard/syncOnly';
+import Notifications from '../dashboard/notifications';
 
 class WalletMain extends React.Component {
   render() {
@@ -14,6 +15,7 @@ class WalletMain extends React.Component {
         <AddCoin {...this.props.AddCoin} />
         <Login {...this.props} />
         <Toaster {...this.props.toaster} />
+        <Notifications {...this.props} />
       </div>
     );
   }

react/src/reducers/dashboard.js

@@ -7,7 +7,8 @@ import {
   BASILISK_CONNECTION,
   DASHBOARD_CONNECT_NOTARIES,
   VIEW_CACHE_DATA,
-  LOG_GUI_HTTP
+  LOG_GUI_HTTP,
+  TOGGLE_NOTIFICATIONS_MODAL
 } from '../actions/actionCreators';
 
 export function Dashboard(state = {
@@ -69,12 +70,15 @@ export function Dashboard(state = {
     case LOG_GUI_HTTP:
       let _guiLogState = state.guiLog;
 
-      if (_guiLogState[state.timestamp]) {
-        _guiLogState[state.timestamp].status = state.log.status;
+      if (_guiLogState[action.timestamp]) {
+        _guiLogState[action.timestamp].status = action.log.status;
+        _guiLogState[action.timestamp].response = action.log.response;
+      } else {
+        _guiLogState[action.timestamp] = action.log;
       }
 
       return Object.assign({}, state, {
-        //displayViewCacheModal: action.display,
+        guiLog: _guiLogState,
       });
     default:
       return state;

react/src/styles/index.scss

@@ -375,6 +375,42 @@ input:checked + .slider:before {
   text-align: center;
 }
 
+.breadcrumb>li+li:before {
+  display: none;
+}
+
+.notifications {
+
+}
+
+.notifications-badge {
+  position: absolute;
+  bottom: 10px;
+  left: 5px;
+  cursor: pointer;
+
+  .badge {
+    margin-left: 2px;
+    font-weight: bold;
+  }
+
+  .badge.success {
+    color: #3c763d;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+  }
+  .badge.pending {
+    color: #8a6d3b;
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+  }
+  .badge.error {
+    color: #a94442;
+    background-color: #f2dede;
+    border-color: #ebccd1;
+  }
+}
+
 /*.toaster .single-toast:nth-child(0) {
   bottom: 12px;
 }