ibc improvements, sort ibc connections

2025-07-31 17:45:08 -05:00 · 2025-07-31 17:45:08 -05:00 · 518ace32b3
commit 518ace32b3
parent 6d85f2f441
7 changed files with 327 additions and 965 deletions
--- a/package.json
+++ b/package.json
@ -13,19 +13,20 @@
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
-    "@chain-registry/types": "^0.50.162",
+    "@chain-registry/client": "^1.53.184",
+    "@chain-registry/types": "^0.50.184",
    "@chenfengyuan/vue-countdown": "2",
    "@cosmjs/amino": "^0.32.3",
    "@cosmjs/crypto": "^0.32.3",
    "@cosmjs/encoding": "^0.32.3",
    "@cosmjs/stargate": "^0.32.3",
+    "@cosmjs/cosmwasm-stargate": "^0.30.0",
    "@iconify/vue": "^4.1.0",
    "@intlify/unplugin-vue-i18n": "^0.8.2",
    "@leapwallet/cosmos-snap-provider": "^0.1.20",
    "@leapwallet/name-matcha": "^2.0.0",
    "@osmonauts/lcd": "^0.8.0",
    "@personaxyz/ad-sdk": "0.0.25",
-    "@ping-pub/chain-registry-client": "^0.0.25",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vueuse/core": "^9.12.0",
    "@vueuse/integrations": "^10.1.2",
@ -33,11 +34,14 @@
    "apexcharts": "^3.37.1",
    "autoprefixer": "^10.4.14",
    "axios": "^1.3.2",
+    "bech32": "^1.1.4",
    "buffer": "^6.0.3",
    "build": "^0.1.4",
    "cross-fetch": "^3.1.5",
    "daisyui": "^3.1.0",
    "dayjs": "^1.11.7",
+    "idna-uts46-hx": "^5.0.7",
+    "js-sha3": "^0.8.0",
    "lazy-load-vue3": "^1.3.0",
    "long": "^5.2.1",
    "md-editor-v3": "^2.8.1",
@ -67,7 +71,7 @@
    "@vue/tsconfig": "^0.1.3",
    "husky": "^9.1.7",
    "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.0",
    "pretty-quick": "^4.2.2",
    "sass": "^1.58.0",
    "shiki": "^1.0.0-beta.0",
--- a/src/modules/[chain]/ibc/connStore.ts
+++ b/src/modules/[chain]/ibc/connStore.ts
@ -1,67 +1,87 @@
+
 import { defineStore } from 'pinia';

-import { useBlockchain } from '@/stores';
-import ChainRegistryClient from '@ping-pub/chain-registry-client';
-import type { IBCPath, IBCInfo } from '@ping-pub/chain-registry-client/dist/types';
-import type { Channel } from '@/types';
+import { useBlockchain } from '@/stores'
+import { ChainRegistryClient } from '@chain-registry/client';
+import type { IBCData } from '@chain-registry/types/ibc_data.schema';
 import router from '@/router';
