implemented blocks page

app/src/renderer/components/common/AppMenu.vue

@@ -6,7 +6,7 @@ menu.app-menu
     list-item(to="/staking" exact @click.native="close" title="Delegates")
     list-item(to="/validators" exact @click.native="close" title="Validators" v-bind:class="{ 'active': isValidatorPage }")
     list-item(to="/proposals" exact @click.native="close" title="Proposals" v-if="config.devMode")
-    list-item(to="/blockchain" exact @click.native="close" title="Monitor" v-if="config.devMode")
+    list-item(to="/blockchain" exact @click.native="close" title="Blocks")
     connectivity
   user-pane
 </template>

app/src/renderer/components/common/NiConnectivity.vue

@@ -16,7 +16,7 @@ export default {
     ListItem
   },
   computed: {
-    ...mapGetters(['lastHeader', 'nodeIP', 'connected']),
+    ...mapGetters(['lastHeader', 'nodeIP', 'connected', 'validators']),
     blockString () {
       return `${this.lastHeader.chain_id} (#${num.prettyInt(this.lastHeader.height)})`
     }

app/src/renderer/components/common/NiDataEmpty.vue

@@ -1,13 +1,17 @@
 <template lang="pug">
 data-msg(icon="info_outline")
-  div(slot="title") N/A
-  div(slot="subtitle") No data available yet.
+  h4(v-if="title" slot="title") {{ title }}
+  h4(v-else slot="title") N/A
+
+  h5(v-if="subtitle" slot="subtitle") {{ subtitle }}
+  h5(v-else slot="subtitle") No data available yet.
 </template>
 
 <script>
 import DataMsg from 'common/NiDataMsg'
 export default {
   name: 'ni-data-empty',
+  props: ['title', 'subtitle'],
   components: {
     DataMsg
   }

app/src/renderer/components/common/NiListItem.vue

@@ -99,6 +99,10 @@ export default {
       background transparent
       z-index z(listItem)
 
+    .ni-li-dt
+    .ni-li-dd
+      color link
+
   &.router-link-exact-active
     .ni-li-title
       color bright

app/src/renderer/components/monitor/PageBlock.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-page(:title="`Block ${block.header.height}`")
+page(:title="pageBlockTitle")
   div(slot="menu"): tool-bar
     router-link(to="/blockchain")
       i.material-icons arrow_back
@@ -16,7 +16,7 @@ page(:title="`Block ${block.header.height}`")
 
   part(title='Header')
     list-item(dt="Chain ID" :dd="block.header.chain_id")
-    list-item(dt="Time" :dd="block.header.time")
+    list-item(dt="Time" :dd="blockHeaderTime")
     list-item(dt="Transactions" :dd="block.header.num_txs")
     list-item(dt="Last Commit Hash" :dd="block.header.last_commit_hash")
     list-item(dt="Validators Hash" :dd="block.header.validators_hash")
@@ -38,29 +38,41 @@ page(:title="`Block ${block.header.height}`")
     :dd="p.signature.data")
 
   part(title='Transactions')
-    list-item(v-for="tx in block.data.txs" :key="tx.id"
-      dt="Transaction" :dd="TODO")
+    list-item(v-if="block.header.num_txs > 0" v-for="tx in block.data.txs" :key="tx.id" dt="Transaction" :dd="TODO")
+    data-empty(v-if="block.header.num_txs === 0" title="Empty Block" subtitle="There were no transactions in this block.")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import moment from 'moment'
+import num from 'scripts/num'
 import axios from 'axios'
+import DataEmpty from 'common/NiDataEmpty'
 import ToolBar from 'common/NiToolBar'
 import ListItem from 'common/NiListItem'
 import Part from 'common/NiPart'
 import Page from 'common/NiPage'
 export default {
   name: 'page-block',
   components: {
+    DataEmpty,
     ToolBar,
     ListItem,
     Part,
     Page
   },
   computed: {
-    ...mapGetters(['blockchain'])
+    ...mapGetters(['blockchain']),
+    blockHeaderTime () {
+      return moment(this.block.header.time).format('MMMM Do YYYY — hh:mm:ss')
+    },
+    pageBlockTitle () {
+      return 'Block #' + num.prettyInt(this.block.header.height)
+    }
   },
   data: () => ({
+    num: num,
+    moment: moment,
     blockUrl: '',
     block_meta: {
       block_id: {

app/src/renderer/components/monitor/PageBlockchain.vue

@@ -1,41 +1,18 @@
 <template lang="pug">
-page(title='Blockchain')
+page(title='Blocks')
   div(slot="menu"): tool-bar
-    router-link(to="/search" exact)
-      i.material-icons search
-      .label Search
-    a(@click='toggleBlockchainSelect')
-      i.material-icons(v-if='!config.modals.blockchain.active') filter_list
-      i.material-icons(v-else='') close
-      .label Switch Blockchain
-
-  blockchain-select-modal
-
-  template(v-if="bc")
-    part(title='Metadata')
-      list-item(dt='Network' :dd='bc.status.node_info.network')
-      list-item(dt='App Version' :dd='version')
-      list-item(dt='Tendermint Version' :dd='bc.status.node_info.version')
-
-    part(title='Block')
-      list-item(dt='Block Height' :dd='num.prettyInt(bc.status.latest_block_height)'
-        :to="{ name: 'block', params: { block: bc.status.latest_block_height} }")
-      list-item(dt='Latest Block Time' :dd='readableDate(bc.status.latest_block_time)')
-      list-item(dt='Latest Block Hash' :dd='bc.status.latest_block_hash')
-
-    part(title='Nodes')
-      list-item(dt='Active Nodes' :dd='validators.length')
-      list-item(dt='Current Rate' :dd="currentRate + ' bytes/s'")
-      list-item(dt='Average Rate' :dd="averageRate + ' bytes/s'")
-
-  data-error(v-else)
+  template
+    part(title='Latest Block')
+      list-item(dt='Block Height' :dd='num.prettyInt(lastHeader.height)'
+        :to="{ name: 'block', params: { block: lastHeader.height} }")
+      list-item(dt='Latest Block Time' :dd='latestBlockTime')
+      list-item(dt='Latest Block Hash' :dd='status.latest_block_hash')
 </template>
 
 <script>
 import moment from 'moment'
 import num from 'scripts/num'
 import { mapGetters } from 'vuex'
-import BlockchainSelectModal from 'monitor/BlockchainSelectModal'
 import ListItem from 'common/NiListItem'
 import DataError from 'common/NiDataError'
 import Page from 'common/NiPage'
@@ -44,57 +21,24 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-blockchain',
   components: {
-    BlockchainSelectModal,
     ListItem,
     DataError,
     Page,
     Part,
     ToolBar
   },
   computed: {
-    ...mapGetters(['blockchain', 'config', 'validators']),
-    bc () { return this.blockchain },
-    version () {
-      let v
-      if (this.bc.blockchainName === 'venus') {
-        v = this.bc.abciInfo.data
-      } else {
-        v = this.bc.abciInfo.data.substring(10, this.bc.abciInfo.data.length)
-      }
-      return v
+    ...mapGetters(['blockchain', 'validators', 'lastHeader']),
+    status () {
+      return this.blockchain.status
     },
-    avgTxThroughput () {
-      return Math.round(this.bc.network.avg_tx_throughput * 1000) / 1000
-    },
-    currentRate () {
-      let txs = 0
-      // this.validators.reduce(txs, v => (txs += v.connection_status.SendMonitor.CurRate))
-      for (let i = 0; i < this.validators.length; i++) {
-        txs += this.validators[i].connection_status.SendMonitor.CurRate
-      }
-      let average = Math.round(txs / this.validators.length)
-      return average
-    },
-    averageRate () {
-      let txs = 0
-      for (let i = 0; i < this.validators.length; i++) {
-        txs += this.validators[i].connection_status.SendMonitor.AvgRate
-      }
-      let average = Math.round(txs / this.validators.length)
-      return average
+    latestBlockTime () {
+      return moment(this.status.latest_block_time).format('MMMM Do YYYY — hh:mm:ss')
     }
   },
   data: () => ({
     moment: moment,
     num: num
-  }),
-  methods: {
-    readableDate (ms) {
-      return moment(ms / 1000000).format('HH:mm:ss.SSS')
-    },
-    toggleBlockchainSelect () {
-      this.$store.commit('setModalBlockchain', !this.config.modals.blockchain.active)
-    }
-  }
+  })
 }
 </script>

app/src/renderer/components/staking/PageBond.vue

@@ -19,7 +19,7 @@ page.page-bond(title="Bond Atoms")
       | #[a.reserved-atoms__restart(@click="resetAlloc")  (start over?)]
 
   form-struct(:submit="onSubmit")
-    form-group(v-for='(delegate, index) in fields.delegates' key='delegate.id'
+    form-group(v-for='(delegate, index) in fields.delegates' :key='delegate.id'
       :error="$v.fields.delegates.$each[index].$error")
       Label {{ shortenLabel(delegate.delegate.description.moniker, 10) }} - {{ shortenLabel(delegate.delegate.id, 20) }} ({{ percentAtoms(delegate.atoms) }})
       field-group
@@ -183,7 +183,7 @@ export default {
   watch: {
     shoppingCart (newVal) {
       this.leaveIfEmpty(newVal.length)
-      // this.resetAlloc()
+      this.resetAlloc()
       if (this.equalize) { this.equalAlloc }
     }
   },

app/src/renderer/components/staking/PageDelegate.vue

@@ -57,7 +57,7 @@ export default {
         description: {}
       }
       if (this.delegates && this.$route.params.delegate) {
-        value = this.delegates.find(v => v.id === this.$route.params.delegate)
+        value = this.delegates.find(v => v.id === this.$route.params.delegate) || value
       }
       return value
     },

app/src/renderer/node.js

@@ -12,6 +12,7 @@ module.exports = function (nodeIP) {
   let node = new RestClient(RELAY_SERVER)
 
   Object.assign(node, {
+    nodeIP,
     lcdConnected: () => node.listKeys()
       .then(() => true, () => false),
 

app/src/renderer/vuex/modules/blockchain.js

@@ -0,0 +1,48 @@
+import axios from 'axios'
+
+export default ({ commit, node }) => {
+  const state = {
+    urlPrefix: 'https://',
+    blockchainName: 'gaia-2-dev',
+    urlSuffix: '-node0.testnets.interblock.io',
+    status: {},
+    abciInfo: {},
+    topAvgTxRate: 0
+  }
+
+  const mutations = {
+    setBlockchainName (state, name) {
+      state.blockchainName = name
+    },
+    setTopAvgTxRate (state, value) {
+      state.topAvgTxRate = value
+    },
+    getStatus (state) {
+      let url = state.urlPrefix + state.blockchainName + state.urlSuffix
+      axios(url + '/status').then((res) => {
+        state.status = res.data.result
+      })
+    },
+    getAbciInfo (state) {
+      let url = state.urlPrefix + state.blockchainName + state.urlSuffix
+      axios(url + '/abci_info').then((res) => {
+        state.abciInfo = res.data.result
+      })
+    }
+  }
+
+  // function getBlocks () {
+  //   node.rpc.subscribe({ event: 'NewBlockHeader' }, (err, event) => {
+  //     if (err) return console.error('error subscribing to new block headers', err)
+  //     console.log(event)
+  //   })
+  // }
+  // getBlocks()
+
+  setTimeout(() => {
+    mutations.getStatus(state)
+    mutations.getAbciInfo(state)
+  }, 3000)
+
+  return { state, mutations }
+}

app/src/renderer/vuex/modules/delegation.js

@@ -2,6 +2,8 @@ import axios from 'axios'
 
 export default ({ commit }) => {
   let state = {
+    delegationActive: false,
+
     // our delegations, maybe not yet committed
     delegates: [],
 
@@ -10,6 +12,9 @@ export default ({ commit }) => {
   }
 
   const mutations = {
+    activateDelegation (state) {
+      state.delegationActive = true
+    },
     addToCart (state, delegate) {
       // don't add to cart if already in cart
       for (let existingDelegate of state.delegates) {
@@ -25,9 +30,6 @@ export default ({ commit }) => {
     removeFromCart (state, delegate) {
       state.delegates = state.delegates.filter(c => c.id !== delegate)
     },
-    reserveAtoms (state, {delegateId, value}) {
-      state.delegates.find(d => d.id === delegateId).reservedAtoms = value
-    },
     setShares (state, {candidateId, value}) {
       state.delegates.find(c => c.id === candidateId).atoms = value
     },
@@ -45,7 +47,6 @@ export default ({ commit }) => {
   let actions = {
     // load committed delegations from LCD
     async getBondedDelegates ({ state, dispatch }, {candidates, address}) {
-      // TODO move into cosmos-sdk
       candidates.forEach(candidate => {
         dispatch('getBondedDelegate', {address, pubkey: candidate.pub_key.data})
       })
@@ -94,8 +95,6 @@ export default ({ commit }) => {
           })
         })
       }
-
-      commit('activateDelegation', true)
     }
   }
 

app/src/renderer/vuex/modules/index.js

@@ -1,11 +1,12 @@
 export default (opts) => ({
-  delegates: require('./delegates.js').default(opts),
+  blockchain: require('./blockchain.js').default(opts),
   config: require('./config.js').default(opts),
+  delegates: require('./delegates.js').default(opts),
+  delegation: require('./delegation.js').default(opts),
   filters: require('./filters.js').default(opts),
   node: require('./node.js').default(opts),
   notifications: require('./notifications.js').default(opts),
   proposals: require('./proposals.js').default(opts),
-  delegation: require('./delegation.js').default(opts),
   user: require('./user.js').default(opts),
   validators: require('./validators.js').default(opts),
   wallet: require('./wallet.js').default(opts)

app/src/renderer/vuex/modules/node.js

@@ -57,9 +57,11 @@ export default function ({ node }) {
         })
       })
       node.rpc.subscribe({ event: 'NewBlockHeader' }, (err, event) => {
-        if (err) return console.error('error subscribing to headers', err)
-        commit('setConnected', true)
-        dispatch('setLastHeader', event.data.data.header)
+        console.log(err)
+        // if (err) return console.error('error subscribing to headers', err)
+        // commit('setConnected', true)
+        console.log(event)
+        // dispatch('setLastHeader', event.data.data.header)
       })
 
       dispatch('pollRPCConnection')