improve IBC

src/modules/[chain]/ibc/connStore.ts

@@ -0,0 +1,59 @@
+
+import { defineStore } from 'pinia';
+
+import {useBlockchain} from '@/stores'
+import ChainRegistryClient from '@ping-pub/chain-registry-client';
+import type { IBCPath } from '@ping-pub/chain-registry-client/dist/types';
+import type { Channel } from '@/types';
+import router from '@/router';
+
+export const useIBCModule = defineStore('module-ibc', {
+  state: () => {
+    return {
+      paths: [] as IBCPath[],
+      connectionId: "",
+      registryConf: {},
+    };
+  },
+  getters: {
+    chain() {
+      return useBlockchain()
+    },
+    commonIBCs() {
+      return this.paths.filter(x => x.path.search(this.chain.current?.prettyName || this.chain.chainName) > -1)
+    },
+    sourceField() {
+      return this.registryConf?.chain_1?.chain_name === this.chain.current?.prettyName || this.chain.chainName ? 'chain_1': 'chain_2'
+    },
+    destField() {
+      return this.registryConf?.chain_1?.chain_name === this.chain.current?.prettyName || this.chain.chainName ? 'chain_2': 'chain_1'
+    },
+    registryChannels() {
+      return this.registryConf.channels
+    }
+  },
+  actions: {
+    load() {
+      const client = new ChainRegistryClient();
+      client.fetchIBCPaths().then(res => {
+        this.paths = res
+      });
+    },
+    fetchConnection(path: string) {
+      const client = new ChainRegistryClient();
+      client.fetchIBCPathInfo(path).then(res => {
+        const connId = res.chain_1.chain_name === this.chain.current?.prettyName || this.chain.chainName ?
+          res.chain_1.connection_id : res.chain_2.connection_id
+        this.registryConf = res
+        this.showConnection(connId)
+      })
+    },
+    showConnection(connId?: string | number) {
+      if(!connId) {
+        this.registryConf = {}
+      }
+      const path = `/${this.chain.chainName}/ibc/connection/${connId || `connection-${this.connectionId || 0}`}`
+      router.push(path)
+    }
+  },
+});

src/modules/[chain]/ibc/connection.vue

@@ -8,9 +8,11 @@ import { ref } from 'vue';
 import ChainRegistryClient from '@ping-pub/chain-registry-client';
 import type { IBCPath } from '@ping-pub/chain-registry-client/dist/types';
 import router from '@/router';
+import { useIBCModule } from './connStore';
 
 const props = defineProps(['chain']);
 const chainStore = useBlockchain();
+const ibcStore = useIBCModule()
 const list = ref([] as Connection[]);
 const pageRequest = ref(new PageRequest())
 const pageResponse = ref({} as Pagination)
@@ -18,6 +20,7 @@ const tab = ref('registry');
 
 onMounted(() => {
   pageload(1)
+  ibcStore.load()
 });
 
 function pageload(p: number) {
@@ -26,37 +29,11 @@ function pageload(p: number) {
     list.value = x.connections;
     pageResponse.value = x.pagination
     if(x.pagination.total && Number(x.pagination.total) > 0) {
-      showConnection(0)
+      ibcStore.showConnection(0)
     }
   });
 }
 
-// Common IBC connections
-const paths = ref([] as IBCPath[])
-const client = new ChainRegistryClient();
-client.fetchIBCPaths().then(res => {
-  paths.value = res
-});
-const connectionId = ref(undefined)
-const commonIBCs = computed(() => {
-  const a = paths.value.filter(x => x.path.search(chainStore.current?.prettyName || chainStore.chainName) > -1)
-  if (a.length === 0) tab.value === 'favorite'
-  return a
-})
-
-function fetchConnection(path: string) {
-  client.fetchIBCPathInfo(path).then(res => {
-    const connId = res.chain_1.chain_name === chainStore.current?.prettyName || chainStore.chainName ?
-      res.chain_1.connection_id : res.chain_2.connection_id
-    showConnection(connId)
-  })
-}
-
-function showConnection(connId?: string | number) {
-  const path = `/${props.chain}/ibc/connection/${connId || `connection-${connectionId.value || 0}`}`
-  router.push(path)
-}
-
 </script>
 <template>
   <div>
@@ -70,15 +47,15 @@ function showConnection(connId?: string | number) {
       </div>
       <div>
         <div v-show="tab === 'registry'" class="flex flex-wrap gap-1 p-4 ">
-          <span v-for="s in commonIBCs" class="btn btn-xs btn-link mr-1" @click="fetchConnection(s.path)">{{ s.from }}
+          <span v-for="s in ibcStore.commonIBCs" class="btn btn-xs btn-link mr-1" @click="ibcStore.fetchConnection(s.path)">{{ s.from }}
             &#x21cc; {{ s.to }}</span>
         </div>
         <div v-show="tab === 'favorite'" class="flex flex-wrap gap-1 p-4 ">
           <div class="join border border-primary">
             <button class="join-item px-2">Connection Id:</button>
-            <input v-model="connectionId" type=number class="input input-bordered w-40 join-item" min="0"
+            <input v-model="ibcStore.connectionId" type=number class="input input-bordered w-40 join-item" min="0"
               :max="pageResponse.total || 0" :placeholder="`0~${pageResponse.total}`" />
-            <button class="join-item btn  btn-primary" @click="showConnection()">apply</button>
+            <button class="join-item btn  btn-primary" @click="ibcStore.showConnection()">apply</button>
           </div>
         </div>
       </div>

src/modules/[chain]/ibc/connection/[connection_id].vue

@@ -4,10 +4,12 @@ import { useBaseStore, useBlockchain } from '@/stores';
 import type { Connection, ClientState, Channel } from '@/types';
 import { computed, onMounted } from 'vue';
 import { ref } from 'vue';
+import { useIBCModule } from '../connStore';
 
 const props = defineProps(['chain', 'connection_id']);
 const chainStore = useBlockchain();
 const baseStore = useBaseStore();
+const ibcStore = useIBCModule()
 const conn = ref({} as Connection);
 const clientState = ref({} as { client_id: string; client_state: ClientState });
 const channels = ref([] as Channel[]);
@@ -160,7 +162,6 @@ function color(v: string) {
 
       </div>
     </div>
-
     <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-auto">
@@ -178,6 +179,20 @@ function color(v: string) {
             </tr>
           </thead>
           <tbody>
+            <tr v-for="v in ibcStore.registryChannels">
+              <td>
+                <div class="flex gap-1">
+                <label class="btn btn-xs" @click="fetchSendingTxs(v[ibcStore.sourceField].channel_id, v[ibcStore.sourceField].port_id)">Out</label>
+                <label class="btn btn-xs" @click="fetchRecevingTxs(v[ibcStore.sourceField].channel_id, v[ibcStore.sourceField].port_id)">In</label>
+                </div>
+              </td>
+              <td>
+                <a href="#">{{
+                  v[ibcStore.sourceField].channel_id
+                }}</a>
+              </td>
+              <td>{{ v[ibcStore.sourceField].port_id }}</td>
+            </tr>
             <tr v-for="v in channels">
               <td>
                 <div class="flex gap-1">