Merge pull request #2926 from luniehq/colw/graphql-validators

Colw/graphql validators

changes/colw_graphql-validators

@@ -0,0 +1 @@
+[Changed] [#2926](https://github.com/cosmos/lunie/pull/2926) Fetch validator information using graphql @colw

src/components/common/TmPage.vue

@@ -77,7 +77,7 @@ export default {
  default: false
  },
  error: {
- type: Error,
+ type: Boolean,
  default: undefined
  },
  tabs: {

src/components/staking/DelegationsOverview.vue

@@ -1,13 +1,13 @@
 <template>
  <div>
- <div v-if="delegation.loaded && yourValidators.length > 0">
+ <div v-if="!$apollo.queries.validators.loading && validators.length > 0">
  <TableValidators
- :validators="yourValidators"
+ :validators="validators"
  show-on-mobile="expectedReturns"
  />
  </div>
  <TmDataMsg
- v-else-if="yourValidators.length === 0"
+ v-else-if="validators.length === 0"
  icon="sentiment_dissatisfied"
  >
  <div slot="title">
@@ -23,19 +23,37 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex"
+import { mapGetters } from "vuex"
 import TmDataMsg from "common/TmDataMsg"
 import TableValidators from "staking/TableValidators"
+import { SomeValidators, AllValidatorsResult } from "src/gql"
 
 export default {
  name: `delegations-overview`,
  components: {
  TableValidators,
  TmDataMsg
  },
+ data: () => ({
+ validators: []
+ }),
  computed: {
- ...mapState([`delegation`]),
- ...mapGetters([`bondDenom`, `yourValidators`])
+ ...mapGetters([`committedDelegations`]),
+ delegationsAddressList() {
+ return Object.keys(this.committedDelegations)
+ }
+ },
+ apollo: {
+ validators: {
+ query: SomeValidators,
+ variables() {
+ /* istanbul ignore next */
+ return {
+ addressList: this.delegationsAddressList
+ }
+ },
+ update: AllValidatorsResult
+ }
  }
 }
 </script>

src/components/staking/LiValidator.vue

@@ -1,7 +1,7 @@
 <template>
  <tr
  class="li-validator"
- :data-moniker="validator.description.moniker"
+ :data-moniker="validator.moniker"
  @click="
  $router.push({
  name: 'validator',
@@ -10,29 +10,21 @@
  "
  >
  <td class="data-table__row__info">
- <ApolloQuery
- :query="ValidatorProfile"
- :variables="{ address: validator.operator_address }"
- :update="validatorProfileResultUpdate"
- >
- <template v-slot="{ result: { loading, error, data: keybase } }">
- <Avatar
- v-if="!keybase || !keybase.avatarUrl || loading || error"
- class="li-validator-image"
- alt="generic validator logo - generated avatar from address"
- :address="validator.operator_address"
- />
- <img
- v-else-if="keybase && keybase.avatarUrl"
- :src="keybase.avatarUrl"
- class="li-validator-image"
- :alt="`validator logo for ` + validator.description.moniker"
- />
- </template>
- </ApolloQuery>
+ <Avatar
+ v-if="!validator || !validator.avatarUrl"
+ class="li-validator-image"
+ alt="generic validator logo - generated avatar from address"
+ :address="validator.operator_address"
+ />
+ <img
+ v-else-if="validator && validator.avatarUrl"
+ :src="validator.avatarUrl"
+ class="li-validator-image"
+ :alt="`validator logo for ` + validator.moniker"
+ />
  <div class="validator-info">
  <h3 class="li-validator-name">
- {{ validator.description.moniker }}
+ {{ validator.moniker }}
  </h3>
  <div v-if="validator.my_delegations > 0">
  <h4>
@@ -50,17 +42,14 @@
  }}
  </td>
  <td :class="{ 'hide-xs': showOnMobile !== 'voting-power' }">
- {{ validator.tokens ? percentOfVotingPower : `--` }}
+ {{ validator.voting_power | percent }}
  </td>
  </tr>
 </template>
 
 <script>
-import { mapState } from "vuex"
 import { percent, shortDecimals, atoms } from "scripts/num"
 import Avatar from "common/Avatar"
-import BN from "bignumber.js"
-import { ValidatorProfile, validatorProfileResultUpdate } from "src/gql"
 
 export default {
  name: `li-validator`,
@@ -69,7 +58,8 @@ export default {
  },
  filters: {
  atoms,
- shortDecimals
+ shortDecimals,
+ percent
  },
  props: {
  validator: {
@@ -78,27 +68,12 @@ export default {
  },
  showOnMobile: {
  type: String,
+ /* istanbul ignore next */
  default: () => "returns"
  }
  },
- data: () => ({
- ValidatorProfile
- }),
- computed: {
- ...mapState([`pool`]),
- percentOfVotingPower() {
- return percent(
- BN(this.validator.tokens)
- .div(this.pool.pool.bonded_tokens)
- .toFixed(4)
- )
- }
- },
  methods: {
- shortDecimals,
- atoms,
- percent,
- validatorProfileResultUpdate
+ percent
  }
 }
 </script>