adjust prettier settings

.prettierrc.json

@@ -1,12 +1,12 @@
 {
-  "tabWidth": 2,
-  "singleQuote": true,
-  "semi": true,
-  "endOfLine": "auto",
-  "bracketSpacing": true,
-  "trailingComma": "es5",
   "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "auto",
+  "printWidth": 80,
+  "semi": true,
   "singleAttributePerLine": false,
-  "printWidth": 120,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
   "useTabs": false
 }

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

@@ -22,10 +22,14 @@ export const useIBCModule = defineStore('module-ibc', {
       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;
@@ -48,17 +52,21 @@ export const useIBCModule = defineStore('module-ibc', {
           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;
+              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';
+      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';
+        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));
@@ -66,9 +74,12 @@ export const useIBCModule = defineStore('module-ibc', {
     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;
+        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);

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

@@ -36,24 +36,44 @@ function pageload(p: number) {
       <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 === 'favorite' }" @click="tab = 'favorite'">{{
-            $t('module.favorite')
-          }}</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
+          >
         </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
+          <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 class="join border border-primary">
-            <button class="join-item px-2">{{ $t('ibc.connection_id') }}:</button>
+            <button class="join-item px-2">
+              {{ $t('ibc.connection_id') }}:
+            </button>
             <input
               v-model="ibcStore.connectionId"
               type="number"
@@ -62,7 +82,10 @@ function pageload(p: number) {
               :max="pageResponse.total || 0"
               :placeholder="`0~${pageResponse.total}`"
             />
-            <button class="join-item btn btn-primary" @click="ibcStore.showConnection()">
+            <button
+              class="join-item btn btn-primary"
+              @click="ibcStore.showConnection()"
+            >
               {{ $t('ibc.btn_apply') }}
             </button>
           </div>

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

@@ -115,10 +115,14 @@ function color(v: string) {
         <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">
@@ -130,7 +134,9 @@ function color(v: string) {
             </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">
@@ -143,7 +149,10 @@ function color(v: string) {
 
     <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>
+        {{ $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">
@@ -163,15 +172,21 @@ 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>
@@ -194,7 +209,9 @@ function color(v: string) {
               <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>
+                  <span>{{
+                    clientState.client_state?.allow_update_after_expiry
+                  }}</span>
                 </div>
               </td>
             </tr>
@@ -202,13 +219,17 @@ function color(v: string) {
               <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>
+                  <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>
@@ -221,7 +242,9 @@ 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>
@@ -234,27 +257,51 @@ function color(v: string) {
             <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>
@@ -264,7 +311,9 @@ 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>
@@ -279,13 +328,20 @@ 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>
@@ -293,7 +349,11 @@ 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>

src/types/ibc.ts

@@ -1,117 +1,115 @@
-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
-}
-
-export interface Connection {
-  id: string,
-  client_id: string,
-  versions: {
-    identifier: string,
-    features: string[]
-  }[],
-  state: string,
-  counterparty: {
-    client_id: string,
-    connection_id: string,
-    prefix: {
-      key_prefix: string
-    }
-  },
-  delay_period: string
-}
-
-export interface Channel {
-  state: string,
-  ordering: string,
-  counterparty: {
-    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,
-  trust_level: {
-    numerator: string,
-    denominator: string
-  },
-  trusting_period: string,
-  unbonding_period: string,
-  max_clock_drift: string,
-  frozen_height: {
-    revision_number: string,
-    revision_height: string
-  },
-  latest_height: {
-    revision_number: string,
-    revision_height: string
-  },
-  proof_specs: {
-    leaf_spec: {
-      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
-}
-
-export interface ClientStateWithProof {
-  identified_client_state: {
-    client_id: string,
-    client_state: ClientState
-  },
-  proof: string,
-  proof_height: {
-    revision_number: string,
-    revision_height: string
-  }
-
-}
-export interface ConnectionWithProof {
-  connection: Connection,
-  proof: string,
-  proof_height: {
-    revision_number: string,
-    revision_height: string
-  }
-
-}
-export interface PaginatedIBCChannels extends PaginatedResponse {
-  channels: Channel[]
-}
-export interface PaginatedIBCConnections extends PaginatedResponse {
-  connections: Connection[]
-}
-
 export interface IBCPath {
   path: string,
   from?: string,
   to?: string,
   url?: string
 }
+
+export interface DenomTrace {
+  path: string;
+  base_denom: string;
+}
+
+export interface Connection {
+  id: string;
+  client_id: string;
+  versions: {
+    identifier: string;
+    features: string[];
+  }[];
+  state: string;
+  counterparty: {
+    client_id: string;
+    connection_id: string;
+    prefix: {
+      key_prefix: string;
+    };
+  };
+  delay_period: string;
+}
+
+export interface Channel {
+  state: string;
+  ordering: string;
+  counterparty: {
+    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;
+  trust_level: {
+    numerator: string;
+    denominator: string;
+  };
+  trusting_period: string;
+  unbonding_period: string;
+  max_clock_drift: string;
+  frozen_height: {
+    revision_number: string;
+    revision_height: string;
+  };
+  latest_height: {
+    revision_number: string;
+    revision_height: string;
+  };
+  proof_specs: {
+    leaf_spec: {
+      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;
+}
+
+export interface ClientStateWithProof {
+  identified_client_state: {
+    client_id: string;
+    client_state: ClientState;
+  };
+  proof: string;
+  proof_height: {
+    revision_number: string;
+    revision_height: string;
+  };
+}
+export interface ConnectionWithProof {
+  connection: Connection;
+  proof: string;
+  proof_height: {
+    revision_number: string;
+    revision_height: string;
+  };
+}
+export interface PaginatedIBCChannels extends PaginatedResponse {
+  channels: Channel[];
+}
+export interface PaginatedIBCConnections extends PaginatedResponse {
+  connections: Connection[];
+}