feat: Ibc UI refactor

This commit is contained in:
Alisa | Side.one 2023-05-06 17:22:10 +08:00
parent ebf2b61528
commit ed43d109f0
3 changed files with 20 additions and 29 deletions

View File

@ -60,7 +60,7 @@ onBeforeRouteUpdate(async (to, from, next) => {
</div> </div>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<h2 class="card-title flex flex-row justify-between"> <h2 class="card-title flex flex-row justify-between">
Last Commit Last Commit
</h2> </h2>

View File

@ -303,21 +303,5 @@ const processList = computed(()=>{
</table> </table>
<VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn> <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
</div> </div>
<!-- <VCard>
<VCardItem>
<VCardTitle>
Votes
</VCardTitle>
<VTable>
<tbody>
<tr v-for="x in votes">
<td>{{ x.voter }}</td>
<td>{{ x.option }}</td>
</tr>
</tbody>
</VTable>
<VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
</VCardItem>
</VCard> -->
</div> </div>
</template> </template>

View File

@ -41,7 +41,7 @@ function color(v: string) {
</script> </script>
<template> <template>
<div> <div>
<div class="bg-white py-24 sm:py-32"> <div class="px-4 pt-3 pb-4 bg-base-100 rounded mb-4 shadow py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:px-8">
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3"> <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
<div class="mx-auto flex max-w-xs flex-col gap-y-4"> <div class="mx-auto flex max-w-xs flex-col gap-y-4">
@ -60,9 +60,10 @@ function color(v: string) {
</dl> </dl>
</div> </div>
</div> </div>
<VCard class="my-2">
<VCardTitle>IBC Client State</VCardTitle> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<VCardText> <h2 class="card-title">IBC Client State </h2>
<div class="text-sm">
<br>update after expiry: {{ clientState.client_state?.allow_update_after_expiry }} <br>update after expiry: {{ clientState.client_state?.allow_update_after_expiry }}
<br>allow_update_after_misbehaviour: {{ clientState.client_state?.allow_update_after_misbehaviour }} <br>allow_update_after_misbehaviour: {{ clientState.client_state?.allow_update_after_misbehaviour }}
<br>trust_level: {{ clientState.client_state?.trust_level?.numerator }}/{{ clientState.client_state?.trust_level?.denominator }} <br>trust_level: {{ clientState.client_state?.trust_level?.numerator }}/{{ clientState.client_state?.trust_level?.denominator }}
@ -73,14 +74,20 @@ function color(v: string) {
<br>type: {{ clientState.client_state?.['@type'] }} <br>type: {{ clientState.client_state?.['@type'] }}
<br>upgrade_path: {{ clientState.client_state?.upgrade_path }} <br>upgrade_path: {{ clientState.client_state?.upgrade_path }}
<br> {{ clientState.client_state?.max_clock_drift }} <br> {{ clientState.client_state?.max_clock_drift }}
</VCardText> </div>
</VCard> </div>
<VCard class="my-2"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<VCardTitle>Channels</VCardTitle> <h2 class="card-title">Channels </h2>
<VTable> <table class="table w-full mt-4">
<thead> <thead>
<tr><th>Channel Id</th><th>Port Id</th><th>Counterparty</th><th>Hops</th><th>Version</th><th>Ordering</th><th>State</th></tr> <tr><th>Channel Id</th>
<th>Port Id</th>
<th>Counterparty</th>
<th>Hops</th>
<th>Version</th>
<th>Ordering</th>
<th>State</th></tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="v in channels"> <tr v-for="v in channels">
@ -93,7 +100,7 @@ function color(v: string) {
<td><VChip :color="color(v.state)">{{ v.state }}</VChip></td> <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
</tr> </tr>
</tbody> </tbody>
</VTable> </table>
</VCard> </div>
</div> </div>
</template> </template>