Improve Ui/Ux

public/index.html

@@ -24,7 +24,7 @@
     </noscript>
     <div id="loading-bg">
       <div class="loading-logo">
-        <img src="<%= BASE_URL %>logo.svg" alt="Logo" />
+        <img src="<%= BASE_URL %>logo.svg" alt="Logo" width="80"/>
       </div>
       <div class="loading">
         <div class="effect-1 effects"></div>

src/layouts/components/Navbar.vue

@@ -44,7 +44,7 @@
               size="42"
               :src="selected_chain.logo"
               class="badge-minimal"
-              :badge-variant="chainVariant"
+              :badge-variant="variant"
             /></b-link>
         </b-media-aside>
         <b-media-body class="my-auto">
@@ -166,22 +166,31 @@ export default {
   },
   data() {
     return {
-      chainVariant: 'success',
+      variant: 'success',
       tips: 'Synced',
     }
   },
   computed: {
     selected_chain() {
+      this.block()
       return store.state.chains.selected
     },
+    chainVariant() {
+      return this.variant
+    },
   },
-  created() {
+  methods: {
-    this.$http.getLatestBlock().then(block => {
+    block() {
-      if (timeIn(block.block.header.time, 1, 'm')) {
+      store.commit('setHeight', 0)
-        this.chainVariant = 'danger'
+      this.$http.getLatestBlock().then(block => {
-        this.tips = `Halted ${toDay(block.block.header.time, 'from')} `
+        store.commit('setHeight', Number(block.block.header.height))
-      }
+        this.tips = `Synced height:${block.block.header.height}`
-    })
+        if (timeIn(block.block.header.time, 1, 'm')) {
+          this.variant = 'danger'
+          this.tips = `Halted ${toDay(block.block.header.time, 'from')}, Height: ${store.state.chains.height} `
+        }
+      })
+    },
   },
 }
 </script>

src/libs/fetch.js

@@ -112,6 +112,10 @@ const chainAPI = class ChainFetch {
     })
   }
 
+  async getValidatorListByHeight(height) {
+    return this.get(`/validatorsets/${height}`).then(data => commonProcess(data))
+  }
+
   async getStakingValidator(address) {
     return this.get(`/staking/validators/${address}`).then(data => new Validator().init(commonProcess(data)))
   }

src/store/chains/index.js

@@ -46,6 +46,7 @@ export default {
     config: chains,
     selected,
     avatars: {},
+    height: 0,
   },
   getters: {
     getchains: state => state.chains,
@@ -61,7 +62,9 @@ export default {
     cacheAvatar(state, args) {
       state.chains.avatars[args.identity] = args.url
     },
-
+    setHeight(state, height) {
+      state.chains.height = height
+    },
   },
   actions: {},
 }

src/views/ArrayFieldComponent.vue

@@ -4,7 +4,7 @@
     :items="tablefield"
     :sticky-header="true"
     :no-border-collapse="true"
-    responsive
+    responsive="sm"
     class="ml-0 mr-0"
   >
     <template #cell()="data">
@@ -24,13 +24,10 @@
 
 <script>
 import { BTable } from 'bootstrap-vue'
-// import fetch from 'node-fetch'
 
 import {
   getStakingValidatorByHex, isHexAddress, isToken, toDay, tokenFormatter,
 } from '@/libs/data/data'