+import fetch from 'cross-fetch';

 export const useIBCModule = defineStore('module-ibc', {
  state: () => {
    return {
-      paths: [] as IBCPath[],
-      connectionId: '' as string,
-      registryConf: {} as IBCInfo,
+      info: [] as IBCData[],
+      connectionId: "" as string,
+      registryConf: {} as IBCData,
    };
  },
  getters: {
    chain() {
-      return useBlockchain();
+      return useBlockchain()
    },
-    commonIBCs(): any {
-      return this.paths.filter(
-        (x: IBCPath) => x.path.search(this.chain.current?.prettyName || this.chain.chainName) > -1
-      );
+    chainName(): string {
+      return this.chain.chainName;
    },
    sourceField(): string {
-      return this.registryConf?.chain_1?.chain_name === this.chain.current?.prettyName || this.chain.chainName
-        ? 'chain_1'
-        : 'chain_2';
+      return this.registryConf?.chain_1?.chain_name === this.chainName ? 'chain_1' : 'chain_2'
    },
    destField(): string {
-      return this.registryConf?.chain_1?.chain_name === this.chain.current?.prettyName || this.chain.chainName
-        ? 'chain_2'
-        : 'chain_1';
+      return this.registryConf?.chain_1?.chain_name === this.chainName ? 'chain_2' : 'chain_1'
    },
    registryChannels(): any {
-      return this.registryConf.channels;
+      return this.registryConf.channels
    },
  },
  actions: {
    load() {
-      const client = new ChainRegistryClient();
-      client.fetchIBCPaths().then((res) => {
-        this.paths = res;
+      const client = new ChainRegistryClient({
+        chainNames: [this.chainName],
      });
+      this.fetchIBCUrls().then((res) => {
+        res.forEach((element: any) => {
+          if (element.download_url) {
+            client.urls.push(element.download_url);
+          }
+        });
+
+        client.fetchUrls().then(() => {
+          const info = client.getChainIbcData(this.chainName)
+          this.info = info.sort((a, b) => {
+            // Sort by remote chain name (not equal to this.chainName)
+            const getRemote = (x: any) => x.chain_1.chain_name === this.chainName ? x.chain_2.chain_name : x.chain_1.chain_name;
+            return getRemote(a).localeCompare(getRemote(b));
+          });
+
+        })
+      });
+
    },
-    fetchConnection(path: string) {
-      const client = new ChainRegistryClient();
-      client.fetchIBCPathInfo(path).then((res) => {
-        const isFirstChain =
-          res.chain_1.chain_name === this.chain.current?.prettyName || res.chain_1.chain_name === this.chain.chainName;
+    async fetchIBCUrls(): Promise<any[]> {
+      let ibcEndpoint = 'https://api.github.com/repos/cosmos/chain-registry/contents/_IBC'
+      if (this.chainName.includes("testnet")) {
+        console.log(this.chainName)
+        ibcEndpoint = 'https://api.github.com/repos/cosmos/chain-registry/contents/testnets/_IBC'
+      }
+      const entries = await fetch(ibcEndpoint).then((res) => res.json())
+      return entries.filter((x: any) => x.name.match(this.chainName));
+    },
+    fetchConnection(index: number) {
+      const res = this.info[index];
+      const isFirstChain = res.chain_1.chain_name === this.chain.current?.prettyName || res.chain_1.chain_name === this.chain.chainName;

-        const connId = isFirstChain ? res.chain_1.connection_id : res.chain_2.connection_id;
+      const connId = isFirstChain
+        ? res.chain_1.connection_id
+        : res.chain_2.connection_id;

-        this.registryConf = res;
-        this.showConnection(connId);
-      });
+      this.registryConf = res;
+      this.showConnection(connId);
    },
    showConnection(connId?: string | number) {
      if (!connId) {
-        this.registryConf = {} as any;
+        this.registryConf = {} as any
      }
-      const path = `/${this.chain.chainName}/ibc/connection/${connId || `connection-${this.connectionId || 0}`}`;
-      router.push(path);
-    },
+      const path = `/${this.chain.chainName}/ibc/connection/${connId || `connection-${this.connectionId || 0}`}`
+      router.push(path)
+    }
  },
 });
--- a/src/modules/[chain]/ibc/connection.vue
+++ b/src/modules/[chain]/ibc/connection.vue
@ -1,76 +1,64 @@
 <script lang="ts" setup>
-import PaginationBar from '@/components/PaginationBar.vue';
-import { useBlockchain, useFormatter } from '@/stores';
+import { useBlockchain } from '@/stores';
 import { PageRequest, type Connection, type Pagination } from '@/types';
-import { computed, onMounted } from 'vue';
+import { onMounted } from 'vue';
 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 ibcStore = useIBCModule()
 const list = ref([] as Connection[]);
-const pageRequest = ref(new PageRequest());
-const pageResponse = ref({} as Pagination);
+const pageRequest = ref(new PageRequest())
+const pageResponse = ref({} as Pagination)
 const tab = ref('registry');

 onMounted(() => {
-  pageload(1);
-  ibcStore.load();
+  pageload(1)
+  ibcStore.load()
 });

 function pageload(p: number) {
-  pageRequest.value.setPage(p);
+  pageRequest.value.setPage(p)
  chainStore.rpc.getIBCConnections(pageRequest.value).then((x) => {
    list.value = x.connections;
-    pageResponse.value = x.pagination;
+    pageResponse.value = x.pagination
    if (x.pagination.total && Number(x.pagination.total) > 0) {
-      ibcStore.showConnection(0);
+      ibcStore.showConnection(list.value[0].id);
    }
  });
 }
+
 </script>
 <template>
  <div>
    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-      <div class="flex flex-wrap gap-4 items-center">
+      <div class="flex flex-wrap gap-4  items-center">
        <h2 class="card-title py-4">{{ $t('ibc.title') }}</h2>
        <div class="tabs tabs-boxed">
-          <a class="tab" :class="{ 'tab-active': tab === 'registry' }" @click="tab = 'registry'">{{
-            $t('ibc.registry')
-          }}</a>
+          <a class="tab" :class="{ 'tab-active': tab === 'registry' }" @click="tab = 'registry'">{{ $t('ibc.registry')
+            }}</a>
          <a class="tab" :class="{ 'tab-active': tab === 'favorite' }" @click="tab = 'favorite'">{{
-            $t('module.favorite')
-          }}</a>
+            $t('module.favorite') }}</a>
        </div>
      </div>
      <div>
-        <div v-show="tab === 'registry'" class="flex flex-wrap gap-1 p-4">
-          <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 v-show="tab === 'registry'" class="flex flex-wrap gap-1 p-4 ">
+          <span v-for="(s, i) in ibcStore.info" class="btn btn-xs btn-link mr-1" @click="ibcStore.fetchConnection(i)">{{
+            s.chain_1.chain_name === ibcStore.chainName ? s.chain_2.chain_name : s.chain_1.chain_name
+          }}
+          &#x21cc; {{
+            s.chain_1.chain_name === ibcStore.chainName ? s.chain_1.chain_name : s.chain_2.chain_name
+          }}</span>
        </div>
