addcoin form, login component template

assets/scripts/lang/en.js

@@ -92,7 +92,7 @@ const _lang = {
       'FILL_SEND_FORM': 'Fill Send Form',
       'FILL_SEND_DETAILS': 'Fill sending transaction details',
       'CONFIRMING': 'Confirming',
-      'CONFIRM_DETAILS': 'Confirm if detials are correct',
+      'CONFIRM_DETAILS': 'Confirm if details are correct',
       'PROCESSING_TX': 'Processing Tx',
       'PROCESSING_DETAILS': 'Processing and showing details',
       'SEND_FROM': 'Send From',
@@ -276,6 +276,7 @@ const _lang = {
       'ALREADY_RUNNING': 'already running',
       'STARTED_IN': 'started in',
       'IGUANA_CONN_ERR_ALT': 'Unable to connect with iguana service. 127.0.0.1:7778',
+      'KOMODO_ERR': 'Unable to start Komodod',
       'IGUANA_ARE_YOU_SURE': 'Are you sure Iguana is running?',
       'SIGNED_TX_GENERATED': 'Signed transaction generated',
       'SIGNED_TX_GENERATED_FAIL': 'Signed transaction Failed to generate',

react/src/actions/actionCreators.js

@@ -1,7 +1,9 @@
 import 'whatwg-fetch';
 import { startCurrencyAssetChain } from '../components/addcoin/payload';
+import { translate } from '../translate/translate';
 
 export const TOASTER_MESSAGE = 'TOASTER_MESSAGE';
+export const DISPLAY_ADDCOIN_MODAL = 'DISPLAY_ADDCOIN_MODAL';
 
 function triggerToaster(display, message, title, _type) {
   return {
@@ -13,21 +15,86 @@ function triggerToaster(display, message, title, _type) {
   }
 }
 
+function toggleAddcoinModalState(display, isLogin) {
+  return {
+    type: DISPLAY_ADDCOIN_MODAL,
+    display: display,
+    isLogin: isLogin,
+  }
+}
+
+export function toggleAddcoinModal(display, isLogin) {
+  return dispatch => {
+    dispatch(toggleAddcoinModalState(display, isLogin));
+  }
+}
+
 export function addCoin(coin, mode) {
 	console.log('coin, mode', coin + ' ' + mode);
   return dispatch => {
     dispatch(shepherdGetConfig(coin, mode));
-    //dispatch(triggerToaster(true, 'Coin ' + coin + ' added in ' + mode, 'Coin message', 'warning'))
   }
 }
 
-export function addCoinResult(coin, mode, acData) {
-  console.log('coin', coin);
+export function iguanaAddCoin(coin, mode, acData) {
   console.log('acData', acData);
-  //console.log('coin, mode', coin + ' ' + mode);
+  return dispatch => {
+    return fetch('http://127.0.0.1:7778', {
+      method: 'POST',
+      body: JSON.stringify(acData),
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, translate('TOASTR.FAILED_TO_ADDCOIN'), translate('TOASTR.ACCOUNT_NOTIFICATION'), 'error'))
+    })
+    .then(response => response.json())
+    .then(json => dispatch(addCoinResult(coin, mode, acData)));
+  }
+}
+
+export function shepherdHerd(coin, mode, path) {
+  const herdData = {
+    'ac_name': coin,
+    'ac_options': [
+      '-daemon=0',
+      '-server',
+      '-ac_name=' + coin,
+      '-addnode=78.47.196.146'
+    ]
+  };
+  const acData = startCurrencyAssetChain(path.result, coin, mode);
+
+  console.log('herdData', herdData);
+  return dispatch => {
+    return fetch('http://127.0.0.1:17777/shepherd/herd', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        'herd': coin !== 'zcashd' ? 'komodod' : 'zcashd',
+        'options': herdData
+      }),
+    })
+    .catch(function(error) {
+      console.log(error);
+      dispatch(triggerToaster(true, translate('FAILED_SHEPHERD_HERD'), translate('TOASTR.SERVICE_NOTIFICATION'), 'error'))
+    })
+    .then(response => response.json())
+    .then(json => dispatch(iguanaAddCoin(coin, mode, acData)));
+  }
+}
+
+export function addCoinResult(coin, mode) {
+  const modeToValue = {
+    'full': 1,
+    'basilisk': 0,
+    'native': -1,
+  };
+
   return dispatch => {
     //dispatch(shepherdGetConfig(coin, mode));
-    dispatch(triggerToaster(true, 'Coin ' + coin + ' added in ' + mode + ' mode', 'Coin message', 'success'))
+    dispatch(triggerToaster(true, coin + ' ' + translate('TOASTR.COIN_STARTED') + modeToValue[defaultMode] + ' ' + translate('TOASTR.MODE'), translate('TOASTR.COIN_NOTIFICATION'), 'success'));
   }
 }
 
