add upgrade count down

package.json

@@ -80,6 +80,7 @@
     "vue-toastification": "1.7.8",
     "vue-tour": "1.5.0",
     "vue-tree-halower": "1.8.3",
+    "vue2-flip-countdown": "^0.12.1",
     "vue2-leaflet": "2.5.2",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"

src/lang/locales/en.json

@@ -53,6 +53,7 @@
   "proposal_content": "Content",
   "proposal_total_deposit": "Total Deposit",
   "voting_time": "Voting Time",
+  "upgrade_time": "Estimated Upgrade Time:",
 
   "btn_vote": "Vote",
   "btn_deposit": "Deposit",

src/views/GovernanceProposalView.vue

@@ -77,6 +77,11 @@
                 {{ $t('voting_time') }}
               </b-td><b-td>{{ proposal.voting_start_time }} - {{ proposal.voting_end_time }}</b-td>
             </b-tr>
+            <b-tr v-if="proposal.type === 'cosmos-sdk/SoftwareUpgradeProposal'">
+              <b-td>
+                {{ $t('upgrade_time') }}
+              </b-td><b-td><flip-countdown :deadline="upgradeTime" /></b-td>
+            </b-tr>
             <b-tr>
               <b-td>
                 {{ $t('proposal_type') }}
@@ -257,10 +262,12 @@ import {
   BCard, BCardBody, BCardFooter, BButton, BTable, BTableSimple, BTr, BTd, BCardTitle, BCardHeader,
   BProgressBar, BProgress, BTooltip, BBadge,
 } from 'bootstrap-vue'
+import FlipCountdown from 'vue2-flip-countdown'
 // import fetch from 'node-fetch'
 
 import { getCachedValidators, getStakingValidatorByAccount, tokenFormatter } from '@/libs/data/data'
 import { Proposal, Proposer } from '@/libs/data'
+import dayjs from 'dayjs'
 import ObjectFieldComponent from './ObjectFieldComponent.vue'
 import OperationVoteComponent from './OperationVoteComponent.vue'
 import OperationGovDepositComponent from './OperationGovDepositComponent.vue'
@@ -285,9 +292,11 @@ export default {
     ObjectFieldComponent,
     OperationVoteComponent,
     OperationGovDepositComponent,
+    FlipCountdown,
   },
   data() {
     return {
+      latest: {},
       next: null,
       proposal: new Proposal(),
       proposer: new Proposer(),
@@ -335,10 +344,28 @@ export default {
       ],
     }
   },
-
+  computed: {
+    upgradeTime() {
+      if (this.proposal.type === 'cosmos-sdk/SoftwareUpgradeProposal') {
+        if (Number(this.proposal?.contents.plan.height || 0) > 0 && this.latest) {
+          const blocks = Number(this.proposal.contents.plan.height) - Number(this.latest.block?.header?.height || 0)
+          if (blocks > 0) {
+            const endtime = dayjs().add(blocks * 6, 'second').format('YYYY-MM-DD HH:mm:ss')
+            return endtime
+          }
+        }
+        return dayjs(this.proposal.contents.plan.time).format('YYYY-MM-DD HH:mm:ss')
+      }
+      return '0001-01-01 00:00:00'
+    },
+  },
   created() {
     const pid = this.$route.params.proposalid
 
+    this.$http.getLatestBlock().then(res => {
+      this.latest = res
+    })
+
     this.$http.getGovernance(pid).then(p => {
       if (p.status === 2) {
         this.$http.getGovernanceTally(pid, 0).then(t => p.updateTally(t))

yarn.lock

@@ -11896,6 +11896,13 @@ vue-tree-halower@1.8.3:
   dependencies:
     vue "^2.4.4"
 
+vue2-flip-countdown@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/vue2-flip-countdown/-/vue2-flip-countdown-0.12.1.tgz#67d115634df1fbcf789be07e2674b1a6aefb4e7f"
+  integrity sha512-kS3A86VMUjsG2FGnqv/AO4UTLKAAwutqh1dOTPfjSRiUfsgLO+9gmhLSeo+qSBoQYpCxccq44G/IsoRef8kywQ==
+  dependencies:
+    uuid "^3.3.2"
+
 vue2-leaflet@2.5.2:
   version "2.5.2"
   resolved "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.5.2.tgz"