deep-stack/cosmos-explorer
7
0
Fork 0
forked from LaconicNetwork/cosmos-explorer
Code Pull Requests Activity

ran prettier in ibc path

Browse Source
This commit is contained in:
2xburnt 2025-07-31 17:54:09 -05:00
parent 518ace32b3
commit 5330553fd2
No known key found for this signature in database
GPG Key ID: 0FC7634F60B3CAE3
4 changed files with 128 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/modules/[chain]/ibc/connStore.ts
View File

@ -1,7 +1,6 @@
import { defineStore } from 'pinia';
import { useBlockchain } from '@/stores'
import { useBlockchain } from '@/stores';
import { ChainRegistryClient } from '@chain-registry/client';
import type { IBCData } from '@chain-registry/types/ibc_data.schema';
import router from '@/router';
@ -11,25 +10,25 @@ export const useIBCModule = defineStore('module-ibc', {
state: () => {
return {
info: [] as IBCData[],
connectionId: "" as string,
connectionId: '' as string,
registryConf: {} as IBCData,
};
},
getters: {
chain() {
return useBlockchain()
return useBlockchain();
},
chainName(): string {
return this.chain.chainName;
},
sourceField(): string {
return this.registryConf?.chain_1?.chain_name === this.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.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: {
@ -45,43 +44,41 @@ export const useIBCModule = defineStore('module-ibc', {
});
client.fetchUrls().then(() => {
const info = client.getChainIbcData(this.chainName)
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;
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));
});
})
});
});
},
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'
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())
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 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);
},
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);
},
},
});

54
src/modules/[chain]/ibc/connection.vue
View File

@ -8,57 +8,63 @@ 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(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, 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 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>

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

@ -1,7 +1,14 @@
<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';
@ -12,33 +19,31 @@ 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;
});
@ -53,37 +58,47 @@ 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) {
@ -95,7 +110,7 @@ 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">
@ -103,15 +118,13 @@ function color(v: string) {
<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>
@ -129,8 +142,9 @@ 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">
@ -178,14 +192,18 @@ 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>
@ -194,7 +212,6 @@ function color(v: string) {
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow overflow-hidden">
@ -228,9 +245,7 @@ function color(v: string) {
</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>
@ -239,9 +254,7 @@ function color(v: string) {
{{ 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>
@ -251,13 +264,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>

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

@ -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>