finish blocks

src/router/index.js

@@ -111,6 +111,20 @@ const router = new VueRouter({
         ],
       },
     },
+    {
+      path: '/:chain/blocks',
+      name: 'blocks',
+      component: () => import('@/views/Blocks.vue'),
+      meta: {
+        pageTitle: 'Block',
+        breadcrumb: [
+          {
+            text: 'Blocks',
+            active: true,
+          },
+        ],
+      },
+    },
     {
       path: '/:chain/block/:height',
       name: 'block',

src/views/Blocks.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <b-card
+      no-body
+    >
+      <b-card-header>
+        <b-card-title>
+          Blocks
+        </b-card-title>
+      </b-card-header>
+      <b-table
+        :items="blocks"
+        :fields="list_fields"
+        :sort-desc="true"
+        sort-by="tokens"
+        striped
+        hover
+        responsive="sm"
+      >
+        <!-- Column: Height -->
+        <template #cell(height)="data">
+          <router-link :to="`./block/${data.item.block.header.height}`">
+            #{{ data.item.block.header.height }}
+          </router-link>
+        </template>
+        <template #cell(hash)="data">
+          {{ data.item.block_id.hash }}
+        </template>
+        <template #cell(time)="data">
+          {{ formatTime(data.item.block.header.time) }}
+        </template>
+        <template #cell(proposer)="data">
+          {{ data.item.block.header.proposer_address }}
+        </template>
+        <template #cell(txs)="data">
+          {{ length(data.item.block.data.txs) }}
+        </template>
+
+      </b-table>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import {
+  BTable, BCard, BCardHeader, BCardTitle, VBTooltip,
+} from 'bootstrap-vue'
+import {
+  toDay,
+} from '@/libs/data'
+// import fetch from 'node-fetch'
+
+export default {
+  components: {
+    BCard,
+    BTable,
+    BCardHeader,
+    BCardTitle,
+  },
+  directives: {
+    'b-tooltip': VBTooltip,
+  },
+  data() {
+    return {
+      islive: true,
+      blocks: [],
+      list_fields: [
+        { key: 'height', sortable: true },
+        {
+          key: 'hash',
+          tdClass: 'text-truncate',
+        },
+        {
+          key: 'proposer',
+          tdClass: 'text-truncate',
+        },
+        {
+          key: 'txs',
+          // formatter: (value, i, data) => this.apr(value, i, data),
+          tdClass: 'text-right',
+          thClass: 'text-right',
+        },
+        { key: 'time' },
+      ],
+    }
+  },
+  created() {
+    this.$http.getLatestBlock().then(res => {
+      this.blocks.push(res)
+      const list = []
+      const { height } = res.block.header
+      for (let i = 1; i < 20; i += 1) {
+        list.push(height - i)
+      }
+      console.log(height, list)
+      let promise = Promise.resolve()
+      list.forEach(item => {
+        promise = promise.then(() => new Promise(resolve => {
+          this.$http.getBlockByHeight(item).then(b => {
+            resolve()
+            this.blocks.push(b)
+          })
+        }))
+      })
+      this.timer = setInterval(this.fetch, 6000)
+    })
+  },
+  beforeDestroy() {
+    this.islive = false
+    clearInterval(this.timer)
+  },
+  methods: {
+    length: v => (Array.isArray(v) ? v.length : 0),
+    formatTime: v => toDay(v),
+    fetch() {
+      this.$http.getLatestBlock().then(b => {
+        const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height)
+        if (has < 0) this.blocks.unshift(b)
+        if (this.blocks.length > 200) this.blocks.pop()
+      })
+    },
+  },
+}
+</script>

src/views/Home.vue

@@ -25,9 +25,11 @@
           md="4"
           sm="6"
         >
+          <router-link :to="data.chain_name">
             <b-card
               v-if="data"
               no-body
+              hover
             >
               <b-card-header>
                 <h4 class="mb-0 text-uppercase">
@@ -69,6 +71,7 @@
                 </b-col>
               </b-row>
             </b-card>
+          </router-link>
         </b-col>
 
         <!-- no result found -->