dashboard components #3

8 years ago · 232de8a17f
20 changed files with 1234 additions and 599 deletions
--- a/react/src/actions/actionCreators.js
+++ b/react/src/actions/actionCreators.js
@ -1,5 +1,6 @@
 import 'whatwg-fetch';
 import { startCurrencyAssetChain } from '../components/addcoin/payload';
+import { copyToClipboard } from '../util/copyToClipboard';
 import { translate } from '../translate/translate';

 export const TOASTER_MESSAGE = 'TOASTER_MESSAGE';
@ -9,6 +10,33 @@ export const LOGIN = 'LOGIN';
 export const ACTIVE_HANDLE = 'ACTIVE_HANDLE';
 export const DASHBOARD_SECTION_CHANGE = 'DASHBOARD_SECTION_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) {
  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) {
  return {
    type: DASHBOARD_SECTION_CHANGE,
@ -68,16 +137,24 @@ export function dashboardChangeSection(sectionName) {
  }
 }

-function dashboardChangeActiveCoinState(coin) {
+function dashboardChangeActiveCoinState(coin, mode) {
  return {
-    type: DASHBOARD_SECTION_CHANGE,
+    type: DASHBOARD_ACTIVE_COIN_CHANGE,
    coin: coin,
+    mode: mode,
+  }
+}
+
+function iguanaEdexBalanceState(json) {
+  return {
+    type: DASHBOARD_ACTIVE_COIN_BALANCE,
+    balance: json && json.result ? json.result : 0,
  }
 }

-export function dashboardChangeActiveCoin(coin) {
+export function dashboardChangeActiveCoin(coin, mode) {
  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) {
 	console.log('coin, mode', coin + ' ' + mode);
  return dispatch => {
@ -149,10 +246,11 @@ export function addCoinResult(coin, mode) {
    '0': 'basilisk',
    '-1': 'native'
  };
-  console.log('mode', mode);

  return dispatch => {
    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 fetch('http://127.0.0.1:7778', {
      method: 'POST',
@ -241,7 +339,27 @@ export function iguanaActiveHandle() {
      dispatch(triggerToaster(true, 'Error iguanaActiveHandle', 'Error', 'error'))
    })
    .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)));
  }
 }

--- a/react/src/components/addcoin/payload.js
+++ b/react/src/components/addcoin/payload.js
@ -1,4 +1,4 @@
-function checkCoinType(coin) {
+export function checkCoinType(coin) {
 	if (coin === 'USD' ||
 			coin === 'RON' ||
 			coin === 'RUB' ||
@ -59,494 +59,456 @@ export function startCurrencyAssetChain(confpath, coin, mode) {
 	var tmpPendValue = 4;
 	var tmpIguanaRPCAuth = 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth');

-	if ( checkCoinType(coin) === 'currency_ac' ) {
-		var _payloadVar = {
-			'userpass': tmpIguanaRPCAuth,
-			'unitval': '20',
-			'zcash': 1,
-			'RELAY': mode,
-			'VALIDATE': mode,
-			'prefetchlag': -1,
-			'poll': 100,
-			'active': 1,
-			'agent': 'iguana',
-			'method': 'addcoin',
-			'startpend': tmpPendValue,
-			'endpend': tmpPendValue,
-			'services': 129,
-			'maxpeers': 8,
-			'newcoin': coin,
-			'name': coin,
-			'hasheaders': 1,
-			'useaddmultisig': 0,
+	var _payloadVar = {
+		'userpass': tmpIguanaRPCAuth,
+		'unitval': '20',
+		'zcash': 1,
+		'RELAY': mode,
+		'VALIDATE': mode,
+		'prefetchlag': -1,
+		'poll': 100,
+		'active': 1,
+		'agent': 'iguana',
+		'method': 'addcoin',
+		'startpend': tmpPendValue,
+		'endpend': tmpPendValue,
+		'services': 129,
+		'maxpeers': 8,
+		'newcoin': coin,
+		'name': coin,
+		'hasheaders': 1,
+		'useaddmultisig': 0,
+		'netmagic': '2d8e7803',
+		'p2p': 13966,
+		'rpc': 13967,
+		'pubval': 60,
+		'p2shval': 85,
+		'wifval': 188,
+		'txfee_satoshis': '10000',
+		'isPoS': 0,
+		'minoutput': 10000,
+		'minconfirms': 2,
+		'genesishash': '027e3758c3a65b12aa1046462b486d0a63bfa1beae327897f56c5cfb7daaae71',
+		'protover': 170002,
+		'genesisblock': '0100000000000000000000000000000000000000000000000000000000000000000000003ba3edfd7a7b12b27ac72c3e67768f617fc81bc3888a51323a9fb8aa4b1e5e4a000000000000000000000000000000000000000000000000000000000000000029ab5f490f0f0f200b00000000000000000000000000000000000000000000000000000000000000fd4005000d5ba7cda5d473947263bf194285317179d2b0d307119c2e7cc4bd8ac456f0774bd52b0cd9249be9d40718b6397a4c7bbd8f2b3272fed2823cd2af4bd1632200ba4bf796727d6347b225f670f292343274cc35099466f5fb5f0cd1c105121b28213d15db2ed7bdba490b4cedc69742a57b7c25af24485e523aadbb77a0144fc76f79ef73bd8530d42b9f3b9bed1c135ad1fe152923fafe98f95f76f1615e64c4abb1137f4c31b218ba2782bc15534788dda2cc08a0ee2987c8b27ff41bd4e31cd5fb5643dfe862c9a02ca9f90c8c51a6671d681d04ad47e4b53b1518d4befafefe8cadfb912f3d03051b1efbf1dfe37b56e93a741d8dfd80d576ca250bee55fab1311fc7b3255977558cdda6f7d6f875306e43a14413facdaed2f46093e0ef1e8f8a963e1632dcbeebd8e49fd16b57d49b08f9762de89157c65233f60c8e38a1f503a48c555f8ec45dedecd574a37601323c27be597b956343107f8bd80f3a925afaf30811df83c402116bb9c1e5231c70fff899a7c82f73c902ba54da53cc459b7bf1113db65cc8f6914d3618560ea69abd13658fa7b6af92d374d6eca9529f8bd565166e4fcbf2a8dfb3c9b69539d4d2ee2e9321b85b331925df195915f2757637c2805e1d4131e1ad9ef9bc1bb1c732d8dba4738716d351ab30c996c8657bab39567ee3b29c6d054b711495c0d52e1cd5d8e55b4f0f0325b97369280755b46a02afd54be4ddd9f77c22272b8bbb17ff5118fedbae2564524e797bd28b5f74f7079d532ccc059807989f94d267f47e724b3f1ecfe00ec9e6541c961080d8891251b84b4480bc292f6a180bea089fef5bbda56e1e41390d7c0e85ba0ef530f7177413481a226465a36ef6afe1e2bca69d2078712b3912bba1a99b1fbff0d355d6ffe726d2bb6fbc103c4ac5756e5bee6e47e17424ebcbf1b63d8cb90ce2e40198b4f4198689daea254307e52a25562f4c1455340f0ffeb10f9d8e914775e37d0edca019fb1b9c6ef81255ed86bc51c5391e0591480f66e2d88c5f4fd7277697968656a9b113ab97f874fdd5f2465e5559533e01ba13ef4a8f7a21d02c30c8ded68e8c54603ab9c8084ef6d9eb4e92c75b078539e2ae786ebab6dab73a09e0aa9ac575bcefb29e930ae656e58bcb513f7e3c17e079dce4f05b5dbc18c2a872b22509740ebe6a3903e00ad1abc55076441862643f93606e3dc35e8d9f2caef3ee6be14d513b2e062b21d0061de3bd56881713a1a5c17f5ace05e1ec09da53f99442df175a49bd154aa96e4949decd52fed79ccf7ccbce32941419c314e374e4a396ac553e17b5340336a1a25c22f9e42a243ba5404450b650acfc826a6e432971ace776e15719515e1634ceb9a4a35061b668c74998d3dfb5827f6238ec015377e6f9c94f38108768cf6e5c8b132e0303fb5a200368f845ad9d46343035a6ff94031df8d8309415bb3f6cd5ede9c135fdabcc030599858d803c0f85be7661c88984d88faa3d26fb0e9aac0056a53f1b5d0baed713c853c4a2726869a0a124a8a5bbc0fc0ef80c8ae4cb53636aa02503b86a1eb9836fcc259823e2692d921d88e1ffc1e6cb2bde43939ceb3f32a611686f539f8f7c9f0bf00381f743607d40960f06d347d1cd8ac8a51969c25e37150efdf7aa4c2037a2fd0516fb444525ab157a0ed0a7412b2fa69b217fe397263153782c0f64351fbdf2678fa0dc8569912dcd8e3ccad38f34f23bbbce14c6a26ac24911b308b82c7e43062d180baeac4ba7153858365c72c63dcf5f6a5b08070b730adb017aeae925b7d0439979e2679f45ed2f25a7edcfd2fb77a8794630285ccb0a071f5cce410b46dbf9750b0354aae8b65574501cc69efb5b6a43444074fee116641bb29da56c2b4a7f456991fc92b2',
+		'debug': 0,
+		'seedipaddr': '78.47.196.146'
+	};
+
+	if (mode === '-1') {
+		var _payloadVarRegular = Object.assign({}, _payloadVar);
+		delete _payloadVarRegular.userpass;
+		_payloadVarRegular.RELAY = -1;
+		_payloadVarRegular.VALIDATE = 1;
+		_payloadVarRegular.startpend = 4;
+		_payloadVarRegular.endpend = 4;
+		_payloadVarRegular.path = confpath;
+
+		const USDDiff = {
+			'coin': 'USD',
+			'conf': 'USD.conf'
+		};
+		AddCoinDataPayload.USD = Object.assign({}, _payloadVarRegular, USDDiff);
+
+		const RONDiff = {
+			'coin': 'RON',
+			'conf': 'RON.conf'
+		};
+		AddCoinDataPayload.RON = Object.assign({}, _payloadVarRegular, RONDiff);
+
+		const RUBDiff = {
+			'coin': 'RUB',
+			'conf': 'RUB.conf'
+		};
+		AddCoinDataPayload.RUB = Object.assign({}, _payloadVarRegular, RUBDiff);
+
+		const SEKDiff = {
+			'coin': 'SEK',
+			'conf': 'SEK.conf'
+		};
+		AddCoinDataPayload.SEK = Object.assign({}, _payloadVarRegular, SEKDiff);
+
+		const SGDDiff = {
+			'coin': 'SGD',
+			'conf': 'SGD.conf'
+		};
+		AddCoinDataPayload.SGD = Object.assign({}, _payloadVarRegular, SGDDiff);
+
+		const THBDiff = {
+			'coin': 'THB',
+			'conf': 'THB.conf'
+		};
+		AddCoinDataPayload.THB = Object.assign({}, _payloadVarRegular, THBDiff);
+
+		const TRYDiff = {
+			'coin': 'TRY',
+			'conf': 'TRY.conf'
+		};
+		AddCoinDataPayload.TRY = Object.assign({}, _payloadVarRegular, TRYDiff);
+
+		const ZARDiff = {
+			'coin': 'ZAR',
+			'conf': 'ZAR.conf'
+		};
+		AddCoinDataPayload.ZAR = Object.assign({}, _payloadVarRegular, ZARDiff);
+
+		const CNYDiff = {
+			'coin': 'CNY',
+			'conf': 'CNY.conf'
+		};
+		AddCoinDataPayload.CNY = Object.assign({}, _payloadVarRegular, CNYDiff);
+
+		const CZKDiff = {
+			'coin': 'CZK',
+			'conf': 'CZK.conf'
+		};
+		AddCoinDataPayload.CZK = Object.assign({}, _payloadVarRegular, CZKDiff);
+
+		const DKKDiff = {
+			'coin': 'DKK',
+			'conf': 'DKK.conf'
+		};
+		AddCoinDataPayload.DKK = Object.assign({}, _payloadVarRegular, DKKDiff);
+
+		const EURDiff = {
+			'coin': 'EUR',
+			'conf': 'EUR.conf'
+		};
+		AddCoinDataPayload.EUR = Object.assign({}, _payloadVarRegular, EURDiff);
+
+		const GBPDiff = {
+			'coin': 'GBP',
+			'conf': 'GBP.conf'
+		};
+		AddCoinDataPayload.GBP = Object.assign({}, _payloadVarRegular, GBPDiff);
+
+		const HKDDiff = {
+			'coin': 'HKD',
+			'conf': 'HKD.conf'
+		};
+		AddCoinDataPayload.HKD = Object.assign({}, _payloadVarRegular, HKDDiff);
+
+		const HUFDiff = {
+			'coin': 'HUF',
+			'conf': 'HUF.conf'
+		};
+		AddCoinDataPayload.HUF = Object.assign({}, _payloadVarRegular, HUFDiff);
+
+		const IDRDiff = {
+			'coin': 'IDR',
+			'conf': 'IDR.conf'
+		};
+		AddCoinDataPayload.IDR = Object.assign({}, _payloadVarRegular, IDRDiff);
+
+		const ILSDiff = {
+			'coin': 'ILS',
+			'conf': 'ILS.conf'
+		};
+		AddCoinDataPayload.ILS = Object.assign({}, _payloadVarRegular, ILSDiff);
+
+		const INRDiff = {
+			'coin': 'INR',
+			'conf': 'INR.conf'
+		};
+		AddCoinDataPayload.INR = Object.assign({}, _payloadVarRegular, INRDiff);
+
+		const JPYDiff = {
+			'coin': 'JPY',
+			'conf': 'JPY.conf'
+		};
+		AddCoinDataPayload.JPY = Object.assign({}, _payloadVarRegular, JPYDiff);
+
+		const KRWDiff = {
+			'coin': 'KRW',
+			'conf': 'KRW.conf'
+		};
+		AddCoinDataPayload.KRW = Object.assign({}, _payloadVarRegular, KRWDiff);
+
+		const MXNDiff = {
+			'coin': 'MXN',
+			'conf': 'MXN.conf'
+		};
+		AddCoinDataPayload.MXN = Object.assign({}, _payloadVarRegular, MXNDiff);
+
+		const MYRDiff = {
+			'coin': 'MYR',
+			'conf': 'MYR.conf'
+		};
+		AddCoinDataPayload.MYR = Object.assign({}, _payloadVarRegular, MYRDiff);
+
+		const NOKDiff = {
+			'coin': 'NOK',
+			'conf': 'NOK.conf'
+		};
+		AddCoinDataPayload.NOK = Object.assign({}, _payloadVarRegular, NOKDiff);
+
+		const NZDDiff = {
+			'coin': 'NZD',
+			'conf': 'NZD.conf'
+		};
+		AddCoinDataPayload.NZD = Object.assign({}, _payloadVarRegular, NZDDiff);
+
+		const PHPDiff = {
+			'coin': 'PHP',
+			'conf': 'PHP.conf'
+		};
+		AddCoinDataPayload.PHP = Object.assign({}, _payloadVarRegular, PHPDiff);
+
+		const PLNDiff = {
+			'coin': 'PLN',
+			'conf': 'PLN.conf'
+		};
+		AddCoinDataPayload.PLN = Object.assign({}, _payloadVarRegular, PLNDiff);
+
+		const AUDDiff = {
+			'coin': 'AUD',
+			'conf': 'AUD.conf'
+		};
+		AddCoinDataPayload.AUD = Object.assign({}, _payloadVarRegular, AUDDiff);
+
+		const BGNDiff = {
+			'coin': 'BGN',
+			'conf': 'BGN.conf'
+		};
+		AddCoinDataPayload.BGN = Object.assign({}, _payloadVarRegular, BGNDiff);
+
+		const BRLDiff = {
+			'coin': 'BRL',
+			'conf': 'BRL.conf'
+		};
+		AddCoinDataPayload.BRL = Object.assign({}, _payloadVarRegular, BRLDiff);
+
+		const CADDiff = {
+			'coin': 'CAD',
+			'conf': 'CAD.conf'
+		};
+		AddCoinDataPayload.CAD = Object.assign({}, _payloadVarRegular, CADDiff);
+
+		const CHFDiff = {
+			'coin': 'CHF',
+			'conf': 'CHF.conf'
+		};
+		AddCoinDataPayload.CHF = Object.assign({}, _payloadVarRegular, CHFDiff);
+
+		return AddCoinDataPayload[coin];
+	} else {
+		const USDDiff = {
 			'netmagic': '2d8e7803',
 			'p2p': 13966,
-			'rpc': 13967,
-			'pubval': 60,
-			'p2shval': 85,
-			'wifval': 188,
-			'txfee_satoshis': '10000',
-			'isPoS': 0,
-			'minoutput': 10000,
-			'minconfirms': 2,
-			'genesishash': '027e3758c3a65b12aa1046462b486d0a63bfa1beae327897f56c5cfb7daaae71',
-			'protover': 170002,
-			'genesisblock': '0100000000000000000000000000000000000000000000000000000000000000000000003ba3edfd7a7b12b27ac72c3e67768f617fc81bc3888a51323a9fb8aa4b1e5e4a000000000000000000000000000000000000000000000000000000000000000029ab5f490f0f0f200b00000000000000000000000000000000000000000000000000000000000000fd4005000d5ba7cda5d473947263bf194285317179d2b0d307119c2e7cc4bd8ac456f0774bd52b0cd9249be9d40718b6397a4c7bbd8f2b3272fed2823cd2af4bd1632200ba4bf796727d6347b225f670f292343274cc35099466f5fb5f0cd1c105121b28213d15db2ed7bdba490b4cedc69742a57b7c25af24485e523aadbb77a0144fc76f79ef73bd8530d42b9f3b9bed1c135ad1fe152923fafe98f95f76f1615e64c4abb1137f4c31b218ba2782bc15534788dda2cc08a0ee2987c8b27ff41bd4e31cd5fb5643dfe862c9a02ca9f90c8c51a6671d681d04ad47e4b53b1518d4befafefe8cadfb912f3d03051b1efbf1dfe37b56e93a741d8dfd80d576ca250bee55fab1311fc7b3255977558cdda6f7d6f875306e43a14413facdaed2f46093e0ef1e8f8a963e1632dcbeebd8e49fd16b57d49b08f9762de89157c65233f60c8e38a1f503a48c555f8ec45dedecd574a37601323c27be597b956343107f8bd80f3a925afaf30811df83c402116bb9c1e5231c70fff899a7c82f73c902ba54da53cc459b7bf1113db65cc8f6914d3618560ea69abd13658fa7b6af92d374d6eca9529f8bd565166e4fcbf2a8dfb3c9b69539d4d2ee2e9321b85b331925df195915f2757637c2805e1d4131e1ad9ef9bc1bb1c732d8dba4738716d351ab30c996c8657bab39567ee3b29c6d054b711495c0d52e1cd5d8e55b4f0f0325b97369280755b46a02afd54be4ddd9f77c22272b8bbb17ff5118fedbae2564524e797bd28b5f74f7079d532ccc059807989f94d267f47e724b3f1ecfe00ec9e6541c961080d8891251b84b4480bc292f6a180bea089fef5bbda56e1e41390d7c0e85ba0ef530f7177413481a226465a36ef6afe1e2bca69d2078712b3912bba1a99b1fbff0d355d6ffe726d2bb6fbc103c4ac5756e5bee6e47e17424ebcbf1b63d8cb90ce2e40198b4f4198689daea254307e52a25562f4c1455340f0ffeb10f9d8e914775e37d0edca019fb1b9c6ef81255ed86bc51c5391e0591480f66e2d88c5f4fd7277697968656a9b113ab97f874fdd5f2465e5559533e01ba13ef4a8f7a21d02c30c8ded68e8c54603ab9c8084ef6d9eb4e92c75b078539e2ae786ebab6dab73a09e0aa9ac575bcefb29e930ae656e58bcb513f7e3c17e079dce4f05b5dbc18c2a872b22509740ebe6a3903e00ad1abc55076441862643f93606e3dc35e8d9f2caef3ee6be14d513b2e062b21d0061de3bd56881713a1a5c17f5ace05e1ec09da53f99442df175a49bd154aa96e4949decd52fed79ccf7ccbce32941419c314e374e4a396ac553e17b5340336a1a25c22f9e42a243ba5404450b650acfc826a6e432971ace776e15719515e1634ceb9a4a35061b668c74998d3dfb5827f6238ec015377e6f9c94f38108768cf6e5c8b132e0303fb5a200368f845ad9d46343035a6ff94031df8d8309415bb3f6cd5ede9c135fdabcc030599858d803c0f85be7661c88984d88faa3d26fb0e9aac0056a53f1b5d0baed713c853c4a2726869a0a124a8a5bbc0fc0ef80c8ae4cb53636aa02503b86a1eb9836fcc259823e2692d921d88e1ffc1e6cb2bde43939ceb3f32a611686f539f8f7c9f0bf00381f743607d40960f06d347d1cd8ac8a51969c25e37150efdf7aa4c2037a2fd0516fb444525ab157a0ed0a7412b2fa69b217fe397263153782c0f64351fbdf2678fa0dc8569912dcd8e3ccad38f34f23bbbce14c6a26ac24911b308b82c7e43062d180baeac4ba7153858365c72c63dcf5f6a5b08070b730adb017aeae925b7d0439979e2679f45ed2f25a7edcfd2fb77a8794630285ccb0a071f5cce410b46dbf9750b0354aae8b65574501cc69efb5b6a43444074fee116641bb29da56c2b4a7f456991fc92b2',
-			'debug': 0,
-			'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') {
-			var _payloadVarRegular = Object.assign({}, _payloadVar);
-			delete _payloadVarRegular.userpass;
-			_payloadVarRegular.RELAY = -1;
-			_payloadVarRegular.VALIDATE = 1;
-			_payloadVarRegular.startpend = 4;
-			_payloadVarRegular.endpend = 4;
-			_payloadVarRegular.path = confpath;
-
-			const USDDiff = {
-				'coin': 'USD',
-				'conf': 'USD.conf'
-			};
-			AddCoinDataPayload.USD = Object.assign({}, _payloadVarRegular, USDDiff);
-
-			const RONDiff = {
-				'coin': 'RON',
-				'conf': 'RON.conf'
-			};
-			AddCoinDataPayload.RON = Object.assign({}, _payloadVarRegular, RONDiff);
-
-			const RUBDiff = {
-				'coin': 'RUB',
-				'conf': 'RUB.conf'
-			};
-			AddCoinDataPayload.RUB = Object.assign({}, _payloadVarRegular, RUBDiff);
-
-			const SEKDiff = {
-				'coin': 'SEK',
-				'conf': 'SEK.conf'
-			};
-			AddCoinDataPayload.SEK = Object.assign({}, _payloadVarRegular, SEKDiff);
-
-			const SGDDiff = {
-				'coin': 'SGD',
-				'conf': 'SGD.conf'
-			};
-			AddCoinDataPayload.SGD = Object.assign({}, _payloadVarRegular, SGDDiff);
-
-			const THBDiff = {
-				'coin': 'THB',
-				'conf': 'THB.conf'
-			};
-			AddCoinDataPayload.THB = Object.assign({}, _payloadVarRegular, THBDiff);
-
-			const TRYDiff = {
-				'coin': 'TRY',
-				'conf': 'TRY.conf'
-			};
-			AddCoinDataPayload.TRY = Object.assign({}, _payloadVarRegular, TRYDiff);
-
-			const ZARDiff = {
-				'coin': 'ZAR',
-				'conf': 'ZAR.conf'
-			};
-			AddCoinDataPayload.ZAR = Object.assign({}, _payloadVarRegular, ZARDiff);
-
-			const CNYDiff = {
-				'coin': 'CNY',
-				'conf': 'CNY.conf'
-			};
-			AddCoinDataPayload.CNY = Object.assign({}, _payloadVarRegular, CNYDiff);
-
-			const CZKDiff = {
-				'coin': 'CZK',
-				'conf': 'CZK.conf'
-			};
-			AddCoinDataPayload.CZK = Object.assign({}, _payloadVarRegular, CZKDiff);
-
-			const DKKDiff = {
-				'coin': 'DKK',
-				'conf': 'DKK.conf'
-			};
-			AddCoinDataPayload.DKK = Object.assign({}, _payloadVarRegular, DKKDiff);
-
-			const EURDiff = {
-				'coin': 'EUR',
-				'conf': 'EUR.conf'
-			};
-			AddCoinDataPayload.EUR = Object.assign({}, _payloadVarRegular, EURDiff);
-
-			const GBPDiff = {
-				'coin': 'GBP',
-				'conf': 'GBP.conf'
-			};
-			AddCoinDataPayload.GBP = Object.assign({}, _payloadVarRegular, GBPDiff);
-
-			const HKDDiff = {
-				'coin': 'HKD',
-				'conf': 'HKD.conf'
-			};
-			AddCoinDataPayload.HKD = Object.assign({}, _payloadVarRegular, HKDDiff);
-
-			const HUFDiff = {
-				'coin': 'HUF',
-				'conf': 'HUF.conf'
-			};
-			AddCoinDataPayload.HUF = Object.assign({}, _payloadVarRegular, HUFDiff);
-
-			const IDRDiff = {
-				'coin': 'IDR',
-				'conf': 'IDR.conf'
-			};
-			AddCoinDataPayload.IDR = Object.assign({}, _payloadVarRegular, IDRDiff);
-
-			const ILSDiff = {
-				'coin': 'ILS',
-				'conf': 'ILS.conf'
-			};
-			AddCoinDataPayload.ILS = Object.assign({}, _payloadVarRegular, ILSDiff);
-
-			const INRDiff = {
-				'coin': 'INR',
-				'conf': 'INR.conf'
-			};
-			AddCoinDataPayload.INR = Object.assign({}, _payloadVarRegular, INRDiff);
-
-			const JPYDiff = {
-				'coin': 'JPY',
-				'conf': 'JPY.conf'
-			};
-			AddCoinDataPayload.JPY = Object.assign({}, _payloadVarRegular, JPYDiff);
-
-			const KRWDiff = {
-				'coin': 'KRW',
-				'conf': 'KRW.conf'
-			};
-			AddCoinDataPayload.KRW = Object.assign({}, _payloadVarRegular, KRWDiff);
-
-			const MXNDiff = {
-				'coin': 'MXN',
-				'conf': 'MXN.conf'
-			};
-			AddCoinDataPayload.MXN = Object.assign({}, _payloadVarRegular, MXNDiff);
-
-			const MYRDiff = {
-				'coin': 'MYR',
-				'conf': 'MYR.conf'
-			};
-			AddCoinDataPayload.MYR = Object.assign({}, _payloadVarRegular, MYRDiff);
-
-			const NOKDiff = {
-				'coin': 'NOK',
-				'conf': 'NOK.conf'
-			};
-			AddCoinDataPayload.NOK = Object.assign({}, _payloadVarRegular, NOKDiff);
-
-			const NZDDiff = {
-				'coin': 'NZD',
-				'conf': 'NZD.conf'
-			};
-			AddCoinDataPayload.NZD = Object.assign({}, _payloadVarRegular, NZDDiff);
-
-			const PHPDiff = {
-				'coin': 'PHP',
-				'conf': 'PHP.conf'
-			};
-			AddCoinDataPayload.PHP = Object.assign({}, _payloadVarRegular, PHPDiff);
-
-			const PLNDiff = {
-				'coin': 'PLN',
-				'conf': 'PLN.conf'
-			};
-			AddCoinDataPayload.PLN = Object.assign({}, _payloadVarRegular, PLNDiff);
-
-			const AUDDiff = {
-				'coin': 'AUD',
-				'conf': 'AUD.conf'
-			};
-			AddCoinDataPayload.AUD = Object.assign({}, _payloadVarRegular, AUDDiff);
-
-			const BGNDiff = {
-				'coin': 'BGN',
-				'conf': 'BGN.conf'
-			};
-			AddCoinDataPayload.BGN = Object.assign({}, _payloadVarRegular, BGNDiff);
-
-			const BRLDiff = {
-				'coin': 'BRL',
-				'conf': 'BRL.conf'
-			};
-			AddCoinDataPayload.BRL = Object.assign({}, _payloadVarRegular, BRLDiff);
-
-			const CADDiff = {
-				'coin': 'CAD',
-				'conf': 'CAD.conf'
-			};
-			AddCoinDataPayload.CAD = Object.assign({}, _payloadVarRegular, CADDiff);
-
-			const CHFDiff = {
-				'coin': 'CHF',
-				'conf': 'CHF.conf'
-			};
-			AddCoinDataPayload.CHF = Object.assign({}, _payloadVarRegular, CHFDiff);
-
-			return AddCoinDataPayload[coin];
-		} else {
-			const USDDiff = {
-				'netmagic': '2d8e7803',
-				'p2p': 13966,
-				'rpc': 13967
-			};
-			AddCoinDataPayload.USDVar = Object.assign({}, _payloadVar, USDDiff);
-
-			const CHFDiff = {
-				'netmagic': '59fbeb5c',
-				'p2p': 15311,
-				'rpc': 15312
-			};
-			AddCoinDataPayload.CHFVar = Object.assign({}, _payloadVar, CHFDiff);
-
-			const CADDiff = {
-				'netmagic': '3c212763',
-				'p2p': 8719,
-				'rpc': 8720
-			};
-			AddCoinDataPayload.CADVar = Object.assign({}, _payloadVar, CADDiff);
-
-			const BRLDiff = {
-				'netmagic': 'ab82d10d',
-				'p2p': 9913,
-				'rpc': 9914
-			};
-			AddCoinDataPayload.BRLVar = Object.assign({}, _payloadVar, BRLDiff);
-
-			const BGNDiff = {
-				'netmagic': '93056ad4',
-				'p2p': 9109,
-				'rpc': 9110
-			};
-			AddCoinDataPayload.BGNVar = Object.assign({}, _payloadVar, BGNDiff);
-
-			const AUDDiff = {
-				'netmagic': '07220d4e',
-				'p2p': 8044,
-				'rpc': 8045
-			};
-			AddCoinDataPayload.AUDVar = Object.assign({}, _payloadVar, AUDDiff);
-
-			const PLNDiff = {
-				'netmagic': '46ab3c28',
-				'p2p': 13492,
-				'rpc': 13493
-			};
-			AddCoinDataPayload.PLNVar = Object.assign({}, _payloadVar, PLNDiff);
-
-			const PHPDiff = {
-				'netmagic': '21535fb6',
-				'p2p': 11180,
-				'rpc': 11181
-			};
-			AddCoinDataPayload.PHPVar = Object.assign({}, _payloadVar, PHPDiff);
-
-			const NZDDiff = {
-				'netmagic': 'f579c9c2',
-				'p2p': 10914,
-				'rpc': 10915
-			};
-			AddCoinDataPayload.NZDVar = Object.assign({}, _payloadVar, NZDDiff);
-
-			const NOKDiff = {
-				'netmagic': '7082c365',
-				'p2p': 11587,
-				'rpc': 11588
-			};
-			AddCoinDataPayload.NOKVar = Object.assign({}, _payloadVar, NOKDiff);
-
-			const MYRDiff = {
-				'netmagic': '3e21761f',
-				'p2p': 10687,
-				'rpc': 10688
-			};
-			AddCoinDataPayload.MYRVar = Object.assign({}, _payloadVar, MYRDiff);
-
-			const MXNDiff = {
-				'netmagic': '304c6c12',
-				'p2p': 13969,
-				'rpc': 13970
-			};
-			AddCoinDataPayload.MXNVar = Object.assign({}, _payloadVar, MXNDiff);
-
-			const KRWDiff = {
-				'netmagic': 'c8706588',
-				'p2p': 14019,
-				'rpc': 14020
-			};
-			AddCoinDataPayload.KRWVar = Object.assign({}, _payloadVar, KRWDiff);
-
-			const JPYDiff = {
-				'netmagic': '7a55295c',
-				'p2p': 13144,
-				'rpc': 13145
-			};
-			AddCoinDataPayload.JPYVar = Object.assign({}, _payloadVar, JPYDiff);
-
-			const INRDiff = {
-				'netmagic': '740dfc1d',
-				'p2p': 10535,
-				'rpc': 10536
-			};
-			AddCoinDataPayload.INRVar = Object.assign({}, _payloadVar, INRDiff);
-
-			const ILSDiff = {
-				'netmagic': '605fcd58',
-				'p2p': 14637,
-				'rpc': 14638
-			};
-			AddCoinDataPayload.ILSVar = Object.assign({}, _payloadVar, ILSDiff);
-
-			const IDRDiff = {
-				'netmagic': 'fee513e7',
-				'p2p': 14458,
-				'rpc': 14459
-			};
-			AddCoinDataPayload.IDRVar = Object.assign({}, _payloadVar, IDRDiff);
-
-			const HKDDiff = {
-				'netmagic': '57269d95',
-				'p2p': 15408,
-				'rpc': 15409
-			};
-			AddCoinDataPayload.HKDVar = Object.assign({}, _payloadVar, HKDDiff);
-
-			const HUFDiff = {
-				'netmagic': 'a478d2af',
-				'p2p': 13698,
-				'rpc': 13699
-			};
-			AddCoinDataPayload.HUFVar = Object.assign({}, _payloadVar, HUFDiff);
-
-			const GBPDiff = {
-				'netmagic': '5e0ed955',
-				'p2p': 11504,
-				'rpc': 11505
-			};
-			AddCoinDataPayload.GBPVar = Object.assign({}, _payloadVar, GBPDiff);
-
-			const EURDiff = {
-				'netmagic': '8a3fd0bd',
-				'p2p': 8064,
-				'rpc': 8065
-			};
-			AddCoinDataPayload.EURVar = Object.assign({}, _payloadVar, EURDiff);
-
-			const DKKDiff = {
-				'netmagic': 'a2c2380c',
-				'p2p': 13829,
-				'rpc': 13830
-			};
-			AddCoinDataPayload.DKKVar = Object.assign({}, _payloadVar, DKKDiff);
-
-			const CNYDiff = {
-				'netmagic': '2a51b987',
-				'p2p': 10383,
-				'rpc': 10384
-			};
-			AddCoinDataPayload.CNYVar = Object.assign({}, _payloadVar, CNYDiff);
-
-			const ZARDiff = {
-				'netmagic': '920c0484',
-				'p2p': 15159,
-				'rpc': 15160
-			};
-			AddCoinDataPayload.ZARVar = Object.assign({}, _payloadVar, ZARDiff);
-
-			const TRYDiff = {
-				'netmagic': '82b9a778',
-				'p2p': 13923,
-				'rpc': 13924
-			};
-			AddCoinDataPayload.TRYVar = Object.assign({}, _payloadVar, TRYDiff);
-
-			const THBDiff = {
-				'netmagic': 'b58aef42',
-				'p2p': 11846,
-				'rpc': 11847
-			};
-			AddCoinDataPayload.THBVar = Object.assign({}, _payloadVar, THBDiff);
-
-			const SGDDiff = {
-				'netmagic': 'ca255b29',
-				'p2p': 14474,
-				'rpc': 14475
-			};
-			AddCoinDataPayload.SGDVar = Object.assign({}, _payloadVar, SGDDiff);
-
-			const SEKDiff = {
-				'netmagic': 'd95ad28b',
-				'p2p': 11446,
-				'rpc': 11447
-			};
-			AddCoinDataPayload.SEKVar = Object.assign({}, _payloadVar, SEKDiff);
-
-			const RONDiff = {
-				'netmagic': 'eb2c9500',
-				'p2p': 8674,
-				'rpc': 8675
-			};
-			AddCoinDataPayload.RONVar = Object.assign({}, _payloadVar, RONDiff);
-
-			const RUBDiff = {
-				'netmagic': '1b9a0eb9',
-				'p2p': 8198,
-				'rpc': 8199
-			};
-			AddCoinDataPayload.RUBVar = Object.assign({}, _payloadVar, RUBDiff);
-
-			const CZKDiff = {
-				'netmagic': '37f7ae5a',
-				'p2p': 9481,
-				'rpc': 9482
-			};
-			AddCoinDataPayload.CZKVar = Object.assign({}, _payloadVar, CZKDiff);
-
-			return AddCoinDataPayload[coin + 'Var'];
-		}
+			'rpc': 13967
+		};
+		AddCoinDataPayload.USDVar = Object.assign({}, _payloadVar, USDDiff);
+
+		const CHFDiff = {
+			'netmagic': '59fbeb5c',
+			'p2p': 15311,
+			'rpc': 15312
+		};
+		AddCoinDataPayload.CHFVar = Object.assign({}, _payloadVar, CHFDiff);
+
+		const CADDiff = {
+			'netmagic': '3c212763',
+			'p2p': 8719,
+			'rpc': 8720
+		};
+		AddCoinDataPayload.CADVar = Object.assign({}, _payloadVar, CADDiff);
+
+		const BRLDiff = {
+			'netmagic': 'ab82d10d',
+			'p2p': 9913,
+			'rpc': 9914
+		};
+		AddCoinDataPayload.BRLVar = Object.assign({}, _payloadVar, BRLDiff);
+
+		const BGNDiff = {
+			'netmagic': '93056ad4',
+			'p2p': 9109,
+			'rpc': 9110
+		};
+		AddCoinDataPayload.BGNVar = Object.assign({}, _payloadVar, BGNDiff);
+
+		const AUDDiff = {
+			'netmagic': '07220d4e',
+			'p2p': 8044,
+			'rpc': 8045
+		};
+		AddCoinDataPayload.AUDVar = Object.assign({}, _payloadVar, AUDDiff);
+
+		const PLNDiff = {
+			'netmagic': '46ab3c28',
+			'p2p': 13492,
+			'rpc': 13493
+		};
+		AddCoinDataPayload.PLNVar = Object.assign({}, _payloadVar, PLNDiff);
+
+		const PHPDiff = {
+			'netmagic': '21535fb6',
+			'p2p': 11180,
+			'rpc': 11181
+		};
+		AddCoinDataPayload.PHPVar = Object.assign({}, _payloadVar, PHPDiff);
+
+		const NZDDiff = {
+			'netmagic': 'f579c9c2',
+			'p2p': 10914,
+			'rpc': 10915
+		};
+		AddCoinDataPayload.NZDVar = Object.assign({}, _payloadVar, NZDDiff);
+
+		const NOKDiff = {
+			'netmagic': '7082c365',
+			'p2p': 11587,
+			'rpc': 11588
+		};
+		AddCoinDataPayload.NOKVar = Object.assign({}, _payloadVar, NOKDiff);
+
+		const MYRDiff = {
+			'netmagic': '3e21761f',
+			'p2p': 10687,
+			'rpc': 10688
+		};
+		AddCoinDataPayload.MYRVar = Object.assign({}, _payloadVar, MYRDiff);
+
+		const MXNDiff = {
+			'netmagic': '304c6c12',
+			'p2p': 13969,
+			'rpc': 13970
+		};
+		AddCoinDataPayload.MXNVar = Object.assign({}, _payloadVar, MXNDiff);
+
+		const KRWDiff = {
+			'netmagic': 'c8706588',
+			'p2p': 14019,
+			'rpc': 14020
+		};
+		AddCoinDataPayload.KRWVar = Object.assign({}, _payloadVar, KRWDiff);
+
+		const JPYDiff = {
+			'netmagic': '7a55295c',
+			'p2p': 13144,
+			'rpc': 13145
+		};
+		AddCoinDataPayload.JPYVar = Object.assign({}, _payloadVar, JPYDiff);
+
+		const INRDiff = {
+			'netmagic': '740dfc1d',
+			'p2p': 10535,
+			'rpc': 10536
+		};
+		AddCoinDataPayload.INRVar = Object.assign({}, _payloadVar, INRDiff);
+
+		const ILSDiff = {
+			'netmagic': '605fcd58',
+			'p2p': 14637,
+			'rpc': 14638
+		};
+		AddCoinDataPayload.ILSVar = Object.assign({}, _payloadVar, ILSDiff);
+
+		const IDRDiff = {
+			'netmagic': 'fee513e7',
+			'p2p': 14458,
+			'rpc': 14459
+		};
+		AddCoinDataPayload.IDRVar = Object.assign({}, _payloadVar, IDRDiff);
+
+		const HKDDiff = {
+			'netmagic': '57269d95',
+			'p2p': 15408,
+			'rpc': 15409
+		};
+		AddCoinDataPayload.HKDVar = Object.assign({}, _payloadVar, HKDDiff);
+
+		const HUFDiff = {
+			'netmagic': 'a478d2af',
+			'p2p': 13698,
+			'rpc': 13699
+		};
+		AddCoinDataPayload.HUFVar = Object.assign({}, _payloadVar, HUFDiff);
+
+		const GBPDiff = {
+			'netmagic': '5e0ed955',
+			'p2p': 11504,
+			'rpc': 11505
+		};
+		AddCoinDataPayload.GBPVar = Object.assign({}, _payloadVar, GBPDiff);
+
+		const EURDiff = {
+			'netmagic': '8a3fd0bd',
+			'p2p': 8064,
+			'rpc': 8065
+		};
+		AddCoinDataPayload.EURVar = Object.assign({}, _payloadVar, EURDiff);
+
+		const DKKDiff = {
+			'netmagic': 'a2c2380c',
+			'p2p': 13829,
+			'rpc': 13830
+		};
+		AddCoinDataPayload.DKKVar = Object.assign({}, _payloadVar, DKKDiff);
+
+		const CNYDiff = {
+			'netmagic': '2a51b987',
+			'p2p': 10383,
+			'rpc': 10384
+		};
+		AddCoinDataPayload.CNYVar = Object.assign({}, _payloadVar, CNYDiff);
+
+		const ZARDiff = {
+			'netmagic': '920c0484',
+			'p2p': 15159,
+			'rpc': 15160
+		};
+		AddCoinDataPayload.ZARVar = Object.assign({}, _payloadVar, ZARDiff);
+
+		const TRYDiff = {
+			'netmagic': '82b9a778',
+			'p2p': 13923,
+			'rpc': 13924
+		};
+		AddCoinDataPayload.TRYVar = Object.assign({}, _payloadVar, TRYDiff);
+
+		const THBDiff = {
+			'netmagic': 'b58aef42',
+			'p2p': 11846,
+			'rpc': 11847
+		};
+		AddCoinDataPayload.THBVar = Object.assign({}, _payloadVar, THBDiff);
+
+		const SGDDiff = {
+			'netmagic': 'ca255b29',
+			'p2p': 14474,
+			'rpc': 14475
+		};
+		AddCoinDataPayload.SGDVar = Object.assign({}, _payloadVar, SGDDiff);
+
+		const SEKDiff = {
+			'netmagic': 'd95ad28b',
+			'p2p': 11446,
+			'rpc': 11447
+		};
+		AddCoinDataPayload.SEKVar = Object.assign({}, _payloadVar, SEKDiff);
+
+		const RONDiff = {
+			'netmagic': 'eb2c9500',
+			'p2p': 8674,
+			'rpc': 8675
+		};
+		AddCoinDataPayload.RONVar = Object.assign({}, _payloadVar, RONDiff);
+
+		const RUBDiff = {
+			'netmagic': '1b9a0eb9',
+			'p2p': 8198,
+			'rpc': 8199
+		};
+		AddCoinDataPayload.RUBVar = Object.assign({}, _payloadVar, RUBDiff);
+
+		const CZKDiff = {
+			'netmagic': '37f7ae5a',
+			'p2p': 9481,
+			'rpc': 9482
+		};
+		AddCoinDataPayload.CZKVar = Object.assign({}, _payloadVar, CZKDiff);
+
+		return AddCoinDataPayload[coin + 'Var'];
 	}
 }
--- a/react/src/components/dashboard/atomic.js
+++ b/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;
--- a/react/src/components/dashboard/coinTile.js
+++ b/react/src/components/dashboard/coinTile.js
@ -340,7 +340,7 @@ class CoinTile extends React.Component {

    return (
      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 />
                </div>
              </div>
-              <h3 className="panel-title" data-lang="INDEX.ACTIVE_COINS"></h3>
+              <h3 className="panel-title">{translate('INDEX.ACTIVE_COINS')}</h3>
            </div>
          </div>
          <div className="wallet-widgets-list" data-plugin="pageAsideScroll">
--- a/react/src/components/dashboard/coinTileItem.js
+++ b/react/src/components/dashboard/coinTileItem.js
@ -1,19 +1,29 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
-import { dashboardChangeSection, toggleAddcoinModal } from '../../actions/actionCreators';
+import { dashboardChangeActiveCoin, iguanaActiveHandle } from '../../actions/actionCreators';
 import Store from '../../store';

 class CoinTileItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  dashboardChangeActiveCoin(coin, mode) {
+    Store.dispatch(dashboardChangeActiveCoin(coin, mode));
+    Store.dispatch(iguanaActiveHandle(true));
+  }
+
  render() {
    const { item } = this.props;
-
    return (
      <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="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={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.dashboardChangeActiveCoin(item.coin, item.mode)}>
            <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}"/>
-              <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>
            <div className="coin-name">{item.coinname} ({item.coinlogo})</div>
          </div>
--- a/react/src/components/dashboard/dashboard.js
+++ b/react/src/components/dashboard/dashboard.js
@ -4,6 +4,11 @@ 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';
+import WalletsData from './walletsData';
+import Atomic from './atomic';

 class Dashboard extends React.Component {
  constructor(props) {
@ -15,17 +20,25 @@ class Dashboard extends React.Component {

  renderDashboard() {
    document.body.className = 'page-login';
-
+    //            <WalletsHeader {...this.props.ActiveCoin} />
    return (
-      <div>
-        <Navbar {...this.props} />
-        <div className={this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide'}>
-          <CoinTile {...this.props} />
-          <WalletsBalance {...this.props.ActiveCoin} />
-          <WalletsHeader {...this.props.ActiveCoin} />
-        </div>
-        <div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}>
-          <EDEX {...this.props} />
+      <div style={{height: '100%'}}>
+        <div className={this.props.Dashboard.activeSection === 'wallets' ? 'page-main' : ''} id="section-dashboard" data-edexcoin="COIN">
+          <Navbar {...this.props} />
+          <div className={this.props.Dashboard.activeSection === 'wallets' ? 'show' : 'hide'}>
+            <CoinTile {...this.props} />
+            <WalletsNav {...this.props} />
+            <WalletsProgress {...this.props} />
+            <WalletsBalance {...this.props.ActiveCoin} />
+            <SendCoin {...this.props.ActiveCoin} />
+            <WalletsData {...this.props.ActiveCoin} />
+          </div>
+          <div className={this.props.Dashboard.activeSection === 'edex' ? 'show' : 'hide'}>
+            <EDEX {...this.props} />
+          </div>
+          <div className={this.props.Dashboard.activeSection === 'atomic' ? 'show' : 'hide'}>
+            <Atomic {...this.props} />
+          </div>
        </div>
      </div>
    );
--- a/react/src/components/dashboard/navbar.js
+++ b/react/src/components/dashboard/navbar.js
@ -1,6 +1,6 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
-import { dashboardChangeSection, toggleAddcoinModal } from '../../actions/actionCreators';
+import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators';
 import Store from '../../store';

 class Navbar extends React.Component {
@ -28,7 +28,7 @@ class Navbar extends React.Component {
  }

  logout() {
-    // logout
+    Store.dispatch(logout());
  }

  render() {
--- a/react/src/components/dashboard/sendCoin.js
+++ b/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;
--- a/react/src/components/dashboard/walletsBalance.js
+++ b/react/src/components/dashboard/walletsBalance.js
@ -7,25 +7,25 @@ class WalletsBalance extends React.Component {
      return (
        <div id="wallet-widgets" data-plugin="masonry" data-edexcoin="COIN">
          <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">
                <button aria-label="Close" data-dismiss="alert" className="close" type="button">
                  <span aria-hidden="true">×</span>
                </button>
                <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-lang="INDEX.IGUANA_FULL_MODE_SYNC_P2"></p>
-                <p data-lang="INDEX.IGUANA_FULL_MODE_SYNC_P3" style={{fontWeight: '600'}}></p>
+                <p>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P2')}</p>
+                <p style={{fontWeight: '600'}}>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p>
              </div>

              <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">
                  <span aria-hidden="true">×</span>
                </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-lang="INDEX.IGUANA_FULL_MODE_SYNC_P2"></p>
-                <p data-lang="INDEX.IGUANA_FULL_MODE_SYNC_P3" style={{fontWeight: '600'}}></p>
+                <p>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P2')}</p>
+                <p style={{fontWeight: '600'}}>{translate('INDEX.IGUANA_FULL_MODE_SYNC_P3')}</p>
              </div>
            </div>
            <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')}
                      </div>
                      <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>
                    </div>
                  </div>
@ -45,7 +45,7 @@ class WalletsBalance extends React.Component {
              </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-content">
                  <div className="padding-20 padding-top-10">
@ -62,7 +62,7 @@ class WalletsBalance extends React.Component {
              </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-content">
                  <div className="padding-20 padding-top-10">
--- a/react/src/components/dashboard/walletsData.js
+++ b/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;
--- a/react/src/components/dashboard/walletsHeader.js
+++ b/react/src/components/dashboard/walletsHeader.js
@ -5,7 +5,7 @@ import { translate } from '../../translate/translate';

 class WalletsHeader extends React.Component {
  render() {
-    if (this.props && this.props.coin) {    
+    if (this.props && this.props.coin) {
      return (
        <div className="page-header page-header-bordered header-easydex margin-bottom-0" id="easydex-header-div">
          <h1 className="page-title">EasyDEX</h1>
@ -19,7 +19,7 @@ class WalletsHeader extends React.Component {
              </button>
              <ul className="dropdown-menu animate dropdown-menu-right" aria-labelledby="easydex_kmd_wallet_actions_header" role="menu">
                <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 role="presentation">
                  <a href="javascript:void(0)" role="menuitem" data-extcoin-menu="KMD" id="btn_kmd_wallet_send">{translate('INDEX.SEND')}</a>
--- a/react/src/components/dashboard/walletsNav.js
+++ b/react/src/components/dashboard/walletsNav.js
@ -1,50 +1,72 @@
 import React from 'react';
 import { translate } from '../../translate/translate';
+import { copyCoinAddress, iguanaEdexBalance, toggleSendCoinForm, toggleReceiveCoinForm, toggleSendReceiveCoinForms } from '../../actions/actionCreators';
+import Store from '../../store';

 class WalletsNav extends React.Component {
-  render() {
-    return (
-      <div className="page-main" id="section-dashboard" data-edexcoin="COIN">
-        <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>
+  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());
+  }

-          <div className="alert alert-info alert-dismissible" role="alert">
-            <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>
-            <br/>
-            {translate('INDEX.PLEASE_SELECT_A_WALLET')}.
+  toggleSendCoinForm(display) {
+    console.log(display);
+    Store.dispatch(toggleSendCoinForm(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>
+              <span style={{fontSize: '24px', textAlign: 'center'}}>
+                <i className="icon fa-paw" aria-hidden="true"></i> {translate('INDEX.NO_WALLET_CAPS')}
+              </span>
+              <br/>
+              {translate('INDEX.PLEASE_SELECT_A_WALLET')}.
+            </div>
          </div>
        </div>
-        <div className="page-header page-header-bordered header-easydex" id="header-dashboard" 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>
-          </ol>
-          <div className="page-header-actions" data-edexcoin="COIN" id="edexcoin-actions">
-            <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">
-                <i className="icon md-view-dashboard" aria-hidden="true"></i> {translate('INDEX.DASHBOARD')}
-              </button>
-              <button type="button" className="btn btn-primary waves-effect waves-light" data-edexcoinmenu="COIN" id="btn_edexcoin_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">
-                <i className="icon fa-inbox" aria-hidden="true"></i> {translate('INDEX.RECEIVE')}
-              </button>
+      );
+    } else {
+      return (
+        <div>
+          <div className="page-header page-header-bordered header-easydex" id="header-dashboard" data-edexcoin="COIN">
+            <ol className="breadcrumb" data-edexcoin="COIN">
+              <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>
+            <div className="page-header-actions" data-edexcoin="COIN" id="edexcoin-actions">
+              <div id="kmd_header_button">
+                <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')}
+                </button>
+                <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">
+                  <i className="icon fa-inbox" aria-hidden="true"></i> {translate('INDEX.RECEIVE')}
+                </button>
+              </div>
            </div>
          </div>
        </div>
-    );
+      );
+    }
  }
 }

--- a/react/src/components/dashboard/walletsProgress.js
+++ b/react/src/components/dashboard/walletsProgress.js
@ -3,36 +3,40 @@ import { translate } from '../../translate/translate';

 class WalletsProgress extends React.Component {
  render() {
-    return (
-      <div id="edex-footer" data-edexcoin="COIN">
-        <div className="row no-space" data-edexcoin="COIN">
-          <div data-edexcoin="COIN" id="currency-progressbars" style={{display: 'none'}}>
-            <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">
-                <span data-lang="INDEX.BUNDLES"></span> <span data-edexcoin="COIN" id="currency-bundles-percent">0%</span>
+    if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.mode === 'full') {
+      return (
+        <div id="edex-footer" data-edexcoin="COIN">
+          <div className="row no-space" data-edexcoin="COIN">
+            <div data-edexcoin="COIN" id="currency-progressbars">
+              <div className="progress progress-sm">
+                <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>
+                </div>
              </div>
            </div>
-          </div>
-          <div data-edexcoin="COIN" id="additional-progress-bars" style={{display: 'none'}}>
-            <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">
-                utxo <span data-edexcoin="COIN" id="currency-utxo-percent">0%</span>
+            <div data-edexcoin="COIN" id="additional-progress-bars">
+              <div className="progress progress-sm">
+                <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>
+                </div>
              </div>
-            </div>
-            <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">
-                <span data-lang="INDEX.BALANCES"></span> <span data-edexcoin="COIN" id="currency-balances-percent">0%</span>
+              <div className="progress progress-sm">
+                <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>
+                </div>
              </div>
-            </div>
-            <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">
-                <span data-lang="INDEX.VALIDATED"></span> <span data-edexcoin="COIN" id="currency-validated-percent">0%</span>
+              <div className="progress progress-sm">
+                <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>
+                </div>
              </div>
            </div>
          </div>
        </div>
-      </div>
-    );
+      );
+    } else {
+      return null;
+    }
  }
 }

--- a/react/src/components/main/walletMain.js
+++ b/react/src/components/main/walletMain.js
@ -7,7 +7,7 @@ import Dashboard from '../dashboard/dashboard';
 class WalletMain extends React.Component {
  render() {
    return (
-      <div>
+      <div style={{height: '100%'}}>
        <Dashboard {...this.props} />
        <AddCoin {...this.props.AddCoin} />
        <Login {...this.props} />
--- a/react/src/components/toaster/toaster.js
+++ b/react/src/components/toaster/toaster.js
@ -1,4 +1,6 @@
 import React from 'react';
+import { dismissToasterMessage } from '../../actions/actionCreators';
+import Store from '../../store';

 class Toaster extends React.Component {
  constructor(props) {
@ -20,26 +22,24 @@ class Toaster extends React.Component {
        type: props.type,
        title: props.title,
      });
+    } else {
+      this.setState({
+        display: false,
+        message: null,
+        type: null,
+        title: null,
+      });
    }
  }

-  setInitialState() {
-    this.setState({
-      display: false,
-      message: null,
-      type: null,
-      title: null,
-    });
-  }
-
  dismissToast() {
-    this.setInitialState();
+    Store.dispatch(dismissToasterMessage());
  }

  // TODO: multiple toasts
  renderToast() {
    setTimeout(() => {
-      this.setInitialState();
+      Store.dispatch(dismissToasterMessage());
    }, 5000);

    return (
--- a/react/src/reducers/activeCoin.js
+++ b/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 = {
  coin: null,
+  mode: null,
+  send: false,
+  receive: false,
+  balance: 0,
 }, action) {
  switch (action.type) {
    case DASHBOARD_ACTIVE_COIN_CHANGE:
      return Object.assign({}, state, {
        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:
      return state;
--- a/react/src/reducers/dashboard.js
+++ b/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 = {
  activeSection: 'wallets',
+  activeHandle: null,
 }, action) {
  switch (action.type) {
    case DASHBOARD_SECTION_CHANGE:
      return Object.assign({}, state, {
        activeSection: action.activeSection,
      });
+    case GET_MAIN_ADDRESS:
+      return Object.assign({}, state, {
+        activeHandle: action.activeHandle,
+      });
    default:
      return state;
  }
--- a/react/src/styles/index.scss
+++ b/react/src/styles/index.scss
@ -31,6 +31,26 @@
@import '../assets/global/fonts/brand-icons/brand-icons.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) {
  bottom: 12px;
 }
--- a/react/src/util/copyToClipboard.js
+++ b/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;
+};
--- a/react/www/index.html
+++ b/react/www/index.html
@ -15,6 +15,8 @@
    <link rel="icon" type="image/png" href="assets/images/favicon-16x16.png" sizes="16x16">
 	</head>
 	<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>
 </html>