Merge branch 'redux' into feature/prop-refactor

assets/mainWindow/css/loading.css

@@ -109,4 +109,9 @@ body.agamaMode {
 
 .btn.btn-primary.btn-close-app {
   margin: 0;
+}
+
+.app-closing {
+  position: relative;
+  top: 50px;
 }

react/src/actions/actions/nativeSend.js

@@ -176,8 +176,8 @@ export function getKMDOPIDState(json) {
 }
 
 export function getKMDOPID(opid, coin) {
-  let tmpopidOutput = '',
-      ajaxDataToHex;
+  let tmpopidOutput = '';
+  let ajaxDataToHex;
 
   if (opid === undefined) {
     ajaxDataToHex = null;

react/src/components/addcoin/addcoin.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../translate/translate';
 import Config from '../../config';
 import {
@@ -16,8 +17,8 @@ import CoinSelectorsRender from './coin-selectors.render';
 import AddCoinRender from './addcoin.render';
 
 class AddCoin extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       nativeOnly: Config.iguanaLessMode,
       coins: [],
@@ -354,4 +355,16 @@ class AddCoin extends React.Component {
   }
 }
 
-export default AddCoin;
+
+const mapStateToProps = (state) => {
+  return {
+    Main: state.Main,
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+    },
+    AddCoin: state.AddCoin,      
+  };
+
+};
+
+export default connect(mapStateToProps)(AddCoin);

react/src/components/dashboard/loginSettingsModal/loginSettingsModal.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { getCoinTitle } from '../../../util/coinHelper';
 import { translate } from '../../../translate/translate';
 import { toggleLoginSettingsModal } from '../../../actions/actionCreators';
@@ -29,4 +30,11 @@ class LoginSettingsModal extends React.Component {
   }
 }
 
-export default LoginSettingsModal;
+const mapStateToProps = (state) => {
+  return {
+    Main: state.Main
+  };
+
+};
+
+export default connect(mapStateToProps)(LoginSettingsModal);

react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js

@@ -6,13 +6,12 @@ import Settings from '../settings/settings';
 export const LoginSettingsModalRender = function() {
   return (
     <div>
-      <div className="modal show login-settings-modal">
+      <div className="modal show login-settings-modal ff">
         <div className="modal-dialog modal-center modal-lg">
           <div className="modal-content">
             <div className="modal-body modal-body-container">
               { this.props.section === 'settings' &&
                 <Settings
-                  {...this.props}
                   disableWalletSpecificUI="true" />
               }
               { this.props.section === 'about' &&

react/src/components/dashboard/main/dashboard.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import DashboardRender from './dashboard.render';
 
 class Dashboard extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
     };
     this.renderDashboard = this.renderDashboard.bind(this);
@@ -38,4 +39,17 @@ class Dashboard extends React.Component {
   }
 }
 
-export default Dashboard;
+const mapStateToProps = (state) => {
+  return {
+    Main: state.Main,
+    ActiveCoin: {
+      mode: state.ActiveCoin.mode,
+    },
+    Dashboard: {
+      activeSection: state.Dashboard.activeSection, 
+    }     
+  };
+
+};
+
+export default connect(mapStateToProps)(Dashboard);

react/src/components/dashboard/main/dashboard.render.js

@@ -46,10 +46,10 @@ const DashboardRender = function() {
           <Jumblr  />
         }
         { this.isSectionActive('settings') &&
-          <Settings {...this.props} />
+          <Settings />
         }
         { this.isSectionActive('about') &&
-          <About {...this.props} />
+          <About />
         }
       </div>
     </div>

react/src/components/dashboard/notifications/notifications.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { sortByDate } from '../../../util/sort';
 import Config from '../../../config';
 import {
@@ -8,8 +9,8 @@ import {
 } from './notifications.render';
 
 class Notifications extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       displayModal: false,
       calls: {
@@ -107,4 +108,15 @@ class Notifications extends React.Component {
   }
 }
 
-export default Notifications;
+const mapStateToProps = (state) => {
+  return {
+    Dashboard: {
+      guiLog: state.Dashboard.guiLog,
+      activeHandle: state.Dashboard.activeHandle,
+    }     
+  };
+
+};
+
+export default connect(mapStateToProps)(Notifications);
+

react/src/components/dashboard/receiveCoin/receiveCoin.render.js

@@ -54,7 +54,7 @@ export const AddressItemRender = function(address, type) {
       { this.renderAddressActions(address.address, type) }
       <td>{ type === 'public' ? address.address : `${address.address.substring(0, 34)}...` }</td>
       <td>{ address.amount }</td>
-      {!this.isNativeMode() &&
+      { !this.isNativeMode() &&
         <td>{ address.interest ? address.interest : 'N/A' }</td>
       }
     </tr>
@@ -175,5 +175,4 @@ export const ReceiveCoinRender = function() {
       </div>
     );
   }
-};
-
+};

react/src/components/dashboard/settings/settings.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate } from '../../../translate/translate';
 import Config from '../../../config';
 import {
@@ -41,8 +42,8 @@ let updateProgressBar = {
   4) batch export/import wallet addresses
 */
 class Settings extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       activeTab: 0,
       debugLinesCount: 10,
@@ -79,14 +80,27 @@ class Settings extends React.Component {
     this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
     this._checkForUpdateUIPromise = this._checkForUpdateUIPromise.bind(this);
     this._updateUIPromise = this._updateUIPromise.bind(this);
+    this.updateTabDimensions = this.updateTabDimensions.bind(this);
+  }
+
+  updateTabDimensions() {
+    setTimeout(() => {
+      const _height = document.querySelector(`#${this.state.tabElId} .panel-collapse .panel-body`).offsetHeight;
+
+      this.setState(Object.assign({}, this.state, {
+        activeTabHeight: _height,
+      }));
+    }, 100);
   }
 
   componentWillMount() {
     socket.on('patch', msg => this.updateSocketsData(msg));
+    window.addEventListener('resize', this.updateTabDimensions);
   }
 
   componentWillUnmount() {
     socket.removeAllListeners('patch', msg => this.updateSocketsData(msg));
+    window.removeEventListener('resize', this.updateTabDimensions);
 
     if (!this.state.disableWalletSpecificUI) {
       document.documentElement.style.height = '100%';
@@ -94,7 +108,7 @@ class Settings extends React.Component {
     }
   }
 
-  componentDidMount() {
+  componentDidMount(props) {
     if (!this.props.disableWalletSpecificUI) {
       Store.dispatch(iguanaActiveHandle());
     }
@@ -115,6 +129,25 @@ class Settings extends React.Component {
     }
   }
 
+  openExternalWindow(url) {
+    const remote = window.require('electron').remote;
+    const BrowserWindow = remote.BrowserWindow;
+
+    const externalWindow = new BrowserWindow({
+      width: 1280,
+      height: 800,
+      title: 'Loading...',
+      icon: remote.getCurrentWindow().iguanaIcon,
+    });
+
+    externalWindow.loadURL(url);
+    externalWindow.webContents.on('did-finish-load', function() {
+      setTimeout(function() {
+        externalWindow.show();
+      }, 40);
+    });
+  }
+
   _resetAppConfig() {
     Store.dispatch(resetAppConfig());
   }
@@ -680,4 +713,18 @@ class Settings extends React.Component {
   }
 }
 
-export default Settings;
+const mapStateToProps = (state) => {
+  return {
+    Main: {
+      coins: state.Main.coins,
+      activeHandle: state.Main.activeHandle,
+    },
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+    },
+    Settings: state.Settings,      
+  };
+
+};
+
+export default connect(mapStateToProps)(Settings);

react/src/components/dashboard/settings/settings.render.js

@@ -12,7 +12,7 @@ export const AppUpdateTabRender = function() {
       onClick={ () => this.openTab('AppUpdate', 10) }>
       <div className="panel-heading">
         <a className={ 'panel-title' + (this.state.activeTab === 10 ? '' : ' collapsed') }>
-          <i className="icon fa fa-life-ring"></i> { translate('INDEX.UPDATE') }
+          <i className="icon fa fa-cloud-download"></i> { translate('INDEX.UPDATE') }
         </a>
       </div>
       <div
@@ -620,6 +620,61 @@ export const SettingsRender = function() {
                   }
 
                   { this.renderAppUpdateTab() }
+
+                  <div
+                    className="panel"
+                    id="Support"
+                    onClick={ () => this.openTab('Support', 11) }>
+                    <div className="panel-heading">
+                      <a className={ 'panel-title' + (this.state.activeTab === 11 ? '' : ' collapsed') }>
+                        <i className="icon fa fa-life-ring"></i> Support
+                      </a>
+                    </div>
+                    <div
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }
+                      style={{ height: this.state.activeTab === 11 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      <div className="panel-body">
+                        <div className="col-sm-12 no-padding-left">
+                          <div className="support-box-wrapper">
+                            <div
+                              className="support-box"
+                              onClick={ () => this.openExternalWindow('http://support.supernet.org') }>
+                              <img src="assets/images/cryptologo/supernet.png" alt="Support tickets" />
+                              <div className="support-box-title">Support tickets</div>
+                              <div className="support-box-link">support.supernet.org</div>
+                            </div>
+                          </div>
+                          <div className="support-box-wrapper">
+                            <div
+                              className="support-box"
+                              onClick={ () => this.openExternalWindow('https://sprnt.slack.com') }>
+                              <img src="assets/images/support/slack-icon.png" alt="Slack" />
+                              <div className="support-box-title">Slack</div>
+                              <div className="support-box-link">sprnt.slack.com</div>
+                            </div>
+                          </div>
+                          <div className="support-box-wrapper">
+                            <div
+                              className="support-box"
+                              onClick={ () => this.openExternalWindow('http://slackinvite.supernet.org') }>
+                              <img src="assets/images/support/slack-invite-icon.png" alt="Slack invite" />
+                              <div className="support-box-title">Get Slack invite</div>
+                              <div className="support-box-link">slackinvite.supernet.org</div>
+                            </div>
+                          </div>
+                          <div className="support-box-wrapper">
+                            <div
+                              className="support-box"
+                              onClick={ () => this.openExternalWindow('https://github.com/SuperNETorg/Agama') }>
+                              <img src="assets/images/support/github-icon.png" alt="Github" />
+                              <div className="support-box-title">Github</div>
+                              <div className="support-box-link">github.com/SuperNETorg/Agama</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>

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

@@ -76,7 +76,6 @@ export const WalletsProgressRender = function() {
     <div
       id="edex-footer"
       className="margin-bottom-20">
-
       { !this.isNativeMode() &&
         this.props.Dashboard.progress &&
         <div className="row no-space">

react/src/components/login/login.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import {
   toggleAddcoinModal,
   iguanaWalletPassphrase,
@@ -24,8 +25,8 @@ const IGUNA_ACTIVE_COINS_TIMEOUT = 10000;
 // TODO: remove duplicate activehandle and activecoins calls
 
 class Login extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       display: false,
       activeLoginSection: 'activateCoin',
@@ -386,4 +387,17 @@ class Login extends React.Component {
   }
 }
 
-export default Login;
+const mapStateToProps = (state) => {
+  return {
+    Main: state.Main,
+    Dashboard: {
+      activeHandle: state.Dashboard.activeHandle,
+    },
+    Interval: {
+      interval: state.Interval.interval,
+    }
+  };
+
+};
+
+export default connect(mapStateToProps)(Login);

react/src/components/login/login.render.js

@@ -6,8 +6,7 @@ const LoginRender = function () {
   return (
     <div>
       <LoginSettingsModal
-        {...this.props}
-        section={ this.state.displayLoginSettingsDropdownSection } />
+         section={ this.state.displayLoginSettingsDropdownSection } />
       { this.renderSwallModal() }
       <div className="page animsition vertical-align text-center fade-in">
         <div className="page-content vertical-align-middle col-xs-12 col-sm-6 col-sm-offset-3">

react/src/components/main/walletMain.js

@@ -12,11 +12,11 @@ class WalletMain extends React.Component {
       <div className="full-height">
         <input type="text" id="js-copytextarea" />
         <SyncOnly />
-        <Dashboard {...this.props} />
-        <AddCoin {...this.props} />
-        <Login {...this.props} />
+        <Dashboard />
+        <AddCoin />
+        <Login />
         <Toaster {...this.props.toaster} />
-        <Notifications {...this.props} />
+        <Notifications />
       </div>
     );
   }

react/src/components/overrides.scss

@@ -996,4 +996,62 @@ select{
     padding: 38px;
     background: rgba(255, 255, 255, 0.85);
   }
+}
+
+.support-box {
+  padding: 15px 20px;
+  width: 220px;
+  display: inline-block;
+  cursor: pointer;
+
+  &-title {
+    font-weight: bold;
+    padding-top: 12px;
+    padding-bottom: 3px;
+  }
+  img {
+    height: 50px;
+  }
+}
+
+.support-box-wrapper {
+  display: inline-block;
+  margin-right: 50px;
+
+  &:last-child, {
+    margin-right: 0;
+  }
+}
+
+.support-box:hover {
+  .support-box-link {
+    color: #5683ad;
+    font-weight: 500;
+  }
+}
+
+.login-settings-modal {
+  #AppUpdate {
+    .col-sm-4 {
+      width: 100%;
+    }
+  }
+  .modal-dialog {
+    width: 80%;
+  }
+  .modal-body {
+    background: #f3f4f5;
+  }
+  .modal-footer {
+    margin-top: 15px;
+  }
+  .page-content {
+    padding-top: 0;
+  }
+  .support-box-wrapper {
+    .support-box {
+      margin: 0;
+      margin-bottom: 20px;
+    }
+  }
 }