add export valdiator list to excel

package.json

@@ -25,14 +25,14 @@
     "@hanchon/signature-to-pubkey": "^1.0.0",
     "@intlify/vue-i18n-loader": "^2.1.2",
     "@ledgerhq/hw-app-eth": "^6.28.2",
+    "@ledgerhq/hw-transport": "6.27.2",
     "@ledgerhq/hw-transport-web-ble": "^6.27.1",
     "@ledgerhq/hw-transport-webusb": "^6.27.1",
-    "@ledgerhq/hw-transport": "6.27.2",
     "@metamask/eth-sig-util": "^4.0.1",
     "@tharsis/address-converter": "^0.1.8",
-    "@tharsis/transactions": "^0.2.5",
     "@tharsis/eip712": "0.2.4",
     "@tharsis/proto": "0.1.19",
+    "@tharsis/transactions": "^0.2.5",
     "@vue/composition-api": "^1.4.9",
     "@vueuse/core": "4.0.0",
     "animate.css": "4.1.1",
@@ -77,6 +77,7 @@
     "vue-flex-waterfall": "^1.0.7",
     "vue-form-wizard": "0.8.4",
     "vue-i18n": "8.22.2",
+    "vue-json-excel": "^0.3.0",
     "vue-loader": "^15.9.6",
     "vue-markdown": "^2.2.4",
     "vue-observe-visibility": "^1.0.0",

src/views/ConsensusStates.vue

@@ -82,15 +82,15 @@
       >
         Round: {{ item.round }} {{ item.prevotes_bit_array }}
         <b-card-body class="px-0">
-          <b-button
+          <b-badge
             v-for="(pre, i) in item.prevotes"
             :key="i"
             size="sm"
             style="margin: 2px;"
             :variant="color(i, pre)"
           >
-            <small>{{ showName(i, pre) }}</small>
+            <small class="small">{{ showName(i, pre) }}</small>
-          </b-button>
+          </b-badge>
         </b-card-body>
       </div>
       <b-card-footer>
@@ -99,7 +99,7 @@
           size="sm"
         />  Proposer Signed
         <b-button
-          variant="outline-primary"
+          variant="dark"
           size="sm"
         />  Proposer Not Signed
         <b-button
@@ -107,7 +107,7 @@
           size="sm"
         /> Signed
         <b-button
-          variant="outline-secondary"
+          variant="secondary"
           size="sm"
         /> Not Signed
       </b-card-footer>
@@ -122,6 +122,7 @@
       </h4>
       <div class="alert-body">
         <ul>
+          <li>This tool is useful for validators to monitor who is onboard during an upgrade</li>
           <li>If you want to change the default rpc endpoint. make sure that "https" and "CORS" are enabled on your server.</li>
         </ul>
       </div>
@@ -131,7 +132,7 @@
 
 <script>
 import {
-  BAvatar, BCardFooter, BRow, BCol, BCardTitle, BAlert,
+  BAvatar, BCardFooter, BRow, BCol, BCardTitle, BAlert, BBadge,
   BCard, BCardBody, BInputGroup, BFormInput, BInputGroupAppend, BButton,
 } from 'bootstrap-vue'
 import fetch from 'node-fetch'
