forked from cerc-io/cosmos-explorer
improve IBC
This commit is contained in:
liangping
parent
8bce70c582
commit
7fe8a96050
80
src/modules/[chain]/ibc/connection.vue
Normal file
80
src/modules/[chain]/ibc/connection.vue
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import PaginationBar from '@/components/PaginationBar.vue';
|
||||||
|
import { useBlockchain, useFormatter } from '@/stores';
|
||||||
|
import { PageRequest, type Connection, type Pagination } from '@/types';
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps(['chain']);
|
||||||
|
const chainStore = useBlockchain();
|
||||||
|
const list = ref([] as Connection[]);
|
||||||
|
const pageRequest = ref(new PageRequest())
|
||||||
|
const pageResponse = ref({} as Pagination)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
pageload(1)
|
||||||
|
});
|
||||||
|
|
||||||
|
function pageload(p: number) {
|
||||||
|
pageRequest.value.setPage(p)
|
||||||
|
chainStore.rpc.getIBCConnections(pageRequest.value).then((x) => {
|
||||||
|
list.value = x.connections;
|
||||||
|
pageResponse.value = x.pagination
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function color(v: string) {
|
||||||
|
if (v && v.indexOf('_OPEN') > -1) {
|
||||||
|
return 'success';
|
||||||
|
}
|
||||||
|
return 'warning';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
|
||||||
|
<h2 class="card-title py-4">IBC Connections</h2>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="">
|
||||||
|
<table class="table table-compact w-full table-zebra">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="py-3">Connection Id</th>
|
||||||
|
<th class="py-3">Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(v, index) in list" :key="index">
|
||||||
|
<td class="py-2">
|
||||||
|
<RouterLink :to="`/${chain}/ibc/connection/${v.id}`" class="text-primary">
|
||||||
|
{{ v.id }}
|
||||||
|
</RouterLink>
|
||||||
|
</td>
|
||||||
|
<td class="py-2">
|
||||||
|
<div class="text-xs truncate relative py-[2px] px-3 rounded-full w-fit"
|
||||||
|
:class="`text-${color(v.state)}`">
|
||||||
|
<span class="inset-x-0 inset-y-0 opacity-10 absolute" :class="`bg-${color(v.state)}`"></span>
|
||||||
|
{{ v.state }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="grow overflow-auto">
|
||||||
|
<router-view :key="$route.fullPath"></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<route>
|
||||||
|
{
|
||||||
|
meta: {
|
||||||
|
i18n: 'ibc',
|
||||||
|
order: 9
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
@ -11,6 +11,7 @@ const baseStore = useBaseStore();
|
|||||||
const conn = ref({} as Connection);
|
const conn = ref({} as Connection);
|
||||||
const clientState = ref({} as { client_id: string; client_state: ClientState });
|
const clientState = ref({} as { client_id: string; client_state: ClientState });
|
||||||
const channels = ref([] as Channel[]);
|
const channels = ref([] as Channel[]);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.connection_id) {
|
if (props.connection_id) {
|
||||||
chainStore.rpc.getIBCConnectionsById(props.connection_id).then((x) => {
|
chainStore.rpc.getIBCConnectionsById(props.connection_id).then((x) => {
|
||||||
@ -41,15 +42,13 @@ function color(v: string) {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="card card-bordered border-primary ml-4 rounded-t-md">
|
||||||
<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 ">
|
||||||
<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 text-center lg:!grid-cols-3">
|
<dl class="grid grid-cols-1 gap-x-6 text-center lg:!grid-cols-3">
|
||||||
<div class="mx-auto flex items-center">
|
<div class="mx-auto flex items-center">
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div class="order-first text-3xl font-semibold tracking-tight text-main mb-1">
|
||||||
class="order-first text-3xl font-semibold tracking-tight text-main mb-1"
|
|
||||||
>
|
|
||||||
{{ baseStore.latest?.block?.header?.chain_id }}
|
{{ baseStore.latest?.block?.header?.chain_id }}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
@ -60,18 +59,13 @@ function color(v: string) {
|
|||||||
<div class="mx-auto flex items-center">
|
<div class="mx-auto flex items-center">
|
||||||
<div>
|
<div>
|
||||||
<Icon icon="mdi:arrow-left-right" class="text-4xl mx-auto" />
|
<Icon icon="mdi:arrow-left-right" class="text-4xl mx-auto" />
|
||||||
<div
|
|
||||||
class="bg-success w-24 h-1 rounded-sm mt-1 mb-3 opacity-60"
|
|
||||||
></div>
|
|
||||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
{{ conn.state }}
|
{{ conn.state }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx-auto">
|
<div class="mx-auto">
|
||||||
<div
|
<div class="order-first text-3xl font-semibold tracking-tight text-main mb-2">
|
||||||
class="order-first text-3xl font-semibold tracking-tight text-main mb-2"
|
|
||||||
>
|
|
||||||
{{ clientState.client_state?.chain_id }}
|
{{ clientState.client_state?.chain_id }}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
@ -138,9 +132,9 @@ function color(v: string) {
|
|||||||
</div>
|
</div>
|
||||||
</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 mb-4 shadow overflow-hidden">
|
||||||
<h2 class="card-title">Channels</h2>
|
<h2 class="card-title">Channels</h2>
|
||||||
<div class="overflow-x-auto"></div>
|
<div class="overflow-auto">
|
||||||
<table class="table w-full mt-4">
|
<table class="table w-full mt-4">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -168,14 +162,8 @@ function color(v: string) {
|
|||||||
<td>{{ v.version }}</td>
|
<td>{{ v.version }}</td>
|
||||||
<td>{{ v.ordering }}</td>
|
<td>{{ v.ordering }}</td>
|
||||||
<td>
|
<td>
|
||||||
<div
|
<div class="text-xs truncate relative py-2 px-4 rounded-full w-fit" :class="`text-${color(v.state)}`">
|
||||||
class="text-xs truncate relative py-2 px-4 rounded-full w-fit"
|
<span class="inset-x-0 inset-y-0 opacity-10 absolute" :class="`bg-${color(v.state)}`"></span>
|
||||||
:class="`text-${color(v.state)}`"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="inset-x-0 inset-y-0 opacity-10 absolute"
|
|
||||||
:class="`bg-${color(v.state)}`"
|
|
||||||
></span>
|
|
||||||
{{ v.state }}
|
{{ v.state }}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -184,4 +172,5 @@ function color(v: string) {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
6
src/modules/[chain]/ibc/connection/index.vue
Normal file
6
src/modules/[chain]/ibc/connection/index.vue
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import router from '@/router'
|
||||||
|
const props = defineProps(['chain']);
|
||||||
|
console.log("props:", props)
|
||||||
|
router.push(`/${props.chain}/ibc/connection/connection-0`)
|
||||||
|
</script>
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import PaginationBar from '@/components/PaginationBar.vue';
|
|
||||||
import { useBlockchain, useFormatter } from '@/stores';
|
|
||||||
import { PageRequest, type Connection, type Pagination } from '@/types';
|
|
||||||
import { onMounted } from 'vue';
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps(['chain']);
|
|
||||||
const chainStore = useBlockchain();
|
|
||||||
const list = ref([] as Connection[]);
|
|
||||||
const pageRequest = ref(new PageRequest())
|
|
||||||
const pageResponse = ref({} as Pagination)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
pageload(1)
|
|
||||||
});
|
|
||||||
|
|
||||||
function pageload(p: number) {
|
|
||||||
pageRequest.value.setPage(p)
|
|
||||||
chainStore.rpc.getIBCConnections(pageRequest.value).then((x) => {
|
|
||||||
list.value = x.connections;
|
|
||||||
pageResponse.value = x.pagination
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function color(v: string) {
|
|
||||||
if (v && v.indexOf('_OPEN') > -1) {
|
|
||||||
return 'success';
|
|
||||||
}
|
|
||||||
return 'warning';
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
|
|
||||||
<h2 class="card-title">IBC Connections</h2>
|
|
||||||
<div class="overflow-x-auto mt-4">
|
|
||||||
<table class="table table-compact w-full table-zebra">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="py-3">Connection Id</th>
|
|
||||||
<th class="py-3">Connection</th>
|
|
||||||
<th class="py-3">Delay Period</th>
|
|
||||||
<th class="py-3">State</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="(v, index) in list" :key="index">
|
|
||||||
<td class="py-2">
|
|
||||||
<RouterLink :to="`/${chain}/ibc/${v.id}`" class="text-primary">
|
|
||||||
{{ v.id }}
|
|
||||||
</RouterLink>
|
|
||||||
</td>
|
|
||||||
<td class="py-2">
|
|
||||||
{{ v.client_id }} {{ v.id }} <br />
|
|
||||||
{{ v.counterparty.client_id }}
|
|
||||||
{{ v.counterparty.connection_id }}
|
|
||||||
</td>
|
|
||||||
<td class="py-2">{{ v.delay_period }}</td>
|
|
||||||
<td class="py-2">
|
|
||||||
<div
|
|
||||||
class="text-xs truncate relative py-[2px] px-3 rounded-full w-fit"
|
|
||||||
:class="`text-${color(v.state)}`"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="inset-x-0 inset-y-0 opacity-10 absolute"
|
|
||||||
:class="`bg-${color(v.state)}`"
|
|
||||||
></span>
|
|
||||||
{{ v.state }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<route>
|
|
||||||
{
|
|
||||||
meta: {
|
|
||||||
i18n: 'ibc',
|
|
||||||
order: 9
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</route>
|
|
||||||
Loading…
Reference in New Issue
Block a user