From 7fe8a9605078f33a43e644be7f56df9a0ccfb4bf Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Tue, 30 May 2023 16:51:40 +0800
Subject: [PATCH] improve IBC

---
 src/modules/[chain]/ibc/connection.vue        | 80 +++++++++++++++
 .../ibc/{ => connection}/[connection_id].vue  | 99 +++++++++----------
 src/modules/[chain]/ibc/connection/index.vue  |  6 ++
 src/modules/[chain]/ibc/index.vue             | 88 -----------------
 4 files changed, 130 insertions(+), 143 deletions(-)
 create mode 100644 src/modules/[chain]/ibc/connection.vue
 rename src/modules/[chain]/ibc/{ => connection}/[connection_id].vue (69%)
 create mode 100644 src/modules/[chain]/ibc/connection/index.vue
 delete mode 100644 src/modules/[chain]/ibc/index.vue

diff --git a/src/modules/[chain]/ibc/connection.vue b/src/modules/[chain]/ibc/connection.vue
new file mode 100644
index 00000000..09356a6f
--- /dev/null
+++ b/src/modules/[chain]/ibc/connection.vue
@@ -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>
diff --git a/src/modules/[chain]/ibc/[connection_id].vue b/src/modules/[chain]/ibc/connection/[connection_id].vue
similarity index 69%
rename from src/modules/[chain]/ibc/[connection_id].vue
rename to src/modules/[chain]/ibc/connection/[connection_id].vue
index c905c5de..cf708ca2 100644
--- a/src/modules/[chain]/ibc/[connection_id].vue
+++ b/src/modules/[chain]/ibc/connection/[connection_id].vue
@@ -11,6 +11,7 @@ const baseStore = useBaseStore();
 const conn = ref({} as Connection);
 const clientState = ref({} as { client_id: string; client_state: ClientState });
 const channels = ref([] as Channel[]);
+
 onMounted(() => {
   if (props.connection_id) {
     chainStore.rpc.getIBCConnectionsById(props.connection_id).then((x) => {
@@ -41,15 +42,13 @@ function color(v: string) {
 }
 </script>
 <template>
-  <div>
-    <div class="px-4 pt-3 pb-4 bg-base-100 rounded mb-4 shadow py-24 sm:!py-32">
+  <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 ">
       <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>
-              <div
-                class="order-first text-3xl font-semibold tracking-tight text-main mb-1"
-              >
+              <div class="order-first text-3xl font-semibold tracking-tight text-main mb-1">
                 {{ baseStore.latest?.block?.header?.chain_id }}
               </div>
               <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>
               <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">
                 {{ conn.state }}
               </div>
             </div>
           </div>
           <div class="mx-auto">
-            <div
-              class="order-first text-3xl font-semibold tracking-tight text-main mb-2"
-            >
+            <div class="order-first text-3xl font-semibold tracking-tight text-main mb-2">
               {{ clientState.client_state?.chain_id }}
             </div>
             <div class="text-sm text-gray-500 dark:text-gray-400">
@@ -138,50 +132,45 @@ function color(v: string) {
       </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>
-      <div class="overflow-x-auto"></div>
-      <table class="table w-full mt-4">
-        <thead>
-          <tr>
-            <th style="position: relative; z-index: 2">Channel Id</th>
-            <th>Port Id</th>
-            <th>Counterparty</th>
-            <th>Hops</th>
-            <th>Version</th>
-            <th>Ordering</th>
-            <th>State</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="v in channels">
-            <td>
-              <a href="#" @click="loadChannel(v.channel_id, v.port_id)">{{
-                v.channel_id
-              }}</a>
-            </td>
-            <td>{{ v.port_id }}</td>
-            <td>
-              {{ v.counterparty?.port_id }}/{{ v.counterparty?.channel_id }}
-            </td>
-            <td>{{ v.connection_hops.join(', ') }}</td>
-            <td>{{ v.version }}</td>
-            <td>{{ v.ordering }}</td>
-            <td>
-              <div
-                class="text-xs truncate relative py-2 px-4 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 class="overflow-auto">
+        <table class="table w-full mt-4">
+          <thead>
+            <tr>
+              <th style="position: relative; z-index: 2">Channel Id</th>
+              <th>Port Id</th>
+              <th>Counterparty</th>
+              <th>Hops</th>
+              <th>Version</th>
+              <th>Ordering</th>
+              <th>State</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="v in channels">
+              <td>
+                <a href="#" @click="loadChannel(v.channel_id, v.port_id)">{{
+                  v.channel_id
+                }}</a>
+              </td>
+              <td>{{ v.port_id }}</td>
+              <td>
+                {{ v.counterparty?.port_id }}/{{ v.counterparty?.channel_id }}
+              </td>
+              <td>{{ v.connection_hops.join(', ') }}</td>
+              <td>{{ v.version }}</td>
+              <td>{{ v.ordering }}</td>
+              <td>
+                <div class="text-xs truncate relative py-2 px-4 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>
   </div>
 </template>
diff --git a/src/modules/[chain]/ibc/connection/index.vue b/src/modules/[chain]/ibc/connection/index.vue
new file mode 100644
index 00000000..62fdd920
--- /dev/null
+++ b/src/modules/[chain]/ibc/connection/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/modules/[chain]/ibc/index.vue b/src/modules/[chain]/ibc/index.vue
deleted file mode 100644
index 4ea1c987..00000000
--- a/src/modules/[chain]/ibc/index.vue
+++ /dev/null
@@ -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>