feat: block ui
This commit is contained in:
Alisa | Side.one
parent
45eb49175c
commit
3f42e542f5
@ -1,58 +1,67 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import TxsElement from '@/components/dynamic/TxsElement.vue';
|
import TxsElement from '@/components/dynamic/TxsElement.vue';
|
||||||
import { useBlockModule } from './block'
|
import { useBlockModule } from './block';
|
||||||
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
||||||
import { computed } from '@vue/reactivity';
|
import { computed } from '@vue/reactivity';
|
||||||
import { onBeforeRouteUpdate } from 'vue-router';
|
import { onBeforeRouteUpdate } from 'vue-router';
|
||||||
const props = defineProps(["height", "chain"]);
|
const props = defineProps(['height', 'chain']);
|
||||||
|
|
||||||
const store = useBlockModule()
|
const store = useBlockModule()
|
||||||
store.fetchBlock(props.height)
|
const store = useBlockModule();
|
||||||
const tab = ref('summary')
|
store.fetchBlock(props.height);
|
||||||
|
const tab = ref('summary');
|
||||||
|
|
||||||
const height = computed(() => {
|
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) => {
|
onBeforeRouteUpdate(async (to, from, next) => {
|
||||||
if (from.path !== to.path) {
|
if (from.path !== to.path) {
|
||||||
store.fetchBlock(String(to.params.height))
|
store.fetchBlock(String(to.params.height));
|
||||||
next()
|
next();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<VCard>
|
<VCard>
|
||||||
<VCardTitle class="d-flex justify-space-between">
|
<VCardTitle class="d-flex justify-space-between">
|
||||||
<span class="mt-2">#{{ store.current.block?.header?.height }}</span>
|
<span class="mt-2">#{{ store.current.block?.header?.height }}</span>
|
||||||
<span v-if="props.height" class="mt-2">
|
<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
|
||||||
<VBtn size="32" :to="`/${store.blockchain.chainName}/block/${height + 1}`"><VIcon icon="mdi-arrow-right"/></VBtn>
|
size="32"
|
||||||
</span>
|
:to="`/${store.blockchain.chainName}/block/${height - 1}`"
|
||||||
</VCardTitle>
|
class="mr-2"
|
||||||
<VCardItem class="pt-0">
|
><VIcon icon="mdi-arrow-left"
|
||||||
<DynamicComponent :value="store.current.block_id"/>
|
/></VBtn>
|
||||||
</VCardItem>
|
<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>
|
||||||
|
|
||||||
<VCard title="Block Header" class="my-5">
|
<VCard title="Block Header" class="my-5">
|
||||||
<VCardItem class="pt-0">
|
<VCardItem class="pt-0">
|
||||||
<DynamicComponent :value="store.current.block?.header"/>
|
<DynamicComponent :value="store.current.block?.header" />
|
||||||
</VCardItem>
|
</VCardItem>
|
||||||
</VCard>
|
</VCard>
|
||||||
|
|
||||||
<VCard title="Transactions">
|
<VCard title="Transactions">
|
||||||
<VCardItem class="pt-0">
|
<VCardItem class="pt-0">
|
||||||
<TxsElement :value="store.current.block?.data?.txs"/>
|
<TxsElement :value="store.current.block?.data?.txs" />
|
||||||
</VCardItem>
|
</VCardItem>
|
||||||
</VCard>
|
</VCard>
|
||||||
|
|
||||||
<VCard title="Last Commit" class="mt-5">
|
<VCard title="Last Commit" class="mt-5">
|
||||||
<VCardItem class="pt-0">
|
<VCardItem class="pt-0">
|
||||||
<DynamicComponent :value="store.current.block?.last_commit"/>
|
<DynamicComponent :value="store.current.block?.last_commit" />
|
||||||
</VCardItem>
|
</VCardItem>
|
||||||
</VCard>
|
</VCard>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -11,76 +11,80 @@ const tab = ref('blocks');
|
|||||||
const format = useFormatter();
|
const format = useFormatter();
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<VCard>
|
<div class="tabs tabs-boxed bg-transparent mb-4">
|
||||||
<VCardTitle class="d-flex justify-space-between">
|
<a
|
||||||
<VTabs v-model="tab">
|
class="tab text-gray-400 uppercase"
|
||||||
<VTab value="blocks">Blocks</VTab>
|
:class="{ 'tab-active': tab === 'blocks' }"
|
||||||
<VTab value="transactions">Transactions</VTab>
|
@click="tab = 'blocks'"
|
||||||
</VTabs>
|
>Blocks</a
|
||||||
</VCardTitle>
|
>
|
||||||
<VWindow v-model="tab">
|
<a
|
||||||
<VWindowItem value="blocks">
|
class="tab text-gray-400 uppercase"
|
||||||
<VTable>
|
:class="{ 'tab-active': tab === 'transactions' }"
|
||||||
<thead>
|
@click="tab = 'transactions'"
|
||||||
<tr>
|
>Transactions</a
|
||||||
<th>Height</th>
|
>
|
||||||
<th>Hash</th>
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<VCardItem>
|
<div v-if="tab === 'blocks'" class="bg-base-100 rounded">
|
||||||
<v-alert
|
<VTable>
|
||||||
type="info"
|
<thead>
|
||||||
text="Only show txs in recent blocks"
|
<tr>
|
||||||
variant="tonal"
|
<th>Height</th>
|
||||||
></v-alert>
|
<th>Hash</th>
|
||||||
</VCardItem>
|
<th>Proposer</th>
|
||||||
</VWindowItem>
|
<th>Txs</th>
|
||||||
</VWindow>
|
<th>Time</th>
|
||||||
<VCardActions> </VCardActions>
|
</tr>
|
||||||
</VCard>
|
</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>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<route>
|
<route>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user