From 3a118a539371797dc61c7891e3e73f7e0459aa3c Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 9 Jun 2023 00:00:14 +0800
Subject: [PATCH] feat: fix consensus color

---
 src/modules/[chain]/consensus/index.vue | 43 +++++++++++--------------
 src/stores/useFormatter.ts              |  2 +-
 2 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/modules/[chain]/consensus/index.vue b/src/modules/[chain]/consensus/index.vue
index 827809a2..15ec015b 100644
--- a/src/modules/[chain]/consensus/index.vue
+++ b/src/modules/[chain]/consensus/index.vue
@@ -1,17 +1,11 @@
 <script lang="ts" setup>
 import fetch from 'cross-fetch';
 import { onMounted, ref, computed, onUnmounted } from 'vue';
-import {
-  useBlockchain,
-  useFormatter,
-  useDashboard,
-  useStakingStore,
-} from '@/stores';
+import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
 import { consensusPubkeyToHexAddress } from '@/libs';
 
 const format = useFormatter();
 const chainStore = useBlockchain();
-const dashboard = useDashboard();
 const stakingStore = useStakingStore();
 const rpcList = ref(
   chainStore.current?.endpoints?.rpc || [{ address: '', provider: '' }]
@@ -29,25 +23,29 @@ let step = ref('');
 let timer = null;
 let updatetime = ref(new Date());
 let positions = ref([]);
-onMounted(() => {
-  stakingStore.init();
+let validatorsData = ref([] as any);
+onMounted(async () => {
+  // stakingStore.init();
+
+  validatorsData.value = await stakingStore.fetchAcitveValdiators();
+  console.log(validatorsData.value, 'data');
   rpc.value = rpcList.value[0].address + '/consensus_state';
   fetchPosition();
   update();
   timer = setInterval(() => {
     update();
-  }, 6000);
+  }, 60000000);
 });
 onUnmounted(() => {
   timer = null;
 });
 
 const newTime = computed(() => {
-  return format.toDay(updatetime.value?.toDateString(), 'time');
+  return format.toDay(updatetime.value, 'time');
 });
 
 const vals = computed(() => {
-  return validators.value.map((x) => {
+  return validatorsData.value.map((x: any) => {
     const x2 = x;
     // @ts-ignore
     x2.hex = consensusPubkeyToHexAddress(x.consensus_pubkey);
@@ -55,7 +53,7 @@ const vals = computed(() => {
   });
 });
 
-function showName(i:number, text: string) {
+function showName(i: number, text: string) {
   if (text === 'nil-Vote') {
     // @ts-ignore
     if (positions.value?.[i]?.address) {
@@ -77,7 +75,7 @@ function color(i: number, txt: string) {
   if (i === roundState.value?.proposer?.index) {
     return txt === 'nil-Vote' ? 'warning' : 'primary';
   }
-  return txt === 'nil-Vote' ? 'neutral' : 'success';
+  return txt === 'nil-Vote' ? 'gray-700' : 'success';
 }
 function onChange() {
   httpstatus.value = 200;
@@ -258,17 +256,12 @@ async function update() {
 
           <div class="flex flex-wrap py-6">
             <div
-              class="badge"
+              class="inline-flex items-center justify-center w-fit rounded-3xl h-5 text-sm px-2 text-slate-200 leading-5"
               v-for="(pre, i) in item.prevotes"
               :key="i"
               size="sm"
               style="margin: 2px"
-              :class="[
-                `btn-${color(i, pre)} border-${color(i, pre)} !bg-${color(
-                  i,
-                  pre
-                )}`,
-              ]"
+              :class="[`bg-${color(i, pre)}`]"
             >
               <span>{{ showName(i, pre) }}</span>
             </div>
@@ -279,21 +272,21 @@ async function update() {
       <!--  -->
       <div class="flex flex-col md:!flex-row">
         <div class="flex mr-1 mb-1">
-          <button class="btn btn-xs !btn-primary px-4 w-[34px]"></button>
+          <div class="px-4 w-[34px] h-6 rounded-lg bg-primary"></div>
           <span class="mx-1">Proposer Signed</span>
         </div>
         <div class="flex mr-1 mb-1">
-          <button class="btn btn-xs !btn-warning px-4 w-[34px]"></button>
+          <div class="px-4 w-[34px] h-6 rounded-lg bg-warning"></div>
           <span class="mx-1">Proposer Not Signed</span>
         </div>
 
         <div class="flex mr-1 mb-1">
-          <button class="btn btn-xs !btn-success px-4 w-[34px]"></button>
+          <div class="px-4 w-[34px] h-6 rounded-lg bg-success"></div>
           <span class="mx-1">Signed</span>
         </div>
 
         <div class="flex mr-1 mb-1">
-          <button class="btn btn-xs !btn-neutral px-4 w-[34px]"></button>
+          <div class="px-4 w-[34px] h-6 rounded-lg bg-gray-700"></div>
           <span class="mx-1">Not Signed</span>
         </div>
       </div>
diff --git a/src/stores/useFormatter.ts b/src/stores/useFormatter.ts
index 742b03e1..4c7385c3 100644
--- a/src/stores/useFormatter.ts
+++ b/src/stores/useFormatter.ts
@@ -227,7 +227,7 @@ export const useFormatter = defineStore('formatter', {
     numberAndSign(input: number, fmt = '+0,0') {
       return numeral(input).format(fmt);
     },
-    toDay(time?: string | number, format = 'long') {
+    toDay(time?: string | number| Date, format = 'long') {
       if (!time) return '';
       if (format === 'long') {
         return dayjs(time).format('YYYY-MM-DD HH:mm');