feat: block ui
This commit is contained in:
Alisa | Side.one
parent
45eb49175c
commit
3f42e542f5
@ -1,58 +1,67 @@
|
||||
<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,80 @@ 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 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>
|
||||
</template>
|
||||
|
||||
<route>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user