Jordan/2267+2278 validator table bugs

PENDING.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- [\#2267](https://github.com/cosmos/voyager/issues/2267) fixed sorting on validator table @jbibla
+- [\#2278](https://github.com/cosmos/voyager/issues/2278) fixed commission calculation on validator table @jbibla

app/src/renderer/components/staking/LiValidator.vue

@@ -29,7 +29,6 @@
  name: 'validator',
  params: { validator: validator.operator_address }
  }"
- :class="styles"
  class="data-table__row__info__container__name"
  >
  {{ validator.description.moniker }}
@@ -41,35 +40,36 @@
  </td>
  <td class="li-validator__delegated-steak">
  {{
- yourVotes.isLessThan(0.01) && yourVotes.isGreaterThan(0)
- ? num.shortNumber(0.01)
- : num.shortNumber(yourVotes)
+ validator.my_delegations
+ ? num.shortNumber(num.atoms(validator.my_delegations))
+ : `--`
  }}
  </td>
- <td class="li-validator__rewards data-table__row__cell__separator">
- {{ rewards || "--" }}
+ <td class="li-validator__rewards">
+ {{
+ validator.rewards ? num.shortNumber(num.atoms(validator.rewards)) : `--`
+ }}
  </td>
  <td class="li-validator__voting-power">
- {{ validator.percent_of_vote ? validator.percent_of_vote : `--` }}
- </td>
- <td class="li-validator__uptime">
- {{ uptime }}
+ {{
+ validator.percent_of_vote
+ ? num.percent(validator.percent_of_vote)
+ : `--`
+ }}
  </td>
  <td class="li-validator__commission">
- {{ commission }}
+ {{ validator.commission ? num.percent(validator.commission) : `--` }}
  </td>
- <td class="li-validator__slashes">
- --
+ <td class="li-validator__uptime">
+ {{ validator.uptime ? num.percent(validator.uptime) : `--` }}
  </td>
  </tr>
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import num from "scripts/num"
-import { calculateTokens, ratToBigNumber } from "scripts/common"
 import ShortBech32 from "common/ShortBech32"
-import BigNumber from "bignumber.js"
 export default {
  name: `li-validator`,
  components: {
@@ -80,110 +80,38 @@ export default {
  type: Object,
  required: true
  },
- disabled: {
- type: Boolean,
- required: true
- }
  },
  data: () => ({ num }),
  computed: {
  ...mapGetters([
  `delegates`,
- `committedDelegations`,
  `distribution`,
  `bondDenom`,
  `session`,
  `lastHeader`
  ]),
- commission() {
- return `${this.num.pretty(this.validator.commission.rate)}%`
- },
- uptime() {
- const rollingWindow = 10000 // param of slashing period
- const info = this.validator.signing_info
- if (info) {
- // uptime in the past 10k blocks
- const uptimeRollingWindow =
- (rollingWindow - info.missed_blocks_counter) / rollingWindow
- return num.percent(uptimeRollingWindow)
- }
- return `--`
- },
- yourVotes() {
- return this.committedDelegations[this.validator.operator_address]
- ? BigNumber(
- num
- .atoms(
- calculateTokens(
- this.validator,
- this.committedDelegations[this.validator.operator_address]
- )
- )
- .toString()
- )
- : BigNumber(0)
- },
- styles() {
- let value = ``
- if (this.validator.isValidator) value += `li-validator-validator `
- return value
- },
- delegateType() {
- return this.validator.revoked
- ? `Revoked`
- : this.validator.isValidator
- ? `Validator`
- : `Candidate`
- },
- powerRatio() {
- return ratToBigNumber(this.validator.tokens)
- .div(this.delegates.globalPower)
- .toNumber()
- },
  status() {
  // status: jailed
- if (this.validator.revoked)
+ if (this.validator.jailed)
  return `This validator has been jailed and is not currently validating`
 
  // status: inactive
  if (parseFloat(this.validator.voting_power) === 0)
- return `This validator does not have enough voting power yet and is inactive`
+ return `This validator does not have enough voting power and is inactive`
 
  // status: active
  return `This validator is actively validating`
  },
  statusColor() {
  // status: jailed
- if (this.validator.revoked) return `red`
+ if (this.validator.jailed) return `red`
 
  // status: inactive
  if (parseFloat(this.validator.voting_power) === 0) return `yellow`
 
  // status: active
  return `green`
  },
- rewards() {
- if (!this.session.signedIn) return null
- const validatorRewards = this.distribution.rewards[
- this.validator.operator_address
- ]
- return validatorRewards
- ? num.shortNumber(num.atoms(validatorRewards[this.bondDenom]) || 0)
- : null
- }
- },
- watch: {
- lastHeader: {
- immediate: true,
- handler() {
- if (this.yourVotes > 0) {
- this.$store.dispatch(
- `getRewardsFromValidator`,
- this.validator.operator_address
- )
- }
- }
- }
  }
 }
 </script>

app/src/renderer/components/staking/PageValidator.vue

@@ -87,10 +87,7 @@
  {{ percent(validator.commission.rate) }}
  </dd>
  </dl>
- <dl
- v-if="session.experimentalMode"
- class="info_dl colored_dl"
- >
+ <dl v-if="session.experimentalMode" class="info_dl colored_dl">
  <dt>Slashes</dt>
  <dd>--</dd>
  </dl>

app/src/renderer/components/staking/TableValidators.vue

@@ -6,10 +6,9 @@
  </thead>
  <tbody>
  <li-validator
- v-for="i in sortedEnrichedDelegates"
- :key="i.operator_address"
- :disabled="!userCanDelegate"
- :validator="i"
+ v-for="validator in sortedEnrichedValidators"
+ :key="validator.operator_address"
+ :validator="validator"
  />
  </tbody>
  </table>
@@ -21,7 +20,6 @@ import { mapGetters } from "vuex"
 import num from "scripts/num"
 import { orderBy } from "lodash"
 import LiValidator from "staking/LiValidator"
-import { calculateTokens } from "scripts/common"
 import PanelSort from "staking/PanelSort"
 export default {
  name: `table-validators`,
@@ -39,100 +37,101 @@ export default {
  num: num,
  query: ``,
  sort: {
- property: `percent_of_vote`,
- order: `desc`
- }
+ property: `commission`,
+ order: `asc`
+ },
+ rollingWindow: 10000 // param of slashing period
  }),
  computed: {
  ...mapGetters([
- `delegation`,
  `committedDelegations`,
  `session`,
- `liquidAtoms`,
- `connected`,
+ `distribution`,
  `bondDenom`,
- `keybase`
+ `keybase`,
+ `pool`
  ]),
- vpTotal() {
- return this.validators
- .slice(0)
- .map(v => {
- v.voting_power = v.voting_power ? Number(v.voting_power) : 0
- return v
- })
- .sort((a, b) => b.voting_power - a.voting_power)
- .slice(0, 100)
- .reduce((sum, v) => sum + v.voting_power, 0)
- },
- enrichedDelegates() {
- return this.validators.map(v =>
+ enrichedValidators({
+ validators,
+ pool,
+ committedDelegations,
+ keybase,
+ session,
+ distribution,
+ rollingWindow
+ } = this) {
+ return validators.map(v =>
  Object.assign({}, v, {
  small_moniker: v.description.moniker.toLowerCase(),
- percent_of_vote: num.percent(v.voting_power / this.vpTotal),
- your_votes: this.num.full(
- calculateTokens(v, this.committedDelegations[v.id])
- ),
- keybase: this.keybase[v.description.identity]
+ percent_of_vote: v.voting_power / pool.pool.bonded_tokens,
+ my_delegations: session.signedIn
+ && committedDelegations[v.id] > 0
+ ? committedDelegations[v.id]
+ : 0,
+ commission: v.commission.rate,
+ keybase: keybase[v.description.identity],
+ rewards: session.signedIn
+ && distribution.rewards.hasOwnProperty(v.operator_address)
+ ? distribution.rewards[v.operator_address][`uatom`]
+ : 0,
+ uptime: v.signing_info
+ ? (rollingWindow - v.signing_info.missed_blocks_counter)
+ / rollingWindow
+ : 0
  })
  )
  },
- sortedEnrichedDelegates() {
+ sortedEnrichedValidators() {
  return orderBy(
- this.enrichedDelegates.slice(0),
- [this.sort.property, `small_moniker`],
- [this.sort.order, `asc`]
+ this.enrichedValidators.slice(0),
+ [this.sort.property],
+ [this.sort.order]
  )
  },
- userCanDelegate() {
- return this.liquidAtoms > 0 && this.delegation.loaded
- },
  properties() {
  return [
  {
  title: `Moniker`,
  value: `small_moniker`,
- tooltip: `The validator's moniker`,
- class: `name`
+ tooltip: `The validator's moniker`
  },
  {
  title: `My Delegations`,
- value: `your_votes`,
+ value: `my_delegations`,
  tooltip: `Number of ${
  this.bondDenom
- } you have delegated to this validator`,
- class: `your-votes`
+ } you have delegated to this validator`
  },
  {
  title: `Rewards`,
- value: `your_rewards`, // TODO: use real rewards
- tooltip: `Rewards you have earned from this validator`,
- class: `your-rewards`
+ value: `rewards`,
+ tooltip: `Rewards you have earned from this validator`
  },
  {
  title: `Voting Power`,
  value: `percent_of_vote`,
- tooltip: `Percentage of voting shares`,
- class: `percent_of_vote`
- },
- {
- title: `Uptime`,
- value: `uptime`,
- tooltip: `Ratio of blocks signed within the last 10k blocks`,
- class: `uptime`
+ tooltip: `Percentage of voting shares`
  },
  {
  title: `Commission`,
  value: `commission`,
- tooltip: `The validator's commission`,
- class: `commission`
+ tooltip: `The validator's commission`
  },
  {
- title: `Slashes`,
- value: `slashes`, // TODO: use real slashes
- tooltip: `The validator's slashes`,
- class: `slashes`
- }
+ title: `Uptime`,
+ value: `uptime`,
+ tooltip: `Ratio of blocks signed within the last 10k blocks`
+ },
  ]
+ },
+ yourValidators({ committedDelegations, validators, session } = this) {
+ if (!session.signedIn) {
+ return
+ }
+
+ return validators.filter(
+ ({ operator_address }) => operator_address in committedDelegations
+ )
  }
  },
  watch: {
@@ -144,8 +143,12 @@ export default {
  return
  }
 
- this.$store.dispatch(`getRewardsFromAllValidators`, validators)
+ this.$store.dispatch(`getRewardsFromAllValidators`, this.yourValidators)
  }
+ },
+ mounted() {
+ this.$store.dispatch(`getPool`)
+ this.$store.dispatch(`updateDelegates`)
  }
 }
 </script>