feat: tx page ui refactor

This commit is contained in:
Alisa | Side.one 2023-05-12 20:58:22 +08:00
parent f6d07b7515
commit c02c39cd0f

View File

@ -25,10 +25,14 @@ const messages = computed(() => {
</script>
<template>
<div>
<VCard v-if="tx.tx_response" title="Summary">
<VCardItem class="pt-0">
<VTable>
<tbody>
<div
v-if="tx.tx_response"
class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
>
<h2 class="card-title truncate mb-2">Summary</h2>
<div class="overflow-auto-x">
<table class="table text-sm">
<tbody>
<tr>
<td>Tx Hash</td>
<td>{{ tx.tx_response.txhash }}</td>
@ -82,23 +86,31 @@ const messages = computed(() => {
<td>{{ tx.tx.body.memo }}</td>
</tr>
</tbody>
</VTable>
</VCardItem>
</VCard>
</table>
</div>
<VCard :title="`Messages: (${messages.length})`" class="my-5">
<VCardItem class="pt-0" style="border-top: 2px dotted gray">
<div v-for="(msg, i) in messages">
<div><DynamicComponent :value="msg" /></div>
</div>
<div v-if="messages.length === 0">No messages</div>
</VCardItem>
</VCard>
</div>
<div
v-if="tx.tx_response"
class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
>
<h2 class="card-title truncate mb-2">Messages: ({{messages.length}})</h2>
<div class="divider"></div>
<div v-for="(msg, i) in messages">
<div><DynamicComponent :value="msg" /></div>
</div>
<div v-if="messages.length === 0">No messages</div>
</div>
<div
v-if="tx.tx_response"
class="bg-base-100 px-4 pt-3 pb-4 rounded shadow"
>
<h2 class="card-title truncate mb-2">JSON</h2>
<vue-json-pretty :data="tx" :deep="3" />
</div>
<VCard title="JSON">
<VCardItem class="pt-0">
<vue-json-pretty :data="tx" :deep="3" />
</VCardItem>
</VCard>
</div>
</template>