Merge pull request #372 from alisaweb3/v3-single
UI Refactor: language switch, theme toggle,governance,block,staking
This commit is contained in:
ping
GitHub
commit
8da4118f31
@ -25,7 +25,7 @@ function calculateValue(value: any){
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="bg-card px-4 pt-3 pb-4 rounded mt-5"
|
||||
class="bg-base-100 px-4 pt-3 pb-4 rounded mt-5"
|
||||
v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
|
||||
>
|
||||
<div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { getLogo, useDashboard, } from '@/stores/useDashboard';
|
||||
import { getLogo, useDashboard } from '@/stores/useDashboard';
|
||||
import { computed } from 'vue';
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
@ -10,28 +10,41 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const dashboardStore = useDashboard()
|
||||
const conf = computed(() => dashboardStore.chains[props.name] || {})
|
||||
const dashboardStore = useDashboard();
|
||||
const conf = computed(() => dashboardStore.chains[props.name] || {});
|
||||
|
||||
const addFavor = (e: Event) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
|
||||
window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap))
|
||||
}
|
||||
|
||||
dashboardStore.favoriteMap[props.name] =
|
||||
!dashboardStore?.favoriteMap?.[props.name];
|
||||
window.localStorage.setItem(
|
||||
'favoriteMap',
|
||||
JSON.stringify(dashboardStore.favoriteMap)
|
||||
);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer">
|
||||
<RouterLink
|
||||
:to="`/${name}`"
|
||||
class="bg-base-100 hover:bg-base-content rounded shadow flex items-center px-3 py-3 cursor-pointer"
|
||||
>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden">
|
||||
<img :src="conf.logo" />
|
||||
</div>
|
||||
<div class="font-semibold ml-4 text-base flex-1">
|
||||
{{ conf?.prettyName || props.name }}
|
||||
</div>
|
||||
<div @click="addFavor" class="pl-4 text-xl"
|
||||
:class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
|
||||
<div
|
||||
@click="addFavor"
|
||||
class="pl-4 text-xl"
|
||||
:class="{
|
||||
'text-warning': dashboardStore?.favoriteMap?.[props.name],
|
||||
'text-gray-300 dark:text-gray-500':
|
||||
!dashboardStore?.favoriteMap?.[props.name],
|
||||
}"
|
||||
>
|
||||
<Icon icon="mdi-star" />
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useThemeConfig } from '@core/composable/useThemeConfig';
|
||||
import type { ThemeSwitcherTheme } from '@layouts/types';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { onMounted, watch } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
@ -50,10 +51,12 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn @click="changeTheme">
|
||||
<VIcon :icon="props.themes[currentThemeIndex].icon" />
|
||||
<VTooltip activator="parent" open-delay="1000">
|
||||
<span class="text-capitalize">{{ currentThemeName }}</span>
|
||||
</VTooltip>
|
||||
</IconBtn>
|
||||
<div class="tooltip tooltip-bottom delay-1000" :data-tip="currentThemeName">
|
||||
<button
|
||||
class="btn btn-ghost btn-circle btn-sm mx-1"
|
||||
@click="changeTheme"
|
||||
>
|
||||
<Icon :icon="props.themes[currentThemeIndex].icon" class="text-2xl" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -6,14 +6,18 @@ const props = defineProps(["value"]);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<VTable>
|
||||
<tbody>
|
||||
<tr v-for="(v, k) of value">
|
||||
<td class="text-capitalize" style="max-width: 200px;">{{ k }}</td>
|
||||
<td><div class="overflow-hidden w-auto" style="max-width: 1000px;">
|
||||
<Component v-if="v" :is="select(v, 'horizontal')" :value="v"></Component></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table w-full text-sm">
|
||||
<tbody>
|
||||
<tr v-for="(v, k) of value">
|
||||
<td class="text-capitalize" style="max-width: 200px;">{{ k }}</td>
|
||||
<td>
|
||||
<div class="overflow-hidden w-auto whitespace-normal" style="max-width: 1000px;">
|
||||
<Component v-if="v" :is="select(v, 'horizontal')" :value="v"></Component>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div class="h-100 d-flex align-center justify-space-between">
|
||||
<!-- 👉 Footer: left content -->
|
||||
<span class="d-flex align-center">
|
||||
©
|
||||
{{ new Date().getFullYear() }}
|
||||
Made With
|
||||
<VIcon
|
||||
icon="mdi-heart-outline"
|
||||
color="error"
|
||||
size="1.25rem"
|
||||
class="mx-1"
|
||||
/>
|
||||
By <a
|
||||
href="https://ping.pub"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary ms-1"
|
||||
>Ping.pub</a>
|
||||
</span>
|
||||
<!-- 👉 Footer: right content -->
|
||||
<span class="d-md-flex gap-x-4 text-primary d-none">
|
||||
<a
|
||||
href="https://github.com/ping-pub/explorer/blob/master/LICENSE"
|
||||
target="noopener noreferrer"
|
||||
>License</a>
|
||||
<a
|
||||
href="https://github.com/ping-pub/explorer"
|
||||
target="noopener noreferrer"
|
||||
>Github</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -20,6 +20,5 @@ const themes: ThemeSwitcherTheme[] = [
|
||||
<template>
|
||||
<div>
|
||||
<NewThemeSwitcher :themes="themes"/>
|
||||
<!-- <ThemeSwitcher :themes="themes" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,58 +1,66 @@
|
||||
<script lang="ts" setup>
|
||||
import TxsElement from '@/components/dynamic/TxsElement.vue';
|
||||
import { useBlockModule } from './block'
|
||||
import { useBlockModule } from './block';
|
||||
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import { onBeforeRouteUpdate } from 'vue-router';
|
||||
const props = defineProps(["height", "chain"]);
|
||||
const props = defineProps(['height', 'chain']);
|
||||
|
||||
const store = useBlockModule()
|
||||
store.fetchBlock(props.height)
|
||||
const tab = ref('summary')
|
||||
const store = useBlockModule();
|
||||
store.fetchBlock(props.height);
|
||||
const tab = ref('summary');
|
||||
|
||||
const height = computed(() => {
|
||||
return Number(store.current.block?.header?.height || props.height || 0)
|
||||
})
|
||||
return Number(store.current.block?.header?.height || props.height || 0);
|
||||
});
|
||||
|
||||
onBeforeRouteUpdate(async (to, from, next) => {
|
||||
if (from.path !== to.path) {
|
||||
store.fetchBlock(String(to.params.height))
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
if (from.path !== to.path) {
|
||||
store.fetchBlock(String(to.params.height));
|
||||
next();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<VCard>
|
||||
<VCardTitle class="d-flex justify-space-between">
|
||||
<span class="mt-2">#{{ store.current.block?.header?.height }}</span>
|
||||
<span v-if="props.height" class="mt-2">
|
||||
<VBtn size="32" :to="`/${store.blockchain.chainName}/block/${height - 1}`" class="mr-2"><VIcon icon="mdi-arrow-left"/></VBtn>
|
||||
<VBtn size="32" :to="`/${store.blockchain.chainName}/block/${height + 1}`"><VIcon icon="mdi-arrow-right"/></VBtn>
|
||||
</span>
|
||||
</VCardTitle>
|
||||
<VCardItem class="pt-0">
|
||||
<DynamicComponent :value="store.current.block_id"/>
|
||||
</VCardItem>
|
||||
<VCardTitle class="d-flex justify-space-between">
|
||||
<span class="mt-2">#{{ store.current.block?.header?.height }}</span>
|
||||
<span v-if="props.height" class="mt-2">
|
||||
<VBtn
|
||||
size="32"
|
||||
:to="`/${store.blockchain.chainName}/block/${height - 1}`"
|
||||
class="mr-2"
|
||||
><VIcon icon="mdi-arrow-left"
|
||||
/></VBtn>
|
||||
<VBtn
|
||||
size="32"
|
||||
:to="`/${store.blockchain.chainName}/block/${height + 1}`"
|
||||
><VIcon icon="mdi-arrow-right"
|
||||
/></VBtn>
|
||||
</span>
|
||||
</VCardTitle>
|
||||
<VCardItem class="pt-0">
|
||||
<DynamicComponent :value="store.current.block_id" />
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
<VCard title="Block Header" class="my-5">
|
||||
<VCardItem class="pt-0">
|
||||
<DynamicComponent :value="store.current.block?.header"/>
|
||||
</VCardItem>
|
||||
<VCardItem class="pt-0">
|
||||
<DynamicComponent :value="store.current.block?.header" />
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
<VCard title="Transactions">
|
||||
<VCardItem class="pt-0">
|
||||
<TxsElement :value="store.current.block?.data?.txs"/>
|
||||
</VCardItem>
|
||||
<VCardItem class="pt-0">
|
||||
<TxsElement :value="store.current.block?.data?.txs" />
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
<VCard title="Last Commit" class="mt-5">
|
||||
<VCardItem class="pt-0">
|
||||
<DynamicComponent :value="store.current.block?.last_commit"/>
|
||||
</VCardItem>
|
||||
<VCardItem class="pt-0">
|
||||
<DynamicComponent :value="store.current.block?.last_commit" />
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -11,76 +11,82 @@ const tab = ref('blocks');
|
||||
const format = useFormatter();
|
||||
</script>
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardTitle class="d-flex justify-space-between">
|
||||
<VTabs v-model="tab">
|
||||
<VTab value="blocks">Blocks</VTab>
|
||||
<VTab value="transactions">Transactions</VTab>
|
||||
</VTabs>
|
||||
</VCardTitle>
|
||||
<VWindow v-model="tab">
|
||||
<VWindowItem value="blocks">
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Height</th>
|
||||
<th>Hash</th>
|
||||
<th>Proposer</th>
|
||||
<th>Txs</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in store.recents">
|
||||
<td class="text-sm text-primary">
|
||||
<RouterLink
|
||||
:to="`/${props.chain}/block/${item.block?.header?.height}`"
|
||||
>{{ item.block?.header?.height }}</RouterLink
|
||||
>
|
||||
</td>
|
||||
<td>{{ item.block_id?.hash }}</td>
|
||||
<td>
|
||||
{{ format.validator(item.block?.header?.proposer_address) }}
|
||||
</td>
|
||||
<td>{{ item.block?.data?.txs.length }}</td>
|
||||
<td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VWindowItem>
|
||||
<VWindowItem value="transactions">
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Hash</th>
|
||||
<th>Messages</th>
|
||||
<th>Fees</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in store.txsInRecents">
|
||||
<td>
|
||||
<RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
|
||||
item.hash
|
||||
}}</RouterLink>
|
||||
</td>
|
||||
<td>{{ format.messages(item.tx.body.messages) }}</td>
|
||||
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<div>
|
||||
<div class="tabs tabs-boxed bg-transparent mb-4">
|
||||
<a
|
||||
class="tab text-gray-400 uppercase"
|
||||
:class="{ 'tab-active': tab === 'blocks' }"
|
||||
@click="tab = 'blocks'"
|
||||
>Blocks</a
|
||||
>
|
||||
<a
|
||||
class="tab text-gray-400 uppercase"
|
||||
:class="{ 'tab-active': tab === 'transactions' }"
|
||||
@click="tab = 'transactions'"
|
||||
>Transactions</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<VCardItem>
|
||||
<v-alert
|
||||
type="info"
|
||||
text="Only show txs in recent blocks"
|
||||
variant="tonal"
|
||||
></v-alert>
|
||||
</VCardItem>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
<VCardActions> </VCardActions>
|
||||
</VCard>
|
||||
<div v-if="tab === 'blocks'" class="bg-base-100 rounded">
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Height</th>
|
||||
<th>Hash</th>
|
||||
<th>Proposer</th>
|
||||
<th>Txs</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in store.recents">
|
||||
<td class="text-sm text-primary">
|
||||
<RouterLink
|
||||
:to="`/${props.chain}/block/${item.block?.header?.height}`"
|
||||
>{{ item.block?.header?.height }}</RouterLink
|
||||
>
|
||||
</td>
|
||||
<td>{{ item.block_id?.hash }}</td>
|
||||
<td>
|
||||
{{ format.validator(item.block?.header?.proposer_address) }}
|
||||
</td>
|
||||
<td>{{ item.block?.data?.txs.length }}</td>
|
||||
<td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-100 rounded" v-if="tab === 'transactions'">
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Hash</th>
|
||||
<th>Messages</th>
|
||||
<th>Fees</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in store.txsInRecents">
|
||||
<td>
|
||||
<RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
|
||||
item.hash
|
||||
}}</RouterLink>
|
||||
</td>
|
||||
<td>{{ format.messages(item.tx.body.messages) }}</td>
|
||||
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<div class="p-4">
|
||||
<v-alert
|
||||
type="info"
|
||||
text="Only show txs in recent blocks"
|
||||
variant="tonal"
|
||||
></v-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route>
|
||||
|
||||
@ -100,8 +100,11 @@ const total = computed(()=> {
|
||||
})
|
||||
|
||||
const turnout = computed(() => {
|
||||
if (total.value > 0) {
|
||||
const bonded = useStakingStore().pool?.bonded_tokens || "1"
|
||||
return format.percent(total.value / Number(bonded))
|
||||
}
|
||||
return 0
|
||||
})
|
||||
|
||||
const yes = computed(()=> {
|
||||
@ -135,75 +138,58 @@ const abstain = computed(()=> {
|
||||
}
|
||||
return 0
|
||||
})
|
||||
const processList = computed(()=>{
|
||||
return [
|
||||
{name: 'Turnout', value : turnout.value, class: 'bg-info' },
|
||||
{name: 'Yes', value : yes.value, class: 'bg-success' },
|
||||
{name: 'No', value : no.value, class: 'bg-error' },
|
||||
{name: 'No With Veto', value : veto.value, class: 'bg-primary' },
|
||||
{name: 'Abstain', value : abstain.value, class: 'bg-warning' }
|
||||
]
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
{{ proposal_id }}. {{ proposal.content?.title }} <VChip label :color="color" class="float-right">{{ status }}</VChip>
|
||||
</VCardTitle>
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title flex flex-col md:justify-between md:flex-row">
|
||||
<p class="truncate w-full">{{ proposal_id }}. {{ proposal.content?.title }} </p>
|
||||
<div
|
||||
class="badge badge-ghost"
|
||||
:class="
|
||||
color === 'success'
|
||||
? 'text-yes'
|
||||
: color === 'error'
|
||||
? 'text-no'
|
||||
: 'text-info'
|
||||
"
|
||||
>{{ status }}</div>
|
||||
</h2>
|
||||
<div class="">
|
||||
<ObjectElement :value="proposal.content"/>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
<VRow class="my-5">
|
||||
<VCol cols=12 md="4">
|
||||
<VCard class="h-100">
|
||||
<VCardItem>
|
||||
<VCardTitle>Tally</VCardTitle>
|
||||
<label>Turnout</label>
|
||||
<v-progress-linear
|
||||
:model-value="turnout"
|
||||
height="25"
|
||||
color="info"
|
||||
>
|
||||
<strong>{{ turnout }}</strong>
|
||||
</v-progress-linear>
|
||||
<label>Yes</label>
|
||||
<v-progress-linear
|
||||
:model-value="yes"
|
||||
height="25"
|
||||
color="success"
|
||||
>
|
||||
<strong>{{ yes }}</strong>
|
||||
</v-progress-linear>
|
||||
<label>No</label>
|
||||
<v-progress-linear
|
||||
:model-value="no"
|
||||
height="25"
|
||||
color="error"
|
||||
>
|
||||
<strong>{{ no }}</strong>
|
||||
</v-progress-linear>
|
||||
<label>No With Veto</label>
|
||||
<v-progress-linear
|
||||
:model-value="veto"
|
||||
height="25"
|
||||
color="primary"
|
||||
>
|
||||
<strong>{{ veto }}</strong>
|
||||
</v-progress-linear>
|
||||
<label>Abstain</label>
|
||||
<v-progress-linear
|
||||
:model-value="abstain"
|
||||
height="25"
|
||||
color="dark"
|
||||
>
|
||||
<strong>{{ abstain }}</strong>
|
||||
</v-progress-linear>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol cols=12 md="8">
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
Timeline
|
||||
</VCardTitle>
|
||||
<VTimeline
|
||||
</div>
|
||||
</div>
|
||||
<!-- grid lg:grid-cols-3 auto-rows-max-->
|
||||
<!-- flex-col lg:flex-row flex -->
|
||||
<div class="gap-4 mb-4 grid lg:grid-cols-3 auto-rows-max ">
|
||||
<!-- flex-1 -->
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow ">
|
||||
<h2 class="card-title">Tally</h2>
|
||||
<div v-for="(item,index) of processList" :key="index">
|
||||
<label class="block">{{item.name }}</label>
|
||||
<div class="h-6 w-full relative">
|
||||
<div class="absolute inset-x-0 inset-y-0 w-full opacity-10" :class="`${item.class}`"></div>
|
||||
<div class="absolute inset-x-0 inset-y-0" :class="`${item.class}`" :style="`width: ${item.value}`"></div>
|
||||
<strong class="absolute inset-x-0 inset-y-0 text-center">{{ item.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- lg:col-span-2 -->
|
||||
<!-- lg:flex-[2_2_0%] -->
|
||||
<div class="h-max bg-base-100 px-4 pt-3 pb-4 rounded shadow lg:col-span-2">
|
||||
<h2 class="card-title">Timeline</h2>
|
||||
<VTimeline
|
||||
class="mt-2"
|
||||
side="end"
|
||||
align="start"
|
||||
@ -301,12 +287,23 @@ const abstain = computed(()=> {
|
||||
</p>
|
||||
</VTimelineItem>
|
||||
</VTimeline>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VCard>
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title">Votes</h2>
|
||||
<table class="table w-full ">
|
||||
<tbody>
|
||||
<tr v-for="(item,index) of votes" :key="index">
|
||||
<td>{{ item.voter }}</td>
|
||||
<td>{{ item.option }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
|
||||
</div>
|
||||
<!-- <VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>
|
||||
Votes
|
||||
@ -321,6 +318,6 @@ const abstain = computed(()=> {
|
||||
</VTable>
|
||||
<VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
</VCard> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { useGovStore } from '@/stores';
|
||||
import ProposalListItem from '@/components/ProposalListItem.vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
const tab = ref('');
|
||||
const tab = ref('2');
|
||||
const store = useGovStore();
|
||||
|
||||
onMounted(() => {
|
||||
@ -13,33 +13,41 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const changeTab = (val: '2' | '3' | '4') => {
|
||||
tab.value = val;
|
||||
store.fetchProposals(val);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<VTabs v-model="tab" class="v-tabs-pill">
|
||||
<VTab value="2">Voting</VTab>
|
||||
<VTab value="3" @click="store.fetchProposals('3')">Passed</VTab>
|
||||
<VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab>
|
||||
</VTabs>
|
||||
<VWindow v-model="tab" class="mt-5">
|
||||
<VWindowItem value="2">
|
||||
<ProposalListItem :proposals="store?.proposals['2']" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem value="3">
|
||||
<ProposalListItem :proposals="store?.proposals['3']" />
|
||||
</VWindowItem>
|
||||
|
||||
<VWindowItem value="4">
|
||||
<ProposalListItem :proposals="store?.proposals['4']" />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
<div class="tabs tabs-boxed bg-transparent mb-4">
|
||||
<a
|
||||
class="tab text-gray-400 uppercase"
|
||||
:class="{ 'tab-active': tab === '2' }"
|
||||
@click="changeTab('2')"
|
||||
>Voting</a
|
||||
>
|
||||
<a
|
||||
class="tab text-gray-400 uppercase"
|
||||
:class="{ 'tab-active': tab === '3' }"
|
||||
@click="changeTab('3')"
|
||||
>Passed</a
|
||||
>
|
||||
<a
|
||||
class="tab text-gray-400 uppercase"
|
||||
:class="{ 'tab-active': tab === '4' }"
|
||||
@click="changeTab('4')"
|
||||
>Rejected</a
|
||||
>
|
||||
</div>
|
||||
<ProposalListItem :proposals="store?.proposals[tab]" />
|
||||
</div>
|
||||
</template>
|
||||
<route>
|
||||
{
|
||||
meta: {
|
||||
i18n: 'governance'
|
||||
}
|
||||
{
|
||||
meta: {
|
||||
i18n: 'governance'
|
||||
}
|
||||
</route>
|
||||
}
|
||||
</route>
|
||||
|
||||
@ -14,7 +14,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<div class="overflow-hidden">
|
||||
<!-- Chain ID -->
|
||||
<div class="bg-card px-4 pt-3 pb-4 rounded">
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded">
|
||||
<div class="text-base mb-3 text-main">{{ chain.title }}</div>
|
||||
<div
|
||||
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
|
||||
@ -40,13 +40,13 @@ onMounted(() => {
|
||||
<!-- Slashing Parameters -->
|
||||
<CardParameter :cardItem="store.slashing"/>
|
||||
<!-- Application Version -->
|
||||
<div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6">
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded-sm mt-6">
|
||||
<div class="text-base mb-3 text-main">{{ store.appVersion?.title }}</div>
|
||||
<ArrayObjectElement :value="store.appVersion?.items" :thead="false"/>
|
||||
</div>
|
||||
|
||||
<!-- Node Information -->
|
||||
<div class="bg-card px-4 pt-3 pb-4ß rounded-sm mt-6">
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4ß rounded-sm mt-6">
|
||||
<div class="text-base mb-3 text-main">{{ store.nodeVersion?.title }}</div>
|
||||
<ArrayObjectElement :value="store.nodeVersion?.items" :thead="false"/>
|
||||
</div>
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
<script lang=ts setup>
|
||||
<script lang="ts" setup>
|
||||
import { useBaseStore, useFormatter, useStakingStore } from '@/stores';
|
||||
import { toBase64, toHex } from '@cosmjs/encoding';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import { onMounted, ref, type DebuggerEvent } from 'vue';
|
||||
import { consensusPubkeyToHexAddress } from '@/libs'
|
||||
import { consensusPubkeyToHexAddress } from '@/libs';
|
||||
import type { Key, Validator } from '@/types';
|
||||
const staking = useStakingStore()
|
||||
const format = useFormatter()
|
||||
const staking = useStakingStore();
|
||||
const format = useFormatter();
|
||||
|
||||
const cache = JSON.parse(localStorage.getItem('avatars')||'{}')
|
||||
const avatars = ref( cache || {} )
|
||||
const latest = ref({} as Record<string, number>)
|
||||
const yesterday = ref({} as Record<string, number>)
|
||||
const tab = ref('active')
|
||||
const unbondList = ref([] as Validator[])
|
||||
const base = useBaseStore()
|
||||
onMounted(()=> {
|
||||
fetchChange(0)
|
||||
staking.fetchInacitveValdiators().then(x => {
|
||||
unbondList.value = x
|
||||
})
|
||||
})
|
||||
const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
|
||||
const avatars = ref(cache || {});
|
||||
const latest = ref({} as Record<string, number>);
|
||||
const yesterday = ref({} as Record<string, number>);
|
||||
const tab = ref('active');
|
||||
const unbondList = ref([] as Validator[]);
|
||||
const base = useBaseStore();
|
||||
onMounted(() => {
|
||||
fetchChange(0);
|
||||
staking.fetchInacitveValdiators().then((x) => {
|
||||
unbondList.value = x;
|
||||
});
|
||||
});
|
||||
|
||||
function fetchChange(offset: number) {
|
||||
const base = useBaseStore()
|
||||
const diff = 86400000 / base.blocktime
|
||||
const base = useBaseStore();
|
||||
const diff = 86400000 / base.blocktime;
|
||||
// base.fetchAbciInfo().then(h => {
|
||||
// // console.log('block:', h)
|
||||
// base.fetchValidatorByHeight(h.lastBlockHeight, offset).then(x => {
|
||||
// x.validators.forEach(v => {
|
||||
// if(v.pubkey) latest.value[pubkeyToAddress(v.pubkey.algorithm, v.pubkey.data)] = Number(v.votingPower)
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// const height = Number(h.lastBlockHeight) - diff
|
||||
// base.fetchValidatorByHeight(height > 0 ? height : 1, offset).then(old => {
|
||||
@ -44,190 +44,233 @@ function fetchChange(offset: number) {
|
||||
|
||||
const change24 = (key: Key) => {
|
||||
// console.log('hex key:', consensusPubkeyToHexAddress(key))
|
||||
const txt = key.key
|
||||
const n : number = latest.value[txt];
|
||||
const o : number = yesterday.value[txt]
|
||||
const txt = key.key;
|
||||
const n: number = latest.value[txt];
|
||||
const o: number = yesterday.value[txt];
|
||||
// console.log( txt, n, o)
|
||||
return n >0 && o > 0 ? n - o : 0
|
||||
}
|
||||
return n > 0 && o > 0 ? n - o : 0;
|
||||
};
|
||||
|
||||
const change24Text = (key?: Key) => {
|
||||
if(!key) return ''
|
||||
const v = change24(key)
|
||||
return v!==0 ? format.numberAndSign(v) : ''
|
||||
}
|
||||
if (!key) return '';
|
||||
const v = change24(key);
|
||||
return v !== 0 ? format.numberAndSign(v) : '';
|
||||
};
|
||||
|
||||
const change24Color = (key?: Key) => {
|
||||
if(!key) return ''
|
||||
const v = change24(key)
|
||||
if(v > 0) return 'text-success'
|
||||
if(v < 0) return 'text-error'
|
||||
}
|
||||
if (!key) return '';
|
||||
const v = change24(key);
|
||||
if (v > 0) return 'text-success';
|
||||
if (v < 0) return 'text-error';
|
||||
};
|
||||
|
||||
const update = (m: DebuggerEvent) => {
|
||||
if(m.key === 'validators') {
|
||||
loadAvatars()
|
||||
}
|
||||
}
|
||||
if (m.key === 'validators') {
|
||||
loadAvatars();
|
||||
}
|
||||
};
|
||||
|
||||
const list = computed(() => {
|
||||
return tab.value === 'active' ? staking.validators: unbondList.value
|
||||
return tab.value === 'active' ? staking.validators : unbondList.value;
|
||||
// return staking.validators
|
||||
})
|
||||
});
|
||||
|
||||
const loadAvatars = () => {
|
||||
// fetch avatar from keybase
|
||||
let promise = Promise.resolve()
|
||||
staking.validators.forEach(item => {
|
||||
promise = promise.then(() => new Promise(resolve => {
|
||||
const identity = item.description?.identity
|
||||
if(identity && !avatars.value[identity]){
|
||||
staking.keybase(identity).then(d => {
|
||||
if (Array.isArray(d.them) && d.them.length > 0) {
|
||||
const uri = String(d.them[0]?.pictures?.primary?.url).replace("https://s3.amazonaws.com/keybase_processed_uploads/", "")
|
||||
if(uri) {
|
||||
avatars.value[identity] = uri
|
||||
localStorage.setItem('avatars', JSON.stringify(avatars.value))
|
||||
}
|
||||
// fetch avatar from keybase
|
||||
let promise = Promise.resolve();
|
||||
staking.validators.forEach((item) => {
|
||||
promise = promise.then(
|
||||
() =>
|
||||
new Promise((resolve) => {
|
||||
const identity = item.description?.identity;
|
||||
if (identity && !avatars.value[identity]) {
|
||||
staking.keybase(identity).then((d) => {
|
||||
if (Array.isArray(d.them) && d.them.length > 0) {
|
||||
const uri = String(d.them[0]?.pictures?.primary?.url).replace(
|
||||
'https://s3.amazonaws.com/keybase_processed_uploads/',
|
||||
''
|
||||
);
|
||||
if (uri) {
|
||||
avatars.value[identity] = uri;
|
||||
localStorage.setItem(
|
||||
'avatars',
|
||||
JSON.stringify(avatars.value)
|
||||
);
|
||||
}
|
||||
resolve()
|
||||
})
|
||||
}else{
|
||||
resolve()
|
||||
}
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
staking.$subscribe((m, s)=> {
|
||||
if (Array.isArray(m.events)) {
|
||||
m.events.forEach(x => {
|
||||
update(x)
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
update(m.events)
|
||||
}
|
||||
})
|
||||
const logo = (identity?: string) => {
|
||||
if(!identity) return ''
|
||||
const url = avatars.value[identity] || ''
|
||||
return url.startsWith('http')? url: `https://s3.amazonaws.com/keybase_processed_uploads/${url}`
|
||||
}
|
||||
const rank = function(position: number) {
|
||||
let sum = 0
|
||||
for(let i = 0;i < position; i++) {
|
||||
sum += Number(staking.validators[i]?.delegator_shares)
|
||||
}
|
||||
const percent = (sum / staking.totalPower)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
switch (true) {
|
||||
case tab.value ==='active' && percent < 0.33: return 'error'
|
||||
case tab.value ==='active' && percent < 0.67: return 'warning'
|
||||
default: return 'primary'
|
||||
}
|
||||
}
|
||||
staking.$subscribe((m, s) => {
|
||||
if (Array.isArray(m.events)) {
|
||||
m.events.forEach((x) => {
|
||||
update(x);
|
||||
});
|
||||
} else {
|
||||
update(m.events);
|
||||
}
|
||||
});
|
||||
const logo = (identity?: string) => {
|
||||
if (!identity) return '';
|
||||
const url = avatars.value[identity] || '';
|
||||
return url.startsWith('http')
|
||||
? url
|
||||
: `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
|
||||
};
|
||||
const rank = function (position: number) {
|
||||
let sum = 0;
|
||||
for (let i = 0; i < position; i++) {
|
||||
sum += Number(staking.validators[i]?.delegator_shares);
|
||||
}
|
||||
const percent = sum / staking.totalPower;
|
||||
|
||||
switch (true) {
|
||||
case tab.value === 'active' && percent < 0.33:
|
||||
return 'error';
|
||||
case tab.value === 'active' && percent < 0.67:
|
||||
return 'warning';
|
||||
default:
|
||||
return 'primary';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="tabs tabs-boxed bg-transparent mb-4">
|
||||
<a
|
||||
class="tab text-gray-400"
|
||||
:class="{ 'tab-active': tab === 'active' }"
|
||||
@click="tab = 'active'"
|
||||
>Active</a
|
||||
>
|
||||
<a
|
||||
class="tab text-gray-400"
|
||||
:class="{ 'tab-active': tab === 'inactive' }"
|
||||
@click="tab = 'inactive'"
|
||||
>Inactive</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="text-lg font-semibold">
|
||||
{{ list.length }}/{{ staking.params.max_validators }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<VCard>
|
||||
<VCardTitle class="d-flex justify-space-between">
|
||||
<VBtnToggle v-model="tab" size="small" color="primary">
|
||||
<VBtn value="active" variant="outlined" >Active</VBtn>
|
||||
<VBtn value="inactive" variant="outlined">Inactive</VBtn>
|
||||
</VBtnToggle>
|
||||
<span class="mt-2">{{ list.length }}/{{ staking.params.max_validators }}</span>
|
||||
</VCardTitle>
|
||||
<VCard>
|
||||
<VTable class="text-no-wrap table-header-bg rounded-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
style="width: 3rem;"
|
||||
>#</th>
|
||||
<th scope="col">
|
||||
VALIDATOR
|
||||
</th>
|
||||
<th scope="col" class="text-right">
|
||||
VOTING POWER
|
||||
</th>
|
||||
<th scope="col" class="text-right">
|
||||
24h CHANGES
|
||||
</th>
|
||||
<th scope="col" class="text-right">
|
||||
COMMISSION
|
||||
</th>
|
||||
<th scope="col">
|
||||
ACTIONS
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(v, i) in list"
|
||||
:key="v.operator_address"
|
||||
>
|
||||
<!-- 👉 rank -->
|
||||
<td>
|
||||
<VChip label :color="rank(i)">
|
||||
{{ i + 1 }}
|
||||
</VChip>
|
||||
</td>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width: 3rem">#</th>
|
||||
<th scope="col">VALIDATOR</th>
|
||||
<th scope="col" class="text-right">VOTING POWER</th>
|
||||
<th scope="col" class="text-right">24h CHANGES</th>
|
||||
<th scope="col" class="text-right">COMMISSION</th>
|
||||
<th scope="col">ACTIONS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(v, i) in list" :key="v.operator_address">
|
||||
<!-- 👉 rank -->
|
||||
<td>
|
||||
<VChip label :color="rank(i)">
|
||||
{{ i + 1 }}
|
||||
</VChip>
|
||||
</td>
|
||||
|
||||
<!-- 👉 Validator -->
|
||||
<td>
|
||||
<div class="d-flex align-center overflow-hidden" style="max-width: 400px;">
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
class="me-3"
|
||||
size="34"
|
||||
icon="mdi-help-circle-outline"
|
||||
:image="logo(v.description?.identity)"
|
||||
/>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-sm text-primary">
|
||||
<RouterLink
|
||||
:to="{name: 'chain-staking-validator', params: {validator: v.operator_address}}"
|
||||
class="font-weight-medium user-list-name"
|
||||
>
|
||||
{{ v.description?.moniker }}
|
||||
</RouterLink>
|
||||
|
||||
</h6>
|
||||
<span class="text-xs">{{ v.description?.website || v.description?.identity || '-' }}</span>
|
||||
<!-- 👉 Validator -->
|
||||
<td>
|
||||
<div
|
||||
class="d-flex align-center overflow-hidden"
|
||||
style="max-width: 400px"
|
||||
>
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
class="me-3"
|
||||
size="34"
|
||||
icon="mdi-help-circle-outline"
|
||||
:image="logo(v.description?.identity)"
|
||||
/>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-sm text-primary">
|
||||
<RouterLink
|
||||
:to="{
|
||||
name: 'chain-staking-validator',
|
||||
params: { validator: v.operator_address },
|
||||
}"
|
||||
class="font-weight-medium user-list-name"
|
||||
>
|
||||
{{ v.description?.moniker }}
|
||||
</RouterLink>
|
||||
</h6>
|
||||
<span class="text-xs">{{
|
||||
v.description?.website || v.description?.identity || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</td>
|
||||
|
||||
<!-- 👉 Voting Power -->
|
||||
<td class="text-right">
|
||||
<!-- 👉 Voting Power -->
|
||||
<td class="text-right">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-sm font-weight-medium">
|
||||
{{ format.formatToken( {amount: parseInt(v.tokens).toString(), denom: staking.params.bond_denom }, true, "0,0") }}
|
||||
{{
|
||||
format.formatToken(
|
||||
{
|
||||
amount: parseInt(v.tokens).toString(),
|
||||
denom: staking.params.bond_denom,
|
||||
},
|
||||
true,
|
||||
'0,0'
|
||||
)
|
||||
}}
|
||||
</h6>
|
||||
<span class="text-xs">{{ format.calculatePercent(v.delegator_shares, staking.totalPower) }}</span>
|
||||
<span class="text-xs">{{
|
||||
format.calculatePercent(
|
||||
v.delegator_shares,
|
||||
staking.totalPower
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<!-- 👉 24h Changes -->
|
||||
<td class="text-right text-xs" :class="change24Color(v.consensus_pubkey)">
|
||||
{{ change24Text(v.consensus_pubkey) }} <VChip label v-if="v.jailed" color="error">Jailed</VChip>
|
||||
</td>
|
||||
<!-- 👉 commission -->
|
||||
<td class="text-right">
|
||||
{{ format.formatCommissionRate(v.commission?.commission_rates?.rate) }}
|
||||
</td>
|
||||
<!-- 👉 Action -->
|
||||
<td>
|
||||
{{ 2 }}
|
||||
</td>
|
||||
</td>
|
||||
<!-- 👉 24h Changes -->
|
||||
<td
|
||||
class="text-right text-xs"
|
||||
:class="change24Color(v.consensus_pubkey)"
|
||||
>
|
||||
{{ change24Text(v.consensus_pubkey) }}
|
||||
<VChip label v-if="v.jailed" color="error">Jailed</VChip>
|
||||
</td>
|
||||
<!-- 👉 commission -->
|
||||
<td class="text-right">
|
||||
{{
|
||||
format.formatCommissionRate(
|
||||
v.commission?.commission_rates?.rate
|
||||
)
|
||||
}}
|
||||
</td>
|
||||
<!-- 👉 Action -->
|
||||
<td>
|
||||
{{ 2 }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<VDivider/>
|
||||
<VDivider />
|
||||
<VCardActions class="py-2">
|
||||
<VChip label color="error">Top 33%</VChip> <VChip label color="warning" class="mx-2">Top 67%</VChip>
|
||||
<VChip label color="error">Top 33%</VChip>
|
||||
<VChip label color="warning" class="mx-2">Top 67%</VChip>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<route>
|
||||
@ -236,4 +279,4 @@ const rank = function(position: number) {
|
||||
i18n: 'staking'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
</route>
|
||||
|
||||
@ -1,24 +1,29 @@
|
||||
<script lang="ts" setup>
|
||||
import { useDashboard, LoadingStatus, type ChainConfig } from '@/stores/useDashboard';
|
||||
import {
|
||||
useDashboard,
|
||||
LoadingStatus,
|
||||
type ChainConfig,
|
||||
} from '@/stores/useDashboard';
|
||||
import ChainSummary from '@/components/ChainSummary.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useBlockchain } from '@/stores';
|
||||
|
||||
const dashboard = useDashboard()
|
||||
const dashboard = useDashboard();
|
||||
|
||||
dashboard.$subscribe((mutation, state) => {
|
||||
localStorage.setItem('favorite', JSON.stringify(state.favorite))
|
||||
})
|
||||
const keywords = ref('')
|
||||
localStorage.setItem('favorite', JSON.stringify(state.favorite));
|
||||
});
|
||||
const keywords = ref('');
|
||||
const chains = computed(() => {
|
||||
if (keywords.value) {
|
||||
return Object.values(dashboard.chains).filter((x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1)
|
||||
return Object.values(dashboard.chains).filter(
|
||||
(x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1
|
||||
);
|
||||
} else {
|
||||
return Object.values(dashboard.chains)
|
||||
return Object.values(dashboard.chains);
|
||||
}
|
||||
})
|
||||
const chain = useBlockchain()
|
||||
|
||||
});
|
||||
const chain = useBlockchain();
|
||||
</script>
|
||||
<template>
|
||||
<div class="">
|
||||
@ -29,29 +34,43 @@ const chain = useBlockchain()
|
||||
<h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
|
||||
Ping dashboard
|
||||
</h1>
|
||||
<div class="badge badge-info badge-outline mt-1 text-sm md:mt-8">Beta</div>
|
||||
<div class="badge badge-info badge-outline mt-1 text-sm md:mt-8">
|
||||
Beta
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-base">
|
||||
<p class="mb-1">
|
||||
{{ $t('index.slogan') }}
|
||||
</p>
|
||||
<h2 class="mb-6">
|
||||
Cosmos Ecosystem Blockchains 🚀
|
||||
</h2>
|
||||
<h2 class="mb-6">Cosmos Ecosystem Blockchains 🚀</h2>
|
||||
</div>
|
||||
<div
|
||||
v-if="dashboard.status !== LoadingStatus.Loaded"
|
||||
class="flex justify-center"
|
||||
>
|
||||
<progress class="progress progress-info w-80 h-1"></progress>
|
||||
</div>
|
||||
<div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
|
||||
class="progress progress-info w-80 h-1"></progress></div>
|
||||
|
||||
<VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
|
||||
style="max-width: 300px;" app>
|
||||
<VTextField
|
||||
v-model="keywords"
|
||||
variant="underlined"
|
||||
:placeholder="$t('index.search_placeholder')"
|
||||
style="max-width: 300px"
|
||||
app
|
||||
>
|
||||
<template #append-inner>
|
||||
{{ chains.length }}/{{ dashboard.length }}
|
||||
</template>
|
||||
</VTextField>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
|
||||
<ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
|
||||
<div
|
||||
class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5"
|
||||
>
|
||||
<ChainSummary
|
||||
v-for="(chain, index) in chains"
|
||||
:key="index"
|
||||
:name="chain.chainName"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { defineEmits, ref, watch } from 'vue'
|
||||
import type { Anchor } from 'vuetify/lib/components';
|
||||
import type { I18nLanguage } from '@layouts/types';
|
||||
|
||||
@ -7,7 +8,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
location: 'bottom end',
|
||||
});
|
||||
|
||||
defineEmits<{
|
||||
const emit = defineEmits<{
|
||||
(e: 'change', id: string): void;
|
||||
}>();
|
||||
|
||||
@ -16,30 +17,37 @@ interface Props {
|
||||
location?: Anchor;
|
||||
}
|
||||
|
||||
const { locale } = useI18n({ useScope: 'global' });
|
||||
|
||||
watch(locale, (val) => {
|
||||
let locale = ref(useI18n({ useScope: 'global' }).locale)
|
||||
watch(locale, (val: string) => {
|
||||
document.documentElement.setAttribute('lang', val as string);
|
||||
});
|
||||
|
||||
const currentLang = ref([localStorage.getItem('lang') || 'en']);
|
||||
let currentLang = ref(localStorage.getItem('lang') || 'en');
|
||||
|
||||
function changeLang(lang: string){
|
||||
locale.value = lang
|
||||
currentLang.value = lang
|
||||
emit('change', lang)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dropdown dropdown-end">
|
||||
<div
|
||||
class="dropdown"
|
||||
:class="currentLang === 'ar'?'dropdown-right': 'dropdown-bottom dropdown-end'"
|
||||
>
|
||||
<label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
|
||||
<Icon icon="mdi-translate" style="font-size: 24px" />
|
||||
<Icon icon="mdi-translate" class="text-2xl" />
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
|
||||
>
|
||||
<li v-for="lang in props.languages" :key="lang.i18nLang">
|
||||
<a
|
||||
@click="
|
||||
locale = lang.i18nLang;
|
||||
$emit('change', lang.i18nLang);
|
||||
"
|
||||
class="hover:bg-base-content"
|
||||
:class="{ 'text-primary': currentLang === lang.i18nLang }"
|
||||
@click="changeLang(lang.i18nLang)"
|
||||
>{{ lang.label }}</a
|
||||
>
|
||||
</li>
|
||||
|
||||
@ -6,16 +6,12 @@
|
||||
:root {
|
||||
--text-main: #333;
|
||||
--text-secondary: #4b525d;
|
||||
--bg-card: #fff;
|
||||
--bg-active: #fbfbfc;
|
||||
--bg-hover: #eee;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--text-main: #f7f7f7;
|
||||
--text-secondary: #6f6e84;
|
||||
--bg-card: #28334e;
|
||||
--bg-active: #242b40;
|
||||
--bg-hover: #303044;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,34 +11,30 @@ module.exports = {
|
||||
primary: '#666cff',
|
||||
main: 'var(--text-main)',
|
||||
secondary: 'var(--text-secondary)',
|
||||
card: 'var(--bg-card)',
|
||||
hover: 'var(--bg-hover)',
|
||||
active: 'var(--bg-active)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("daisyui")
|
||||
],
|
||||
plugins: [require('daisyui')],
|
||||
daisyui: {
|
||||
themes: [
|
||||
{
|
||||
myTheme: {
|
||||
info: "#666CFF",
|
||||
}
|
||||
},
|
||||
{
|
||||
light: {
|
||||
...require("daisyui/src/colors/themes")["[data-theme=light]"],
|
||||
info: "#666CFF",
|
||||
}
|
||||
...require('daisyui/src/colors/themes')['[data-theme=light]'],
|
||||
primary: '#666cff',
|
||||
info: '#666CFF',
|
||||
'base-content': '#e9eaeb'
|
||||
},
|
||||
},
|
||||
{
|
||||
dark: {
|
||||
...require("daisyui/src/colors/themes")["[data-theme=dark]"],
|
||||
info: "#666CFF",
|
||||
}
|
||||
...require('daisyui/src/colors/themes')['[data-theme=dark]'],
|
||||
primary: '#666cff',
|
||||
info: '#666CFF',
|
||||
'base-100': '#2a334c',
|
||||
'base-content': '#373f57'
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user