From 1c038b465f4d8b0bfbc306f978f18b77eaab729b Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 12 May 2023 17:31:28 +0800
Subject: [PATCH] feat: validator commission

---
 src/components/TxDialog.vue                | 18 +++++++++---------
 src/components/UptimeBar.vue               |  7 ++++++-
 src/components/ValidatorCommissionRate.vue | 20 ++++++++++----------
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/components/TxDialog.vue b/src/components/TxDialog.vue
index e563afef..d49656e4 100644
--- a/src/components/TxDialog.vue
+++ b/src/components/TxDialog.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { useTxDialog } from '@/stores'
-const store = useTxDialog()
+import { useTxDialog } from '@/stores';
+const store = useTxDialog();
 </script>
 <template>
-    <ping-tx-dialog
-      :type="store.type"
-      :sender="store.sender"
-      :endpoint="store.endpoint"
-      :params="store.params"
-    ></ping-tx-dialog>
-</template>
\ No newline at end of file
+  <ping-tx-dialog
+    :type="store.type"
+    :sender="store.sender"
+    :endpoint="store.endpoint"
+    :params="store.params"
+  ></ping-tx-dialog>
+</template>
diff --git a/src/components/UptimeBar.vue b/src/components/UptimeBar.vue
index 98f520d2..878b5630 100644
--- a/src/components/UptimeBar.vue
+++ b/src/components/UptimeBar.vue
@@ -24,7 +24,12 @@ const bars = computed(() => {
 </script>
 <template>
   <div class="flex items-center justify-evenly">
-    <span v-for="(b, i) in bars" :key="i" :class="b.color" class="rounded" style="width: 1.5%"
+    <span
+      v-for="(b, i) in bars"
+      :key="i"
+      :class="b.color"
+      class="rounded"
+      style="width: 1.5%"
       >&nbsp;
       <v-tooltip
         v-if="Number(b.height) > 0"
diff --git a/src/components/ValidatorCommissionRate.vue b/src/components/ValidatorCommissionRate.vue
index dda710dc..5d886e0a 100644
--- a/src/components/ValidatorCommissionRate.vue
+++ b/src/components/ValidatorCommissionRate.vue
@@ -151,18 +151,18 @@ const chartConfig = computed(() => {
         :series="series"
       />
 
-      <div class="d-flex align-center justify-center flex-wrap mx-2 gap-x-6">
-        <div class="d-flex align-center gap-2">
-          <VBadge dot color="success" />
-          <span class="mt-1 text-caption">Rate:{{ rate }}%</span>
+      <div class="flex items-center justify-center flex-wrap mx-2 gap-x-6">
+        <div class="flex items-center gap-2">
+          <div class="bg-success w-[6px] h-[6px] rounded-full"></div>
+          <span class="text-caption">Rate:{{ rate }}%</span>
         </div>
-        <div class="d-flex align-center gap-2">
-          <VBadge dot color="success" style="opacity: 0.2" />
-          <span class="mt-1 text-caption">24h: ±{{ change }}%</span>
+        <div class="flex items-center gap-2">
+          <div class="bg-success w-[6px] h-[6px] rounded-full opacity-60"></div>
+          <span class="text-caption">24h: ±{{ change }}%</span>
         </div>
-        <div class="d-flex align-center gap-2">
-          <VBadge dot color="secondary" />
-          <span class="mt-1 text-caption">Max:{{ max }}%</span>
+        <div class="flex items-center gap-2">
+          <div class="bg-secondary w-[6px] h-[6px] rounded-full"></div>
+          <span class="text-caption">Max:{{ max }}%</span>
         </div>
       </div>
     </VCardText>