improve votes list

src/libs/fetch.js

@@ -169,11 +169,15 @@ const chainAPI = class ChainFetch {
     })
   }
 
-  async getGovernanceVotes(pid, offset = 0, limit = 50) {
+  async getGovernanceVotes(pid, next = '', limit = 50) {
     if (compareVersions(this.config.sdk_version, '0.40') < 0) {
-      return this.get(`/gov/proposals/${pid}/votes`).then(data => commonProcess(data).map(d => new Votes().init(d)))
+      return this.get(`/gov/proposals/${pid}/votes`).then(data => ({
+        votes: commonProcess(data).map(d => new Votes().init(d)),
+        pagination: {},
+      }))
     }
-    return this.get(`/cosmos/gov/v1beta1/proposals/${pid}/votes?pagination.offset=${offset}&pagination.limit=${limit}`).then(data => data.votes.map(d => new Votes().init(d)))
+    console.log('url:', encodeURIComponent(next))
+    return this.get(`/cosmos/gov/v1beta1/proposals/${pid}/votes?pagination.key=${encodeURIComponent(next)}&pagination.limit=${limit}`)
   }
 
   async getGovernanceList() {

src/views/GovernanceProposalView.vue

@@ -171,11 +171,20 @@
           {{ proposal.tally.abstain }}% voted Abstain
         </b-tooltip>
         <b-table
+          v-if="votes.votes && votes.votes.length > 0"
           stacked="sm"
           :fields="votes_fields"
-          :items="votes"
+          :items="votes.votes"
           striped
         />
+        <b-card
+          v-if="next"
+          class="addzone text-center"
+          @click="loadVotes()"
+        >
+          <feather-icon icon="PlusIcon" />
+          Load More Votes
+        </b-card>
       </b-card-body>
     </b-card>
     <b-card no-body>
@@ -246,6 +255,7 @@ export default {
   },
   data() {
     return {
+      next: null,
       proposal: new Proposal(),
       proposer: new Proposer(),
       deposits: [],
@@ -311,9 +321,20 @@ export default {
     })
     this.$http.getGovernanceVotes(pid).then(res => {
       this.votes = res
+      this.next = res.pagination ? res.pagination.next_key : null
     })
   },
   methods: {
+    loadVotes() {
+      if (this.next) {
+        this.next = null
+        const pid = this.$route.params.proposalid
+        this.$http.getGovernanceVotes(pid, this.next).then(res => {
+          this.$set(this.votes, 'votes', this.votes.votes.concat(res.votes))
+          this.next = res.pagination ? res.pagination.next_key : null
+        })
+      }
+    },
     formatAddress(v) {
       return getStakingValidatorByAccount(this.$http.config.chain_name, v)
     },
@@ -321,6 +342,16 @@ export default {
 }
 </script>
 
-<style>
+<style lang="css">
+.addzone {
+    border: 2px dashed #ced4da;
+    background: #fff;
+    border-radius: 6px;
+    cursor: pointer;
+    box-shadow: none;
+}
+.addzone :hover {
+    border: 2px dashed #7367F0;
+}
 
 </style>