-// import { Proposal, Proposer } from '@/libs/data'
-// import { formatToken } from '@/libs/data/data'
 
 export default {
   name: 'ArrayFieldComponent',
@@ -62,6 +59,9 @@ export default {
       if (reg.test(value)) {
         return toDay(value)
       }
+      if (value.length > 30) {
+        return value.substring(0, 30).concat('...')
+      }
       return value
     },
     formatTokens(value) {

src/views/Block.vue

@@ -33,7 +33,10 @@
     </b-card>
 
     <b-card title="Last Commit">
-      <object-field-component :tablefield="block.block.last_commit" />
+      <object-field-component
+        :tablefield="block.block.last_commit"
+        :small="true"
+      />
     </b-card>
   </div>
 </template>
@@ -101,7 +104,3 @@ export default {
   },
 }
 </script>
-
-<style>
-
-</style>

src/views/GovernanceProposalView.vue

@@ -372,5 +372,7 @@ export default {
 .addzone :hover {
     border: 2px dashed #7367F0;
 }
-
+@media (min-width: 768px) {
+  td:first-child { width: 20% ;}
+}
 </style>

src/views/ObjectFieldComponent.vue

@@ -131,7 +131,7 @@ export default {
 }
 </script>
 
-<style lang='css'>
+<style lang='css' scoped>
 @media (min-width: 768px) {
   td:first-child { width: 20% ;}
 }

src/views/Staking.vue

@@ -20,7 +20,7 @@
       </b-card-header>
       <b-card-body class="pl-0 pr-0">
         <b-table
-          :items="validators"
+          :items="list"
           :fields="validator_fields"
           :sort-desc="true"
           sort-by="tokens"
@@ -30,15 +30,17 @@
         >
           <!-- A virtual column -->
           <template #cell(index)="data">
-            <b-badge
+            <b-badge :variant="rankBadge(data)">
-              :variant="rankBadge(data)"
-            >
               {{ data.index + 1 }}
             </b-badge>
           </template>
           <!-- Column: Validator -->
           <template #cell(description)="data">
-            <b-media vertical-align="center d-none d-md-block">
+            <b-media
+              vertical-align="center"
+              class="text-truncate"
+              style="max-width:320px;"
+            >
               <template #aside>
                 <b-avatar
                   v-if="data.item.avatar"
@@ -63,7 +65,9 @@
                   {{ data.item.description.moniker }}
                 </router-link>
               </span>
-              <small class="text-muted">{{ data.item.description.website || data.item.description.identity }}</small>
+              <small
+                class="text-muted"
+              >{{ data.item.description.website || data.item.description.identity }}</small>
             </b-media>
           </template>
           <!-- Token -->
@@ -77,6 +81,18 @@
             </div>
             <span v-else>{{ data.item.delegator_shares }}</span>
           </template>
+          <!-- Token -->
+          <template #cell(changes)="data">
+            <small
+              v-if="data.item.changes>0"
+              class="text-success"
+            >+{{ data.item.changes }}</small>
+            <small v-else-if="data.item.changes===0">-</small>
+            <small
+              v-else
+              class="text-danger"
+            >{{ data.item.changes }}</small>
+          </template>
         </b-table>
       </b-card-body>
     </b-card>
@@ -91,6 +107,7 @@ import {
   Validator, percent, StakingParameters, formatToken,
 } from '@/libs/data'
 import { keybase } from '@/libs/fetch'
+// import { toHex } from '@cosmjs/encoding'
 // import fetch from 'node-fetch'
 
 export default {
@@ -115,6 +132,7 @@ export default {
       stakingParameters: new StakingParameters(),
       validators: [new Validator()],
       delegations: [new Validator()],
+      changes: {},
       validator_fields: [
         {
           key: 'index',
@@ -131,20 +149,54 @@ export default {
           thClass: 'text-right',
           sortByFormatted: true,
         },
+        {
+          key: 'changes',
+          label: '24H Changes',
+        },
         {
           key: 'commission',
           formatter: value => `${percent(value.rate)}%`,
           tdClass: 'text-right d-none d-md-block',
           thClass: 'text-right d-none d-md-block',
         },
-        {
-          key: 'operation',
-          label: '',
-        },
       ],
     }
   },
+  computed: {
+    list() {
+      return this.validators.map(x => {
+        const xh = x
+        const change = this.changes[x.consensus_pubkey.value]
+        if (change) {
+          xh.changes = change.latest - change.previous
+        }
+        return xh
+      })
+    },
+  },
   created() {
+    this.$http.getValidatorListByHeight('latest').then(data => {
+      let height = Number(data.block_height)
+      if (height > 14400) {
+        height -= 14400
+      } else {
+        height = 1
+      }
+      const changes = []
+      data.validators.forEach(x => {
+        changes[x.pub_key.value] = { latest: Number(x.voting_power), previous: 0 }
+      })
+      this.$http.getValidatorListByHeight(height).then(previous => {
+        previous.validators.forEach(x => {
+          if (changes[x.pub_key.value]) {
+            changes[x.pub_key.value].previous = Number(x.voting_power)
+          } else {
+            changes[x.pub_key.value] = { latest: 0, previous: Number(x.voting_power) }
+          }
+        })
+        this.$set(this, 'changes', changes)
+      })
+    })
     this.$http.getStakingParameters().then(res => {
       this.stakingParameters = res
     })

src/views/StakingValidator.vue

@@ -140,7 +140,13 @@
                 <span class="font-weight-bold">Status</span>
               </th>
               <td class="pb-50 text-capitalize">
-                {{ validator.status }}
+                <b-badge
+                  v-if="validator.status===3"
+                  variant="light-success"
+                >
+                  Active
+                </b-badge>
+                <span v-else>{{ validator.status }}</span>
               </td>
             </tr>
             <tr>
@@ -281,7 +287,7 @@
 
 <script>
 import {
-  BCard, BButton, BAvatar, BRow, BCol, BCardBody, BCardFooter, VBTooltip, VBModal,
+  BCard, BButton, BAvatar, BRow, BCol, BCardBody, BCardFooter, VBTooltip, VBModal, BBadge,
 } from 'bootstrap-vue'
 
 import {
@@ -304,6 +310,7 @@ export default {
     BAvatar,
     BCardBody,
     BCardFooter,
+    BBadge,
     StakingAddressComponent,
     StakingCommissionComponent,
     StakingRewardComponent,