Make address human readable

src/views/ArrayFieldComponent.vue

@@ -8,6 +8,7 @@
   >
     <template #cell()="data">
       <span v-if="isTokenField(data.value)">{{ formatTokens(data.value) }}</span>
+      <span v-else-if="isHex(data.value)">{{ formatHexAddress(data.value) }}</span>
       <array-field-component
         v-else-if="isArrayText(data.value)"
         :tablefield="eval_value(data.value)"
@@ -25,7 +26,7 @@ import { BTable } from 'bootstrap-vue'
 // import fetch from 'node-fetch'
 
 import {
-  abbr, isToken, toDay, tokenFormatter,
+  abbr, getStakingValidatorByHex, isHexAddress, isToken, toDay, tokenFormatter,
 } from '@/libs/data/data'
 // import { Proposal, Proposer } from '@/libs/data'
 // import { formatToken } from '@/libs/data/data'
@@ -65,6 +66,12 @@ export default {
     formatTokens(value) {
       return tokenFormatter(value)
     },
+    isHex(value) {
+      return isHexAddress(value)
+    },
+    formatHexAddress(v) {
+      return getStakingValidatorByHex(this.$http.config.chain_name, v)
+    },
   },
 }
 </script>

src/views/Blocks.vue

@@ -30,7 +30,7 @@
           {{ formatTime(data.item.block.header.time) }}
         </template>
         <template #cell(proposer)="data">
-          {{ data.item.block.header.proposer_address }}
+          {{ formatProposer(data.item.block.header.proposer_address) }}
         </template>
         <template #cell(txs)="data">
           {{ length(data.item.block.data.txs) }}
@@ -46,6 +46,8 @@ import {
   BTable, BCard, BCardHeader, BCardTitle, VBTooltip,
 } from 'bootstrap-vue'
 import {
+  getCachedValidators,
+  getStakingValidatorByHex,
   toDay,
 } from '@/libs/data'
 // import fetch from 'node-fetch'
@@ -101,6 +103,10 @@ export default {
         list.push(height - i)
       }
 
+      if (!getCachedValidators()) {
+        this.$http.getValidatorList()
+      }
+
       let promise = Promise.resolve()
       list.forEach(item => {
         promise = promise.then(() => new Promise(resolve => {
@@ -120,6 +126,9 @@ export default {
   methods: {
     length: v => (Array.isArray(v) ? v.length : 0),
     formatTime: v => toDay(v, 'time'),
+    formatProposer(v) {
+      return getStakingValidatorByHex(this.$http.config.chain_name, v)
+    },
     fetch() {
       this.$http.getLatestBlock().then(b => {
         const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height)

src/views/GovernanceProposalView.vue

@@ -48,7 +48,7 @@
           <b-tr>
             <b-td>
               {{ $t('proposal_proposer') }}
-            </b-td><b-td>{{ proposer.proposer }} </b-td>
+            </b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td>
           </b-tr>
           <b-tr>
             <b-td>
@@ -202,7 +202,7 @@ import {
 } from 'bootstrap-vue'
 // import fetch from 'node-fetch'
 
-import { tokenFormatter } from '@/libs/data/data'
+import { getCachedValidators, getStakingValidatorByAccount, tokenFormatter } from '@/libs/data/data'
 import { Proposal, Proposer } from '@/libs/data'
 import ObjectFieldComponent from './ObjectFieldComponent.vue'
 // import { formatToken } from '@/libs/data/data'
@@ -232,7 +232,11 @@ export default {
       deposits: [],
       votes: [],
       votes_fields: [
-        { key: 'voter', sortable: true },
+        {
+          key: 'voter',
+          sortable: true,
+          formatter: v => this.formatAddress(v),
+        },
         {
           key: 'option',
           sortable: true,
@@ -253,7 +257,10 @@ export default {
         },
       ],
       deposit_fields: [
-        'depositor',
+        {
+          key: 'depositor',
+          formatter: v => this.formatAddress(v),
+        },
         {
           key: 'amount',
           sortable: true,
@@ -273,6 +280,10 @@ export default {
       this.proposal = p
     })
 
+    if (!getCachedValidators()) {
+      this.$http.getValidatorList()
+    }
+
     this.$http.getGovernanceProposer(pid).then(res => {
       this.proposer = res
     })
@@ -283,46 +294,11 @@ export default {
       this.votes = res
     })
   },
-
-  // asyncComputed: {
-  //   proposal: {
-  //     get() {
-  //       const pid = this.$route.params.proposalid
-  //       // const api = new ChainAPI(this.$route)
-  //       return this.$http.getGovernance(pid).then(p => {
-  //         if (p.status === 2) {
-  //           this.$http.getGovernanceTally(pid, 0).then(t => p.updateTally(t)).catch(e => console.log('failed on update voting tally:', e))
-  //         }
-  //         return p
-  //       })
-  //     },
-  //     default: new Proposal(),
-  //   },
-  //   proposer: {
-  //     get() {
-  //       const pid = this.$route.params.proposalid
-  //       // const api = new ChainAPI(this.$route)
-  //       return this.$http.getGovernanceProposer(pid)
-  //     },
-  //     default: new Proposer(),
-  //   },
-  //   deposits: {
-  //     get() {
-  //       const pid = this.$route.params.proposalid
-  //       // const api = new ChainAPI(this.$route)
-  //       return this.$http.getGovernanceDeposits(pid)
-  //     },
-  //     default: [],
-  //   },
-  //   votes: {
-  //     get() {
-  //       const pid = this.$route.params.proposalid
-  //       // const api = new ChainAPI(this.$route)
-  //       return this.$http.getGovernanceVotes(pid)
-  //     },
-  //     default: [],
-  //   },
-  // },
+  methods: {
+    formatAddress(v) {
+      return getStakingValidatorByAccount(this.$http.config.chain_name, v)
+    },
+  },
 }
 </script>
 

src/views/ObjectFieldComponent.vue

@@ -21,6 +21,9 @@
       <b-td v-else-if="isArrayText(value)">
         {{ value.join(', ') }}
       </b-td>
+      <b-td v-else-if="isHex(value)">
+        {{ formatHexAddress(value) }}
+      </b-td>
       <b-td v-else-if="Array.isArray(value)">
         <array-field-component :tablefield="value" />
       </b-td>
@@ -60,7 +63,7 @@ import {
   BTableSimple, BTr, BTd, BTabs, BTab,
 } from 'bootstrap-vue'
 import {
-  abbr, isStringArray, isToken, tokenFormatter,
+  abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, tokenFormatter,
 } from '@/libs/data'
 import ArrayFieldComponent from './ArrayFieldComponent.vue'
 
@@ -100,6 +103,12 @@ export default {
     isTokenField(value) {
       return isToken(value)
     },
+    isHex(value) {
+      return isHexAddress(value)
+    },
+    formatHexAddress(v) {
+      return getStakingValidatorByHex(this.$http.config.chain_name, v)
+    },
     isArrayText(value) {
       return isStringArray(value)
     },