zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

Merge pull request #431 from alisaweb3/v3-single

Browse Source 
Set theme-color ,Consensus color, Voting show in h5
This commit is contained in:
ping 2023-06-09 11:14:37 +08:00 committed by GitHub
commit bd85eb16be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 125 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/ProposalListItem.vue
View File

@ -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>

65
src/libs/utils.ts
View File

@ -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,
};
}

39
src/modules/[chain]/consensus/index.vue
View File

@ -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,8 +23,10 @@ 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();
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="[
`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 +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>

19
src/stores/useBlockchain.ts
View File

@ -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 || '',

1
src/stores/useDashboard.ts
View File

@ -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;
}

2
src/stores/useFormatter.ts
View File

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