-        <div v-show="tab === 'favorite'" class="flex flex-wrap gap-1 p-4">
+        <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">{{ $t('ibc.connection_id') }}:</button>
-            <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="ibcStore.showConnection()">
-              {{ $t('ibc.btn_apply') }}
-            </button>
+            <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="ibcStore.showConnection()">{{ $t('ibc.btn_apply')
+              }}</button>
          </div>
        </div>
      </div>
--- a/src/modules/[chain]/ibc/connection/[connection_id].vue
+++ b/src/modules/[chain]/ibc/connection/[connection_id].vue
@ -1,14 +1,7 @@
 <script lang="ts" setup>
 import { formatSeconds } from '@/libs/utils';
 import { useBaseStore, useBlockchain, useFormatter } from '@/stores';
-import {
-  type Connection,
-  type ClientState,
-  type Channel,
-  PageRequest,
-  type TxResponse,
-  type PaginatedTxs,
-} from '@/types';
+import { type Connection, type ClientState, type Channel, PageRequest, type TxResponse, type PaginatedTxs } from '@/types';
 import { computed, onMounted } from 'vue';
 import { ref } from 'vue';
 import { useIBCModule } from '../connStore';
@ -19,31 +12,33 @@ const props = defineProps(['chain', 'connection_id']);
 const chainStore = useBlockchain();
 const baseStore = useBaseStore();
 const format = useFormatter();
-const ibcStore = useIBCModule();
+const ibcStore = useIBCModule()
 const conn = ref({} as Connection);
 const clientState = ref({} as { client_id: string; client_state: ClientState });
 const channels = ref([] as Channel[]);

 const connId = computed(() => {
-  return props.connection_id || 0;
-});
+  return props.connection_id || 0
+})