@@ -144,6 +145,7 @@ import DashboardCardHorizontal from './components/dashboard/DashboardCardHorizon
 export default {
   components: {
     BAlert,
+    BBadge,
     BRow,
     BCol,
     BCard,
@@ -196,9 +198,9 @@ export default {
     format: v => toDay(v, 'time'),
     color(i, txt) {
       if (i === this.roundState.proposer.index) {
-        return txt === 'nil-Vote' ? 'outline-primary' : 'primary'
+        return txt === 'nil-Vote' ? 'dark' : 'primary'
       }
-      return txt === 'nil-Vote' ? 'outline-secondary' : 'success'
+      return txt === 'nil-Vote' ? 'secondary' : 'success'
     },
     fetchPosition() {
       const dumpurl = this.rpc.replace('consensus_state', 'dump_consensus_state')
@@ -232,7 +234,7 @@ export default {
           this.roundState.height_vote_set.forEach(element => {
             const rate = Number(element.prevotes_bit_array.substring(element.prevotes_bit_array.length - 4))
             if (rate > 0) {
-              this.rate = `${rate * 100}%`
+              this.rate = `${(rate * 100).toFixed()}%`
             }
           })
         }).catch(err => {

src/views/Staking.vue

@@ -199,7 +199,7 @@
           </template>
         </b-table>
       </b-card-body>
-      <b-card-footer class="d-none d-md-block">
+      <b-card-footer class="d-none d-md-block d-md-flex justify-content-between">
         <small>
           <b-badge variant="danger">
               &nbsp;
@@ -210,6 +210,19 @@
           </b-badge>
           Top 67% of Voting Power
         </small>
+        <download-excel
+          :fields="excelCols"
+          :data="list"
+          type="csv"
+          name="validators.xls"
+        >
+          <b-button
+            variant="primary"
+            size="sm"
+          >
+            Export to Excel
+          </b-button>
+        </download-excel>
       </b-card-footer>
     </b-card>
     <operation-modal
@@ -230,8 +243,7 @@ import {
 } from '@/libs/utils'
 import { keybase } from '@/libs/fetch'
 import OperationModal from '@/views/components/OperationModal/index.vue'
-// import { toHex } from '@cosmjs/encoding'
+import DownloadExcel from 'vue-json-excel'
-// import fetch from 'node-fetch'
 
 export default {
   components: {
@@ -248,6 +260,7 @@ export default {
     BFormGroup,
     BCardFooter,
     OperationModal,
+    DownloadExcel,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -264,6 +277,25 @@ export default {
       changes: {},
       latestPower: {},
       previousPower: {},
+      excelCols: {
+        Validator: 'description.moniker',
+        Identity: 'description.identity',
+        Website: 'description.website',
+        'Operator Address': 'operator_address',
+        Status: 'status',
+        'Bonded Tokens': 'tokens',
+        'Formated Bonded Tokens': {
+          field: 'tokens',
+          callback: value => this.tokenFormatter(value, this.stakingParameters.bond_denom),
+        },
+        Percent: {
+          field: 'tokens',
+          callback: value => this.percent(value / this.stakingPool),
+        },
+        '24h Changes': 'changes',
+        'Unbonding Height': 'unbonding_height',
+        'Unbonding Time': 'unbonding_time',
+      },
       validator_fields: [
         {
           key: 'index',

yarn.lock

@@ -4966,6 +4966,11 @@ dotenv@^10.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
   integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
+downloadjs@^1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/downloadjs/-/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
+  integrity sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==
+
 drbg.js@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/drbg.js/-/drbg.js-1.0.1.tgz#3e36b6c42b37043823cdbc332d58f31e2445480b"
@@ -9903,6 +9908,13 @@ vue-i18n@8.22.2:
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.22.2.tgz#58299a5a050e67b4f799d96fee7dd8bd269e0907"
   integrity sha512-rb569fVJInPUgS/bbCxEQ9DrAoFTntuJvYoK4Fpk2VfNbA09WzdTKk57ppjz3S+ps9hW+p9H+2ASgMvojedkow==
 
+vue-json-excel@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vue-json-excel/-/vue-json-excel-0.3.0.tgz#72cbe4a004720259edc65555a3f072198cf79146"
+  integrity sha512-FrSh0tVUpw4K+ilLO8g0Qp52eFJw/hkk3rZPTEKo9qVkJgVfQtZwzj3UWc5ACYxA3jLk9HtjK+f9xKHCN4Kgag==
+  dependencies:
+    downloadjs "^1.4.7"
+
 vue-loader@^17.0.0:
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.0.0.tgz#2eaa80aab125b19f00faa794b5bd867b17f85acb"