Node Info (#29)

* Fix: Terminal formatting * Fix: Stops polling logs when node is stopped * Fix: keeps terminal output always scrolling on new entries * fix: baseline redux store * chore: organize project structure * feat: node info * chore: updates * fix: updates * fix: updates * fix: updates * chore: wip updates * fix: ListItem selected styling * fix: geth start/stop * feat: gethconfig tabs * fix: linitng * fix: lifecycle method names * fix: tabs * fix: tabs * fix: linting * fixes * fix: cofnig labels without background * fix: disable config fields when running * fix: simplify nodeinfodot/box by removing remote logic * fix: stopped box * fix: add missing geth stubs so browser version doesn't error out * fix: remove old store + lint * fix: local pulse updates * fix: simplify box func names, color dot orange on bootup * chore: refactor geth service * fix: pulse stack depth bug * fix: single source of state truth * fix: styles status * fix: tweak terminal styles * fix: determinate version installs
ethereum · Mar 13, 2019 · 735fd4f · 735fd4f
1 parent 5b6b81e
commit 735fd4f
Show file tree

Hide file tree

Showing 20 changed files with 1,701 additions and 296 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,6 +15,7 @@ module.exports = {
   rules: {
     'arrow-body-style': 0,
     'arrow-parens': 0,
+    'class-methods-use-this': 0,
     'comma-dangle': 0,
     'implicit-arrow-linebreak': 0,
     'import/no-extraneous-dependencies': [

diff --git a/app/store/SyncedReduxStore.js b/app/store/SyncedReduxStore.js
@@ -1,5 +1,5 @@
 // export default Helpers.isMist() ? window.store.getState().nodes : window.store
-const{ createStore, applyMiddleware } = require('redux');
+const { createStore, applyMiddleware } = require('redux')
 const ReduxThunk = require('redux-thunk')
 
 const initialState = require('./InitialState')
@@ -50,8 +50,6 @@ var web3 = new Web3(Ganache);
 })()
 */
 
-
-
 function mistApp(state = initialState, action) {
   // For now, don't handle any actions
   // and just return the state given to us.
@@ -74,15 +72,15 @@ function mistApp(state = initialState, action) {
       newState.tabs = tabs
       return newState
     }
-    case 'ADD_ACCOUNT':{
+    case 'ADD_ACCOUNT': {
       console.log('reducer called: add account')
       let newState = Object.assign({}, state)
       let acc = action.payload
       let accounts = [...state.accounts, acc]
       newState.accounts = accounts
       return newState
     }
-    case 'SET_TX':{
+    case 'SET_TX': {
       let newState = Object.assign({}, state)
       let tx = action.payload
       newState.newTx = tx
@@ -97,20 +95,20 @@ function mistApp(state = initialState, action) {
       let tabM = {
         ...tabs[tabIdx], // create copy of changed item
         icon: icon // & modify copy
-      } 
+      }
       tabs[tabIdx] = tabM // write changes to new tabs state
       return {
-        tabs: tabs 
+        tabs: tabs
       }
       */
     }
     default:
       return state
   }
 }
-const store = createStore(mistApp/*, applyMiddleware(ReduxThunk)*/)
+const store = createStore(mistApp /*, applyMiddleware(ReduxThunk)*/)
 
-let _accounts = [ 
+let _accounts = [
   '0xF5A5d5c30BfAC14bf207b6396861aA471F9A711D',
   '0xdf4B9dA0aef26bEE9d55Db34480C722906DB4b02',
   '0x944C8763B920fA7a94780B58e78A76Abc87f7cA8',
@@ -123,18 +121,18 @@ let _accounts = [
   '0x19BAe22A399E1bFEE0B10419D006E8d112C51e5b',
   '0x969912D664477bf4Db7B1Aae743D7BbC3Aa59594',
   '0x5793b3709ecdFBBa3019F4a16DC0346aaa20eFE7',
-  '0x73159c2F51Cc5fa273886Ea047E96C81CC2dBBCE' 
+  '0x73159c2F51Cc5fa273886Ea047E96C81CC2dBBCE'
 ]
-_accounts.forEach((acc) => {
-    //let balance = await web3Remote.eth.getBalance(acc)
-    let balance = 0
-    store.dispatch({
-      type: 'ADD_ACCOUNT',
-      payload: {
-        address: acc,
-        balance: ('' +balance)
-      }
-    })
+_accounts.forEach(acc => {
+  //let balance = await web3Remote.eth.getBalance(acc)
+  let balance = 0
+  store.dispatch({
+    type: 'ADD_ACCOUNT',
+    payload: {
+      address: acc,
+      balance: '' + balance
+    }
   })
+})
 
 module.exports = store
diff --git a/package.json b/package.json
@@ -30,14 +30,16 @@
     "@material-ui/icons": "^3.0.2",
     "bignumber.js": "^7.2.1",
     "bn.js": "^4.11.8",
+    "classnames": "^2.2.6",
     "ethereum-react-components": "^1.13.11",
     "lodash": "^4.17.11",
-    "moment": "^2.22.2",
+    "moment": "^2.24.0",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-md-spinner": "^0.3.0",
+    "react-minimal-pie-chart": "^3.5.0",
     "react-redux": "^5.0.7",
     "react-scripts": "^2.1.1",
     "redux": "^4.0.0",

diff --git a/src/API/Mist.js b/src/API/Mist.js
@@ -30,7 +30,9 @@ const MistApi = {
     },
     getLogs: () => {
       return []
-    }
+    },
+    setConfig: () => {},
+    on: () => {}
   },
   window: {
     getArgs() {

diff --git a/src/components/NavTabs.js b/src/components/NavTabs.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import AppBar from '@material-ui/core/AppBar'
 import CssBaseline from '@material-ui/core/CssBaseline'
+import Typography from '@material-ui/core/Typography'
 import Tab from '@material-ui/core/Tab'
 import Tabs from '@material-ui/core/Tabs'
 import NodesTab from './Nodes'
@@ -17,64 +18,73 @@ const styles = theme => ({
   content: {
     flexGrow: 1,
     padding: theme.spacing.unit * 3
-  },
-  toolbar: theme.mixins.toolbar
+  }
+})
+
+const TabContainer = withStyles(styles)(props => {
+  const { children, classes, display } = props
+  return (
+    <main className={classes.content} style={{ display }}>
+      <Typography component="div">{children}</Typography>
+    </main>
+  )
 })
 
+TabContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  classes: PropTypes.object,
+  display: PropTypes.string
+}
+
 class NavTabs extends React.Component {
   static propTypes = {
     classes: PropTypes.object
   }
 
   state = {
-    value: 0
+    activeTab: 0
   }
 
-  handleChange = (event, value) => {
-    this.setState({ value })
+  handleTabChange = (event, activeTab) => {
+    this.setState({ activeTab })
   }
 
   render() {
     const { classes } = this.props
-    const { value } = this.state
+    const { activeTab } = this.state
 
     return (
       <div className={classes.root}>
         <CssBaseline />
         <AppBar position="fixed" className={classes.appBar}>
           <Tabs
-            value={value}
-            onChange={this.handleChange}
+            value={activeTab}
+            onChange={this.handleTabChange}
             textColor="primary"
             indicatorColor="primary"
           >
             <Tab label="Nodes" />
-            <Tab label="Network" />
-            <Tab disabled label="Transactions" />
-            <Tab label="Tools" />
+            <Tab label="Network" disabled />
+            <Tab label="Transactions" disabled />
+            <Tab label="Tools" disabled />
           </Tabs>
         </AppBar>
 
-        {value === 0 && <NodesTab />}
+        <div style={{ display: activeTab === 0 ? 'inherit' : 'none' }}>
+          <NodesTab />
+        </div>
+
+        <TabContainer display={activeTab === 1 ? 'block' : 'none'}>
+          <Typography component="h6">Network</Typography>
+        </TabContainer>
+
+        <TabContainer display={activeTab === 2 ? 'block' : 'none'}>
+          <Typography component="h6">Transactions</Typography>
+        </TabContainer>
 
-        {value === 1 && (
-          <main className={classes.content}>
-            <div className={classes.toolbar} />
-            <div>Network</div>
-          </main>
-        )}
-        {value === 2 && (
-          <main className={classes.content}>
-            <div className={classes.toolbar} />
-            <div>Transactions</div>
-          </main>
-        )}
-        {value === 3 && (
-          <main className={classes.content}>
-            <div className={classes.toolbar} />
-            <div>Tools</div>
-          </main>
-        )}
+        <TabContainer display={activeTab === 3 ? 'block' : 'none'}>
+          <Typography component="h6">Tools</Typography>
+        </TabContainer>
       </div>
     )
   }