-const loading = ref(false);
-const txs = ref({} as PaginatedTxs);
-const direction = ref('');
-const channel_id = ref('');
-const port_id = ref('');
-const page = ref(new PageRequest());
-page.value.limit = 5;
+const loading = ref(false)
+const txs = ref({} as PaginatedTxs)
+const direction = ref('')
+const channel_id = ref('')
+const port_id = ref('')
+const page = ref(new PageRequest())
+page.value.limit = 5

 onMounted(() => {
  if (connId.value) {
    chainStore.rpc.getIBCConnectionsById(connId.value).then((x) => {
      conn.value = x.connection;
    });
-    chainStore.rpc.getIBCConnectionsClientState(connId.value).then((x) => {
-      clientState.value = x.identified_client_state;
-    });
+    chainStore.rpc
+      .getIBCConnectionsClientState(connId.value)
+      .then((x) => {
+        clientState.value = x.identified_client_state;
+      });
    chainStore.rpc.getIBCConnectionsChannels(connId.value).then((x) => {
      channels.value = x.channels;
    });
@ -58,47 +53,37 @@ function loadChannel(channel: string, port: string) {

 function pageload(pageNum: number) {
  if (direction.value === 'In') {
-    fetchSendingTxs(channel_id.value, port_id.value, pageNum - 1);
+    fetchSendingTxs(channel_id.value, port_id.value, pageNum -1)
  } else {
-    fetchSendingTxs(channel_id.value, port_id.value, pageNum - 1);
+    fetchSendingTxs(channel_id.value, port_id.value, pageNum -1)
  }
+
 }

 function fetchSendingTxs(channel: string, port: string, pageNum = 0) {
-  page.value.setPage(pageNum);
-  loading.value = true;
-  direction.value = 'Out';
-  channel_id.value = channel;
-  port_id.value = port;
-  txs.value = {} as PaginatedTxs;
-  chainStore.rpc
-    .getTxs(
-      "?order_by=2&events=send_packet.packet_src_channel='{channel}'&events=send_packet.packet_src_port='{port}'",
-      { channel, port },
-      page.value
-    )
-    .then((res) => {
-      txs.value = res;
-    })
-    .finally(() => (loading.value = false));
+
+  page.value.setPage(pageNum)
+  loading.value = true
+  direction.value = 'Out'
+  channel_id.value = channel
+  port_id.value = port
+  txs.value = {} as PaginatedTxs
+  chainStore.rpc.getTxs("?order_by=2&events=send_packet.packet_src_channel='{channel}'&events=send_packet.packet_src_port='{port}'", { channel, port }, page.value).then(res => {
+    txs.value = res
+  })
+    .finally(() => loading.value = false)
 }
 function fetchRecevingTxs(channel: string, port: string, pageNum = 0) {
-  page.value.setPage(pageNum);
-  loading.value = true;
-  direction.value = 'In';
-  channel_id.value = channel;
-  port_id.value = port;
-  txs.value = {} as PaginatedTxs;
-  chainStore.rpc
-    .getTxs(
-      "?order_by=2&events=recv_packet.packet_dst_channel='{channel}'&events=recv_packet.packet_dst_port='{port}'",
-      { channel, port },
-      page.value
-    )
-    .then((res) => {
-      txs.value = res;
-    })
-    .finally(() => (loading.value = false));
+  page.value.setPage(pageNum)
+  loading.value = true
+  direction.value = 'In'
+  channel_id.value = channel
+  port_id.value = port
+  txs.value = {} as PaginatedTxs
+  chainStore.rpc.getTxs("?order_by=2&events=recv_packet.packet_dst_channel='{channel}'&events=recv_packet.packet_dst_port='{port}'", { channel, port }, page.value).then(res => {
+    txs.value = res
+  })
+    .finally(() => loading.value = false)
 }

 function color(v: string) {
@ -110,31 +95,29 @@ function color(v: string) {
 </script>
 <template>
  <div class="">
-    <div class="px-4 pt-3 pb-4 bg-base-200 rounded mb-4 shadow">
+    <div class="px-4 pt-3 pb-4 bg-base-200 rounded mb-4 shadow ">
      <div class="mx-auto max-w-7xl px-6 lg:!px-8">
        <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">{{ conn.client_id }} {{ props.connection_id }}</div>
+              <div class="text-sm text-gray-500 dark:text-gray-400">
+                {{ conn.client_id }} {{ props.connection_id }}
+              </div>
            </div>
          </div>
          <div class="mx-auto flex items-center">
            <div :class="{ 'text-success': conn.state?.indexOf('_OPEN') > -1 }">
              <span class="text-lg rounded-full">&#x21cc;</span>
-              <div class="text-c">
+              <div class=" text-c">
                {{ 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">
@ -146,9 +129,8 @@ function color(v: string) {
    </div>

    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title mb-4 overflow-hidden">
-        {{ $t('ibc.title_2') }}<span class="ml-2 text-sm">{{ clientState.client_state?.['@type'] }}</span>
-      </h2>
+      <h2 class="card-title mb-4 overflow-hidden">{{ $t('ibc.title_2') }}<span class="ml-2 text-sm">{{
+        clientState.client_state?.['@type'] }}</span></h2>
      <div class="overflow-x-auto grid grid-cols-1 md:grid-cols-2 gap-4">
        <table class="table table-sm capitalize">
          <thead class="bg-base-200">
@ -167,21 +149,15 @@ function color(v: string) {
            </tr>
            <tr>
              <td class="w-52">{{ $t('ibc.trusting_period') }}:</td>
-              <td>
-                {{ formatSeconds(clientState.client_state?.trusting_period) }}
-              </td>
+              <td>{{ formatSeconds(clientState.client_state?.trusting_period) }}</td>
            </tr>
            <tr>
              <td class="w-52">{{ $t('ibc.unbonding_period') }}:</td>
-              <td>
-                {{ formatSeconds(clientState.client_state?.unbonding_period) }}
-              </td>
+              <td>{{ formatSeconds(clientState.client_state?.unbonding_period) }}</td>
            </tr>
            <tr>
              <td class="w-52">{{ $t('ibc.max_clock_drift') }}:</td>
-              <td>
-                {{ formatSeconds(clientState.client_state?.max_clock_drift) }}
-              </td>
+              <td>{{ formatSeconds(clientState.client_state?.max_clock_drift) }}</td>
            </tr>
            <tr>
              <td class="w-52">{{ $t('ibc.frozen_height') }}:</td>
@ -202,28 +178,23 @@ function color(v: string) {
          <tbody>
            <tr>
              <td colspan="2">
-                <div class="flex justify-between">
-                  <span>{{ $t('ibc.allow_update_after_expiry') }}:</span>
-                  <span>{{ clientState.client_state?.allow_update_after_expiry }}</span>
-                </div>
+                <div class="flex justify-between"><span>{{ $t('ibc.allow_update_after_expiry') }}:</span> <span>{{
+                  clientState.client_state?.allow_update_after_expiry }}</span></div>
              </td>
            </tr>
            <tr>
              <td colspan="2">
-                <div class="flex justify-between">
-                  <span>{{ $t('ibc.allow_update_after_misbehaviour') }}: </span>
-                  <span>{{ clientState.client_state?.allow_update_after_misbehaviour }}</span>
-                </div>
+                <div class="flex justify-between"><span>{{ $t('ibc.allow_update_after_misbehaviour') }}: </span> <span>{{
+                  clientState.client_state?.allow_update_after_misbehaviour }}</span></div>
              </td>
            </tr>
            <tr>
              <td class="w-52">{{ $t('ibc.upgrade_path') }}:</td>
-              <td class="text-right">
-                {{ clientState.client_state?.upgrade_path.join(', ') }}
-              </td>
+              <td class="text-right">{{ clientState.client_state?.upgrade_path.join(', ') }}</td>
            </tr>
          </tbody>
        </table>
+
      </div>
    </div>
    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow overflow-hidden">
@ -233,9 +204,7 @@ function color(v: string) {
          <thead>
            <tr>
              <th>{{ $t('ibc.txs') }}</th>
-              <th style="position: relative; z-index: 2">
-                {{ $t('ibc.channel_id') }}
-              </th>
+              <th style="position: relative; z-index: 2">{{ $t('ibc.channel_id') }}</th>
              <th>{{ $t('ibc.port_id') }}</th>
              <th>{{ $t('ibc.state') }}</th>
              <th>{{ $t('ibc.counterparty') }}</th>
@ -245,76 +214,34 @@ function color(v: string) {
            </tr>
          </thead>
          <tbody>
-            <tr v-for="v in ibcStore.registryChannels">
-              <td>
-                <div class="flex gap-1">
-                  <button
-                    class="btn btn-xs"
-                    @click="fetchSendingTxs(v[ibcStore.sourceField].channel_id, v[ibcStore.sourceField].port_id)"
-                    :disabled="loading"
-                  >
-                    <span v-if="loading" class="loading loading-spinner loading-sm"></span>
-                    {{ $t('ibc.btn_out') }}
-                  </button>
-                  <button
-                    class="btn btn-xs"
-                    @click="fetchRecevingTxs(v[ibcStore.sourceField].channel_id, v[ibcStore.sourceField].port_id)"
-                    :disabled="loading"
-                  >
-                    <span v-if="loading" class="loading loading-spinner loading-sm"></span>
-                    {{ $t('ibc.btn_in') }}
-                  </button>
-                </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">
-                  <button
-                    class="btn btn-xs"
-                    @click="fetchSendingTxs(v.channel_id, v.port_id)"
-                    :disabled="loading"
-                  >
-                    <span
-                      v-if="loading"
-                      class="loading loading-spinner loading-sm"
-                    ></span>
+                  <button class="btn btn-xs" @click="fetchSendingTxs(v.channel_id, v.port_id)" :disabled="loading">
+                    <span v-if="loading" class="loading loading-spinner loading-sm"></span>
                    {{ $t('ibc.btn_out') }}
                  </button>
-                  <button
-                    class="btn btn-xs"
-                    @click="fetchRecevingTxs(v.channel_id, v.port_id)"
-                    :disabled="loading"
-                  >
-                    <span
-                      v-if="loading"
-                      class="loading loading-spinner loading-sm"
-                    ></span>
+                  <button class="btn btn-xs" @click="fetchRecevingTxs(v.channel_id, v.port_id)" :disabled="loading">
+                    <span v-if="loading" class="loading loading-spinner loading-sm"></span>
                    {{ $t('ibc.btn_in') }}
                  </button>
                </div>
              </td>
              <td>
-                <a href="#" @click="loadChannel(v.channel_id, v.port_id)">{{ v.channel_id }}</a>
+                <a href="#" @click="loadChannel(v.channel_id, v.port_id)">{{
+                  v.channel_id
+                }}</a>
              </td>
              <td>{{ v.port_id }}</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>
+                <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>
-              <td>{{ v.counterparty?.port_id }}/{{ v.counterparty?.channel_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>
@ -324,13 +251,13 @@ function color(v: string) {
      </div>
    </div>
    <div v-if="channel_id">
-      <h3 class="card-title capitalize">Transactions ({{ channel_id }} {{ port_id }} {{ direction }})</h3>
+      <h3 class=" card-title capitalize">Transactions ({{ channel_id }} {{ port_id }} {{ direction }}) </h3>
      <table class="table">
        <thead>
          <tr>
-            <td>{{ $t('ibc.height') }}</td>
+            <td> {{ $t('ibc.height') }}</td>
            <td>{{ $t('ibc.txhash') }}</td>
-            <td>{{ $t('ibc.messages') }}</td>
+            <td> {{ $t('ibc.messages') }}</td>
            <td>{{ $t('ibc.time') }}</td>
          </tr>
        </thead>
@ -339,20 +266,13 @@ function color(v: string) {
            <td>{{ resp.height }}</td>
            <td>
              <div class="text-xs truncate text-primary dark:invert">
-                <RouterLink
-                  :to="`/${chainStore.chainName}/tx/${resp.txhash}`"
-                  >{{ resp.txhash }}</RouterLink
-                >
+                <RouterLink :to="`/${chainStore.chainName}/tx/${resp.txhash}`">{{ resp.txhash }}</RouterLink>
              </div>
            </td>
            <td>
              <div class="flex">
                {{ format.messages(resp.tx.body.messages) }}
-                <Icon
-                  v-if="resp.code === 0"
-                  icon="mdi-check"
-                  class="text-success text-lg"
-                />
+                <Icon v-if="resp.code === 0" icon="mdi-check" class="text-success text-lg" />
                <Icon v-else icon="mdi-multiply" class="text-error text-lg" />
              </div>
            </td>
@ -360,11 +280,7 @@ function color(v: string) {
          </tr>
        </tbody>
      </table>
-      <PaginationBar
-        :limit="page.limit"
-        :total="txs.pagination?.total"
-        :callback="pageload"
-      />
+      <PaginationBar :limit="page.limit" :total="txs.pagination?.total" :callback="pageload" />
    </div>
  </div>
 </template>
--- a/src/modules/[chain]/ibc/connection/index.vue
+++ b/src/modules/[chain]/ibc/connection/index.vue
@ -2,7 +2,7 @@
 // router.push(`/${props.chain}/ibc/connection/connection-0`)
 </script>
 <template>
-  <div></div>
+    <div></div>
 </template>
 <route>
    {
@ -11,4 +11,4 @@
        order: 9
      }
    }
-  </route>
+  </route>
--- a/src/types/ibc.ts
+++ b/src/types/ibc.ts
@ -1,105 +1,117 @@
-import type { PaginatedResponse } from '.';
+import type { PaginatedResponse } from "."
+import type { IBCInfo as RegistryIBCInfo } from "@chain-registry/types"
+
+export interface IBCInfo extends RegistryIBCInfo { }

 export interface DenomTrace {
-  path: string;
-  base_denom: string;
+  path: string,
+  base_denom: string
 }

 export interface Connection {
-  id: string;
-  client_id: string;
+  id: string,
+  client_id: string,
  versions: {
-    identifier: string;
-    features: string[];
-  }[];
-  state: string;
+    identifier: string,
+    features: string[]
+  }[],
+  state: string,
  counterparty: {
-    client_id: string;
-    connection_id: string;
+    client_id: string,
+    connection_id: string,
    prefix: {
-      key_prefix: string;
-    };
-  };
-  delay_period: string;
+      key_prefix: string
+    }
+  },
+  delay_period: string
 }

 export interface Channel {
-  state: string;
-  ordering: string;
+  state: string,
+  ordering: string,
  counterparty: {
-    port_id: string;
-    channel_id: string;
-  };
-  connection_hops: string[];
-  version: string;
-  port_id: string;
-  channel_id: string;
+    port_id: string,
+    channel_id: string
+  },
+  connection_hops: string[],
+  version: string,
+  port_id: string,
+  channel_id: string
 }

 export interface ClientState {
-  '@type': string;
-  chain_id: string;
+  "@type": string,
+  chain_id: string,
  trust_level: {
-    numerator: string;
-    denominator: string;
-  };
-  trusting_period: string;
-  unbonding_period: string;
-  max_clock_drift: string;
+    numerator: string,
+    denominator: string
+  },
+  trusting_period: string,
+  unbonding_period: string,
+  max_clock_drift: string,
  frozen_height: {
-    revision_number: string;
-    revision_height: string;
-  };
+    revision_number: string,
+    revision_height: string
+  },
  latest_height: {
-    revision_number: string;
-    revision_height: string;
-  };
+    revision_number: string,
+    revision_height: string
+  },
  proof_specs: {
    leaf_spec: {
-      hash: string;
-      prehash_key: string;
-      prehash_value: string;
-      length: string;
-      prefix: string;
-    };
+      hash: string,
+      prehash_key: string,
+      prehash_value: string,
+      length: string,
+      prefix: string
+    },
    inner_spec: {
-      child_order: number[];
-      child_size: number;
-      min_prefix_length: number;
-      max_prefix_length: number;
-      empty_child: string;
-      hash: string;
-    };
-    max_depth: number;
-    min_depth: number;
-  }[];
-  upgrade_path: string[];
-  allow_update_after_expiry: boolean;
-  allow_update_after_misbehaviour: boolean;
+      child_order: number[],
+      child_size: number,
+      min_prefix_length: number,
+      max_prefix_length: number,
+      empty_child: string,
+      hash: string
+    },
+    max_depth: number,
+    min_depth: number
+  }[],
+  upgrade_path: string[],
+  allow_update_after_expiry: boolean,
+  allow_update_after_misbehaviour: boolean
 }

 export interface ClientStateWithProof {
  identified_client_state: {
-    client_id: string;
-    client_state: ClientState;
-  };
-  proof: string;
+    client_id: string,
+    client_state: ClientState
+  },
+  proof: string,
  proof_height: {
-    revision_number: string;
-    revision_height: string;
-  };
+    revision_number: string,
+    revision_height: string
+  }
+
 }
 export interface ConnectionWithProof {
-  connection: Connection;
-  proof: string;
+  connection: Connection,
+  proof: string,
  proof_height: {
-    revision_number: string;
-    revision_height: string;
-  };
+    revision_number: string,
+    revision_height: string
+  }
+
 }
 export interface PaginatedIBCChannels extends PaginatedResponse {
-  channels: Channel[];
+  channels: Channel[]
 }
 export interface PaginatedIBCConnections extends PaginatedResponse {
-  connections: Connection[];
+  connections: Connection[]
+}
+
+export interface IBCPath {
+  path: string,
+  from?: string,
+  to?: string,
+  url?: string
 }
--- a/yarn.lock
+++ b/yarn.lock