Update UI

src/libs/data/data.js

@@ -1,12 +1,30 @@
 import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import {
   Bech32, fromBase64, fromHex, toHex,
 } from '@cosmjs/encoding'
 import { sha256 } from '@cosmjs/crypto'
 
-export function toDay(time) {
+dayjs.extend(relativeTime)
+
+export function toDay(time, format = 'long') {
+  if (format === 'long') {
     return dayjs(time).format('YYYY-MM-DD HH:mm')
   }
+  if (format === 'date') {
+    return dayjs(time).format('YYYY-MM-DD')
+  }
+  if (format === 'time') {
+    return dayjs(time).format('HH:mm:ss')
+  }
+  if (format === 'from') {
+    return dayjs(time).fromNow()
+  }
+  if (format === 'to') {
+    return dayjs(time).toNow()
+  }
+  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+}
 
 export function percent(num) {
   return parseFloat((num * 100).toFixed(2))

src/libs/data/proposal.js

@@ -28,9 +28,9 @@ export default class Proposal {
     this.title = element.content.value.title
     this.description = element.content.value.description
     this.tally = new ProposalTally().init(element.final_tally_result, total)
-    this.submit_time = toDay(element.submit_time)
-    this.voting_end_time = toDay(element.voting_end_time)
-    this.voting_start_time = toDay(element.voting_start_time)
+    this.submit_time = toDay(element.submit_time, 'date')
+    this.voting_end_time = toDay(element.voting_end_time, 'date')
+    this.voting_start_time = toDay(element.voting_start_time, 'date')
     this.total_deposit = formatToken(element.total_deposit[0])
     this.contents = element.content.value
     return this

src/libs/data/stdtx.js

@@ -7,7 +7,7 @@ export default class StdTx {
     this.fee = [new Token()]
     this.gas = 0
     this.memo = ''
-    this.messages = []
+    this.messages = null
     this.signatures = []
     this.timeout_height = 0
   }

src/libs/data/wrapstdtx.js

@@ -3,6 +3,7 @@ import StdTx from './stdtx'
 
 export default class WrapStdTx {
   constructor() {
+    this.std = true
     this.code = 0
     this.txhash = ''
     this.data = ''
@@ -19,6 +20,7 @@ export default class WrapStdTx {
   static create(element, version = '0.40') {
     const self = new WrapStdTx()
     if (compareVersions(version, '0.40') < 1) {
+      if (element.txhash) {
         self.txhash = element.txhash
         self.data = element.data
         self.gas_used = element.gas_used
@@ -27,6 +29,10 @@ export default class WrapStdTx {
         self.logs = element.logs
         self.timestamp = element.timestamp
         self.tx = StdTx.create(element.tx)
+      } else {
+        self.std = false
+        self.raw = element
+      }
     } else {
       self.code = element.tx_response.code
       self.txhash = element.tx_response.txhash

src/views/Block.vue

@@ -82,16 +82,18 @@ export default {
       this.$http.getBlockByHeight(height).then(res => {
         this.block = res
         const { txs } = res.block.data
+        if (txs === null) return
         const array = []
-        for (let i = 0; i <= txs.length; i += 1) {
+        for (let i = 0; i < txs.length; i += 1) {
+          let tx = new Tx()
           try {
             const origin = decodeTxRaw(fromBase64(txs[i]))
-            const tx = Tx.create(origin)
-            tx.setHash(txs[i])
-            array.push(tx)
+            tx = Tx.create(origin)
           } catch (e) {
             // catch errors
           }
+          tx.setHash(txs[i])
+          array.push(tx)
         }
         if (array.length > 0) this.txs = array
       })

src/views/Blocks.vue

@@ -20,11 +20,11 @@
         <!-- Column: Height -->
         <template #cell(height)="data">
           <router-link :to="`./blocks/${data.item.block.header.height}`">
-            #{{ data.item.block.header.height }}
+            {{ data.item.block.header.height }}
           </router-link>
         </template>
         <template #cell(hash)="data">
-          {{ data.item.block_id.hash }}
+          <small>{{ data.item.block_id.hash }}</small>
         </template>
         <template #cell(time)="data">
           {{ formatTime(data.item.block.header.time) }}
@@ -65,10 +65,14 @@ export default {
       islive: true,
       blocks: [],
       list_fields: [
-        { key: 'height', sortable: true },
+        {
+          key: 'height',
+          sortable: true,
+        },
         {
           key: 'hash',
-          tdClass: 'text-truncate',
+          thClass: 'd-none d-lg-block',
+          tdClass: 'd-none d-lg-block',
         },
         {
           key: 'proposer',
@@ -80,7 +84,11 @@ export default {
           tdClass: 'text-right',
           thClass: 'text-right',
         },
-        { key: 'time' },
+        {
+          key: 'time',
+          thClass: 'd-none d-md-block',
+          tdClass: 'd-none d-md-block',
+        },
       ],
     }
   },
@@ -111,7 +119,7 @@ export default {
   },
   methods: {
     length: v => (Array.isArray(v) ? v.length : 0),
-    formatTime: v => toDay(v),
+    formatTime: v => toDay(v, 'time'),
     fetch() {
       this.$http.getLatestBlock().then(b => {
         const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height)

src/views/Governance.vue

@@ -250,7 +250,4 @@ section {
     border-radius: .357rem;
 }
 
-.gov-wrapper .gov {
-    width: 9.8rem;
-}
 </style>

src/views/Staking.vue

@@ -3,10 +3,8 @@
     <b-card
       no-body
     >
-      <b-card-header>
-        <b-card-title>
-          Validators (Max:{{ stakingParameters.max_validators }})
-          <small class="text-muted">
+      <b-card-header class="d-flex justify-content-between">
+        <small>
           <b-badge variant="danger">
               &nbsp;
           </b-badge>
@@ -16,6 +14,8 @@
           </b-badge>
           Top 67% of Voting Power
         </small>
+        <b-card-title>
+          <span><small> {{ validators.length }}/{{ stakingParameters.max_validators }}</small> Validators</span>
         </b-card-title>
       </b-card-header>
       <b-table
@@ -108,7 +108,7 @@ export default {
     return {
       islive: true,
       mintInflation: 0,
-      stakingPool: {},
+      stakingPool: 1,
       stakingParameters: new StakingParameters(),
       validators: [new Validator()],
       delegations: [new Validator()],
@@ -135,16 +135,15 @@ export default {
     }
   },
   created() {
-    this.$http.getStakingPool().then(res => {
-      this.stakingPool = res
-    })
     this.$http.getStakingParameters().then(res => {
       this.stakingParameters = res
     })
     this.$http.getValidatorList().then(res => {
       const identities = []
       const temp = res
+      let total = 0
       for (let i = 0; i < temp.length; i += 1) {
+        total += temp[i].tokens
         const { identity } = temp[i].description
         const url = this.$store.getters['chains/getAvatarById'](identity)
         if (url) {
@@ -153,6 +152,7 @@ export default {
           identities.push(identity)
         }
       }
+      this.stakingPool = total
       this.validators = temp
 
       // fetch avatar from keybase
@@ -179,7 +179,7 @@ export default {
       } else {
         window.sum += item.tokens
       }
-      const rank = window.sum / this.stakingPool.bondedToken
+      const rank = window.sum / this.stakingPool
       if (rank < 0.333) {
         return 'danger'
       }

src/views/Transaction.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
     <b-card title="Baisc">
-      <b-table-simple>
+      <object-field-component
+        v-if="!tx.std"
+        :tablefield="tx.raw"
+      />
+      <b-table-simple v-else>
         <b-tr>
           <b-td style="width:200px">
             {{ 'txhash' }}