@@ -45,29 +112,6 @@ export function shepherdGetConfig(coin, mode) {
       dispatch(triggerToaster(true, 'Failed to get mode config', 'Error', 'error'))
     })
     .then(response => response.json())
-    .then(json => dispatch(addCoinResult(coin, mode, startCurrencyAssetChain(json.result, coin, mode))))
+    .then(json => dispatch(shepherdHerd(coin, mode, json)));
   }
-
-/*function Shepherd_getConf(coin) {
-	var result = [],
-			ajax_data = { 'chain': coin };
-
-	console.log(ajax_data);
-	$.ajax({
-		async: false,
-		type: 'POST',
-		data: JSON.stringify(ajax_data),
-		url: 'http://127.0.0.1:17777/shepherd/getconf',
-		contentType: 'application/json', // send as JSON
-		success: function(data, textStatus, jqXHR) {
-			var AjaxOutputData = JSON.parse(data);
-			console.log(AjaxOutputData.result);
-			result.push({ 'path': AjaxOutputData.result });
-		},
-		error: function(xhr, textStatus, error) {
-		}
-	});
-
-	return result;
-}*/
 }

react/src/components/addcoin/addcoin.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
-import { addCoin, shepherdGetConfig } from '../../actions/actionCreators';
-//import { startCurrencyAssetChain } from './payload';
+import { addCoin, toggleAddcoinModal } from '../../actions/actionCreators';
 import Store from '../../store';
 
 class AddCoin extends React.Component {
@@ -22,6 +21,7 @@ class AddCoin extends React.Component {
         checked: false,
       },
       mode: -2,
+      display: false,
     };
     this.updateSelectedCoin = this.updateSelectedCoin.bind(this);
     this.updateSelectedMode = this.updateSelectedMode.bind(this);
