Jordan/1866 blocks

CHANGELOG.md

@@ -68,6 +68,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1894](https://github.com/cosmos/voyager/issues/1894) Added favicons for all the browsers and devices @jbibla
 - [\#1865](https://github.com/cosmos/voyager/issues/1865) Added Vuex blocks module @sabau
 - [\#1928](https://github.com/cosmos/voyager/issues/1928) Added Browserstack reference to README @sabau
+- [\#1866](https://github.com/cosmos/voyager/issues/1866) Added blocks to network page and a page for viewing individual blocks @jbibla
 
 ### Changed
 

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

@@ -14,10 +14,10 @@
       </div>
     </div>
     <div id="tm-connected-network__block" class="tm-connected-network__string">
-      <a
-        v-tooltip.top="'View block details on the Cosmos explorer.'"
-        :href="explorerLink"
-        >{{ blockHeight }}<i class="material-icons exit">exit_to_app</i></a
+      <router-link
+        v-tooltip.top="'Block Height'"
+        :to="{ name: `block`, params: { height: lastHeader.height } }"
+        >{{ blockHeight }}</router-link
       >
     </div>
   </div>
@@ -38,33 +38,26 @@
 <script>
 import { mapGetters } from "vuex"
 import num from "scripts/num"
+
 export default {
   name: `tm-connected-network`,
   data: () => ({
-    num: num
+    num
   }),
   computed: {
     ...mapGetters([`lastHeader`, `nodeUrl`, `connected`]),
-    networkTooltip({ connected, nodeUrl } = this) {
+    networkTooltip({ connected, nodeUrl, lastHeader } = this) {
       if (connected) {
         return `You\'re connected to the ${
-          this.lastHeader.chain_id
+          lastHeader.chain_id
         } testnet via node ${nodeUrl}.`
       }
       return `We\'re pinging nodes to try to connect you to ${
-        this.lastHeader.chain_id
+        lastHeader.chain_id
       }.`
     },
     blockHeight() {
-      return `#` + num.prettyInt(this.lastHeader.height)
-    },
-    explorerLink() {
-      return `https://explorecosmos.network/blocks/` + this.lastHeader.height
-    }
-  },
-  methods: {
-    closeMenu() {
-      this.$store.commit(`setActiveMenu`, ``)
+      return `#` + this.num.prettyInt(this.lastHeader.height)
     }
   }
 }

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

@@ -119,9 +119,6 @@ export default {
       return refresh ? { connected, refresh } : undefined
     }
   },
-  updated() {
-    this.$el.querySelector(`.tm-page-main`).scrollTop = 0
-  },
   async mounted() {
     Mousetrap.bind([`command+f`, `ctrl+f`], () => this.setSearch(true))
     Mousetrap.bind(`esc`, () => this.setSearch(false))
@@ -216,6 +213,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  padding: 1rem;
 }
 
 .page-profile__status-and-title {

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

@@ -0,0 +1,154 @@
+<template>
+  <tm-page data-title="Block">
+    <template slot="menu-body">
+      <tm-balance />
+      <tool-bar />
+    </template>
+
+    <tm-data-error v-if="!connected || !block || !header" />
+
+    <template v-else>
+      <div class="page-profile__header page-profile__section block">
+        <div class="row">
+          <div class="page-profile__header__info">
+            <div class="page-profile__status-and-title">
+              <h2 class="page-profile__title">
+                Block {{ `#` + num.prettyInt(header.height) }}
+              </h2>
+              <h3 class="page-profile__subtitle">
+                {{ block.block_meta.block_id.hash }}
+              </h3>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <dl class="info_dl colored_dl">
+            <dt>Time</dt>
+            <dd>{{ moment(header.time).format("MMM Do YYYY, HH:mm:ss") }}</dd>
+          </dl>
+          <dl class="info_dl colored_dl">
+            <dt>Proposer</dt>
+            <dd>{{ header.proposer_address }}</dd>
+          </dl>
+        </div>
+      </div>
+
+      <div class="page-profile__section block">
+        <div class="row">
+          <div class="column">
+            <dl class="info_dl colored_dl">
+              <dt>Transactions</dt>
+              <dd>{{ block.block.data.txs || `No Transactions` }}</dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      <div class="page-profile__section block">
+        <div class="row">
+          <div class="column">
+            <dl class="info_dl colored_dl">
+              <dt>Evidence</dt>
+              <dd>{{ block.block.evidence.evidence || `No Evidence` }}</dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      <div class="page-profile__section block">
+        <div class="row">
+          <div class="column">
+            <dl class="info_dl colored_dl">
+              <dt>Pre Commits</dt>
+              <dd v-if="!block.block.last_commit.precommits">No precommits</dd>
+              <table v-else class="pre-commits data-table">
+                <thead>
+                  <panel-sort :properties="properties" />
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(precommit, index) in block.block.last_commit
+                      .precommits"
+                    :key="index"
+                    class="block data-table__row"
+                  >
+                    <td>{{ precommit.validator_address }}</td>
+                    <td>
+                      {{
+                        moment(precommit.timestamp).format(
+                          "MMM Do YYYY, HH:mm:ss"
+                        )
+                      }}
+                    </td>
+                    <td>{{ precommit.round }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </template>
+  </tm-page>
+</template>
+
+<script>
+import moment from "moment"
+import axios from "axios"
+import { mapGetters } from "vuex"
+import num from "scripts/num"
+import PanelSort from "staking/PanelSort"
+import ToolBar from "common/ToolBar"
+import TmBalance from "common/TmBalance"
+import TmDataError from "common/TmDataError"
+import TmPage from "common/TmPage"
+export default {
+  name: `page-block`,
+  components: {
+    PanelSort,
+    TmBalance,
+    ToolBar,
+    TmDataError,
+    TmPage
+  },
+  data: () => ({
+    num,
+    moment,
+    header: null,
+    block: null
+  }),
+  computed: {
+    ...mapGetters([`connected`, `blocks`]),
+    properties() {
+      return [
+        {
+          title: `Proposer`
+        },
+        {
+          title: `Time`
+        },
+        {
+          title: `Round`
+        }
+      ]
+    }
+  },
+  watch: {
+    $route: `getBlock`
+  },
+  async mounted() {
+    await this.getBlock()
+  },
+  methods: {
+    async getBlock() {
+      const url =
+        `http://localhost:8080/` + `blocks/` + this.$route.params.height
+      const block = await axios.get(url)
+      this.header = block.data.block.header
+      this.block = block.data
+    }
+  }
+}
+</script>
+<style></style>

app/src/renderer/components/network/PageNetwork.vue

@@ -18,16 +18,13 @@
                 class="page-profile__status"
               />
               <h2 class="page-profile__title">{{ lastHeader.chain_id }}</h2>
-              <h3 v-if="config.devMode">
-                Proposer: {{ lastHeader.proposer_address }}
-              </h3>
             </div>
           </div>
         </div>
         <div class="row">
           <dl class="info_dl colored_dl">
-            <dt>Height</dt>
-            <dd>{{ lastHeader.height }}</dd>
+            <dt>Block Height</dt>
+            <dd>{{ `#` + num.prettyInt(lastHeader.height) }}</dd>
           </dl>
           <dl class="info_dl colored_dl">
             <dt>Last Block</dt>
@@ -61,14 +58,36 @@
           </div>
         </div>
       </div>
+      <table class="blocks data-table">
+        <thead>
+          <panel-sort :properties="properties" />
+        </thead>
+        <tbody>
+          <tr
+            v-for="block in blocks"
+            :key="block.header.height"
+            class="block data-table__row"
+          >
+            <td>
+              <router-link
+                :to="{ name: `block`, params: { height: block.header.height } }"
+                >{{ `#` + num.prettyInt(block.header.height) }}</router-link
+              >
+            </td>
+            <td>{{ block.header.num_txs }}</td>
+            <td>{{ block.header.proposer_address }}</td>
+          </tr>
+        </tbody>
+      </table>
     </template>
   </tm-page>
 </template>
 
 <script>
 import moment from "moment"
 import { mapGetters } from "vuex"
-import TmBtn from "common/TmBtn"
+import num from "scripts/num"
+import PanelSort from "staking/PanelSort"
 import ToolBar from "common/ToolBar"
 import TmBalance from "common/TmBalance"
 import TmDataError from "common/TmDataError"
@@ -77,19 +96,22 @@ export default {
   name: `page-network`,
   components: {
     TmBalance,
-    TmBtn,
+    PanelSort,
     ToolBar,
     TmDataError,
     TmPage
   },
+  data: () => ({
+    num
+  }),
   computed: {
     ...mapGetters([
       `connected`,
       `lastHeader`,
       `delegates`,
-      `config`,
       `pool`,
-      `bondDenom`
+      `bondDenom`,
+      `blocks`
     ]),
     status() {
       const color = this.connected ? `green` : `red`
@@ -101,12 +123,38 @@ export default {
     lastBlock() {
       moment.relativeTimeThreshold(`ss`, 1)
       return moment(this.lastHeader.time).fromNow()
+    },
+    properties() {
+      return [
+        {
+          title: `Block Number`,
+          value: `block_number`,
+          tooltip: `Block Number`,
+          class: `blockNumber`
+        },
+        {
+          title: `Transactions`,
+          value: `transactions`,
+          tooltip: `Number of transactions per block`,
+          class: `transactions`
+        },
+        {
+          title: `Proposer`,
+          value: `proposer`,
+          tooltip: `Validator responsible for block proposals`,
+          class: `proposer`
+        }
+      ]
     }
   }
 }
 </script>
-<style>
-.network .page-profile__header__info {
-  padding: 2rem;
+<style scoped>
+.block td {
+  padding: 1rem;
+}
+
+.blocks.data-table th {
+  padding: 0.5rem 1rem;
 }
 </style>

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

@@ -3,15 +3,17 @@
     <th
       v-for="property in properties"
       :key="property.value"
-      :class="property.class"
-      class="sort-by"
+      :class="{ 'sort-by': sort }"
+      class="panel-sort-table-header"
     >
       <a
         v-tooltip.top="property.tooltip"
+        v-if="sort"
         class="sort-by-link"
         @click="orderBy(property.value)"
         >{{ property.title }}</a
       >
+      <span v-else>{{ property.title }}</span>
     </th>
   </tr>
 </template>
@@ -22,7 +24,7 @@ export default {
   props: {
     sort: {
       type: Object,
-      required: true
+      default: null
     },
     properties: {
       type: Array,
@@ -61,7 +63,7 @@ export default {
   padding: 1rem;
 }
 
-.sort-by {
+.panel-sort-table-header {
   font-size: var(--sm);
 }