From 19d05319cb376cff11fab087705af0c5cf04cf73 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 00:40:12 +0800
Subject: [PATCH] feat: governance item progress

---
 src/components/ProposalProcess.vue        | 32 +++++++++++++++++++++++
 src/modules/[chain]/gov/[proposal_id].vue |  2 --
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/ProposalProcess.vue b/src/components/ProposalProcess.vue
index 87e71cd9..babcadfa 100644
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@@ -30,6 +30,38 @@ const veto = computed(() =>
 </script>
 
 <template>
+  <div class="grid grid-cols-4 gap-4 mb-3 text-sm">
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-yes absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>YES</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ yes }}</div>
+    </div>
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-no absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>NO</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ no }}</div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-warning absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-50"
+      ></div>
+      <div>No With Veto</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ veto }}</div>
+    </div>
+
+    <div class="flex items-center justify-between rounded-sm px-2 relative">
+      <div
+        class="bg-gray-500 absolute top-0 bottom-0 left-0 right-0 rounded-sm opacity-20 dark:opacity-40"
+      ></div>
+      <div>Abstain</div>
+      <div class="text-gray-800 dark:text-gray-50">{{ abstain }}</div>
+    </div>
+  </div>
   <div class="progress rounded-full h-1 text-xs flex items-center">
     <div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
     <div class="h-1 bg-no" :style="`width: ${no}`"></div>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index 6a3d078b..d28cff8e 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -10,9 +10,7 @@ import {
 import type {
   GovProposal,
   GovVote,
-  PaginabledAccounts,
   PaginatedProposalDeposit,
-  PaginatedProposalVotes,
   Pagination,
 } from '@/types';
 import { ref, reactive } from 'vue';