@@ -29,6 +29,15 @@ class AddCoin extends React.Component {
     this.setBasiliskMode = this.setBasiliskMode.bind(this);
     this.setFullMode = this.setFullMode.bind(this);
     this.activateCoin = this.activateCoin.bind(this);
+    this.dismiss = this.dismiss.bind(this);
+  }
+
+  componentWillReceiveProps(props) {
+    if (props) {
+      this.setState(Object.assign({}, this.state, {
+        display: props.display,
+      }));
+    }
   }
 
   updateSelectedCoin(e) {
@@ -88,28 +97,31 @@ class AddCoin extends React.Component {
     this.updateSelectedMode('1');
   }
 
-  handleForm(e) {
+  /*handleForm(e) {
     e.preventDefault();
     e.target.reset();
     this.setState({
       mode: '',
       selectedCoin: null,
     });
-  }
+  }*/
 
   activateCoin() {
-    //console.log(startCurrencyAssetChain(this.state.selectedCoin.split('|')[0], this.state.mode));
     Store.dispatch(addCoin(this.state.selectedCoin.split('|')[0], this.state.mode));
   }
 
+  dismiss() {
+    Store.dispatch(toggleAddcoinModal(false, false));
+  }
+
   render() {
     return (
       <div>
-        <div className="modal show modal-3d-sign in add-coin-modal" id="AddCoinDilogModel-login" aria-hidden="true" aria-labelledby="AddCoinDilogModel-login" role="dialog" tabIndex="-1">
+        <div className={'modal modal-3d-sign add-coin-modal ' + (this.state.display ? 'show in' : 'fade hide')} id="AddCoinDilogModel-login" aria-hidden="true" aria-labelledby="AddCoinDilogModel-login" role="dialog" tabIndex="-1">
           <div className="modal-dialog modal-center modal-lg">
             <div className="modal-content">
               <div className="modal-header bg-orange-a400 wallet-send-header">
-                <button type="button" className="close white" data-dismiss="modal" aria-label="Close">
+                <button type="button" className="close white" data-dismiss="modal" aria-label="Close" onClick={this.dismiss}>
                   <span aria-hidden="true">×</span>
                 </button>
                 <h4 className="modal-title white">{translate('INDEX.SELECT_A_COIN')}</h4>
@@ -243,7 +255,7 @@ class AddCoin extends React.Component {
             </div>
           </div>
         </div>
-        <div className="modal-backdrop fade in"></div>
+        <div className={'modal-backdrop ' + (this.state.display ? 'show in' : 'fade hide')}></div>
       </div>
     );
   }

react/src/components/addcoin/payload.js

@@ -57,36 +57,11 @@ function checkCoinType(coin) {
 export function startCurrencyAssetChain(confpath, coin, mode) {
 	var AddCoinDataPayload = {};
 	var tmpPendValue = 4;
+	var tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth');
 
 	if ( checkCoinType(coin) === 'currency_ac' ) {
-		/*var AddCoinDataPayload = {},
-	  		tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
-	  		AddCoinData;
-
-		console.log('currency_ac_mode', mode);
-	  logincoinfullname = coin;
-
-	  if ( mode == '1' ) {
-	    logincoinmodeinfo = 'Full';
-	    AddCoinData = {
-	      'userpass': tmpIguanaRPCAuth,
-	      'agent': 'iguana',
-	      'method': 'paxfiats',
-	      'mask': 1
-			};
-	  }
-	  if ( mode == '0' ) {
-	    logincoinmodeinfo = 'Basilisk';
-	    AddCoinData = {
-	      'userpass': tmpIguanaRPCAuth,
-	      'agent': 'basilisk',
-	      'method': 'paxfiats',
-	      'mask': 1
-			};
-	  }*/
-
 		var _payloadVar = {
-			'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'),
+			'userpass': tmpIguanaRPCAuth,
 			'unitval': '20',
 			'zcash': 1,
 			'RELAY': mode,

react/src/components/app/app.js

@@ -6,6 +6,7 @@ import Main from '../main/main';
 function mapStateToProps(state) {
   return {
     toaster: state.toaster,
+    AddCoin: state.AddCoin,
   };
 }
 

react/src/components/login/login.js

@@ -1,17 +1,35 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import { toggleAddcoinModal } from '../../actions/actionCreators';
+import Store from '../../store';
 
 class Login extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true,
+      ieWarning: false,
+      login: false,
+      signup: false,
+      activateCoin: true,
+    };
+    this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this);
+  }
+
+  toggleActivateCoinForm() {
+    Store.dispatch(toggleAddcoinModal(true, false));
+  }
+
   render() {
     return (
-      <div id="wallet-login">
+      <div id="wallet-login" className={this.state.display ? 'show' : 'hide'}>
         <div className="page animsition vertical-align text-center fade-in" data-animsition-in="fade-in" data-animsition-out="fade-out">
           <div className="page-content vertical-align-middle">
             <div className="brand">
               <img className="brand-img" src="assets/images/easydex-logo-big.png" alt="SuperNET Iguana" />
             </div>
 
-            <div id="section-ie-warning" style={{ display: 'none' }}>
+            <div id="section-ie-warning" className={this.state.ieWarning ? 'show' : 'hide'}>
               <div className="panel">
                 <div className="panel-heading">
                   <h3 className="panel-title">{translate('INDEX.UNSUPPORTED_BROWSER')}</h3>
@@ -25,7 +43,7 @@ class Login extends React.Component {
                 </div>
                 <div className="panel-body">
                   <p style={{ color: '#424242' }}>
-                    {translate('INDEX.PLEASE_USE')} <a href="https://www.google.com/chrome/">Google Chrome</a> <span data-lang="INDEX.OR"></span> <a href="https://www.firefox.com">Mozilla FireFox</a> {translate('INDEX.TO_USE')} EasyDEX-GUI. {translate('INDEX.PLEASE_CLICK_ON')}.
+                    {translate('INDEX.PLEASE_USE')} <a href="https://www.google.com/chrome/">Google Chrome</a> {translate('INDEX.OR')} <a href="https://www.firefox.com">Mozilla FireFox</a> {translate('INDEX.TO_USE')} EasyDEX-GUI. {translate('INDEX.PLEASE_CLICK_ON')}.
                   </p>
                   <div className="col-sm-6 col-xs-6">
                     <a href="https://www.google.com/chrome/"><img className="brand-img" src="assets/images/browsers/chrome.png" alt="Google Chrome" /></a>
@@ -37,7 +55,7 @@ class Login extends React.Component {
               </div>
             </div>
 
-            <div id="section-login" style={{ display: 'none' }}>
+            <div id="section-login" className={this.state.login ? 'show' : 'hide'}>
               <h4 style={{ color: '#fff' }} id="login-welcome">{translate('INDEX.WELCOME_LOGIN')}</h4>
               <form className="login-form" autoComplete="off">
                 <div className="form-group form-material floating">
@@ -52,14 +70,14 @@ class Login extends React.Component {
               </form>
             </div>
 
-            <div id="section-login-addcoin-btn">
+            <div id="section-login-addcoin-btn" className={this.state.activateCoin ? 'show' : 'hide'}>
               <h4 style={{ color: '#fff' }} id="login-welcome">{translate('INDEX.WELCOME_PLEASE_ADD')}</h4>
               <div className="form-group form-material floating" style={{width: '540px', margin: '30px 0'}}>
-                <button className="btn btn-lg btn-primary btn-block ladda-button" id="start-coin-login" role="menuitem" data-edexcoinmenu="COIN" data-target="#AddCoinDilogModel-login" data-toggle="modal" data-style="expand-left" data-plugin="ladda"><span className="ladda-label">{translate('INDEX.ACTIVATE_COIN')}</span></button>
+                <button className="btn btn-lg btn-primary btn-block ladda-button" id="start-coin-login" role="menuitem" data-edexcoinmenu="COIN" data-target="#AddCoinDilogModel-login" data-toggle="modal" data-style="expand-left" data-plugin="ladda" onClick={this.toggleActivateCoinForm}><span className="ladda-label">{translate('INDEX.ACTIVATE_COIN')}</span></button>
               </div>
             </div>
 
-            <div id="section-register" style={{ display: 'none' }}>
+            <div id="section-register" className={this.state.signup ? 'show' : 'hide'}>
               <form className="register-form" role="form" autoComplete="off">
                 <h4 className="hint" style={{ color: '#fff' }}>
                   {translate('INDEX.SELECT_SEED_TYPE')}:

react/src/components/main/walletMain.js

@@ -7,7 +7,7 @@ class WalletMain extends React.Component {
   render() {
     return (
       <div>
-        <AddCoin {...this.props} />
+        <AddCoin {...this.props.AddCoin} />
         <Login {...this.props} />
         <Toaster {...this.props.toaster} />
       </div>

react/src/components/toaster/toaster.js

@@ -36,19 +36,22 @@ class Toaster extends React.Component {
     this.setInitialState();
   }
 
+  // TODO: multiple toasts
   renderToast() {
     setTimeout(() => {
-      //this.setInitialState();
+      this.setInitialState();
     }, 5000);
 
     return (
-      <div id="toast-container" className="toast-bottom-right" aria-live="polite" role="alert">
+      <div className="toaster">
+        <div id="toast-container" className="single-toast toast-bottom-right" aria-live="polite" role="alert">
           <div className={"toast toast-" + this.state.type}>
             <button className="toast-close-button" role="button" onClick={this.dismissToast}>×</button>
             <div className="toast-title">{this.state.title}</div>
             <div className="toast-message">{this.state.message}</div>
           </div>
         </div>
+      </div>
     );
   }
 

react/src/reducers/addcoin.js

@@ -0,0 +1,18 @@
+import { DISPLAY_ADDCOIN_MODAL } from '../actions/actionCreators'
+
+export function AddCoin(state = {
+  display: false,
+  isLogin: false,
+}, action) {
+  switch (action.type) {
+    case DISPLAY_ADDCOIN_MODAL:
+      return Object.assign({}, state, {
+        display: action.display,
+        isLogin: action.isLogin
+      });
+    default:
+      return state;
+	}
+}
+
+export default AddCoin;

react/src/reducers/coins.js

@@ -1,16 +0,0 @@
-import { ADD_COIN } from '../actions/actionCreators'
-
-export function coins(state = {
-  items: []
-}, action) {
-  switch (action.type) {
-    case ADD_COIN:
-      return Object.assign({}, state, {
-        items: action.coins
-      });
-    default:
-      return state;
-	}
-}
-
-export default coins;

react/src/reducers/index.js

@@ -1,12 +1,12 @@
 import { combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux';
 
-//import { coins } from './coins';
+import { AddCoin } from './addcoin';
 import { toaster } from './toaster';
 //import { loader } from './loader';
 
 const rootReducer = combineReducers({
-  //coins,
+  AddCoin,
   toaster,
   //loader,
   routing: routerReducer,

react/src/store.js

@@ -10,6 +10,7 @@ const loggerMiddleware = createLogger();
 
 const defaultState = {
   toaster: null,
+  AddCoin: null,
 };
 
 const enhancers = compose(window.devToolsExtension ? window.devToolsExtension() : f => f);

react/src/styles/index.scss

@@ -30,3 +30,16 @@
 @import '../assets/global/fonts/web-icons/web-icons.css';
 @import '../assets/global/fonts/brand-icons/brand-icons.min.css';
 @import '../assets/skins/orange.min.css';
+
+/*.toaster .single-toast:nth-child(0) {
+  bottom: 12px;
+}
+.toaster .single-toast:nth-child(1) {
+  bottom: 102px;
+}
+.toaster .single-toast:nth-child(2) {
+  bottom: 192px;
+}
+.toaster .single-toast:nth-child(3) {
+  bottom: 282px;
+}*/

react/src/translate/en.js

@@ -92,7 +92,7 @@ export const _lang = {
       'FILL_SEND_FORM': 'Fill Send Form',
       'FILL_SEND_DETAILS': 'Fill sending transaction details',
       'CONFIRMING': 'Confirming',
-      'CONFIRM_DETAILS': 'Confirm if detials are correct',
+      'CONFIRM_DETAILS': 'Confirm if details are correct',
       'PROCESSING_TX': 'Processing Tx',
       'PROCESSING_DETAILS': 'Processing and showing details',
       'SEND_FROM': 'Send From',
@@ -276,6 +276,7 @@ export const _lang = {
       'ALREADY_RUNNING': 'already running',
       'STARTED_IN': 'started in',
       'IGUANA_CONN_ERR_ALT': 'Unable to connect with iguana service. 127.0.0.1:7778',
+      'KOMODO_ERR': 'Unable to start Komodod',
       'IGUANA_ARE_YOU_SURE': 'Are you sure Iguana is running?',
       'SIGNED_TX_GENERATED': 'Signed transaction generated',
       'SIGNED_TX_GENERATED_FAIL': 'Signed transaction Failed to generate',
@@ -308,7 +309,9 @@ export const _lang = {
       'PRIV_KEY_NOT_IMPORTED': 'Private Key is not imported.',
       'NULL RETURN': 'null return from iguana_bitcoinRPC',
       'ADDED_TO': 'added to',
-      'SUCCESSFULLY': 'Successfully'
+      'SUCCESSFULLY': 'Successfully',
+      'FAILED_TO_ADDCOIN': 'Failed to add iguana coin',
+      'FAILED_SHEPHERD_HERD': 'Failed to get execute shepherd herd'
     },
     'COIN_WALLETS': {
       'TX_FAILED': 'Transaction Failed',