From 38bbe7be5f8829d63c3862ca112258dd459a32c9 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Tue, 14 Dec 2021 20:23:10 +0800
Subject: [PATCH] improve UX for proposal details

---
 src/views/GovernanceProposalView.vue | 15 +++++++++------
 src/views/ObjectFieldComponent.vue   | 12 +++++++++++-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue
index 47aed3ec..0242b5b4 100644
--- a/src/views/GovernanceProposalView.vue
+++ b/src/views/GovernanceProposalView.vue
@@ -77,11 +77,6 @@
                 {{ $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') }}
@@ -96,6 +91,14 @@
             :tablefield="proposal.contents"
             :small="false"
           /></div>
+        <b-table-simple v-if="proposal.type === 'cosmos-sdk/SoftwareUpgradeProposal'">
+          <b-tr>
+            <b-td class="text-center">
+              {{ $t('upgrade_time') }} {{ upgradeTime }}
+              <flip-countdown :deadline="upgradeTime" />
+            </b-td>
+          </b-tr>
+        </b-table-simple>
       </b-card-body>
       <b-card-footer>
         <router-link :to="`../gov`">
@@ -347,7 +350,7 @@ export default {
   computed: {
     upgradeTime() {
       if (this.proposal.type === 'cosmos-sdk/SoftwareUpgradeProposal') {
-        if (Number(this.proposal?.contents.plan.height || 0) > 0 && this.latest) {
+        if (Number(this.proposal?.contents.plan.height || 0) > 0 && this.latest?.block) {
           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')
diff --git a/src/views/ObjectFieldComponent.vue b/src/views/ObjectFieldComponent.vue
index add9a6ee..aa9e6952 100644
--- a/src/views/ObjectFieldComponent.vue
+++ b/src/views/ObjectFieldComponent.vue
@@ -51,7 +51,11 @@
                 v-else-if="typeof value[key] === 'object'"
                 :tablefield="value[key]"
               />
-              <span v-else>{{ formatText(value[key]) }}</span>
+              <object-field-component
+                v-else-if="isObjectText(value[key])"
+                :tablefield="toObject(value[key])"
+              />
+              <span v-else>{{ value[key] }}</span>
             </b-tab>
           </b-tabs>
         </b-td>
@@ -102,6 +106,12 @@ export default {
       // }
       return value
     },
+    isObjectText(v) {
+      return String(v).startsWith('{') && String(v).endsWith('}')
+    },
+    toObject(v) {
+      return JSON.parse(v)
+    },
     formatText: v => abbr(v, 60),
     eval_value(value) {
       return Array.from(value)