From db182474f8cacb14e8713c6309abaffab880c017 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Mon, 3 Apr 2017 08:51:30 +0300 Subject: [PATCH 1/3] added dashboard components --- react/src/actions/actionCreators.js | 132 +++++- react/src/components/app/app.js | 1 + react/src/components/dashboard/coinTile.js | 391 ++++++++++++++++++ .../src/components/dashboard/coinTileItem.js | 24 ++ react/src/components/dashboard/dashboard.js | 39 ++ react/src/components/dashboard/dashboard.scss | 3 + react/src/components/dashboard/edex.js | 16 + react/src/components/dashboard/navbar.js | 120 ++++++ .../components/dashboard/walletsBalance.js | 92 +++++ .../dashboard/walletsBasiliskRefresh.js | 41 ++ react/src/components/dashboard/walletsNav.js | 51 +++ .../components/dashboard/walletsProgress.js | 39 ++ react/src/components/dummy/dummy.js | 2 +- react/src/components/login/login.js | 207 ++++++---- react/src/components/main/main.js | 19 +- react/src/components/main/walletMain.js | 2 + react/src/reducers/index.js | 3 +- react/src/reducers/main.js | 26 ++ react/src/store.js | 1 + 19 files changed, 1120 insertions(+), 89 deletions(-) create mode 100644 react/src/components/dashboard/coinTile.js create mode 100644 react/src/components/dashboard/coinTileItem.js create mode 100644 react/src/components/dashboard/dashboard.js create mode 100644 react/src/components/dashboard/dashboard.scss create mode 100644 react/src/components/dashboard/edex.js create mode 100644 react/src/components/dashboard/navbar.js create mode 100644 react/src/components/dashboard/walletsBalance.js create mode 100644 react/src/components/dashboard/walletsBasiliskRefresh.js create mode 100644 react/src/components/dashboard/walletsNav.js create mode 100644 react/src/components/dashboard/walletsProgress.js create mode 100644 react/src/reducers/main.js diff --git a/react/src/actions/actionCreators.js b/react/src/actions/actionCreators.js index d946d3c..077bdfd 100644 --- a/react/src/actions/actionCreators.js +++ b/react/src/actions/actionCreators.js @@ -4,6 +4,9 @@ import { translate } from '../translate/translate'; export const TOASTER_MESSAGE = 'TOASTER_MESSAGE'; export const DISPLAY_ADDCOIN_MODAL = 'DISPLAY_ADDCOIN_MODAL'; +export const GET_ACTIVE_COINS = 'GET_ACTIVE_COINS'; +export const LOGIN = 'LOGIN'; +export const ACTIVE_HANDLE = 'ACTIVE_HANDLE'; function triggerToaster(display, message, title, _type) { return { @@ -23,6 +26,33 @@ function toggleAddcoinModalState(display, isLogin) { } } +function dashboardCoinsState(json) { + return { + type: GET_ACTIVE_COINS, + coins: json, + activeCoins: Object.keys(json.native).length || Object.keys(json.basilisk).length || Object.keys(json.full).length ? true : false + } +} + +function iguanaWalletPassphraseState(json, dispatch) { + console.log('passp', json); + sessionStorage.setItem('IguanaActiveAccount', JSON.stringify(json)); + dispatch(triggerToaster(true, translate('TOASTR.LOGIN_SUCCESSFULL'), translate('TOASTR.ACCOUNT_NOTIFICATION'), 'success')); + + return { + type: LOGIN, + isLoggedIn: json && json.pubkey ? true : false, + } +} + +function iguanaActiveHandleState(json) { + return { + type: ACTIVE_HANDLE, + isLoggedIn: JSON.parse(sessionStorage.getItem('IguanaActiveAccount')).pubkey === json.pubkey && json.status === 'unlocked' ? true : false, + handle: json, + } +} + export function toggleAddcoinModal(display, isLogin) { return dispatch => { dispatch(toggleAddcoinModalState(display, isLogin)); @@ -93,8 +123,8 @@ export function addCoinResult(coin, mode) { }; return dispatch => { - //dispatch(shepherdGetConfig(coin, mode)); - dispatch(triggerToaster(true, coin + ' ' + translate('TOASTR.COIN_STARTED') + modeToValue[defaultMode] + ' ' + translate('TOASTR.MODE'), translate('TOASTR.COIN_NOTIFICATION'), 'success')); + dispatch(triggerToaster(true, coin + ' ' + translate('TOASTR.COIN_STARTED') + modeToValue[mode] + ' ' + translate('TOASTR.MODE'), translate('TOASTR.COIN_NOTIFICATION'), 'success')); + dispatch(getDexCoins()); } } @@ -115,3 +145,101 @@ export function shepherdGetConfig(coin, mode) { .then(json => dispatch(shepherdHerd(coin, mode, json))); } } + +export function getDexCoins() { + return dispatch => { + return fetch('http://127.0.0.1:7778', { + method: 'POST', + //mode: 'no-cors' + body: JSON.stringify({ + 'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'), + 'agent': 'InstantDEX', + 'method': 'allcoins', + }) + }) + .catch(function(error) { + console.log(error); + dispatch(triggerToaster(true, 'Error getDexCoins', 'Error', 'error')) + + }) + .then(response => response.json()) + .then(json => dispatch(dashboardCoinsState(json))); + } +} + +function rpcErrorHandler(json, dispatch) { + console.log('json', json); + if (json && json.error) { + if (json.error === 'bitcoinrpc needs coin that is active') { + dispatch(triggerToaster(true, 'No active coin', translate('TOASTR.SERVICE_NOTIFICATION'), 'error')); + } + } +} + +export function iguanaWalletPassphrase(_passphrase) { + return dispatch => { + return fetch('http://127.0.0.1:7778', { + method: 'POST', + body: JSON.stringify({ + 'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'), + 'handle': '', + 'password': _passphrase, + 'timeout': '2592000', + 'agent': 'bitcoinrpc', + 'method': 'walletpassphrase' + }), + }) + .catch(function(error) { + console.log(error); + dispatch(triggerToaster(true, 'Error iguanaWalletPassphrase', 'Error', 'error')) + }) + .then(response => response.json()) + .then(json => dispatch(iguanaWalletPassphraseState(json, dispatch))); + } +} + +export function iguanaActiveHandle() { + return dispatch => { + return fetch('http://127.0.0.1:7778', { + method: 'POST', + body: JSON.stringify({ + 'userpass': 'tmpIgRPCUser@' + sessionStorage.getItem('IguanaRPCAuth'), + 'agent': 'SuperNET', + 'method': 'activehandle' + }), + }) + .catch(function(error) { + console.log(error); + dispatch(triggerToaster(true, 'Error iguanaActiveHandle', 'Error', 'error')) + }) + .then(response => response.json()) + .then(json => dispatch(iguanaActiveHandleState(json))); + } +} + +/*function Shepherd_SysInfo() { + return new Promise((resolve) => { + $.ajax({ + type: 'GET', + url: 'http://127.0.0.1:17777/shepherd/sysinfo', + contentType: 'application/json' // send as JSON + }) + .done(function(data) { + resolve(data); + }); + }); +} + +function Shepherd_SendPendValue() { + Shepherd_SysInfo().then(function(result){ + var ram_data = formatBytes(result.totalmem_bytes) + var pend_val = null; + if (ram_data.size === 'GB') { + if (ram_data.ramsize >= '63' ) { pend_val = 16; } + if (ram_data.ramsize >= '31' ) { pend_val = 8; } + if (ram_data.ramsize >= '15' ) { pend_val = 4; } + if (ram_data.ramsize <= '15' ) { pend_val = 1; } + } else { pend_val = 1; } + sessionStorage.setItem('IguanaPendValue', pend_val); + }) +}*/ \ No newline at end of file diff --git a/react/src/components/app/app.js b/react/src/components/app/app.js index 1df4370..2f23c36 100644 --- a/react/src/components/app/app.js +++ b/react/src/components/app/app.js @@ -7,6 +7,7 @@ function mapStateToProps(state) { return { toaster: state.toaster, AddCoin: state.AddCoin, + Main: state.Main, }; } diff --git a/react/src/components/dashboard/coinTile.js b/react/src/components/dashboard/coinTile.js new file mode 100644 index 0000000..fbf4e33 --- /dev/null +++ b/react/src/components/dashboard/coinTile.js @@ -0,0 +1,391 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import CoinTileItem from './coinTileItem'; + +class CoinTile extends React.Component { + constructor(props) { + super(props); + this.state = { + }; + this.renderTiles = this.renderTiles.bind(this); + } + + renderTiles() { + const modes = [ + 'native', + 'basilisk', + 'full' + ]; + const allCoins = this.props.Main.coins; + var items = []; + console.log('tiles', this.props.Main.coins); + + if (this.props.Main && this.props.Main.coins) { + modes.map(function(mode) { + allCoins[mode].map(function(coin) { + console.log(coin); + var coinlogo = '', + coinname = '', + modecode = '', + modetip = '', + modecolor = ''; + + switch (mode) { + case 'native': + modecode = 'Native'; + modetip = 'Native'; + modecolor = 'primary'; + break; + case 'basilisk': + modecode = 'Basilisk'; + modetip = 'Basilisk'; + modecolor = 'info'; + break; + case 'full': + modecode = 'Full'; + modetip = 'Full'; + modecolor = 'success'; + break; + case 'virtual': + modecode = 'Virtual'; + modetip = 'Virtual'; + modecolor = 'danger'; + break; + case 'notarychains': + modecode = 'Notarychains'; + modetip = 'Notarychains'; + modecolor = 'dark'; + break; + } + + switch (coin) { + case 'BTC': + coinlogo = 'bitcoin'; + coinname = 'Bitcoin'; + break; + case 'BTCD': + coinlogo = 'bitcoindark'; + coinname = 'BitcoinDark'; + break; + case 'LTC': + coinlogo = 'litecoin'; + coinname = 'Litecoin'; + break; + case 'VPN': + coinlogo = 'vpncoin'; + coinname = 'VPNcoin'; + break; + case 'SYS': + coinlogo = 'syscoin'; + coinname = 'Syscoin'; + break; + case 'ZEC': + coinlogo = 'zcash'; + coinname = 'Zcash'; + break; + case 'NMC': + coinlogo = 'namecoin'; + coinname = 'Namecoin'; + break; + case 'DEX': + coinlogo = 'dex'; + coinname = 'InstantDEX'; + break; + case 'DOGE': + coinlogo = 'dogecoin'; + coinname = 'Dogecoin'; + break; + case 'DGB': + coinlogo = 'digibyte'; + coinname = 'Digibyte'; + break; + case 'MZC': + coinlogo = 'mazacoin'; + coinname = 'Mazacoin'; + break; + case 'UNO': + coinlogo = 'unobtanium'; + coinname = 'Unobtanium'; + break; + case 'ZET': + coinlogo = 'zetacoin'; + coinname = 'Zetacoin'; + break; + case 'KMD': + coinlogo = 'komodo'; + coinname = 'Komodo'; + break; + case 'BTM': + coinlogo = 'bitmark'; + coinname = 'Bitmark'; + break; + case 'CARB': + coinlogo = 'carboncoin'; + coinname = 'Carboncoin'; + break; + case 'ANC': + coinlogo = 'anoncoin'; + coinname = 'AnonCoin'; + break; + case 'FRK': + coinlogo = 'franko'; + coinname = 'Franko'; + break; + case 'GAME': + coinlogo = 'GAME'; + coinname = 'GameCredits'; + break; + case 'SUPERNET': + coinlogo = 'SUPERNET'; + coinname = 'SUPERNET'; + break; + case 'REVS': + coinlogo = 'REVS'; + coinname = 'REVS'; + break; + case 'WLC': + coinlogo = 'WLC'; + coinname = 'WIRELESS'; + break; + case 'PANGEA': + coinlogo = 'PANGEA'; + coinname = 'PANGEA'; + break; + case 'JUMBLR': + coinlogo = 'JUMBLR'; + coinname = 'JUMBLR'; + break; + case 'BET': + coinlogo = 'BET'; + coinname = 'BET'; + break; + case 'CRYPTO': + coinlogo = 'CRYPTO'; + coinname = 'CRYPTO'; + break; + case 'HODL': + coinlogo = 'HODL'; + coinname = 'HODL'; + break; + case 'SHARK': + coinlogo = 'SHARK'; + coinname = 'SHARK'; + break; + case 'BOTS': + coinlogo = 'BOTS'; + coinname = 'BOTS'; + break; + case 'MGW': + coinlogo = 'MGW'; + coinname = 'MultiGateway'; + break; + case 'MVP': + coinlogo = 'MVP'; + coinname = 'MVP Lineup'; + break; + case 'KV': + coinlogo = 'KV'; + coinname = 'KV'; + break; + case 'CEAL': + coinlogo = 'CEAL'; + coinname = 'CEAL NET'; + break; + case 'MESH': + coinlogo = 'MESH'; + coinname = 'SpaceMesh'; + break; + case 'USD': + coinlogo = 'usd'; + coinname = 'US Dollar'; + break; + case 'RON': + coinlogo = 'RON'; + coinname = 'Romanian Leu'; + break; + case 'EUR': + coinlogo = 'EUR'; + coinname = 'Euro'; + break; + case 'JPY': + coinlogo = 'JPY'; + coinname = 'Japanese Yen'; + break; + case 'GBP': + coinlogo = 'GBP'; + coinname = 'British Pound'; + break; + case 'AUD': + coinlogo = 'AUD'; + coinname = 'Australian Dollar'; + break; + case 'CAD': + coinlogo = 'CAD'; + coinname = 'Canadian Dollar'; + break; + case 'CHF': + coinlogo = 'CHF'; + coinname = 'Swiss Franc'; + break; + case 'NZD': + coinlogo = 'NZD'; + coinname = 'New Zealand Dollar'; + break; + case 'CNY': + coinlogo = 'CNY'; + coinname = 'Chinese Yuan'; + break; + case 'RUB': + coinlogo = 'RUB'; + coinname = 'Russian Ruble'; + break; + case 'MXN': + coinlogo = 'MXN'; + coinname = 'Mexican peso'; + break; + case 'BRL': + coinlogo = 'BRL'; + coinname = 'Brazilian Real'; + break; + case 'INR': + coinlogo = 'INR'; + coinname = 'Indian Rupee'; + break; + case 'HKD': + coinlogo = 'HKD'; + coinname = 'Hong Kong Dollar'; + break; + case 'TRY': + coinlogo = 'TRY'; + coinname = 'Turkish Lira'; + break; + case 'ZAR': + coinlogo = 'ZAR'; + coinname = 'South African Rand'; + break; + case 'PLN': + coinlogo = 'PLN'; + coinname = 'Polish Zloty'; + break; + case 'NOK': + coinlogo = 'NOK'; + coinname = 'Norwegian Krone'; + break; + case 'SEK': + coinlogo = 'SEK'; + coinname = 'Swedish Krona'; + break; + case 'DKK': + coinlogo = 'DKK'; + coinname = 'Danish Krone'; + break; + case 'CZK': + coinlogo = 'CZK'; + coinname = 'Czech Koruna'; + break; + case 'HUF': + coinlogo = 'HUF'; + coinname = 'Hungarian Forint'; + break; + case 'ILS': + coinlogo = 'ILS'; + coinname = 'Israeli Shekel'; + break; + case 'KRW': + coinlogo = 'KRW'; + coinname = 'Korean Won'; + break; + case 'MYR': + coinlogo = 'MYR'; + coinname = 'Malaysian Ringgit'; + break; + case 'PHP': + coinlogo = 'PHP'; + coinname = 'Philippine Peso'; + break; + case 'SGD': + coinlogo = 'SGD'; + coinname = 'Singapore Dollar'; + break; + case 'THB': + coinlogo = 'THB'; + coinname = 'Thai Baht'; + break; + case 'BGN': + coinlogo = 'BGN'; + coinname = 'Bulgarian Lev'; + break; + case 'IDR': + coinlogo = 'IDR'; + coinname = 'Indonesian Rupiah'; + break; + case 'HRK': + coinlogo = 'HRK'; + coinname = 'Croatian Kuna'; + break; + } + + items.push({ + coinlogo, + coinname, + coin, + mode, + modecolor, + modetip, + modecode, + }); + }); + }); + } + + return ( + items.map((item, i) => + ) + ); + } + + /*openDropMenu() { + this.setState(Object.assign({}, this.state, { + openDropMenu: !this.state.openDropMenu, + })); + + console.log(this.state); + }*/ + + render() { + return ( +
+
+ + +
+
+
+
+
+
+ + +
+
+

+
+
+
+
+
+
+ {this.renderTiles()} +
+
+
+
+
+
+ ); + } +} + +export default CoinTile; diff --git a/react/src/components/dashboard/coinTileItem.js b/react/src/components/dashboard/coinTileItem.js new file mode 100644 index 0000000..84a99dc --- /dev/null +++ b/react/src/components/dashboard/coinTileItem.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +class CoinTileItem extends React.Component { + render() { + const { item } = this.props; + + return ( +
+
+
+ +
{item.coinname} ({item.coinlogo})
+
+
+
+ ); + } +} + +export default CoinTileItem; diff --git a/react/src/components/dashboard/dashboard.js b/react/src/components/dashboard/dashboard.js new file mode 100644 index 0000000..a14d80c --- /dev/null +++ b/react/src/components/dashboard/dashboard.js @@ -0,0 +1,39 @@ +import React from 'react'; +import Navbar from './navbar'; +import CoinTile from './coinTile'; +import EDEX from './edex'; + +class Dashboard extends React.Component { + constructor(props) { + super(props); + this.state = { + activePage: 'wallets', + }; + this.renderDashboard = this.renderDashboard.bind(this); + } + + renderDashboard() { + console.log('dash'); + return ( +
+ +
+ +
+
+ +
+
+ ); + } + + render() { + if (this.props && this.props.Main && this.props.Main.isLoggedIn) { + return this.renderDashboard(); + } else { + return null; + } + } +} + +export default Dashboard; diff --git a/react/src/components/dashboard/dashboard.scss b/react/src/components/dashboard/dashboard.scss new file mode 100644 index 0000000..863428a --- /dev/null +++ b/react/src/components/dashboard/dashboard.scss @@ -0,0 +1,3 @@ +.dashboard { + +} \ No newline at end of file diff --git a/react/src/components/dashboard/edex.js b/react/src/components/dashboard/edex.js new file mode 100644 index 0000000..4563481 --- /dev/null +++ b/react/src/components/dashboard/edex.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +class EDEX extends React.Component { + render() { + return ( +
+
+

Coming Soon!

+
+
+ ); + } +} + +export default EDEX; diff --git a/react/src/components/dashboard/navbar.js b/react/src/components/dashboard/navbar.js new file mode 100644 index 0000000..683301e --- /dev/null +++ b/react/src/components/dashboard/navbar.js @@ -0,0 +1,120 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +class Navbar extends React.Component { + constructor(props) { + super(props); + this.state = { + openDropMenu: false, + }; + this.openDropMenu = this.openDropMenu.bind(this); + } + + openDropMenu() { + this.setState(Object.assign({}, this.state, { + openDropMenu: !this.state.openDropMenu, + })); + + console.log(this.state); + } + + render() { + return ( + + ); + } +} + +export default Navbar; diff --git a/react/src/components/dashboard/walletsBalance.js b/react/src/components/dashboard/walletsBalance.js new file mode 100644 index 0000000..0c50201 --- /dev/null +++ b/react/src/components/dashboard/walletsBalance.js @@ -0,0 +1,92 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +className WalletsBalance extends React.Component { + render() { + return ( +
+
+
+ + + +
+
+ +
+
+
+
+
+ +
+ + + +
+
+
+
+ +
+ + + + +
+
+ ); + } +} + +export default WalletsBalance; diff --git a/react/src/components/dashboard/walletsBasiliskRefresh.js b/react/src/components/dashboard/walletsBasiliskRefresh.js new file mode 100644 index 0000000..27b1952 --- /dev/null +++ b/react/src/components/dashboard/walletsBasiliskRefresh.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +className WalletsBasiliskRefresh extends React.Component { + render() { + return ( + + ); + } +} + +export default WalletsBasiliskRefresh; diff --git a/react/src/components/dashboard/walletsNav.js b/react/src/components/dashboard/walletsNav.js new file mode 100644 index 0000000..71d8600 --- /dev/null +++ b/react/src/components/dashboard/walletsNav.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +class WalletsNav extends React.Component { + render() { + return ( +
+
+
+ + + Custom Title + +
+ Custom Message. +
+ +
+ + + + +
+ . +
+
+ + ); + } +} + +export default WalletsNav; diff --git a/react/src/components/dashboard/walletsProgress.js b/react/src/components/dashboard/walletsProgress.js new file mode 100644 index 0000000..8ee0e70 --- /dev/null +++ b/react/src/components/dashboard/walletsProgress.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +class WalletsProgress extends React.Component { + render() { + return ( + + ); + } +} + +export default WalletsProgress; \ No newline at end of file diff --git a/react/src/components/dummy/dummy.js b/react/src/components/dummy/dummy.js index ed76393..da9f1a8 100644 --- a/react/src/components/dummy/dummy.js +++ b/react/src/components/dummy/dummy.js @@ -1,6 +1,6 @@ import React from 'react'; -function Dummy() { +class Dummy extends React.Component () { return ( ); } diff --git a/react/src/components/login/login.js b/react/src/components/login/login.js index 7dd8ba7..058e47a 100644 --- a/react/src/components/login/login.js +++ b/react/src/components/login/login.js @@ -1,119 +1,158 @@ import React from 'react'; import { translate } from '../../translate/translate'; -import { toggleAddcoinModal } from '../../actions/actionCreators'; +import { toggleAddcoinModal, iguanaWalletPassphrase } 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, + display: false, + activeLoginSection: 'activateCoin', + loginPassphrase: null, }; this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this); + this.updatePassphraseLoginInput = this.updatePassphraseLoginInput.bind(this); + this.loginSeed = this.loginSeed.bind(this); + } + + componentWillReceiveProps(props) { + console.log('loginprops', props.Main); + if (props && props.Main && props.Main.isLoggedIn) { + this.setState({ + display: false, + }); + console.log(this.state); + } + if (props && props.Main && !props.Main.isLoggedIn) { + this.setState({ + display: true, + }); + } + if (props && props.Main && props.Main.activeCoins) { + this.setState({ + activeLoginSection: 'login', + }); + } else { + this.setState({ + activeLoginSection: 'activateCoin', + }); + } } toggleActivateCoinForm() { Store.dispatch(toggleAddcoinModal(true, false)); } + updatePassphraseLoginInput(e) { + this.setState({ + [e.target.name]: e.target.value, + }); + } + + loginSeed() { + Store.dispatch(iguanaWalletPassphrase(this.state.loginPassphrase)); + console.log(this.state); + } + render() { - return ( -
-
-
-
- SuperNET Iguana -
+ if (this.state && this.state.display) { + return ( +
+
+
+
+ SuperNET Iguana +
-
-
-
-

{translate('INDEX.UNSUPPORTED_BROWSER')}

-
-
- - {translate('INDEX.IE_UNSUPPORTED')} -
-
-

- {translate('INDEX.PLEASE_USE')} Google Chrome {translate('INDEX.OR')} Mozilla FireFox {translate('INDEX.TO_USE')} EasyDEX-GUI. {translate('INDEX.PLEASE_CLICK_ON')}. -

-
- Google Chrome +
+
+
+

{translate('INDEX.UNSUPPORTED_BROWSER')}

-
- Mozilla FireFox +
+ + {translate('INDEX.IE_UNSUPPORTED')} +
+
+

+ {translate('INDEX.PLEASE_USE')} Google Chrome {translate('INDEX.OR')} Mozilla FireFox {translate('INDEX.TO_USE')} EasyDEX-GUI. {translate('INDEX.PLEASE_CLICK_ON')}. +

+
+ Google Chrome +
+
+ Mozilla FireFox +
-
-
-

{translate('INDEX.WELCOME_LOGIN')}

-
-
- - -
- -
- - -
-
-
+
+

{translate('INDEX.WELCOME_LOGIN')}

+
+
+ + +
+ +
+ + +
+
+
-
-

{translate('INDEX.WELCOME_PLEASE_ADD')}

-
- +
+

{translate('INDEX.WELCOME_PLEASE_ADD')}

+
+ +
-
-
-
-

- {translate('INDEX.SELECT_SEED_TYPE')}: -

-
-
- - +
+ +

+ {translate('INDEX.SELECT_SEED_TYPE')}: +

+
+
+ + +
+
+ + +
+
+ + +
-
- - +
+ +
-
- - +
+ +
-
-
- - -
-
- - -
- -
- -
- + +
+ +
+ +
-
- ); + ); + } else { + return null; + } } } diff --git a/react/src/components/main/main.js b/react/src/components/main/main.js index 0e5522f..7285c93 100644 --- a/react/src/components/main/main.js +++ b/react/src/components/main/main.js @@ -2,6 +2,8 @@ import React from 'react'; import Config from '../../config'; import WalletMain from './walletMain'; import { iguanaSetRPCAuth } from '../../util/auth'; +import Store from '../../store'; +import { getDexCoins, iguanaActiveHandle } from '../../actions/actionCreators'; class Main extends React.Component { constructor(props) { @@ -11,13 +13,28 @@ class Main extends React.Component { this.loading = this.loading.bind(this); this.isWalletUnlocked = this.isWalletUnlocked.bind(this); this.state = { - user: false, + isLoggedIn: false, + coins: null, + activeCoins: false, + activeHandleInterval: null, }; } + componentDidMount() { + Store.dispatch(iguanaActiveHandle()); + var _iguanaActiveHandle = setInterval(function() { + Store.dispatch(iguanaActiveHandle()); + }, 30000); + + this.setState(Object.assign({}, this.state, { + activeHandleInterval: _iguanaActiveHandle, + })); + } + componentWillMount() { console.log('mounting main component'); // set userpass param + Store.dispatch(getDexCoins()); iguanaSetRPCAuth(); if (sessionStorage.getItem('session')) { this.setState({ diff --git a/react/src/components/main/walletMain.js b/react/src/components/main/walletMain.js index 49902b9..f2dec00 100644 --- a/react/src/components/main/walletMain.js +++ b/react/src/components/main/walletMain.js @@ -2,11 +2,13 @@ import React from 'react'; import Toaster from '../toaster/toaster'; import AddCoin from '../addcoin/addcoin'; import Login from '../login/login'; +import Dashboard from '../dashboard/dashboard'; class WalletMain extends React.Component { render() { return (
+ diff --git a/react/src/reducers/index.js b/react/src/reducers/index.js index 951bcc7..911eaed 100644 --- a/react/src/reducers/index.js +++ b/react/src/reducers/index.js @@ -3,12 +3,13 @@ import { routerReducer } from 'react-router-redux'; import { AddCoin } from './addcoin'; import { toaster } from './toaster'; +import { Main } from './main'; //import { loader } from './loader'; const rootReducer = combineReducers({ AddCoin, toaster, - //loader, + Main, routing: routerReducer, }); diff --git a/react/src/reducers/main.js b/react/src/reducers/main.js new file mode 100644 index 0000000..9ac1bbf --- /dev/null +++ b/react/src/reducers/main.js @@ -0,0 +1,26 @@ +import { GET_ACTIVE_COINS, LOGIN, ACTIVE_HANDLE } from '../actions/actionCreators' + +export function Main(state = { + isLoggedIn: false, + activeCoins: [], +}, action) { + switch (action.type) { + case GET_ACTIVE_COINS: + return Object.assign({}, state, { + activeCoins: action.activeCoins, + coins: action.coins, + }); + case LOGIN: + return Object.assign({}, state, { + isLoggedIn: action.isLoggedIn, + }); + case ACTIVE_HANDLE: + return Object.assign({}, state, { + isLoggedIn: action.isLoggedIn, + }); + default: + return state; + } +} + +export default Main; diff --git a/react/src/store.js b/react/src/store.js index cb4d78f..d44e661 100644 --- a/react/src/store.js +++ b/react/src/store.js @@ -11,6 +11,7 @@ const loggerMiddleware = createLogger(); const defaultState = { toaster: null, AddCoin: null, + Main: null, }; const enhancers = compose(window.devToolsExtension ? window.devToolsExtension() : f => f); From 7380ebf2fab055c98245cfd54efaf0e0d07b87df Mon Sep 17 00:00:00 2001 From: Petr Balashov Date: Mon, 3 Apr 2017 17:04:18 +0200 Subject: [PATCH 2/3] added dashboard components #2 --- react/src/actions/actionCreators.js | 40 +++++- react/src/components/app/app.js | 2 + react/src/components/dashboard/coinTile.js | 8 -- .../src/components/dashboard/coinTileItem.js | 4 +- react/src/components/dashboard/dashboard.js | 12 +- react/src/components/dashboard/navbar.js | 27 +++- .../components/dashboard/walletsBalance.js | 122 +++++++++--------- .../dashboard/walletsBasiliskRefresh.js | 34 +++-- .../src/components/dashboard/walletsHeader.js | 108 ++++++++++++++++ react/src/components/dashboard/walletsNav.js | 20 +-- react/src/reducers/activeCoin.js | 16 +++ react/src/reducers/dashboard.js | 16 +++ react/src/reducers/index.js | 5 +- react/www/index.html | 2 +- 14 files changed, 298 insertions(+), 118 deletions(-) create mode 100644 react/src/components/dashboard/walletsHeader.js create mode 100644 react/src/reducers/activeCoin.js create mode 100644 react/src/reducers/dashboard.js diff --git a/react/src/actions/actionCreators.js b/react/src/actions/actionCreators.js index 077bdfd..571591b 100644 --- a/react/src/actions/actionCreators.js +++ b/react/src/actions/actionCreators.js @@ -7,6 +7,8 @@ export const DISPLAY_ADDCOIN_MODAL = 'DISPLAY_ADDCOIN_MODAL'; export const GET_ACTIVE_COINS = 'GET_ACTIVE_COINS'; 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'; function triggerToaster(display, message, title, _type) { return { @@ -48,11 +50,37 @@ function iguanaWalletPassphraseState(json, dispatch) { function iguanaActiveHandleState(json) { return { type: ACTIVE_HANDLE, - isLoggedIn: JSON.parse(sessionStorage.getItem('IguanaActiveAccount')).pubkey === json.pubkey && json.status === 'unlocked' ? true : false, + isLoggedIn: sessionStorage.getItem('IguanaActiveAccount') && JSON.parse(sessionStorage.getItem('IguanaActiveAccount')).pubkey === json.pubkey && json.status === 'unlocked' ? true : false, handle: json, } } +function dashboardChangeSectionState(sectionName) { + return { + type: DASHBOARD_SECTION_CHANGE, + activeSection: sectionName, + } +} + +export function dashboardChangeSection(sectionName) { + return dispatch => { + dispatch(dashboardChangeSectionState(sectionName)); + } +} + +function dashboardChangeActiveCoinState(coin) { + return { + type: DASHBOARD_SECTION_CHANGE, + coin: coin, + } +} + +export function dashboardChangeActiveCoin(coin) { + return dispatch => { + dispatch(dashboardChangeSectionState(coin)); + } +} + export function toggleAddcoinModal(display, isLogin) { return dispatch => { dispatch(toggleAddcoinModalState(display, isLogin)); @@ -117,14 +145,14 @@ export function shepherdHerd(coin, mode, path) { export function addCoinResult(coin, mode) { const modeToValue = { - 'full': 1, - 'basilisk': 0, - 'native': -1, + '1': 'full', + '0': 'basilisk', + '-1': 'native' }; + console.log('mode', mode); return dispatch => { - dispatch(triggerToaster(true, coin + ' ' + translate('TOASTR.COIN_STARTED') + modeToValue[mode] + ' ' + translate('TOASTR.MODE'), translate('TOASTR.COIN_NOTIFICATION'), 'success')); - dispatch(getDexCoins()); + dispatch(triggerToaster(true, coin + ' ' + translate('TOASTR.STARTED_IN') + ' ' + modeToValue[mode] + ' ' + translate('TOASTR.MODE'), translate('TOASTR.COIN_NOTIFICATION'), 'success')); } } diff --git a/react/src/components/app/app.js b/react/src/components/app/app.js index 2f23c36..27dff68 100644 --- a/react/src/components/app/app.js +++ b/react/src/components/app/app.js @@ -8,6 +8,8 @@ function mapStateToProps(state) { toaster: state.toaster, AddCoin: state.AddCoin, Main: state.Main, + Dashboard: state.Dashboard, + ActiveCoin: state.ActiveCoin, }; } diff --git a/react/src/components/dashboard/coinTile.js b/react/src/components/dashboard/coinTile.js index fbf4e33..294e235 100644 --- a/react/src/components/dashboard/coinTile.js +++ b/react/src/components/dashboard/coinTile.js @@ -344,14 +344,6 @@ class CoinTile extends React.Component { ); } - /*openDropMenu() { - this.setState(Object.assign({}, this.state, { - openDropMenu: !this.state.openDropMenu, - })); - - console.log(this.state); - }*/ - render() { return (
diff --git a/react/src/components/dashboard/coinTileItem.js b/react/src/components/dashboard/coinTileItem.js index 84a99dc..81d6313 100644 --- a/react/src/components/dashboard/coinTileItem.js +++ b/react/src/components/dashboard/coinTileItem.js @@ -1,5 +1,7 @@ import React from 'react'; import { translate } from '../../translate/translate'; +import { dashboardChangeSection, toggleAddcoinModal } from '../../actions/actionCreators'; +import Store from '../../store'; class CoinTileItem extends React.Component { render() { @@ -8,7 +10,7 @@ class CoinTileItem extends React.Component { return (
-
+
  • - + this.dashboardChangeSection('wallets')}> {translate('INDEX.WALLETS')}
  • - + this.dashboardChangeSection('edex')}> EasyDEX
  • - + this.dashboardChangeSection('jumblr')}> Jumblr
  • - + this.dashboardChangeSection('atomic')}> Atomic Explorer
    • @@ -92,12 +105,12 @@ class Navbar extends React.Component {
    • - + this.dashboardChangeSection('settings')}> {translate('INDEX.SETTINGS')}
    • - + this.dashboardChangeSection('about')}> {translate('INDEX.ABOUT_IGUANA')}
      • diff --git a/react/src/components/dashboard/walletsBalance.js b/react/src/components/dashboard/walletsBalance.js index 0c50201..192ca3c 100644 --- a/react/src/components/dashboard/walletsBalance.js +++ b/react/src/components/dashboard/walletsBalance.js @@ -1,91 +1,89 @@ import React from 'react'; import { translate } from '../../translate/translate'; -className WalletsBalance extends React.Component { +class WalletsBalance extends React.Component { render() { - return ( -
      -
      + if (this.props && this.props.coin) { + return ( +
      - +
      + - -
      -
      - -
      -
      -
      -
      -
      - +
      +
      +
      +
      +
      +
      + {translate('INDEX.BALANCE')} +
      + + +
      - - -
      - -
      -