updated dashboard components

react/src/actions/actionCreators.js

@@ -16,6 +16,7 @@ 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';
 export const ATOMIC = 'ATOMIC';
+export const GET_WIF_KEY = 'GET_WIF_KEY';
 
 function atomicState(json) {
   return {
@@ -421,13 +422,39 @@ export function atomic(payload) {
     })
     .catch(function(error) {
       console.log(error);
-      dispatch(triggerToaster(true, payload.method, 'Atomic explorer error', 'error'))
+      dispatch(triggerToaster(true, payload.method, 'Atomic explore error', 'error'))
     })
     .then(response => response.json())
     .then(json => dispatch(atomicState(json)));
   }
 }
 
+export function test(json) {
+  console.log('test', json);
+}
+
+export function encryptWallet(_passphrase, cb) {
+  const payload = {
+      'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
+      'agent': 'bitcoinrpc',
+      'method': 'encryptwallet',
+      'passphrase': _passphrase
+  };
+
+  return dispatch => {
+    return fetch('http://127.0.0.1:7778', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, 'encryptWallet', 'Error', 'error'))
+    })
+    .then(response => response.json())
+    .then(json => dispatch(cb.call(this, json)));
+  }
+}
+
 /*function Shepherd_SysInfo() {
   return new Promise((resolve) => {
     $.ajax({

react/src/components/app/app.js

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

react/src/components/dashboard/about.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { translate } from '../../translate/translate';
+
+class About extends React.Component {
+  render() {
+    return(
+      <div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
+        <div className="page-content" id="section-about-iguana">
+          <h2>About Iguana</h2>
+          <p>Page content goes here</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default About;

react/src/components/dashboard/atomic.js

@@ -25,21 +25,18 @@ class Atomic extends React.Component {
     this.setState(Object.assign({}, this.state, {
       'api': e.target.value,
     }));
-    console.log('this', this.state);
   }
 
   updateSelectedCoin(e) {
     this.setState(Object.assign({}, this.state, {
       'coin': e.target.value.split('|')[0],
     }));
-    console.log('this', this.state);
   }
 
   updateInput(e) {
     this.setState(Object.assign({}, this.state, {
       'input': e.target.value,
     }));
-    console.log('this', this.state);
   }
 
   getAtomicData() {
@@ -326,7 +323,6 @@ class Atomic extends React.Component {
   }
 
   componentWillReceiveProps(props) {
-    console.log('atomicprops', props.Atomic.response);
     if (props && props.Atomic.response) {
       if (this.state.api === 'txid' ||
           this.state.api === 'dex_getbestblockhash' ||

react/src/components/dashboard/dashboard.js

@@ -11,6 +11,8 @@ import WalletsData from './walletsData';
 import Atomic from './atomic';
 import Jumblr from './jumblr';
 import Settings from './settings';
+import ReceiveCoin from './receiveCoin';
+import About from './about';
 
 class Dashboard extends React.Component {
   constructor(props) {
@@ -21,7 +23,7 @@ class Dashboard extends React.Component {
   }
 
   renderDashboard() {
-    document.body.className = 'page-login';
+    document.body.className = '';
     //            <WalletsHeader {...this.props.ActiveCoin} />
     return (
       <div style={{height: '100%'}}>
@@ -33,6 +35,7 @@ class Dashboard extends React.Component {
             <WalletsProgress {...this.props} />
             <WalletsBalance {...this.props.ActiveCoin} />
             <SendCoin {...this.props.ActiveCoin} />
+            <ReceiveCoin {...this.props.ActiveCoin} />
             <WalletsData {...this.props.ActiveCoin} />
           </div>
           <div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}>
@@ -47,6 +50,9 @@ class Dashboard extends React.Component {
           <div className={this.props.Dashboard.activeSection === 'settings' ? 'show' : 'hide'}>
             <Settings {...this.props} />
           </div>
+          <div className={this.props.Dashboard.activeSection === 'about' ? 'show' : 'hide'}>
+            <About {...this.props} />
+          </div>
         </div>
       </div>
     );

react/src/components/dashboard/edex.js

@@ -4,7 +4,7 @@ import { translate } from '../../translate/translate';
 class EDEX extends React.Component {
   render() {
     return (
-      <div className="page animsition" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0px'}}>
+      <div className="page" data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0px'}}>
         <div className="page-content" id="section-easydex">
           <h2>Coming Soon!</h2>
         </div>

react/src/components/dashboard/navbar.js

@@ -66,22 +66,22 @@ class Navbar extends React.Component {
                   </i>
                 </a>
               </li>
-              <li className="active nav-top-menu">
+              <li className={this.props.Dashboard.activeSection === 'wallets' ? 'active nav-top-menu' : 'nav-top-menu'}>
                 <a href="javascript:void(0)" id="nav-dashboard" onClick={() => this.dashboardChangeSection('wallets')}>
                   <i className="site-menu-icon" aria-hidden="true"></i> {translate('INDEX.WALLETS')}
                 </a>
               </li>
-              <li className="nav-top-menu">
+              <li className={this.props.Dashboard.activeSection === 'edex' ? 'active nav-top-menu' : 'nav-top-menu'}>
                 <a href="javascript:void(0)" id="nav-easydex" onClick={() => this.dashboardChangeSection('edex')}>
                   <i className="site-menu-icon" aria-hidden="true"></i> EasyDEX
                 </a>
               </li>
-              <li className="nav-top-menu">
+              <li className={this.props.Dashboard.activeSection === 'jumblr' ? 'active nav-top-menu' : 'nav-top-menu'}>
                 <a href="javascript:void(0)" id="nav-jumblr" onClick={() => this.dashboardChangeSection('jumblr')}>
                   <i className="site-menu-icon" aria-hidden="true"></i> Jumblr
                 </a>
               </li>
-              <li className="nav-top-menu">
+              <li className={this.props.Dashboard.activeSection === 'atomic' ? 'active nav-top-menu' : 'nav-top-menu'}>
                 <a href="javascript:void(0)" id="nav-iguana-atomic-explorer" onClick={() => this.dashboardChangeSection('atomic')}>
                   <i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
                 </a>

react/src/components/dashboard/sendCoin.js

@@ -20,7 +20,6 @@ class SendCoin extends React.Component {
   }
 
   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">

react/src/components/dashboard/settings.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
-/*import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators';
-import Store from '../../store';*/
+import { iguanaActiveHandle, encryptWallet, test } from '../../actions/actionCreators';
+import Store from '../../store';
 import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
 import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC';
 import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
