Merge pull request #431 from alisaweb3/v3-single

Set theme-color ,Consensus color, Voting show in h5

src/components/ProposalListItem.vue

@@ -162,30 +162,7 @@ const proposalInfo = ref();
               {{ showType(item.content['@type']) }}
             </div>
           </div>
-          <div
+
-            class="flex items-center"
-            :class="
-              statusMap?.[item?.status] === 'PASSED'
-                ? 'text-yes'
-                : statusMap?.[item?.status] === 'REJECTED'
-                ? 'text-no'
-                : 'text-info'
-            "
-          >
-            <div
-              class="w-1 h-1 rounded-full mr-2"
-              :class="
-                statusMap?.[item?.status] === 'PASSED'
-                  ? 'bg-yes'
-                  : statusMap?.[item?.status] === 'REJECTED'
-                  ? 'bg-no'
-                  : 'bg-info'
-              "
-            ></div>
-            <div class="text-xs flex items-center">
-              {{ statusMap?.[item?.status] || item?.status }}
-            </div>
-          </div>
           <div
             class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
           >
@@ -201,7 +178,31 @@ const proposalInfo = ref();
         </div>
 
         <div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
-          <div class="">
+          <div class="flex justify-between">
+            <div
+              class="flex items-center"
+              :class="
+                statusMap?.[item?.status] === 'PASSED'
+                  ? 'text-yes'
+                  : statusMap?.[item?.status] === 'REJECTED'
+                  ? 'text-no'
+                  : 'text-info'
+              "
+            >
+              <div
+                class="w-1 h-1 rounded-full mr-2"
+                :class="
+                  statusMap?.[item?.status] === 'PASSED'
+                    ? 'bg-yes'
+                    : statusMap?.[item?.status] === 'REJECTED'
+                    ? 'bg-no'
+                    : 'bg-info'
+                "
+              ></div>
+              <div class="text-xs flex items-center">
+                {{ statusMap?.[item?.status] || item?.status }}
+              </div>
+            </div>
             <label
               for="vote"
               class="btn btn-xs btn-primary rounded-sm"
@@ -217,6 +218,7 @@ const proposalInfo = ref();
 
               <span v-else>Vote</span></label
             >
+           
           </div>
         </div>
       </div>

src/libs/utils.ts

@@ -102,3 +102,68 @@ export function isHexAddress(v: any) {
   // return re.test(v)
   return v.length === 28;
 }
+
+export function hexToRgb(hex: string) {
+  // remove '#'
+  hex = hex.replace('#', '');
+  // red
+  const r = parseInt(hex.substring(0, 2), 16);
+  // green
+  const g = parseInt(hex.substring(2, 4), 16);
+  // blue
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  return {
+    color: 'rgb(' + r + ', ' + g + ', ' + b + ')',
+    r,
+    g,
+    b,
+  };
+}
+
+export function rgbToHsl(color: string) {
+  color = color.replace('rgb(', '');
+  color = color.replace(')', '');
+  const colorList = color.split(',') || [0, 0, 0];
+  // console.log(colorList, 'colorList')
+  const r = parseInt(colorList?.[0]) / 255;
+  const g = parseInt(colorList?.[1]) / 255;
+  const b = parseInt(colorList?.[2]) / 255;
+  // console.log(r,g,b, '88')
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h,
+    s,
+    l = (max + min) / 2;
+
+  if (max == min) {
+    h = 0;
+    s = 0;
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h = h / 6;
+  }
+
+  h = Math.round(h * 360);
+  s = Math.round(s * 100);
+  l = Math.round(l * 100);
+  return {
+    color: 'hsl(' + h + ', ' + s + '%, ' + l + '%)',
+    value: h + ' ' + s + ' ' + l,
+    h,
+    s,
+    l,
+  };
+}

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 {
+import { useBlockchain, useFormatter, useStakingStore } from '@/stores';
-  useBlockchain,
-  useFormatter,
-  useDashboard,
-  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,8 +23,10 @@ let step = ref('');
 let timer = null;
 let updatetime = ref(new Date());
 let positions = ref([]);
-onMounted(() => {
+let validatorsData = ref([] as any);
-  stakingStore.init();
+onMounted(async () => {
+  // stakingStore.init();
+  validatorsData.value = await stakingStore.fetchAcitveValdiators();
   rpc.value = rpcList.value[0].address + '/consensus_state';
   fetchPosition();
   update();
@@ -43,11 +39,11 @@ onUnmounted(() => {
 });
 
 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 +51,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 +73,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 +254,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="[
+              :class="[`bg-${color(i, pre)}`]"
-                `btn-${color(i, pre)} border-${color(i, pre)} !bg-${color(
-                  i,
-                  pre
-                )}`,
-              ]"
             >
               <span>{{ showName(i, pre) }}</span>
             </div>
@@ -279,21 +270,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>

src/stores/useBlockchain.ts

@@ -5,7 +5,12 @@ import {
   type Endpoint,
   EndpointType,
 } from './useDashboard';
-import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '@/layouts/types';
+import type {
+  NavGroup,
+  NavLink,
+  NavSectionTitle,
+  VerticalNavItems,
+} from '@/layouts/types';
 import { useRouter } from 'vue-router';
 import { CosmosRestClient } from '@/libs/client';
 import {
@@ -18,6 +23,7 @@ import {
 } from '.';
 import { useBlockModule } from '@/modules/[chain]/block/block';
 import { DEFAULT } from '@/libs';
+import { hexToRgb, rgbToHsl } from '@/libs/utils';
 
 export const useBlockchain = defineStore('blockchain', {
   state: () => {
@@ -35,7 +41,6 @@ export const useBlockchain = defineStore('blockchain', {
   },
   getters: {
     current(): ChainConfig | undefined {
-      console.log(this.dashboard.chains[this.chainName], 'jljfkj')
       return this.dashboard.chains[this.chainName];
     },
     logo(): string {
@@ -54,10 +59,18 @@ export const useBlockchain = defineStore('blockchain', {
     },
     computedChainMenu() {
       let currNavItem: VerticalNavItems = [];
-
       const router = useRouter();
       const routes = router?.getRoutes() || [];
       if (this.current && routes) {
+        if (this.current?.themeColor) {
+          const { color } = hexToRgb(this.current?.themeColor);
+          const { h, s, l } = rgbToHsl(color);
+          const themeColor = h + ' ' + s + '% ' + l +'%';
+          document.body.style.setProperty('--p', `${themeColor}`);
+          // document.body.style.setProperty('--p', `${this.current?.themeColor}`);
+        } else {
+          document.body.style.setProperty('--p', '237.65 100% 70%');
+        }
         currNavItem = [
           {
             title: this.current?.prettyName || this.chainName || '',

src/stores/useDashboard.ts

@@ -166,6 +166,7 @@ export function fromLocal(lc: LocalConfig): ChainConfig {
   conf.logo = lc.logo;
   conf.keplrFeatures = lc.keplr_features;
   conf.keplrPriceStep = lc.keplr_price_step;
+  conf.themeColor = lc.theme_color;
   return conf;
 }
 

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');