zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

feat: ibc

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-15 18:09:17 +08:00
parent dade4c49b8
commit f50e1c12bf
2 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/modules/[chain]/ibc/[connection_id].vue
View File

@ -3,6 +3,7 @@ import { useBaseStore, useBlockchain } from '@/stores';
import type { Connection, ClientState, Channel } from '@/types'; import type { Connection, ClientState, Channel } from '@/types';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { ref } from 'vue'; import { ref } from 'vue';
import { Icon } from '@iconify/vue';
const props = defineProps(['chain', 'connection_id']); const props = defineProps(['chain', 'connection_id']);
const chainStore = useBlockchain(); const chainStore = useBlockchain();
@ -43,36 +44,39 @@ function color(v: string) {
<div> <div>
<div class="px-4 pt-3 pb-4 bg-base-100 rounded mb-4 shadow 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 <dl class="grid grid-cols-1 gap-x-8 text-center lg:grid-cols-3">
class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3" <div class="mx-auto flex items-center">
> <div>
<div class="mx-auto flex max-w-xs flex-col gap-y-4"> <div
<dt class="text-base leading-7 text-gray-600"> class="order-first text-3xl font-semibold tracking-tight text-main mb-1"
{{ conn.client_id }} {{ props.connection_id }} >
</dt> {{ baseStore.latest?.block?.header?.chain_id }}
<dd </div>
class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl" <div class="text-sm text-gray-500 dark:text-gray-400">
> {{ conn.client_id }} {{ props.connection_id }}
{{ baseStore.latest?.block?.header?.chain_id }} </div>
</dd> </div>
</div> </div>
<div class="mx-auto flex max-w-xs flex-col gap-y-4"> <div class="mx-auto flex items-center">
<dt class="text-base leading-7 text-gray-600">{{ conn.state }}</dt> <div>
<dd <Icon icon="mdi:arrow-left-right" class="text-4xl mx-auto" />
class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl" <div
> class="bg-success w-24 h-1 rounded-sm mt-1 mb-3 opacity-60"
&lt;&gt;<VProgressLinear class="w-100" color="success" /> ></div>
</dd> <div class="text-sm text-gray-500 dark:text-gray-400">
{{ conn.state }}
</div>
</div>
</div> </div>
<div class="mx-auto flex max-w-xs flex-col gap-y-4"> <div class="mx-auto">
<dt class="text-base leading-7 text-gray-600"> <div
{{ conn.counterparty?.connection_id }} {{ clientState.client_id }} class="order-first text-3xl font-semibold tracking-tight text-main mb-2"
</dt>
<dd
class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
> >
{{ clientState.client_state?.chain_id }} {{ clientState.client_state?.chain_id }}
</dd> </div>
<div class="text-sm text-gray-500 dark:text-gray-400">
{{ conn.counterparty?.connection_id }} {{ clientState.client_id }}
</div>
</div> </div>
</dl> </dl>
</div> </div>
@ -106,7 +110,7 @@ function color(v: string) {
<table class="table w-full mt-4"> <table class="table w-full mt-4">
<thead> <thead>
<tr> <tr>
<th style="position: relative; z-index: 2;">Channel Id</th> <th style="position: relative; z-index: 2">Channel Id</th>
<th>Port Id</th> <th>Port Id</th>
<th>Counterparty</th> <th>Counterparty</th>
<th>Hops</th> <th>Hops</th>

28
src/modules/[chain]/ibc/index.vue
View File

@ -25,31 +25,31 @@ function color(v: string) {
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<h2 class="card-title">IBC Connections</h2> <h2 class="card-title">IBC Connections</h2>
<div class="overflow-x-auto mt-4"> <div class="overflow-x-auto mt-4">
<table class="table w-full"> <table class="table w-full table-zebra">
<thead> <thead>
<tr> <tr>
<th style="position: relative; z-index: 2;">Connection Id</th> <th class="py-3">Connection Id</th>
<th>Connection</th> <th class="py-3">Connection</th>
<th>Delay Period</th> <th class="py-3">Delay Period</th>
<th>State</th> <th class="py-3">State</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="v in list"> <tr v-for="(v, index) in list" :key="index">
<td> <td class="py-2">
<RouterLink :to="`/${chain}/ibc/${v.id}`">{{ <RouterLink :to="`/${chain}/ibc/${v.id}`" class="text-primary">
v.id {{ v.id }}
}}</RouterLink> </RouterLink>
</td> </td>
<td> <td class="py-2">
{{ v.client_id }} {{ v.id }} <br /> {{ v.client_id }} {{ v.id }} <br />
{{ v.counterparty.client_id }} {{ v.counterparty.client_id }}
{{ v.counterparty.connection_id }} {{ v.counterparty.connection_id }}
</td> </td>
<td>{{ v.delay_period }}</td> <td class="py-2">{{ v.delay_period }}</td>
<td> <td class="py-2">
<div <div
class="text-xs truncate relative py-2 px-4 rounded-full w-fit" class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
:class="`text-${color(v.state)}`" :class="`text-${color(v.state)}`"
> >
<span <span