@@ -12,6 +12,11 @@ class Settings extends React.Component {
     this.state = {
       activeTab: 0,
     };
+    this.exportWifKeys = this.exportWifKeys.bind(this);
+  }
+
+  componentDidMount() {
+    Store.dispatch(iguanaActiveHandle());
   }
 
   openTab(tab) {
@@ -20,6 +25,10 @@ class Settings extends React.Component {
     }));
   }
 
+  exportWifKeys() {
+    Store.dispatch(encryptWallet('lime lime', test));
+  }
+
   render() {
     return (
       <div data-animsition-in="fade-in" data-animsition-out="fade-out" style={{marginLeft: '0'}}>
@@ -31,12 +40,12 @@ class Settings extends React.Component {
                     <h4 className="font-size-14 text-uppercase">{translate('INDEX.WALLET_SETTINGS')}</h4>
                     <div className="panel-group" id="SettingsAccordion" aria-multiselectable="true" role="tablist">
                       <div className="panel">
-                        <div className="panel-heading" id="WalletInfo" role="tab">
-                          <a className="panel-title" data-toggle="collapse" href="#WalletInfoTab" data-parent="#SettingsAccordion" aria-expanded="true" aria-controls="WalletInfoTab">
+                        <div className="panel-heading" id="WalletInfo" role="tab" onClick={() => this.openTab(0)}>
+                          <a className={this.state.activeTab === 0 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion">
                             <i className="icon md-balance-wallet" aria-hidden="true"></i>{translate('INDEX.WALLET_INFO')}
                           </a>
                         </div>
-                        <div className="panel-collapse collapse in" id="WalletInfoTab" aria-labelledby="WalletInfo" role="tabpanel">
+                        <div className={this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="WalletInfoTab" aria-labelledby="WalletInfo" role="tabpanel">
                           <div className="panel-body">
                             <table className="table" id="wallet-info-table">
                               <thead>
@@ -49,37 +58,37 @@ class Settings extends React.Component {
                                 <tr>
                                   <td style={{fontWeight: 'bold'}}>pubkey</td>
                                   <td>
-                                    <div id="winfo_pubkey_value"></div>
+                                    <div id="winfo_pubkey_value">{this.props.Main.activeHandle.pubkey}</div>
                                   </td>
                                 </tr>
                                 <tr>
                                   <td style={{fontWeight: 'bold'}}>btcpubkey</td>
                                   <td>
-                                    <div id="winfo_btcpubkey_value"></div>
+                                    <div id="winfo_btcpubkey_value">{this.props.Main.activeHandle.btcpubkey}</div>
                                   </td>
                                 </tr>
                                 <tr>
                                   <td style={{fontWeight: 'bold'}}>rmd160</td>
                                   <td>
-                                    <div id="winfo_rmd160_value"></div>
+                                    <div id="winfo_rmd160_value">{this.props.Main.activeHandle.rmd160}</div>
                                   </td>
                                 </tr>
                                 <tr>
                                   <td style={{fontWeight: 'bold'}}>NXT</td>
                                   <td>
-                                    <div id="winfo_NXT_value"></div>
+                                    <div id="winfo_NXT_value">{this.props.Main.activeHandle.NXT}</div>
                                   </td>
                                 </tr>
                                 <tr>
                                   <td style={{fontWeight: 'bold'}}>notary</td>
                                   <td>
-                                    <div id="winfo_notary_value"></div>
+                                    <div id="winfo_notary_value">{this.props.Main.activeHandle.notary}</div>
                                   </td>
                                 </tr>
                                 <tr>
                                   <td style={{fontWeight: 'bold'}}>status</td>
                                   <td>
-                                    <div id="winfo_status_value"></div>
+                                    <div id="winfo_status_value">{this.props.Main.activeHandle.status}</div>
                                   </td>
                                 </tr>
                               </tbody>
@@ -89,12 +98,12 @@ class Settings extends React.Component {
                       </div>
 
                       <div className="panel">
-                        <div className="panel-heading" id="AddNodeforCoin" role="tab">
-                          <a className="panel-title collapsed" data-toggle="collapse" data-parent="#SettingsAccordion" aria-expanded="false" aria-controls="AddNodeforCoinTab">
+                        <div className="panel-heading" id="AddNodeforCoin" role="tab" onClick={() => this.openTab(1)}>
+                          <a className={this.state.activeTab === 1 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion">
                             <i className="icon md-plus-square" aria-hidden="true"></i>{translate('INDEX.ADD_NODE')}
                           </a>
                         </div>
-                        <div className="panel-collapse collapse" id="AddNodeforCoinTab" aria-labelledby="AddNodeforCoin" role="tabpanel">
+                        <div className={this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="AddNodeforCoinTab" aria-labelledby="AddNodeforCoin" role="tabpanel">
                           <div className="panel-body">
                             <div className="row">
                               <div className="col-sm-6">
@@ -112,7 +121,7 @@ class Settings extends React.Component {
                                   </div>
                                 </div>
                                 <div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}>
-                                  <button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="settings_getcoinpeers_btn" onClick="Settings_ShowCoinPeers">{translate('INDEX.CHECK_NODES')}</button>
+                                  <button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="settings_getcoinpeers_btn">{translate('INDEX.CHECK_NODES')}</button>
                                 </div>
                                 <div className="col-sm-12">
                                   <h5>
@@ -144,7 +153,7 @@ class Settings extends React.Component {
                                   </div>
                                 </div>
                                 <div className="col-sm-4 col-xs-12" style={{textAlign: 'center'}}>
-                                  <button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="settings_addcoinpeers_btn" onClick="Settings_AddCoinPeers()">{translate('INDEX.ADD_NODE')}</button>
+                                  <button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="settings_addcoinpeers_btn">{translate('INDEX.ADD_NODE')}</button>
                                 </div>
                               </div>
                             </div>
@@ -153,34 +162,34 @@ class Settings extends React.Component {
                       </div>
 
                       <div className="panel">
-                        <div className="panel-heading" id="DumpWallet" role="tab">
-                          <a className="panel-title collapsed" data-toggle="collapse" data-parent="#SettingsAccordion" aria-expanded="false" aria-controls="DumpWalletTab">
+                        <div className="panel-heading" id="DumpWallet" role="tab" onClick={() => this.openTab(2)}>
+                          <a className={this.state.activeTab === 2 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion">
                             <i className="icon wb-briefcase" aria-hidden="true"></i>{translate('INDEX.WALLET_BACKUP')}
                           </a>
                         </div>
-                        <div className="panel-collapse collapse" id="DumpWalletTab" aria-labelledby="DumpWallet" role="tabpanel">
+                        <div className={this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="DumpWalletTab" aria-labelledby="DumpWallet" role="tabpanel">
                           <div className="panel-body">Wallet Backup section to be updated soon.</div>
                         </div>
                       </div>
 
                       <div className="panel">
-                        <div className="panel-heading" id="FiatCurrencySettings" role="tab">
-                          <a className="panel-title collapsed" data-toggle="collapse" data-parent="#SettingsAccordion" aria-expanded="false" aria-controls="FiatCurrencySettingsTab">
+                        <div className="panel-heading" id="FiatCurrencySettings" role="tab" onClick={() => this.openTab(3)}>
+                          <a className={this.state.activeTab === 3 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion">
                             <i className="icon fa-money" aria-hidden="true"></i>{translate('INDEX.FIAT_CURRENCY')}
                           </a>
                         </div>
-                        <div className="panel-collapse collapse" id="FiatCurrencySettingsTab" aria-labelledby="FiatCurrencySettings" role="tabpanel">
+                        <div className={this.state.activeTab === 3 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="FiatCurrencySettingsTab" aria-labelledby="FiatCurrencySettings" role="tabpanel">
                           <div className="panel-body">Fiat currency settings section to be updated soon.</div>
                         </div>
                       </div>
 
                       <div className="panel">
-                        <div className="panel-heading" id="ExportKeys" role="tab">
-                          <a className="panel-title collapsed" data-toggle="collapse" data-parent="#SettingsAccordion" aria-expanded="false" aria-controls="ExportKeysTab">
+                        <div className="panel-heading" id="ExportKeys" role="tab" onClick={() => this.openTab(4)}>
+                          <a className={this.state.activeTab === 4 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion">
                             <i className="icon md-key" aria-hidden="true"></i>{translate('INDEX.EXPORT_KEYS')}
                           </a>
                         </div>
-                        <div className="panel-collapse collapse" id="ExportKeysTab" aria-labelledby="ExportKeys" role="tabpanel">
+                        <div className={this.state.activeTab === 4 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="ExportKeysTab" aria-labelledby="ExportKeys" role="tabpanel">
                           <div className="panel-body">
                             <p>
                               <div>{translate('INDEX.ONLY_ACTIVE_WIF_KEYS')}</div><br/>
@@ -195,7 +204,7 @@ class Settings extends React.Component {
                                 <label className="floating-label" htmlFor="wifkeys_passphrase">{translate('INDEX.PASSPHRASE')}</label>
                               </div>
                               <div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}>
-                                <button type="submit" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="wifkeys_passphrase_btn">{translate('INDEX.GET_WIF_KEYS')}</button>
+                                <button type="button" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="wifkeys_passphrase_btn" onClick={this.exportWifKeys}>{translate('INDEX.GET_WIF_KEYS')}</button>
                               </div>
                             </form>
 
@@ -209,12 +218,12 @@ class Settings extends React.Component {
                       </div>
 
                       <div className="panel">
-                        <div className="panel-heading" id="ImportKeys" role="tab">
-                          <a className="panel-title collapsed" data-toggle="collapse" href="#ImportKeysTab" aria-expanded="false" aria-controls="ImportKeysTab">
+                        <div className="panel-heading" id="ImportKeys" role="tab" onClick={() => this.openTab(5)}>
+                          <a className={this.state.activeTab === 5 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse">
                             <i className="icon md-key" aria-hidden="true"></i>{translate('INDEX.IMPORT_KEYS')}
                           </a>
                         </div>
-                        <div className="panel-collapse collapse" id="ImportKeysTab" aria-labelledby="ImportKeys" role="tabpanel">
+                        <div className={this.state.activeTab === 5 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="ImportKeysTab" aria-labelledby="ImportKeys" role="tabpanel">
                           <div className="panel-body">
                             <p>
                               <div>{translate('INDEX.IMPORT_KEYS_DESC_P1')}</div><br/>
@@ -244,12 +253,12 @@ class Settings extends React.Component {
                       </div>
 
                       <div className="panel">
-                        <div className="panel-heading" id="DebugLog" role="tab">
-                          <a className="panel-title collapsed" data-toggle="collapse" data-parent="#SettingsAccordion" aria-expanded="false" aria-controls="DebugLogTab">
+                        <div className="panel-heading" id="DebugLog" role="tab" onClick={() => this.openTab(6)}>
+                          <a className={this.state.activeTab === 6 ? 'panel-title' : 'panel-title collapsed'} data-toggle="collapse" data-parent="#SettingsAccordion">
                             <i className="icon md-info" aria-hidden="true"></i>{translate('INDEX.DEBUG_LOG')}
                           </a>
                         </div>
-                        <div className="panel-collapse collapse" id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
+                        <div className={this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse'} id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
                           <div className="panel-body">
                             <p>{translate('INDEX.DEBUG_LOG_DESC')}</p>
                             <div className="col-sm-12"></div>
@@ -266,7 +275,7 @@ class Settings extends React.Component {
                                 <label className="floating-label" htmlFor="settings_select_debuglog_options">{translate('INDEX.TARGET')}</label>
                               </div>
                               <div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}>
-                                <button type="submit" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="read_debug_log_btn" onClick="Settings_LoadDebugLog()">{translate('INDEX.LOAD_DEBUG_LOG')}</button>
+                                <button type="submit" className="btn btn-primary waves-effect waves-light" data-toggle="modal" data-dismiss="modal" id="read_debug_log_btn">{translate('INDEX.LOAD_DEBUG_LOG')}</button>
                               </div>
                               <div className="col-sm-12 col-xs-12" style={{textAlign: 'center'}}>
                                 <br />

react/src/components/dashboard/walletsNav.js

@@ -22,18 +22,20 @@ class WalletsNav extends React.Component {
   }
 
   toggleSendCoinForm(display) {
-    console.log(display);
     Store.dispatch(toggleSendCoinForm(display));
   }
 
+  toggleReceiveCoinForm(display) {
+    Store.dispatch(toggleReceiveCoinForm(display));
+  }
+
   render() {
     if (this.props && this.props.ActiveCoin && !this.props.ActiveCoin.coin) {
       return (
         <div>
           <div className="col-xs-12 padding-top-20" id="no_wallet_selected">
             <div className="alert alert-info alert-dismissible" role="alert">
-              <button type="button" className="close" data-dismiss="alert" aria-label="Close">
-              </button>
+              <button type="button" className="close" data-dismiss="alert" aria-label="Close"></button>
               <span style={{fontSize: '24px', textAlign: 'center'}}>
                 <i className="icon fa-paw" aria-hidden="true"></i> {translate('INDEX.NO_WALLET_CAPS')}
               </span>
@@ -58,7 +60,7 @@ class WalletsNav extends React.Component {
                 <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')}
                 </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" onClick={() => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive)}>
                   <i className="icon fa-inbox" aria-hidden="true"></i> {translate('INDEX.RECEIVE')}
                 </button>
               </div>

react/src/reducers/activeCoin.js

@@ -1,4 +1,10 @@
-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';
+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 = {
   coin: null,

react/src/reducers/atomic.js

@@ -1,4 +1,4 @@
-import { ATOMIC } from '../actions/actionCreators'
+import { ATOMIC } from '../actions/actionCreators';
 
 export function Atomic(state = {
   response: null,

react/src/reducers/index.js

@@ -7,6 +7,7 @@ import { Main } from './main';
 import { Dashboard } from './dashboard';
 import { ActiveCoin } from './activeCoin';
 import { Atomic } from './atomic';
+import { Settings } from './settings';
 
 const rootReducer = combineReducers({
   AddCoin,
@@ -15,6 +16,7 @@ const rootReducer = combineReducers({
   Dashboard,
   ActiveCoin,
   Atomic,
+  Settings,
   routing: routerReducer,
 });
 

react/src/reducers/main.js

@@ -1,4 +1,4 @@
-import { GET_ACTIVE_COINS, LOGIN, ACTIVE_HANDLE } from '../actions/actionCreators'
+import { GET_ACTIVE_COINS, LOGIN, ACTIVE_HANDLE } from '../actions/actionCreators';
 
 export function Main(state = {
   isLoggedIn: false,
@@ -17,6 +17,7 @@ export function Main(state = {
     case ACTIVE_HANDLE:
       return Object.assign({}, state, {
         isLoggedIn: action.isLoggedIn,
+        activeHandle: action.handle,
       });
     default:
       return state;

react/src/reducers/settings.js

@@ -0,0 +1,18 @@
+import { GET_WIF_KEY } from '../actions/actionCreators';
+
+export function Settings(state = {
+  wifkey: null,
+  address: null,
+}, action) {
+  switch (action.type) {
+    case GET_WIF_KEY:
+      return Object.assign({}, state, {
+        wifkey: action.wifkey,
+        address: action.address,
+      });
+    default:
+      return state;
+  }
+}
+
+export default Settings;

react/src/styles/index.scss

@@ -56,6 +56,18 @@ body {
   margin: 30px 0;
 }
 
+#section-iguana-wallet-settings .panel-title {
+  cursor: pointer;
+  cursor: hand;
+}
+
+#section-iguana-wallet-settings .panel-title:before {
+  content: '\F273';
+}
+#section-iguana-wallet-settings .panel-title.collapsed:before {
+  content: '\F278';
+}
+
 /*.toaster .single-toast:nth-child(0) {
   bottom: 12px;
 }