feat: tx page ui refactor

src/modules/[chain]/tx/[hash].vue

@@ -25,10 +25,14 @@ const messages = computed(() => {
 </script>
 <template>
   <div>
-    <VCard v-if="tx.tx_response" title="Summary">
+    <div
-      <VCardItem class="pt-0">
+      v-if="tx.tx_response"
-        <VTable>
+      class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
-          <tbody>
+    >
+      <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>
+        </table>
-      </VCardItem>
+      </div>
-    </VCard>
 
-    <VCard :title="`Messages: (${messages.length})`" class="my-5">
+    </div>
-      <VCardItem class="pt-0" style="border-top: 2px dotted gray">
+
-        <div v-for="(msg, i) in messages">
+    <div
-          <div><DynamicComponent :value="msg" /></div>
+      v-if="tx.tx_response"
-        </div>
+      class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
-        <div v-if="messages.length === 0">No messages</div>
+    >
-      </VCardItem>
+      <h2 class="card-title truncate mb-2">Messages: ({{messages.length}})</h2>
-    </VCard>
+      <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>