add blocks
This commit is contained in:
liangping
parent
ff621bd67c
commit
e92630e943
@ -3,6 +3,7 @@ import Countdown from '@chenfengyuan/vue-countdown';
|
||||
|
||||
const props = defineProps({
|
||||
time: { type: Number },
|
||||
css: { type: String },
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
@ -11,6 +12,9 @@ const props = defineProps({
|
||||
:time="time > 0 ? time : 0"
|
||||
v-slot="{ days, hours, minutes, seconds }"
|
||||
>
|
||||
{{ days }} days {{ hours }} hours {{ minutes }} minutes {{ seconds }} seconds
|
||||
<span class="text-primary font-bold" :class="css">{{ days }}</span> days
|
||||
<span class="text-primary font-bold" :class="css">{{ hours }}</span> hours
|
||||
<span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes
|
||||
<span class="text-primary font-bold" :class="css">{{ seconds }}</span> seconds
|
||||
</Countdown>
|
||||
</template>
|
||||
|
||||
@ -19,15 +19,15 @@ const header = computed(() => {
|
||||
</script>
|
||||
<template>
|
||||
<div class="overflow-auto p-4 " :class=" value.length > 5 ? 'h-[500px]': ''">
|
||||
<table class="table table-compact w-full">
|
||||
<table class="table table-compact table-pin-rows w-full">
|
||||
<thead v-if="thead">
|
||||
<tr>
|
||||
<th
|
||||
v-for="(item, index) in header"
|
||||
:key="index"
|
||||
class="text-left text-capitalize"
|
||||
class="text-left capitalize"
|
||||
>
|
||||
{{ item }}
|
||||
{{ item }} -
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -1,24 +1,50 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watchEffect } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import TxsElement from '@/components/dynamic/TxsElement.vue';
|
||||
import { useBlockModule } from './block';
|
||||
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
||||
import { computed } from '@vue/reactivity';
|
||||
import { onBeforeRouteUpdate } from 'vue-router';
|
||||
import { useBaseStore } from '@/stores';
|
||||
import { ref } from 'vue';
|
||||
import { useBaseStore, useFormatter } from '@/stores';
|
||||
import type { Block } from '@/types';
|
||||
import Countdown from '@/components/Countdown.vue';
|
||||
|
||||
const props = defineProps(['height', 'chain']);
|
||||
|
||||
const store = useBaseStore();
|
||||
const tab = ref('summary');
|
||||
const format = useFormatter()
|
||||
const current = ref({} as Block)
|
||||
store.fetchBlock(props.height).then(x => current.value = x)
|
||||
|
||||
const height = computed(() => {
|
||||
return Number(current.value.block?.header?.height || props.height || 0);
|
||||
});
|
||||
|
||||
const isFutureBlock = computed({
|
||||
get: () => {
|
||||
const latest = store.latest?.block?.header.height
|
||||
const isFuture = latest ? Number(props.height) > Number(latest): true
|
||||
if(!isFuture) store.fetchBlock(props.height).then(x => current.value = x)
|
||||
return isFuture
|
||||
},
|
||||
set: val => {
|
||||
console.log(val)
|
||||
}
|
||||
})
|
||||
|
||||
const remainingBlocks = computed(() => {
|
||||
const latest = store.latest?.block?.header.height
|
||||
return latest ? Number(props.height) - Number(latest) : 0
|
||||
})
|
||||
|
||||
const estimateTime = computed(() => {
|
||||
const seconds = remainingBlocks.value * Number((store.blocktime / 1000).toFixed()) * 1000
|
||||
return seconds
|
||||
})
|
||||
|
||||
const estimateDate = computed(() => {
|
||||
return new Date(new Date().getTime() + estimateTime.value)
|
||||
})
|
||||
|
||||
onBeforeRouteUpdate(async (to, from, next) => {
|
||||
if (from.path !== to.path) {
|
||||
store.fetchBlock(String(to.params.height)).then(x => current.value = x);
|
||||
@ -28,42 +54,62 @@ onBeforeRouteUpdate(async (to, from, next) => {
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title flex flex-row justify-between">
|
||||
<p class="">#{{ current.block?.header?.height }}</p>
|
||||
<div class="flex" v-if="props.height">
|
||||
<RouterLink
|
||||
:to="`/${store.blockchain.chainName}/block/${height - 1}`"
|
||||
class="btn btn-primary btn-sm p-1 text-2xl mr-2"
|
||||
>
|
||||
<Icon icon="mdi-arrow-left" class="w-full h-full" />
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
:to="`/${store.blockchain.chainName}/block/${height + 1}`"
|
||||
class="btn btn-primary btn-sm p-1 text-2xl"
|
||||
>
|
||||
<Icon icon="mdi-arrow-right" class="w-full h-full" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
</h2>
|
||||
<div>
|
||||
<DynamicComponent :value="current.block_id" />
|
||||
<div v-if="isFutureBlock" class="text-center pt-28">
|
||||
<Countdown :time="estimateTime" css="text-5xl font-sans md:mx-5"/>
|
||||
<div class="my-5">Estimated Time: {{ format.toLocaleDate(estimateDate) }}</div>
|
||||
<div class="pt-10 flex justify-center">
|
||||
<table class="table table-compact rounded-lg">
|
||||
<tbody>
|
||||
<tr class="hover">
|
||||
<td>Countdown For Block:</td><td class="text-right"><span class=" ml-40">#{{ height }}</span></td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td>Current Height:</td><td class="text-right">#{{ store.latest?.block?.header.height }}</td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td>Remaining Blocks:</td><td class="text-right">{{ remainingBlocks }}</td>
|
||||
</tr>
|
||||
<tr class="hover">
|
||||
<td>Average Block Time:</td><td class="text-right">{{ (store.blocktime/1000).toFixed(1) }}s</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title flex flex-row justify-between">
|
||||
<p class="">#{{ current.block?.header?.height }}</p>
|
||||
<div class="flex" v-if="props.height">
|
||||
<RouterLink :to="`/${store.blockchain.chainName}/block/${height - 1}`"
|
||||
class="btn btn-primary btn-sm p-1 text-2xl mr-2">
|
||||
<Icon icon="mdi-arrow-left" class="w-full h-full" />
|
||||
</RouterLink>
|
||||
<RouterLink :to="`/${store.blockchain.chainName}/block/${height + 1}`"
|
||||
class="btn btn-primary btn-sm p-1 text-2xl">
|
||||
<Icon icon="mdi-arrow-right" class="w-full h-full" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
</h2>
|
||||
<div>
|
||||
<DynamicComponent :value="current.block_id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title flex flex-row justify-between">Block Header</h2>
|
||||
<DynamicComponent :value="current.block?.header" />
|
||||
</div>
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title flex flex-row justify-between">Block Header</h2>
|
||||
<DynamicComponent :value="current.block?.header" />
|
||||
</div>
|
||||
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title flex flex-row justify-between">Transactions</h2>
|
||||
<TxsElement :value="current.block?.data?.txs" />
|
||||
</div>
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
|
||||
<h2 class="card-title flex flex-row justify-between">Transactions</h2>
|
||||
<TxsElement :value="current.block?.data?.txs" />
|
||||
</div>
|
||||
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
|
||||
<h2 class="card-title flex flex-row justify-between">Last Commit</h2>
|
||||
<DynamicComponent :value="current.block?.last_commit" />
|
||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
|
||||
<h2 class="card-title flex flex-row justify-between">Last Commit</h2>
|
||||
<DynamicComponent :value="current.block?.last_commit" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -27,7 +27,8 @@ export const useBaseStore = defineStore('baseStore', {
|
||||
const diff = dayjs(this.latest.block?.header?.time).diff(
|
||||
this.earlest.block?.header?.time
|
||||
);
|
||||
return diff;
|
||||
const blocks = Number(this.latest.block.header.height) - Number(this.earlest.block.header.height)
|
||||
return diff / (blocks);
|
||||
}
|
||||
}
|
||||
return 6000;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user