Show signer address (valcons) in validator details

Also replace deprecated Bech32.encode/Bech32.decode methods, refs:
https://github.com/cosmos/cosmjs/pull/1058

src/libs/utils.js

@@ -1,5 +1,5 @@
 import {
-  Bech32, fromBase64, fromBech32, fromHex, toBase64, toBech32, toHex,
+  fromBase64, fromBech32, fromHex, toBase64, toBech32, toHex,
 } from '@cosmjs/encoding'
 import { sha256, stringToPath } from '@cosmjs/crypto'
 // ledger
@@ -82,20 +82,26 @@ export async function connectLedger(transport = 'usb') {
   return new CosmosApp(trans)
 }
 
-export function operatorAddressToAccount(operAddress) {
-  const { prefix, data } = Bech32.decode(operAddress)
-  if (prefix === 'iva') { // handle special cases
-    return Bech32.encode('iaa', data)
-  }
-  if (prefix === 'crocncl') { // handle special cases
-    return Bech32.encode('cro', data)
-  }
-  return Bech32.encode(prefix.replace('valoper', ''), data)
+export function valoperToPrefix(valoper) {
+  const prefixIndex = valoper.indexOf('valoper')
+  if (prefixIndex === -1) return null
+  return valoper.slice(0, prefixIndex)
 }
 
-// TODO, not tested
-export function pubkeyToAccountAddress(pubkey, prefix) {
-  return Bech32.encode(prefix, pubkey, 40)
+export function operatorAddressToAccount(operAddress) {
+  const { prefix, data } = fromBech32(operAddress)
+  if (prefix === 'iva') { // handle special cases
+    return toBech32('iaa', data)
+  }
+  if (prefix === 'crocncl') { // handle special cases
+    return toBech32('cro', data)
+  }
+  return toBech32(prefix.replace('valoper', ''), data)
+}
+
+export function pubKeyToValcons(pubkey, prefix) {
+  const addressData = sha256(fromBase64(pubkey.key)).slice(0, 20)
+  return toBech32(`${prefix}valcons`, addressData)
 }
 
 export function toETHAddress(cosmosAddress) {

src/views/StakingValidator.vue

@@ -224,6 +224,7 @@
           :operator-address="validator.operator_address"
           :consensus-pubkey="validator.consensus_pubkey"
           :account-address="accountAddress"
+          :valcons-address="valconsAddress"
         />
       </b-col>
     </b-row>
@@ -273,7 +274,7 @@ import {
 } from 'bootstrap-vue'
 
 import {
-  percent, formatToken, StakingParameters, Validator, operatorAddressToAccount, consensusPubkeyToHexAddress, toDay, abbrMessage, abbrAddress,
+  percent, formatToken, StakingParameters, Validator, operatorAddressToAccount, consensusPubkeyToHexAddress, toDay, abbrMessage, abbrAddress, valoperToPrefix, pubKeyToValcons,
 } from '@/libs/utils'
 import { keybase } from '@/libs/fetch'
 import OperationModal from '@/views/components/OperationModal/index.vue'
@@ -314,6 +315,7 @@ export default {
       latestHeight: 0,
       accountAddress: '-',
       hexAddress: '-',
+      valconsAddress: '-',
       stakingPool: {},
       mintInflation: 0,
       stakingParameter: new StakingParameters(),
@@ -384,8 +386,10 @@ export default {
       return percent(value)
     },
     processAddress(operAddress, consensusPubkey) {
+      const prefix = valoperToPrefix(operAddress)
       this.accountAddress = operatorAddressToAccount(operAddress)
       this.hexAddress = consensusPubkeyToHexAddress(consensusPubkey)
+      this.valconsAddress = pubKeyToValcons(consensusPubkey, prefix)
       this.$http.getStakingDelegatorDelegation(this.accountAddress, operAddress).then(d => {
         this.selfDelegation = d
       })

src/views/components/staking/StakingAddressComponent.vue

@@ -98,6 +98,29 @@
         <small @click="copy(hexAddress)">{{ hexAddress }}</small>
       </b-media-body>
     </b-media>
+    <b-media
+      class="mb-1"
+      no-body
+    >
+      <b-media-aside class="mr-1">
+        <b-avatar
+          rounded
+          variant="light-primary"
+          size="34"
+        >
+          <feather-icon
+            icon="HashIcon"
+            size="18"
+          />
+        </b-avatar>
+      </b-media-aside>
+      <b-media-body class="text-truncate">
+        <h6 class="mb-0">
+          Signer Address
+        </h6>
+        <small @click="copy(valconsAddress)">{{ valconsAddress }}</small>
+      </b-media-body>
+    </b-media>
   </b-card>
 </template>
 
@@ -138,6 +161,10 @@ export default {
       type: String,
       default: '-',
     },
+    valconsAddress: {
+      type: String,
+      default: '-',
+    },
   },
   methods: {
     copy(v) {