fix

src/libs/fetch.js

@@ -156,6 +156,14 @@ export default class ChainFetch {
     })
   }
 
+  async getValidatorListByStatus(status) {
+    return this.get(`/cosmos/staking/v1beta1/validators?status=${status}`).then(data => {
+      const result = commonProcess(data)
+      const vals = result.validators ? result.validators : result
+      return vals.map(i => new Validator().init(i))
+    })
+  }
+
   async getValidatorListByHeight(height) {
     return this.get(`/validatorsets/${height}`).then(data => commonProcess(data))
   }

src/views/Staking.vue

@@ -93,17 +93,18 @@
       no-body
     >
       <b-card-header class="d-flex justify-content-between">
-        <small class="d-none d-md-block">
+        <b-form-group>
-          <b-badge variant="danger">
+          <b-form-radio-group
-              &nbsp;
+            id="btn-radios-1"
-          </b-badge>
+            v-model="selectedStatus"
-          Top 33%
+            button-variant="outline-primary"
-          <b-badge variant="warning">
+            :options="statusOptions"
-              &nbsp;
+            buttons
-          </b-badge>
+            name="radios-btn-default"
-          Top 67% of Voting Power
+            @change="getValidatorListByStatus"
-        </small>
+          />
-        <b-card-title>
+        </b-form-group>
+        <b-card-title class="d-none d-sm-block">
           <span>Validators {{ validators.length }}/{{ stakingParameters.max_validators }} </span>
         </b-card-title>
       </b-card-header>
@@ -195,6 +196,18 @@
           </template>
         </b-table>
       </b-card-body>
+      <template #footer>
+        <small class="d-none d-md-block">
+          <b-badge variant="danger">
+              &nbsp;
+          </b-badge>
+          Top 33%
+          <b-badge variant="warning">
+              &nbsp;
+          </b-badge>
+          Top 67% of Voting Power
+        </small>
+      </template>
     </b-card>
     <operation-delegate-component :validator-address="validator_address" />
   </div>
@@ -202,10 +215,10 @@
 
 <script>
 import {
-  BTable, BMedia, BAvatar, BBadge, BCard, BCardHeader, BCardTitle, VBTooltip, BCardBody, BButton,
+  BTable, BMedia, BAvatar, BBadge, BCard, BCardHeader, BCardTitle, VBTooltip, BCardBody, BButton, BFormRadioGroup, BFormGroup,
 } from 'bootstrap-vue'
 import {
-  Validator, percent, StakingParameters, formatToken,
+  percent, StakingParameters, formatToken,
 } from '@/libs/utils'
 import { keybase } from '@/libs/fetch'
 // import { toHex } from '@cosmjs/encoding'
@@ -224,6 +237,8 @@ export default {
     BCardBody,
     BButton,
     OperationDelegateComponent,
+    BFormRadioGroup,
+    BFormGroup,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -252,8 +267,8 @@ export default {
       mintInflation: 0,
       stakingPool: 1,
       stakingParameters: new StakingParameters(),
-      validators: [new Validator()],
+      validators: [],
-      delegations: [new Validator()],
+      delegations: [],
       changes: {},
       validator_fields: [
         {
@@ -288,6 +303,11 @@ export default {
           thClass: 'text-right',
         },
       ],
+      statusOptions: [
+        { text: 'Active', value: ['BOND_STATUS_BONDED'] },
+        { text: 'Inactive', value: ['BOND_STATUS_UNBONDED', 'BOND_STATUS_UNBONDING'] },
+      ],
+      selectedStatus: ['BOND_STATUS_BONDED'],
     }
   },
   computed: {
@@ -331,7 +351,16 @@ export default {
     this.$http.getStakingParameters().then(res => {
       this.stakingParameters = res
     })
-    this.$http.getValidatorList().then(res => {
+    this.getValidatorListByStatus(this.selectedStatus)
+  },
+  beforeDestroy() {
+    this.islive = false
+  },
+  methods: {
+    getValidatorListByStatus(statusList) {
+      this.validators = []
+      statusList.forEach(status => {
+        this.$http.getValidatorListByStatus(status).then(res => {
           const identities = []
           const temp = res
           let total = 0
@@ -346,7 +375,7 @@ export default {
             }
           }
           this.stakingPool = total
-      this.validators = temp
+          this.validators.push(...temp)
 
           // fetch avatar from keybase
           let promise = Promise.resolve()
@@ -356,11 +385,8 @@ export default {
             }))
           })
         })
+      })
     },
-  beforeDestroy() {
-    this.islive = false
-  },
-  methods: {
     selectValidator(da) {
       this.validator_address = da
     },