From 4949df61b08c036ab1fcb3a21715f673346324ac Mon Sep 17 00:00:00 2001
From: 2xburnt <169301814+2xburnt@users.noreply.github.com>
Date: Thu, 10 Jul 2025 10:38:43 -0500
Subject: [PATCH] add singleAttributePerLine, printWidth, and useTabs to
 prettier

---
 .prettierrc.json                              |   7 +-
 chains/mainnet/axelar.json                    | 140 ++--
 chains/mainnet/cosmos.json                    |  50 +-
 chains/mainnet/neutron.json                   |  69 +-
 chains/mainnet/nolus.json                     |  52 +-
 chains/mainnet/osmosis.json                   |  75 +-
 chains/testnet/bfhevm.json                    |  38 +-
 chains/testnet/crossfi.json                   |  20 +-
 env.d.ts                                      |   2 +-
 index.html                                    |  26 +-
 package.json                                  |  11 +-
 postcss.config.js                             |   2 +-
 public/test.html                              |  26 +-
 src/components/CardParameter.vue              |  18 +-
 src/components/CardStatisticsVertical.vue     |  14 +-
 src/components/ChainSummary.vue               |  11 +-
 src/components/Countdown.vue                  |  24 +-
 src/components/PaginationBar.vue              |  74 +-
 src/components/ProposalListItem.vue           |  70 +-
 src/components/ProposalProcess.vue            |  34 +-
 src/components/TxDialog.vue                   |   4 +-
 src/components/UptimeBar.vue                  |  15 +-
 src/components/ValidatorCommissionRate.vue    | 215 +++---
 src/components/WasmVerification.vue           | 349 +++++----
 src/components/ad/AdBanner.vue                |  15 +-
 src/components/charts/DonutChart.vue          |   7 +-
 src/components/charts/PriceMarketChart.vue    |  67 +-
 src/components/charts/TxsInBlocksChart.vue    |  62 +-
 src/components/charts/apexChartConfig.ts      |  69 +-
 src/components/dynamic/ArrayBytesElement.vue  |   2 +-
 src/components/dynamic/ArrayElement.vue       |   2 +-
 src/components/dynamic/ArrayObjectElement.vue |   8 +-
 src/components/dynamic/ObjectElement.vue      |  12 +-
 src/components/dynamic/TextElement.vue        | 131 ++--
 src/components/dynamic/TokenElement.vue       |   6 +-
 src/components/dynamic/TxsElement.vue         |  46 +-
 src/components/dynamic/UInt8Array.vue         |   4 +-
 src/components/icons/IconCommunity.vue        |   7 +-
 src/components/icons/IconDocumentation.vue    |   7 +-
 src/components/icons/IconEcosystem.vue        |   7 +-
 src/components/icons/IconSupport.vue          |   7 +-
 src/components/icons/IconWeb.vue              |  12 +-
 src/layouts/blank.vue                         |   5 +-
 src/layouts/components/ChainProfile.vue       |  50 +-
 src/layouts/components/DefaultLayout.vue      | 212 +++---
 src/layouts/components/NavBarI18n.vue         | 107 ++-
 src/layouts/components/NavBarWallet.vue       |  35 +-
 src/layouts/components/NavFooter.vue          |  26 +-
 src/layouts/components/NavbarSearch.vue       |  43 +-
 .../components/NavbarThemeSwitcher.vue        |  53 +-
 src/layouts/components/Sponsors.vue           |  51 +-
 src/layouts/types.d.ts                        |  78 +-
 src/libs/address.ts                           |  19 +-
 src/libs/api/customization/atomone.ts         | 113 +--
 src/libs/api/customization/evmos.ts           | 104 +--
 src/libs/api/customization/nolus.ts           |  41 +-
 src/libs/api/customization/osmosis.ts         | 113 +--
 src/libs/api/customization/v0.46.0.ts         |  71 +-
 src/libs/api/customization/v0.50.0.ts         |  72 +-
 src/libs/api/customization/xion.ts            |  39 +-
 src/libs/api/index.ts                         |   6 +-
 src/libs/api/registry.ts                      |  55 +-
 src/libs/client.ts                            | 205 +++---
 src/libs/http.ts                              |   9 +-
 src/libs/utils.ts                             |  70 +-
 src/modules/[chain]/account/[address].vue     | 357 ++++-----
 src/modules/[chain]/account/index.vue         |  91 +--
 src/modules/[chain]/block/[height].vue        |  84 ++-
 src/modules/[chain]/block/index.vue           |  82 ++-
 src/modules/[chain]/consensus/index.vue       | 104 +--
 src/modules/[chain]/cosmwasm/WasmClient.ts    | 217 +++---
 .../[chain]/cosmwasm/[code_id]/contracts.vue  |  54 +-
 .../cosmwasm/[code_id]/transactions.vue       | 525 +++++++-------
 src/modules/[chain]/cosmwasm/index.vue        | 141 ++--
 src/modules/[chain]/faucet/index.vue          | 265 +++----
 src/modules/[chain]/gov/[proposal_id].vue     | 127 ++--
 src/modules/[chain]/gov/index.vue             |  48 +-
 src/modules/[chain]/group/index.vue           |  14 +-
 src/modules/[chain]/ibc/connStore.ts          |  52 +-
 src/modules/[chain]/ibc/connection.vue        |  55 +-
 .../ibc/connection/[connection_id].vue        | 151 ++--
 src/modules/[chain]/ibc/connection/index.vue  |   4 +-
 src/modules/[chain]/index.vue                 | 265 ++++---
 src/modules/[chain]/indexStore.ts             |  65 +-
 src/modules/[chain]/nft/index.vue             |   6 +-
 src/modules/[chain]/nft/nftStore.ts           |  15 +-
 src/modules/[chain]/nft/types.ts              | 165 +++--
 src/modules/[chain]/params/index.vue          |  10 +-
 src/modules/[chain]/staking/[validator].vue   | 369 +++++-----
 src/modules/[chain]/staking/index.vue         | 686 ++++++++----------
 src/modules/[chain]/statesync/index.vue       |  51 +-
 src/modules/[chain]/supply/index.vue          |  65 +-
 src/modules/[chain]/tx/[hash].vue             | 216 +++---
 src/modules/[chain]/tx/index.vue              | 138 ++--
 src/modules/[chain]/uptime/customize.vue      | 234 +++---
 src/modules/[chain]/uptime/index.vue          | 148 ++--
 src/modules/[chain]/widget/index.vue          |  50 +-
 src/modules/wallet/accounts.vue               | 270 ++++---
 src/modules/wallet/keplr.vue                  | 169 ++---
 src/modules/wallet/portfolio.vue              | 243 ++++---
 src/modules/wallet/suggest.vue                | 292 ++++----
 src/modules/wallet/unisat.vue                 | 167 +++--
 src/modules/wallet/utils.ts                   |  55 +-
 src/pages/[...all].vue                        |  32 +-
 src/pages/index.vue                           | 104 +--
 src/plugins/i18n/locales/en.json              |   8 +-
 src/plugins/i18n/locales/es.json              |   2 +-
 src/plugins/i18n/locales/id.json              | 568 +++++++--------
 src/plugins/i18n/locales/ja.json              | 202 +++---
 src/plugins/i18n/locales/ko.json              |  76 +-
 src/router/index.ts                           |  26 +-
 src/stores/useBankStore.ts                    |   9 +-
 src/stores/useBaseStore.ts                    | 202 +++---
 src/stores/useBlockchain.ts                   |  50 +-
 src/stores/useCoinGecko.ts                    |   4 +-
 src/stores/useDashboard.ts                    | 129 ++--
 src/stores/useFormatter.ts                    | 183 +++--
 src/stores/useGovStore.ts                     |  23 +-
 src/stores/useParamsStore.ts                  |  75 +-
 src/stores/useStakingStore.ts                 | 102 ++-
 src/stores/useTxDialog.ts                     |  54 +-
 src/stores/useWalletStore.ts                  |  80 +-
 src/style.css                                 |  10 +-
 src/types/auth.ts                             |  31 +-
 src/types/bank.ts                             |  43 +-
 src/types/base.ts                             | 169 +++--
 src/types/common.ts                           |  85 ++-
 src/types/gov.ts                              |   4 +-
 src/types/group.ts                            |  68 +-
 src/types/ibc.ts                              | 176 +++--
 src/types/index.ts                            |  23 +-
 src/types/slashing.ts                         |  32 +-
 src/types/staking.ts                          | 122 ++--
 src/types/transaction.ts                      | 114 +--
 tailwind.config.js                            |   4 +-
 tsconfig.json                                 |   5 +-
 vite.config.ts                                |  24 +-
 vue3-json-viewer.d.ts                         |  36 +-
 138 files changed, 6072 insertions(+), 6247 deletions(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index 0ed67ee7..ef7e9a53 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -4,6 +4,9 @@
   "semi": true,
   "endOfLine": "auto",
   "bracketSpacing": true,
-  "TrailingCooma": true,
-  "arrowParens": "always"
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "singleAttributePerLine": false,
+  "printWidth": 120,
+  "useTabs": false
 }
diff --git a/chains/mainnet/axelar.json b/chains/mainnet/axelar.json
index 28bd6d98..255f9918 100644
--- a/chains/mainnet/axelar.json
+++ b/chains/mainnet/axelar.json
@@ -1,74 +1,70 @@
 {
-    "chain_name": "axelar",
-    "api": [
-        "https://rest.axelar.lava.build/lava-referer-97409c72-1a82-4861-8651-119c15151cbe"
-    ],
-    "rpc": [
-        "https://tm.axelar.lava.build/lava-referer-97409c72-1a82-4861-8651-119c15151cbe"
-    ],
-    "snapshot_provider": "",
-    "sdk_version": "0.45.6",
-    "coin_type": "118",
-    "min_tx_fee": "800",
-    "addr_prefix": "axelar",
-    "logo": "/logos/axelar.svg",
-    "theme_color": "#161723",
-    "assets": [
-        {
-            "base": "uaxl",
-            "symbol": "AXL",
-            "exponent": "6",
-            "coingecko_id": "axelar",
-            "logo": "/logos/axelar.svg"
-        },
-        {
-            "base": "uusdc",
-            "symbol": "axlUSDC",
-            "exponent": "6",
-            "coingecko_id": "usd-coin",
-            "logo": "/logos/usdc.svg"
-        },
-        {
-            "base": "uusdt",
-            "symbol": "axlUSDT",
-            "exponent": "6",
-            "coingecko_id": "tether",
-            "logo": "/logos/usdt.svg"
-        },
-        {
-            "base": "dai-wei",
-            "symbol": "axlDAI",
-            "exponent": "18",
-            "coingecko_id": "dai",
-            "logo": "/logos/dai.svg"
-        },
-        {
-            "base": "weth-wei",
-            "symbol": "axlWETH",
-            "exponent": "18",
-            "coingecko_id": "ethereum",
-            "logo": "/logos/weth.svg"
-        },
-        {
-            "base": "wmatic-wei",
-            "symbol": "axlWMATIC",
-            "exponent": "18",
-            "coingecko_id": "matic-network",
-            "logo": "/logos/wmatic.svg"
-        },
-        {
-            "base": "wavax-wei",
-            "symbol": "axlWAVAX",
-            "exponent": "18",
-            "coingecko_id": "avalanche-2",
-            "logo": "/logos/wavax.svg"
-        },
-        {
-            "base": "dot-planck",
-            "symbol": "axlDOT",
-            "exponent": "10",
-            "coingecko_id": "polkadot",
-            "logo": "/logos/dot.svg"
-        }
-    ]
+  "chain_name": "axelar",
+  "api": ["https://rest.axelar.lava.build/lava-referer-97409c72-1a82-4861-8651-119c15151cbe"],
+  "rpc": ["https://tm.axelar.lava.build/lava-referer-97409c72-1a82-4861-8651-119c15151cbe"],
+  "snapshot_provider": "",
+  "sdk_version": "0.45.6",
+  "coin_type": "118",
+  "min_tx_fee": "800",
+  "addr_prefix": "axelar",
+  "logo": "/logos/axelar.svg",
+  "theme_color": "#161723",
+  "assets": [
+    {
+      "base": "uaxl",
+      "symbol": "AXL",
+      "exponent": "6",
+      "coingecko_id": "axelar",
+      "logo": "/logos/axelar.svg"
+    },
+    {
+      "base": "uusdc",
+      "symbol": "axlUSDC",
+      "exponent": "6",
+      "coingecko_id": "usd-coin",
+      "logo": "/logos/usdc.svg"
+    },
+    {
+      "base": "uusdt",
+      "symbol": "axlUSDT",
+      "exponent": "6",
+      "coingecko_id": "tether",
+      "logo": "/logos/usdt.svg"
+    },
+    {
+      "base": "dai-wei",
+      "symbol": "axlDAI",
+      "exponent": "18",
+      "coingecko_id": "dai",
+      "logo": "/logos/dai.svg"
+    },
+    {
+      "base": "weth-wei",
+      "symbol": "axlWETH",
+      "exponent": "18",
+      "coingecko_id": "ethereum",
+      "logo": "/logos/weth.svg"
+    },
+    {
+      "base": "wmatic-wei",
+      "symbol": "axlWMATIC",
+      "exponent": "18",
+      "coingecko_id": "matic-network",
+      "logo": "/logos/wmatic.svg"
+    },
+    {
+      "base": "wavax-wei",
+      "symbol": "axlWAVAX",
+      "exponent": "18",
+      "coingecko_id": "avalanche-2",
+      "logo": "/logos/wavax.svg"
+    },
+    {
+      "base": "dot-planck",
+      "symbol": "axlDOT",
+      "exponent": "10",
+      "coingecko_id": "polkadot",
+      "logo": "/logos/dot.svg"
+    }
+  ]
 }
diff --git a/chains/mainnet/cosmos.json b/chains/mainnet/cosmos.json
index 954ec4bb..91e03b71 100644
--- a/chains/mainnet/cosmos.json
+++ b/chains/mainnet/cosmos.json
@@ -1,26 +1,28 @@
 {
-    "chain_name": "cosmos",
-    "registry_name": "cosmoshub",
-    "api": [
-        {"provider": "cosmos.directory", "address": "https://rest.cosmos.directory/cosmoshub"},
-        {"provider": "publicnode", "address": "https://cosmos-rest.publicnode.com"},
-        {"provider": "silknode", "address": "https://cosmos.api.silknodes.io"}
-    ],
-    "rpc": [
-        {"provider": "icycro", "address": "https://cosmos-rpc.icycro.org"}, 
-        {"provider": "dragonstake", "address": "https://rpc.cosmos.dragonstake.io"}, 
-        {"provider": "Golden Ratio Staking", "address": "https://rpc-cosmoshub.goldenratiostaking.net"}
-    ],
-    "sdk_version": "0.45.1",
-    "coin_type": "118",
-    "min_tx_fee": "800",
-    "addr_prefix": "cosmos",
-    "logo": "/logos/cosmos.svg",
-    "assets": [{
-        "base": "uatom",
-        "symbol": "ATOM",
-        "exponent": "6",
-        "coingecko_id": "cosmos", 
-        "logo": "/logos/cosmos.svg"
-    }]
+  "chain_name": "cosmos",
+  "registry_name": "cosmoshub",
+  "api": [
+    { "provider": "cosmos.directory", "address": "https://rest.cosmos.directory/cosmoshub" },
+    { "provider": "publicnode", "address": "https://cosmos-rest.publicnode.com" },
+    { "provider": "silknode", "address": "https://cosmos.api.silknodes.io" }
+  ],
+  "rpc": [
+    { "provider": "icycro", "address": "https://cosmos-rpc.icycro.org" },
+    { "provider": "dragonstake", "address": "https://rpc.cosmos.dragonstake.io" },
+    { "provider": "Golden Ratio Staking", "address": "https://rpc-cosmoshub.goldenratiostaking.net" }
+  ],
+  "sdk_version": "0.45.1",
+  "coin_type": "118",
+  "min_tx_fee": "800",
+  "addr_prefix": "cosmos",
+  "logo": "/logos/cosmos.svg",
+  "assets": [
+    {
+      "base": "uatom",
+      "symbol": "ATOM",
+      "exponent": "6",
+      "coingecko_id": "cosmos",
+      "logo": "/logos/cosmos.svg"
+    }
+  ]
 }
diff --git a/chains/mainnet/neutron.json b/chains/mainnet/neutron.json
index 76fc3dd6..6d9594a9 100644
--- a/chains/mainnet/neutron.json
+++ b/chains/mainnet/neutron.json
@@ -1,30 +1,43 @@
 {
-    "chain_name": "neutron",
-    "api": [
-        {"provider": "Polkachu", "address": "https://neutron-api.polkachu.com"},
-        {"provider": "NodeStake", "address": "https://api.neutron.nodestake.top"},
-        {"provider": "Allnodes", "address": "https://neutron-rest.publicnode.com"}
-    ],
-    "rpc": [
-        {"provider": "Polkachu", "address": "https://neutron-rpc.polkachu.com"}, 
-        {"provider": "NodeStake", "address": "https://rpc.neutron.nodestake.top"},
-        {"provider": "Allnodes", "address": "https://neutron-rpc.publicnode.com:443"}
-    ],
-    "provider_chain": {
-        "api": ["https://rest.cosmos.directory/cosmoshub"]
-    },
-    "features": ["dashboard", "blocks", "ibc", "cosmwasm", "uptime", "parameters", "state-sync", "consensus", "supply", "widget"],
-    "sdk_version": "0.45.1",
-    "coin_type": "118",
-    "min_tx_fee": "8000",
-    "assets": [{
-        "base": "untrn",
-        "symbol": "NTRN",
-        "exponent": "6",
-        "coingecko_id": "neutron",
-        "logo": "/logos/neutron.svg"
-    }],
-    "addr_prefix": "neutron",
-    "theme_color": "#161723",
-    "logo": "/logos/neutron.svg"
+  "chain_name": "neutron",
+  "api": [
+    { "provider": "Polkachu", "address": "https://neutron-api.polkachu.com" },
+    { "provider": "NodeStake", "address": "https://api.neutron.nodestake.top" },
+    { "provider": "Allnodes", "address": "https://neutron-rest.publicnode.com" }
+  ],
+  "rpc": [
+    { "provider": "Polkachu", "address": "https://neutron-rpc.polkachu.com" },
+    { "provider": "NodeStake", "address": "https://rpc.neutron.nodestake.top" },
+    { "provider": "Allnodes", "address": "https://neutron-rpc.publicnode.com:443" }
+  ],
+  "provider_chain": {
+    "api": ["https://rest.cosmos.directory/cosmoshub"]
+  },
+  "features": [
+    "dashboard",
+    "blocks",
+    "ibc",
+    "cosmwasm",
+    "uptime",
+    "parameters",
+    "state-sync",
+    "consensus",
+    "supply",
+    "widget"
+  ],
+  "sdk_version": "0.45.1",
+  "coin_type": "118",
+  "min_tx_fee": "8000",
+  "assets": [
+    {
+      "base": "untrn",
+      "symbol": "NTRN",
+      "exponent": "6",
+      "coingecko_id": "neutron",
+      "logo": "/logos/neutron.svg"
+    }
+  ],
+  "addr_prefix": "neutron",
+  "theme_color": "#161723",
+  "logo": "/logos/neutron.svg"
 }
diff --git a/chains/mainnet/nolus.json b/chains/mainnet/nolus.json
index 81bdd484..2c832db9 100644
--- a/chains/mainnet/nolus.json
+++ b/chains/mainnet/nolus.json
@@ -1,27 +1,29 @@
 {
-    "chain_name": "nolus",
-    "coingecko": "nolus",
-    "api": [
-        {"provider": "Nolus", "address": "https://pirin-cl.nolus.network:1317"},
-        {"provider": "LavenderFive", "address": "https://nolus-api.lavenderfive.com:443"},
-        {"provider": "Allnodes", "address": "https://nolus-rest.publicnode.com"}
-    ],
-    "rpc": [
-        {"provider": "Nolus", "address": "https://pirin-cl.nolus.network:26657"}, 
-        {"provider": "LavenderFive", "address": "https://nolus-rpc.lavenderfive.com:443"},
-        {"provider": "Allnodes", "address": "https://nolus-rpc.publicnode.com:443"}
-    ],
-    "snapshot_provider": "",
-    "sdk_version": "v0.47.6",
-    "coin_type": "118",
-    "min_tx_fee": "0",
-    "addr_prefix": "nolus",
-    "logo": "/logos/nolus.svg",
-    "assets": [{
-        "base": "unls",
-        "symbol": "NLS",
-        "exponent": "6",
-        "coingecko_id": "nolus",
-        "logo": "/logos/nolus.svg"
-    }]
+  "chain_name": "nolus",
+  "coingecko": "nolus",
+  "api": [
+    { "provider": "Nolus", "address": "https://pirin-cl.nolus.network:1317" },
+    { "provider": "LavenderFive", "address": "https://nolus-api.lavenderfive.com:443" },
+    { "provider": "Allnodes", "address": "https://nolus-rest.publicnode.com" }
+  ],
+  "rpc": [
+    { "provider": "Nolus", "address": "https://pirin-cl.nolus.network:26657" },
+    { "provider": "LavenderFive", "address": "https://nolus-rpc.lavenderfive.com:443" },
+    { "provider": "Allnodes", "address": "https://nolus-rpc.publicnode.com:443" }
+  ],
+  "snapshot_provider": "",
+  "sdk_version": "v0.47.6",
+  "coin_type": "118",
+  "min_tx_fee": "0",
+  "addr_prefix": "nolus",
+  "logo": "/logos/nolus.svg",
+  "assets": [
+    {
+      "base": "unls",
+      "symbol": "NLS",
+      "exponent": "6",
+      "coingecko_id": "nolus",
+      "logo": "/logos/nolus.svg"
+    }
+  ]
 }
diff --git a/chains/mainnet/osmosis.json b/chains/mainnet/osmosis.json
index 35669f39..449480d6 100644
--- a/chains/mainnet/osmosis.json
+++ b/chains/mainnet/osmosis.json
@@ -1,32 +1,47 @@
 {
-    "chain_name": "osmosis",
-    "coingecko": "osmosis",
-    "api": ["https://lcd.osmosis.zone","https://api-osmosis-ia.cosmosia.notional.ventures", "https://osmosis-api.polkachu.com", "https://lcd-osmosis.blockapsis.com"],
-    "rpc": ["https://rpc.osmosis.zone", "https://rpc-osmosis-ia.cosmosia.notional.ventures:443", "https://osmosis-rpc.polkachu.com:443", "https://osmosis.validator.network:443", "https://rpc-osmosis.blockapsis.com:443"],
-    "snapshot_provider": "",
-    "sdk_version": "0.46.1",
-    "coin_type": "118",
-    "min_tx_fee": "800",
-    "addr_prefix": "osmo",
-    "logo": "/logos/osmosis.jpg",
-    "theme_color": "#812cd6",
-    "assets": [{
-        "base": "uosmo",
-        "symbol": "OSMO",
-        "exponent": "6",
-        "coingecko_id": "osmosis", 
-        "logo": "/logos/osmosis.jpg"
-    },{
-        "base": "uion",
-        "symbol": "ION",
-        "exponent": "6",
-        "coingecko_id": "ion", 
-        "logo": "/logos/osmosis.jpg"
-    },{
-        "base": "usomm",
-        "symbol": "SOMM",
-        "exponent": "6",
-        "coingecko_id": "somm", 
-        "logo": ""
-    }]
+  "chain_name": "osmosis",
+  "coingecko": "osmosis",
+  "api": [
+    "https://lcd.osmosis.zone",
+    "https://api-osmosis-ia.cosmosia.notional.ventures",
+    "https://osmosis-api.polkachu.com",
+    "https://lcd-osmosis.blockapsis.com"
+  ],
+  "rpc": [
+    "https://rpc.osmosis.zone",
+    "https://rpc-osmosis-ia.cosmosia.notional.ventures:443",
+    "https://osmosis-rpc.polkachu.com:443",
+    "https://osmosis.validator.network:443",
+    "https://rpc-osmosis.blockapsis.com:443"
+  ],
+  "snapshot_provider": "",
+  "sdk_version": "0.46.1",
+  "coin_type": "118",
+  "min_tx_fee": "800",
+  "addr_prefix": "osmo",
+  "logo": "/logos/osmosis.jpg",
+  "theme_color": "#812cd6",
+  "assets": [
+    {
+      "base": "uosmo",
+      "symbol": "OSMO",
+      "exponent": "6",
+      "coingecko_id": "osmosis",
+      "logo": "/logos/osmosis.jpg"
+    },
+    {
+      "base": "uion",
+      "symbol": "ION",
+      "exponent": "6",
+      "coingecko_id": "ion",
+      "logo": "/logos/osmosis.jpg"
+    },
+    {
+      "base": "usomm",
+      "symbol": "SOMM",
+      "exponent": "6",
+      "coingecko_id": "somm",
+      "logo": ""
+    }
+  ]
 }
diff --git a/chains/testnet/bfhevm.json b/chains/testnet/bfhevm.json
index f3c7789d..c136f030 100644
--- a/chains/testnet/bfhevm.json
+++ b/chains/testnet/bfhevm.json
@@ -1,19 +1,21 @@
 {
-    "chain_name": "bfhevm_777-1",
-    "api": ["https://rest-testnet-bfhevm.xyz:443"],
-    "rpc": ["https://rpc-bfhevm.xyz:8443"],
-    "coingecko": "",
-    "snapshot_provider": "",
-    "sdk_version": "0.45.7",
-    "coin_type": "60",
-    "min_tx_fee": "700",
-    "addr_prefix": "bfh",
-    "logo": "",
-    "assets": [{
-        "base": "abfh",
-        "symbol": "BFH",
-        "exponent": "18",
-        "coingecko_id": "", 
-        "logo": ""
-    }]
-    }
\ No newline at end of file
+  "chain_name": "bfhevm_777-1",
+  "api": ["https://rest-testnet-bfhevm.xyz:443"],
+  "rpc": ["https://rpc-bfhevm.xyz:8443"],
+  "coingecko": "",
+  "snapshot_provider": "",
+  "sdk_version": "0.45.7",
+  "coin_type": "60",
+  "min_tx_fee": "700",
+  "addr_prefix": "bfh",
+  "logo": "",
+  "assets": [
+    {
+      "base": "abfh",
+      "symbol": "BFH",
+      "exponent": "18",
+      "coingecko_id": "",
+      "logo": ""
+    }
+  ]
+}
diff --git a/chains/testnet/crossfi.json b/chains/testnet/crossfi.json
index 5414f3f2..d6026175 100644
--- a/chains/testnet/crossfi.json
+++ b/chains/testnet/crossfi.json
@@ -1,11 +1,11 @@
 {
-    "chain_name": "crossfi-testnet-1",
-    "api": ["https://crossfi-testnet-api.forpeaky.xyz"],
-    "rpc": ["https://crossfi-testnet-rpc.forpeaky.xyz"],
-    "coingecko": "",
-    "snapshot_provider": "",
-    "sdk_version": "0.47.1",
-    "coin_type": "118",
-    "min_tx_fee": "500",
-    "addr_prefix": "crossfi"
-    }
\ No newline at end of file
+  "chain_name": "crossfi-testnet-1",
+  "api": ["https://crossfi-testnet-api.forpeaky.xyz"],
+  "rpc": ["https://crossfi-testnet-rpc.forpeaky.xyz"],
+  "coingecko": "",
+  "snapshot_provider": "",
+  "sdk_version": "0.47.1",
+  "coin_type": "118",
+  "min_tx_fee": "500",
+  "addr_prefix": "crossfi"
+}
diff --git a/env.d.ts b/env.d.ts
index f18e8379..33f49a00 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,3 +1,3 @@
 /// <reference types="vite/client" />
 
-declare module '@personaxyz/ad-sdk';
\ No newline at end of file
+declare module '@personaxyz/ad-sdk';
diff --git a/index.html b/index.html
index 28138f89..da6fcea7 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ping Dashboard - Cosmos Blockchain Explorer And Web Wallet</title>
-    <meta name="description" content="Ping Dashboard is a block explorer/web wallet for blockchains built on Cosmos SDK, Cosmoshub, Osmosis, Juno, Evmos, Injective, Canto and 70+ blockchains listed on ping.pub" />
-    <link rel="stylesheet" type="text/css" href="/loader.css" />    
+    <meta
+      name="description"
+      content="Ping Dashboard is a block explorer/web wallet for blockchains built on Cosmos SDK, Cosmoshub, Osmosis, Juno, Evmos, Injective, Canto and 70+ blockchains listed on ping.pub"
+    />
+    <link rel="stylesheet" type="text/css" href="/loader.css" />
   </head>
   <body>
     <div id="app">
@@ -26,19 +29,20 @@
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-SSBKVF3GMX"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
+      function gtag() {
+        dataLayer.push(arguments);
+      }
       gtag('js', new Date());
       // Set default consent to 'denied' as a placeholder
       // Determine actual values based on your own requirements
       gtag('consent', 'default', {
-        'ad_storage': 'denied',
-        'ad_user_data': 'denied',
-        'ad_personalization': 'denied',
-        'analytics_storage': 'denied'
+        ad_storage: 'denied',
+        ad_user_data: 'denied',
+        ad_personalization: 'denied',
+        analytics_storage: 'denied',
       });
       gtag('config', 'G-SSBKVF3GMX');
     </script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ping-pub/widget@latest/dist/widget.min.js"></script>
-
   </body>
 </html>
diff --git a/package.json b/package.json
index 87ef6398..f3147404 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "target": "",
   "scripts": {
     "dev": "vite",
+    "format": "prettier --write .",
     "serve": "vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
@@ -63,8 +64,10 @@
     "@types/semver": "7.5.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",
+    "husky": "^9.1.7",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
+    "pretty-quick": "^4.2.2",
     "sass": "^1.58.0",
     "shiki": "^1.0.0-beta.0",
     "typescript": "~4.9.5",
@@ -75,5 +78,11 @@
     "vite-plugin-pages": "^0.28.0",
     "vue-json-viewer": "3",
     "vue-tsc": "^1.0.12"
-  }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d..12a703d9 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/public/test.html b/public/test.html
index 6b46c576..6edc088d 100644
--- a/public/test.html
+++ b/public/test.html
@@ -1,17 +1,17 @@
 <html>
-<head>
-   <title>Widget Test</title> 
-   <script src="https://unpkg.com/ping-widget@latest/dist/ping-widget.js" type="module" ></script>
-</head>
-<body>
+  <head>
+    <title>Widget Test</title>
+    <script src="https://unpkg.com/ping-widget@latest/dist/ping-widget.js" type="module"></script>
+  </head>
+  <body>
     <div class="p-5">
-    <div>
-    <ping-connect-wallet chain-id="kava_2222-10" hd-path="m/44'/118/0'/0/0"/>
-    </div>
-    <div>
+      <div>
+        <ping-connect-wallet chain-id="kava_2222-10" hd-path="m/44'/118/0'/0/0" />
+      </div>
+      <div>
         <label for="PingTokenConvert" class="btn">Buy Kava</label>
-        <ping-token-convert chain-name="kava" endpoint="https://api.data.kava.io" hd-path="m/44'/118/0'/0/0"/>
+        <ping-token-convert chain-name="kava" endpoint="https://api.data.kava.io" hd-path="m/44'/118/0'/0/0" />
+      </div>
     </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index d157a5fd..dc7e1b58 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -13,8 +13,8 @@ function calculateValue(value: any) {
   if (Array.isArray(value)) {
     return (value[0] && value[0].amount) || '-';
   }
-  if(String(value).search(/^\d+s$/g) > -1) {
-    return formatSeconds(value)
+  if (String(value).search(/^\d+s$/g) > -1) {
+    return formatSeconds(value);
   }
   const newValue = Number(value);
   if (`${newValue}` === 'NaN' || typeof value === 'boolean') {
@@ -28,8 +28,8 @@ function calculateValue(value: any) {
 }
 
 function formatTitle(v: string) {
-  if(!v) return ""
-  return v.replace(/_/g, " ")
+  if (!v) return '';
+  return v.replace(/_/g, ' ');
 }
 </script>
 <template>
@@ -38,14 +38,8 @@ function formatTitle(v: string) {
     v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
   >
     <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
-    <div
-      class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
-    >
-      <div
-        v-for="(item, index) of props.cardItem?.items"
-        :key="index"
-        class="rounded-sm bg-active px-4 py-2"
-      >
+    <div class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4">
+      <div v-for="(item, index) of props.cardItem?.items" :key="index" class="rounded-sm bg-active px-4 py-2">
         <div class="text-xs mb-2 text-secondary capitalize">{{ formatTitle(item?.subtitle) }}</div>
         <div class="text-base text-main">{{ calculateValue(item?.value) }}</div>
       </div>
diff --git a/src/components/CardStatisticsVertical.vue b/src/components/CardStatisticsVertical.vue
index e4bbc75d..7bc36b5e 100644
--- a/src/components/CardStatisticsVertical.vue
+++ b/src/components/CardStatisticsVertical.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { controlledComputed } from '@vueuse/core'
+import { controlledComputed } from '@vueuse/core';
 
 interface Props {
   title: string;
@@ -24,15 +24,9 @@ const isPositive = controlledComputed(
 <template>
   <div class="bg-base-100 shadow rounded p-4">
     <div class="flex items-center justify-center">
-      <div
-        v-if="props.icon"
-        class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center"
-      >
+      <div v-if="props.icon" class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center">
         <Icon :class="[`text-${props?.color}`]" :icon="props.icon" size="32" />
-        <div
-          class="absolute top-0 left-0 bottom-0 right-0 opacity-20"
-          :class="[`bg-${props?.color}`]"
-        ></div>
+        <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20" :class="[`bg-${props?.color}`]"></div>
       </div>
 
       <div
@@ -47,7 +41,7 @@ const isPositive = controlledComputed(
 
     <div class="">
       <h6 class="text-lg text-center font-semibold mt-2 mb-1">
-        {{ props.stats || '-'}}
+        {{ props.stats || '-' }}
       </h6>
       <p class="text-sm text-center">
         {{ props.title }}
diff --git a/src/components/ChainSummary.vue b/src/components/ChainSummary.vue
index 53edb036..0143df28 100644
--- a/src/components/ChainSummary.vue
+++ b/src/components/ChainSummary.vue
@@ -16,12 +16,8 @@ const conf = computed(() => dashboardStore.chains[props.name] || {});
 const addFavor = (e: Event) => {
   e.stopPropagation();
   e.preventDefault();
-  dashboardStore.favoriteMap[props.name] =
-    !dashboardStore?.favoriteMap?.[props.name];
-  window.localStorage.setItem(
-    'favoriteMap',
-    JSON.stringify(dashboardStore.favoriteMap)
-  );
+  dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
+  window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap));
 };
 </script>
 <template>
@@ -40,8 +36,7 @@ const addFavor = (e: Event) => {
       class="pl-4 text-xl"
       :class="{
         'text-warning': dashboardStore?.favoriteMap?.[props.name],
-        'text-gray-300 dark:text-gray-500':
-          !dashboardStore?.favoriteMap?.[props.name],
+        'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name],
       }"
     >
       <Icon icon="mdi-star" />
diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue
index 26dc752a..1303dcfd 100644
--- a/src/components/Countdown.vue
+++ b/src/components/Countdown.vue
@@ -7,26 +7,25 @@ const props = defineProps({
   css: { type: String },
 });
 
-const s = ref(0)
-
+const s = ref(0);
 </script>
 <template>
   <Countdown
     v-if="time"
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
-    class="countdown-container justify-items-center "
+    class="countdown-container justify-items-center"
   >
-    <span class="text-primary font-bold " :class="css">{{ days }}</span> days 
-    <span class="text-primary font-bold" :class="css">{{ hours }}</span> hours 
+    <span class="text-primary font-bold" :class="css">{{ days }}</span> days
+    <span class="text-primary font-bold" :class="css">{{ hours }}</span> hours
     <span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes
-      <span class="text-primary font-bold w-40" :class="css">
-        <Transition name="slide-up">
-          <span v-if="seconds % 2 === 0" class="countdown">{{ seconds }}</span> 
-          <span v-else="seconds % 2 === 1" class="countdown">{{ seconds }}</span>
-        </Transition>
-      </span>
-      <span class="ml-10">seconds</span>
+    <span class="text-primary font-bold w-40" :class="css">
+      <Transition name="slide-up">
+        <span v-if="seconds % 2 === 0" class="countdown">{{ seconds }}</span>
+        <span v-else="seconds % 2 === 1" class="countdown">{{ seconds }}</span>
+      </Transition>
+    </span>
+    <span class="ml-10">seconds</span>
   </Countdown>
 </template>
 
@@ -42,5 +41,4 @@ const s = ref(0)
   text-align: right;
   float: right;
 }
-
 </style>
diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
index 28247b06..49aeb48d 100644
--- a/src/components/PaginationBar.vue
+++ b/src/components/PaginationBar.vue
@@ -2,49 +2,53 @@
 import { computed, ref } from 'vue';
 
 const props = defineProps({
-    total: { type: String },
-    limit: { type: Number },
-    callback: { type: Function, required: true },
+  total: { type: String },
+  limit: { type: Number },
+  callback: { type: Function, required: true },
 });
-const current = ref(1)
-const showSize = 3
+const current = ref(1);
+const showSize = 3;
 const pages = computed(() => {
-    const pages: { color: string, page: number }[] = []
-    const total = Number(props.total || 0)
-    if (total > 0 && props.limit && total > props.limit) {
-        let page = 0
-        while (true) {
-            if (page * props.limit >= total) break
-            page += 1
-            if (total / props.limit > 10 && page > showSize && page < (total / props.limit - showSize + 1)) {
-                if (!(page >= current.value - 1 && page <= current.value + 1)) {
-                    continue
-                }
-            }
-            pages.push({
-                color: page === current.value ? 'btn-primary' : '',
-                page: page,
-            })
+  const pages: { color: string; page: number }[] = [];
+  const total = Number(props.total || 0);
+  if (total > 0 && props.limit && total > props.limit) {
+    let page = 0;
+    while (true) {
+      if (page * props.limit >= total) break;
+      page += 1;
+      if (total / props.limit > 10 && page > showSize && page < total / props.limit - showSize + 1) {
+        if (!(page >= current.value - 1 && page <= current.value + 1)) {
+          continue;
         }
+      }
+      pages.push({
+        color: page === current.value ? 'btn-primary' : '',
+        page: page,
+      });
     }
-    return pages
-})
+  }
+  return pages;
+});
 
 function gotoPage(pageNum: number) {
-    current.value = pageNum
-    props.callback(pageNum)
+  current.value = pageNum;
+  props.callback(pageNum);
 }
-
 </script>
 <template>
-    <div class="my-5 text-center">
-        <div v-if="total && limit" class="btn-group">
-            <button v-for="{ page, color } in pages" :key="page"
-                class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-gray-800 dark:text-white" :class="{
-                    '!btn-primary': color === 'btn-primary',
-                }" @click="gotoPage(page)">
-                {{ page }}
-            </button>
-        </div>
+  <div class="my-5 text-center">
+    <div v-if="total && limit" class="btn-group">
+      <button
+        v-for="{ page, color } in pages"
+        :key="page"
+        class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-gray-800 dark:text-white"
+        :class="{
+          '!btn-primary': color === 'btn-primary',
+        }"
+        @click="gotoPage(page)"
+      >
+        {{ page }}
+      </button>
     </div>
+  </div>
 </template>
diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index 98b52106..361b3526 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -1,10 +1,5 @@
 <script lang="ts" setup>
-import {
-  useBlockchain,
-  useFormatter,
-  useStakingStore,
-  useTxDialog,
-} from '@/stores';
+import { useBlockchain, useFormatter, useStakingStore, useTxDialog } from '@/stores';
 import { select } from '@/components/dynamic/index';
 import type { PaginatedProposals } from '@/types';
 import ProposalProcess from './ProposalProcess.vue';
@@ -39,10 +34,9 @@ const voterStatusMap: Record<string, string> = {
 
 const proposalInfo = ref();
 
-function metaItem(metadata: string|undefined): { title: string; summary: string } {
-  return metadata ? JSON.parse(metadata) : {}
+function metaItem(metadata: string | undefined): { title: string; summary: string } {
+  return metadata ? JSON.parse(metadata) : {};
 }
-
 </script>
 <template>
   <div class="bg-white dark:bg-[#28334e] rounded text-sm">
@@ -70,15 +64,12 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
                 v-if="item.content"
                 class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
               >
-                {{ showType(item.content['@type']) }} 
+                {{ showType(item.content['@type']) }}
               </div>
             </div>
           </td>
           <td class="w-60">
-            <ProposalProcess
-              :pool="staking.pool"
-              :tally="item.final_tally_result"
-            ></ProposalProcess>
+            <ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
           </td>
           <td class="w-36">
             <div class="pl-4">
@@ -138,19 +129,11 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
     </table>
 
     <div class="lg:!hidden">
-      <div
-        v-for="(item, index) in proposals?.proposals"
-        :key="index"
-        class="px-4 py-4"
-      >
-        <div
-          class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
-        >
-          <RouterLink
-            :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-            class="flex-1 w-0 truncate mr-4"
-            >{{ item?.content?.title || item?.title || metaItem(item?.metadata)?.title }}</RouterLink
-          >
+      <div v-for="(item, index) in proposals?.proposals" :key="index" class="px-4 py-4">
+        <div class="text-main text-base mb-1 flex justify-between hover:text-indigo-400">
+          <RouterLink :to="`/${chain.chainName}/gov/${item?.proposal_id}`" class="flex-1 w-0 truncate mr-4">{{
+            item?.content?.title || item?.title || metaItem(item?.metadata)?.title
+          }}</RouterLink>
           <label
             for="proposal-detail-modal"
             class="text-main text-base hover:text-indigo-400 cursor-pointer"
@@ -170,18 +153,13 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
             </div>
           </div>
 
-          <div
-            class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
-          >
+          <div class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end">
             {{ format.toDay(item.voting_end_time, 'from') }}
           </div>
         </div>
 
         <div>
-          <ProposalProcess
-            :pool="staking.pool"
-            :tally="item.final_tally_result"
-          ></ProposalProcess>
+          <ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
         </div>
 
         <div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
@@ -225,7 +203,6 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
 
               <span v-else>Vote</span></label
             >
-           
           </div>
         </div>
       </div>
@@ -234,17 +211,24 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
     <input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
     <label for="proposal-detail-modal" class="modal">
       <label class="modal-box !w-11/12 !max-w-5xl" for="">
-        <label
-          for="proposal-detail-modal"
-          class="btn btn-sm btn-circle absolute right-2 top-2"
-          >✕</label
-        >
+        <label for="proposal-detail-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
         <h3 class="font-bold text-lg">Description</h3>
         <p class="py-4">
           <Component
-            v-if="proposalInfo?.content?.description || proposalInfo?.summary || metaItem(proposalInfo?.metadata)?.summary"
-            :is="select(proposalInfo?.content?.description || proposalInfo?.summary || metaItem(proposalInfo?.metadata)?.summary, 'horizontal')"
-            :value="proposalInfo?.content?.description || proposalInfo?.summary || metaItem(proposalInfo?.metadata)?.summary"
+            v-if="
+              proposalInfo?.content?.description || proposalInfo?.summary || metaItem(proposalInfo?.metadata)?.summary
+            "
+            :is="
+              select(
+                proposalInfo?.content?.description ||
+                  proposalInfo?.summary ||
+                  metaItem(proposalInfo?.metadata)?.summary,
+                'horizontal'
+              )
+            "
+            :value="
+              proposalInfo?.content?.description || proposalInfo?.summary || metaItem(proposalInfo?.metadata)?.summary
+            "
           >
           </Component>
         </p>
diff --git a/src/components/ProposalProcess.vue b/src/components/ProposalProcess.vue
index b970feca..893f440d 100644
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@@ -15,41 +15,21 @@ const props = defineProps({
 });
 const total = computed(() => props.pool?.bonded_tokens);
 const format = useFormatter();
-const yes = computed(() =>
-  format.calculatePercent(props.tally?.yes, total.value)
-);
-const no = computed(() =>
-  format.calculatePercent(props.tally?.no, total.value)
-);
-const abstain = computed(() =>
-  format.calculatePercent(props.tally?.abstain, total.value)
-);
-const veto = computed(() =>
-  format.calculatePercent(props.tally?.no_with_veto, total.value)
-);
+const yes = computed(() => format.calculatePercent(props.tally?.yes, total.value));
+const no = computed(() => format.calculatePercent(props.tally?.no, total.value));
+const abstain = computed(() => format.calculatePercent(props.tally?.abstain, total.value));
+const veto = computed(() => format.calculatePercent(props.tally?.no_with_veto, total.value));
 </script>
 
 <template>
   <div class="progress rounded-[3px] h-6 text-xs flex items-center">
-    <div
-      class="h-6 bg-yes flex items-center pl-2 text-white overflow-hidden"
-      :style="`width: ${yes}`"
-      :title="yes"
-    >
+    <div class="h-6 bg-yes flex items-center pl-2 text-white overflow-hidden" :style="`width: ${yes}`" :title="yes">
       {{ yes }}
     </div>
-    <div
-      class="h-6 bg-no flex items-center text-white overflow-hidden"
-      :style="`width: ${no}`"
-      :title="no"
-    >
+    <div class="h-6 bg-no flex items-center text-white overflow-hidden" :style="`width: ${no}`" :title="no">
       {{ no }}
     </div>
-    <div
-      class="h-6 bg-[#B71C1C] flex items-center text-white overflow-hidden"
-      :style="`width: ${veto};`"
-      :title="veto"
-    >
+    <div class="h-6 bg-[#B71C1C] flex items-center text-white overflow-hidden" :style="`width: ${veto};`" :title="veto">
       {{ veto }}
     </div>
     <div
diff --git a/src/components/TxDialog.vue b/src/components/TxDialog.vue
index 3617564b..7f53d525 100644
--- a/src/components/TxDialog.vue
+++ b/src/components/TxDialog.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { useTxDialog, useBlockchain } from '@/stores';
 const store = useTxDialog();
-const chainStore = useBlockchain()
+const chainStore = useBlockchain();
 </script>
 <template>
   <ping-tx-dialog
     :type="store.type"
     :sender="store.sender"
     :endpoint="store.endpoint"
-    :params='store.params'
+    :params="store.params"
     :hd-path="store.hdPaths"
     :registry-name="chainStore.current?.prettyName || chainStore.chainName"
     @view="store.view"
diff --git a/src/components/UptimeBar.vue b/src/components/UptimeBar.vue
index a870f601..c1ae5be5 100644
--- a/src/components/UptimeBar.vue
+++ b/src/components/UptimeBar.vue
@@ -2,24 +2,15 @@
 import type { PropType } from 'vue';
 
 const props = defineProps({
-  blocks: { type: Array as PropType<{height:string, color: string}[]> },
+  blocks: { type: Array as PropType<{ height: string; color: string }[]> },
 });
-
 </script>
 <template>
   <div class="flex gap-0.5">
     <div class="cursor-default" v-for="(item, index) in blocks" :key="index">
-      <div class="tooltip" 
-          :data-tip="item.height" 
-          :class="item.color"
-          style="width: 3px;"
-      >
-        &nbsp;
-      </div>
+      <div class="tooltip" :data-tip="item.height" :class="item.color" style="width: 3px">&nbsp;</div>
     </div>
   </div>
 </template>
 
-<style>
-  
-</style>
+<style></style>
diff --git a/src/components/ValidatorCommissionRate.vue b/src/components/ValidatorCommissionRate.vue
index 99b88c56..664df2be 100644
--- a/src/components/ValidatorCommissionRate.vue
+++ b/src/components/ValidatorCommissionRate.vue
@@ -5,142 +5,127 @@ import { useFormatter } from '@/stores';
 import type { CommissionRate } from '@/types';
 
 const props = defineProps({
-    commission: { type: Object as PropType<CommissionRate> },
+  commission: { type: Object as PropType<CommissionRate> },
 });
 
-let rate = computed(
-    () => Number(props.commission?.commission_rates.rate || 0) * 100
-);
-let change = computed(
-    () => Number(props.commission?.commission_rates.max_change_rate || 0) * 100
-);
-let max = computed(
-    () => Number(props.commission?.commission_rates.max_rate || 1) * 100
-);
+let rate = computed(() => Number(props.commission?.commission_rates.rate || 0) * 100);
+let change = computed(() => Number(props.commission?.commission_rates.max_change_rate || 0) * 100);
+let max = computed(() => Number(props.commission?.commission_rates.max_rate || 1) * 100);
 
 const left = rate;
 const right = computed(() => max.value - rate.value);
 
-const s1 = computed(() =>
-    left.value > change.value ? left.value - change.value : 0
-);
-const s2 = computed(() =>
-    left.value > change.value ? change.value : left.value
-);
+const s1 = computed(() => (left.value > change.value ? left.value - change.value : 0));
+const s2 = computed(() => (left.value > change.value ? change.value : left.value));
 const s3 = 2;
-const s4 = computed(() =>
-    right.value > change.value ? change.value : right.value
-);
-const s5 = computed(() =>
-    right.value > change.value ? right.value - change.value : 0
-);
+const s4 = computed(() => (right.value > change.value ? change.value : right.value));
+const s5 = computed(() => (right.value > change.value ? right.value - change.value : 0));
 
 const series = computed(() => [s1.value, s2.value, s3, s4.value, s5.value]);
 
 const format = useFormatter();
 
 const chartConfig = computed(() => {
+  const secondaryText = `hsl(var(--bc))`;
+  const primaryText = `hsl(var(--bc))`;
 
-    const secondaryText = `hsl(var(--bc))`;
-    const primaryText = `hsl(var(--bc))`;
-
-    return {
-        chart: {
-            width: '200px',
-            sparkline: { enabled: false },
-        },
-        colors: ['rgba(109,120,141,0.2)', 'rgba(114,225,40,0.2)', 'rgba(114,225,40,1)', 'rgba(114,225,40,0.2)', 'rgba(109,120,141,0.2)'],
-        legend: { show: false },
-        tooltip: { enabled: false },
-        dataLabels: { enabled: false },
-        stroke: {
-            width: 3,
-            lineCap: 'round',
-            colors: ['hsl(var(--b1))'],
-        },
-        labels: [
-            'Available',
-            'Daily Change',
-            'Commission Rate',
-            'Daily Change',
-            'Available',
-        ],
-        states: {
-            hover: {
-                filter: { type: 'none' },
+  return {
+    chart: {
+      width: '200px',
+      sparkline: { enabled: false },
+    },
+    colors: [
+      'rgba(109,120,141,0.2)',
+      'rgba(114,225,40,0.2)',
+      'rgba(114,225,40,1)',
+      'rgba(114,225,40,0.2)',
+      'rgba(109,120,141,0.2)',
+    ],
+    legend: { show: false },
+    tooltip: { enabled: false },
+    dataLabels: { enabled: false },
+    stroke: {
+      width: 3,
+      lineCap: 'round',
+      colors: ['hsl(var(--b1))'],
+    },
+    labels: ['Available', 'Daily Change', 'Commission Rate', 'Daily Change', 'Available'],
+    states: {
+      hover: {
+        filter: { type: 'none' },
+      },
+      active: {
+        filter: { type: 'none' },
+      },
+    },
+    plotOptions: {
+      pie: {
+        endAngle: 130,
+        startAngle: -130,
+        customScale: 0.9,
+        donut: {
+          size: '83%',
+          labels: {
+            show: true,
+            name: {
+              offsetY: 25,
+              fontSize: '1rem',
+              color: secondaryText,
             },
-            active: {
-                filter: { type: 'none' },
+            value: {
+              offsetY: -15,
+              fontWeight: 500,
+              fontSize: '2.125rem',
+              formatter: (value: unknown) => `${rate.value.toFixed(1)}%`,
+              color: primaryText,
             },
+            total: {
+              show: true,
+              label: 'Commission Rate',
+              fontSize: '1rem',
+              color: secondaryText,
+              formatter: () => `${rate.value.toFixed(1)}%`,
+            },
+          },
         },
-        plotOptions: {
-            pie: {
-                endAngle: 130,
-                startAngle: -130,
-                customScale: 0.9,
-                donut: {
-                    size: '83%',
-                    labels: {
-                        show: true,
-                        name: {
-                            offsetY: 25,
-                            fontSize: '1rem',
-                            color: secondaryText,
-                        },
-                        value: {
-                            offsetY: -15,
-                            fontWeight: 500,
-                            fontSize: '2.125rem',
-                            formatter: (value: unknown) => `${rate.value.toFixed(1)}%`,
-                            color: primaryText,
-                        },
-                        total: {
-                            show: true,
-                            label: 'Commission Rate',
-                            fontSize: '1rem',
-                            color: secondaryText,
-                            formatter: () => `${rate.value.toFixed(1)}%`,
-                        },
-                    },
-                },
-            },
+      },
+    },
+    responsive: [
+      {
+        breakpoint: 1709,
+        options: {
+          chart: { height: 237 },
         },
-        responsive: [
-            {
-                breakpoint: 1709,
-                options: {
-                    chart: { height: 237 },
-                },
-            },
-        ],
-    };
+      },
+    ],
+  };
 });
 </script>
 
 <template>
-    <div class="bg-base-100 rounded shadow p-4">
-        <div class="text-lg text-main font-semibold mb-1">Commission Rate</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">
-            {{ `Updated at ${format.toDay(props.commission?.update_time, 'short')}` }}
-        </div>
-        <div class="w-80 m-auto">
-            <ApexCharts type="donut" :options="chartConfig" :series="series" />
-        </div>
-        <div>
-            <div class="flex items-center justify-center flex-wrap gap-x-3">
-                <div class="flex items-center gap-x-2">
-                    <div class="bg-success w-[6px] h-[6px] rounded-full"></div>
-                    <span class="text-caption">Rate:{{ rate.toFixed(0) }}%</span>
-                </div>
-                <div class="flex items-center gap-x-2">
-                    <div class="bg-success w-[6px] h-[6px] rounded-full opacity-60"></div>
-                    <span class="text-caption">24h: ±{{ change }}%</span>
-                </div>
-                <div class="flex items-center gap-x-2">
-                    <div class="bg-secondary w-[6px] h-[6px] rounded-full"></div>
-                    <span class="text-caption">Max:{{ max }}%</span>
-                </div>
-            </div>
-        </div>
+  <div class="bg-base-100 rounded shadow p-4">
+    <div class="text-lg text-main font-semibold mb-1">Commission Rate</div>
+    <div class="text-sm text-gray-500 dark:text-gray-400">
+      {{ `Updated at ${format.toDay(props.commission?.update_time, 'short')}` }}
     </div>
+    <div class="w-80 m-auto">
+      <ApexCharts type="donut" :options="chartConfig" :series="series" />
+    </div>
+    <div>
+      <div class="flex items-center justify-center flex-wrap gap-x-3">
+        <div class="flex items-center gap-x-2">
+          <div class="bg-success w-[6px] h-[6px] rounded-full"></div>
+          <span class="text-caption">Rate:{{ rate.toFixed(0) }}%</span>
+        </div>
+        <div class="flex items-center gap-x-2">
+          <div class="bg-success w-[6px] h-[6px] rounded-full opacity-60"></div>
+          <span class="text-caption">24h: ±{{ change }}%</span>
+        </div>
+        <div class="flex items-center gap-x-2">
+          <div class="bg-secondary w-[6px] h-[6px] rounded-full"></div>
+          <span class="text-caption">Max:{{ max }}%</span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/components/WasmVerification.vue b/src/components/WasmVerification.vue
index 269d73e3..85fef7a4 100644
--- a/src/components/WasmVerification.vue
+++ b/src/components/WasmVerification.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { get, post } from "@/libs/http"
-import { useBaseStore, useTxDialog } from "@/stores";
-import { computed, onMounted, ref } from "vue";
-import TextElement from "@/components/dynamic/TextElement.vue";
+import { get, post } from '@/libs/http';
+import { useBaseStore, useTxDialog } from '@/stores';
+import { computed, onMounted, ref } from 'vue';
+import TextElement from '@/components/dynamic/TextElement.vue';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
-import { codeToHtml } from 'shiki'
-import { useWasmStore } from "@/modules/[chain]/cosmwasm/WasmStore";
-import { toBase64 } from "@cosmjs/encoding";
+import { codeToHtml } from 'shiki';
+import { useWasmStore } from '@/modules/[chain]/cosmwasm/WasmStore';
+import { toBase64 } from '@cosmjs/encoding';
 
-import { JsonViewer } from "vue3-json-viewer"
-import { CosmjsOfflineSigner } from "@leapwallet/cosmos-snap-provider";
+import { JsonViewer } from 'vue3-json-viewer';
+import { CosmjsOfflineSigner } from '@leapwallet/cosmos-snap-provider';
 
 interface Verification {
   chainId?: string;
@@ -29,13 +29,13 @@ interface SourceCode<T> {
 interface Argument {
   format?: string;
   type: string;
-  properties: Record<string, Argument>
+  properties: Record<string, Argument>;
 }
 
 interface Method {
   type: string;
   required: string[];
-  properties: Record<string, Argument>
+  properties: Record<string, Argument>;
   additionalProperties: boolean;
 }
 
@@ -49,7 +49,7 @@ const props = defineProps({
   contract: { type: String },
 });
 
-const baseurl = "https://prod.compiler.welldonestudio.io"
+const baseurl = 'https://prod.compiler.welldonestudio.io';
 
 const verification = ref<Verification>({});
 const sourceCode = ref<SourceCode<string>[]>([]);
@@ -59,206 +59,241 @@ const baseStore = useBaseStore();
 const dialog = useTxDialog();
 const result = ref<Record<string, any>>({});
 
-
 function fetchVerification() {
-  const url = `${baseurl}/deploy-histories/${chain_id.value}?contract=${props.contract}`
-  get(url).then((x) => {
-    console.log("verification:", x)
-    verification.value = x
-  }).catch(e => {
-    console.error(e)
-  })
+  const url = `${baseurl}/deploy-histories/${chain_id.value}?contract=${props.contract}`;
+  get(url)
+    .then((x) => {
+      console.log('verification:', x);
+      verification.value = x;
+    })
+    .catch((e) => {
+      console.error(e);
+    });
 }
 
 function fetchSchema() {
-  const base = useBaseStore()
-  const chainId = base.latest?.block?.header?.chain_id || "neutron-1"
-  const url = `${baseurl}/schemas/${chainId}?contract=${props.contract}`
-  get(url).then(async (x) => {
-    console.log("schema:", x)
-    schemas.value = x.sourceCodes
-  }).catch(e => {
-    console.error(e)
-  })
-}
-  
-function fetchSourceCode() {
-  const base = useBaseStore()
-  const chainId = base.latest?.block?.header?.chain_id || "neutron-1"
-  const url = `${baseurl}/source-codes/${chainId}?contract=${props.contract}`
-  const theme = baseStore.theme === 'dark' ? 'material-theme' : 'github-light'
-  get(url).then(async (x) => {
-    console.log("source codes:", x)
-    for (let i = 0; i < x.sourceCodes.length; i++) {
-      const sc = x.sourceCodes[i];
-      sc.sourceCode = await codeToHtml(sc.sourceCode, {lang: sc.path.endsWith('.toml')?'toml':'rust', theme})
-    }
-    sourceCode.value = x.sourceCodes
-  }).catch(e => {
-    console.error(e)
-  })
+  const base = useBaseStore();
+  const chainId = base.latest?.block?.header?.chain_id || 'neutron-1';
+  const url = `${baseurl}/schemas/${chainId}?contract=${props.contract}`;
+  get(url)
+    .then(async (x) => {
+      console.log('schema:', x);
+      schemas.value = x.sourceCodes;
+    })
+    .catch((e) => {
+      console.error(e);
+    });
 }
 
-const base = useBaseStore()
-const chain_id = ref("")
+function fetchSourceCode() {
+  const base = useBaseStore();
+  const chainId = base.latest?.block?.header?.chain_id || 'neutron-1';
+  const url = `${baseurl}/source-codes/${chainId}?contract=${props.contract}`;
+  const theme = baseStore.theme === 'dark' ? 'material-theme' : 'github-light';
+  get(url)
+    .then(async (x) => {
+      console.log('source codes:', x);
+      for (let i = 0; i < x.sourceCodes.length; i++) {
+        const sc = x.sourceCodes[i];
+        sc.sourceCode = await codeToHtml(sc.sourceCode, { lang: sc.path.endsWith('.toml') ? 'toml' : 'rust', theme });
+      }
+      sourceCode.value = x.sourceCodes;
+    })
+    .catch((e) => {
+      console.error(e);
+    });
+}
+
+const base = useBaseStore();
+const chain_id = ref('');
 base.$subscribe((m, s) => {
   if (chain_id.value !== s.latest?.block?.header?.chain_id) {
-    chain_id.value = s.latest?.block?.header?.chain_id || "unknown"
+    chain_id.value = s.latest?.block?.header?.chain_id || 'unknown';
     fetchVerification();
     fetchSchema();
     fetchSourceCode();
   }
-})
+});
 
 function verify() {
+  const base = useBaseStore();
+  const id = base.latest?.block?.header?.chain_id || 'unknown';
+  const data = { contractAddress: props.contract, chainId: id };
 
-    const base = useBaseStore()
-    const id =  base.latest?.block?.header?.chain_id || "unknown"
-    const data = {"contractAddress": props.contract, "chainId": id}
-
-    post(`${baseurl}/verification/neutron`, data).then((x)=> {
-        if(x.result) {
-          verification.value = x.result
-          fetchSchema();
-          fetchSourceCode();
-        }
-    })
+  post(`${baseurl}/verification/neutron`, data).then((x) => {
+    if (x.result) {
+      verification.value = x.result;
+      fetchSchema();
+      fetchSourceCode();
+    }
+  });
 }
 
-const tab = ref('verification')
+const tab = ref('verification');
 function selectTab(tabName: string) {
-  tab.value = tabName
+  tab.value = tabName;
 }
 
 const executions = computed(() => {
   return schemas.value
-      .filter(x => x.path.indexOf('execute_msg')>-1 || x.path.indexOf('query_msg')>-1)
-      .map(x => JSON.parse(x.sourceCode||"{}") as Schema)
+    .filter((x) => x.path.indexOf('execute_msg') > -1 || x.path.indexOf('query_msg') > -1)
+    .map((x) => JSON.parse(x.sourceCode || '{}') as Schema);
   // if(raw && raw.sourceCode) {
   //   return JSON.parse(raw.sourceCode) as Schema
-  // } 
+  // }
   // return {} as Schema
-})
+});
 
 const queries = computed(() => {
-  let raw = schemas.value.find(x => x.path.indexOf('query_msg')>-1)
-  if(raw && raw.sourceCode) {
-    return JSON.parse(raw.sourceCode) as Schema
-  } 
-  return {} as Schema
-})
+  let raw = schemas.value.find((x) => x.path.indexOf('query_msg') > -1);
+  if (raw && raw.sourceCode) {
+    return JSON.parse(raw.sourceCode) as Schema;
+  }
+  return {} as Schema;
+});
 
 function callFunction(title: string, method: string, arg: Argument) {
-  if(!props.contract) return
+  if (!props.contract) return;
 
   // console.log("callFunction", title, method, arg)
 
-  let args = {} as Record<string, any>
-  if(arg.properties) Object.keys(arg.properties).forEach(k => {
-    const input = document.querySelector(`input[name="${method}-${k}"]`) as HTMLInputElement
-    if (input) {
-      args[k] = input.value
-    }
-  })
+  let args = {} as Record<string, any>;
+  if (arg.properties)
+    Object.keys(arg.properties).forEach((k) => {
+      const input = document.querySelector(`input[name="${method}-${k}"]`) as HTMLInputElement;
+      if (input) {
+        args[k] = input.value;
+      }
+    });
 
   //console.log("args", arg.properties, JSON.stringify(args))
 
-  if(title === 'ExecuteMsg') {
-    let execution = {} as Record<string, any>
-    execution[method] = args 
-    console.log("execution", execution)
-    dialog.open('wasm_execute_contract', { contract: props.contract, execution})
+  if (title === 'ExecuteMsg') {
+    let execution = {} as Record<string, any>;
+    execution[method] = args;
+    console.log('execution', execution);
+    dialog.open('wasm_execute_contract', { contract: props.contract, execution });
   } else {
     // QueryMsg
     wasmStore.wasmClient
       .getWasmContractSmartQuery(props.contract, `{"${method}": ${JSON.stringify(args)}}`)
       .then((x) => {
-          result.value[`${title}-${method}`] = x;
+        result.value[`${title}-${method}`] = x;
       })
       .catch((err) => {
         result.value[`${title}-${method}`] = err;
       });
   }
 }
-
 </script>
 <template>
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <div role="tablist" class="tabs tabs-boxed">
-          <a role="tab" class="tab tooltip tooltip-right tooltip-success" data-tip="Powered By WELLDONE Studio">
-            <div class="w-8 rounded">
-              <img src="../assets/images/welldone-logo.svg"  alt="Powered By WELLDONE Studio"/>
-            </div>
-          </a>
-          <a role="tab" class="tab" :class="{'tab-active': tab==='verification'}" @click="selectTab('verification')">Verification</a>
-          <a role="tab" class="tab" :class="{'tab-active': tab==='executions'}" @click="selectTab('executions')">Functions</a> 
-          <a role="tab" class="tab" :class="{'tab-active': tab==='source_code'}" @click="selectTab('source_code')">Source Code</a>
+  <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+    <div role="tablist" class="tabs tabs-boxed">
+      <a role="tab" class="tab tooltip tooltip-right tooltip-success" data-tip="Powered By WELLDONE Studio">
+        <div class="w-8 rounded">
+          <img src="../assets/images/welldone-logo.svg" alt="Powered By WELLDONE Studio" />
         </div>
-        <div class="">
-          <div v-if="tab === 'verification'"><DynamicComponent :value="verification"/></div>
-          <div v-if="tab === 'executions'" class="">
-            <div v-for="{title, oneOf} in executions" class="join join-vertical w-full mt-2">
-              <div v-if="oneOf" v-for="m in oneOf">
-                <div v-for="(props, method) in m.properties" class="collapse collapse-arrow join-item border border-base-300">
-                  <input type="radio" name="my-accordion-1" :checked="false"/> 
-                  <div class="collapse-title font-medium">
-                    {{title}}::{{ method }}
-                  </div>
-                  <div class="collapse-content"> 
-                    <div v-for="(p, name) in props.properties" class="form-control pb-2">
-                      <label class="label">
-                          <span class="label-text">{{ name }}</span>
-                          <span></span>
-                      </label>
-                      <input :name="`${method}-${name}`" type="text" :placeholder="p.format" class="input input-sm border border-gray-300 dark:border-gray-600 w-full" />
-                    </div>
-                    <div>
-                      <label v-if="title==='ExecuteMsg'" for="wasm_execute_contract" class="btn btn-sm" @click="callFunction(title, method, props)">{{ method }}</label>
-                      <label v-else class="btn btn-sm" @click="callFunction(title, method, props)">{{ method }}</label>
-                    </div>
-                    <div v-if="result[`${title}-${method}`]" class="mt-2">
-                      <JsonViewer :value="result[`${title}-${method}`]" :theme="baseStore.theme||'dark'" style="background: transparent;" copyable boxed sort :expand-depth="5"/>
-                    </div>
-                  </div>
+      </a>
+      <a role="tab" class="tab" :class="{ 'tab-active': tab === 'verification' }" @click="selectTab('verification')"
+        >Verification</a
+      >
+      <a role="tab" class="tab" :class="{ 'tab-active': tab === 'executions' }" @click="selectTab('executions')"
+        >Functions</a
+      >
+      <a role="tab" class="tab" :class="{ 'tab-active': tab === 'source_code' }" @click="selectTab('source_code')"
+        >Source Code</a
+      >
+    </div>
+    <div class="">
+      <div v-if="tab === 'verification'"><DynamicComponent :value="verification" /></div>
+      <div v-if="tab === 'executions'" class="">
+        <div v-for="{ title, oneOf } in executions" class="join join-vertical w-full mt-2">
+          <div v-if="oneOf" v-for="m in oneOf">
+            <div
+              v-for="(props, method) in m.properties"
+              class="collapse collapse-arrow join-item border border-base-300"
+            >
+              <input type="radio" name="my-accordion-1" :checked="false" />
+              <div class="collapse-title font-medium">{{ title }}::{{ method }}</div>
+              <div class="collapse-content">
+                <div v-for="(p, name) in props.properties" class="form-control pb-2">
+                  <label class="label">
+                    <span class="label-text">{{ name }}</span>
+                    <span></span>
+                  </label>
+                  <input
+                    :name="`${method}-${name}`"
+                    type="text"
+                    :placeholder="p.format"
+                    class="input input-sm border border-gray-300 dark:border-gray-600 w-full"
+                  />
+                </div>
+                <div>
+                  <label
+                    v-if="title === 'ExecuteMsg'"
+                    for="wasm_execute_contract"
+                    class="btn btn-sm"
+                    @click="callFunction(title, method, props)"
+                    >{{ method }}</label
+                  >
+                  <label v-else class="btn btn-sm" @click="callFunction(title, method, props)">{{ method }}</label>
+                </div>
+                <div v-if="result[`${title}-${method}`]" class="mt-2">
+                  <JsonViewer
+                    :value="result[`${title}-${method}`]"
+                    :theme="baseStore.theme || 'dark'"
+                    style="background: transparent"
+                    copyable
+                    boxed
+                    sort
+                    :expand-depth="5"
+                  />
                 </div>
               </div>
             </div>
           </div>
-          <div v-if="tab === 'source_code'" class="mt-2 join join-vertical w-full">
-            <div v-for="sc in sourceCode.filter(x => !x.isDirectory)" class="collapse collapse-arrow join-item border border-base-300">
-              <input type="radio" name="sourceCodeAccordion" :checked="false"/> 
-              <div class="collapse-title font-medium">{{sc.path}}</div>
-              <div class="collapse-content overflow-auto" v-html="sc.sourceCode"></div>
-            </div>
-          </div>
         </div>
-        <div v-show="tab === 'verification'" class="text-center">
-            <div v-if="Object.keys(verification).length == 0" >
-               Haven't found verification
-            </div>
-            <button class="btn btn-primary mt-5" @click="verify" v-show="tab === 'verification'" :disabled="verification.error !== undefined">verify</button>
-        </div>
-
-        <!-- alert-info -->
+      </div>
+      <div v-if="tab === 'source_code'" class="mt-2 join join-vertical w-full">
         <div
-          class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info"
+          v-for="sc in sourceCode.filter((x) => !x.isDirectory)"
+          class="collapse collapse-arrow join-item border border-base-300"
         >
-          <div
-            class="drop-shadow-md px-4 pt-2 pb-2"
-            style="box-shadow: rgba(0, 207, 232, 0.4) 0px 6px 15px -7px"
-          >
-            <h2 class="text-base font-semibold">{{ $t('consensus.tips') }}</h2>
-          </div>
-          <div class="px-4 py-4">
-            <ul style="list-style-type: disc" class="pl-8">
-              <li>
-                {{ $t('cosmwasm.tips_description_1') }}
-              </li>
-              <li>
-                <a href="https://docs.welldonestudio.io/code/verification-api/" target="_blank">Link to Verification API Manual</a>
-              </li>
-            </ul>
-          </div>
+          <input type="radio" name="sourceCodeAccordion" :checked="false" />
+          <div class="collapse-title font-medium">{{ sc.path }}</div>
+          <div class="collapse-content overflow-auto" v-html="sc.sourceCode"></div>
         </div>
+      </div>
     </div>
-</template>
\ No newline at end of file
+    <div v-show="tab === 'verification'" class="text-center">
+      <div v-if="Object.keys(verification).length == 0">Haven't found verification</div>
+      <button
+        class="btn btn-primary mt-5"
+        @click="verify"
+        v-show="tab === 'verification'"
+        :disabled="verification.error !== undefined"
+      >
+        verify
+      </button>
+    </div>
+
+    <!-- alert-info -->
+    <div class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info">
+      <div class="drop-shadow-md px-4 pt-2 pb-2" style="box-shadow: rgba(0, 207, 232, 0.4) 0px 6px 15px -7px">
+        <h2 class="text-base font-semibold">{{ $t('consensus.tips') }}</h2>
+      </div>
+      <div class="px-4 py-4">
+        <ul style="list-style-type: disc" class="pl-8">
+          <li>
+            {{ $t('cosmwasm.tips_description_1') }}
+          </li>
+          <li>
+            <a href="https://docs.welldonestudio.io/code/verification-api/" target="_blank"
+              >Link to Verification API Manual</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/ad/AdBanner.vue b/src/components/ad/AdBanner.vue
index 73a01f62..517bd25d 100644
--- a/src/components/ad/AdBanner.vue
+++ b/src/components/ad/AdBanner.vue
@@ -1,18 +1,17 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { useRoute } from 'vue-router'
-const route = useRoute()
+import { useRoute } from 'vue-router';
+const route = useRoute();
 
 const aa = computed(() => {
-  const hostname = location.hostname
+  const hostname = location.hostname;
   if (hostname === 'testnet.ping.pub') {
-    return '2396360'
+    return '2396360';
   } else if (hostname === 'ping.pub') {
-    return '2395639'
+    return '2395639';
   } else {
-    return '2396360'
+    return '2396360';
   }
 });
 </script>
-<template>
-</template>
+<template></template>
diff --git a/src/components/charts/DonutChart.vue b/src/components/charts/DonutChart.vue
index bfc5e41d..8634f86d 100644
--- a/src/components/charts/DonutChart.vue
+++ b/src/components/charts/DonutChart.vue
@@ -15,10 +15,5 @@ const expenseRationChartConfig = computed(() => {
 </script>
 
 <template>
-  <ApexCharts
-    type="donut"
-    height="410"
-    :options="expenseRationChartConfig"
-    :series="series"
-  />
+  <ApexCharts type="donut" height="410" :options="expenseRationChartConfig" :series="series" />
 </template>
diff --git a/src/components/charts/PriceMarketChart.vue b/src/components/charts/PriceMarketChart.vue
index 8b6ffc00..543adaaa 100644
--- a/src/components/charts/PriceMarketChart.vue
+++ b/src/components/charts/PriceMarketChart.vue
@@ -8,51 +8,44 @@ import { useBaseStore } from '@/stores';
 const store = useIndexModule();
 const baseStore = useBaseStore();
 const chartConfig = computed(() => {
-    const theme = baseStore.theme;
-    const labels = store.marketData.prices.map((item: any) => item[0]);
-    return getMarketPriceChartConfig(theme, labels);
+  const theme = baseStore.theme;
+  const labels = store.marketData.prices.map((item: any) => item[0]);
+  return getMarketPriceChartConfig(theme, labels);
 });
 const kind = ref('price');
 const series = computed(() => {
-    return [
-        {
-            name: kind.value === 'price' ? 'Price' : 'Volume',
-            data:
-                kind.value === 'price'
-                    ? store.marketData.prices.map((item: any) => item[1])
-                    : store.marketData.total_volumes.map(
-                          (item: any) => item[1]
-                      ),
-        },
-    ];
+  return [
+    {
+      name: kind.value === 'price' ? 'Price' : 'Volume',
+      data:
+        kind.value === 'price'
+          ? store.marketData.prices.map((item: any) => item[1])
+          : store.marketData.total_volumes.map((item: any) => item[1]),
+    },
+  ];
 });
 
 function changeChart(type: string) {
-    kind.value = type;
+  kind.value = type;
 }
 </script>
 
 <template>
-    <div class="tabs tabs-boxed bg-transparent justify-end">
-        <a
-            class="tab text-xs mr-2 text-gray-400 uppercase"
-            :class="{ 'tab-active': kind === 'price' }"
-            @click="changeChart('price')"
-        >
-            Price
-        </a>
-        <a
-            class="tab text-xs text-gray-400 uppercase"
-            :class="{ 'tab-active': kind === 'volume' }"
-            @click="changeChart('volume')"
-        >
-            Volume
-        </a>
-    </div>
-    <ApexCharts
-        type="area"
-        height="230"
-        :options="chartConfig"
-        :series="series"
-    />
+  <div class="tabs tabs-boxed bg-transparent justify-end">
+    <a
+      class="tab text-xs mr-2 text-gray-400 uppercase"
+      :class="{ 'tab-active': kind === 'price' }"
+      @click="changeChart('price')"
+    >
+      Price
+    </a>
+    <a
+      class="tab text-xs text-gray-400 uppercase"
+      :class="{ 'tab-active': kind === 'volume' }"
+      @click="changeChart('volume')"
+    >
+      Volume
+    </a>
+  </div>
+  <ApexCharts type="area" height="230" :options="chartConfig" :series="series" />
 </template>
diff --git a/src/components/charts/TxsInBlocksChart.vue b/src/components/charts/TxsInBlocksChart.vue
index 6e630782..685d4555 100644
--- a/src/components/charts/TxsInBlocksChart.vue
+++ b/src/components/charts/TxsInBlocksChart.vue
@@ -6,39 +6,43 @@ import { useBaseStore } from '@/stores';
 const baseStore = useBaseStore();
 
 const options = computed(() => {
-    return {
-        chart: {
-            type: 'bar',
-            height: 150
-        },
-        plotOptions: {
-            bar: {
-                // borderRadius: 4,
-                horizontal: false,
-            }
-        },
-        dataLabels: {
-          enabled: false
-        },
-        colors: ['#5A67D8'],
-        xaxis: {
-            labels: {
-                show: false,
-                rotate: -45
-            },
-            show: false,
-            categories: baseStore.recents.map((x) => x.block.header.height).concat(Array(50-baseStore.recents.length).fill('')),
-        }
-    };
+  return {
+    chart: {
+      type: 'bar',
+      height: 150,
+    },
+    plotOptions: {
+      bar: {
+        // borderRadius: 4,
+        horizontal: false,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    colors: ['#5A67D8'],
+    xaxis: {
+      labels: {
+        show: false,
+        rotate: -45,
+      },
+      show: false,
+      categories: baseStore.recents
+        .map((x) => x.block.header.height)
+        .concat(Array(50 - baseStore.recents.length).fill('')),
+    },
+  };
 });
 const series = computed(() => {
-    return [{
-        name: 'Txs',
-        data: baseStore.recents?.map((x) => x.block.data.txs.length) || []
-    }]
+  return [
+    {
+      name: 'Txs',
+      data: baseStore.recents?.map((x) => x.block.data.txs.length) || [],
+    },
+  ];
 });
 </script>
 
 <template>
-    <ApexCharts type="bar" height="150" :options="options" :series="series" />
+  <ApexCharts type="bar" height="150" :options="options" :series="series" />
 </template>
diff --git a/src/components/charts/apexChartConfig.ts b/src/components/charts/apexChartConfig.ts
index 6e8a78ad..c2f8ca42 100644
--- a/src/components/charts/apexChartConfig.ts
+++ b/src/components/charts/apexChartConfig.ts
@@ -1,7 +1,7 @@
 import { useBlockchain } from '@/stores';
 import numeral from 'numeral';
 
-const chainStore = useBlockchain()
+const chainStore = useBlockchain();
 
 const themeColors = (theme: string) => {
   if (theme === 'light') {
@@ -183,12 +183,8 @@ export const colorVariables = (theme: string) => {
   };
 };
 /// Price Chart config
-export const getMarketPriceChartConfig = (
-  theme: string,
-  categories: string[]
-) => {
-  const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } =
-    colorVariables(theme);
+export const getMarketPriceChartConfig = (theme: string, categories: string[]) => {
+  const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(theme);
 
   return {
     chart: {
@@ -260,16 +256,56 @@ export const getMarketPriceChartConfig = (
 };
 
 // const donutColors = Array.from({length: 19}, () => (`#${Math.floor(Math.random()*16777215+100000).toString(16)}`))
-const donutColors = ["#bbe81a", "#ff5f0b", "#43ebef", "#1999e5", "#230b2c", "#628be8", "#aa5343", "#c9fa89", "#e88ea8", "#72e4a2", "#38cd87", "#515e13", "#7bf8f5", "#83dd6e", "#e8b203", "#7d11d5", "#3e4927", "#f303e2", "#249493", "#50e5e6", "#11deb2", "#a2f9c7", "#2a7bdc", "#47383a", "#226da4", "#966319", "#1bdf99", "#f3ab0c", "#961f50", "#832efd", "#875287", "#4bebe7", "#1d3d2e", "#9caea4", "#2772f5", "#938bf1", "#6228a5", "#24fea5", "#c9bbc8", "#e27225", "#54bd9f", "#babb2d", "#bcf591", "#803b36", "#124f03"]
+const donutColors = [
+  '#bbe81a',
+  '#ff5f0b',
+  '#43ebef',
+  '#1999e5',
+  '#230b2c',
+  '#628be8',
+  '#aa5343',
+  '#c9fa89',
+  '#e88ea8',
+  '#72e4a2',
+  '#38cd87',
+  '#515e13',
+  '#7bf8f5',
+  '#83dd6e',
+  '#e8b203',
+  '#7d11d5',
+  '#3e4927',
+  '#f303e2',
+  '#249493',
+  '#50e5e6',
+  '#11deb2',
+  '#a2f9c7',
+  '#2a7bdc',
+  '#47383a',
+  '#226da4',
+  '#966319',
+  '#1bdf99',
+  '#f3ab0c',
+  '#961f50',
+  '#832efd',
+  '#875287',
+  '#4bebe7',
+  '#1d3d2e',
+  '#9caea4',
+  '#2772f5',
+  '#938bf1',
+  '#6228a5',
+  '#24fea5',
+  '#c9bbc8',
+  '#e27225',
+  '#54bd9f',
+  '#babb2d',
+  '#bcf591',
+  '#803b36',
+  '#124f03',
+];
 
-
-export const getDonutChartConfig = (
-  theme: string,
-  labels: string[]
-) => {
-
-  const { themeSecondaryTextColor, themePrimaryTextColor } =
-    colorVariables(theme);
+export const getDonutChartConfig = (theme: string, labels: string[]) => {
+  const { themeSecondaryTextColor, themePrimaryTextColor } = colorVariables(theme);
 
   return {
     stroke: { width: 0 },
@@ -359,4 +395,3 @@ export const getDonutChartConfig = (
     ],
   };
 };
-
diff --git a/src/components/dynamic/ArrayBytesElement.vue b/src/components/dynamic/ArrayBytesElement.vue
index ed923cb6..7746fde5 100644
--- a/src/components/dynamic/ArrayBytesElement.vue
+++ b/src/components/dynamic/ArrayBytesElement.vue
@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 <template>
   <div>
-    <div v-for="(item,index) of props.value" :key="index">
+    <div v-for="(item, index) of props.value" :key="index">
       {{ toBase64(item) }}
     </div>
   </div>
diff --git a/src/components/dynamic/ArrayElement.vue b/src/components/dynamic/ArrayElement.vue
index 8b5b8e15..61b0c86f 100644
--- a/src/components/dynamic/ArrayElement.vue
+++ b/src/components/dynamic/ArrayElement.vue
@@ -3,7 +3,7 @@ import ArrayBytesElement from './ArrayBytesElement.vue';
 import ArrayObjectElement from './ArrayObjectElement.vue';
 import TextElement from './TextElement.vue';
 import ArrayCoinElement from './ArrayCoinElement.vue';
-import ArrayStringElement from './ArrayStringElement.vue'
+import ArrayStringElement from './ArrayStringElement.vue';
 
 const props = defineProps({
   value: { type: Array<Object> },
diff --git a/src/components/dynamic/ArrayObjectElement.vue b/src/components/dynamic/ArrayObjectElement.vue
index c759a08d..404c08f7 100644
--- a/src/components/dynamic/ArrayObjectElement.vue
+++ b/src/components/dynamic/ArrayObjectElement.vue
@@ -18,15 +18,11 @@ const header = computed(() => {
 });
 </script>
 <template>
-  <div class="overflow-auto max-h-96 ">
+  <div class="overflow-auto max-h-96">
     <table class="table table-xs table-compact table-pin-rows w-full">
       <thead v-if="thead">
         <tr>
-          <th
-            v-for="(item, index) in header"
-            :key="index"
-            class="text-left capitalize"
-          >
+          <th v-for="(item, index) in header" :key="index" class="text-left capitalize">
             {{ item.replace(/_/g, ' ') }}
           </th>
         </tr>
diff --git a/src/components/dynamic/ObjectElement.vue b/src/components/dynamic/ObjectElement.vue
index 008537df..15408940 100644
--- a/src/components/dynamic/ObjectElement.vue
+++ b/src/components/dynamic/ObjectElement.vue
@@ -8,18 +8,12 @@ const props = defineProps(['value']);
     <table class="table table-compact w-full text-sm">
       <tbody>
         <tr v-for="(v, k) of value">
-          <td
-            class="capitalize whitespace-break-spaces min-w-max"
-          >
+          <td class="capitalize whitespace-break-spaces min-w-max">
             {{ String(k).replaceAll('_', ' ') }}
           </td>
           <td class="w-4/5">
-            <div class="overflow-hidden w-auto whitespace-normal" >
-              <Component
-                v-if="v"
-                :is="select(v, 'horizontal')"
-                :value="v"
-              ></Component>
+            <div class="overflow-hidden w-auto whitespace-normal">
+              <Component v-if="v" :is="select(v, 'horizontal')" :value="v"></Component>
             </div>
           </td>
         </tr>
diff --git a/src/components/dynamic/TextElement.vue b/src/components/dynamic/TextElement.vue
index 4354a554..d2146030 100644
--- a/src/components/dynamic/TextElement.vue
+++ b/src/components/dynamic/TextElement.vue
@@ -6,90 +6,112 @@ import { computed, onMounted, ref } from 'vue';
 
 import { fromBase64, toHex } from '@cosmjs/encoding';
 
-import { registry as nameMatcha } from "@leapwallet/name-matcha"
+import { registry as nameMatcha } from '@leapwallet/name-matcha';
 
-const chainStore = useBlockchain()
+const chainStore = useBlockchain();
 const props = defineProps(['value']);
 const format = useFormatter();
 function isMD() {
-  if (
-    props.value &&
-    (String(props.value).indexOf('\n') > -1 || String(props.value).indexOf('\\n') > -1)
-  ) {
+  if (props.value && (String(props.value).indexOf('\n') > -1 || String(props.value).indexOf('\\n') > -1)) {
     return true;
   }
   return false;
 }
 
 function isAddress() {
-  return isBech32Address(props.value) && String(props.value).indexOf('valoper1') === -1
+  return isBech32Address(props.value) && String(props.value).indexOf('valoper1') === -1;
 }
 
 const text = computed(() => {
-  if(!props.value) return ""
-  const v = String(props.value)
-  switch(true) {
-    case v.length === 28 && v.endsWith("="): {
-      return format.validator(v) || v
+  if (!props.value) return '';
+  const v = String(props.value);
+  switch (true) {
+    case v.length === 28 && v.endsWith('='): {
+      return format.validator(v) || v;
     }
     // 2023-06-12T03:09:38.253756368Z
     case v.search(/^[1-9]\d{3}-\d{1,2}-\d{1,2}T\d{1,2}:\d{2}:\d{2}[.\d]*Z$/g) > -1: {
-      return new Date(v).toLocaleString(navigator.language)
+      return new Date(v).toLocaleString(navigator.language);
     }
     case toHexOutput.value:
-      return toHex(fromBase64(v)).toUpperCase()
+      return toHex(fromBase64(v)).toUpperCase();
   }
-  return v
-})
+  return v;
+});
 
-const names = ref([] as {name?: any, provider?: string}[])
+const names = ref([] as { name?: any; provider?: string }[]);
 
 onMounted(() => {
-  if(isAddress()) nameMatcha.lookupAll(props.value).then(re => {
-
-    names.value = Object.keys(re).map(key => ({name: re[key], provider: key})).filter( x => x.name)
-  })
-})
-const toHexOutput = ref(false)
+  if (isAddress())
+    nameMatcha.lookupAll(props.value).then((re) => {
+      names.value = Object.keys(re)
+        .map((key) => ({ name: re[key], provider: key }))
+        .filter((x) => x.name);
+    });
+});
+const toHexOutput = ref(false);
 const isConvertable = computed(() => {
-  return String(props.value).endsWith('=') && props.value.length !== 28
-})
-
+  return String(props.value).endsWith('=') && props.value.length !== 28;
+});
 </script>
 <template>
-  <MdEditor
-    v-if="isMD()"
-    :model-value="format.multiLine(value)"
-    previewOnly
-    class="md-editor-recover"
-  ></MdEditor>
+  <MdEditor v-if="isMD()" :model-value="format.multiLine(value)" previewOnly class="md-editor-recover"></MdEditor>
   <span v-else-if="isAddress()" class="flex">
     <RouterLink :to="`/${chainStore.chainName}/account/${text}`">{{ text }}</RouterLink>
-    <div v-for="{name, provider} in names">
-      <span class="text-xs truncate relative py-1 px-2 p2-4 w-fit ml-2 rounded text-success tooltip" :data-tip="provider" :title="provider">
+    <div v-for="{ name, provider } in names">
+      <span
+        class="text-xs truncate relative py-1 px-2 p2-4 w-fit ml-2 rounded text-success tooltip"
+        :data-tip="provider"
+        :title="provider"
+      >
         <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-success"></span>
         <button>{{ name }}</button>
       </span>
     </div>
-  </span>  
-  <span v-else class="flex"><span class="break-words max-w-5xl">{{ text }}</span>
+  </span>
+  <span v-else class="flex"
+    ><span class="break-words max-w-5xl">{{ text }}</span>
     <span v-if="isConvertable" @click="toHexOutput = !toHexOutput" class="ml-2 cursor-pointer">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-4 h-4"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+        />
       </svg>
-    </span> 
+    </span>
   </span>
 </template>
 
 <style lang="scss">
 .md-editor-recover {
-  .h1,h1 {
+  .h1,
+  h1 {
     font-size: 2rem;
   }
-  .h2,h2 {
+  .h2,
+  h2 {
     font-size: 1.5rem;
   }
-  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin-top: 0;
     margin-bottom: 0.5rem;
     font-weight: 500;
@@ -104,10 +126,15 @@ const isConvertable = computed(() => {
     margin-inline-end: 0px;
     padding-inline-start: 40px;
   }
-  dl, ol, ul {
+  dl,
+  ol,
+  ul {
     margin-top: 0;
   }
-  address, dl, ol, ul {
+  address,
+  dl,
+  ol,
+  ul {
     margin-bottom: 1rem;
   }
   p {
@@ -115,11 +142,21 @@ const isConvertable = computed(() => {
     margin-bottom: 1rem;
   }
   a {
-      color: #666cff !important;
+    color: #666cff !important;
   }
-  .h1 > a, .h2> a, .h3> a, .h4> a, .h5> a, .h6> a, h1> a, h2> a, h3> a, h4> a, h5> a, h6> a { 
+  .h1 > a,
+  .h2 > a,
+  .h3 > a,
+  .h4 > a,
+  .h5 > a,
+  .h6 > a,
+  h1 > a,
+  h2 > a,
+  h3 > a,
+  h4 > a,
+  h5 > a,
+  h6 > a {
     color: inherit !important;
   }
-
 }
 </style>
diff --git a/src/components/dynamic/TokenElement.vue b/src/components/dynamic/TokenElement.vue
index 3ddf9693..7fcbf332 100644
--- a/src/components/dynamic/TokenElement.vue
+++ b/src/components/dynamic/TokenElement.vue
@@ -1,10 +1,6 @@
 <script lang="ts" setup>
-
 const props = defineProps(['value']);
-
 </script>
 <template>
-  <div class="overflow-auto">
-      {{ value["amount"] }} {{ value["denom"] }}
-  </div>
+  <div class="overflow-auto">{{ value['amount'] }} {{ value['denom'] }}</div>
 </template>
diff --git a/src/components/dynamic/TxsElement.vue b/src/components/dynamic/TxsElement.vue
index d16621cc..fa38232e 100644
--- a/src/components/dynamic/TxsElement.vue
+++ b/src/components/dynamic/TxsElement.vue
@@ -9,21 +9,23 @@ const props = defineProps({
 });
 
 const txs = computed(() => {
-  return props.value?.map((x) => {
-    const tx_bytes = fromBase64(x);
-    let tx = null
-    let injected = 'Standard'
-    try {
-      tx = decodeTxRaw(fromBase64(x))
-    } catch(e) {
-      injected = 'Injected'
-    } 
-    return {
-      hash: hashTx(tx_bytes),
-      tx,
-      injected
-    }
-  }) || []
+  return (
+    props.value?.map((x) => {
+      const tx_bytes = fromBase64(x);
+      let tx = null;
+      let injected = 'Standard';
+      try {
+        tx = decodeTxRaw(fromBase64(x));
+      } catch (e) {
+        injected = 'Injected';
+      }
+      return {
+        hash: hashTx(tx_bytes),
+        tx,
+        injected,
+      };
+    }) || []
+  );
 });
 
 const format = useFormatter();
@@ -35,7 +37,7 @@ const chain = useBlockchain();
       <thead>
         <tr>
           <th>Type</th>
-          <th style="position: relative; z-index: 2;">Hash</th>
+          <th style="position: relative; z-index: 2">Hash</th>
           <th>Msgs</th>
           <th>Memo</th>
         </tr>
@@ -44,21 +46,19 @@ const chain = useBlockchain();
         <tr v-for="item in txs">
           <td>{{ item.injected }}</td>
           <td>
-            <span v-if="item.injected ==='Injected'">{{ item.hash }}</span>
+            <span v-if="item.injected === 'Injected'">{{ item.hash }}</span>
             <RouterLink v-else :to="`/${chain.chainName}/tx/${item.hash}`" class="text-primary dark:invert">{{
               item.hash
             }}</RouterLink>
           </td>
           <td>
             <span v-if="item.tx">
-              {{
-                format.messages(
-                  item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))
-                )
-              }}
+              {{ format.messages(item.tx.body.messages.map((x) => ({ '@type': x.typeUrl }))) }}
             </span>
           </td>
-          <td><span v-if="item.tx">{{ item.tx.body.memo }}</span></td>
+          <td>
+            <span v-if="item.tx">{{ item.tx.body.memo }}</span>
+          </td>
         </tr>
       </tbody>
     </table>
diff --git a/src/components/dynamic/UInt8Array.vue b/src/components/dynamic/UInt8Array.vue
index 7c26863a..a2d0fa2f 100644
--- a/src/components/dynamic/UInt8Array.vue
+++ b/src/components/dynamic/UInt8Array.vue
@@ -13,7 +13,5 @@ function change() {
 }
 </script>
 <template>
-  <span
-    >{{ text }} <VIcon size="12" icon="mdi-cached" @click="change()"
-  /></span>
+  <span>{{ text }} <VIcon size="12" icon="mdi-cached" @click="change()" /></span>
 </template>
diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
index ea8ddefb..2dc8b055 100644
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    fill="currentColor"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
     <path
       d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
     />
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
index 63a85340..6d4791cf 100644
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="17"
-    fill="currentColor"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
     <path
       d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
     />
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
index 385a2029..c3a4f078 100644
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="18"
-    height="20"
-    fill="currentColor"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
     <path
       d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
     />
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
index 7db961e4..7452834d 100644
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    fill="currentColor"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
     <path
       d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
     />
diff --git a/src/components/icons/IconWeb.vue b/src/components/icons/IconWeb.vue
index 5e0cd0ca..e3a9f01b 100644
--- a/src/components/icons/IconWeb.vue
+++ b/src/components/icons/IconWeb.vue
@@ -1 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" tag="i" class="v-icon notranslate v-theme--light v-icon--size-default iconify iconify--mdi" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2c0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2c0-.68.06-1.35.16-2h4.68c.09.65.16 1.32.16 2c0 .68-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.923 7.923 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8.008 8.008 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2c0 .68.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.65 15.65 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"></path></svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  aria-hidden="true"
+  role="img"
+  tag="i"
+  class="v-icon notranslate v-theme--light v-icon--size-default iconify iconify--mdi"
+  width="1em"
+  height="1em"
+  viewBox="0 0 24 24"
+><path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2c0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2c0-.68.06-1.35.16-2h4.68c.09.65.16 1.32.16 2c0 .68-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.923 7.923 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8.008 8.008 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2c0 .68.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.65 15.65 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"></path></svg>
diff --git a/src/layouts/blank.vue b/src/layouts/blank.vue
index a890f3b4..2c683113 100644
--- a/src/layouts/blank.vue
+++ b/src/layouts/blank.vue
@@ -1,12 +1,11 @@
 <script lang="ts">
-import { defineComponent, resolveComponent, h } from 'vue'
+import { defineComponent, resolveComponent, h } from 'vue';
 
 export default defineComponent({
   setup() {
     const routerView = resolveComponent('router-view');
 
-    return () =>
-      h('div', { class: 'layout-wrapper layout-blank' }, h(routerView));
+    return () => h('div', { class: 'layout-wrapper layout-blank' }, h(routerView));
   },
 });
 </script>
diff --git a/src/layouts/components/ChainProfile.vue b/src/layouts/components/ChainProfile.vue
index caecee91..5fb4afcc 100644
--- a/src/layouts/components/ChainProfile.vue
+++ b/src/layouts/components/ChainProfile.vue
@@ -17,45 +17,33 @@ function changeEndpoint(item: Endpoint) {
       <div class="p-1 relative mr-3 cursor-pointer">
         <img v-lazy="chainStore.logo" class="w-9 h-9 rounded-full" />
         <div
-          class="w-2 h-2 rounded-full absolute right-0 bottom-0 shadow" :class="{
+          class="w-2 h-2 rounded-full absolute right-0 bottom-0 shadow"
+          :class="{
             'bg-success': baseStore.connected,
-            'bg-error': !baseStore.connected
+            'bg-error': !baseStore.connected,
           }"
         ></div>
       </div>
       <div class="flex-1 w-0">
         <div
-          :key="
-            baseStore.latest?.block?.header?.height ||
-            chainStore.chainName ||
-            ''
-          "
+          :key="baseStore.latest?.block?.header?.height || chainStore.chainName || ''"
           class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block"
         >
-          {{ 
+          {{
             baseStore.latest?.block?.header?.height
               ? `#${baseStore.latest.block.header.height}`
-              : chainStore.chainName  || '' 
-          }} <span class="text-error">{{ baseStore.connected ? '' : 'disconnected' }}</span>
+              : chainStore.chainName || ''
+          }}
+          <span class="text-error">{{ baseStore.connected ? '' : 'disconnected' }}</span>
         </div>
-        <div
-          class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
-        >
+        <div class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block">
           {{ chainStore.connErr || chainStore.endpoint.address }}
         </div>
       </div>
     </label>
-    <div
-      tabindex="0"
-      class="dropdown-content -left-6 w-80 menu shadow bg-base-200 rounded-box overflow-auto"
-    >
+    <div tabindex="0" class="dropdown-content -left-6 w-80 menu shadow bg-base-200 rounded-box overflow-auto">
       <!-- rest -->
-      <div
-        class="px-4 py-2 text-sm text-gray-400"
-        v-if="chainStore.current?.endpoints?.rest"
-      >
-        Rest Endpoint
-      </div>
+      <div class="px-4 py-2 text-sm text-gray-400" v-if="chainStore.current?.endpoints?.rest">Rest Endpoint</div>
       <div
         v-for="(item, index) in chainStore.current?.endpoints?.rest"
         class="px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-[#384059] cursor-pointer"
@@ -82,14 +70,18 @@ function changeEndpoint(item: Endpoint) {
       <div class="px-4 py-2 text-sm text-gray-400">Information</div>
       <div class="w-full">
         <div class="py-2 px-4">
-          Chain Id: {{ baseStore.latest.block?.header.chain_id && baseStore.connected
-                        ? baseStore.latest.block.header.chain_id
-                        : 'N/A' }}
+          Chain Id:
+          {{
+            baseStore.latest.block?.header.chain_id && baseStore.connected
+              ? baseStore.latest.block.header.chain_id
+              : 'N/A'
+          }}
         </div>
         <div class="py-2 px-4">
-          Height: {{ baseStore.latest.block?.header.height && baseStore.connected
-                      ? baseStore.latest.block.header.height
-                      : '0' }}
+          Height:
+          {{
+            baseStore.latest.block?.header.height && baseStore.connected ? baseStore.latest.block.header.height : '0'
+          }}
         </div>
       </div>
       <!-- bottom-->
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index df0be7c1..b3dc2386 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -25,10 +25,10 @@ blockchain.randomSetupEndpoint();
 const baseStore = useBaseStore();
 
 const current = ref(''); // the current chain
-const temp = ref('')
+const temp = ref('');
 blockchain.$subscribe((m, s) => {
   if (current.value === s.chainName && temp.value != s.endpoint.address) {
-    temp.value = s.endpoint.address
+    temp.value = s.endpoint.address;
     blockchain.initial();
   }
   if (current.value != s.chainName) {
@@ -57,24 +57,24 @@ function isNavTitle(nav: VerticalNavItems | any): nav is NavSectionTitle {
   return (<NavSectionTitle>nav).heading !== undefined;
 }
 function selected(route: any, nav: NavLink) {
-  const b = route.path === nav.to?.path || route.path.startsWith(nav.to?.path) && nav.title.indexOf('dashboard') === -1
-  return b
+  const b =
+    route.path === nav.to?.path || (route.path.startsWith(nav.to?.path) && nav.title.indexOf('dashboard') === -1);
+  return b;
 }
 const blocktime = computed(() => {
-  return dayjs(baseStore.latest?.block?.header?.time)
+  return dayjs(baseStore.latest?.block?.header?.time);
 });
 
 const behind = computed(() => {
-  const current = dayjs().subtract(10, 'minute')
-  return blocktime.value.isBefore(current)
+  const current = dayjs().subtract(10, 'minute');
+  return blocktime.value.isBefore(current);
 });
 
-dayjs()
+dayjs();
 
 const show_ad = computed(() => {
-  return location.hostname.indexOf('ping.pub') > -1
-})
-
+  return location.hostname.indexOf('ping.pub') > -1;
+});
 </script>
 
 <template>
@@ -82,31 +82,41 @@ const show_ad = computed(() => {
     <!-- sidebar -->
     <div
       class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
-      :class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }">
+      :class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }"
+    >
       <div class="flex justify-between mt-1 pl-4 py-4 mb-1">
         <RouterLink to="/" class="flex items-center">
           <img class="w-10 h-10" src="../../assets/logo.svg" />
-          <h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">
-            Ping.pub
-          </h1>
+          <h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">Ping.pub</h1>
         </RouterLink>
         <div class="pr-4 cursor-pointer xl:!hidden" @click="sidebarShow = false">
           <Icon icon="mdi-close" class="text-2xl" />
         </div>
       </div>
       <div v-for="(item, index) of blockchain.computedChainMenu" :key="index" class="px-2">
-        <div v-if="isNavGroup(item)" :tabindex="index" class="collapse" :class="{
-          'collapse-arrow': index > 0 && item?.children?.length > 0,
-          'collapse-open': index === 0 && sidebarOpen,
-          'collapse-close': index === 0 && !sidebarOpen,
-        }">
+        <div
+          v-if="isNavGroup(item)"
+          :tabindex="index"
+          class="collapse"
+          :class="{
+            'collapse-arrow': index > 0 && item?.children?.length > 0,
+            'collapse-open': index === 0 && sidebarOpen,
+            'collapse-close': index === 0 && !sidebarOpen,
+          }"
+        >
           <input v-if="index > 0" type="checkbox" class="cursor-pointer !h-10 block" @click="changeOpen(index)" />
           <div
-            class="collapse-title !py-0 px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
-            <Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
-              'text-yellow-500': item?.title === 'Favorite',
-              'text-blue-500': item?.title !== 'Favorite',
-            }" />
+            class="collapse-title !py-0 px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          >
+            <Icon
+              v-if="item?.icon?.icon"
+              :icon="item?.icon?.icon"
+              class="text-xl mr-2"
+              :class="{
+                'text-yellow-500': item?.title === 'Favorite',
+                'text-blue-500': item?.title !== 'Favorite',
+              }"
+            />
             <img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
             <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
               {{ item?.title }}
@@ -117,51 +127,77 @@ const show_ad = computed(() => {
           </div>
           <div class="collapse-content">
             <div v-for="(el, key) of item?.children" class="menu bg-base-100 w-full !p-0">
-              <RouterLink v-if="isNavLink(el)" @click="sidebarShow = false"
+              <RouterLink
+                v-if="isNavLink(el)"
+                @click="sidebarShow = false"
                 class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
                 :class="{
                   '!bg-primary': selected($route, el),
-                }" :to="el.to">
-                <Icon v-if="!el?.icon?.image" icon="mdi:chevron-right" class="mr-2 ml-3" :class="{
-                  'text-white':
-                    $route.path === el?.to?.path &&
-                    item?.title !== 'Favorite',
-                }" />
-                <img v-if="el?.icon?.image" :src="el?.icon?.image" class="w-6 h-6 rounded-full mr-3 ml-4 " :class="{
-                  'border border-gray-300 bg-white': selected($route, el),
-                }" />
-                <div class="text-base capitalize text-gray-500 dark:text-gray-300" :class="{
-                  '!text-white': selected($route, el),
-                }">
+                }"
+                :to="el.to"
+              >
+                <Icon
+                  v-if="!el?.icon?.image"
+                  icon="mdi:chevron-right"
+                  class="mr-2 ml-3"
+                  :class="{
+                    'text-white': $route.path === el?.to?.path && item?.title !== 'Favorite',
+                  }"
+                />
+                <img
+                  v-if="el?.icon?.image"
+                  :src="el?.icon?.image"
+                  class="w-6 h-6 rounded-full mr-3 ml-4"
+                  :class="{
+                    'border border-gray-300 bg-white': selected($route, el),
+                  }"
+                />
+                <div
+                  class="text-base capitalize text-gray-500 dark:text-gray-300"
+                  :class="{
+                    '!text-white': selected($route, el),
+                  }"
+                >
                   {{ item?.title === 'Favorite' ? el?.title : $t(el?.title) }}
                 </div>
               </RouterLink>
             </div>
-            <div v-if="index === 0 && dashboard.networkType === NetworkType.Testnet"
-              class="menu bg-base-100 w-full !p-0">
+            <div
+              v-if="index === 0 && dashboard.networkType === NetworkType.Testnet"
+              class="menu bg-base-100 w-full !p-0"
+            >
               <RouterLink
                 class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
-                :to="`/${blockchain.chainName}/faucet`">
+                :to="`/${blockchain.chainName}/faucet`"
+              >
                 <Icon icon="mdi:chevron-right" class="mr-2 ml-3"></Icon>
-                <div class="text-base capitalize text-gray-500 dark:text-gray-300">
-                  Faucet
-                </div>
-                <div class="badge badge-sm text-white border-none badge-error ml-auto">
-                  New
-                </div>
+                <div class="text-base capitalize text-gray-500 dark:text-gray-300">Faucet</div>
+                <div class="badge badge-sm text-white border-none badge-error ml-auto">New</div>
               </RouterLink>
             </div>
           </div>
         </div>
 
-        <RouterLink v-if="isNavLink(item)" :to="item?.to" @click="sidebarShow = false"
-          class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
-          <Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
-            'text-yellow-500': item?.title === 'Favorite',
-            'text-blue-500': item?.title !== 'Favorite',
-          }" />
-          <img v-if="item?.icon?.image" :src="item?.icon?.image"
-            class="w-6 h-6 rounded-full mr-3 border border-blue-100" />
+        <RouterLink
+          v-if="isNavLink(item)"
+          :to="item?.to"
+          @click="sidebarShow = false"
+          class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
+          <Icon
+            v-if="item?.icon?.icon"
+            :icon="item?.icon?.icon"
+            class="text-xl mr-2"
+            :class="{
+              'text-yellow-500': item?.title === 'Favorite',
+              'text-blue-500': item?.title !== 'Favorite',
+            }"
+          />
+          <img
+            v-if="item?.icon?.image"
+            :src="item?.icon?.image"
+            class="w-6 h-6 rounded-full mr-3 border border-blue-100"
+          />
           <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
             {{ item?.title }}
           </div>
@@ -174,41 +210,43 @@ const show_ad = computed(() => {
         </div>
       </div>
       <div class="px-2">
-        <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
-          Tools
-        </div>
-        <RouterLink to="/wallet/suggest"
-          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
+        <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">Tools</div>
+        <RouterLink
+          to="/wallet/suggest"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
           <Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
-            Wallet Helper
-          </div>
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">Wallet Helper</div>
         </RouterLink>
         <div v-if="showDiscord" class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
           {{ $t('module.sponsors') }}
         </div>
         <Sponsors v-if="showDiscord" />
         <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">{{ $t('module.links') }}</div>
-        <a href="https://twitter.com/ping_pub" target="_blank"
-          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
+        <a
+          href="https://twitter.com/ping_pub"
+          target="_blank"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
           <Icon icon="mdi:twitter" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
-            Twitter
-          </div>
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">Twitter</div>
         </a>
-        <a v-if="showDiscord" href="https://discord.com/invite/CmjYVSr6GW" target="_blank"
-          class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
+        <a
+          v-if="showDiscord"
+          href="https://discord.com/invite/CmjYVSr6GW"
+          target="_blank"
+          class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
           <Icon icon="mdi:discord" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
-            Discord
-          </div>
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">Discord</div>
         </a>
-        <a href="https://github.com/ping-pub/explorer/discussions" target="_blank"
-          class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
+        <a
+          href="https://github.com/ping-pub/explorer/discussions"
+          target="_blank"
+          class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
+        >
           <Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
-            FAQ
-          </div>
+          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">FAQ</div>
         </a>
       </div>
     </div>
@@ -231,13 +269,21 @@ const show_ad = computed(() => {
       </div>
 
       <!-- 👉 Pages -->
-      <div style="min-height: calc(100vh - 180px);">
+      <div style="min-height: calc(100vh - 180px)">
         <div v-if="behind" class="alert alert-error mb-4">
           <div class="flex gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-              class="stroke-current flex-shrink-0 w-6 h-6">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              class="stroke-current flex-shrink-0 w-6 h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              ></path>
             </svg>
             <span>{{ $t('pages.out_of_sync') }} {{ blocktime.format() }} ({{ blocktime.fromNow() }})</span>
           </div>
diff --git a/src/layouts/components/NavBarI18n.vue b/src/layouts/components/NavBarI18n.vue
index 2cac2601..fa61853e 100644
--- a/src/layouts/components/NavBarI18n.vue
+++ b/src/layouts/components/NavBarI18n.vue
@@ -4,81 +4,68 @@ import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
 
 const i18nLangs: Array<{ label: string; i18nLang: string }> = [
-    {
-        label: 'English',
-        i18nLang: 'en',
-    },
-    {
-        label: '中文',
-        i18nLang: 'zh',
-    },
-    {
-        label: 'Indonesian',
-        i18nLang: 'id',
-    },
-    {
-        label: '日本語',
-        i18nLang: 'ja',
-    },
-    {
-        label: '한국인',
-        i18nLang: 'ko',
-    },
-    {
-        label: 'Deutsch',
-        i18nLang: 'de',
-    },
-    {
-        label: 'Español',
-        i18nLang: 'es',
-    },
+  {
+    label: 'English',
+    i18nLang: 'en',
+  },
+  {
+    label: '中文',
+    i18nLang: 'zh',
+  },
+  {
+    label: 'Indonesian',
+    i18nLang: 'id',
+  },
+  {
+    label: '日本語',
+    i18nLang: 'ja',
+  },
+  {
+    label: '한국인',
+    i18nLang: 'ko',
+  },
+  {
+    label: 'Deutsch',
+    i18nLang: 'de',
+  },
+  {
+    label: 'Español',
+    i18nLang: 'es',
+  },
 ];
 
 let locale = ref(useI18n({ useScope: 'global' }).locale);
 watch(locale, (val) => {
-    document.documentElement.setAttribute('lang', val as string);
+  document.documentElement.setAttribute('lang', val as string);
 });
 
 let currentLang = ref(localStorage.getItem('lang') || 'en');
 
 watch(currentLang, (val: string) => {
-    document.documentElement.setAttribute('lang', val as string);
+  document.documentElement.setAttribute('lang', val as string);
 });
 
 const handleLangChange = (lang: string) => {
-    locale.value = lang;
-    currentLang.value = lang;
-    localStorage.setItem('lang', lang);
+  locale.value = lang;
+  currentLang.value = lang;
+  localStorage.setItem('lang', lang);
 };
 </script>
 
 <template>
-    <div
-        class="dropdown"
-        :class="
-            currentLang === 'ar'
-                ? 'dropdown-right'
-                : 'dropdown-bottom dropdown-end'
-        "
-    >
-        <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
-            <Icon
-                icon="mdi-translate"
-                class="text-2xl text-gray-500 dark:text-gray-400"
-            />
-        </label>
-        <ul
-            tabindex="0"
-            class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
+  <div class="dropdown" :class="currentLang === 'ar' ? 'dropdown-right' : 'dropdown-bottom dropdown-end'">
+    <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
+      <Icon icon="mdi-translate" class="text-2xl text-gray-500 dark:text-gray-400" />
+    </label>
+    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
+      <li v-for="lang in i18nLangs" :key="lang.i18nLang">
+        <a
+          class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          :class="{ 'text-primary': currentLang === lang.i18nLang }"
+          @click="handleLangChange(lang.i18nLang)"
+          >{{ lang.label }}</a
         >
-            <li v-for="lang in i18nLangs" :key="lang.i18nLang">
-                <a
-                    class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
-                    :class="{ 'text-primary': currentLang === lang.i18nLang }"
-                    @click="handleLangChange(lang.i18nLang)"
-                    >{{ lang.label }}</a
-                >
-            </li>
-        </ul>
-    </div>
+      </li>
+    </ul>
+  </div>
 </template>
diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index fc52e616..3dcad312 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { useRoute } from 'vue-router';
 import { useBaseStore, useBlockchain, useWalletStore } from '@/stores';
 import { Icon } from '@iconify/vue';
 import { ref, computed } from 'vue';
@@ -39,19 +39,17 @@ const params = computed(() => {
   if (chainStore.chainName == 'side') {
     return JSON.stringify({
       wallet: ['okex', 'unisat'],
-   });
+    });
   }
-  return "";
+  return '';
 });
-
 </script>
 
 <template>
   <div class="dropdown dropdown-hover dropdown-end">
     <label tabindex="0" class="btn btn-sm btn-primary m-1 lowercase truncate !inline-flex text-xs md:!text-sm">
       <Icon icon="mdi:wallet" />
-      <span class="ml-1 hidden md:block">
-        {{ walletStore.shortAddress || 'Wallet' }}</span>
+      <span class="ml-1 hidden md:block"> {{ walletStore.shortAddress || 'Wallet' }}</span>
     </label>
     <div tabindex="0" class="dropdown-content menu shadow p-2 bg-base-100 rounded w-52 md:!w-64 overflow-auto">
       <label v-if="!walletStore?.currentAddress" for="PingConnectWallet" class="btn btn-sm btn-primary">
@@ -61,9 +59,12 @@ const params = computed(() => {
         {{ walletStore.connectedWallet?.wallet }}
       </div>
       <div>
-        <a v-if="walletStore.currentAddress"
+        <a
+          v-if="walletStore.currentAddress"
           class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
-          style="overflow-wrap: anywhere" @click="copyAdress(walletStore.currentAddress)">
+          style="overflow-wrap: anywhere"
+          @click="copyAdress(walletStore.currentAddress)"
+        >
           {{ walletStore.currentAddress }}
         </a>
         <div class="divider mt-1 mb-1"></div>
@@ -74,9 +75,12 @@ const params = computed(() => {
           <div class="block py-2 px-2 hover:!bg-gray-100 rounded cursor-pointer">Portfolio</div>
         </RouterLink>
         <div v-if="walletStore.currentAddress" class="divider mt-1 mb-1"></div>
-        <a v-if="walletStore.currentAddress"
+        <a
+          v-if="walletStore.currentAddress"
           class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
-          @click="walletStore.disconnect()">Disconnect</a>
+          @click="walletStore.disconnect()"
+          >Disconnect</a
+        >
       </div>
     </div>
     <div class="toast" v-show="showCopyToast === 1">
@@ -95,9 +99,14 @@ const params = computed(() => {
     </div>
   </div>
   <Teleport to="body">
-    <ping-connect-wallet :chain-id="baseStore.currentChainId || 'cosmoshub-4'" :hd-path="chainStore.defaultHDPath"
-      :addr-prefix="chainStore.current?.bech32Prefix || 'cosmos'" @connect="walletStateChange"
-      @keplr-config="walletStore.suggestChain()"  :params="params" />
+    <ping-connect-wallet
+      :chain-id="baseStore.currentChainId || 'cosmoshub-4'"
+      :hd-path="chainStore.defaultHDPath"
+      :addr-prefix="chainStore.current?.bech32Prefix || 'cosmos'"
+      @connect="walletStateChange"
+      @keplr-config="walletStore.suggestChain()"
+      :params="params"
+    />
   </Teleport>
 </template>
 
diff --git a/src/layouts/components/NavFooter.vue b/src/layouts/components/NavFooter.vue
index babc284e..126dce51 100644
--- a/src/layouts/components/NavFooter.vue
+++ b/src/layouts/components/NavFooter.vue
@@ -1,37 +1,23 @@
 <template>
   <!-- footer -->
-  <footer
-    class="flex items-center h-12 mt-5 text-sm bg-gray-100 dark:bg-[#171d30] py-2 z-10 w-full"
-  >
+  <footer class="flex items-center h-12 mt-5 text-sm bg-gray-100 dark:bg-[#171d30] py-2 z-10 w-full">
     <div class="flex flex-1">
       &copy;&nbsp;
-      {{ new Date().getFullYear() }}&nbsp;
-      Made With&nbsp;
-      <img src="../../assets/images/heart.svg" />&nbsp;
-      By&nbsp;
-      <a
-        class="link link-primary no-underline"
-        href="https://ping.pub"
-        target="_blank"
-        rel="noopener noreferrer"
+      {{ new Date().getFullYear() }}&nbsp; Made With&nbsp; <img src="../../assets/images/heart.svg" />&nbsp; By&nbsp;
+      <a class="link link-primary no-underline" href="https://ping.pub" target="_blank" rel="noopener noreferrer"
         >Ping.pub</a
       >
     </div>
-    <div
-      class="hidden md:!block"
-    >
+    <div class="hidden md:!block">
       <a
         class="link link-primary no-underline mr-4"
         href="https://github.com/ping-pub/explorer/blob/master/LICENSE"
         target="noopener noreferrer"
         >License</a
       >
-      <a
-        class="link link-primary no-underline"
-        href="https://github.com/ping-pub/explorer"
-        target="noopener noreferrer"
+      <a class="link link-primary no-underline" href="https://github.com/ping-pub/explorer" target="noopener noreferrer"
         >Github</a
       >
     </div>
   </footer>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/layouts/components/NavbarSearch.vue b/src/layouts/components/NavbarSearch.vue
index d4202878..cc77263a 100644
--- a/src/layouts/components/NavbarSearch.vue
+++ b/src/layouts/components/NavbarSearch.vue
@@ -61,14 +61,8 @@ function confirm() {
 </script>
 <template>
   <div>
-    <button
-      class="btn btn-ghost btn-circle btn-sm mx-1"
-      @click="openSearchModal"
-    >
-      <Icon
-        icon="mdi:magnify"
-        class="text-2xl text-gray-500 dark:text-gray-400"
-      />
+    <button class="btn btn-ghost btn-circle btn-sm mx-1" @click="openSearchModal">
+      <Icon icon="mdi:magnify" class="text-2xl text-gray-500 dark:text-gray-400" />
     </button>
 
     <!-- modal -->
@@ -77,29 +71,15 @@ function confirm() {
       class="cursor-pointer modal !pointer-events-auto !opacity-100 !visible"
       @click="closeSearchModal"
     >
-      <div
-        class="relative modal-box cursor-default"
-        @click="(event) => preventClick(event)"
-      >
+      <div class="relative modal-box cursor-default" @click="(event) => preventClick(event)">
         <!-- header -->
         <div class="flex items-center justify-between">
-          <div
-            class="text-lg font-bold flex flex-col md:!flex-row justify-between items-baseline"
-          >
+          <div class="text-lg font-bold flex flex-col md:!flex-row justify-between items-baseline">
             <span class="mr-2">Search</span>
-            <span class="capitalize text-sm md:!text-base"
-              >Height/Transaction/Account Address</span
-            >
+            <span class="capitalize text-sm md:!text-base">Height/Transaction/Account Address</span>
           </div>
-          <label
-            htmlFor="modal-pool-modal"
-            class="cursor-pointer"
-            @click="closeSearchModal"
-          >
-            <Icon
-              icon="zondicons:close-outline"
-              class="text-2xl text-gray-500 dark:text-gray-400"
-            />
+          <label htmlFor="modal-pool-modal" class="cursor-pointer" @click="closeSearchModal">
+            <Icon icon="zondicons:close-outline" class="text-2xl text-gray-500 dark:text-gray-400" />
           </label>
         </div>
         <!-- body -->
@@ -110,19 +90,14 @@ function confirm() {
               v-model="searchQuery"
               placeholder="Height/Transaction/Account Address"
             />
-            <div
-              class="mt-2 text-right text-sm text-error"
-              v-show="errorMessage"
-            >
+            <div class="mt-2 text-right text-sm text-error" v-show="errorMessage">
               {{ errorMessage }}
             </div>
           </div>
         </div>
         <!-- foot -->
         <div class="mt-6">
-          <button class="w-full btn btn-primary" @click="confirm">
-            Confirm
-          </button>
+          <button class="w-full btn btn-primary" @click="confirm">Confirm</button>
         </div>
       </div>
     </div>
diff --git a/src/layouts/components/NavbarThemeSwitcher.vue b/src/layouts/components/NavbarThemeSwitcher.vue
index dca49ed1..20310867 100644
--- a/src/layouts/components/NavbarThemeSwitcher.vue
+++ b/src/layouts/components/NavbarThemeSwitcher.vue
@@ -4,45 +4,42 @@ import { onMounted, computed } from 'vue';
 import { useBaseStore } from '@/stores';
 
 const themeMap: Record<string, string> = {
-    system: 'mdi-laptop',
-    light: 'mdi-weather-sunny',
-    dark: 'mdi-weather-night',
+  system: 'mdi-laptop',
+  light: 'mdi-weather-sunny',
+  dark: 'mdi-weather-night',
 };
 const baseStore = useBaseStore();
 const theme = computed(() => {
-    return baseStore.theme;
+  return baseStore.theme;
 });
 
 const changeMode = (val?: 'dark' | 'light') => {
-    let value: 'dark' | 'light' = 'dark';
-    const currentValue: 'dark' | 'light' = val || theme.value;
-    if (currentValue === 'dark') {
-        value = 'light';
-    }
-    if (value === 'light') {
-        document.documentElement.classList.add('light');
-        document.documentElement.classList.remove('dark');
-    } else {
-        document.documentElement.classList.add('dark');
-        document.documentElement.classList.remove('light');
-    }
-    document.documentElement.setAttribute('data-theme', value);
-    window.localStorage.setItem('theme', value);
-    baseStore.theme = value;
+  let value: 'dark' | 'light' = 'dark';
+  const currentValue: 'dark' | 'light' = val || theme.value;
+  if (currentValue === 'dark') {
+    value = 'light';
+  }
+  if (value === 'light') {
+    document.documentElement.classList.add('light');
+    document.documentElement.classList.remove('dark');
+  } else {
+    document.documentElement.classList.add('dark');
+    document.documentElement.classList.remove('light');
+  }
+  document.documentElement.setAttribute('data-theme', value);
+  window.localStorage.setItem('theme', value);
+  baseStore.theme = value;
 };
 
 onMounted(() => {
-    changeMode(theme.value === 'light' ? 'dark' : 'light');
+  changeMode(theme.value === 'light' ? 'dark' : 'light');
 });
 </script>
 
 <template>
-    <div class="tooltip tooltip-bottom delay-1000">
-        <button
-            class="btn btn-ghost btn-circle btn-sm mx-1"
-            @click="changeMode()"
-        >
-            <Icon :icon="themeMap?.[theme]" class="text-2xl text-gray-500 dark:text-gray-400" />
-        </button>
-    </div>
+  <div class="tooltip tooltip-bottom delay-1000">
+    <button class="btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode()">
+      <Icon :icon="themeMap?.[theme]" class="text-2xl text-gray-500 dark:text-gray-400" />
+    </button>
+  </div>
 </template>
diff --git a/src/layouts/components/Sponsors.vue b/src/layouts/components/Sponsors.vue
index 51fe2785..e41151f2 100644
--- a/src/layouts/components/Sponsors.vue
+++ b/src/layouts/components/Sponsors.vue
@@ -1,25 +1,28 @@
 <template>
-    <div>
-        <a href="https://cosmos.network" target="_blank"
-            class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
-            <img src="https://ping.pub/logos/cosmos.svg" class="w-6 h-6 rounded-full mr-3" />
-            <div class="text-sm capitalize flex-1 text-gray-600 dark:text-gray-200">
-                Cosmos Hub
-            </div>
-        </a>
-        <a href="https://osmosis.zone" target="_blank"
-            class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
-            <img src="https://ping.pub/logos/osmosis.jpg" class="w-6 h-6 rounded-full mr-3" />
-            <div class="text-sm capitalize flex-1 text-gray-600 dark:text-gray-200">
-                Osmosis
-            </div>
-        </a>
-        <a href="https://celestia.org" target="_blank"
-            class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
-            <img src="https://ping.pub/logos/celestia.png" class="w-6 h-6 rounded-full mr-3" />
-            <div class="text-sm capitalize flex-1 text-gray-600 dark:text-gray-200">
-                Celestia
-            </div>
-        </a>
-    </div>
-</template>
\ No newline at end of file
+  <div>
+    <a
+      href="https://cosmos.network"
+      target="_blank"
+      class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+    >
+      <img src="https://ping.pub/logos/cosmos.svg" class="w-6 h-6 rounded-full mr-3" />
+      <div class="text-sm capitalize flex-1 text-gray-600 dark:text-gray-200">Cosmos Hub</div>
+    </a>
+    <a
+      href="https://osmosis.zone"
+      target="_blank"
+      class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+    >
+      <img src="https://ping.pub/logos/osmosis.jpg" class="w-6 h-6 rounded-full mr-3" />
+      <div class="text-sm capitalize flex-1 text-gray-600 dark:text-gray-200">Osmosis</div>
+    </a>
+    <a
+      href="https://celestia.org"
+      target="_blank"
+      class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+    >
+      <img src="https://ping.pub/logos/celestia.png" class="w-6 h-6 rounded-full mr-3" />
+      <div class="text-sm capitalize flex-1 text-gray-600 dark:text-gray-200">Celestia</div>
+    </a>
+  </div>
+</template>
diff --git a/src/layouts/types.d.ts b/src/layouts/types.d.ts
index f109461e..07b74717 100644
--- a/src/layouts/types.d.ts
+++ b/src/layouts/types.d.ts
@@ -1,59 +1,59 @@
 // 👉 Vertical nav section title
 export interface NavSectionTitle extends Partial<AclProperties> {
-    heading: string
+  heading: string;
 }
 
 // 👉 Vertical nav link
-declare type ATagTargetAttrValues = '_blank' | '_self' | '_parent' | '_top' | 'framename'
+declare type ATagTargetAttrValues = '_blank' | '_self' | '_parent' | '_top' | 'framename';
 declare type ATagRelAttrValues =
-    | 'alternate'
-    | 'author'
-    | 'bookmark'
-    | 'external'
-    | 'help'
-    | 'license'
-    | 'next'
-    | 'nofollow'
-    | 'noopener'
-    | 'noreferrer'
-    | 'prev'
-    | 'search'
-    | 'tag'
+  | 'alternate'
+  | 'author'
+  | 'bookmark'
+  | 'external'
+  | 'help'
+  | 'license'
+  | 'next'
+  | 'nofollow'
+  | 'noopener'
+  | 'noreferrer'
+  | 'prev'
+  | 'search'
+  | 'tag';
 
 export interface NavLinkProps {
-    to?: RouteLocationRaw | string | null
-    href?: string
-    target?: ATagTargetAttrValues
-    rel?: ATagRelAttrValues
-    i18n?: boolean
+  to?: RouteLocationRaw | string | null;
+  href?: string;
+  target?: ATagTargetAttrValues;
+  rel?: ATagRelAttrValues;
+  i18n?: boolean;
 }
 
 export interface Icon {
-    icon?: string,
-    image?: string,
-    size: string,
+  icon?: string;
+  image?: string;
+  size: string;
 }
 
 export interface NavLink extends NavLinkProps {
-    title: string
-    icon?: Icon
-    badgeContent?: string | number
-    badgeClass?: string
-    disable?: boolean
-    order?: number
+  title: string;
+  icon?: Icon;
+  badgeContent?: string | number;
+  badgeClass?: string;
+  disable?: boolean;
+  order?: number;
 }
 
 // 👉 Vertical nav group
 export interface NavGroup {
-    title: string
-    icon?: Icon
-    badgeContent?: string | number
-    badgeClass?: string
-    children: (NavLink | NavGroup)[]
-    disable?: boolean
-    order?: number
-    i18n?: boolean
+  title: string;
+  icon?: Icon;
+  badgeContent?: string | number;
+  badgeClass?: string;
+  children: (NavLink | NavGroup)[];
+  disable?: boolean;
+  order?: number;
+  i18n?: boolean;
 }
 
-export declare type VerticalNavItems = (NavLink | NavGroup | NavSectionTitle)[]
-export declare type HorizontalNavItems = (NavLink | NavGroup)[]
\ No newline at end of file
+export declare type VerticalNavItems = (NavLink | NavGroup | NavSectionTitle)[];
+export declare type HorizontalNavItems = (NavLink | NavGroup)[];
diff --git a/src/libs/address.ts b/src/libs/address.ts
index 1bd5f46b..1edcd0ab 100644
--- a/src/libs/address.ts
+++ b/src/libs/address.ts
@@ -1,10 +1,4 @@
-import {
-  fromBase64,
-  fromBech32,
-  toBase64,
-  toBech32,
-  toHex,
-} from '@cosmjs/encoding';
+import { fromBase64, fromBech32, toBase64, toBech32, toHex } from '@cosmjs/encoding';
 import { Ripemd160, sha256 } from '@cosmjs/crypto';
 
 export function decodeAddress(address: string) {
@@ -25,10 +19,7 @@ export function operatorAddressToAccount(operAddress?: string) {
   return toBech32(prefix.replace('valoper', ''), data);
 }
 
-export function consensusPubkeyToHexAddress(consensusPubkey?: {
-  '@type': string;
-  key: string;
-}) {
+export function consensusPubkeyToHexAddress(consensusPubkey?: { '@type': string; key: string }) {
   if (!consensusPubkey) return '';
   let raw = '';
   if (consensusPubkey['@type'] === '/cosmos.crypto.ed25519.PubKey') {
@@ -45,7 +36,6 @@ export function consensusPubkeyToHexAddress(consensusPubkey?: {
 
 // not work as expected, will fix later or remove
 export function consumerKeyToBase64Address(consumerKey?: Record<string, string>) {
-
   if (!consumerKey) return '';
   let raw = '';
   if (consumerKey.ed25519) {
@@ -60,10 +50,7 @@ export function consumerKeyToBase64Address(consumerKey?: Record<string, string>)
   return raw;
 }
 
-export function pubKeyToValcons(
-  consensusPubkey: { '@type': string; key: string },
-  prefix: string
-) {
+export function pubKeyToValcons(consensusPubkey: { '@type': string; key: string }, prefix: string) {
   if (consensusPubkey && consensusPubkey.key) {
     const pubkey = fromBase64(consensusPubkey.key);
     if (pubkey) {
diff --git a/src/libs/api/customization/atomone.ts b/src/libs/api/customization/atomone.ts
index 5e03678c..bdcd8eef 100644
--- a/src/libs/api/customization/atomone.ts
+++ b/src/libs/api/customization/atomone.ts
@@ -1,68 +1,71 @@
-import type{ RequestRegistry } from '@/libs/api/registry'
+import type { RequestRegistry } from '@/libs/api/registry';
 // import dayjs from 'dayjs'
-import { adapter } from '@/libs/api/registry'
-import type { GovProposal, PaginatedProposals } from '@/types'
+import { adapter } from '@/libs/api/registry';
+import type { GovProposal, PaginatedProposals } from '@/types';
 
 // which registry is store
-export const store = 'name' // name or version
+export const store = 'name'; // name or version
 // Blockchain Name
-export const name = 'atomone'
+export const name = 'atomone';
 
 function proposalAdapter(p: any): GovProposal {
-    if(p) {
-        if(p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0]
-        //p.proposal_id = p.id
-        p.final_tally_result = {
-            yes: p.final_tally_result?.yes_count,
-            no: p.final_tally_result?.no_count,
-            no_with_veto: p.final_tally_result?.no_with_veto_count,
-            abstain: p.final_tally_result?.abstain_count,
-        }
-    }
-    return p
+  if (p) {
+    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0];
+    //p.proposal_id = p.id
+    p.final_tally_result = {
+      yes: p.final_tally_result?.yes_count,
+      no: p.final_tally_result?.no_count,
+      no_with_veto: p.final_tally_result?.no_with_veto_count,
+      abstain: p.final_tally_result?.abstain_count,
+    };
+  }
+  return p;
 }
 
 // osmosis custom request
 export const requests: Partial<RequestRegistry> = {
-    // mint_inflation: { 
-    //     url: `https://public-osmosis-api.numia.xyz/apr?start_date=${new Date(new Date().getTime() - 186400*1000).toISOString().split('T')[0]}&end_date=${new Date().toISOString().split('T')[0]}`, 
-    //     adapter: async (data: any) => {
-    //         const [first] = data
-    //         return {inflation: String(Number(first?.apr|| "0")/100.0)}
-    //     } 
-    // },
-    gov_params_voting: { url: '/atomone/gov/v1beta1/params/voting', adapter },
-    gov_params_tally: { url: '/atomone/gov/v1beta1/params/tallying', adapter },
-    gov_params_deposit: { url: '/atomone/gov/v1beta1/params/deposit', adapter },
-    gov_proposals: { url: '/atomone/gov/v1beta1/proposals', adapter: async (source: any): Promise<PaginatedProposals> => {
-      const proposals = source.proposals.map((p:any) => proposalAdapter(p))
+  // mint_inflation: {
+  //     url: `https://public-osmosis-api.numia.xyz/apr?start_date=${new Date(new Date().getTime() - 186400*1000).toISOString().split('T')[0]}&end_date=${new Date().toISOString().split('T')[0]}`,
+  //     adapter: async (data: any) => {
+  //         const [first] = data
+  //         return {inflation: String(Number(first?.apr|| "0")/100.0)}
+  //     }
+  // },
+  gov_params_voting: { url: '/atomone/gov/v1beta1/params/voting', adapter },
+  gov_params_tally: { url: '/atomone/gov/v1beta1/params/tallying', adapter },
+  gov_params_deposit: { url: '/atomone/gov/v1beta1/params/deposit', adapter },
+  gov_proposals: {
+    url: '/atomone/gov/v1beta1/proposals',
+    adapter: async (source: any): Promise<PaginatedProposals> => {
+      const proposals = source.proposals.map((p: any) => proposalAdapter(p));
       return {
-          proposals,
-          pagination: source.pagination
-      }
-    }},
-    gov_proposals_proposal_id: {
-      url: '/atomone/gov/v1beta1/proposals/{proposal_id}',
-      adapter: async (source: any): Promise<{proposal: GovProposal}> => {
-          return {
-              proposal: proposalAdapter(source.proposal)
-          }
-      },
+        proposals,
+        pagination: source.pagination,
+      };
     },
-    gov_proposals_deposits: {
-      url: '/atomone/gov/v1beta1/proposals/{proposal_id}/deposits',
-      adapter,
+  },
+  gov_proposals_proposal_id: {
+    url: '/atomone/gov/v1beta1/proposals/{proposal_id}',
+    adapter: async (source: any): Promise<{ proposal: GovProposal }> => {
+      return {
+        proposal: proposalAdapter(source.proposal),
+      };
     },
-    gov_proposals_tally: {
-      url: '/atomone/gov/v1beta1/proposals/{proposal_id}/tally',
-      adapter,
-    },
-    gov_proposals_votes: {
-      url: '/atomone/gov/v1beta1/proposals/{proposal_id}/votes',
-      adapter,
-    },
-    gov_proposals_votes_voter: {
-      url: '/atomone/gov/v1beta1/proposals/{proposal_id}/votes/{voter}',
-      adapter,
-    },
-}
+  },
+  gov_proposals_deposits: {
+    url: '/atomone/gov/v1beta1/proposals/{proposal_id}/deposits',
+    adapter,
+  },
+  gov_proposals_tally: {
+    url: '/atomone/gov/v1beta1/proposals/{proposal_id}/tally',
+    adapter,
+  },
+  gov_proposals_votes: {
+    url: '/atomone/gov/v1beta1/proposals/{proposal_id}/votes',
+    adapter,
+  },
+  gov_proposals_votes_voter: {
+    url: '/atomone/gov/v1beta1/proposals/{proposal_id}/votes/{voter}',
+    adapter,
+  },
+};
diff --git a/src/libs/api/customization/evmos.ts b/src/libs/api/customization/evmos.ts
index 09f8c527..fd2a4fe0 100644
--- a/src/libs/api/customization/evmos.ts
+++ b/src/libs/api/customization/evmos.ts
@@ -1,59 +1,65 @@
-import type{ RequestRegistry } from '../registry'
-import { adapter } from '../registry'
-import type { GovProposal, PaginatedProposals } from '@/types'
+import type { RequestRegistry } from '../registry';
+import { adapter } from '../registry';
+import type { GovProposal, PaginatedProposals } from '@/types';
 // which registry is store
-export const store = 'name' // name or version
+export const store = 'name'; // name or version
 // Blockchain Name
-export const name = 'evmos'
+export const name = 'evmos';
 
 function proposalAdapter(p: any): GovProposal {
-    if(p) {
-        if(p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0]
-        p.proposal_id = p.id
-        p.final_tally_result = {
-            yes: p.final_tally_result?.yes_count,
-            no: p.final_tally_result?.no_count,
-            no_with_veto: p.final_tally_result?.no_with_veto_count,
-            abstain: p.final_tally_result?.abstain_count,
-        }
-    }
-    return p
+  if (p) {
+    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0];
+    p.proposal_id = p.id;
+    p.final_tally_result = {
+      yes: p.final_tally_result?.yes_count,
+      no: p.final_tally_result?.no_count,
+      no_with_veto: p.final_tally_result?.no_with_veto_count,
+      abstain: p.final_tally_result?.abstain_count,
+    };
+  }
+  return p;
 }
 
 export const requests: Partial<RequestRegistry> = {
-    mint_inflation: { url: '/evmos/inflation/v1/inflation_rate', adapter: async (data: any) => ({inflation: (Number(data.inflation_rate || 0)/ 100 ).toFixed(2)}) },
-    gov_params_voting: { url: '/cosmos/gov/v1/params/voting', adapter },
-    gov_params_tally: { url: '/cosmos/gov/v1/params/tallying', adapter },
-    gov_params_deposit: { url: '/cosmos/gov/v1/params/deposit', adapter },
-    gov_proposals: { url: '/cosmos/gov/v1/proposals', adapter: async (source: any): Promise<PaginatedProposals> => {
-      const proposals = source.proposals.map((p:any) => proposalAdapter(p))
+  mint_inflation: {
+    url: '/evmos/inflation/v1/inflation_rate',
+    adapter: async (data: any) => ({ inflation: (Number(data.inflation_rate || 0) / 100).toFixed(2) }),
+  },
+  gov_params_voting: { url: '/cosmos/gov/v1/params/voting', adapter },
+  gov_params_tally: { url: '/cosmos/gov/v1/params/tallying', adapter },
+  gov_params_deposit: { url: '/cosmos/gov/v1/params/deposit', adapter },
+  gov_proposals: {
+    url: '/cosmos/gov/v1/proposals',
+    adapter: async (source: any): Promise<PaginatedProposals> => {
+      const proposals = source.proposals.map((p: any) => proposalAdapter(p));
       return {
-          proposals,
-          pagination: source.pagination
-      }
-    }},
-    gov_proposals_proposal_id: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}',
-      adapter: async (source: any): Promise<{proposal: GovProposal}> => {
-          return {
-              proposal: proposalAdapter(source.proposal)
-          }
-      },
+        proposals,
+        pagination: source.pagination,
+      };
     },
-    gov_proposals_deposits: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}/deposits',
-      adapter,
+  },
+  gov_proposals_proposal_id: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}',
+    adapter: async (source: any): Promise<{ proposal: GovProposal }> => {
+      return {
+        proposal: proposalAdapter(source.proposal),
+      };
     },
-    gov_proposals_tally: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}/tally',
-      adapter,
-    },
-    gov_proposals_votes: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}/votes',
-      adapter,
-    },
-    gov_proposals_votes_voter: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}/votes/{voter}',
-      adapter,
-    },
-}
+  },
+  gov_proposals_deposits: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}/deposits',
+    adapter,
+  },
+  gov_proposals_tally: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}/tally',
+    adapter,
+  },
+  gov_proposals_votes: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}/votes',
+    adapter,
+  },
+  gov_proposals_votes_voter: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}/votes/{voter}',
+    adapter,
+  },
+};
diff --git a/src/libs/api/customization/nolus.ts b/src/libs/api/customization/nolus.ts
index 3418d220..773e5d99 100644
--- a/src/libs/api/customization/nolus.ts
+++ b/src/libs/api/customization/nolus.ts
@@ -1,24 +1,24 @@
-import type { RequestRegistry } from '@/libs/api/registry'
-import type { GovProposal, PaginatedProposals } from '@/types'
+import type { RequestRegistry } from '@/libs/api/registry';
+import type { GovProposal, PaginatedProposals } from '@/types';
 import { CosmosRestClient } from '@/libs/client';
 import { useBlockchain } from '@/stores';
-import { adapter } from '@/libs/api/registry'
+import { adapter } from '@/libs/api/registry';
 
 // Blockchain Name
 export const name = 'nolus';
 
 function proposalAdapter(p: any): GovProposal {
   if (p) {
-    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0]
-    p.proposal_id = p.id
+    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0];
+    p.proposal_id = p.id;
     p.final_tally_result = {
       yes: p.final_tally_result?.yes_count,
       no: p.final_tally_result?.no_count,
       no_with_veto: p.final_tally_result?.no_with_veto_count,
       abstain: p.final_tally_result?.abstain_count,
-    }
+    };
   }
-  return p
+  return p;
 }
 
 // nolus custom request
@@ -27,31 +27,32 @@ export const requests: Partial<RequestRegistry> = {
     url: '/nolus/mint/v1beta1/annual_inflation',
     adapter: async (data: any): Promise<any> => {
       try {
-        const client = CosmosRestClient.newDefault(useBlockchain().endpoint.address)
-        const staking = await client.getStakingPool()
+        const client = CosmosRestClient.newDefault(useBlockchain().endpoint.address);
+        const staking = await client.getStakingPool();
         const inflation = Number(data.annual_inflation) / Number(staking.pool.bonded_tokens) || 0;
         return { inflation: inflation.toString() };
       } catch (error) {
-        console.log("Error in adapter:", error);
-        return { inflation: "0" };
+        console.log('Error in adapter:', error);
+        return { inflation: '0' };
       }
-    }
+    },
   },
   gov_proposals: {
-    url: '/cosmos/gov/v1/proposals', adapter: async (source: any): Promise<PaginatedProposals> => {
-      const proposals = source.proposals.map((p: any) => proposalAdapter(p))
+    url: '/cosmos/gov/v1/proposals',
+    adapter: async (source: any): Promise<PaginatedProposals> => {
+      const proposals = source.proposals.map((p: any) => proposalAdapter(p));
       return {
         proposals,
-        pagination: source.pagination
-      }
-    }
+        pagination: source.pagination,
+      };
+    },
   },
   gov_proposals_proposal_id: {
     url: '/cosmos/gov/v1/proposals/{proposal_id}',
     adapter: async (source: any): Promise<{ proposal: GovProposal }> => {
       return {
-        proposal: proposalAdapter(source.proposal)
-      }
+        proposal: proposalAdapter(source.proposal),
+      };
     },
   },
   gov_params_voting: { url: '/cosmos/gov/v1/params/voting', adapter },
@@ -61,5 +62,5 @@ export const requests: Partial<RequestRegistry> = {
   gov_proposals_tally: { url: '/cosmos/gov/v1/proposals/{proposal_id}/tally', adapter },
   gov_proposals_votes: { url: '/cosmos/gov/v1/proposals/{proposal_id}/votes', adapter },
   gov_proposals_votes_voter: { url: '/cosmos/gov/v1/proposals/{proposal_id}/votes/{voter}', adapter },
-  bank_supply_by_denom: { url: "/cosmos/bank/v1beta1/supply/by_denom?denom={denom}", adapter }
+  bank_supply_by_denom: { url: '/cosmos/bank/v1beta1/supply/by_denom?denom={denom}', adapter },
 };
diff --git a/src/libs/api/customization/osmosis.ts b/src/libs/api/customization/osmosis.ts
index 60c7e56a..8f864504 100644
--- a/src/libs/api/customization/osmosis.ts
+++ b/src/libs/api/customization/osmosis.ts
@@ -1,68 +1,73 @@
-import type{ RequestRegistry } from '@/libs/api/registry'
+import type { RequestRegistry } from '@/libs/api/registry';
 // import dayjs from 'dayjs'
-import { adapter } from '@/libs/api/registry'
-import type { GovProposal, PaginatedProposals } from '@/types'
+import { adapter } from '@/libs/api/registry';
+import type { GovProposal, PaginatedProposals } from '@/types';
 
 // which registry is store
-export const store = 'name' // name or version
+export const store = 'name'; // name or version
 // Blockchain Name
-export const name = 'osmosis'
+export const name = 'osmosis';
 
 function proposalAdapter(p: any): GovProposal {
-    if(p) {
-        if(p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0]
-        p.proposal_id = p.id
-        p.final_tally_result = {
-            yes: p.final_tally_result?.yes_count,
-            no: p.final_tally_result?.no_count,
-            no_with_veto: p.final_tally_result?.no_with_veto_count,
-            abstain: p.final_tally_result?.abstain_count,
-        }
-    }
-    return p
+  if (p) {
+    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0];
+    p.proposal_id = p.id;
+    p.final_tally_result = {
+      yes: p.final_tally_result?.yes_count,
+      no: p.final_tally_result?.no_count,
+      no_with_veto: p.final_tally_result?.no_with_veto_count,
+      abstain: p.final_tally_result?.abstain_count,
+    };
+  }
+  return p;
 }
 
 // osmosis custom request
 export const requests: Partial<RequestRegistry> = {
-    mint_inflation: { 
-        url: `https://public-osmosis-api.numia.xyz/apr?start_date=${new Date(new Date().getTime() - 186400*1000).toISOString().split('T')[0]}&end_date=${new Date().toISOString().split('T')[0]}`, 
-        adapter: async (data: any) => {
-            const [first] = data
-            return {inflation: String(Number(first?.apr|| "0")/100.0)}
-        } 
+  mint_inflation: {
+    url: `https://public-osmosis-api.numia.xyz/apr?start_date=${
+      new Date(new Date().getTime() - 186400 * 1000).toISOString().split('T')[0]
+    }&end_date=${new Date().toISOString().split('T')[0]}`,
+    adapter: async (data: any) => {
+      const [first] = data;
+      return { inflation: String(Number(first?.apr || '0') / 100.0) };
     },
-    gov_params_voting: { url: '/cosmos/gov/v1/params/voting', adapter },
-    gov_params_tally: { url: '/cosmos/gov/v1/params/tallying', adapter },
-    gov_params_deposit: { url: '/cosmos/gov/v1/params/deposit', adapter },
-    gov_proposals: { url: '/cosmos/gov/v1/proposals', adapter: async (source: any): Promise<PaginatedProposals> => {
-      const proposals = source.proposals.map((p:any) => proposalAdapter(p))
+  },
+  gov_params_voting: { url: '/cosmos/gov/v1/params/voting', adapter },
+  gov_params_tally: { url: '/cosmos/gov/v1/params/tallying', adapter },
+  gov_params_deposit: { url: '/cosmos/gov/v1/params/deposit', adapter },
+  gov_proposals: {
+    url: '/cosmos/gov/v1/proposals',
+    adapter: async (source: any): Promise<PaginatedProposals> => {
+      const proposals = source.proposals.map((p: any) => proposalAdapter(p));
       return {
-          proposals,
-          pagination: source.pagination
-      }
-    }},
-    gov_proposals_proposal_id: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}',
-      adapter: async (source: any): Promise<{proposal: GovProposal}> => {
-          return {
-              proposal: proposalAdapter(source.proposal)
-          }
-      },
+        proposals,
+        pagination: source.pagination,
+      };
     },
-    gov_proposals_deposits: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}/deposits',
-      adapter,
+  },
+  gov_proposals_proposal_id: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}',
+    adapter: async (source: any): Promise<{ proposal: GovProposal }> => {
+      return {
+        proposal: proposalAdapter(source.proposal),
+      };
     },
-    gov_proposals_tally: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}/tally',
-      adapter,
-    },
-    gov_proposals_votes: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}/votes',
-      adapter,
-    },
-    gov_proposals_votes_voter: {
-      url: '/cosmos/gov/v1/proposals/{proposal_id}/votes/{voter}',
-      adapter,
-    },
-}
+  },
+  gov_proposals_deposits: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}/deposits',
+    adapter,
+  },
+  gov_proposals_tally: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}/tally',
+    adapter,
+  },
+  gov_proposals_votes: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}/votes',
+    adapter,
+  },
+  gov_proposals_votes_voter: {
+    url: '/cosmos/gov/v1/proposals/{proposal_id}/votes/{voter}',
+    adapter,
+  },
+};
diff --git a/src/libs/api/customization/v0.46.0.ts b/src/libs/api/customization/v0.46.0.ts
index 36aa7805..d7048309 100644
--- a/src/libs/api/customization/v0.46.0.ts
+++ b/src/libs/api/customization/v0.46.0.ts
@@ -1,51 +1,54 @@
-import type { RequestRegistry } from '@/libs/api/registry'
-import { adapter } from '@/libs/api/registry'
+import type { RequestRegistry } from '@/libs/api/registry';
+import { adapter } from '@/libs/api/registry';
 import type {
-    GovParams,
-    GovProposal,
-    GovVote,
-    PaginatedProposalDeposit,
-    PaginatedProposalVotes,
-    PaginatedProposals,
-    Tally,
-  } from '@/types/';
+  GovParams,
+  GovProposal,
+  GovVote,
+  PaginatedProposalDeposit,
+  PaginatedProposalVotes,
+  PaginatedProposals,
+  Tally,
+} from '@/types/';
 
 // which registry is store
-export const store = 'version' // name or version
+export const store = 'version'; // name or version
 // Cosmos SDK version
-export const name = 'v0.46.7'
+export const name = 'v0.46.7';
 
 function proposalAdapter(p: any): GovProposal {
-    if(p) {
-        if(p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0]
-        p.proposal_id = p.id
-        p.final_tally_result = {
-            yes: p.final_tally_result?.yes_count,
-            no: p.final_tally_result?.no_count,
-            no_with_veto: p.final_tally_result?.no_with_veto_count,
-            abstain: p.final_tally_result?.abstain_count,
-        }
-    }
-    return p
+  if (p) {
+    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0];
+    p.proposal_id = p.id;
+    p.final_tally_result = {
+      yes: p.final_tally_result?.yes_count,
+      no: p.final_tally_result?.no_count,
+      no_with_veto: p.final_tally_result?.no_with_veto_count,
+      abstain: p.final_tally_result?.abstain_count,
+    };
+  }
+  return p;
 }
 
 export const requests: Partial<RequestRegistry> = {
   gov_params_voting: { url: '/cosmos/gov/v1/params/voting', adapter },
   gov_params_tally: { url: '/cosmos/gov/v1/params/tallying', adapter },
   gov_params_deposit: { url: '/cosmos/gov/v1/params/deposit', adapter },
-  gov_proposals: { url: '/cosmos/gov/v1/proposals', adapter: async (source: any): Promise<PaginatedProposals> => {
-    const proposals = source.proposals.map((p:any) => proposalAdapter(p))
-    return {
+  gov_proposals: {
+    url: '/cosmos/gov/v1/proposals',
+    adapter: async (source: any): Promise<PaginatedProposals> => {
+      const proposals = source.proposals.map((p: any) => proposalAdapter(p));
+      return {
         proposals,
-        pagination: source.pagination
-    }
-  }},
+        pagination: source.pagination,
+      };
+    },
+  },
   gov_proposals_proposal_id: {
     url: '/cosmos/gov/v1/proposals/{proposal_id}',
-    adapter: async (source: any): Promise<{proposal: GovProposal}> => {
-        return {
-            proposal: proposalAdapter(source.proposal)
-        }
+    adapter: async (source: any): Promise<{ proposal: GovProposal }> => {
+      return {
+        proposal: proposalAdapter(source.proposal),
+      };
     },
   },
   gov_proposals_deposits: {
@@ -64,4 +67,4 @@ export const requests: Partial<RequestRegistry> = {
     url: '/cosmos/gov/v1/proposals/{proposal_id}/votes/{voter}',
     adapter,
   },
-}
+};
diff --git a/src/libs/api/customization/v0.50.0.ts b/src/libs/api/customization/v0.50.0.ts
index fec605ba..9541c5f9 100644
--- a/src/libs/api/customization/v0.50.0.ts
+++ b/src/libs/api/customization/v0.50.0.ts
@@ -1,53 +1,55 @@
-import type { RequestRegistry } from '@/libs/api/registry'
-import { adapter } from '@/libs/api/registry'
+import type { RequestRegistry } from '@/libs/api/registry';
+import { adapter } from '@/libs/api/registry';
 import type {
-    GovParams,
-    GovProposal,
-    GovVote,
-    PaginatedProposalDeposit,
-    PaginatedProposalVotes,
-    PaginatedProposals,
-    Tally,
-  } from '@/types/';
+  GovParams,
+  GovProposal,
+  GovVote,
+  PaginatedProposalDeposit,
+  PaginatedProposalVotes,
+  PaginatedProposals,
+  Tally,
+} from '@/types/';
 
 // which registry is store
-export const store = 'version' // name or version
+export const store = 'version'; // name or version
 // Cosmos SDK version
-export const name = 'v0.50.0'
+export const name = 'v0.50.0';
 
 function proposalAdapter(p: any): GovProposal {
-    if(p) {
-        if(p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0]
-        p.proposal_id = p.id
-        p.final_tally_result = {
-            yes: p.final_tally_result?.yes_count,
-            no: p.final_tally_result?.no_count,
-            no_with_veto: p.final_tally_result?.no_with_veto_count,
-            abstain: p.final_tally_result?.abstain_count,
-        }
-    }
-    return p
+  if (p) {
+    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0];
+    p.proposal_id = p.id;
+    p.final_tally_result = {
+      yes: p.final_tally_result?.yes_count,
+      no: p.final_tally_result?.no_count,
+      no_with_veto: p.final_tally_result?.no_with_veto_count,
+      abstain: p.final_tally_result?.abstain_count,
+    };
+  }
+  return p;
 }
 
 export const requests: Partial<RequestRegistry> = {
-  
   bank_supply_by_denom: { url: '/cosmos/bank/v1beta1/supply/by_denom?denom={denom}', adapter },
   gov_params_voting: { url: '/cosmos/gov/v1/params/voting', adapter },
   gov_params_tally: { url: '/cosmos/gov/v1/params/tallying', adapter },
   gov_params_deposit: { url: '/cosmos/gov/v1/params/deposit', adapter },
-  gov_proposals: { url: '/cosmos/gov/v1/proposals', adapter: async (source: any): Promise<PaginatedProposals> => {
-    const proposals = source.proposals.map((p:any) => proposalAdapter(p))
-    return {
+  gov_proposals: {
+    url: '/cosmos/gov/v1/proposals',
+    adapter: async (source: any): Promise<PaginatedProposals> => {
+      const proposals = source.proposals.map((p: any) => proposalAdapter(p));
+      return {
         proposals,
-        pagination: source.pagination
-    }
-  }},
+        pagination: source.pagination,
+      };
+    },
+  },
   gov_proposals_proposal_id: {
     url: '/cosmos/gov/v1/proposals/{proposal_id}',
-    adapter: async (source: any): Promise<{proposal: GovProposal}> => {
-        return {
-            proposal: proposalAdapter(source.proposal)
-        }
+    adapter: async (source: any): Promise<{ proposal: GovProposal }> => {
+      return {
+        proposal: proposalAdapter(source.proposal),
+      };
     },
   },
   gov_proposals_deposits: {
@@ -66,4 +68,4 @@ export const requests: Partial<RequestRegistry> = {
     url: '/cosmos/gov/v1/proposals/{proposal_id}/votes/{voter}',
     adapter,
   },
-}
+};
diff --git a/src/libs/api/customization/xion.ts b/src/libs/api/customization/xion.ts
index 4544d270..408923d9 100644
--- a/src/libs/api/customization/xion.ts
+++ b/src/libs/api/customization/xion.ts
@@ -1,11 +1,8 @@
 import type { RequestRegistry } from '@/libs/api/registry';
-import { adapter } from '@/libs/api/registry'
+import { adapter } from '@/libs/api/registry';
 import { CosmosRestClient } from '@/libs/client';
 import { useBlockchain } from '@/stores';
-import type {
-  GovProposal,
-  PaginatedProposals,
-} from '@/types/';
+import type { GovProposal, PaginatedProposals } from '@/types/';
 
 // which registry is store
 export const store = 'name'; // name or version
@@ -14,16 +11,16 @@ export const name = 'xion';
 
 export function proposalAdapter(p: any): GovProposal {
   if (p) {
-    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0]
-    p.proposal_id = p.id
+    if (p.messages && p.messages.length >= 1) p.content = p.messages[0].content || p.messages[0];
+    p.proposal_id = p.id;
     p.final_tally_result = {
       yes: p.final_tally_result?.yes_count,
       no: p.final_tally_result?.no_count,
       no_with_veto: p.final_tally_result?.no_with_veto_count,
       abstain: p.final_tally_result?.abstain_count,
-    }
+    };
   }
-  return p
+  return p;
 }
 
 // xion custom request
@@ -33,20 +30,21 @@ export const requests: Partial<RequestRegistry> = {
   gov_params_tally: { url: '/cosmos/gov/v1/params/tallying', adapter },
   gov_params_deposit: { url: '/cosmos/gov/v1/params/deposit', adapter },
   gov_proposals: {
-    url: '/cosmos/gov/v1/proposals', adapter: async (source: any): Promise<PaginatedProposals> => {
-      const proposals = source.proposals.map((p: any) => proposalAdapter(p))
+    url: '/cosmos/gov/v1/proposals',
+    adapter: async (source: any): Promise<PaginatedProposals> => {
+      const proposals = source.proposals.map((p: any) => proposalAdapter(p));
       return {
         proposals,
-        pagination: source.pagination
-      }
-    }
+        pagination: source.pagination,
+      };
+    },
   },
   gov_proposals_proposal_id: {
     url: '/cosmos/gov/v1/proposals/{proposal_id}',
     adapter: async (source: any): Promise<{ proposal: GovProposal }> => {
       return {
-        proposal: proposalAdapter(source.proposal)
-      }
+        proposal: proposalAdapter(source.proposal),
+      };
     },
   },
   gov_proposals_deposits: {
@@ -69,9 +67,7 @@ export const requests: Partial<RequestRegistry> = {
     url: '/cosmos/mint/v1beta1/inflation',
     adapter: async (data: any): Promise<{ inflation: string }> => {
       try {
-        const client = CosmosRestClient.newDefault(
-          useBlockchain().endpoint.address
-        );
+        const client = CosmosRestClient.newDefault(useBlockchain().endpoint.address);
 
         // Get distribution params to fetch community tax
         const { params } = await client.getDistributionParams().catch((e) => {
@@ -85,8 +81,7 @@ export const requests: Partial<RequestRegistry> = {
         const communityTax = params.community_tax;
 
         // apr calcuation is inflation * (1 - communityTax)
-        const adjustedInflation =
-          parseFloat(data.inflation) * (1 - parseFloat(communityTax));
+        const adjustedInflation = parseFloat(data.inflation) * (1 - parseFloat(communityTax));
 
         return { inflation: adjustedInflation.toString() };
       } catch (e) {
@@ -99,4 +94,4 @@ export const requests: Partial<RequestRegistry> = {
       }
     },
   },
-}
+};
diff --git a/src/libs/api/index.ts b/src/libs/api/index.ts
index cdf9c9ea..034fbe56 100644
--- a/src/libs/api/index.ts
+++ b/src/libs/api/index.ts
@@ -1,7 +1,4 @@
-import {
-  type RequestRegistry,
-  adapter,
-} from './registry';
+import { type RequestRegistry, adapter } from './registry';
 
 export const DEFAULT: RequestRegistry = {
   auth_params: { url: '/cosmos/auth/v1beta1/params', adapter },
@@ -228,5 +225,4 @@ export const DEFAULT: RequestRegistry = {
     url: '/cosmos/group/v1/proposals_by_group_policy/{address}',
     adapter,
   },
-
 };
diff --git a/src/libs/api/registry.ts b/src/libs/api/registry.ts
index 9e975bf4..b519a8a8 100644
--- a/src/libs/api/registry.ts
+++ b/src/libs/api/registry.ts
@@ -16,16 +16,8 @@ import type {
   PaginatedIBCConnections,
   PaginatedTendermintValidator,
 } from '@/types';
-import type {
-  BankParams,
-  PaginatedBalances,
-  PaginatedDenomMetadata,
-  PaginatedSupply,
-} from '@/types/bank';
-import type {
-  DistributionParams,
-  PaginatedSlashes,
-} from '@/types/distribution';
+import type { BankParams, PaginatedBalances, PaginatedDenomMetadata, PaginatedSupply } from '@/types/bank';
+import type { DistributionParams, PaginatedSlashes } from '@/types/distribution';
 import type {
   GovParams,
   GovProposal,
@@ -47,7 +39,7 @@ import type {
   Validator,
 } from '@/types/staking';
 import type { PaginatedTxs, Tx, TxResponse } from '@/types';
-import semver from 'semver'
+import semver from 'semver';
 export interface Request<T> {
   url: string;
   adapter: (source: any) => Promise<T>;
@@ -80,10 +72,10 @@ export interface RequestRegistry extends AbstractRegistry {
   distribution_community_pool: Request<{ pool: Coin[] }>;
   distribution_delegator_rewards: Request<{
     rewards: {
-      validator_address: string, 
-      reward: Coin[]
-    }[],
-    total: Coin[]
+      validator_address: string;
+      reward: Coin[];
+    }[];
+    total: Coin[];
   }>;
 
   mint_inflation: Request<{ inflation: string }>;
@@ -95,7 +87,7 @@ export interface RequestRegistry extends AbstractRegistry {
   }>;
   mint_annual_provisions: Request<{ annual_provisions: string }>;
 
-  slashing_params: Request<{params: SlashingParam}>;
+  slashing_params: Request<{ params: SlashingParam }>;
   slashing_signing_info: Request<PaginatedSigningInfo>;
 
   gov_params_voting: Request<GovParams>;
@@ -129,7 +121,7 @@ export interface RequestRegistry extends AbstractRegistry {
   base_tendermint_validatorsets_latest: Request<PaginatedTendermintValidator>;
   base_tendermint_validatorsets_height: Request<PaginatedTendermintValidator>;
 
-  params: Request<{param: any}>;
+  params: Request<{ param: any }>;
 
   group_groups: Request<PaginatedGroups>;
   group_groups_by_admin: Request<PaginatedGroups>;
@@ -163,9 +155,11 @@ export interface RequestRegistry extends AbstractRegistry {
   ibc_core_connection_connections: Request<PaginatedIBCConnections>;
   ibc_core_connection_connections_connection_id: Request<ConnectionWithProof>;
   ibc_core_connection_connections_connection_id_client_state: Request<ClientStateWithProof>;
-  interchain_security_ccv_provider_validator_consumer_addr: Request<{consumer_address: string}>
-  interchain_security_provider_opted_in_validators: Request<{validators_provider_addresses: string[]}>
-  interchain_security_consumer_validators: Request<{validators: {provider_address: string, consumer_key: {ed25519: string}, power: string}[]}>
+  interchain_security_ccv_provider_validator_consumer_addr: Request<{ consumer_address: string }>;
+  interchain_security_provider_opted_in_validators: Request<{ validators_provider_addresses: string[] }>;
+  interchain_security_consumer_validators: Request<{
+    validators: { provider_address: string; consumer_key: { ed25519: string }; power: string }[];
+  }>;
 }
 
 export function adapter<T>(source: any): Promise<T> {
@@ -176,10 +170,7 @@ export interface ApiProfileRegistry {
   [key: string]: RequestRegistry;
 }
 
-export function withCustomRequest<T extends RequestRegistry>(
-  target: T,
-  source?: Partial<T>
-): T {
+export function withCustomRequest<T extends RequestRegistry>(target: T, source?: Partial<T>): T {
   return source ? Object.assign({}, target, source) : target;
 }
 
@@ -189,15 +180,13 @@ export const VERSION_REGISTRY: ApiProfileRegistry = {};
 export const NAME_REGISTRY: ApiProfileRegistry = {};
 
 export function registryVersionProfile(version: string, requests: RequestRegistry) {
-  VERSION_REGISTRY[version] = requests
+  VERSION_REGISTRY[version] = requests;
 }
 
 export function registryChainProfile(version: string, requests: RequestRegistry) {
-  NAME_REGISTRY[version] = requests
+  NAME_REGISTRY[version] = requests;
 }
-export function findApiProfileByChain(
-  name: string,
-): RequestRegistry {
+export function findApiProfileByChain(name: string): RequestRegistry {
   const url = NAME_REGISTRY[name];
   // if (!url) {
   //   throw new Error(`Unsupported version or name: ${name}`);
@@ -205,13 +194,11 @@ export function findApiProfileByChain(
   return url;
 }
 
-export function findApiProfileBySDKVersion(
-  version: string,
-): RequestRegistry | undefined {
+export function findApiProfileBySDKVersion(version: string): RequestRegistry | undefined {
   let closestVersion: string | null = null;
-  const chain_version = version.match(/(\d+\.\d+\.?\d*)/g) || [""];
+  const chain_version = version.match(/(\d+\.\d+\.?\d*)/g) || [''];
   for (const k in VERSION_REGISTRY) {
-    const key = k.replace('v', "")
+    const key = k.replace('v', '');
     if (semver.lte(key, chain_version[0])) {
       if (!closestVersion || semver.gt(key, closestVersion)) {
         closestVersion = k;
diff --git a/src/libs/client.ts b/src/libs/client.ts
index 99275e81..e9ae6249 100644
--- a/src/libs/client.ts
+++ b/src/libs/client.ts
@@ -11,8 +11,8 @@ import {
   registryVersionProfile,
   withCustomRequest,
 } from './api/registry';
-import { PageRequest,type Coin } from '@/types';
-import semver from 'semver'
+import { PageRequest, type Coin } from '@/types';
+import semver from 'semver';
 
 export class BaseRestClient<R extends AbstractRegistry> {
   version: string;
@@ -21,17 +21,17 @@ export class BaseRestClient<R extends AbstractRegistry> {
   constructor(endpoint: string, registry: R, version?: string) {
     this.endpoint = endpoint;
     this.registry = registry;
-    this.version = version || 'v0.40'
+    this.version = version || 'v0.40';
   }
-  async request<T>(request: Request<T>, args: Record<string, any>, query = '', adapter?: (source: any) => Promise<T> ) {
-    let url = `${request.url.startsWith("http")?'':this.endpoint}${request.url}${query}`;
+  async request<T>(request: Request<T>, args: Record<string, any>, query = '', adapter?: (source: any) => Promise<T>) {
+    let url = `${request.url.startsWith('http') ? '' : this.endpoint}${request.url}${query}`;
     Object.keys(args).forEach((k) => {
       url = url.replace(`{${k}}`, args[k] || '');
     });
-    return fetchData<T>(url, adapter||request.adapter);
+    return fetchData<T>(url, adapter || request.adapter);
   }
-  async get<T>(request: Request<T>, args: Record<string, any>, query = '' ) {
-    let url = `${request.url.startsWith("http")?'':this.endpoint}${request.url}${query}`;
+  async get<T>(request: Request<T>, args: Record<string, any>, query = '') {
+    let url = `${request.url.startsWith('http') ? '' : this.endpoint}${request.url}${query}`;
     Object.keys(args).forEach((k) => {
       url = url.replace(`{${k}}`, args[k] || '');
     });
@@ -42,41 +42,41 @@ export class BaseRestClient<R extends AbstractRegistry> {
 // dynamic all custom request implementations
 function registeCustomRequest() {
   const extensions: Record<string, any> = import.meta.glob('./api/customization/*.ts', { eager: true });
-  Object.values(extensions).forEach(m => {
-    if(m.store === 'version') {
-      registryVersionProfile(m.name, withCustomRequest(DEFAULT, m.requests))
+  Object.values(extensions).forEach((m) => {
+    if (m.store === 'version') {
+      registryVersionProfile(m.name, withCustomRequest(DEFAULT, m.requests));
     } else {
       registryChainProfile(m.name, withCustomRequest(DEFAULT, m.requests));
     }
   });
 }
-    
-registeCustomRequest()
+
+registeCustomRequest();
 
 export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
   static newDefault(endpoint: string) {
-    return new CosmosRestClient(endpoint, DEFAULT)
+    return new CosmosRestClient(endpoint, DEFAULT);
   }
 
   static newStrategy(endpoint: string, chain: any) {
     // sdk version of current chain
-    const ver = localStorage.getItem(`sdk_version_${chain.chainName}`) || chain.versions?.cosmosSdk
-    let profile
-    if(chain) {
+    const ver = localStorage.getItem(`sdk_version_${chain.chainName}`) || chain.versions?.cosmosSdk;
+    let profile;
+    if (chain) {
       // find by name first
-      profile = findApiProfileByChain(chain.chainName)
+      profile = findApiProfileByChain(chain.chainName);
       // if not found. try sdk version
-      if(!profile && chain.versions?.cosmosSdk) {
-        profile = findApiProfileBySDKVersion(ver)
+      if (!profile && chain.versions?.cosmosSdk) {
+        profile = findApiProfileBySDKVersion(ver);
       }
     }
-    return new CosmosRestClient(endpoint, profile || DEFAULT, ver)
+    return new CosmosRestClient(endpoint, profile || DEFAULT, ver);
   }
 
   // Auth Module
   async getAuthAccounts(page?: PageRequest) {
-    if(!page) page = new PageRequest()
-    const query =`?${page.toQueryString()}`;
+    if (!page) page = new PageRequest();
+    const query = `?${page.toQueryString()}`;
     return this.request(this.registry.auth_accounts, {}, query);
   }
   async getAuthAccount(address: string) {
@@ -92,20 +92,23 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
   async getBankDenomMetadata() {
     return this.request(this.registry.bank_denoms_metadata, {});
   }
-  async getBankSupply(page?: PageRequest) {    
-    if(!page) page = new PageRequest()
-    const query =`?${page.toQueryString()}`;
+  async getBankSupply(page?: PageRequest) {
+    if (!page) page = new PageRequest();
+    const query = `?${page.toQueryString()}`;
     return this.request(this.registry.bank_supply, {}, query);
   }
   async getBankSupplyByDenom(denom: string) {
     let supply;
-    try{
-       supply = await this.request(this.registry.bank_supply_by_denom, { denom });
-    } catch(err) {
+    try {
+      supply = await this.request(this.registry.bank_supply_by_denom, { denom });
+    } catch (err) {
       // will move this to sdk version profile later
-      supply = await this.request({url: "/cosmos/bank/v1beta1/supply/by_denom?denom={denom}", adapter } as Request<{ amount: Coin }>, { denom });
+      supply = await this.request(
+        { url: '/cosmos/bank/v1beta1/supply/by_denom?denom={denom}', adapter } as Request<{ amount: Coin }>,
+        { denom }
+      );
     }
-    return supply
+    return supply;
   }
   // Distribution Module
   async getDistributionParams() {
@@ -125,10 +128,7 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     });
   }
   async getDistributionValidatorOutstandingRewards(validator_address: string) {
-    return this.request(
-      this.registry.distribution_validator_outstanding_rewards,
-      { validator_address }
-    );
+    return this.request(this.registry.distribution_validator_outstanding_rewards, { validator_address });
   }
   async getDistributionValidatorSlashes(validator_address: string) {
     return this.request(this.registry.distribution_validator_slashes, {
@@ -145,8 +145,8 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
   }
   // Gov
   async getParams(subspace: string, key: string) {
-    console.log(this.registry.params, subspace, key)
-    return this.request(this.registry.params, {subspace, key});
+    console.log(this.registry.params, subspace, key);
+    return this.request(this.registry.params, { subspace, key });
   }
   async getGovParamsVoting() {
     return this.request(this.registry.gov_params_voting, {});
@@ -158,9 +158,9 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     return this.request(this.registry.gov_params_tally, {});
   }
   async getGovProposals(status: string, page?: PageRequest) {
-    if(!page) page = new PageRequest()
-    page.reverse = true
-    const query =`?proposal_status={status}&${page.toQueryString()}`;
+    if (!page) page = new PageRequest();
+    page.reverse = true;
+    const query = `?proposal_status={status}&${page.toQueryString()}`;
     return this.request(this.registry.gov_proposals, { status }, query);
   }
   async getGovProposal(proposal_id: string) {
@@ -173,20 +173,20 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
   }
   async getGovProposalTally(proposal_id: string) {
     return this.request(this.registry.gov_proposals_tally, { proposal_id }, undefined, (source: any) => {
-      return Promise.resolve({ tally: {
-        yes: source.tally.yes || source.tally.yes_count,
-        abstain: source.tally.abstain || source.tally.abstain_count,
-        no: source.tally.no || source.tally.no_count,
-        no_with_veto: source.tally.no_with_veto || source.tally.no_with_veto_count,
+      return Promise.resolve({
+        tally: {
+          yes: source.tally.yes || source.tally.yes_count,
+          abstain: source.tally.abstain || source.tally.abstain_count,
+          no: source.tally.no || source.tally.no_count,
+          no_with_veto: source.tally.no_with_veto || source.tally.no_with_veto_count,
         },
-        });
-      }
-    );
+      });
+    });
   }
   async getGovProposalVotes(proposal_id: string, page?: PageRequest) {
-    if(!page) page = new PageRequest()
-    page.reverse = true
-    const query =`?proposal_status={status}&${page.toQueryString()}`;
+    if (!page) page = new PageRequest();
+    page.reverse = true;
+    const query = `?proposal_status={status}&${page.toQueryString()}`;
     return this.request(this.registry.gov_proposals_votes, { proposal_id }, query);
   }
   async getGovProposalVotesVoter(proposal_id: string, voter: string) {
@@ -229,34 +229,29 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     });
   }
   async getStakingValidatorsDelegations(validator_addr: string, page?: PageRequest) {
-    if(!page) {
-      page = new PageRequest()
+    if (!page) {
+      page = new PageRequest();
       // page.reverse = true
-      page.count_total = true
-      page.offset = 0
-    } 
-    const query =`?${page.toQueryString()}`;
-    return this.request(this.registry.staking_validators_delegations, {
+      page.count_total = true;
+      page.offset = 0;
+    }
+    const query = `?${page.toQueryString()}`;
+    return this.request(
+      this.registry.staking_validators_delegations,
+      {
+        validator_addr,
+      },
+      query
+    );
+  }
+  async getStakingValidatorsDelegationsDelegator(validator_addr: string, delegator_addr: string) {
+    return this.request(this.registry.staking_validators_delegations_delegator, { validator_addr, delegator_addr });
+  }
+  async getStakingValidatorsDelegationsUnbonding(validator_addr: string, delegator_addr: string) {
+    return this.request(this.registry.staking_validators_delegations_unbonding_delegations, {
       validator_addr,
-    }, query);
-  }
-  async getStakingValidatorsDelegationsDelegator(
-    validator_addr: string,
-    delegator_addr: string
-  ) {
-    return this.request(
-      this.registry.staking_validators_delegations_delegator,
-      { validator_addr, delegator_addr }
-    );
-  }
-  async getStakingValidatorsDelegationsUnbonding(
-    validator_addr: string,
-    delegator_addr: string
-  ) {
-    return this.request(
-      this.registry.staking_validators_delegations_unbonding_delegations,
-      { validator_addr, delegator_addr }
-    );
+      delegator_addr,
+    });
   }
 
   //tendermint
@@ -273,22 +268,28 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     return this.request(this.registry.base_tendermint_node_info, {});
   }
   async getBaseValidatorsetAt(height: string | number, offset: number) {
-    const query = `?pagination.limit=100&pagination.offset=${offset}`
-    return this.request(this.registry.base_tendermint_validatorsets_height, {
-      height,
-    }, query);
+    const query = `?pagination.limit=100&pagination.offset=${offset}`;
+    return this.request(
+      this.registry.base_tendermint_validatorsets_height,
+      {
+        height,
+      },
+      query
+    );
   }
   async getBaseValidatorsetLatest(offset: number) {
-    const query = `?pagination.limit=100&pagination.offset=${offset}`
+    const query = `?pagination.limit=100&pagination.offset=${offset}`;
     return this.request(this.registry.base_tendermint_validatorsets_latest, {}, query);
   }
   // tx
   async getTxsBySender(sender: string, page?: PageRequest) {
-    if(!page) page = new PageRequest()
+    if (!page) page = new PageRequest();
 
-    let query = `?events=message.sender='${sender}'&pagination.limit=${page.limit}&pagination.offset=${page.offset||0}`;
+    let query = `?events=message.sender='${sender}'&pagination.limit=${page.limit}&pagination.offset=${
+      page.offset || 0
+    }`;
     if (semver.gte(this.version.replaceAll('v', ''), '0.50.0')) {
-      query = `?query=message.sender='${sender}'&pagination.limit=${page.limit}&pagination.offset=${page.offset||0}`;
+      query = `?query=message.sender='${sender}'&pagination.limit=${page.limit}&pagination.offset=${page.offset || 0}`;
     }
     return this.request(this.registry.tx_txs, {}, query);
   }
@@ -297,11 +298,11 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
   // query ibc receiving msgs
   // ?&pagination.reverse=true&events=recv_packet.packet_dst_channel='${channel}'&events=recv_packet.packet_dst_port='${port}'
   async getTxs(query: string, params: any, page?: PageRequest) {
-    if(!page) page = new PageRequest()
+    if (!page) page = new PageRequest();
     if (semver.gte(this.version.replaceAll('v', ''), '0.50.0')) {
-      let query_edit = query.replaceAll('events=', 'query=')    
+      let query_edit = query.replaceAll('events=', 'query=');
       return this.request(this.registry.tx_txs, params, `${query_edit}&${page.toQueryString()}`);
-    } else { 
+    } else {
       return this.request(this.registry.tx_txs, params, `${query}&${page.toQueryString()}`);
     }
   }
@@ -330,21 +331,15 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     });
   }
   async getIBCConnections(page?: PageRequest) {
-    if(!page) page = new PageRequest()
-    const query =`?${page.toQueryString()}`;
+    if (!page) page = new PageRequest();
+    const query = `?${page.toQueryString()}`;
     return this.request(this.registry.ibc_core_connection_connections, {}, query);
   }
   async getIBCConnectionsById(connection_id: string) {
-    return this.request(
-      this.registry.ibc_core_connection_connections_connection_id,
-      { connection_id }
-    );
+    return this.request(this.registry.ibc_core_connection_connections_connection_id, { connection_id });
   }
   async getIBCConnectionsClientState(connection_id: string) {
-    return this.request(
-      this.registry.ibc_core_connection_connections_connection_id_client_state,
-      { connection_id }
-    );
+    return this.request(this.registry.ibc_core_connection_connections_connection_id_client_state, { connection_id });
   }
   async getIBCConnectionsChannels(connection_id: string) {
     return this.request(this.registry.ibc_core_channel_connections_channels, {
@@ -355,10 +350,7 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     return this.request(this.registry.ibc_core_channel_channels, {});
   }
   async getIBCChannelAcknowledgements(channel_id: string, port_id: string) {
-    return this.request(
-      this.registry.ibc_core_channel_channels_acknowledgements,
-      { channel_id, port_id }
-    );
+    return this.request(this.registry.ibc_core_channel_channels_acknowledgements, { channel_id, port_id });
   }
   async getIBCChannelNextSequence(channel_id: string, port_id: string) {
     return this.request(this.registry.ibc_core_channel_channels_next_sequence, {
@@ -367,12 +359,15 @@ export class CosmosRestClient extends BaseRestClient<RequestRegistry> {
     });
   }
   async getInterchainSecurityValidatorRotatedKey(chain_id: string, provider_address: string) {
-    return this.request(this.registry.interchain_security_ccv_provider_validator_consumer_addr, {chain_id, provider_address});
+    return this.request(this.registry.interchain_security_ccv_provider_validator_consumer_addr, {
+      chain_id,
+      provider_address,
+    });
   }
   async getInterchainSecurityProviderOptedInValidators(chain_id: string) {
-    return this.request(this.registry.interchain_security_provider_opted_in_validators, {chain_id});
+    return this.request(this.registry.interchain_security_provider_opted_in_validators, { chain_id });
   }
   async getInterchainSecurityConsumerValidators(chain_id: string) {
-    return this.request(this.registry.interchain_security_consumer_validators, {chain_id});
+    return this.request(this.registry.interchain_security_consumer_validators, { chain_id });
   }
 }
diff --git a/src/libs/http.ts b/src/libs/http.ts
index 49bb967d..6c744efe 100644
--- a/src/libs/http.ts
+++ b/src/libs/http.ts
@@ -1,9 +1,6 @@
 import fetch from 'cross-fetch';
 
-export async function fetchData<T>(
-  url: string,
-  adapter: (source: any) => Promise<T>
-): Promise<T> {
+export async function fetchData<T>(url: string, adapter: (source: any) => Promise<T>): Promise<T> {
   const response = await fetch(url);
   if (!response.ok) {
     throw new Error(`HTTP error: ${response.status}, ${response.statusText}`);
@@ -29,11 +26,11 @@ try {
 }
 // */
 export async function get(url: string) {
-  return (await fetch(url, {referrerPolicy: 'origin-when-cross-origin'})).json();
+  return (await fetch(url, { referrerPolicy: 'origin-when-cross-origin' })).json();
 }
 
 export async function getB(url: string) {
-  return (await fetch(url, {referrerPolicy: 'origin-when-cross-origin'})).arrayBuffer();
+  return (await fetch(url, { referrerPolicy: 'origin-when-cross-origin' })).arrayBuffer();
 }
 
 export async function post(url: string, data: any) {
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index d7548afa..6fab7ed0 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -30,26 +30,7 @@ export function uint8ArrayToString(arr: Uint8Array) {
   return str;
 }
 
-const COUNT_ABBRS = [
-  '',
-  'K',
-  'M',
-  'B',
-  't',
-  'q',
-  's',
-  'S',
-  'o',
-  'n',
-  'd',
-  'U',
-  'D',
-  'T',
-  'Qt',
-  'Qd',
-  'Sd',
-  'St',
-];
+const COUNT_ABBRS = ['', 'K', 'M', 'B', 't', 'q', 's', 'S', 'o', 'n', 'd', 'U', 'D', 'T', 'Qt', 'Qd', 'Sd', 'St'];
 
 export function formatNumber(count: number, withAbbr = false, decimals = 2) {
   const i = count === 0 ? count : Math.floor(Math.log(count) / Math.log(1000));
@@ -60,24 +41,15 @@ export function formatNumber(count: number, withAbbr = false, decimals = 2) {
   return result;
 }
 
-export function formatTokenAmount(
-  assets: any,
-  tokenAmount: any,
-  decimals = 2,
-  tokenDenom = 'uatom',
-  format = true
-) {
-  const denom = typeof tokenDenom === 'string'
-    ? tokenDenom
-    // @ts-ignore
-    : tokenDenom?.denom_trace?.base_denom;
+export function formatTokenAmount(assets: any, tokenAmount: any, decimals = 2, tokenDenom = 'uatom', format = true) {
+  const denom =
+    typeof tokenDenom === 'string'
+      ? tokenDenom
+      : // @ts-ignore
+        tokenDenom?.denom_trace?.base_denom;
   let amount = 0;
   const asset = assets.find((a: any) => a.base === denom);
-  let exp = asset
-    ? asset.exponent
-    : String(denom).startsWith('gravity')
-    ? 18
-    : 6;
+  let exp = asset ? asset.exponent : String(denom).startsWith('gravity') ? 18 : 6;
   const config = Object.values(getLocalChains());
 
   amount = Number(Number(tokenAmount)) / 10 ** exp;
@@ -120,24 +92,24 @@ export function isHexAddress(v: any) {
 }
 
 export function isBech32Address(v?: string) {
-  if(!v) return ""
-  const pattern = /^[a-z\d]+1[a-z\d]{38}$/g
-  return String(v).search(pattern) > -1
+  if (!v) return '';
+  const pattern = /^[a-z\d]+1[a-z\d]{38}$/g;
+  return String(v).search(pattern) > -1;
 }
 
 export function formatSeconds(value?: string) {
-  if(!value) return ''
-  const duration = Number(value.replace(/s/, ''))
-  if(duration > 24*60*60) {
-    return `${(duration / ( 24 * 60 * 60)).toFixed()} days`
+  if (!value) return '';
+  const duration = Number(value.replace(/s/, ''));
+  if (duration > 24 * 60 * 60) {
+    return `${(duration / (24 * 60 * 60)).toFixed()} days`;
   }
-  if(duration > 60*60) {
-    return `${(duration / (60 * 60)).toFixed()} hours`
-  }    
-  if(duration > 60) {
-    return `${duration / 60} mins`
+  if (duration > 60 * 60) {
+    return `${(duration / (60 * 60)).toFixed()} hours`;
   }
-  return value
+  if (duration > 60) {
+    return `${duration / 60} mins`;
+  }
+  return value;
 }
 
 export function hexToRgb(hex: string) {
diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue
index efb7e027..b9fdd7f9 100644
--- a/src/modules/[chain]/account/[address].vue
+++ b/src/modules/[chain]/account/[address].vue
@@ -1,23 +1,12 @@
 <script lang="ts" setup>
-import {
-  useBlockchain,
-  useFormatter,
-  useStakingStore,
-  useTxDialog,
-} from '@/stores';
+import { useBlockchain, useFormatter, useStakingStore, useTxDialog } from '@/stores';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import DonutChart from '@/components/charts/DonutChart.vue';
 import { computed, ref } from '@vue/reactivity';
 import { onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 
-import type {
-  AuthAccount,
-  Delegation,
-  TxResponse,
-  DelegatorRewards,
-  UnbondingResponses,
-} from '@/types';
+import type { AuthAccount, Delegation, TxResponse, DelegatorRewards, UnbondingResponses } from '@/types';
 import type { Coin } from '@cosmjs/amino';
 import Countdown from '@/components/Countdown.vue';
 import { fromBase64 } from '@cosmjs/encoding';
@@ -81,13 +70,12 @@ const totalValue = computed(() => {
   });
   unbonding.value?.forEach((x) => {
     x.entries?.forEach((y) => {
-      value += format.tokenValueNumber({amount: y.balance, denom: stakingStore.params.bond_denom});
+      value += format.tokenValueNumber({ amount: y.balance, denom: stakingStore.params.bond_denom });
     });
   });
   return format.formatNumber(value, '0,0.00');
 });
 
-
 function loadAccount(address: string) {
   blockchain.rpc.getAuthAccount(address).then((x) => {
     account.value = x.account;
@@ -113,7 +101,7 @@ function loadAccount(address: string) {
     });
   });
 
-  const receivedQuery =  `?&pagination.reverse=true&events=coin_received.receiver='${address}'&pagination.limit=5`;
+  const receivedQuery = `?&pagination.reverse=true&events=coin_received.receiver='${address}'&pagination.limit=5`;
   blockchain.rpc.getTxs(receivedQuery, {}).then((x) => {
     recentReceived.value = x.tx_responses;
   });
@@ -123,11 +111,12 @@ function updateEvent() {
   loadAccount(props.address);
 }
 
-function mapAmount(events:{type: string, attributes: {key: string, value: string}[]}[]) {
-  if(!events) return []
-  return events.find(x => x.type==='coin_received')?.attributes
-    .filter(x => x.key === 'YW1vdW50'|| x.key === `amount`)
-    .map(x => x.key==='amount'? x.value : String.fromCharCode(...fromBase64(x.value)))
+function mapAmount(events: { type: string; attributes: { key: string; value: string }[] }[]) {
+  if (!events) return [];
+  return events
+    .find((x) => x.type === 'coin_received')
+    ?.attributes.filter((x) => x.key === 'YW1vdW50' || x.key === `amount`)
+    .map((x) => (x.key === 'amount' ? x.value : String.fromCharCode(...fromBase64(x.value))));
 }
 </script>
 <template>
@@ -137,17 +126,9 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
       <div class="flex items-center">
         <!-- img -->
         <div class="inline-flex relative w-11 h-11 rounded-md">
-          <div
-            class="w-11 h-11 absolute rounded-md opacity-10 bg-primary"
-          ></div>
-          <div
-            class="w-full inline-flex items-center align-middle flex-none justify-center"
-          >
-            <Icon
-              icon="mdi-qrcode"
-              class="text-primary"
-              style="width: 27px; height: 27px"
-            />
+          <div class="w-11 h-11 absolute rounded-md opacity-10 bg-primary"></div>
+          <div class="w-full inline-flex items-center align-middle flex-none justify-center">
+            <Icon icon="mdi-qrcode" class="text-primary" style="width: 27px; height: 27px" />
           </div>
         </div>
         <!-- content -->
@@ -164,48 +145,37 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
         <h2 class="card-title mb-4">{{ $t('account.assets') }}</h2>
         <!-- button -->
         <div class="flex justify-end mb-4 pr-5">
-            <label
-              for="send"
-              class="btn btn-primary btn-sm mr-2"
-              @click="dialog.open('send', {}, updateEvent)"
-              >{{ $t('account.btn_send') }}</label
-            >
-            <label
-              for="transfer"
-              class="btn btn-primary btn-sm"
-              @click="
-                dialog.open(
-                  'transfer',
-                  {
-                    chain_name: blockchain.current?.prettyName,
-                  },
-                  updateEvent
-                )
-              "
-              >{{ $t('account.btn_transfer') }}</label
-            >
-          </div>
+          <label for="send" class="btn btn-primary btn-sm mr-2" @click="dialog.open('send', {}, updateEvent)">{{
+            $t('account.btn_send')
+          }}</label>
+          <label
+            for="transfer"
+            class="btn btn-primary btn-sm"
+            @click="
+              dialog.open(
+                'transfer',
+                {
+                  chain_name: blockchain.current?.prettyName,
+                },
+                updateEvent
+              )
+            "
+            >{{ $t('account.btn_transfer') }}</label
+          >
+        </div>
       </div>
       <div class="grid md:!grid-cols-3">
         <div class="md:!col-span-1">
           <DonutChart :series="totalAmountByCategory" :labels="labels" />
         </div>
-        <div class="mt-4 md:!col-span-2 md:!mt-0 md:!ml-4">          
+        <div class="mt-4 md:!col-span-2 md:!mt-0 md:!ml-4">
           <!-- list-->
           <div class="">
             <!--balances  -->
-            <div
-              class="flex items-center px-4 mb-2"
-              v-for="(balanceItem, index) in balances"
-              :key="index"
-            >
-              <div
-                class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4"
-              >
+            <div class="flex items-center px-4 mb-2" v-for="(balanceItem, index) in balances" :key="index">
+              <div class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4">
                 <Icon icon="mdi-account-cash" class="text-info" size="20" />
-                <div
-                  class="absolute top-0 bottom-0 left-0 right-0 bg-info opacity-20"
-                ></div>
+                <div class="absolute top-0 bottom-0 left-0 right-0 bg-info opacity-20"></div>
               </div>
               <div class="flex-1">
                 <div class="text-sm font-semibold">
@@ -215,68 +185,35 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
                   {{ format.calculatePercent(balanceItem.amount, totalAmount) }}
                 </div>
               </div>
-              <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
-              >
-                <span
-                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"
-                ></span>
-                ${{ format.tokenValue(balanceItem) }}                
+              <div class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2">
+                <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"></span>
+                ${{ format.tokenValue(balanceItem) }}
               </div>
             </div>
             <!--delegations  -->
-            <div
-              class="flex items-center px-4 mb-2"
-              v-for="(delegationItem, index) in delegations"
-              :key="index"
-            >
-              <div
-                class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4"
-              >
+            <div class="flex items-center px-4 mb-2" v-for="(delegationItem, index) in delegations" :key="index">
+              <div class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4">
                 <Icon icon="mdi-user-clock" class="text-warning" size="20" />
-                <div
-                  class="absolute top-0 bottom-0 left-0 right-0 bg-warning opacity-20"
-                ></div>
+                <div class="absolute top-0 bottom-0 left-0 right-0 bg-warning opacity-20"></div>
               </div>
               <div class="flex-1">
                 <div class="text-sm font-semibold">
                   {{ format.formatToken(delegationItem?.balance) }}
                 </div>
                 <div class="text-xs">
-                  {{
-                    format.calculatePercent(
-                      delegationItem?.balance?.amount,
-                      totalAmount
-                    )
-                  }}
+                  {{ format.calculatePercent(delegationItem?.balance?.amount, totalAmount) }}
                 </div>
               </div>
-              <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
-              >
-                <span
-                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"
-                ></span>
-                ${{ format.tokenValue(delegationItem?.balance) }}                
+              <div class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2">
+                <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"></span>
+                ${{ format.tokenValue(delegationItem?.balance) }}
               </div>
             </div>
             <!-- rewards.total -->
-            <div
-              class="flex items-center px-4 mb-2"
-              v-for="(rewardItem, index) in rewards.total"
-              :key="index"
-            >
-              <div
-                class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4"
-              >
-                <Icon
-                  icon="mdi-account-arrow-up"
-                  class="text-success"
-                  size="20"
-                />
-                <div
-                  class="absolute top-0 bottom-0 left-0 right-0 bg-success opacity-20"
-                ></div>
+            <div class="flex items-center px-4 mb-2" v-for="(rewardItem, index) in rewards.total" :key="index">
+              <div class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4">
+                <Icon icon="mdi-account-arrow-up" class="text-success" size="20" />
+                <div class="absolute top-0 bottom-0 left-0 right-0 bg-success opacity-20"></div>
               </div>
               <div class="flex-1">
                 <div class="text-sm font-semibold">
@@ -284,28 +221,17 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
                 </div>
                 <div class="text-xs">{{ format.calculatePercent(rewardItem.amount, totalAmount) }}</div>
               </div>
-              <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
-              >
-                <span
-                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary  dark:invert text-sm"
-                ></span>${{ format.tokenValue(rewardItem) }}
-                
+              <div class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2">
+                <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"></span>${{
+                  format.tokenValue(rewardItem)
+                }}
               </div>
             </div>
             <!-- mdi-account-arrow-right -->
             <div class="flex items-center px-4">
-              <div
-                class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4"
-              >
-                <Icon
-                  icon="mdi-account-arrow-right"
-                  class="text-error"
-                  size="20"
-                />
-                <div
-                  class="absolute top-0 bottom-0 left-0 right-0 bg-error opacity-20"
-                ></div>
+              <div class="w-9 h-9 rounded overflow-hidden flex items-center justify-center relative mr-4">
+                <Icon icon="mdi-account-arrow-right" class="text-error" size="20" />
+                <div class="absolute top-0 bottom-0 left-0 right-0 bg-error opacity-20"></div>
               </div>
               <div class="flex-1">
                 <div class="text-sm font-semibold">
@@ -320,15 +246,14 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
                   {{ format.calculatePercent(unbondingTotal, totalAmount) }}
                 </div>
               </div>
-              <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
-              >
+              <div class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2">
                 <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert"></span>
-                ${{format.tokenValue({
-                      amount: String(unbondingTotal),
-                      denom: stakingStore.params.bond_denom,
-                    })
-                  }}                
+                ${{
+                  format.tokenValue({
+                    amount: String(unbondingTotal),
+                    denom: stakingStore.params.bond_denom,
+                  })
+                }}
               </div>
             </div>
           </div>
@@ -344,18 +269,12 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
       <div class="flex justify-between">
         <h2 class="card-title mb-4">{{ $t('account.delegations') }}</h2>
         <div class="flex justify-end mb-4">
-          <label
-            for="delegate"
-            class="btn btn-primary btn-sm mr-2"
-            @click="dialog.open('delegate', {}, updateEvent)"
-            >{{ $t('account.btn_delegate') }}</label
-          >
-          <label
-            for="withdraw"
-            class="btn btn-primary btn-sm"
-            @click="dialog.open('withdraw', {}, updateEvent)"
-            >{{ $t('account.btn_withdraw') }}</label
-          >
+          <label for="delegate" class="btn btn-primary btn-sm mr-2" @click="dialog.open('delegate', {}, updateEvent)">{{
+            $t('account.btn_delegate')
+          }}</label>
+          <label for="withdraw" class="btn btn-primary btn-sm" @click="dialog.open('withdraw', {}, updateEvent)">{{
+            $t('account.btn_withdraw')
+          }}</label>
         </div>
       </div>
       <div class="overflow-x-auto">
@@ -369,15 +288,16 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
             </tr>
           </thead>
           <tbody class="text-sm">
-            <tr v-if="delegations.length === 0"><td colspan="10"><div class="text-center">{{ $t('account.no_delegations') }}</div></td></tr>
+            <tr v-if="delegations.length === 0">
+              <td colspan="10">
+                <div class="text-center">{{ $t('account.no_delegations') }}</div>
+              </td>
+            </tr>
             <tr v-for="(v, index) in delegations" :key="index">
               <td class="text-caption text-primary py-3">
-                <RouterLink
-                  :to="`/${chain}/staking/${v.delegation.validator_address}`"
-                  >{{
-                    format.validatorFromBech32(v.delegation.validator_address) || v.delegation.validator_address
-                  }}</RouterLink
-                >
+                <RouterLink :to="`/${chain}/staking/${v.delegation.validator_address}`">{{
+                  format.validatorFromBech32(v.delegation.validator_address) || v.delegation.validator_address
+                }}</RouterLink>
               </td>
               <td class="py-3">
                 {{ format.formatToken(v.balance, true, '0,0.[000000]') }}
@@ -385,10 +305,7 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
               <td class="py-3">
                 {{
                   format.formatTokens(
-                    rewards?.rewards?.find(
-                      (x) =>
-                        x.validator_address === v.delegation.validator_address
-                    )?.reward
+                    rewards?.rewards?.find((x) => x.validator_address === v.delegation.validator_address)?.reward
                   )
                 }}
               </td>
@@ -445,10 +362,7 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
     </div>
 
     <!-- Unbonding Delegations -->
-    <div
-      class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"
-      v-if="unbonding && unbonding.length > 0"
-    >
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow" v-if="unbonding && unbonding.length > 0">
       <h2 class="card-title mb-4">{{ $t('account.unbonding_delegations') }}</h2>
       <div class="overflow-x-auto">
         <table class="table text-sm w-full">
@@ -461,47 +375,42 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
             </tr>
           </thead>
           <tbody class="text-sm" v-for="(v, index) in unbonding" :key="index">
-              <tr>
-                <td class="text-caption text-primary py-3 bg-slate-200" colspan="10">
-                  <RouterLink
-                    :to="`/${chain}/staking/${v.validator_address}`"
-                    >{{
-                      v.validator_address
-                    }}</RouterLink
-                  >
-                </td>
-              </tr>
-              <tr v-for="entry in v.entries">
-                <td class="py-3">{{ entry.creation_height }}</td>
-                <td class="py-3">
-                  {{
-                    format.formatToken(
-                      {
-                        amount: entry.initial_balance,
-                        denom: stakingStore.params.bond_denom,
-                      },
-                      true,
-                      '0,0.[00]'
-                    )
-                  }}
-                </td>
-                <td class="py-3">
-                  {{
-                    format.formatToken(
-                      {
-                        amount: entry.balance,
-                        denom: stakingStore.params.bond_denom,
-                      },
-                      true,
-                      '0,0.[00]'
-                    )
-                  }}
-                </td>
-                <td class="py-3">
-                  <Countdown :time="new Date(entry.completion_time).getTime() - new Date().getTime()" />
-                </td>
-              </tr>
-          </tbody>          
+            <tr>
+              <td class="text-caption text-primary py-3 bg-slate-200" colspan="10">
+                <RouterLink :to="`/${chain}/staking/${v.validator_address}`">{{ v.validator_address }}</RouterLink>
+              </td>
+            </tr>
+            <tr v-for="entry in v.entries">
+              <td class="py-3">{{ entry.creation_height }}</td>
+              <td class="py-3">
+                {{
+                  format.formatToken(
+                    {
+                      amount: entry.initial_balance,
+                      denom: stakingStore.params.bond_denom,
+                    },
+                    true,
+                    '0,0.[00]'
+                  )
+                }}
+              </td>
+              <td class="py-3">
+                {{
+                  format.formatToken(
+                    {
+                      amount: entry.balance,
+                      denom: stakingStore.params.bond_denom,
+                    },
+                    true,
+                    '0,0.[00]'
+                  )
+                }}
+              </td>
+              <td class="py-3">
+                <Countdown :time="new Date(entry.completion_time).getTime() - new Date().getTime()" />
+              </td>
+            </tr>
+          </tbody>
         </table>
       </div>
     </div>
@@ -520,7 +429,11 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
             </tr>
           </thead>
           <tbody class="text-sm">
-            <tr v-if="txs.length === 0"><td colspan="10"><div class="text-center">{{ $t('account.no_transactions') }}</div></td></tr>
+            <tr v-if="txs.length === 0">
+              <td colspan="10">
+                <div class="text-center">{{ $t('account.no_transactions') }}</div>
+              </td>
+            </tr>
             <tr v-for="(v, index) in txs" :key="index">
               <td class="text-sm py-3">
                 <RouterLink :to="`/${chain}/block/${v.height}`" class="text-primary dark:invert">{{
@@ -536,14 +449,13 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
                 <div class="mr-2">
                   {{ format.messages(v.tx.body.messages) }}
                 </div>
-                <Icon
-                  v-if="v.code === 0"
-                  icon="mdi-check"
-                  class="text-success text-lg"
-                />
+                <Icon v-if="v.code === 0" icon="mdi-check" class="text-success text-lg" />
                 <Icon v-else icon="mdi-multiply" class="text-error text-lg" />
               </td>
-              <td class="py-3">{{ format.toLocaleDate(v.timestamp) }} <span class=" text-xs">({{ format.toDay(v.timestamp, 'from') }})</span> </td>
+              <td class="py-3">
+                {{ format.toLocaleDate(v.timestamp) }}
+                <span class="text-xs">({{ format.toDay(v.timestamp, 'from') }})</span>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -564,7 +476,11 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
             </tr>
           </thead>
           <tbody class="text-sm">
-            <tr v-if="recentReceived.length === 0"><td colspan="10"><div class="text-center">{{ $t('account.no_transactions') }}</div></td></tr>
+            <tr v-if="recentReceived.length === 0">
+              <td colspan="10">
+                <div class="text-center">{{ $t('account.no_transactions') }}</div>
+              </td>
+            </tr>
             <tr v-for="(v, index) in recentReceived" :key="index">
               <td class="text-sm py-3">
                 <RouterLink :to="`/${chain}/block/${v.height}`" class="text-primary dark:invert">{{
@@ -578,16 +494,15 @@ function mapAmount(events:{type: string, attributes: {key: string, value: string
               </td>
               <td class="flex items-center py-3">
                 <div class="mr-2">
-                  {{ mapAmount(v.events)?.join(", ")}}
+                  {{ mapAmount(v.events)?.join(', ') }}
                 </div>
-                <Icon
-                  v-if="v.code === 0"
-                  icon="mdi-check"
-                  class="text-success text-lg"
-                />
+                <Icon v-if="v.code === 0" icon="mdi-check" class="text-success text-lg" />
                 <Icon v-else icon="mdi-multiply" class="text-error text-lg" />
               </td>
-              <td class="py-3">{{ format.toLocaleDate(v.timestamp) }} <span class=" text-xs">({{ format.toDay(v.timestamp, 'from') }})</span> </td>
+              <td class="py-3">
+                {{ format.toLocaleDate(v.timestamp) }}
+                <span class="text-xs">({{ format.toDay(v.timestamp, 'from') }})</span>
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/src/modules/[chain]/account/index.vue b/src/modules/[chain]/account/index.vue
index fe1ecb08..6e73c200 100644
--- a/src/modules/[chain]/account/index.vue
+++ b/src/modules/[chain]/account/index.vue
@@ -6,72 +6,73 @@ import { onMounted } from 'vue';
 import PaginationBar from '@/components/PaginationBar.vue';
 const props = defineProps(['chain']);
 
-const chainStore = useBlockchain()
+const chainStore = useBlockchain();
 
-const accounts = ref([] as AuthAccount[])
-const pageRequest = ref(new PageRequest())
-const pageResponse = ref({} as Pagination)
+const accounts = ref([] as AuthAccount[]);
+const pageRequest = ref(new PageRequest());
+const pageResponse = ref({} as Pagination);
 
 onMounted(() => {
-  pageload(1)
+  pageload(1);
 });
 
 function pageload(p: number) {
-  pageRequest.value.setPage(p)
-  chainStore.rpc.getAuthAccounts(pageRequest.value).then(x => {
-    accounts.value = x.accounts
-    pageResponse.value = x.pagination
+  pageRequest.value.setPage(p);
+  chainStore.rpc.getAuthAccounts(pageRequest.value).then((x) => {
+    accounts.value = x.accounts;
+    pageResponse.value = x.pagination;
   });
 }
 
 function showType(v: string) {
-    return v.replace("/cosmos.auth.v1beta1.", "")
+  return v.replace('/cosmos.auth.v1beta1.', '');
 }
 function findField(v: any, field: string) {
-    if(!v || Array.isArray(v) || typeof v === 'string') return null
-    const fields = Object.keys(v)
-    if(fields.includes(field)) {
-        return v[field]
-    }
-    for(let i= 0; i < fields.length; i++) {
-        const re: any = findField(v[fields[i]], field)
-        if(re) return re
-    }
+  if (!v || Array.isArray(v) || typeof v === 'string') return null;
+  const fields = Object.keys(v);
+  if (fields.includes(field)) {
+    return v[field];
+  }
+  for (let i = 0; i < fields.length; i++) {
+    const re: any = findField(v[fields[i]], field);
+    if (re) return re;
+  }
 }
 function showAddress(v: any) {
-    return findField(v, 'address')
+  return findField(v, 'address');
 }
 function showAccountNumber(v: any) {
-    return findField(v, 'account_number')
+  return findField(v, 'account_number');
 }
 function showSequence(v: any) {
-    return findField(v, 'sequence')
+  return findField(v, 'sequence');
 }
 function showPubkey(v: any) {
-    return findField(v, 'pub_key')
+  return findField(v, 'pub_key');
 }
-
 </script>
 <template>
-    <div class=" overflow-x-auto">
-        <table class="table table-compact">
-            <thead>
-                <tr>
-                    <td>{{ $t('account.type') }}</td>
-                    <td>{{ $t('account.address') }}</td>
-                    <td>{{ $t('account.acc_num') }}</td>
-                    <td>{{ $t('account.sequence') }}</td>
-                    <td>{{ $t('account.pub_key') }}</td>
-                </tr>
-            </thead>
-            <tr v-for="acc in accounts">
-                <td>{{ showType(acc['@type']) }}</td>
-                <td><RouterLink :to="`/${chain}/account/${showAddress(acc)}`">{{ showAddress(acc) }}</RouterLink></td>
-                <td>{{ showAccountNumber(acc) }}</td>
-                <td>{{ showSequence(acc) }}</td>
-                <td>{{ showPubkey(acc) }}</td>
-            </tr>
-        </table>
-        <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload" />
-    </div>
+  <div class="overflow-x-auto">
+    <table class="table table-compact">
+      <thead>
+        <tr>
+          <td>{{ $t('account.type') }}</td>
+          <td>{{ $t('account.address') }}</td>
+          <td>{{ $t('account.acc_num') }}</td>
+          <td>{{ $t('account.sequence') }}</td>
+          <td>{{ $t('account.pub_key') }}</td>
+        </tr>
+      </thead>
+      <tr v-for="acc in accounts">
+        <td>{{ showType(acc['@type']) }}</td>
+        <td>
+          <RouterLink :to="`/${chain}/account/${showAddress(acc)}`">{{ showAddress(acc) }}</RouterLink>
+        </td>
+        <td>{{ showAccountNumber(acc) }}</td>
+        <td>{{ showSequence(acc) }}</td>
+        <td>{{ showPubkey(acc) }}</td>
+      </tr>
+    </table>
+    <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload" />
+  </div>
 </template>
diff --git a/src/modules/[chain]/block/[height].vue b/src/modules/[chain]/block/[height].vue
index 295580ef..b5105cd2 100644
--- a/src/modules/[chain]/block/[height].vue
+++ b/src/modules/[chain]/block/[height].vue
@@ -12,9 +12,9 @@ import Countdown from '@/components/Countdown.vue';
 const props = defineProps(['height', 'chain']);
 
 const store = useBaseStore();
-const format = useFormatter()
-const current = ref({} as Block)
-const target = ref(Number(props.height || 0))
+const format = useFormatter();
+const current = ref({} as Block);
+const target = ref(Number(props.height || 0));
 
 const height = computed(() => {
   return Number(current.value.block?.header?.height || props.height || 0);
@@ -22,40 +22,40 @@ const height = computed(() => {
 
 const isFutureBlock = computed({
   get: () => {
-    const latest = store.latest?.block?.header.height
-    const isFuture = latest ? target.value > Number(latest) : true
-    if (!isFuture && !current.value.block_id) store.fetchBlock(target.value).then(x => current.value = x)
-    return isFuture
+    const latest = store.latest?.block?.header.height;
+    const isFuture = latest ? target.value > Number(latest) : true;
+    if (!isFuture && !current.value.block_id) store.fetchBlock(target.value).then((x) => (current.value = x));
+    return isFuture;
   },
-  set: val => {
-    console.log(val)
-  }
-})
+  set: (val) => {
+    console.log(val);
+  },
+});
 
 const remainingBlocks = computed(() => {
-  const latest = store.latest?.block?.header.height
-  return latest ? Number(target.value) - Number(latest) : 0
-})
+  const latest = store.latest?.block?.header.height;
+  return latest ? Number(target.value) - Number(latest) : 0;
+});
 
 const estimateTime = computed(() => {
-  const seconds = Number((remainingBlocks.value * store.blocktime).toFixed(2))
-  return seconds
-})
+  const seconds = Number((remainingBlocks.value * store.blocktime).toFixed(2));
+  return seconds;
+});
 
 const estimateDate = computed(() => {
-  return new Date(new Date().getTime() + estimateTime.value)
-})
+  return new Date(new Date().getTime() + estimateTime.value);
+});
 
-const edit = ref(false)
-const newHeight = ref(props.height)
+const edit = ref(false);
+const newHeight = ref(props.height);
 function updateTarget() {
-  target.value = Number(newHeight.value)
-  console.log(target.value)
+  target.value = Number(newHeight.value);
+  console.log(target.value);
 }
 
 onBeforeRouteUpdate(async (to, from, next) => {
   if (from.path !== to.path) {
-    store.fetchBlock(String(to.params.height)).then(x => current.value = x);
+    store.fetchBlock(String(to.params.height)).then((x) => (current.value = x));
     next();
   }
 });
@@ -66,24 +66,30 @@ onBeforeRouteUpdate(async (to, from, next) => {
       <div v-if="remainingBlocks > 0">
         <div class="text-primary font-bold text-lg my-10">#{{ target }}</div>
         <Countdown :time="estimateTime" css="md:!text-5xl font-sans md:mx-5" />
-        <div class="my-5">{{ $t('block.estimated_time') }}: <span class="text-xl font-bold">{{ format.toLocaleDate(estimateDate) }}</span>
+        <div class="my-5">
+          {{ $t('block.estimated_time') }}:
+          <span class="text-xl font-bold">{{ format.toLocaleDate(estimateDate) }}</span>
         </div>
         <div class="pt-10 flex justify-center">
           <table class="table w-max rounded-lg bg-base-100">
             <tbody>
               <tr class="hover cursor-pointer" @click="edit = !edit">
                 <td>{{ $t('block.countdown_for_block') }}:</td>
-                <td class="text-right"><span class="md:!ml-40">{{ target }}</span></td>
+                <td class="text-right">
+                  <span class="md:!ml-40">{{ target }}</span>
+                </td>
               </tr>
               <tr v-if="edit">
                 <td colspan="2" class="text-center">
                   <h3 class="text-lg font-bold">{{ $t('block.countdown_for_block_input') }}</h3>
-                  <p class="py-4">
-                  <div class="join">
-                    <input class="input input-bordered join-item" v-model="newHeight" type="number" />
-                    <button class="btn btn-primary join-item" @click="updateTarget()">{{ $t('block.btn_update') }}</button>
+                  <div class="py-4">
+                    <div class="join">
+                      <input class="input input-bordered join-item" v-model="newHeight" type="number" />
+                      <button class="btn btn-primary join-item" @click="updateTarget()">
+                        {{ $t('block.btn_update') }}
+                      </button>
+                    </div>
                   </div>
-                  </p>
                 </td>
               </tr>
               <tr>
@@ -101,7 +107,6 @@ onBeforeRouteUpdate(async (to, from, next) => {
             </tbody>
           </table>
         </div>
-
       </div>
     </div>
     <div v-else>
@@ -109,12 +114,16 @@ onBeforeRouteUpdate(async (to, from, next) => {
         <h2 class="card-title flex flex-row justify-between">
           <p class="">#{{ current.block?.header?.height }}</p>
           <div class="flex" v-if="props.height">
-            <RouterLink :to="`/${store.blockchain.chainName}/block/${height - 1}`"
-              class="btn btn-primary btn-sm p-1 text-2xl mr-2">
+            <RouterLink
+              :to="`/${store.blockchain.chainName}/block/${height - 1}`"
+              class="btn btn-primary btn-sm p-1 text-2xl mr-2"
+            >
               <Icon icon="mdi-arrow-left" class="w-full h-full" />
             </RouterLink>
-            <RouterLink :to="`/${store.blockchain.chainName}/block/${height + 1}`"
-              class="btn btn-primary btn-sm p-1 text-2xl">
+            <RouterLink
+              :to="`/${store.blockchain.chainName}/block/${height + 1}`"
+              class="btn btn-primary btn-sm p-1 text-2xl"
+            >
               <Icon icon="mdi-arrow-right" class="w-full h-full" />
             </RouterLink>
           </div>
@@ -138,5 +147,6 @@ onBeforeRouteUpdate(async (to, from, next) => {
         <h2 class="card-title flex flex-row justify-between">{{ $t('block.last_commit') }}</h2>
         <DynamicComponent :value="current.block?.last_commit" />
       </div>
+    </div>
   </div>
-</div></template>
+</template>
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index f18a3dec..6e8a65d8 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -7,52 +7,56 @@ const props = defineProps(['chain']);
 
 const tab = ref('blocks');
 
-const base = useBaseStore()
+const base = useBaseStore();
 
 const format = useFormatter();
 
 const list = computed(() => {
-    // const recents = base.recents
-    // return recents.sort((a, b) => (Number(b.block.header.height) - Number(a.block.header.height)))
-    return base.recents
-})
+  // const recents = base.recents
+  // return recents.sort((a, b) => (Number(b.block.header.height) - Number(a.block.header.height)))
+  return base.recents;
+});
 </script>
 <template>
-    <div>
-        <div class="tabs tabs-boxed bg-transparent mb-4">
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'blocks' }"
-                @click="tab = 'blocks'">{{ $t('block.recent') }}</a>
-            <RouterLink class="tab text-gray-400 uppercase" 
-                :to="`/${chain}/block/${Number(base.latest?.block?.header.height||0) + 10000}`"
-                >{{ $t('block.future') }}</RouterLink>
-        </div>
-
-        <div v-show="tab === 'blocks'">
-
-            <TxsInBlocksChart />
-
-            <div class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3">
-            <RouterLink v-for="item in list"
-                class="flex flex-col justify-between rounded p-4 shadow bg-base-100"
-                :to="`/${chain}/block/${item.block.header.height}`">
-                <div class="flex justify-between">
-                    <h3 class="text-md font-bold sm:!text-lg">
-                        {{ item.block.header.height }}
-                    </h3>
-                    <span class="rounded text-xs whitespace-nowrap font-medium text-green-600">
-                        {{ format.toDay(item.block?.header?.time, 'from') }}
-                    </span>
-                </div>
-                <div class="flex justify-between tooltip" data-tip="Block Proposor">
-                    <div class="mt-2 hidden text-sm sm:!block truncate">
-                        <span>{{ format.validator(item.block?.header?.proposer_address) }}</span>
-                    </div>
-                    <span class="text-right mt-1 whitespace-nowrap"> {{ item.block?.data?.txs.length }} txs </span>
-                </div>
-            </RouterLink>
-            </div>
-        </div>
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'blocks' }" @click="tab = 'blocks'">{{
+        $t('block.recent')
+      }}</a>
+      <RouterLink
+        class="tab text-gray-400 uppercase"
+        :to="`/${chain}/block/${Number(base.latest?.block?.header.height || 0) + 10000}`"
+        >{{ $t('block.future') }}</RouterLink
+      >
     </div>
+
+    <div v-show="tab === 'blocks'">
+      <TxsInBlocksChart />
+
+      <div class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3">
+        <RouterLink
+          v-for="item in list"
+          class="flex flex-col justify-between rounded p-4 shadow bg-base-100"
+          :to="`/${chain}/block/${item.block.header.height}`"
+        >
+          <div class="flex justify-between">
+            <h3 class="text-md font-bold sm:!text-lg">
+              {{ item.block.header.height }}
+            </h3>
+            <span class="rounded text-xs whitespace-nowrap font-medium text-green-600">
+              {{ format.toDay(item.block?.header?.time, 'from') }}
+            </span>
+          </div>
+          <div class="flex justify-between tooltip" data-tip="Block Proposor">
+            <div class="mt-2 hidden text-sm sm:!block truncate">
+              <span>{{ format.validator(item.block?.header?.proposer_address) }}</span>
+            </div>
+            <span class="text-right mt-1 whitespace-nowrap"> {{ item.block?.data?.txs.length }} txs </span>
+          </div>
+        </RouterLink>
+      </div>
+    </div>
+  </div>
 </template>
 
 <route>
diff --git a/src/modules/[chain]/consensus/index.vue b/src/modules/[chain]/consensus/index.vue
index 99f63377..d0191815 100644
--- a/src/modules/[chain]/consensus/index.vue
+++ b/src/modules/[chain]/consensus/index.vue
@@ -7,9 +7,7 @@ import { consensusPubkeyToHexAddress } from '@/libs';
 const format = useFormatter();
 const chainStore = useBlockchain();
 const stakingStore = useStakingStore();
-const rpcList = ref(
-  chainStore.current?.endpoints?.rpc || [{ address: '', provider: '' }]
-);
+const rpcList = ref(chainStore.current?.endpoints?.rpc || [{ address: '', provider: '' }]);
 let rpc = ref('');
 const validators = ref(stakingStore.validators);
 
@@ -30,7 +28,7 @@ onMounted(async () => {
   rpc.value = rpcList.value[0].address + '/consensus_state';
   await fetchPosition();
   update();
-  clearTime()
+  clearTime();
   timer = setInterval(() => {
     update();
   }, 6000);
@@ -80,7 +78,7 @@ function color(i: number, txt: string) {
   }
   return txt === 'nil-Vote' ? 'gray-700' : 'success';
 }
-async function onChange () {
+async function onChange() {
   httpstatus.value = 200;
   httpStatusText.value = '';
   roundState.value = {};
@@ -135,11 +133,7 @@ async function update() {
 
         // find the highest onboard rate
         roundState.value?.height_vote_set?.forEach((element: any) => {
-          const rates = Number(
-            element.prevotes_bit_array.substring(
-              element.prevotes_bit_array.length - 4
-            )
-          );
+          const rates = Number(element.prevotes_bit_array.substring(element.prevotes_bit_array.length - 4));
           if (rates > 0) {
             rate.value = `${(rates * 100).toFixed()}%`;
           }
@@ -166,79 +160,59 @@ async function update() {
             v-model="rpc"
           /> -->
           <select v-model="rpc" class="select select-bordered w-full flex-1">
-            <option v-for="(item, index) in rpcList" :key="index">
-              {{ item?.address }}/consensus_state
-            </option>
+            <option v-for="(item, index) in rpcList" :key="index">{{ item?.address }}/consensus_state</option>
           </select>
           <button class="btn btn-primary" @click="onChange">{{ $t('consensus.monitor') }}</button>
         </label>
       </div>
-      <div v-if="httpstatus !== 200" class="text-error mt-1">
-        {{ httpstatus }}: {{ httpStatusText }}
-      </div>
+      <div v-if="httpstatus !== 200" class="text-error mt-1">{{ httpstatus }}: {{ httpStatusText }}</div>
     </div>
     <!-- cards -->
     <div class="mt-4" v-if="roundState['height/round/step']">
       <div class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 pb-4">
-        <div
-          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
-        >
+        <div class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center">
           <div class="text-sm mb-1 flex flex-col truncate">
             <h4 class="text-lg font-semibold text-main">{{ rate }}</h4>
             <span class="text-md">{{ $t('consensus.onboard_rate') }}</span>
           </div>
           <div class="avatar placeholder">
-            <div
-              class="bg-rose-100 text-neutral-content rounded-full w-12 h-12"
-            >
+            <div class="bg-rose-100 text-neutral-content rounded-full w-12 h-12">
               <span class="text-2xl text-error font-semibold">{{ $t('consensus.o') }}</span>
             </div>
           </div>
         </div>
         <!-- Height -->
-        <div
-          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
-        >
+        <div class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center">
           <div class="text-sm mb-1 flex flex-col truncate">
             <h4 class="text-lg font-semibold text-main">{{ height }}</h4>
             <span class="text-md">{{ $t('account.height') }}</span>
           </div>
           <div class="avatar placeholder">
-            <div
-              class="bg-green-100 text-neutral-content rounded-full w-12 h-12"
-            >
+            <div class="bg-green-100 text-neutral-content rounded-full w-12 h-12">
               <span class="text-2xl text-success font-semibold">{{ $t('consensus.h') }}</span>
             </div>
           </div>
         </div>
         <!-- Round -->
-        <div
-          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
-        >
+        <div class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center">
           <div class="text-sm mb-1 flex flex-col truncate">
             <h4 class="text-lg font-semibold text-main">{{ round }}</h4>
             <span class="text-md">{{ $t('consensus.round') }}</span>
           </div>
           <div class="avatar placeholder">
-            <div
-              class="bg-violet-100 text-neutral-content rounded-full w-12 h-12"
-            >
+            <div class="bg-violet-100 text-neutral-content rounded-full w-12 h-12">
               <span class="text-2xl text-primary font-semibold">{{ $t('consensus.r') }}</span>
             </div>
           </div>
         </div>
         <!-- Step -->
-        <div
-          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
-        >
+        <div class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center">
           <div class="text-sm mb-1 flex flex-col truncate">
             <h4 class="text-lg font-semibold text-main">{{ step }}</h4>
             <span class="text-md">{{ $t('consensus.step') }}</span>
           </div>
           <div class="avatar placeholder">
-            <div
-              class="bg-blue-100 text-neutral-content rounded-full w-12 h-12"
-            >
+            <div class="bg-blue-100 text-neutral-content rounded-full w-12 h-12">
               <span class="text-2xl text-info font-semibold">{{ $t('consensus.s') }}</span>
             </div>
           </div>
@@ -246,21 +220,16 @@ async function update() {
       </div>
     </div>
     <!-- update -->
-    <div
-      class="bg-base-100 p-4 rounded shadow"
-      v-if="roundState['height/round/step']"
-    >
+    <div class="bg-base-100 p-4 rounded shadow" v-if="roundState['height/round/step']">
       <div class="flex flex-1 flex-col truncate">
-        <h2 class="text-sm card-title text-error mb-6">
-          {{ $t('consensus.updated_at') }} {{ newTime || '' }}
-        </h2>
+        <h2 class="text-sm card-title text-error mb-6">{{ $t('consensus.updated_at') }} {{ newTime || '' }}</h2>
         <div v-for="item in roundState.height_vote_set" :key="item.round">
           <div class="text-xs mb-1">{{ $t('consensus.round') }}: {{ item.round }}</div>
           <div class="text-xs break-words">{{ item.prevotes_bit_array }}</div>
 
           <div class="flex flex-rows flex-wrap py-6">
             <div
-              class=" w-48 rounded-3xl h-5 text-sm px-2 leading-5"
+              class="w-48 rounded-3xl h-5 text-sm px-2 leading-5"
               v-for="(pre, i) in item.prevotes"
               :key="i"
               size="sm"
@@ -269,17 +238,24 @@ async function update() {
               <span class="flex flex-rows justify-between">
                 <span class="truncate">{{ showName(i, 'nil-Vote') }} </span>
                 <span>
-                  <span class="tooltip " :data-tip="pre" 
-                  :class="{
-                    'bg-green-400': String(pre).toLowerCase() !== 'nil-vote',
-                    'bg-red-400': String(pre).toLowerCase() === 'nil-vote'
-                  }"
-                  >&nbsp;</span> 
-                  <span class="tooltip ml-1" :data-tip="item.precommits[i]" 
-                  :class="{
-                    'bg-green-400': String(item.precommits[i]).toLowerCase() !== 'nil-vote',
-                    'bg-red-400': String(item.precommits[i]).toLowerCase() === 'nil-vote'
-                  }">&nbsp;</span>
+                  <span
+                    class="tooltip"
+                    :data-tip="pre"
+                    :class="{
+                      'bg-green-400': String(pre).toLowerCase() !== 'nil-vote',
+                      'bg-red-400': String(pre).toLowerCase() === 'nil-vote',
+                    }"
+                    >&nbsp;</span
+                  >
+                  <span
+                    class="tooltip ml-1"
+                    :data-tip="item.precommits[i]"
+                    :class="{
+                      'bg-green-400': String(item.precommits[i]).toLowerCase() !== 'nil-vote',
+                      'bg-red-400': String(item.precommits[i]).toLowerCase() === 'nil-vote',
+                    }"
+                    >&nbsp;</span
+                  >
                 </span>
               </span>
             </div>
@@ -287,17 +263,11 @@ async function update() {
         </div>
       </div>
       <div class="divider"></div>
-
     </div>
 
     <!-- alert-info -->
-    <div
-      class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info"
-    >
-      <div
-        class="drop-shadow-md px-4 pt-2 pb-2"
-        style="box-shadow: rgba(0, 207, 232, 0.4) 0px 6px 15px -7px"
-      >
+    <div class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info">
+      <div class="drop-shadow-md px-4 pt-2 pb-2" style="box-shadow: rgba(0, 207, 232, 0.4) 0px 6px 15px -7px">
         <h2 class="text-base font-semibold">{{ $t('consensus.tips') }}</h2>
       </div>
       <div class="px-4 py-4">
diff --git a/src/modules/[chain]/cosmwasm/WasmClient.ts b/src/modules/[chain]/cosmwasm/WasmClient.ts
index a5b53a83..bbd45cb1 100644
--- a/src/modules/[chain]/cosmwasm/WasmClient.ts
+++ b/src/modules/[chain]/cosmwasm/WasmClient.ts
@@ -16,115 +16,112 @@ import { PageRequest } from '@/types';
 import { get } from '@/libs';
 
 export interface WasmRequestRegistry extends AbstractRegistry {
-    cosmwasm_code: Request<PaginabledCodeInfos>;
-    cosmwasm_code_id: Request<CodeInfo>;
-    cosmwasm_code_id_contracts: Request<PaginabledContracts>;
-    cosmwasm_param: Request<WasmParam>;
-    cosmwasm_contract_address: Request<{
-      address: string;
-      contract_info: ContractInfo;
-    }>;
-    cosmwasm_contract_address_history: Request<PaginabledContractHistory>;
-    cosmwasm_contract_address_raw_query_data: Request<any>;
-    cosmwasm_contract_address_smart_query_data: Request<any>;
-    cosmwasm_contract_address_state: Request<PaginabledContractStates>;
-    cosmwasm_wasm_contracts_creator: Request<PaginabledContracts>;
+  cosmwasm_code: Request<PaginabledCodeInfos>;
+  cosmwasm_code_id: Request<CodeInfo>;
+  cosmwasm_code_id_contracts: Request<PaginabledContracts>;
+  cosmwasm_param: Request<WasmParam>;
+  cosmwasm_contract_address: Request<{
+    address: string;
+    contract_info: ContractInfo;
+  }>;
+  cosmwasm_contract_address_history: Request<PaginabledContractHistory>;
+  cosmwasm_contract_address_raw_query_data: Request<any>;
+  cosmwasm_contract_address_smart_query_data: Request<any>;
+  cosmwasm_contract_address_state: Request<PaginabledContractStates>;
+  cosmwasm_wasm_contracts_creator: Request<PaginabledContracts>;
+}
+
+export const DEFAULT_VERSION: WasmRequestRegistry = {
+  cosmwasm_code: { url: '/cosmwasm/wasm/v1/code', adapter },
+  cosmwasm_code_id: { url: '/cosmwasm/wasm/v1/code/{code_id}', adapter },
+  cosmwasm_code_id_contracts: {
+    url: '/cosmwasm/wasm/v1/code/{code_id}/contracts',
+    adapter,
+  },
+  cosmwasm_param: { url: '/cosmwasm/wasm/v1/codes/params', adapter },
+  cosmwasm_contract_address: {
+    url: '/cosmwasm/wasm/v1/contract/{address}',
+    adapter,
+  },
+  cosmwasm_contract_address_history: {
+    url: '/cosmwasm/wasm/v1/contract/{address}/history',
+    adapter,
+  },
+  cosmwasm_contract_address_raw_query_data: {
+    url: '/cosmwasm/wasm/v1/contract/{address}/raw/{query_data}',
+    adapter,
+  },
+  cosmwasm_contract_address_smart_query_data: {
+    url: '/cosmwasm/wasm/v1/contract/{address}/smart/{query_data}',
+    adapter,
+  },
+  cosmwasm_contract_address_state: {
+    url: '/cosmwasm/wasm/v1/contract/{address}/state',
+    adapter,
+  },
+  cosmwasm_wasm_contracts_creator: {
+    url: '/cosmwasm/wasm/v1/contracts/creator/{creator_address}',
+    adapter,
+  },
+};
+
+export class WasmRestClient extends BaseRestClient<WasmRequestRegistry> {
+  getWasmCodeList(pr?: PageRequest) {
+    // if(!pr) pr = new PageRequest()
+    // const query = `?${pr.toQueryString()}`
+    return this.request(this.registry.cosmwasm_code, {} /*query*/);
   }
-  
-  export const DEFAULT_VERSION: WasmRequestRegistry = {
-    cosmwasm_code: { url: '/cosmwasm/wasm/v1/code', adapter },
-    cosmwasm_code_id: { url: '/cosmwasm/wasm/v1/code/{code_id}', adapter },
-    cosmwasm_code_id_contracts: {
-      url: '/cosmwasm/wasm/v1/code/{code_id}/contracts',
-      adapter,
-    },
-    cosmwasm_param: { url: '/cosmwasm/wasm/v1/codes/params', adapter },
-    cosmwasm_contract_address: {
-      url: '/cosmwasm/wasm/v1/contract/{address}',
-      adapter,
-    },
-    cosmwasm_contract_address_history: {
-      url: '/cosmwasm/wasm/v1/contract/{address}/history',
-      adapter,
-    },
-    cosmwasm_contract_address_raw_query_data: {
-      url: '/cosmwasm/wasm/v1/contract/{address}/raw/{query_data}',
-      adapter,
-    },
-    cosmwasm_contract_address_smart_query_data: {
-      url: '/cosmwasm/wasm/v1/contract/{address}/smart/{query_data}',
-      adapter,
-    },
-    cosmwasm_contract_address_state: {
-      url: '/cosmwasm/wasm/v1/contract/{address}/state',
-      adapter,
-    },
-    cosmwasm_wasm_contracts_creator: {
-      url: '/cosmwasm/wasm/v1/contracts/creator/{creator_address}',
-      adapter,
-    },
-  };
-  
-  export class WasmRestClient extends BaseRestClient<WasmRequestRegistry> {
-    getWasmCodeList(pr?: PageRequest) {
-      // if(!pr) pr = new PageRequest()
-      // const query = `?${pr.toQueryString()}`
-      return this.request(this.registry.cosmwasm_code, {}, /*query*/);
-    }
-    getWasmCodeById(code_id: string) {
-      return this.request(this.registry.cosmwasm_code, { code_id }); // `code_id` is a param in above url
-    }
-    getWasmCodeContracts(code_id: string, page?: PageRequest) {
-      // if(!page) page = new PageRequest()
-      // const query = `?${page.toQueryString()}`
-      return this.request(this.registry.cosmwasm_code_id_contracts, { code_id });
-    }
-    getWasmParams() {
-      return this.request(this.registry.cosmwasm_param, {});
-    }
-    getWasmContracts(address: string) {
-      return this.request(this.registry.cosmwasm_contract_address, { address });
-    }
-    getWasmContractsByCreator(creator_address: string, page?: PageRequest) {    
-      // if(!page) page = new PageRequest()
-      // const query = `?${page.toQueryString()}`
-      return this.request(this.registry.cosmwasm_wasm_contracts_creator, { creator_address });
-    }
-    getWasmContractHistory(address: string) {
-      return this.request(this.registry.cosmwasm_contract_address_history, {
-        address,
-      });
-    }
-    getWasmContractRawQuery(address: string, query: string) {
-      const query_data = toBase64(new TextEncoder().encode(query));
-      return this.request(
-        this.registry.cosmwasm_contract_address_raw_query_data,
-        { address, query_data }
-      );
-    }
-    getWasmContractSmartQuery(address: string, query: string) {
-      const query_data = toBase64(new TextEncoder().encode(query));
-      return this.get(
-        this.registry.cosmwasm_contract_address_smart_query_data,
-        { address, query_data }
-      );
-    }
-    async getWasmContractQueries(address: string) {
-      const query_data = toBase64(new TextEncoder().encode('{"":""}'));
-      const {code, message} = await this.get(
-        this.registry.cosmwasm_contract_address_smart_query_data,
-        { address, query_data }
-      );
-      let re = /`(\w+)`/g
-      let x = String(message).match(re)
-      return code === 2 && x ? x.map(e => e.replaceAll('`', '')) : []
-    }
-    getWasmContractStates(address: string, pr: PageRequest) {    
-      if(!pr) pr = new PageRequest()
-      const query = `?${pr.toQueryString()}`
-      return this.request(this.registry.cosmwasm_contract_address_state, {
-        address,
-      }, query);
-    }
+  getWasmCodeById(code_id: string) {
+    return this.request(this.registry.cosmwasm_code, { code_id }); // `code_id` is a param in above url
   }
-  
\ No newline at end of file
+  getWasmCodeContracts(code_id: string, page?: PageRequest) {
+    // if(!page) page = new PageRequest()
+    // const query = `?${page.toQueryString()}`
+    return this.request(this.registry.cosmwasm_code_id_contracts, { code_id });
+  }
+  getWasmParams() {
+    return this.request(this.registry.cosmwasm_param, {});
+  }
+  getWasmContracts(address: string) {
+    return this.request(this.registry.cosmwasm_contract_address, { address });
+  }
+  getWasmContractsByCreator(creator_address: string, page?: PageRequest) {
+    // if(!page) page = new PageRequest()
+    // const query = `?${page.toQueryString()}`
+    return this.request(this.registry.cosmwasm_wasm_contracts_creator, { creator_address });
+  }
+  getWasmContractHistory(address: string) {
+    return this.request(this.registry.cosmwasm_contract_address_history, {
+      address,
+    });
+  }
+  getWasmContractRawQuery(address: string, query: string) {
+    const query_data = toBase64(new TextEncoder().encode(query));
+    return this.request(this.registry.cosmwasm_contract_address_raw_query_data, { address, query_data });
+  }
+  getWasmContractSmartQuery(address: string, query: string) {
+    const query_data = toBase64(new TextEncoder().encode(query));
+    return this.get(this.registry.cosmwasm_contract_address_smart_query_data, { address, query_data });
+  }
+  async getWasmContractQueries(address: string) {
+    const query_data = toBase64(new TextEncoder().encode('{"":""}'));
+    const { code, message } = await this.get(this.registry.cosmwasm_contract_address_smart_query_data, {
+      address,
+      query_data,
+    });
+    let re = /`(\w+)`/g;
+    let x = String(message).match(re);
+    return code === 2 && x ? x.map((e) => e.replaceAll('`', '')) : [];
+  }
+  getWasmContractStates(address: string, pr: PageRequest) {
+    if (!pr) pr = new PageRequest();
+    const query = `?${pr.toQueryString()}`;
+    return this.request(
+      this.registry.cosmwasm_contract_address_state,
+      {
+        address,
+      },
+      query
+    );
+  }
+}
diff --git a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
index 5e6acd88..f0b24d08 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { useWasmStore } from '../WasmStore';
 import { ref } from 'vue';
-import type {
-  ContractInfo,
-  PaginabledContracts,
-} from '../types';
+import type { ContractInfo, PaginabledContracts } from '../types';
 import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import PaginationBar from '@/components/PaginationBar.vue';
 import { PageRequest } from '@/types';
@@ -22,11 +19,11 @@ const wasmStore = useWasmStore();
 function loadContract(pageNum: number) {
   const pr = new PageRequest();
   pr.setPage(pageNum);
-  if(String(props.code_id).search(/^[\d]+$/) > -1){
+  if (String(props.code_id).search(/^[\d]+$/) > -1) {
     // query with code id
     wasmStore.wasmClient.getWasmCodeContracts(props.code_id, pr).then((x) => {
       response.value = x;
-    })
+    });
   } else {
     // query by creator
     wasmStore.wasmClient.getWasmContractsByCreator(props.code_id, pr).then((x) => {
@@ -34,26 +31,21 @@ function loadContract(pageNum: number) {
         contracts: x.contract_addresses,
         pagination: x.pagination,
       };
-    })
+    });
   }
 }
 loadContract(1);
 
-
-
 function showInfo(address: string) {
   wasmStore.wasmClient.getWasmContracts(address).then((x) => {
     info.value = x.contract_info;
   });
 }
-
 </script>
 <template>
   <div>
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title truncate w-full">
-        {{ $t('cosmwasm.contract_list_code') }}: {{ props.code_id }}
-      </h2>
+      <h2 class="card-title truncate w-full">{{ $t('cosmwasm.contract_list_code') }}: {{ props.code_id }}</h2>
       <div class="overflow-x-auto">
         <table class="table table-compact w-full mt-4">
           <thead class="bg-base-200">
@@ -63,35 +55,21 @@ function showInfo(address: string) {
             </tr>
           </thead>
           <tbody>
-            <tr
-              v-for="(v, index) in response.contracts"
-              :key="index"
-              class="hover"
-            >
+            <tr v-for="(v, index) in response.contracts" :key="index" class="hover">
               <td>{{ v }}</td>
               <td>
-                <label
-                  @click="showInfo(v)"
-                  for="modal-contract-detail"
-                  class="btn btn-primary btn-xs text-xs mr-2"
-                  >{{ $t('cosmwasm.btn_contract') }}</label
-                >
-                <RouterLink
-                  :to="`transactions?contract=${v}`"
-                  class="btn btn-primary btn-xs text-xs"
-                >
-                {{ $t('cosmwasm.btn_details') }}
+                <label @click="showInfo(v)" for="modal-contract-detail" class="btn btn-primary btn-xs text-xs mr-2">{{
+                  $t('cosmwasm.btn_contract')
+                }}</label>
+                <RouterLink :to="`transactions?contract=${v}`" class="btn btn-primary btn-xs text-xs">
+                  {{ $t('cosmwasm.btn_details') }}
                 </RouterLink>
               </td>
             </tr>
           </tbody>
         </table>
         <div class="flex justify-between">
-          <PaginationBar
-            :limit="pageRequest.limit"
-            :total="response.pagination?.total"
-            :callback="loadContract"
-          />
+          <PaginationBar :limit="pageRequest.limit" :total="response.pagination?.total" :callback="loadContract" />
           <label
             for="wasm_instantiate_contract"
             class="btn btn-primary my-5"
@@ -112,12 +90,7 @@ function showInfo(address: string) {
         <div>
           <div class="flex items-center justify-between px-3 pt-2">
             <div class="text-lg">{{ $t('cosmwasm.contract_detail') }}</div>
-            <label
-              @click="infoDialog = false"
-              for="modal-contract-detail"
-              class="btn btn-sm btn-circle"
-              >✕</label
-            >
+            <label @click="infoDialog = false" for="modal-contract-detail" class="btn btn-sm btn-circle">✕</label>
           </div>
           <div>
             <DynamicComponent :value="info" />
@@ -125,6 +98,5 @@ function showInfo(address: string) {
         </div>
       </label>
     </label>
-
   </div>
 </template>
diff --git a/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue b/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue
index 509527ca..1f7af89b 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/transactions.vue
@@ -9,301 +9,338 @@ import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import { useRoute } from 'vue-router';
 import type { ContractInfo, PaginabledContractStates } from '../types';
 
-import { JsonViewer } from "vue3-json-viewer"
+import { JsonViewer } from 'vue3-json-viewer';
 // if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
-import "vue3-json-viewer/dist/index.css";
+import 'vue3-json-viewer/dist/index.css';
 
 const chainStore = useBlockchain();
 const baseStore = useBaseStore();
 const format = useFormatter();
 const wasmStore = useWasmStore();
 
-const route = useRoute()
-const page = ref(new PageRequest())
+const route = useRoute();
+const page = ref(new PageRequest());
 const pageRequest = ref(new PageRequest());
 
-const txs = ref<PaginatedTxs>({ txs: [], tx_responses: [], pagination: { total: "0" } });
+const txs = ref<PaginatedTxs>({ txs: [], tx_responses: [], pagination: { total: '0' } });
 
 const dialog = useTxDialog();
 const info = ref({} as ContractInfo);
 const state = ref({} as PaginabledContractStates);
 const selected = ref('');
-const balances = ref({} as PaginatedBalances)
+const balances = ref({} as PaginatedBalances);
 
-const contractAddress = String(route.query.contract)
+const contractAddress = String(route.query.contract);
 
-const history = JSON.parse(localStorage.getItem("contract_history") || "{}")
+const history = JSON.parse(localStorage.getItem('contract_history') || '{}');
 
 if (history[chainStore.chainName]) {
-    if (!history[chainStore.chainName].includes(contractAddress)) {
-        history[chainStore.chainName].push(contractAddress)
-        if (history[chainStore.chainName].length > 10) {
-            history[chainStore.chainName].shift()
-        }
+  if (!history[chainStore.chainName].includes(contractAddress)) {
+    history[chainStore.chainName].push(contractAddress);
+    if (history[chainStore.chainName].length > 10) {
+      history[chainStore.chainName].shift();
     }
+  }
 } else {
-    history[chainStore.chainName] = [contractAddress]
+  history[chainStore.chainName] = [contractAddress];
 }
-localStorage.setItem("contract_history", JSON.stringify(history))
+localStorage.setItem('contract_history', JSON.stringify(history));
 
 onMounted(() => {
-    const address = contractAddress
-    wasmStore.wasmClient.getWasmContracts(address).then((x) => {
-        info.value = x.contract_info;
+  const address = contractAddress;
+  wasmStore.wasmClient.getWasmContracts(address).then((x) => {
+    info.value = x.contract_info;
+  });
+  chainStore.rpc
+    .getTxs("?order_by=2&events=execute._contract_address='{address}'", { address }, page.value)
+    .then((res) => {
+      txs.value = res;
     });
-    chainStore.rpc.getTxs("?order_by=2&events=execute._contract_address='{address}'", { address }, page.value).then(res => {
-        txs.value = res
-    })
 
-    wasmStore.wasmClient.getWasmContractQueries(contractAddress).then(res => {
-        console.log("queries: ", res)
-        queries.value = res
-        if (res && res.length > 0) {
-            selectQuery(res[0])
-        }
-    })
+  wasmStore.wasmClient.getWasmContractQueries(contractAddress).then((res) => {
+    console.log('queries: ', res);
+    queries.value = res;
+    if (res && res.length > 0) {
+      selectQuery(res[0]);
+    }
+  });
 
-    showFunds()
-    showState()
-
-})
+  showFunds();
+  showState();
+});
 
 function pageload(pageNum: number) {
-    page.value.setPage(pageNum)
-    const address = String(route.query.contract)
-    chainStore.rpc.getTxs("?order_by=2&events=execute._contract_address='{address}'", { address }, page.value).then(res => {
-        txs.value = res
-    })
+  page.value.setPage(pageNum);
+  const address = String(route.query.contract);
+  chainStore.rpc
+    .getTxs("?order_by=2&events=execute._contract_address='{address}'", { address }, page.value)
+    .then((res) => {
+      txs.value = res;
+    });
 }
 
-
 function showFunds() {
-
-    const address = String(route.query.contract)
-    chainStore.rpc.getBankBalances(address).then(res => {
-        balances.value = res
-    })
+  const address = String(route.query.contract);
+  chainStore.rpc.getBankBalances(address).then((res) => {
+    balances.value = res;
+  });
 }
 function showState() {
-    const address = String(route.query.contract)
-    selected.value = address;
-    pageloadState(1);
+  const address = String(route.query.contract);
+  selected.value = address;
+  pageloadState(1);
 }
 
 function pageloadState(p: number) {
-    pageRequest.value.setPage(p);
-    wasmStore.wasmClient
-        .getWasmContractStates(selected.value, pageRequest.value)
-        .then((x) => {
-            state.value = x;
-        });
+  pageRequest.value.setPage(p);
+  wasmStore.wasmClient.getWasmContractStates(selected.value, pageRequest.value).then((x) => {
+    state.value = x;
+  });
 }
 
 function showQuery() {
-    query.value = '';
-    result.value = '';
+  query.value = '';
+  result.value = '';
 }
 
 function selectQuery(method: string) {
-    query.value = `{"${method}":{}}`
+  query.value = `{"${method}":{}}`;
 }
 
 function queryContract() {
-    try {
-        if (selectedRadio.value === 'raw') {
-            wasmStore.wasmClient
-                .getWasmContractRawQuery(contractAddress, query.value)
-                .then((x) => {
-                    result.value = x;
-                })
-                .catch((err) => {
-                    result.value = err;
-                });
-        } else {
-            wasmStore.wasmClient
-                .getWasmContractSmartQuery(contractAddress, query.value)
-                .then((x) => {
-                    result.value = x;
-                })
-                .catch((err) => {
-                    result.value = err;
-                });
-        }
-    } catch (err) {
-        result.value = JSON.stringify(err); // not works for now
+  try {
+    if (selectedRadio.value === 'raw') {
+      wasmStore.wasmClient
+        .getWasmContractRawQuery(contractAddress, query.value)
+        .then((x) => {
+          result.value = x;
+        })
+        .catch((err) => {
+          result.value = err;
+        });
+    } else {
+      wasmStore.wasmClient
+        .getWasmContractSmartQuery(contractAddress, query.value)
+        .then((x) => {
+          result.value = x;
+        })
+        .catch((err) => {
+          result.value = err;
+        });
     }
-    // TODO, show error in the result.
+  } catch (err) {
+    result.value = JSON.stringify(err); // not works for now
+  }
+  // TODO, show error in the result.
 }
 
 const selectedRadio = ref('smart');
 const query = ref('');
 const result = ref({});
-const queries = ref<string[]>([])
-const tab = ref('detail')
+const queries = ref<string[]>([]);
+const tab = ref('detail');
 </script>
 <template>
-    <div>
-        <div class="tabs tabs-boxed bg-transparent mb-4">
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'detail' }"
-                @click="tab = 'detail'">{{ $t('cosmwasm.contract_detail') }}</a>
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'transaction' }"
-                @click="tab = 'transaction'">Transactions</a>
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'query' }"
-                @click="tab = 'query'">Query</a>
-        </div>
-
-        <div v-show="tab === 'detail'">
-            <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-                <h2 class="card-title truncate w-full">
-                    {{ $t('cosmwasm.contract_detail') }}
-                </h2>
-                <DynamicComponent :value="info" />
-            </div>
-
-            <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-                <div class="flex items-center justify-between px-3 pt-2">
-                    <div class="text-lg">{{ $t('cosmwasm.contract_balances') }}</div>
-                </div>
-                <ul class="menu mt-5">
-                    <li v-for="b in balances.balances">
-                        <a class="flex justify-between"><span>{{ format.formatToken(b) }}</span> {{ b.amount }}
-                        </a>
-                    </li>
-                    <li v-if="balances.pagination?.total === '0'" class="my-10 text-center">{{
-                        $t('cosmwasm.no_escrowed_assets') }}</li>
-                </ul>
-            </div>
-
-            <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-                <div class="flex items-center justify-between px-3 pt-2 mb-4">
-                    <div class="text-lg">{{ $t('cosmwasm.contract_states') }}</div>
-                </div>
-                <div class="overflow-auto">
-                    <JsonViewer
-                        :value="state.models?.map(v => ({ key: format.hexToString(v.key), value: JSON.parse(format.base64ToString(v.value)) })) || ''"
-                        :theme="baseStore.theme || 'dark'" style="background: transparent;" copyable boxed sort
-                        :expand-depth="5" />
-                    <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total"
-                        :callback="pageloadState" />
-                </div>
-            </div>
-
-            <div class="text-center mb-4">
-                <RouterLink :to="`../${info.code_id}/contracts`"><span class="btn btn-xs text-xs mr-2"> Back </span>
-                </RouterLink>
-
-                <label for="wasm_migrate_contract" class="btn btn-primary btn-xs text-xs mr-2"
-                    @click="dialog.open('wasm_migrate_contract', { contract: contractAddress })">
-                    {{ $t('cosmwasm.btn_migrate') }}
-                </label>
-
-                <label for="wasm_update_admin" class="btn btn-primary btn-xs text-xs mr-2"
-                    @click="dialog.open('wasm_update_admin', { contract: contractAddress })">
-                    {{ $t('cosmwasm.btn_update_admin') }}
-                </label>
-
-                <label for="wasm_clear_admin" class="btn btn-primary btn-xs text-xs mr-2"
-                    @click="dialog.open('wasm_clear_admin', { contract: contractAddress })">
-                    {{ $t('cosmwasm.btn_clear_admin') }}
-                </label>
-
-                <label for="wasm_execute_contract" class="btn btn-primary btn-xs text-xs mr-2"
-                    @click="dialog.open('wasm_execute_contract', { contract: contractAddress })">
-                    {{ $t('cosmwasm.btn_execute') }}
-                </label>
-
-            </div>
-        </div>
-
-        <div v-show="tab === 'transaction'" class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-            <h2 class="card-title truncate w-full mt-4 mb-2">Transactions</h2>
-            <table class="table">
-                <thead class=" bg-base-200">
-                    <tr>
-                        <td> {{ $t('ibc.height') }}</td>
-                        <td>{{ $t('ibc.txhash') }}</td>
-                        <td> {{ $t('ibc.messages') }}</td>
-                        <td>{{ $t('ibc.time') }}</td>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="resp in txs?.tx_responses">
-                        <td>{{ resp.height }}</td>
-                        <td>
-                            <div class="text-xs truncate text-primary dark:invert">
-                                <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-else icon="mdi-multiply" class="text-error text-lg" />
-                            </div>
-                        </td>
-                        <td>{{ format.toLocaleDate(resp.timestamp) }}</td>
-                    </tr>
-                </tbody>
-            </table>
-            <PaginationBar :limit="page.limit" :total="txs.pagination?.total" :callback="pageload" />
-        </div>
-
-        <div v-show="tab === 'query'">
-            <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-                <div class="flex items-center justify-between px-3 pt-2 mb-4">
-                    <div class="text-lg font-semibold">{{ $t('cosmwasm.suggested_messages') }}</div>
-                </div>
-                <div class="px-3">
-                    <div>
-                        <div>
-                            <span v-for="q in queries" class="btn btn-xs mx-1" @click="selectQuery(q)">{{ q }}</span>
-                        </div>
-                        <textarea v-model="query" placeholder="Query String, {}" label="Query String"
-                            class="my-2 textarea textarea-bordered w-full" />
-
-                        <div class="mt-4 mb-4 text-center">
-                            <button class="btn btn-primary btn-sm px-4 text-white" @click="queryContract()">
-                                {{ $t('cosmwasm.btn_query') }}
-                            </button>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div v-show="tab === 'execute'">
-            <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-                <div class="flex items-center justify-between px-3 pt-2 mb-4">
-                    <div class="text-lg font-semibold">{{ $t('cosmwasm.suggested_messages') }}</div>
-                </div>
-                <div class="px-3">
-                    <div>
-                        <div>
-                            <span v-for="q in queries" class="btn btn-xs mx-1" @click="selectQuery(q)">{{ q }}</span>
-                        </div>
-                        <textarea v-model="query" placeholder="Query String, {}" label="Query String"
-                            class="my-2 textarea textarea-bordered w-full" />
-
-                        <div class="mt-4 mb-4 text-center">
-                            <button class="btn btn-primary btn-sm px-4 text-white" @click="queryContract()">
-                                {{ $t('cosmwasm.btn_execute') }}
-                            </button>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="tab === 'execute' || tab === 'query'" class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-            <div class="flex items-center justify-between px-3 pt-2 mb-4">
-                <div class="text-lg font-semibold">{{ $t('cosmwasm.result') }}</div>
-            </div>
-            <JsonViewer :value="result" :theme="baseStore.theme" style="background: transparent;" copyable boxed sort
-                :expand-depth="5" />
-        </div>
-
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'detail' }" @click="tab = 'detail'">{{
+        $t('cosmwasm.contract_detail')
+      }}</a>
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === 'transaction' }"
+        @click="tab = 'transaction'"
+        >Transactions</a
+      >
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'query' }" @click="tab = 'query'">Query</a>
     </div>
-</template>
\ No newline at end of file
+
+    <div v-show="tab === 'detail'">
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <h2 class="card-title truncate w-full">
+          {{ $t('cosmwasm.contract_detail') }}
+        </h2>
+        <DynamicComponent :value="info" />
+      </div>
+
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <div class="flex items-center justify-between px-3 pt-2">
+          <div class="text-lg">{{ $t('cosmwasm.contract_balances') }}</div>
+        </div>
+        <ul class="menu mt-5">
+          <li v-for="b in balances.balances">
+            <a class="flex justify-between"
+              ><span>{{ format.formatToken(b) }}</span> {{ b.amount }}
+            </a>
+          </li>
+          <li v-if="balances.pagination?.total === '0'" class="my-10 text-center">
+            {{ $t('cosmwasm.no_escrowed_assets') }}
+          </li>
+        </ul>
+      </div>
+
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <div class="flex items-center justify-between px-3 pt-2 mb-4">
+          <div class="text-lg">{{ $t('cosmwasm.contract_states') }}</div>
+        </div>
+        <div class="overflow-auto">
+          <JsonViewer
+            :value="
+              state.models?.map((v) => ({
+                key: format.hexToString(v.key),
+                value: JSON.parse(format.base64ToString(v.value)),
+              })) || ''
+            "
+            :theme="baseStore.theme || 'dark'"
+            style="background: transparent"
+            copyable
+            boxed
+            sort
+            :expand-depth="5"
+          />
+          <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total" :callback="pageloadState" />
+        </div>
+      </div>
+
+      <div class="text-center mb-4">
+        <RouterLink :to="`../${info.code_id}/contracts`"
+          ><span class="btn btn-xs text-xs mr-2"> Back </span>
+        </RouterLink>
+
+        <label
+          for="wasm_migrate_contract"
+          class="btn btn-primary btn-xs text-xs mr-2"
+          @click="dialog.open('wasm_migrate_contract', { contract: contractAddress })"
+        >
+          {{ $t('cosmwasm.btn_migrate') }}
+        </label>
+
+        <label
+          for="wasm_update_admin"
+          class="btn btn-primary btn-xs text-xs mr-2"
+          @click="dialog.open('wasm_update_admin', { contract: contractAddress })"
+        >
+          {{ $t('cosmwasm.btn_update_admin') }}
+        </label>
+
+        <label
+          for="wasm_clear_admin"
+          class="btn btn-primary btn-xs text-xs mr-2"
+          @click="dialog.open('wasm_clear_admin', { contract: contractAddress })"
+        >
+          {{ $t('cosmwasm.btn_clear_admin') }}
+        </label>
+
+        <label
+          for="wasm_execute_contract"
+          class="btn btn-primary btn-xs text-xs mr-2"
+          @click="dialog.open('wasm_execute_contract', { contract: contractAddress })"
+        >
+          {{ $t('cosmwasm.btn_execute') }}
+        </label>
+      </div>
+    </div>
+
+    <div v-show="tab === 'transaction'" class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+      <h2 class="card-title truncate w-full mt-4 mb-2">Transactions</h2>
+      <table class="table">
+        <thead class="bg-base-200">
+          <tr>
+            <td>{{ $t('ibc.height') }}</td>
+            <td>{{ $t('ibc.txhash') }}</td>
+            <td>{{ $t('ibc.messages') }}</td>
+            <td>{{ $t('ibc.time') }}</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="resp in txs?.tx_responses">
+            <td>{{ resp.height }}</td>
+            <td>
+              <div class="text-xs truncate text-primary dark:invert">
+                <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-else icon="mdi-multiply" class="text-error text-lg" />
+              </div>
+            </td>
+            <td>{{ format.toLocaleDate(resp.timestamp) }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <PaginationBar :limit="page.limit" :total="txs.pagination?.total" :callback="pageload" />
+    </div>
+
+    <div v-show="tab === 'query'">
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <div class="flex items-center justify-between px-3 pt-2 mb-4">
+          <div class="text-lg font-semibold">{{ $t('cosmwasm.suggested_messages') }}</div>
+        </div>
+        <div class="px-3">
+          <div>
+            <div>
+              <span v-for="q in queries" class="btn btn-xs mx-1" @click="selectQuery(q)">{{ q }}</span>
+            </div>
+            <textarea
+              v-model="query"
+              placeholder="Query String, {}"
+              label="Query String"
+              class="my-2 textarea textarea-bordered w-full"
+            />
+
+            <div class="mt-4 mb-4 text-center">
+              <button class="btn btn-primary btn-sm px-4 text-white" @click="queryContract()">
+                {{ $t('cosmwasm.btn_query') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-show="tab === 'execute'">
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <div class="flex items-center justify-between px-3 pt-2 mb-4">
+          <div class="text-lg font-semibold">{{ $t('cosmwasm.suggested_messages') }}</div>
+        </div>
+        <div class="px-3">
+          <div>
+            <div>
+              <span v-for="q in queries" class="btn btn-xs mx-1" @click="selectQuery(q)">{{ q }}</span>
+            </div>
+            <textarea
+              v-model="query"
+              placeholder="Query String, {}"
+              label="Query String"
+              class="my-2 textarea textarea-bordered w-full"
+            />
+
+            <div class="mt-4 mb-4 text-center">
+              <button class="btn btn-primary btn-sm px-4 text-white" @click="queryContract()">
+                {{ $t('cosmwasm.btn_execute') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="tab === 'execute' || tab === 'query'" class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+      <div class="flex items-center justify-between px-3 pt-2 mb-4">
+        <div class="text-lg font-semibold">{{ $t('cosmwasm.result') }}</div>
+      </div>
+      <JsonViewer
+        :value="result"
+        :theme="baseStore.theme"
+        style="background: transparent"
+        copyable
+        boxed
+        sort
+        :expand-depth="5"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/modules/[chain]/cosmwasm/index.vue b/src/modules/[chain]/cosmwasm/index.vue
index ddb4b6a0..a1dc246f 100644
--- a/src/modules/[chain]/cosmwasm/index.vue
+++ b/src/modules/[chain]/cosmwasm/index.vue
@@ -11,88 +11,93 @@ const props = defineProps(['chain']);
 
 const codes = ref({} as PaginabledCodeInfos);
 
-const pageRequest = ref(new PageRequest())
+const pageRequest = ref(new PageRequest());
 const wasmStore = useWasmStore();
-const dialog = useTxDialog()
-const creator = ref("")
-const field = ref("contract")
-const history = ref([])
+const dialog = useTxDialog();
+const creator = ref('');
+const field = ref('contract');
+const history = ref([]);
 
 function pageload(pageNum: number) {
-    pageRequest.value.setPage(pageNum)
-    wasmStore.wasmClient.getWasmCodeList(pageRequest.value).then((x) => {
-        codes.value = x;
-    });
+  pageRequest.value.setPage(pageNum);
+  wasmStore.wasmClient.getWasmCodeList(pageRequest.value).then((x) => {
+    codes.value = x;
+  });
 }
-pageload(1)
+pageload(1);
 
 onMounted(() => {
-    const historyStore = JSON.parse(localStorage.getItem("contract_history") || "{}")
-    history.value = historyStore[props.chain] || []
-})
+  const historyStore = JSON.parse(localStorage.getItem('contract_history') || '{}');
+  history.value = historyStore[props.chain] || [];
+});
 
 function myContracts() {
-    if(field.value === "contract")
-        router.push(`/${props.chain}/cosmwasm/0/transactions?contract=${creator.value}`)
-    else if(field.value === "creator")
-        router.push(`/${props.chain}/cosmwasm/${creator.value}/contracts`)
+  if (field.value === 'contract') router.push(`/${props.chain}/cosmwasm/0/transactions?contract=${creator.value}`);
+  else if (field.value === 'creator') router.push(`/${props.chain}/cosmwasm/${creator.value}/contracts`);
 }
-const togo = ref("")
+const togo = ref('');
 function gotoHistory() {
-    router.push(`/${props.chain}/cosmwasm/0/transactions?contract=${togo.value}`)
+  router.push(`/${props.chain}/cosmwasm/0/transactions?contract=${togo.value}`);
 }
 </script>
 <template>
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <h2 class="card-title truncate w-full mb-4">{{ $t('cosmwasm.title') }}</h2>
-        <div class="grid grid-flow-col auto-cols-max gap-4 overflow-hidden">
-            <div class="join w-full border border-primary">
-                <select v-model="field" class="select select-primary"><option value="contract">Contract</option><option value="creator">Creator</option></select>
-                <input v-model="creator" type=text class="input input-bordered w-full join-item" placeholder="address" />
-                <button class="join-item btn  btn-primary" @click="myContracts()">{{ $t('cosmwasm.btn_query') }}</button>
-            </div>
-            <div>
-                <select v-model="togo" class="select select-primary" @change="gotoHistory()">
-                    <option value="">History</option>
-                    <option v-for="(v, index) in history" :key="index" :value="v" >...{{ String(v).substring(45) }}</option>
-                </select>
-            </div>
-        </div>
-
-        <div class="overflow-x-auto">
-            <table class="table table-compact w-full mt-4 text-sm">
-                <thead class=" bg-base-200">
-                    <tr>
-                        <th>{{ $t('cosmwasm.code_id') }}</th>
-                        <th>{{ $t('cosmwasm.code_hash') }}</th>
-                        <th>{{ $t('cosmwasm.creator') }}</th>
-                        <th>{{ $t('cosmwasm.permissions') }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(v, index) in codes.code_infos" :key="index">
-                        <td>{{ v.code_id }}</td>
-                        <td>
-                            <RouterLink :to="`/${props.chain}/cosmwasm/${v.code_id}/contracts`"
-                                class="truncate max-w-[200px] block text-primary dark:invert" :title="v.data_hash">
-                                {{ v.data_hash }}
-                            </RouterLink>
-                        </td>
-                        <td>{{ v.creator }}</td>
-                        <td>
-                            {{ v.instantiate_permission?.permission }}
-                            <span>{{ v.instantiate_permission?.address }}
-                                {{ v.instantiate_permission?.addresses.join(', ') }}</span>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <div class="flex justify-between">
-                <PaginationBar :limit="pageRequest.limit" :total="codes.pagination?.total" :callback="pageload" />
-                <label for="wasm_store_code" class="btn btn-primary my-5" @click="dialog.open('wasm_store_code', {})">{{ $t('cosmwasm.btn_up_sc') }}</label>
-            </div>
-        </div>
+  <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+    <h2 class="card-title truncate w-full mb-4">{{ $t('cosmwasm.title') }}</h2>
+    <div class="grid grid-flow-col auto-cols-max gap-4 overflow-hidden">
+      <div class="join w-full border border-primary">
+        <select v-model="field" class="select select-primary">
+          <option value="contract">Contract</option>
+          <option value="creator">Creator</option>
+        </select>
+        <input v-model="creator" type="text" class="input input-bordered w-full join-item" placeholder="address" />
+        <button class="join-item btn btn-primary" @click="myContracts()">{{ $t('cosmwasm.btn_query') }}</button>
+      </div>
+      <div>
+        <select v-model="togo" class="select select-primary" @change="gotoHistory()">
+          <option value="">History</option>
+          <option v-for="(v, index) in history" :key="index" :value="v">...{{ String(v).substring(45) }}</option>
+        </select>
+      </div>
     </div>
+
+    <div class="overflow-x-auto">
+      <table class="table table-compact w-full mt-4 text-sm">
+        <thead class="bg-base-200">
+          <tr>
+            <th>{{ $t('cosmwasm.code_id') }}</th>
+            <th>{{ $t('cosmwasm.code_hash') }}</th>
+            <th>{{ $t('cosmwasm.creator') }}</th>
+            <th>{{ $t('cosmwasm.permissions') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(v, index) in codes.code_infos" :key="index">
+            <td>{{ v.code_id }}</td>
+            <td>
+              <RouterLink
+                :to="`/${props.chain}/cosmwasm/${v.code_id}/contracts`"
+                class="truncate max-w-[200px] block text-primary dark:invert"
+                :title="v.data_hash"
+              >
+                {{ v.data_hash }}
+              </RouterLink>
+            </td>
+            <td>{{ v.creator }}</td>
+            <td>
+              {{ v.instantiate_permission?.permission }}
+              <span>{{ v.instantiate_permission?.address }} {{ v.instantiate_permission?.addresses.join(', ') }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="flex justify-between">
+        <PaginationBar :limit="pageRequest.limit" :total="codes.pagination?.total" :callback="pageload" />
+        <label for="wasm_store_code" class="btn btn-primary my-5" @click="dialog.open('wasm_store_code', {})">{{
+          $t('cosmwasm.btn_up_sc')
+        }}</label>
+      </div>
+    </div>
+  </div>
 </template>
 
 <route>
diff --git a/src/modules/[chain]/faucet/index.vue b/src/modules/[chain]/faucet/index.vue
index cd1e12bc..82b8954e 100644
--- a/src/modules/[chain]/faucet/index.vue
+++ b/src/modules/[chain]/faucet/index.vue
@@ -7,163 +7,180 @@ import { ref, onMounted, computed } from 'vue';
 const chainStore = useBlockchain();
 const format = useFormatter();
 interface FaucetResponse {
-    status: string;
-    result: any;
-    message: string;
+  status: string;
+  result: any;
+  message: string;
 }
 
 const address = ref('');
 const faucet = ref('');
 const balances = ref([]);
 const faucetModal = ref(false);
-const ret = ref({} as FaucetResponse); 
+const ret = ref({} as FaucetResponse);
 const configChecker = ref('');
 
 const checklist = computed(() => {
-    const endpoint = chainStore.current?.endpoints?.rest
-    const bs = balances.value.length > 0 && balances.value.findIndex((v:any) => v.amount <= 10) === -1;
-    return [
-        { title: 'Rest Endpoint', status: endpoint && endpoint[0].address !== '' },
-        { title: 'Faucet Configured', status: chainStore.current?.faucet !== undefined },
-        { title: 'Faucet Account', status: faucet.value !== ''},
-        { title: 'Faucet Balance', status: bs},
-    ];
+  const endpoint = chainStore.current?.endpoints?.rest;
+  const bs = balances.value.length > 0 && balances.value.findIndex((v: any) => v.amount <= 10) === -1;
+  return [
+    { title: 'Rest Endpoint', status: endpoint && endpoint[0].address !== '' },
+    { title: 'Faucet Configured', status: chainStore.current?.faucet !== undefined },
+    { title: 'Faucet Account', status: faucet.value !== '' },
+    { title: 'Faucet Balance', status: bs },
+  ];
 });
 
 const notReady = computed(() => {
-    for (const it of checklist.value) {
-        if (!it.status) return true;
-    }
-    return false;
+  for (const it of checklist.value) {
+    if (!it.status) return true;
+  }
+  return false;
 });
 
 const validAddress = computed(() => {
-    if (!address.value) return true;
-    return address.value.startsWith(chainStore.current?.bech32Prefix || '1');
+  if (!address.value) return true;
+  return address.value.startsWith(chainStore.current?.bech32Prefix || '1');
 });
 
 const faucetUrl = computed(() => {
-    return `https://faucet.ping.pub/${chainStore.current?.chainName}`;
-    // return `http://localhost:3000/${chainStore.current?.chainName}`;
+  return `https://faucet.ping.pub/${chainStore.current?.chainName}`;
+  // return `http://localhost:3000/${chainStore.current?.chainName}`;
 });
 
-
 function claim() {
-    
-    ret.value = {} as FaucetResponse;
-    const prefix = chainStore.current?.bech32Prefix || 'cosmos';
-    if (!address.value ) return;
-    faucetModal.value = true;
-    // @ts-ignore
-    get(`${faucetUrl.value}/send/${address.value}`).then( (res: FaucetResponse) => {
-        console.log(res);
-        ret.value = res;
-    });
+  ret.value = {} as FaucetResponse;
+  const prefix = chainStore.current?.bech32Prefix || 'cosmos';
+  if (!address.value) return;
+  faucetModal.value = true;
+  // @ts-ignore
+  get(`${faucetUrl.value}/send/${address.value}`).then((res: FaucetResponse) => {
+    console.log(res);
+    ret.value = res;
+  });
 }
 
 function balance() {
-    get(`${faucetUrl.value}/balance`).then(res => {
-        if(res.status === 'error') {
-            configChecker.value = res.message;
-            return;
-        }
-        balances.value = res.result?.balance;
-        faucet.value = res.result?.address;
-    });
+  get(`${faucetUrl.value}/balance`).then((res) => {
+    if (res.status === 'error') {
+      configChecker.value = res.message;
+      return;
+    }
+    balances.value = res.result?.balance;
+    faucet.value = res.result?.address;
+  });
 }
 
 onMounted(() => {
-    if (chainStore.current && chainStore.current.faucet) {
-        balance();
-    }
+  if (chainStore.current && chainStore.current.faucet) {
+    balance();
+  }
 });
-
-
 </script>
 <template>
-    <div>
-        <div class="flex flex-col items-center justify-center mb-6 mt-14 gap-4">
-            <img v-if="chainStore.current?.logo" :src="`${chainStore.current?.logo}`" class="w-16 rounded-md" />
-            <div v-else class="w-16 rounded-full">
-                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.000000 132.000000"
-                    preserveAspectRatio="xMidYMid meet">
-                    <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)" fill="#666CFF" class=""
-                        stroke="none">
-                        <path d="M500 1310 l-125 -5 -182 -315 c-100 -173 -182 -321 -182 -329 -1 -7
+  <div>
+    <div class="flex flex-col items-center justify-center mb-6 mt-14 gap-4">
+      <img v-if="chainStore.current?.logo" :src="`${chainStore.current?.logo}`" class="w-16 rounded-md" />
+      <div v-else class="w-16 rounded-full">
+        <svg
+          version="1.0"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 150.000000 132.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)" fill="#666CFF" class="" stroke="none">
+            <path
+              d="M500 1310 l-125 -5 -182 -315 c-100 -173 -182 -321 -182 -329 -1 -7
             81 -159 181 -337 l183 -324 372 0 371 0 186 325 c102 179 186 330 186 337 0 7
             -82 157 -182 335 l-183 323 -250 -2 c-137 -1 -306 -5 -375 -8z m588 -454 c61
             -106 112 -197 112 -201 0 -4 -50 -95 -111 -201 l-112 -194 -231 0 -231 0 -105
             181 c-58 100 -109 190 -114 200 -6 14 17 63 104 213 l112 196 232 0 231 0 113
-            -194z" />
-                        <path d="M591 1001 l-54 -6 -87 -150 -88 -150 176 -3 c97 -1 181 -1 187 2 9 3
-            165 267 183 308 4 9 -233 7 -317 -1z" />
-                        <path d="M872 824 l-90 -159 36 -66 c113 -201 147 -258 153 -251 8 8 179 302
-            179 307 0 2 -37 68 -83 147 -46 78 -88 151 -94 162 -9 16 -24 -5 -101 -140z" />
-                        <path d="M360 625 c0 -7 148 -263 172 -297 l19 -28 186 0 c101 0 183 3 181 8
-            -1 4 -43 78 -93 165 l-90 157 -187 0 c-104 0 -188 -2 -188 -5z" />
-                    </g>
-                </svg>
-            </div>
-            <h1 class="text-primary text-3xl md:!text-6xl font-bold capitalize">
-                {{ chainStore.chainName }} Faucet
-            </h1>
-        </div>
-        <div class="bg-base-100 my-5 px-4 pt-3 pb-4 rounded shadow">
-            <h2 class="card-title">Get Tokens</h2>
-            <input type="text" v-model="address" class="mt-4 mb-4 w-full border border-gray-300 rounded-md p-2"
-                :class="{'input-error' : !validAddress}"
-                :disabled="notReady" placeholder="Enter your address" />
-            <button class="btn btn-primary w-full bg-primary text-white" :disabled="notReady" @click="claim()">Get
-                Tokens</button>
-        </div>
-
-        <AdBanner id="home-banner-ad" unit="banner" />
-
-        <div class="bg-base-100 my-5 px-4 pt-3 pb-4 rounded shadow">
-            <h2 class="card-title">Enable Faucet</h2>
-            <div class="mt-4">
-                <span class="text-base"> 1. Submit chain configuration</span>
-                <div class="mockup-code bg-base-200 my-2 gap-4">
-                    <div v-for="it in checklist">
-                        <pre><code class="text-gray-800 dark:invert">{{ it.title }}: </code>{{ it.status ? '✅' : '❌' }} </pre>
-                    </div>
-
-                    <pre class=" text-xs text-red-500">{{ configChecker }}</pre>
-                    <pre></pre>
-                    <a class=" btn-ghost text-white rounded-md p-2 ml-4"
-                        href="https://github.com/ping-pub/ping.pub/blob/main/faucet.md">Update</a>
-                </div>
-
-                <span class="text-base"> 2. Fund the faucet account</span>
-                <div class="mockup-code bg-base-200 my-2">
-                    <pre data-prefix=">"><code class=" text-gray-800 dark:invert"> Faucet Address: {{ faucet }} </code></pre>
-                    <pre
-                        data-prefix=">"><code class="text-gray-800 dark:invert"> Balances: {{ format.formatTokens(balances) }} </code></pre>
-                </div>
-            </div>
-        </div>
-        <input type="checkbox" v-model="faucetModal" id="my_modal_6" class="modal-toggle" />
-        <div class="modal" role="dialog">
-            <div class="modal-box">
-                <div v-if="ret.status === 'error'">
-                    <h3 class="font-bold text-red-500"> Error </h3>
-                    <div>{{ ret.message }}</div>
-                </div>
-                <div v-else-if="ret.status === 'ok'">
-                    <h3 class="font-bold text-green-500"> Token Sent! </h3>
-                    <div class=" text-center mt-4"><RouterLink :to="`/${chainStore.chainName}/tx/${ret.result.txhash}`">View Transaction</RouterLink></div>
-                </div>
-                <h3 v-else class="font-bold text-lg"> Processing <span class="loading loading-bars loading-sm"></span> </h3>
- 
-                <div class="modal-action">
-                    <label for="my_modal_6"  class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
-                </div>
-                <p class="py-2">
-                <div>
-                    <AdBanner id="popup-ad" unit="popup" />
-                </div>
-                </p>
-            </div>
-        </div>
+            -194z"
+            />
+            <path
+              d="M591 1001 l-54 -6 -87 -150 -88 -150 176 -3 c97 -1 181 -1 187 2 9 3
+            165 267 183 308 4 9 -233 7 -317 -1z"
+            />
+            <path
+              d="M872 824 l-90 -159 36 -66 c113 -201 147 -258 153 -251 8 8 179 302
+            179 307 0 2 -37 68 -83 147 -46 78 -88 151 -94 162 -9 16 -24 -5 -101 -140z"
+            />
+            <path
+              d="M360 625 c0 -7 148 -263 172 -297 l19 -28 186 0 c101 0 183 3 181 8
+            -1 4 -43 78 -93 165 l-90 157 -187 0 c-104 0 -188 -2 -188 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <h1 class="text-primary text-3xl md:!text-6xl font-bold capitalize">{{ chainStore.chainName }} Faucet</h1>
     </div>
+    <div class="bg-base-100 my-5 px-4 pt-3 pb-4 rounded shadow">
+      <h2 class="card-title">Get Tokens</h2>
+      <input
+        type="text"
+        v-model="address"
+        class="mt-4 mb-4 w-full border border-gray-300 rounded-md p-2"
+        :class="{ 'input-error': !validAddress }"
+        :disabled="notReady"
+        placeholder="Enter your address"
+      />
+      <button class="btn btn-primary w-full bg-primary text-white" :disabled="notReady" @click="claim()">
+        Get Tokens
+      </button>
+    </div>
+
+    <AdBanner id="home-banner-ad" unit="banner" />
+
+    <div class="bg-base-100 my-5 px-4 pt-3 pb-4 rounded shadow">
+      <h2 class="card-title">Enable Faucet</h2>
+      <div class="mt-4">
+        <span class="text-base"> 1. Submit chain configuration</span>
+        <div class="mockup-code bg-base-200 my-2 gap-4">
+          <div v-for="it in checklist">
+            <pre><code class="text-gray-800 dark:invert">{{ it.title }}: </code>{{ it.status ? '✅' : '❌' }} </pre>
+          </div>
+
+          <pre class="text-xs text-red-500">{{ configChecker }}</pre>
+          <pre></pre>
+          <a
+            class="btn-ghost text-white rounded-md p-2 ml-4"
+            href="https://github.com/ping-pub/ping.pub/blob/main/faucet.md"
+            >Update</a
+          >
+        </div>
+
+        <span class="text-base"> 2. Fund the faucet account</span>
+        <div class="mockup-code bg-base-200 my-2">
+          <pre data-prefix=">"><code class=" text-gray-800 dark:invert"> Faucet Address: {{ faucet }} </code></pre>
+          <pre
+            data-prefix=">"
+          ><code class="text-gray-800 dark:invert"> Balances: {{ format.formatTokens(balances) }} </code></pre>
+        </div>
+      </div>
+    </div>
+    <input type="checkbox" v-model="faucetModal" id="my_modal_6" class="modal-toggle" />
+    <div class="modal" role="dialog">
+      <div class="modal-box">
+        <div v-if="ret.status === 'error'">
+          <h3 class="font-bold text-red-500">Error</h3>
+          <div>{{ ret.message }}</div>
+        </div>
+        <div v-else-if="ret.status === 'ok'">
+          <h3 class="font-bold text-green-500">Token Sent!</h3>
+          <div class="text-center mt-4">
+            <RouterLink :to="`/${chainStore.chainName}/tx/${ret.result.txhash}`">View Transaction</RouterLink>
+          </div>
+        </div>
+        <h3 v-else class="font-bold text-lg">Processing <span class="loading loading-bars loading-sm"></span></h3>
+
+        <div class="modal-action">
+          <label for="my_modal_6" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
+        </div>
+        <div class="py-2">
+          <div>
+            <AdBanner id="popup-ad" unit="popup" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index cfc9aff8..87c7fc0a 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -2,27 +2,13 @@
 import { computed } from '@vue/reactivity';
 import MdEditor from 'md-editor-v3';
 import ObjectElement from '@/components/dynamic/ObjectElement.vue';
-import {
-  useBaseStore,
-  useBlockchain,
-  useFormatter,
-  useGovStore,
-  useStakingStore,
-  useTxDialog,
-} from '@/stores';
-import {
-  PageRequest,
-  type GovProposal,
-  type GovVote,
-  type PaginatedProposalDeposit,
-  type Pagination,
-} from '@/types';
+import { useBaseStore, useBlockchain, useFormatter, useGovStore, useStakingStore, useTxDialog } from '@/stores';
+import { PageRequest, type GovProposal, type GovVote, type PaginatedProposalDeposit, type Pagination } from '@/types';
 import { ref, reactive } from 'vue';
 import Countdown from '@/components/Countdown.vue';
 import PaginationBar from '@/components/PaginationBar.vue';
 import { fromBech32, toHex } from '@cosmjs/encoding';
 
-
 const props = defineProps(['proposal_id', 'chain']);
 const proposal = ref({} as GovProposal);
 const format = useFormatter();
@@ -41,35 +27,35 @@ store.fetchProposal(props.proposal_id).then((res) => {
   }
   proposal.value = proposalDetail;
   // load origin params if the proposal is param change
-  if(proposalDetail.content?.changes) {
-    proposalDetail.content?.changes.forEach((item) => {  
-        chainStore.rpc.getParams(item.subspace, item.key).then((res) => {
-          if(proposal.value.content && res.param) {
-            if(proposal.value.content.current){
-              proposal.value.content.current.push(res.param);
-            } else {
-              proposal.value.content.current = [res.param];
-            };
+  if (proposalDetail.content?.changes) {
+    proposalDetail.content?.changes.forEach((item) => {
+      chainStore.rpc.getParams(item.subspace, item.key).then((res) => {
+        if (proposal.value.content && res.param) {
+          if (proposal.value.content.current) {
+            proposal.value.content.current.push(res.param);
+          } else {
+            proposal.value.content.current = [res.param];
           }
-        })
-    })
+        }
+      });
+    });
   }
 
   const msgType = proposalDetail.content?.['@type'] || '';
-  if(msgType.endsWith('MsgUpdateParams')) {
-    if(msgType.indexOf('staking') > -1) {
+  if (msgType.endsWith('MsgUpdateParams')) {
+    if (msgType.indexOf('staking') > -1) {
       chainStore.rpc.getStakingParams().then((res) => {
         addCurrentParams(res);
       });
-    } else if(msgType.indexOf('gov') > -1) {
+    } else if (msgType.indexOf('gov') > -1) {
       chainStore.rpc.getGovParamsVoting().then((res) => {
         addCurrentParams(res);
       });
-    } else if(msgType.indexOf('distribution') > -1) {
+    } else if (msgType.indexOf('distribution') > -1) {
       chainStore.rpc.getDistributionParams().then((res) => {
         addCurrentParams(res);
       });
-    } else if(msgType.indexOf('slashing') > -1) {
+    } else if (msgType.indexOf('slashing') > -1) {
       chainStore.rpc.getSlashingParams().then((res) => {
         addCurrentParams(res);
       });
@@ -78,7 +64,7 @@ store.fetchProposal(props.proposal_id).then((res) => {
 });
 
 function addCurrentParams(res: any) {
-  if(proposal.value.content && res.params) {
+  if (proposal.value.content && res.params) {
     proposal.value.content.params = [proposal.value.content?.params];
     proposal.value.content.current = [res.params];
   }
@@ -198,14 +184,12 @@ const processList = computed(() => {
 
 function showValidatorName(voter: string) {
   try {
-      const { data } = fromBech32(voter);
-      const hex = toHex(data);
-      const v = stakingStore.validators.find(
-        (x) => toHex(fromBech32(x.operator_address).data) === hex
-      );
-      return v ? v.description.moniker : voter;
-  } catch(e){
-      return voter;
+    const { data } = fromBech32(voter);
+    const hex = toHex(data);
+    const v = stakingStore.validators.find((x) => toHex(fromBech32(x.operator_address).data) === hex);
+    return v ? v.description.moniker : voter;
+  } catch (e) {
+    return voter;
   }
 }
 
@@ -217,13 +201,13 @@ function pageload(p: number) {
   });
 }
 
-function metaItem(metadata: string|undefined): { title: string; summary: string } {
+function metaItem(metadata: string | undefined): { title: string; summary: string } {
   if (!metadata) {
-    return { title: '', summary: '' }
+    return { title: '', summary: '' };
   } else if (metadata.startsWith('{') && metadata.endsWith('}')) {
-    return JSON.parse(metadata)
+    return JSON.parse(metadata);
   }
-  return { title: metadata, summary: '' }
+  return { title: metadata, summary: '' };
 }
 </script>
 
@@ -232,17 +216,11 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
       <h2 class="card-title flex flex-col md:!justify-between md:!flex-row mb-2">
         <p class="truncate w-full">
-          {{ proposal_id }}. {{ proposal.title || proposal.content?.title || metaItem(proposal?.metadata)?.title  }}
+          {{ proposal_id }}. {{ proposal.title || proposal.content?.title || metaItem(proposal?.metadata)?.title }}
         </p>
         <div
           class="badge badge-ghost"
-          :class="
-            color === 'success'
-              ? 'text-yes'
-              : color === 'error'
-              ? 'text-no'
-              : 'text-info'
-          "
+          :class="color === 'success' ? 'text-yes' : color === 'error' ? 'text-no' : 'text-info'"
         >
           {{ status }}
         </div>
@@ -250,7 +228,7 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
       <div class="">
         <ObjectElement :value="proposal.content" />
       </div>
-      <div v-if="proposal.summary && !proposal.content?.description || metaItem(proposal?.metadata)?.summary ">
+      <div v-if="(proposal.summary && !proposal.content?.description) || metaItem(proposal?.metadata)?.summary">
         <MdEditor
           :model-value="format.multiLine(proposal.summary || metaItem(proposal?.metadata)?.summary)"
           previewOnly
@@ -267,16 +245,11 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
         <div class="mb-1" v-for="(item, index) of processList" :key="index">
           <label class="block text-sm mb-1">{{ item.name }}</label>
           <div class="h-5 w-full relative">
-            <div
-              class="absolute inset-x-0 inset-y-0 w-full opacity-10 rounded-sm"
-              :class="`${item.class}`"
-            ></div>
+            <div class="absolute inset-x-0 inset-y-0 w-full opacity-10 rounded-sm" :class="`${item.class}`"></div>
             <div
               class="absolute inset-x-0 inset-y-0 rounded-sm"
               :class="`${item.class}`"
-              :style="`width: ${
-                item.value === '-' || item.value === 'NaN%' ? '0%' : item.value
-              }`"
+              :style="`width: ${item.value === '-' || item.value === 'NaN%' ? '0%' : item.value}`"
             ></div>
             <p
               class="absolute inset-x-0 inset-y-0 text-center text-sm text-[#666] dark:text-[#eee] flex items-center justify-center"
@@ -363,22 +336,13 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
             </div>
           </div>
 
-          <div
-            class="mt-4"
-            v-if="
-              proposal?.content?.['@type']?.endsWith('SoftwareUpgradeProposal')
-            "
-          >
+          <div class="mt-4" v-if="proposal?.content?.['@type']?.endsWith('SoftwareUpgradeProposal')">
             <div class="flex items-center">
               <div class="w-2 h-2 rounded-full bg-warning mr-3"></div>
               <div class="text-base flex-1 text-main">
                 {{ $t('gov.upgrade_plan') }}:
-                <span v-if="Number(proposal.content?.plan?.height || '0') > 0">
-                  (EST)</span
-                >
-                <span v-else>{{
-                  format.toDay(proposal.content?.plan?.time)
-                }}</span>
+                <span v-if="Number(proposal.content?.plan?.height || '0') > 0"> (EST)</span>
+                <span v-else>{{ format.toDay(proposal.content?.plan?.time) }}</span>
               </div>
               <div class="text-sm">
                 {{ shortTime(proposal.voting_end_time) }}
@@ -409,20 +373,17 @@ function metaItem(metadata: string|undefined): { title: string; summary: string
               >
                 {{ String(item.option).replace('VOTE_OPTION_', '') }}
               </td>
-              <td
-                v-if="item.options"
-                class="py-2 text-sm"
-              >
-                {{ item.options.map(x => `${x.option.replace('VOTE_OPTION_', '')}:${format.percent(x.weight)}`).join(', ') }}
+              <td v-if="item.options" class="py-2 text-sm">
+                {{
+                  item.options
+                    .map((x) => `${x.option.replace('VOTE_OPTION_', '')}:${format.percent(x.weight)}`)
+                    .join(', ')
+                }}
               </td>
             </tr>
           </tbody>
         </table>
-        <PaginationBar
-          :limit="pageRequest.limit"
-          :total="pageResponse.total"
-          :callback="pageload"
-        />
+        <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload" />
       </div>
     </div>
   </div>
diff --git a/src/modules/[chain]/gov/index.vue b/src/modules/[chain]/gov/index.vue
index 4ad5eead..167984f8 100644
--- a/src/modules/[chain]/gov/index.vue
+++ b/src/modules/[chain]/gov/index.vue
@@ -7,40 +7,44 @@ import { PageRequest } from '@/types';
 
 const tab = ref('2');
 const store = useGovStore();
-const pageRequest = ref(new PageRequest())
+const pageRequest = ref(new PageRequest());
 
 onMounted(() => {
-    store.fetchProposals('2').then((x) => {
-        if (x?.proposals?.length === 0) {
-            tab.value = '3';
-            store.fetchProposals('3');
-        }
-        store.fetchProposals('3');
-        store.fetchProposals('4');
-    });
+  store.fetchProposals('2').then((x) => {
+    if (x?.proposals?.length === 0) {
+      tab.value = '3';
+      store.fetchProposals('3');
+    }
+    store.fetchProposals('3');
+    store.fetchProposals('4');
+  });
 });
 
 const changeTab = (val: '2' | '3' | '4') => {
-    tab.value = val;
+  tab.value = val;
 };
 
 function page(p: number) {
-    pageRequest.value.setPage(p)
-    store.fetchProposals(tab.value, pageRequest.value)
+  pageRequest.value.setPage(p);
+  store.fetchProposals(tab.value, pageRequest.value);
 }
-
 </script>
 <template>
-    <div>
-        <div class="tabs tabs-boxed bg-transparent mb-4 text-center">
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '2' }" @click="changeTab('2')">{{ $t('gov.voting') }}</a>
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '3' }" @click="changeTab('3')">{{ $t('gov.passed') }}</a>
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '4' }"
-                @click="changeTab('4')">{{ $t('gov.rejected') }}</a>
-        </div>
-        <ProposalListItem :proposals="store?.proposals[tab]" />
-        <PaginationBar :total="store?.proposals[tab]?.pagination?.total" :limit="pageRequest.limit" :callback="page" />
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4 text-center">
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '2' }" @click="changeTab('2')">{{
+        $t('gov.voting')
+      }}</a>
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '3' }" @click="changeTab('3')">{{
+        $t('gov.passed')
+      }}</a>
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === '4' }" @click="changeTab('4')">{{
+        $t('gov.rejected')
+      }}</a>
     </div>
+    <ProposalListItem :proposals="store?.proposals[tab]" />
+    <PaginationBar :total="store?.proposals[tab]?.pagination?.total" :limit="pageRequest.limit" :callback="page" />
+  </div>
 </template>
 <route>
   {
diff --git a/src/modules/[chain]/group/index.vue b/src/modules/[chain]/group/index.vue
index 452f4bf5..e1a0dd7d 100644
--- a/src/modules/[chain]/group/index.vue
+++ b/src/modules/[chain]/group/index.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { fromBech32, fromHex, toBech32 } from '@cosmjs/encoding';
 
-let x = toBech32("neutronvaloper1", fromHex("3363E8F97B02ECC00289E72173D827543047ACDA"))
-let add = fromBech32("cosmosvaloper1jxv0u20scum4trha72c7ltfgfqef6nsch7q6cu")
-let op = toBech32("neutronvaloper1", add.data)
-console.log(x)
-console.log(op)
+let x = toBech32('neutronvaloper1', fromHex('3363E8F97B02ECC00289E72173D827543047ACDA'));
+let add = fromBech32('cosmosvaloper1jxv0u20scum4trha72c7ltfgfqef6nsch7q6cu');
+let op = toBech32('neutronvaloper1', add.data);
+console.log(x);
+console.log(op);
 </script>
 <template>
-    <div>address: </div>
-</template>
\ No newline at end of file
+  <div>address:</div>
+</template>
diff --git a/src/modules/[chain]/ibc/connStore.ts b/src/modules/[chain]/ibc/connStore.ts
index aa63c5f4..9d6eeaad 100644
--- a/src/modules/[chain]/ibc/connStore.ts
+++ b/src/modules/[chain]/ibc/connStore.ts
@@ -1,9 +1,8 @@
-
 import { defineStore } from 'pinia';
 
-import {useBlockchain} from '@/stores'
+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 { IBCPath, IBCInfo } from '@ping-pub/chain-registry-client/dist/types';
 import type { Channel } from '@/types';
 import router from '@/router';
 
@@ -11,53 +10,58 @@ export const useIBCModule = defineStore('module-ibc', {
   state: () => {
     return {
       paths: [] as IBCPath[],
-      connectionId: "" as string,
+      connectionId: '' as string,
       registryConf: {} as IBCInfo,
     };
   },
   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)
+      return this.paths.filter(
+        (x: IBCPath) => x.path.search(this.chain.current?.prettyName || this.chain.chainName) > -1
+      );
     },
     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.chain.current?.prettyName || this.chain.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'
+    destField(): string {
+      return this.registryConf?.chain_1?.chain_name === this.chain.current?.prettyName || this.chain.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
+      client.fetchIBCPaths().then((res) => {
+        this.paths = res;
       });
     },
     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;
+      client.fetchIBCPathInfo(path).then((res) => {
+        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
+      if (!connId) {
+        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);
+    },
   },
 });
diff --git a/src/modules/[chain]/ibc/connection.vue b/src/modules/[chain]/ibc/connection.vue
index 8b3b6727..ff1bfb81 100644
--- a/src/modules/[chain]/ibc/connection.vue
+++ b/src/modules/[chain]/ibc/connection.vue
@@ -12,50 +12,65 @@ 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
-    if(x.pagination.total && Number(x.pagination.total) > 0) {
-      ibcStore.showConnection(0)
+    pageResponse.value = x.pagination;
+    if (x.pagination.total && Number(x.pagination.total) > 0) {
+      ibcStore.showConnection(0);
     }
   });
 }
-
 </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 === '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 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 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 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>
diff --git a/src/modules/[chain]/ibc/connection/[connection_id].vue b/src/modules/[chain]/ibc/connection/[connection_id].vue
index ce6f484d..6db11112 100644
--- a/src/modules/[chain]/ibc/connection/[connection_id].vue
+++ b/src/modules/[chain]/ibc/connection/[connection_id].vue
@@ -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">
@@ -217,24 +234,26 @@ function color(v: string) {
             <tr v-for="v in ibcStore.registryChannels">
               <td>
                 <div class="flex gap-1">
-                  <button class="btn btn-xs"
+                  <button
+                    class="btn btn-xs"
                     @click="fetchSendingTxs(v[ibcStore.sourceField].channel_id, v[ibcStore.sourceField].port_id)"
-                    :disabled="loading">
+                    :disabled="loading"
+                  >
                     <span v-if="loading" class="loading loading-spinner loading-sm"></span>
                     {{ $t('ibc.btn_out') }}
                   </button>
-                  <button class="btn btn-xs"
+                  <button
+                    class="btn btn-xs"
                     @click="fetchRecevingTxs(v[ibcStore.sourceField].channel_id, v[ibcStore.sourceField].port_id)"
-                    :disabled="loading">
+                    :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>
+                <a href="#">{{ v[ibcStore.sourceField].channel_id }}</a>
               </td>
               <td>{{ v[ibcStore.sourceField].port_id }}</td>
             </tr>
@@ -252,9 +271,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>
@@ -263,9 +280,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>
@@ -275,13 +290,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>
diff --git a/src/modules/[chain]/ibc/connection/index.vue b/src/modules/[chain]/ibc/connection/index.vue
index 2f309cc8..02964222 100644
--- 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>
\ No newline at end of file
+  </route>
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index a8230cf6..00d12458 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -3,21 +3,14 @@ import MdEditor from 'md-editor-v3';
 import PriceMarketChart from '@/components/charts/PriceMarketChart.vue';
 
 import { Icon } from '@iconify/vue';
-import {
-  useBlockchain,
-  useFormatter,
-  useTxDialog,
-  useWalletStore,
-  useStakingStore,
-  useParamStore,
-} from '@/stores';
+import { useBlockchain, useFormatter, useTxDialog, useWalletStore, useStakingStore, useParamStore } from '@/stores';
 import { onMounted, ref } from 'vue';
 import { useIndexModule, colorMap, tickerUrl } from './indexStore';
 import { computed } from '@vue/reactivity';
 
 import CardStatisticsVertical from '@/components/CardStatisticsVertical.vue';
 import ProposalListItem from '@/components/ProposalListItem.vue';
-import ArrayObjectElement from '@/components/dynamic/ArrayObjectElement.vue'
+import ArrayObjectElement from '@/components/dynamic/ArrayObjectElement.vue';
 
 const props = defineProps(['chain']);
 
@@ -27,7 +20,7 @@ const walletStore = useWalletStore();
 const format = useFormatter();
 const dialog = useTxDialog();
 const stakingStore = useStakingStore();
-const paramStore = useParamStore()
+const paramStore = useParamStore();
 const coinInfo = computed(() => {
   return store.coinInfo;
 });
@@ -35,52 +28,49 @@ const coinInfo = computed(() => {
 onMounted(() => {
   store.loadDashboard();
   walletStore.loadMyAsset();
-  paramStore.handleAbciInfo()
+  paramStore.handleAbciInfo();
   // if(!(coinInfo.value && coinInfo.value.name)) {
   // }
 });
 const ticker = computed(() => store.coinInfo.tickers[store.tickerIndex]);
 
-const currName = ref("")
+const currName = ref('');
 blockchain.$subscribe((m, s) => {
   if (s.chainName !== currName.value) {
-    currName.value = s.chainName
+    currName.value = s.chainName;
     store.loadDashboard();
     walletStore.loadMyAsset();
-    paramStore.handleAbciInfo()
+    paramStore.handleAbciInfo();
   }
 });
 function shortName(name: string, id: string) {
-  return name.toLowerCase().startsWith('ibc/') ||
-    name.toLowerCase().startsWith('0x')
-    ? id
-    : name;
+  return name.toLowerCase().startsWith('ibc/') || name.toLowerCase().startsWith('0x') ? id : name;
 }
 
-const comLinks = computed(()=> {
+const comLinks = computed(() => {
   return [
-  {
-    name: 'Website',
-    icon: 'mdi-web',
-    href: store.homepage,
-  },
-  {
-    name: 'Twitter',
-    icon: 'mdi-twitter',
-    href: store.twitter,
-  },
-  {
-    name: 'Telegram',
-    icon: 'mdi-telegram',
-    href: store.telegram,
-  },
-  {
-    name: 'Github',
-    icon: 'mdi-github',
-    href: store.github,
-  },
-];
-})
+    {
+      name: 'Website',
+      icon: 'mdi-web',
+      href: store.homepage,
+    },
+    {
+      name: 'Twitter',
+      icon: 'mdi-twitter',
+      href: store.twitter,
+    },
+    {
+      name: 'Telegram',
+      icon: 'mdi-telegram',
+      href: store.telegram,
+    },
+    {
+      name: 'Github',
+      icon: 'mdi-github',
+      href: store.github,
+    },
+  ];
+});
 
 // wallet box
 const change = computed(() => {
@@ -99,31 +89,30 @@ const color = computed(() => {
 });
 
 function updateState() {
-  walletStore.loadMyAsset()
+  walletStore.loadMyAsset();
 }
 
 function trustColor(v: string) {
-  return `text-${colorMap(v)}`
+  return `text-${colorMap(v)}`;
 }
 
-const quantity = ref(100)
+const quantity = ref(100);
 const qty = computed({
   get: () => {
-    return parseFloat(quantity.value.toFixed(6))
+    return parseFloat(quantity.value.toFixed(6));
   },
-  set: val => {
-    quantity.value = val
-  }
-})
+  set: (val) => {
+    quantity.value = val;
+  },
+});
 const amount = computed({
   get: () => {
-    return quantity.value * ticker.value.converted_last.usd || 0
+    return quantity.value * ticker.value.converted_last.usd || 0;
   },
-  set: val => {
-    quantity.value = val / ticker.value.converted_last.usd || 0
-  }
-})
-
+  set: (val) => {
+    quantity.value = val / ticker.value.converted_last.usd || 0;
+  },
+});
 </script>
 
 <template>
@@ -132,9 +121,8 @@ const amount = computed({
       <div class="grid grid-cols-2 md:grid-cols-3 p-4">
         <div class="col-span-2 md:col-span-1">
           <div class="text-xl font-semibold text-main">
-            {{ coinInfo.name }} (<span class="uppercase">{{
-              coinInfo.symbol
-            }}</span>)
+            {{ coinInfo.name }} (<span class="uppercase">{{ coinInfo.symbol }}</span
+            >)
           </div>
           <div class="text-xs mt-2">
             {{ $t('index.rank') }}:
@@ -144,8 +132,12 @@ const amount = computed({
           </div>
 
           <div class="my-4 flex flex-wrap items-center">
-            <a v-for="(item, index) of comLinks" :key="index" :href="item.href"
-              class="link link-primary px-2 py-1 rounded-sm no-underline hover:text-primary hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center">
+            <a
+              v-for="(item, index) of comLinks"
+              :key="index"
+              :href="item.href"
+              class="link link-primary px-2 py-1 rounded-sm no-underline hover:text-primary hover:bg-gray-100 dark:hover:bg-slate-800 flex items-center"
+            >
               <Icon :icon="item?.icon" />
               <span class="ml-1 text-sm uppercase">{{ item?.name }}</span>
             </a>
@@ -155,7 +147,8 @@ const amount = computed({
             <div class="dropdown dropdown-hover w-full">
               <label>
                 <div
-                  class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded">
+                  class="bg-gray-100 dark:bg-[#384059] flex items-center justify-between px-4 py-2 cursor-pointer rounded"
+                >
                   <div>
                     <div class="font-semibold text-xl text-[#666] dark:text-white">
                       {{ ticker?.market?.name || '' }}
@@ -171,9 +164,7 @@ const amount = computed({
                     <div class="text-xl font-semibold text-[#666] dark:text-white">
                       ${{ ticker?.converted_last?.usd }}
                     </div>
-                    <div class="text-sm" :class="store.priceColor">
-                      {{ store.priceChange }}%
-                    </div>
+                    <div class="text-sm" :class="store.priceColor">{{ store.priceChange }}%</div>
                   </div>
                 </div>
               </label>
@@ -193,9 +184,7 @@ const amount = computed({
                           </div>
                         </div>
 
-                        <div class="text-base text-main">
-                           ${{ item?.converted_last?.usd }}
-                        </div>
+                        <div class="text-base text-main">${{ item?.converted_last?.usd }}</div>
                       </div>
                     </li>
                   </ul>
@@ -205,7 +194,31 @@ const amount = computed({
 
             <div class="flex">
               <label class="btn btn-primary !px-1 my-5 mr-2" for="calculator">
-                <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect x="4" y="2" width="16" height="20" rx="2"></rect> <line x1="8" x2="16" y1="6" y2="6"></line> <line x1="16" x2="16" y1="14" y2="18"></line> <path d="M16 10h.01"></path> <path d="M12 10h.01"></path> <path d="M8 10h.01"></path> <path d="M12 14h.01"></path> <path d="M8 14h.01"></path> <path d="M12 18h.01"></path> <path d="M8 18h.01"></path> </g></svg>
+                <svg
+                  class="w-8 h-8"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="#ffffff"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                  <g id="SVGRepo_iconCarrier">
+                    <rect x="4" y="2" width="16" height="20" rx="2"></rect>
+                    <line x1="8" x2="16" y1="6" y2="6"></line>
+                    <line x1="16" x2="16" y1="14" y2="18"></line>
+                    <path d="M16 10h.01"></path>
+                    <path d="M12 10h.01"></path>
+                    <path d="M8 10h.01"></path>
+                    <path d="M12 14h.01"></path>
+                    <path d="M8 14h.01"></path>
+                    <path d="M12 18h.01"></path>
+                    <path d="M8 18h.01"></path>
+                  </g>
+                </svg>
               </label>
               <!-- Put this part before </body> tag -->
               <input type="checkbox" id="calculator" class="modal-toggle" />
@@ -218,7 +231,13 @@ const amount = computed({
                         <label class="join-item btn">
                           <span class="uppercase">{{ coinInfo.symbol }}</span>
                         </label>
-                        <input type="number" v-model="qty" min="0" placeholder="Input a number" class="input grow input-bordered join-item" />
+                        <input
+                          type="number"
+                          v-model="qty"
+                          min="0"
+                          placeholder="Input a number"
+                          class="input grow input-bordered join-item"
+                        />
                       </div>
                     </div>
                     <div class="divider">=</div>
@@ -227,15 +246,25 @@ const amount = computed({
                         <label class="join-item btn">
                           <span>USD</span>
                         </label>
-                        <input type="number" v-model="amount" min="0" placeholder="Input amount" class="join-item grow input input-bordered" />
+                        <input
+                          type="number"
+                          v-model="amount"
+                          min="0"
+                          placeholder="Input amount"
+                          class="join-item grow input input-bordered"
+                        />
                       </div>
                     </div>
                   </div>
                 </div>
                 <label class="modal-backdrop" for="calculator">{{ $t('index.close') }}</label>
               </div>
-              <a class="my-5 !text-white btn grow" :class="{'!btn-success': store.trustColor === 'green', '!btn-warning': store.trustColor === 'yellow'}" :href="tickerUrl(ticker.trade_url)"
-                target="_blank">
+              <a
+                class="my-5 !text-white btn grow"
+                :class="{ '!btn-success': store.trustColor === 'green', '!btn-warning': store.trustColor === 'yellow' }"
+                :href="tickerUrl(ticker.trade_url)"
+                target="_blank"
+              >
                 {{ $t('index.buy') }} {{ coinInfo.symbol || '' }}
               </a>
             </div>
@@ -251,8 +280,10 @@ const amount = computed({
         <MdEditor :model-value="coinInfo.description?.en" previewOnly></MdEditor>
       </div>
       <div class="mx-4 flex flex-wrap items-center">
-        <div v-for="tag in coinInfo.categories"
-          class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1">
+        <div
+          v-for="tag in coinInfo.categories"
+          class="mr-2 mb-4 text-xs bg-gray-100 dark:bg-[#384059] px-3 rounded-full py-1"
+        >
           {{ tag }}
         </div>
       </div>
@@ -278,10 +309,13 @@ const amount = computed({
 
     <div class="bg-base-100 rounded mt-4 shadow">
       <div class="flex justify-between px-4 pt-4 pb-2 text-lg font-semibold text-main">
-        <span class="truncate" >{{ walletStore.currentAddress || 'Not Connected' }}</span>
-        <RouterLink v-if="walletStore.currentAddress"
+        <span class="truncate">{{ walletStore.currentAddress || 'Not Connected' }}</span>
+        <RouterLink
+          v-if="walletStore.currentAddress"
           class="float-right text-sm cursor-pointert link link-primary no-underline font-medium"
-          :to="`/${chain}/account/${walletStore.currentAddress}`">{{ $t('index.more') }}</RouterLink>
+          :to="`/${chain}/account/${walletStore.currentAddress}`"
+          >{{ $t('index.more') }}</RouterLink
+        >
       </div>
       <div class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 px-4 pb-6">
         <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
@@ -289,36 +323,28 @@ const amount = computed({
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.balanceOfStakingToken) }}
           </div>
-          <div class="text-sm" :class="color">
-            ${{ format.tokenValue(walletStore.balanceOfStakingToken) }}
-          </div>
+          <div class="text-sm" :class="color">${{ format.tokenValue(walletStore.balanceOfStakingToken) }}</div>
         </div>
         <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">{{ $t('module.staking') }}</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.stakingAmount) }}
           </div>
-          <div class="text-sm" :class="color">
-            ${{ format.tokenValue(walletStore.stakingAmount) }}
-          </div>
+          <div class="text-sm" :class="color">${{ format.tokenValue(walletStore.stakingAmount) }}</div>
         </div>
         <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">{{ $t('index.reward') }}</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.rewardAmount) }}
           </div>
-          <div class="text-sm" :class="color">
-            ${{ format.tokenValue(walletStore.rewardAmount) }}
-          </div>
+          <div class="text-sm" :class="color">${{ format.tokenValue(walletStore.rewardAmount) }}</div>
         </div>
         <div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
           <div class="text-sm mb-1">{{ $t('index.unbonding') }}</div>
           <div class="text-lg font-semibold text-main">
             {{ format.formatToken(walletStore.unbondingAmount) }}
           </div>
-          <div class="text-sm" :class="color">
-            ${{ format.tokenValue(walletStore.unbondingAmount) }}
-          </div>
+          <div class="text-sm" :class="color">${{ format.tokenValue(walletStore.unbondingAmount) }}</div>
         </div>
       </div>
 
@@ -335,12 +361,11 @@ const amount = computed({
           <tbody>
             <tr v-for="(item, index) in walletStore.delegations" :key="index">
               <td>
-                <RouterLink class="link link-primary no-underline" :to="`/${chain}/staking/${item?.delegation?.validator_address}`">
-                {{
-                  format.validatorFromBech32(
-                    item?.delegation?.validator_address
-                  )
-                }}
+                <RouterLink
+                  class="link link-primary no-underline"
+                  :to="`/${chain}/staking/${item?.delegation?.validator_address}`"
+                >
+                  {{ format.validatorFromBech32(item?.delegation?.validator_address) }}
                 </RouterLink>
               </td>
               <td>{{ format.formatToken(item?.balance) }}</td>
@@ -348,20 +373,29 @@ const amount = computed({
                 {{
                   format.formatTokens(
                     walletStore?.rewards?.rewards?.find(
-                      (el) =>
-                        el?.validator_address ===
-                        item?.delegation?.validator_address
-                    )?.reward)
+                      (el) => el?.validator_address === item?.delegation?.validator_address
+                    )?.reward
+                  )
                 }}
               </td>
               <td>
                 <div>
-                  <label for="delegate" class="btn !btn-xs !btn-primary btn-ghost rounded-sm mr-2"
-                    @click="dialog.open('delegate', { validator_address: item.delegation.validator_address }, updateState)">
+                  <label
+                    for="delegate"
+                    class="btn !btn-xs !btn-primary btn-ghost rounded-sm mr-2"
+                    @click="
+                      dialog.open('delegate', { validator_address: item.delegation.validator_address }, updateState)
+                    "
+                  >
                     {{ $t('account.btn_delegate') }}
                   </label>
-                  <label for="withdraw" class="btn !btn-xs !btn-primary btn-ghost rounded-sm"
-                    @click="dialog.open('withdraw', { validator_address: item.delegation.validator_address }, updateState)">
+                  <label
+                    for="withdraw"
+                    class="btn !btn-xs !btn-primary btn-ghost rounded-sm"
+                    @click="
+                      dialog.open('withdraw', { validator_address: item.delegation.validator_address }, updateState)
+                    "
+                  >
                     {{ $t('index.btn_withdraw_reward') }}
                   </label>
                 </div>
@@ -373,14 +407,25 @@ const amount = computed({
 
       <div class="grid grid-cols-3 gap-4 px-4 pb-6 mt-4">
         <label for="PingTokenConvert" class="btn btn-primary text-white">{{ $t('index.btn_swap') }}</label>
-        <label for="send" class="btn !bg-yes !border-yes text-white" @click="dialog.open('send', {}, updateState)">{{ $t('account.btn_send') }}</label>
-        <label for="delegate" class="btn !bg-info !border-info text-white"
-          @click="dialog.open('delegate', {}, updateState)">{{ $t('account.btn_delegate') }}</label>
-        <RouterLink to="/wallet/receive" class="btn !bg-info !border-info text-white hidden">{{ $t('index.receive') }}</RouterLink>
+        <label for="send" class="btn !bg-yes !border-yes text-white" @click="dialog.open('send', {}, updateState)">{{
+          $t('account.btn_send')
+        }}</label>
+        <label
+          for="delegate"
+          class="btn !bg-info !border-info text-white"
+          @click="dialog.open('delegate', {}, updateState)"
+          >{{ $t('account.btn_delegate') }}</label
+        >
+        <RouterLink to="/wallet/receive" class="btn !bg-info !border-info text-white hidden">{{
+          $t('index.receive')
+        }}</RouterLink>
       </div>
       <Teleport to="body">
-        <ping-token-convert :chain-name="blockchain?.current?.prettyName" :endpoint="blockchain?.endpoint?.address"
-          :hd-path="walletStore?.connectedWallet?.hdPath"></ping-token-convert>
+        <ping-token-convert
+          :chain-name="blockchain?.current?.prettyName"
+          :endpoint="blockchain?.endpoint?.address"
+          :hd-path="walletStore?.connectedWallet?.hdPath"
+        ></ping-token-convert>
       </Teleport>
     </div>
 
@@ -397,7 +442,7 @@ const amount = computed({
       <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
         {{ $t('index.node_info') }}
       </div>
-      <ArrayObjectElement :value="paramStore.nodeVersion?.items" :thead="false" />      
+      <ArrayObjectElement :value="paramStore.nodeVersion?.items" :thead="false" />
       <div class="h-4"></div>
     </div>
   </div>
diff --git a/src/modules/[chain]/indexStore.ts b/src/modules/[chain]/indexStore.ts
index 7a93f7f4..9f3ae30b 100644
--- a/src/modules/[chain]/indexStore.ts
+++ b/src/modules/[chain]/indexStore.ts
@@ -1,11 +1,4 @@
-import {
-  useBlockchain,
-  useCoingecko,
-  useBaseStore,
-  useBankStore,
-  useFormatter,
-  useGovStore,
-} from '@/stores';
+import { useBlockchain, useCoingecko, useBaseStore, useBankStore, useFormatter, useGovStore } from '@/stores';
 import { useDistributionStore } from '@/stores/useDistributionStore';
 import { useMintStore } from '@/stores/useMintStore';
 import { useStakingStore } from '@/stores/useStakingStore';
@@ -25,11 +18,10 @@ export function colorMap(color: string) {
 }
 
 const CODEMAP: Record<string, string[]> = {
-  "binance.com": ["ref", "CPA_004JZGRX6A"],
-  "gate.com": ["ref", "U1gVBl9a"],
-  "bybit": ["affiliate_id", "JKRRZX9"],
-
-}
+  'binance.com': ['ref', 'CPA_004JZGRX6A'],
+  'gate.com': ['ref', 'U1gVBl9a'],
+  bybit: ['affiliate_id', 'JKRRZX9'],
+};
 
 export const useIndexModule = defineStore('module-index', {
   state: () => {
@@ -94,35 +86,33 @@ export const useIndexModule = defineStore('module-index', {
       return useBankStore();
     },
     twitter(): string {
-      if (!this.coinInfo?.links?.twitter_screen_name) return ""
+      if (!this.coinInfo?.links?.twitter_screen_name) return '';
       return `https://twitter.com/${this.coinInfo?.links.twitter_screen_name}`;
     },
     homepage(): string {
-      if (!this.coinInfo?.links?.homepage) return ""
+      if (!this.coinInfo?.links?.homepage) return '';
       const [page1, page2, page3] = this.coinInfo?.links?.homepage;
       return page1 || page2 || page3;
     },
     github(): string {
-      if (!this.coinInfo?.links?.repos_url) return ""
+      if (!this.coinInfo?.links?.repos_url) return '';
       const [page1, page2, page3] = this.coinInfo?.links?.repos_url?.github;
       return page1 || page2 || page3;
     },
     telegram(): string {
-      if (!this.coinInfo?.links?.homepage) return ""
+      if (!this.coinInfo?.links?.homepage) return '';
       return `https://t.me/${this.coinInfo?.links.telegram_channel_identifier}`;
     },
 
     priceChange(): string {
-      if (!this.coinInfo?.market_data?.price_change_percentage_24h) return ""
-      const change =
-        this.coinInfo?.market_data?.price_change_percentage_24h || 0;
+      if (!this.coinInfo?.market_data?.price_change_percentage_24h) return '';
+      const change = this.coinInfo?.market_data?.price_change_percentage_24h || 0;
       return numeral(change).format('+0.[00]');
     },
 
     priceColor(): string {
-      if (!this.coinInfo?.market_data?.price_change_percentage_24h) return ""
-      const change =
-        this.coinInfo?.market_data?.price_change_percentage_24h || 0;
+      if (!this.coinInfo?.market_data?.price_change_percentage_24h) return '';
+      const change = this.coinInfo?.market_data?.price_change_percentage_24h || 0;
       switch (true) {
         case change > 0:
           return 'text-success';
@@ -133,7 +123,7 @@ export const useIndexModule = defineStore('module-index', {
       }
     },
     trustColor(): string {
-      if (!this.coinInfo?.tickers) return ""
+      if (!this.coinInfo?.tickers) return '';
       const change = this.coinInfo?.tickers[this.tickerIndex]?.trust_score;
       return change;
     },
@@ -144,8 +134,8 @@ export const useIndexModule = defineStore('module-index', {
     },
 
     proposals() {
-      const gov = useGovStore()
-      return gov.proposals['2']
+      const gov = useGovStore();
+      return gov.proposals['2'];
     },
 
     stats() {
@@ -201,9 +191,7 @@ export const useIndexModule = defineStore('module-index', {
           icon: 'mdi-bank',
           stats: formatter.formatTokens(
             // @ts-ignore
-            this.communityPool?.filter(
-              (x: Coin) => x.denom === staking.params.bond_denom
-            )
+            this.communityPool?.filter((x: Coin) => x.denom === staking.params.bond_denom)
           ),
           change: 0,
         },
@@ -214,8 +202,8 @@ export const useIndexModule = defineStore('module-index', {
       this.tickerIndex = 0;
       // @ts-ignore
       const [firstAsset] = this.blockchain?.assets || [];
-      return firstAsset.coingecko_id
-    }
+      return firstAsset.coingecko_id;
+    },
   },
   actions: {
     async loadDashboard() {
@@ -248,16 +236,14 @@ export const useIndexModule = defineStore('module-index', {
           this.coinInfo = x;
           // this.coinInfo.tickers.sort((a, b) => a.converted_last.usd - b.converted_last.usd)
         });
-        this.coingecko
-          .getMarketChart(this.days, firstAsset.coingecko_id)
-          .then((x) => {
-            this.marketData = x;
-          });
+        this.coingecko.getMarketChart(this.days, firstAsset.coingecko_id).then((x) => {
+          this.marketData = x;
+        });
       }
     },
     selectTicker(i: number) {
       this.tickerIndex = i;
-    }
+    },
   },
 });
 
@@ -279,13 +265,12 @@ export function addOrReplaceUrlParam(url: string, param: string, value: string):
   return urlObj.toString();
 }
 
-
 export function tickerUrl(url: string) {
   for (const domain of Object.keys(CODEMAP)) {
     if (url.indexOf(domain) > -1) {
       const v = CODEMAP[domain];
-      return addOrReplaceUrlParam(url, v[0], v[1])
+      return addOrReplaceUrlParam(url, v[0], v[1]);
     }
   }
-  return url
+  return url;
 }
diff --git a/src/modules/[chain]/nft/index.vue b/src/modules/[chain]/nft/index.vue
index bf8fc910..f6b80441 100644
--- a/src/modules/[chain]/nft/index.vue
+++ b/src/modules/[chain]/nft/index.vue
@@ -1,8 +1,6 @@
 <!-- TODO: there's no mint msg at the moment. not sure how NFT comes from?-->
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
-    <div>NFT</div>
+  <div>NFT</div>
 </template>
diff --git a/src/modules/[chain]/nft/nftStore.ts b/src/modules/[chain]/nft/nftStore.ts
index 144b15e3..904b26be 100644
--- a/src/modules/[chain]/nft/nftStore.ts
+++ b/src/modules/[chain]/nft/nftStore.ts
@@ -1,7 +1,6 @@
-
 import { defineStore } from 'pinia';
 
-import {useBlockchain} from '@/stores'
+import { useBlockchain } from '@/stores';
 import { DEFAULT, NFTRestClient, type PageinatedClasses, type PageinatedNFTs } from './types';
 
 export const useNFTModule = defineStore('module-nft', {
@@ -13,14 +12,12 @@ export const useNFTModule = defineStore('module-nft', {
   },
   getters: {
     chain() {
-      return useBlockchain()
+      return useBlockchain();
     },
     client() {
-      const client = new NFTRestClient("", DEFAULT)
-      return client
-    }
+      const client = new NFTRestClient('', DEFAULT);
+      return client;
+    },
   },
-  actions: {
-
-  }
+  actions: {},
 });
diff --git a/src/modules/[chain]/nft/types.ts b/src/modules/[chain]/nft/types.ts
index 65fe56cc..de9accbc 100644
--- a/src/modules/[chain]/nft/types.ts
+++ b/src/modules/[chain]/nft/types.ts
@@ -1,108 +1,107 @@
-
 import { BaseRestClient } from '@/libs/client';
 import { adapter, type AbstractRegistry, type Request } from '@/libs/api/registry';
 import { PageRequest, type PaginatedResponse } from '@/types';
 
 export interface Classes {
-    id: string,
-    name: string,
-    symbol: string,
-    description: string,
-    uri: string,
-    uri_hash: string,
-    data: {
-        type_url: string,
-        value: string
-    }
+  id: string;
+  name: string;
+  symbol: string;
+  description: string;
+  uri: string;
+  uri_hash: string;
+  data: {
+    type_url: string;
+    value: string;
+  };
 }
 
 export interface NFT {
-    class_id: string,
-    id: string,
-    uri: string,
-    uri_hash: string,
-    data: {
-      type_url: string,
-      value: string
-    }
-  }
+  class_id: string;
+  id: string;
+  uri: string;
+  uri_hash: string;
+  data: {
+    type_url: string;
+    value: string;
+  };
+}
 
 export interface Balance {
-    amount: string,
+  amount: string;
 }
 
 export interface PageinatedClasses extends PaginatedResponse {
-    classes: Classes[],
+  classes: Classes[];
 }
 
 export interface PageinatedNFTs extends PaginatedResponse {
-    nfts: NFT[],
+  nfts: NFT[];
 }
 
 export interface NFTRequestRegistry extends AbstractRegistry {
-    nft_classes: Request<PageinatedClasses>;
-    nft_classes_class_id: Request<Classes>;
-    nft_supply_class_id: Request<Balance>;
-    nft_classes_nfts: Request<PageinatedNFTs>;
-    nft_classes_nfts_class_id_nft_id: Request<NFT>;
-    nft_classes_nfts_class_id_nft_id_owner: Request<{
-        owner: string
-      }>;
-    nft_balance_owner: Request<Balance>;
+  nft_classes: Request<PageinatedClasses>;
+  nft_classes_class_id: Request<Classes>;
+  nft_supply_class_id: Request<Balance>;
+  nft_classes_nfts: Request<PageinatedNFTs>;
+  nft_classes_nfts_class_id_nft_id: Request<NFT>;
+  nft_classes_nfts_class_id_nft_id_owner: Request<{
+    owner: string;
+  }>;
+  nft_balance_owner: Request<Balance>;
 }
 
 export const DEFAULT: NFTRequestRegistry = {
-    nft_classes: {
-        url: '/cosmos/nft/v1beta1/classes',
-        adapter,
-    },
-    nft_classes_class_id: {
-        url: '/cosmos/nft/v1beta1/classes/{class_id}',
-        adapter,
-    },
-    nft_supply_class_id: {
-        url: '/cosmos/nft/v1beta1/supply/{class_id}',
-        adapter,
-    },
-    nft_classes_nfts: {
-        url: '/cosmos/nft/v1beta1/nfts',
-        adapter,
-    },
-    nft_classes_nfts_class_id_nft_id: {
-        url: '/cosmos/nft/v1beta1/{class_id}/{nft_id}',
-        adapter,
-    },
-    nft_classes_nfts_class_id_nft_id_owner: {
-        url: '/cosmos/nft/v1beta1/owner/{class_id}/{nft_id}',
-        adapter,
-    },
-    nft_balance_owner: {
-        url: '/cosmos/nft/v1beta1/balance/{owner}/{class_id}',
-        adapter,
-    }
+  nft_classes: {
+    url: '/cosmos/nft/v1beta1/classes',
+    adapter,
+  },
+  nft_classes_class_id: {
+    url: '/cosmos/nft/v1beta1/classes/{class_id}',
+    adapter,
+  },
+  nft_supply_class_id: {
+    url: '/cosmos/nft/v1beta1/supply/{class_id}',
+    adapter,
+  },
+  nft_classes_nfts: {
+    url: '/cosmos/nft/v1beta1/nfts',
+    adapter,
+  },
+  nft_classes_nfts_class_id_nft_id: {
+    url: '/cosmos/nft/v1beta1/{class_id}/{nft_id}',
+    adapter,
+  },
+  nft_classes_nfts_class_id_nft_id_owner: {
+    url: '/cosmos/nft/v1beta1/owner/{class_id}/{nft_id}',
+    adapter,
+  },
+  nft_balance_owner: {
+    url: '/cosmos/nft/v1beta1/balance/{owner}/{class_id}',
+    adapter,
+  },
 };
 
 export class NFTRestClient extends BaseRestClient<NFTRequestRegistry> {
-    getClasses(pr?: PageRequest) {
-      if(!pr) pr = new PageRequest()
-      const query = `?${pr.toQueryString()}`
-      return this.request(this.registry.nft_classes, {}, query);
-    }
-    getClassesById(class_id: string) {
-      return this.request(this.registry.nft_classes_class_id, { class_id }); // `code_id` is a param in above url
-    }
-    getNFTs(class_id: string, id: string, page?: PageRequest) {
-      if(!page) page = new PageRequest()
-      const query = `?${page.toQueryString()}`
-      return this.request(this.registry.nft_classes_nfts_class_id_nft_id, { class_id, id }, query);
-    }
-    getNFTOwner(class_id: string, id: string) {
-      return this.request(this.registry.nft_classes_nfts_class_id_nft_id_owner, {class_id, id});
-    }
-    getNFTSupply(class_id: string) {
-      return this.request(this.registry.nft_supply_class_id, { class_id });
-    }
-    getBalanceOfNFT(class_id: string, owner: string) {
-        return this.request(this.registry.nft_balance_owner, { class_id, owner });
-    }
-  }
\ No newline at end of file
+  getClasses(pr?: PageRequest) {
+    if (!pr) pr = new PageRequest();
+    const query = `?${pr.toQueryString()}`;
+    return this.request(this.registry.nft_classes, {}, query);
+  }
+  getClassesById(class_id: string) {
+    return this.request(this.registry.nft_classes_class_id, { class_id }); // `code_id` is a param in above url
+  }
+  getNFTs(class_id: string, id: string, page?: PageRequest) {
+    if (!page) page = new PageRequest();
+    const query = `?${page.toQueryString()}`;
+    return this.request(this.registry.nft_classes_nfts_class_id_nft_id, { class_id, id }, query);
+  }
+  getNFTOwner(class_id: string, id: string) {
+    return this.request(this.registry.nft_classes_nfts_class_id_nft_id_owner, { class_id, id });
+  }
+  getNFTSupply(class_id: string) {
+    return this.request(this.registry.nft_supply_class_id, { class_id });
+  }
+  getBalanceOfNFT(class_id: string, owner: string) {
+    return this.request(this.registry.nft_balance_owner, { class_id, owner });
+  }
+}
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index 365c1221..fabe8eb6 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -15,14 +15,8 @@ onMounted(() => {
     <!-- Chain ID -->
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded">
       <div class="text-base mb-3 text-main">{{ chain.title }}</div>
-      <div
-        class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
-      >
-        <div
-          v-for="(item, index) of chain.items"
-          :key="index"
-          class="rounded-sm bg-active px-4 py-2"
-        >
+      <div class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4">
+        <div v-for="(item, index) of chain.items" :key="index" class="rounded-sm bg-active px-4 py-2">
           <div class="text-xs mb-2 text-secondary">{{ item.subtitle }}</div>
           <div class="text-base text-main">{{ item.value }}</div>
         </div>
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index a4f883c8..3afd858f 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -12,12 +12,15 @@ import {
 import { onMounted, computed, ref } from 'vue';
 import { Icon } from '@iconify/vue';
 import CommissionRate from '@/components/ValidatorCommissionRate.vue';
+import { consensusPubkeyToHexAddress, operatorAddressToAccount, pubKeyToValcons } from '@/libs';
 import {
-  consensusPubkeyToHexAddress,
-  operatorAddressToAccount,
-  pubKeyToValcons,
-} from '@/libs';
-import { PageRequest, type Coin, type Delegation, type PaginatedDelegations, type PaginatedTxs, type Validator } from '@/types';
+  PageRequest,
+  type Coin,
+  type Delegation,
+  type PaginatedDelegations,
+  type PaginatedTxs,
+  type Validator,
+} from '@/types';
 import PaginationBar from '@/components/PaginationBar.vue';
 import { fromBase64, toBase64 } from '@cosmjs/encoding';
 import { stringToUint8Array, uint8ArrayToString } from '@/libs/utils';
@@ -38,7 +41,7 @@ const avatars = ref(cache || {});
 const identity = ref('');
 const rewards = ref([] as Coin[] | undefined);
 const commission = ref([] as Coin[] | undefined);
-const delegations = ref({} as PaginatedDelegations)
+const delegations = ref({} as PaginatedDelegations);
 const addresses = ref(
   {} as {
     account: string;
@@ -51,13 +54,11 @@ const selfBonded = ref({} as Delegation);
 
 addresses.value.account = operatorAddressToAccount(validator);
 // load self bond
-staking
-  .fetchValidatorDelegation(validator, addresses.value.account)
-  .then((x) => {
-    if (x) {
-      selfBonded.value = x.delegation_response;
-    }
-  });
+staking.fetchValidatorDelegation(validator, addresses.value.account).then((x) => {
+  if (x) {
+    selfBonded.value = x.delegation_response;
+  }
+});
 
 const txs = ref({} as PaginatedTxs);
 
@@ -71,15 +72,12 @@ const apr = computed(() => {
   const communityTax = Number(useDistributionStore().params.community_tax);
   const bondedRatio = Number(staking.pool.bonded_tokens) / Number(useBankStore().supply.amount);
 
-  return format.percent((1 - communityTax) * (1 - rate) * Number(inflation) / bondedRatio);
+  return format.percent(((1 - communityTax) * (1 - rate) * Number(inflation)) / bondedRatio);
 });
 
 const selfRate = computed(() => {
   if (selfBonded.value.balance?.amount) {
-    return format.calculatePercent(
-      selfBonded.value.balance.amount,
-      v.value.tokens
-    );
+    return format.calculatePercent(selfBonded.value.balance.amount, v.value.tokens);
   }
   return '-';
 });
@@ -87,9 +85,7 @@ const selfRate = computed(() => {
 const logo = (identity?: string) => {
   if (!identity) return '';
   const url = avatars.value[identity] || '';
-  return url.startsWith('http')
-    ? url
-    : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
+  return url.startsWith('http') ? url : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
 };
 
 const fetchAvatar = (identity: string) => {
@@ -129,30 +125,22 @@ onMounted(() => {
       identity.value = res.validator?.description?.identity || '';
       if (identity.value && !avatars.value[identity.value]) loadAvatar(identity.value);
 
-      addresses.value.hex = consensusPubkeyToHexAddress(
-        v.value.consensus_pubkey
-      );
+      addresses.value.hex = consensusPubkeyToHexAddress(v.value.consensus_pubkey);
       addresses.value.valCons = pubKeyToValcons(
         v.value.consensus_pubkey,
-        blockchain.current?.bech32ConsensusPrefix || "",
+        blockchain.current?.bech32ConsensusPrefix || ''
       );
     });
-    blockchain.rpc
-      .getDistributionValidatorOutstandingRewards(validator)
-      .then((res) => {
-        rewards.value = res.rewards?.rewards?.sort(
-          (a, b) => Number(b.amount) - Number(a.amount)
-        );
-        res.rewards?.rewards?.forEach((x) => {
-          if (x.denom.startsWith('ibc/')) {
-            format.fetchDenomTrace(x.denom);
-          }
-        });
+    blockchain.rpc.getDistributionValidatorOutstandingRewards(validator).then((res) => {
+      rewards.value = res.rewards?.rewards?.sort((a, b) => Number(b.amount) - Number(a.amount));
+      res.rewards?.rewards?.forEach((x) => {
+        if (x.denom.startsWith('ibc/')) {
+          format.fetchDenomTrace(x.denom);
+        }
       });
+    });
     blockchain.rpc.getDistributionValidatorCommission(validator).then((res) => {
-      commission.value = res.commission?.commission?.sort(
-        (a, b) => Number(b.amount) - Number(a.amount)
-      );
+      commission.value = res.commission?.commission?.sort((a, b) => Number(b.amount) - Number(a.amount));
       res.commission?.commission?.forEach((x) => {
         if (x.denom.startsWith('ibc/')) {
           format.fetchDenomTrace(x.denom);
@@ -163,7 +151,6 @@ onMounted(() => {
     // Disable delegations due to its bad performance
     // Comment out the following code if you want to enable it
     // pageload(1)
-
   }
 });
 let showCopyToast = ref(0);
@@ -194,52 +181,59 @@ function pageload(p: number) {
   page.setPage(p);
   page.limit = 10;
 
-  blockchain.rpc.getStakingValidatorsDelegations(validator, page).then(res => {
-      delegations.value = res
-  }) 
+  blockchain.rpc.getStakingValidatorsDelegations(validator, page).then((res) => {
+    delegations.value = res;
+  });
 }
 
-const events = ref({} as PaginatedTxs)
+const events = ref({} as PaginatedTxs);
 
 enum EventType {
   Delegate = 'delegate',
   Unbond = 'unbond',
 }
 
-const selectedEventType = ref(EventType.Delegate)
+const selectedEventType = ref(EventType.Delegate);
 
 function loadPowerEvents(p: number, type: EventType) {
-  selectedEventType.value = type
+  selectedEventType.value = type;
   page.setPage(p);
   page.setPageSize(5);
-  blockchain.rpc.getTxs("?order_by=2&events={type}.validator='{validator}'", { type: selectedEventType.value, validator }, page).then(res => {
-    events.value = res
-  })
+  blockchain.rpc
+    .getTxs("?order_by=2&events={type}.validator='{validator}'", { type: selectedEventType.value, validator }, page)
+    .then((res) => {
+      events.value = res;
+    });
 }
 
 function pagePowerEvents(page: number) {
-    loadPowerEvents(page, selectedEventType.value)
+  loadPowerEvents(page, selectedEventType.value);
 }
 
-pagePowerEvents(1)
+pagePowerEvents(1);
 
-function mapEvents(events: {type: string, attributes: {key: string, value: string}[]}[]) {
+function mapEvents(events: { type: string; attributes: { key: string; value: string }[] }[]) {
   const attributes = events
-    .filter(x => x.type === selectedEventType.value)
-    .filter(x => x.attributes.findIndex(attr => attr.value === validator || attr.value === toBase64(stringToUint8Array(validator))) > -1)
-    .map(x => {
+    .filter((x) => x.type === selectedEventType.value)
+    .filter(
+      (x) =>
+        x.attributes.findIndex(
+          (attr) => attr.value === validator || attr.value === toBase64(stringToUint8Array(validator))
+        ) > -1
+    )
+    .map((x) => {
       // check if attributes need to decode
-      const output = {} as {[key: string]: string }
+      const output = {} as { [key: string]: string };
 
-      if (x.attributes.findIndex(a => a.key === `amount`) > -1) {
-        x.attributes.forEach(attr => {
-          output[attr.key] = attr.value
-        })
+      if (x.attributes.findIndex((a) => a.key === `amount`) > -1) {
+        x.attributes.forEach((attr) => {
+          output[attr.key] = attr.value;
+        });
       } else {
-        x.attributes.forEach(attr => {
-          output[uint8ArrayToString(fromBase64(attr.key))] = uint8ArrayToString(fromBase64(attr.value))
-        })
-      };
+        x.attributes.forEach((attr) => {
+          output[uint8ArrayToString(fromBase64(attr.key))] = uint8ArrayToString(fromBase64(attr.value));
+        });
+      }
 
       return output;
     });
@@ -247,14 +241,13 @@ function mapEvents(events: {type: string, attributes: {key: string, value: strin
   const coinsAsString = attributes.map((x: any) => x.amount).join(',');
   const coins = parseCoins(coinsAsString);
 
-  return coins.map(coin => format.formatToken(coin)).join(', ');
+  return coins.map((coin) => format.formatToken(coin)).join(', ');
 }
 
 function mapDelegators(messages: any[]) {
-  if(!messages) return []
-  return Array.from(new Set(messages.map(x => x.delegator_address || x.grantee)))
+  if (!messages) return [];
+  return Array.from(new Set(messages.map((x) => x.delegator_address || x.grantee)));
 }
-
 </script>
 <template>
   <div>
@@ -275,11 +268,7 @@ function mapDelegators(messages: any[]) {
                     }
                   "
                 />
-                <Icon
-                  v-else
-                  class="text-8xl"
-                  :icon="`mdi-help-circle-outline`"
-                />
+                <Icon v-else class="text-8xl" :icon="`mdi-help-circle-outline`" />
               </div>
             </div>
             <div class="mx-2">
@@ -307,11 +296,7 @@ function mapDelegators(messages: any[]) {
                 <span class="font-bold mr-2">{{ $t('staking.website') }}: </span>
                 <a
                   :href="v?.description?.website || '#'"
-                  :class="
-                    v?.description?.website
-                      ? 'cursor-pointer'
-                      : 'cursor-default'
-                  "
+                  :class="v?.description?.website ? 'cursor-pointer' : 'cursor-default'"
                 >
                   {{ v.description?.website || '-' }}
                 </a>
@@ -321,7 +306,7 @@ function mapDelegators(messages: any[]) {
                 <span class="font-bold mr-2">{{ $t('staking.contact') }}: </span>
                 <a
                   v-if="v.description?.security_contact"
-                  :href="'mailto:' + v.description.security_contact || '#' "
+                  :href="'mailto:' + v.description.security_contact || '#'"
                   class="cursor-pointer"
                 >
                   {{ v.description?.security_contact || '-' }}
@@ -348,13 +333,15 @@ function mapDelegators(messages: any[]) {
               <div class="flex items-center mb-2">
                 <Icon icon="mdi-lock" class="text-xl mr-1" />
                 <span class="font-bold mr-2">{{ $t('staking.validator_bond_share') }}: </span>
-                <span> {{ format.formatToken( {amount: v.validator_bond_shares, denom: staking.params.bond_denom }, false) }} </span>
+                <span>
+                  {{ format.formatToken({ amount: v.validator_bond_shares, denom: staking.params.bond_denom }, false) }}
+                </span>
               </div>
               <div class="flex items-center">
                 <Icon icon="mdi-waves-arrow-right" class="text-xl mr-1" />
                 <span class="font-bold mr-2">{{ $t('staking.liquid_staking_shares') }}: </span>
                 <span>
-                  {{ format.formatToken( {amount: v.liquid_shares, denom: staking.params.bond_denom }, false) }}
+                  {{ format.formatToken({ amount: v.liquid_shares, denom: staking.params.bond_denom }, false) }}
                 </span>
               </div>
             </div>
@@ -363,10 +350,7 @@ function mapDelegators(messages: any[]) {
         <div class="flex-1">
           <div class="flex flex-col mt-10">
             <div class="flex mb-2">
-              <div
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
                 <Icon icon="mdi-coin" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -382,40 +366,27 @@ function mapDelegators(messages: any[]) {
               </div>
             </div>
             <div class="flex mb-2">
-              <div
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
                 <Icon icon="mdi-percent" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
-                <h4>
-                  {{ format.formatToken(selfBonded.balance) }} ({{ selfRate }})
-                </h4>
+                <h4>{{ format.formatToken(selfBonded.balance) }} ({{ selfRate }})</h4>
                 <span class="text-sm">{{ $t('staking.self_bonded') }}</span>
               </div>
             </div>
 
             <div class="flex mb-2">
-              <div
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
                 <Icon icon="mdi-account-tie" class="text-3xl" />
               </div>
 
               <div class="ml-3 flex flex-col">
-                <h4>
-                  {{ v.min_self_delegation }} {{ staking.params.bond_denom }}
-                </h4>
+                <h4>{{ v.min_self_delegation }} {{ staking.params.bond_denom }}</h4>
                 <span class="text-sm">{{ $t('staking.min_self') }}</span>
               </div>
             </div>
             <div class="flex mb-2">
-              <div
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
                 <Icon icon="mdi-finance" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -425,10 +396,7 @@ function mapDelegators(messages: any[]) {
             </div>
 
             <div class="flex mb-2">
-              <div
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
                 <Icon icon="mdi:arrow-down-bold-circle-outline" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
@@ -438,14 +406,13 @@ function mapDelegators(messages: any[]) {
             </div>
 
             <div class="flex mb-2">
-              <div
-                class="flex items-center justify-center rounded w-10 h-10"
-                style="border: 1px solid #666"
-              >
+              <div class="flex items-center justify-center rounded w-10 h-10" style="border: 1px solid #666">
                 <Icon icon="mdi-clock" class="text-3xl" />
               </div>
               <div class="ml-3 flex flex-col justify-center">
-                <h4 v-if="v.unbonding_time && !v.unbonding_time.startsWith('1970')">{{ format.toDay(v.unbonding_time, 'from') }}</h4>
+                <h4 v-if="v.unbonding_time && !v.unbonding_time.startsWith('1970')">
+                  {{ format.toDay(v.unbonding_time, 'from') }}
+                </h4>
                 <h4 v-else>-</h4>
                 <span class="text-sm">{{ $t('staking.unbonding_time') }}</span>
               </div>
@@ -464,10 +431,7 @@ function mapDelegators(messages: any[]) {
         <div class="text-lg font-semibold text-main px-4 pt-4">
           {{ $t('staking.commissions_&_rewards') }}
         </div>
-        <div
-          class="px-4 mt-1 flex flex-col justify-between pb-4 max-h-72"
-          style="height: calc(100% - 50px)"
-        >
+        <div class="px-4 mt-1 flex flex-col justify-between pb-4 max-h-72" style="height: calc(100% - 50px)">
           <div class="overflow-auto flex-1">
             <div class="text-sm mb-2">{{ $t('staking.commissions') }}</div>
             <div
@@ -481,11 +445,7 @@ function mapDelegators(messages: any[]) {
               {{ format.formatToken2(i) }}
             </div>
             <div class="text-sm mb-2 mt-2">{{ $t('staking.outstanding') }} {{ $t('account.rewards') }}</div>
-            <div
-              v-for="(i, k) in rewards"
-              :key="`reward-${k}`"
-              class="mr-1 mb-1 badge text-xs"
-            >
+            <div v-for="(i, k) in rewards" :key="`reward-${k}`" class="mr-1 mb-1 badge text-xs">
               {{ format.formatToken2(i) }}
             </div>
           </div>
@@ -509,73 +469,79 @@ function mapDelegators(messages: any[]) {
         </div>
         <div class="px-4 pb-4">
           <div class="mb-3">
-            <div class="text-sm flex">{{ $t('staking.account_addr') }} 
+            <div class="text-sm flex">
+              {{ $t('staking.account_addr') }}
               <Icon
-                  icon="mdi:content-copy"
-                  class="ml-2 cursor-pointer"
-                  v-show="addresses.account"
-                  @click="copyWebsite(addresses.account || '')"
-                />
-              </div>
-            <RouterLink
-              class="text-xs text-primary"
-              :to="`/${chain}/account/${addresses.account}`"
-            >
+                icon="mdi:content-copy"
+                class="ml-2 cursor-pointer"
+                v-show="addresses.account"
+                @click="copyWebsite(addresses.account || '')"
+              />
+            </div>
+            <RouterLink class="text-xs text-primary" :to="`/${chain}/account/${addresses.account}`">
               {{ addresses.account }}
             </RouterLink>
           </div>
           <div class="mb-3">
-            <div class="text-sm flex">{{ $t('staking.operator_addr') }}
+            <div class="text-sm flex">
+              {{ $t('staking.operator_addr') }}
               <Icon
-                  icon="mdi:content-copy"
-                  class="ml-2 cursor-pointer"
-                  v-show="v.operator_address"
-                  @click="copyWebsite(v.operator_address || '')"
-                /></div>
+                icon="mdi:content-copy"
+                class="ml-2 cursor-pointer"
+                v-show="v.operator_address"
+                @click="copyWebsite(v.operator_address || '')"
+              />
+            </div>
             <div class="text-xs">
               {{ v.operator_address }}
             </div>
           </div>
           <div class="mb-3">
-            <div class="text-sm flex">{{ $t('staking.hex_addr') }}
+            <div class="text-sm flex">
+              {{ $t('staking.hex_addr') }}
               <Icon
-                  icon="mdi:content-copy"
-                  class="ml-2 cursor-pointer"
-                  v-show="addresses.hex"
-                  @click="copyWebsite(addresses.hex || '')"
-                />
-              </div>
+                icon="mdi:content-copy"
+                class="ml-2 cursor-pointer"
+                v-show="addresses.hex"
+                @click="copyWebsite(addresses.hex || '')"
+              />
+            </div>
             <div class="text-xs">{{ addresses.hex }}</div>
           </div>
           <div class="mb-3">
-            <div class="text-sm flex">{{ $t('staking.signer_addr') }}
+            <div class="text-sm flex">
+              {{ $t('staking.signer_addr') }}
               <Icon
-                  icon="mdi:content-copy"
-                  class="ml-2 cursor-pointer"
-                  v-show="addresses.valCons"
-                  @click="copyWebsite(addresses.valCons || '')"
-                />
-              </div>
+                icon="mdi:content-copy"
+                class="ml-2 cursor-pointer"
+                v-show="addresses.valCons"
+                @click="copyWebsite(addresses.valCons || '')"
+              />
+            </div>
             <div class="text-xs">{{ addresses.valCons }}</div>
           </div>
           <div>
-            <div class="text-sm flex">{{ $t('staking.consensus_pub_key') }}
+            <div class="text-sm flex">
+              {{ $t('staking.consensus_pub_key') }}
               <Icon
-                  icon="mdi:content-copy"
-                  class="ml-2 cursor-pointer"
-                  v-show="v.consensus_pubkey"
-                  @click="copyWebsite(JSON.stringify(v.consensus_pubkey) || '')"
-                />
-              </div>
+                icon="mdi:content-copy"
+                class="ml-2 cursor-pointer"
+                v-show="v.consensus_pubkey"
+                @click="copyWebsite(JSON.stringify(v.consensus_pubkey) || '')"
+              />
+            </div>
             <div class="text-xs">{{ v.consensus_pubkey }}</div>
           </div>
         </div>
       </div>
     </div>
 
-    <div v-if="delegations.delegation_responses" class="mt-5 bg-base-100 shadow rounded p-4 ">
-      <div class="text-lg mb-4 font-semibold">{{ $t('account.delegations') }}
-        <span class="float-right"> {{ delegations.delegation_responses?.length || 0 }} / {{ delegations.pagination?.total || 0 }} </span>
+    <div v-if="delegations.delegation_responses" class="mt-5 bg-base-100 shadow rounded p-4">
+      <div class="text-lg mb-4 font-semibold">
+        {{ $t('account.delegations') }}
+        <span class="float-right">
+          {{ delegations.delegation_responses?.length || 0 }} / {{ delegations.pagination?.total || 0 }}
+        </span>
       </div>
       <div class="rounded overflow-auto">
         <table class="table validatore-table w-full">
@@ -586,18 +552,17 @@ function mapDelegators(messages: any[]) {
             <th class="text-left pl-4">{{ $t('account.delegation') }}</th>
           </thead>
           <tbody>
-            <tr v-for="{balance, delegation} in delegations.delegation_responses">
+            <tr v-for="{ balance, delegation } in delegations.delegation_responses">
               <td class="text-sm text-primary">
                 {{ delegation.delegator_address }}
               </td>
               <td class="truncate text-primary">
-                {{ format.formatToken(balance)}}
+                {{ format.formatToken(balance) }}
               </td>
-              
             </tr>
           </tbody>
         </table>
-        <PaginationBar :total="delegations.pagination?.total" :limit="page.limit" :callback="pageload"/>
+        <PaginationBar :total="delegations.pagination?.total" :limit="page.limit" :callback="pageload" />
       </div>
     </div>
 
@@ -616,9 +581,7 @@ function mapDelegators(messages: any[]) {
           <tbody>
             <tr v-for="(item, i) in txs.tx_responses">
               <td class="text-sm text-primary">
-                <RouterLink :to="`/${props.chain}/block/${item.height}`">{{
-                  item.height
-                }}</RouterLink>
+                <RouterLink :to="`/${props.chain}/block/${item.height}`">{{ item.height }}</RouterLink>
               </td>
               <td class="truncate text-primary" style="max-width: 200px">
                 <RouterLink :to="`/${props.chain}/tx/${item.txhash}`">
@@ -627,14 +590,8 @@ function mapDelegators(messages: any[]) {
               </td>
               <td>
                 <div class="flex items-center">
-                  <span class="mr-2">{{
-                    format.messages(item.tx.body.messages)
-                  }}</span>
-                  <Icon
-                    v-if="item.code === 0"
-                    icon="mdi-check"
-                    class="text-yes"
-                  />
+                  <span class="mr-2">{{ format.messages(item.tx.body.messages) }}</span>
+                  <Icon v-if="item.code === 0" icon="mdi-check" class="text-yes" />
                   <Icon v-else icon="mdi-multiply" class="text-no" />
                 </div>
               </td>
@@ -648,21 +605,20 @@ function mapDelegators(messages: any[]) {
     <div class="mt-5 bg-base-100 shadow rounded p-4">
       <div class="text-lg mb-4 font-semibold">
         <div class="tabs tabs-boxed bg-transparent">
-                
-                <span class="mr-10">Voting Power Events: </span>
-                <a
-                    class="tab text-gray-400"
-                    :class="{ 'tab-active': selectedEventType === EventType.Delegate }"
-                    @click="loadPowerEvents(1, EventType.Delegate)"
-                    >{{ $t('account.btn_delegate') }}</a
-                >
-                <a
-                    class="tab text-gray-400"
-                    :class="{ 'tab-active': selectedEventType === EventType.Unbond }"
-                    @click="loadPowerEvents(1, EventType.Unbond)"
-                    >{{ $t('account.btn_unbond') }}</a
-                >
-            </div>
+          <span class="mr-10">Voting Power Events: </span>
+          <a
+            class="tab text-gray-400"
+            :class="{ 'tab-active': selectedEventType === EventType.Delegate }"
+            @click="loadPowerEvents(1, EventType.Delegate)"
+            >{{ $t('account.btn_delegate') }}</a
+          >
+          <a
+            class="tab text-gray-400"
+            :class="{ 'tab-active': selectedEventType === EventType.Unbond }"
+            @click="loadPowerEvents(1, EventType.Unbond)"
+            >{{ $t('account.btn_unbond') }}</a
+          >
+        </div>
       </div>
       <div class="rounded overflow-auto">
         <table class="table validatore-table w-full">
@@ -676,37 +632,36 @@ function mapDelegators(messages: any[]) {
               <td class="pr-2 truncate text-primary" style="max-width: 250px">
                 <RouterLink v-for="d in mapDelegators(item.tx?.body?.messages)" :to="`/${props.chain}/account/${d}`">
                   {{ d }}
-                </RouterLink> 
+                </RouterLink>
               </td>
               <td>
-                <div class="flex items-center" :class="{
-                  'text-yes' : selectedEventType === EventType.Delegate,
-                  'text-no' : selectedEventType ===  EventType.Unbond,
-                }">
+                <div
+                  class="flex items-center"
+                  :class="{
+                    'text-yes': selectedEventType === EventType.Delegate,
+                    'text-no': selectedEventType === EventType.Unbond,
+                  }"
+                >
                   <RouterLink :to="`/${props.chain}/tx/${item.txhash}`">
                     <span class="mr-2">
-                      {{ (selectedEventType === EventType.Delegate ? '+' : '-')}} {{
-                      mapEvents(item.events)
-                    }}</span>
+                      {{ selectedEventType === EventType.Delegate ? '+' : '-' }} {{ mapEvents(item.events) }}</span
+                    >
                   </RouterLink>
-                  <Icon
-                    v-if="item.code === 0"
-                    icon="mdi-check"
-                    class="text-yes"
-                  />
+                  <Icon v-if="item.code === 0" icon="mdi-check" class="text-yes" />
                   <Icon v-else icon="mdi-multiply" class="text-no" />
                 </div>
               </td>
               <td width="150">
                 <RouterLink class="text-primary mb-0" :to="`/${props.chain}/block/${item.height}`">{{
                   item.height
-                }}</RouterLink><br>
+                }}</RouterLink
+                ><br />
                 <span class="text-xs pt-0 mt-0">{{ format.toDay(item.timestamp, 'from') }}</span>
               </td>
             </tr>
           </tbody>
         </table>
-        <PaginationBar :total="events.pagination?.total" :limit="page.limit" :callback="pagePowerEvents"/>
+        <PaginationBar :total="events.pagination?.total" :limit="page.limit" :callback="pagePowerEvents" />
       </div>
     </div>
     <!-- end -->
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index 22cade2a..b44cc5c2 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -1,17 +1,10 @@
 <script lang="ts" setup>
-import {
-    useBaseStore,
-    useBlockchain,
-    useFormatter,
-    useMintStore,
-    useStakingStore,
-    useTxDialog,
-} from '@/stores';
+import { useBaseStore, useBlockchain, useFormatter, useMintStore, useStakingStore, useTxDialog } from '@/stores';
 import { computed } from '@vue/reactivity';
 import { onMounted, ref } from 'vue';
 import { Icon } from '@iconify/vue';
 import type { Key, SlashingParam, Validator } from '@/types';
-import { formatSeconds}  from '@/libs/utils'
+import { formatSeconds } from '@/libs/utils';
 import { diff } from 'semver';
 
 const staking = useStakingStore();
@@ -19,7 +12,7 @@ const base = useBaseStore();
 const format = useFormatter();
 const dialog = useTxDialog();
 const chainStore = useBlockchain();
-const mintStore = useMintStore()
+const mintStore = useMintStore();
 
 const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
 const avatars = ref(cache || {});
@@ -27,130 +20,136 @@ const latest = ref({} as Record<string, number>);
 const yesterday = ref({} as Record<string, number>);
 const tab = ref('active');
 const unbondList = ref([] as Validator[]);
-const slashing = ref({} as SlashingParam)
+const slashing = ref({} as SlashingParam);
 
 onMounted(() => {
-    staking.fetchUnbondingValdiators().then((res) => {
-        unbondList.value = res.concat(unbondList.value);
-    });
-    staking.fetchInacitveValdiators().then((res) => {
-        unbondList.value = unbondList.value.concat(res);
-    });
-    chainStore.rpc.getSlashingParams().then(res => {
-        slashing.value = res.params
-    })
+  staking.fetchUnbondingValdiators().then((res) => {
+    unbondList.value = res.concat(unbondList.value);
+  });
+  staking.fetchInacitveValdiators().then((res) => {
+    unbondList.value = unbondList.value.concat(res);
+  });
+  chainStore.rpc.getSlashingParams().then((res) => {
+    slashing.value = res.params;
+  });
 });
 
 async function fetchChange(blockWindow: number = 14400) {
-    let page = 0;
+  let page = 0;
 
-    let height = Number(base.latest?.block?.header?.height || 0);
-    if (height > blockWindow) {
-        height -= blockWindow;
-    } else {
-        height = 1;
-    }
-    // voting power in 24h ago
-    while (page < staking.validators.length && height > 0) {
-        await base.fetchValidatorByHeight(height, page).then((x) => {
-            x.validators.forEach((v) => {
-                yesterday.value[v.pub_key.key] = Number(v.voting_power);
-            });
-        });
-        page += 100;
-    }
+  let height = Number(base.latest?.block?.header?.height || 0);
+  if (height > blockWindow) {
+    height -= blockWindow;
+  } else {
+    height = 1;
+  }
+  // voting power in 24h ago
+  while (page < staking.validators.length && height > 0) {
+    await base.fetchValidatorByHeight(height, page).then((x) => {
+      x.validators.forEach((v) => {
+        yesterday.value[v.pub_key.key] = Number(v.voting_power);
+      });
+    });
+    page += 100;
+  }
 
-    page = 0;
-    // voting power for now
-    while (page < staking.validators.length) {
-        await base.fetchLatestValidators(page).then((x) => {
-            x.validators.forEach((v) => {
-                latest.value[v.pub_key.key] = Number(v.voting_power);
-            });
-        });
-        page += 100;
-    }
+  page = 0;
+  // voting power for now
+  while (page < staking.validators.length) {
+    await base.fetchLatestValidators(page).then((x) => {
+      x.validators.forEach((v) => {
+        latest.value[v.pub_key.key] = Number(v.voting_power);
+      });
+    });
+    page += 100;
+  }
 }
 
 const changes = computed(() => {
-    const changes = {} as Record<string, number>;
-    Object.keys(latest.value).forEach((k) => {
-        const l = latest.value[k] || 0;
-        const y = yesterday.value[k] || 0;
-        changes[k] = l - y;
-    });
-    return changes;
+  const changes = {} as Record<string, number>;
+  Object.keys(latest.value).forEach((k) => {
+    const l = latest.value[k] || 0;
+    const y = yesterday.value[k] || 0;
+    changes[k] = l - y;
+  });
+  return changes;
 });
 
 const change24 = (entry: { consensus_pubkey: Key; tokens: string }) => {
-    const txt = entry.consensus_pubkey.key;
-    // const n: number = latest.value[txt];
-    // const o: number = yesterday.value[txt];
-    // // console.log( txt, n, o)
-    // return n > 0 && o > 0 ? n - o : 0;
+  const txt = entry.consensus_pubkey.key;
+  // const n: number = latest.value[txt];
+  // const o: number = yesterday.value[txt];
+  // // console.log( txt, n, o)
+  // return n > 0 && o > 0 ? n - o : 0;
 
-    const latestValue = latest.value[txt];
-    if (!latestValue) {
-        return 0;
-    }
+  const latestValue = latest.value[txt];
+  if (!latestValue) {
+    return 0;
+  }
 
-    const displayTokens = format.tokenAmountNumber({
-        amount: parseInt(entry.tokens, 10).toString(),
-        denom: staking.params.bond_denom,
-    });
-    const coefficient = displayTokens / latestValue;
-    return changes.value[txt] * coefficient;
+  const displayTokens = format.tokenAmountNumber({
+    amount: parseInt(entry.tokens, 10).toString(),
+    denom: staking.params.bond_denom,
+  });
+  const coefficient = displayTokens / latestValue;
+  return changes.value[txt] * coefficient;
 };
 
 const change24Text = (entry: { consensus_pubkey: Key; tokens: string }) => {
-    if (!entry) return '';
-    const v = change24(entry);
-    return v && v !== 0 ? format.showChanges(v) : '';
+  if (!entry) return '';
+  const v = change24(entry);
+  return v && v !== 0 ? format.showChanges(v) : '';
 };
 
 const change24Color = (entry: { consensus_pubkey: Key; tokens: string }) => {
-    if (!entry) return '';
-    const v = change24(entry);
-    if (v > 0) return 'text-success';
-    if (v < 0) return 'text-error';
+  if (!entry) return '';
+  const v = change24(entry);
+  if (v > 0) return 'text-success';
+  if (v < 0) return 'text-error';
 };
 
 const calculateRank = function (position: number) {
-    let sum = 0;
-    for (let i = 0; i < position; i++) {
-        sum += Number(staking.validators[i]?.delegator_shares);
-    }
-    const percent = sum / staking.totalPower;
+  let sum = 0;
+  for (let i = 0; i < position; i++) {
+    sum += Number(staking.validators[i]?.delegator_shares);
+  }
+  const percent = sum / staking.totalPower;
 
-    switch (true) {
-        case tab.value === 'active' && percent < 0.33:
-            return 'error';
-        case tab.value === 'active' && percent < 0.67:
-            return 'warning';
-        default:
-            return 'primary';
-    }
+  switch (true) {
+    case tab.value === 'active' && percent < 0.33:
+      return 'error';
+    case tab.value === 'active' && percent < 0.67:
+      return 'warning';
+    default:
+      return 'primary';
+  }
 };
 
-function isFeatured(endpoints: string[], who?: {website?: string, moniker: string }) {
-    if(!endpoints || !who) return false
-    return endpoints.findIndex(x => who.website && who.website?.substring(0, who.website?.lastIndexOf('.')).endsWith(x) || who?.moniker?.toLowerCase().search(x.toLowerCase()) > -1) > -1
+function isFeatured(endpoints: string[], who?: { website?: string; moniker: string }) {
+  if (!endpoints || !who) return false;
+  return (
+    endpoints.findIndex(
+      (x) =>
+        (who.website && who.website?.substring(0, who.website?.lastIndexOf('.')).endsWith(x)) ||
+        who?.moniker?.toLowerCase().search(x.toLowerCase()) > -1
+    ) > -1
+  );
 }
 
 const list = computed(() => {
-    if (tab.value === 'active') {
-        return staking.validators.map((x, i) => ({v: x, rank: calculateRank(i), logo: logo(x.description.identity)}));
-    } else if (tab.value === 'featured') {
-        const endpoint = chainStore.current?.endpoints?.rest?.map(x => x.provider)
-        if(endpoint) {
-            endpoint.push('ping')
-            return staking.validators
-                .filter(x => isFeatured(endpoint, x.description))
-                .map((x, i) => ({v: x, rank: 'primary', logo: logo(x.description.identity)}));
-        }
-        return []        
+  if (tab.value === 'active') {
+    return staking.validators.map((x, i) => ({ v: x, rank: calculateRank(i), logo: logo(x.description.identity) }));
+  } else if (tab.value === 'featured') {
+    const endpoint = chainStore.current?.endpoints?.rest?.map((x) => x.provider);
+    if (endpoint) {
+      endpoint.push('ping');
+      return staking.validators
+        .filter((x) => isFeatured(endpoint, x.description))
+        .map((x, i) => ({ v: x, rank: 'primary', logo: logo(x.description.identity) }));
     }
-    return unbondList.value.map((x, i) => ({v: x, rank: 'primary', logo: logo(x.description.identity)}));
+    return [];
+  }
+  return unbondList.value.map((x, i) => ({ v: x, rank: 'primary', logo: logo(x.description.identity) }));
 });
 
 const fetchAvatar = (identity: string) => {
@@ -196,300 +195,231 @@ const loadAvatars = () => {
     }
   });
 
-  Promise.all(promises).then(() =>
-    localStorage.setItem('avatars', JSON.stringify(avatars.value))
-  );
+  Promise.all(promises).then(() => localStorage.setItem('avatars', JSON.stringify(avatars.value)));
 };
 
 const logo = (identity?: string) => {
-    if (!identity || !avatars.value[identity]) return '';
-    const url = avatars.value[identity] || '';
-    return url.startsWith('http')
-        ? url
-        : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
+  if (!identity || !avatars.value[identity]) return '';
+  const url = avatars.value[identity] || '';
+  return url.startsWith('http') ? url : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
 };
 
 const loaded = ref(false);
 base.$subscribe((_, s) => {
-    if (s.recents.length >= 2 && loaded.value === false) {
-        loaded.value = true;
-        const diff_time = Date.parse(s.recents[1].block.header.time) - Date.parse(s.recents[0].block.header.time)
-        const diff_height = Number(s.recents[1].block.header.height) - Number(s.recents[0].block.header.height)
-        const block_window = Number(Number(86400 * 1000 * diff_height / diff_time).toFixed(0))
-        fetchChange(block_window);
-    }
+  if (s.recents.length >= 2 && loaded.value === false) {
+    loaded.value = true;
+    const diff_time = Date.parse(s.recents[1].block.header.time) - Date.parse(s.recents[0].block.header.time);
+    const diff_height = Number(s.recents[1].block.header.height) - Number(s.recents[0].block.header.height);
+    const block_window = Number(Number((86400 * 1000 * diff_height) / diff_time).toFixed(0));
+    fetchChange(block_window);
+  }
 });
 
 loadAvatars();
 </script>
 <template>
-<div>
-    <div class="bg-base-100 rounded-lg grid sm:grid-cols-1 md:grid-cols-4 p-4" >    
-        <div class="flex">
-            <span>
-                <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
-                    <Icon class="text-success" icon="mdi:trending-up" size="32" />
-                    <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-success"></div>
-                </div>
-            </span>
-            <span>
-                <div class="font-bold">{{ format.percent(mintStore.inflation) }}</div>
-                <div class="text-xs">{{ $t('staking.inflation') }}</div>
-            </span>
-        </div>
-        <div class="flex">
-            <span>
-                <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
-                    <Icon class="text-primary" icon="mdi:lock-open-outline" size="32" />
-                    <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-primary"></div>
-                </div>
-            </span>
-            <span>
-                <div class="font-bold">{{ formatSeconds(staking.params?.unbonding_time) }}</div>
-                <div class="text-xs">{{ $t('staking.unbonding_time') }}</div>
-            </span>
-        </div> 
-        <div class="flex">
-            <span>
-                <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
-                    <Icon class="text-error" icon="mdi:alert-octagon-outline" size="32" />
-                    <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-error"></div>
-                </div>
-            </span>
-            <span>
-            <div class="font-bold">{{ format.percent(slashing.slash_fraction_double_sign) }}</div>
-            <div class="text-xs">{{ $t('staking.double_sign_slashing') }}</div>
-            </span>
-        </div> 
-        <div class="flex">
-            <span>
-                <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
-                    <Icon class="text-error" icon="mdi:pause" size="32" />
-                    <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-error"></div>
-                </div>
-            </span>
-            <span>
-            <div class="font-bold">{{ format.percent(slashing.slash_fraction_downtime) }}</div>
-            <div class="text-xs">{{ $t('staking.downtime_slashing') }}</div>
-            </span>
-        </div>  
+  <div>
+    <div class="bg-base-100 rounded-lg grid sm:grid-cols-1 md:grid-cols-4 p-4">
+      <div class="flex">
+        <span>
+          <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
+            <Icon class="text-success" icon="mdi:trending-up" size="32" />
+            <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-success"></div>
+          </div>
+        </span>
+        <span>
+          <div class="font-bold">{{ format.percent(mintStore.inflation) }}</div>
+          <div class="text-xs">{{ $t('staking.inflation') }}</div>
+        </span>
+      </div>
+      <div class="flex">
+        <span>
+          <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
+            <Icon class="text-primary" icon="mdi:lock-open-outline" size="32" />
+            <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-primary"></div>
+          </div>
+        </span>
+        <span>
+          <div class="font-bold">{{ formatSeconds(staking.params?.unbonding_time) }}</div>
+          <div class="text-xs">{{ $t('staking.unbonding_time') }}</div>
+        </span>
+      </div>
+      <div class="flex">
+        <span>
+          <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
+            <Icon class="text-error" icon="mdi:alert-octagon-outline" size="32" />
+            <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-error"></div>
+          </div>
+        </span>
+        <span>
+          <div class="font-bold">{{ format.percent(slashing.slash_fraction_double_sign) }}</div>
+          <div class="text-xs">{{ $t('staking.double_sign_slashing') }}</div>
+        </span>
+      </div>
+      <div class="flex">
+        <span>
+          <div class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center mr-2">
+            <Icon class="text-error" icon="mdi:pause" size="32" />
+            <div class="absolute top-0 left-0 bottom-0 right-0 opacity-20 bg-error"></div>
+          </div>
+        </span>
+        <span>
+          <div class="font-bold">{{ format.percent(slashing.slash_fraction_downtime) }}</div>
+          <div class="text-xs">{{ $t('staking.downtime_slashing') }}</div>
+        </span>
+      </div>
     </div>
 
     <div>
-        <div class="flex items-center justify-between py-1">
-            <div class="tabs tabs-boxed bg-transparent">
-                <a
-                    class="tab text-gray-400"
-                    :class="{ 'tab-active': tab === 'featured' }"
-                    @click="tab = 'featured'"
-                    >{{ $t('staking.popular') }}</a
-                >
-                <a
-                    class="tab text-gray-400"
-                    :class="{ 'tab-active': tab === 'active' }"
-                    @click="tab = 'active'"
-                    >{{ $t('staking.active') }}</a
-                >
-                <a
-                    class="tab text-gray-400"
-                    :class="{ 'tab-active': tab === 'inactive' }"
-                    @click="tab = 'inactive'"
-                    >{{ $t('staking.inactive') }}</a
-                >
-            </div>
-
-            <div class="text-lg font-semibold">
-                {{ list.length }}/{{ staking.params.max_validators }}
-            </div>
+      <div class="flex items-center justify-between py-1">
+        <div class="tabs tabs-boxed bg-transparent">
+          <a class="tab text-gray-400" :class="{ 'tab-active': tab === 'featured' }" @click="tab = 'featured'">{{
+            $t('staking.popular')
+          }}</a>
+          <a class="tab text-gray-400" :class="{ 'tab-active': tab === 'active' }" @click="tab = 'active'">{{
+            $t('staking.active')
+          }}</a>
+          <a class="tab text-gray-400" :class="{ 'tab-active': tab === 'inactive' }" @click="tab = 'inactive'">{{
+            $t('staking.inactive')
+          }}</a>
         </div>
 
-        <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-            <div class="overflow-x-auto">
-                <table class="table staking-table w-full">
-                    <thead class=" bg-base-200">
-                        <tr>
-                            <th
-                                scope="col"
-                                class="uppercase"
-                                style="width: 3rem; position: relative"
-                            >
-                            {{ $t('staking.rank') }}    
-                            </th>
-                            <th scope="col" class="uppercase">{{ $t('staking.validator') }}</th>
-                            <th scope="col" class="text-right uppercase">{{ $t('staking.voting_power') }}</th>
-                            <th scope="col" class="text-right uppercase">{{ $t('staking.24h_changes') }}</th>
-                            <th scope="col" class="text-right uppercase">{{ $t('staking.commission') }}</th>
-                            <th scope="col" class="text-center uppercase">{{ $t('staking.actions') }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr
-                            v-for="({v, rank, logo}, i) in list"
-                            :key="v.operator_address"
-                            class="hover:bg-gray-100 dark:hover:bg-[#384059]"
+        <div class="text-lg font-semibold">{{ list.length }}/{{ staking.params.max_validators }}</div>
+      </div>
+
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+        <div class="overflow-x-auto">
+          <table class="table staking-table w-full">
+            <thead class="bg-base-200">
+              <tr>
+                <th scope="col" class="uppercase" style="width: 3rem; position: relative">
+                  {{ $t('staking.rank') }}
+                </th>
+                <th scope="col" class="uppercase">{{ $t('staking.validator') }}</th>
+                <th scope="col" class="text-right uppercase">{{ $t('staking.voting_power') }}</th>
+                <th scope="col" class="text-right uppercase">{{ $t('staking.24h_changes') }}</th>
+                <th scope="col" class="text-right uppercase">{{ $t('staking.commission') }}</th>
+                <th scope="col" class="text-center uppercase">{{ $t('staking.actions') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="({ v, rank, logo }, i) in list"
+                :key="v.operator_address"
+                class="hover:bg-gray-100 dark:hover:bg-[#384059]"
+              >
+                <!-- 👉 rank -->
+                <td>
+                  <div class="text-xs truncate relative px-2 py-1 rounded-full w-fit" :class="`text-${rank}`">
+                    <span class="inset-x-0 inset-y-0 opacity-10 absolute" :class="`bg-${rank}`"></span>
+                    {{ i + 1 }}
+                  </div>
+                </td>
+                <!-- 👉 Validator -->
+                <td>
+                  <div class="flex items-center overflow-hidden" style="max-width: 300px">
+                    <div class="avatar mr-4 relative w-8 h-8 rounded-full">
+                      <div class="w-8 h-8 rounded-full bg-gray-400 absolute opacity-10"></div>
+                      <div class="w-8 h-8 rounded-full">
+                        <img
+                          v-if="logo"
+                          :src="logo"
+                          class="object-contain"
+                          @error="
+                            (e) => {
+                              const identity = v.description?.identity;
+                              if (identity) loadAvatar(identity);
+                            }
+                          "
+                        />
+                        <Icon v-else class="text-3xl" :icon="`mdi-help-circle-outline`" />
+                      </div>
+                    </div>
+
+                    <div class="flex flex-col">
+                      <span class="text-sm text-primary dark:invert whitespace-nowrap overflow-hidden">
+                        <RouterLink
+                          :to="{
+                            name: 'chain-staking-validator',
+                            params: {
+                              validator: v.operator_address,
+                            },
+                          }"
+                          class="font-weight-medium"
                         >
-                            <!-- 👉 rank -->
-                            <td>
-                                <div
-                                    class="text-xs truncate relative px-2 py-1 rounded-full w-fit"
-                                    :class="`text-${rank}`"
-                                >
-                                    <span
-                                        class="inset-x-0 inset-y-0 opacity-10 absolute"
-                                        :class="`bg-${rank}`"
-                                    ></span>
-                                    {{ i + 1 }}
-                                </div>
-                            </td>
-                            <!-- 👉 Validator -->
-                            <td>
-                                <div
-                                    class="flex items-center overflow-hidden"
-                                    style="max-width: 300px"
-                                >
-                                    <div
-                                        class="avatar mr-4 relative w-8 h-8 rounded-full"
-                                    >
-                                        <div
-                                            class="w-8 h-8 rounded-full bg-gray-400 absolute opacity-10"
-                                        ></div>
-                                        <div class="w-8 h-8 rounded-full">
-                                            <img
-                                                v-if="logo"
-                                                :src="logo"
-                                                class="object-contain"
-                                                @error="
-                                                    (e) => {
-                                                        const identity = v.description?.identity;
-                                                        if (identity) loadAvatar(identity);
-                                                    }
-                                                "
-                                            />
-                                            <Icon
-                                                v-else
-                                                class="text-3xl"
-                                                :icon="`mdi-help-circle-outline`"
-                                            />
-                                            
-                                        </div>
-                                    </div>
+                          {{ v.description?.moniker }}
+                        </RouterLink>
+                      </span>
+                      <span class="text-xs">{{ v.description?.website || v.description?.identity || '-' }}</span>
+                    </div>
+                  </div>
+                </td>
 
-                                    <div class="flex flex-col">
-                                        <span class="text-sm text-primary dark:invert whitespace-nowrap overflow-hidden">
-                                            <RouterLink
-                                                :to="{
-                                                    name: 'chain-staking-validator',
-                                                    params: {
-                                                        validator:
-                                                            v.operator_address,
-                                                    },
-                                                }"
-                                                class="font-weight-medium"
-                                            >
-                                                {{ v.description?.moniker }}
-                                            </RouterLink>
-                                        </span>
-                                        <span class="text-xs">{{
-                                            v.description?.website ||
-                                            v.description?.identity ||
-                                            '-'
-                                        }}</span>
-                                    </div>
-                                </div>
-                            </td>
-
-                            <!-- 👉 Voting Power -->
-                            <td class="text-right">
-                                <div class="flex flex-col">
-                                    <h6 class="text-sm font-weight-medium whitespace-nowrap ">
-                                        {{
-                                            format.formatToken(
-                                                {
-                                                    amount: parseInt(
-                                                        v.tokens
-                                                    ).toString(),
-                                                    denom: staking.params
-                                                        .bond_denom,
-                                                },
-                                                true,
-                                                '0,0'
-                                            )
-                                        }}
-                                    </h6>
-                                    <span class="text-xs">{{
-                                        format.calculatePercent(
-                                            v.delegator_shares,
-                                            staking.totalPower
-                                        )
-                                    }}</span>
-                                </div>
-                            </td>
-                            <!-- 👉 24h Changes -->
-                            <td
-                                class="text-right text-xs"
-                                :class="change24Color(v)"
-                            >
-                                {{ change24Text(v) }}
-                            </td>
-                            <!-- 👉 commission -->
-                            <td class="text-right text-xs">
-                                {{
-                                    format.formatCommissionRate(
-                                        v.commission?.commission_rates?.rate
-                                    )
-                                }}
-                            </td>
-                            <!-- 👉 Action -->
-                            <td class="text-center">
-                                <div
-                                    v-if="v.jailed"
-                                    class="badge badge-error gap-2 text-white"
-                                >
-                                {{ $t('staking.jailed') }}
-                                </div>
-                                <label
-                                    v-else
-                                    for="delegate"
-                                    class="btn btn-xs btn-primary rounded-sm capitalize"
-                                    @click="
-                                        dialog.open('delegate', {
-                                            validator_address:
-                                                v.operator_address,
-                                        })
-                                    "
-                                    >{{ $t('account.btn_delegate') }}</label
-                                >
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <div class="divider"></div>
-            <div class="flex flex-row items-center">
-                <div
-                    class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-error mr-2"
-                >
-                    <span
-                        class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
-                    ></span>
-                    {{ $t('staking.top') }} 33%
-                </div>
-                <div
-                    class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-warning"
-                >
-                    <span
-                        class="inset-x-0 inset-y-0 opacity-10 absolute bg-warning"
-                    ></span>
-                    {{ $t('staking.top') }} 67%
-                </div>
-                <div class="text-xs hidden md:!block pl-2">
-                    {{ $t('staking.description') }}
-                </div>
-            </div>
+                <!-- 👉 Voting Power -->
+                <td class="text-right">
+                  <div class="flex flex-col">
+                    <h6 class="text-sm font-weight-medium whitespace-nowrap">
+                      {{
+                        format.formatToken(
+                          {
+                            amount: parseInt(v.tokens).toString(),
+                            denom: staking.params.bond_denom,
+                          },
+                          true,
+                          '0,0'
+                        )
+                      }}
+                    </h6>
+                    <span class="text-xs">{{ format.calculatePercent(v.delegator_shares, staking.totalPower) }}</span>
+                  </div>
+                </td>
+                <!-- 👉 24h Changes -->
+                <td class="text-right text-xs" :class="change24Color(v)">
+                  {{ change24Text(v) }}
+                </td>
+                <!-- 👉 commission -->
+                <td class="text-right text-xs">
+                  {{ format.formatCommissionRate(v.commission?.commission_rates?.rate) }}
+                </td>
+                <!-- 👉 Action -->
+                <td class="text-center">
+                  <div v-if="v.jailed" class="badge badge-error gap-2 text-white">
+                    {{ $t('staking.jailed') }}
+                  </div>
+                  <label
+                    v-else
+                    for="delegate"
+                    class="btn btn-xs btn-primary rounded-sm capitalize"
+                    @click="
+                      dialog.open('delegate', {
+                        validator_address: v.operator_address,
+                      })
+                    "
+                    >{{ $t('account.btn_delegate') }}</label
+                  >
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+
+        <div class="divider"></div>
+        <div class="flex flex-row items-center">
+          <div class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-error mr-2">
+            <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"></span>
+            {{ $t('staking.top') }} 33%
+          </div>
+          <div class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-warning">
+            <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-warning"></span>
+            {{ $t('staking.top') }} 67%
+          </div>
+          <div class="text-xs hidden md:!block pl-2">
+            {{ $t('staking.description') }}
+          </div>
+        </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <route>
@@ -503,7 +433,7 @@ loadAvatars();
 
 <style>
 .staking-table.table :where(th, td) {
-    padding: 8px 5px;
-    background: transparent;
+  padding: 8px 5px;
+  background: transparent;
 }
 </style>
diff --git a/src/modules/[chain]/statesync/index.vue b/src/modules/[chain]/statesync/index.vue
index 3878ede2..2acfb196 100644
--- a/src/modules/[chain]/statesync/index.vue
+++ b/src/modules/[chain]/statesync/index.vue
@@ -10,24 +10,22 @@ const blockchain = useBlockchain();
 const base = useBaseStore();
 const nodeInfo = ref({} as NodeInfo);
 
-const height = ref(0)
-const hash = ref("")
+const height = ref(0);
+const hash = ref('');
 
 base.$subscribe((m, { latest }) => {
-  let h = Number(latest.block?.header?.height)
-  h = Math.round((h - 2000) / 1000) * 1000
+  let h = Number(latest.block?.header?.height);
+  h = Math.round((h - 2000) / 1000) * 1000;
   if (h > height.value) {
-    height.value = h
-    base.fetchBlock(h).then(res => {
-      hash.value = toHex(fromBase64(res.block_id.hash)).toUpperCase()
-    })
+    height.value = h;
+    base.fetchBlock(h).then((res) => {
+      hash.value = toHex(fromBase64(res.block_id.hash)).toUpperCase();
+    });
   }
-})
+});
 
 const rpcs = computed(() => {
-  return blockchain.current?.endpoints?.rpc
-    ?.map((x) => x.address)
-    .join(',');
+  return blockchain.current?.endpoints?.rpc?.map((x) => x.address).join(',');
 });
 
 const appName = computed(() => {
@@ -46,10 +44,10 @@ onMounted(() => {
       <h2 class="card-title truncate mb-2">{{ $t('statesync.title') }}</h2>
       <div class="text-sm">
         {{ $t('statesync.description') }}
-        <a class="text-primary lowercase" href="https://blog.cosmos.network/cosmos-sdk-state-sync-guide-99e4cf43be2f">{{
-          $t('statesync.here') }}&nbsp;</a>
-        <a class="lowercase">
-          {{ $t('statesync.for_more_info') }}.</a>
+        <a class="text-primary lowercase" href="https://blog.cosmos.network/cosmos-sdk-state-sync-guide-99e4cf43be2f"
+          >{{ $t('statesync.here') }}&nbsp;</a
+        >
+        <a class="lowercase"> {{ $t('statesync.for_more_info') }}.</a>
       </div>
     </div>
 
@@ -65,8 +63,7 @@ onMounted(() => {
         <br />
         <br />
         2. {{ $t('statesync.text_2') }}<br />
-        {{ $t('statesync.text_2_1') }}.
-        <br /><br />
+        {{ $t('statesync.text_2_1') }}. <br /><br />
         <div class="mockup-code bg-base-200 my-2">
           <pre data-prefix=">"><code class="text-gray-800 dark:invert">[state-sync]</code></pre>
           <pre data-prefix=">"><code class="text-gray-800 dark:invert">enable = true</code></pre>
@@ -79,13 +76,14 @@ onMounted(() => {
           <pre data-prefix=">"><code class="text-gray-800 dark:invert">trust_period = "168h"</code></pre>
         </div>
         <br />
-        3. {{ $t('statesync.text_3') }}: <code
-          class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} start</code>
+        3. {{ $t('statesync.text_3') }}:
+        <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} start</code>
         <br />
         {{ $t('statesync.text_3_1') }}
         <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} unsafe-reset-all</code> or
-        <code
-          class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} tendermint unsafe-reset-all --home ~/.HOME</code>
+        <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow"
+          >{{ appName }} tendermint unsafe-reset-all --home ~/.HOME</code
+        >
         {{ $t('statesync.text_3_2') }}.
       </div>
     </div>
@@ -98,13 +96,16 @@ onMounted(() => {
         <div class="mockup-code bg-base-200 my-2">
           <pre data-prefix=">"><code class="text-gray-800 dark:invert">[state-sync]</code></pre>
           <pre
-            data-prefix=">"><code class="text-green-400"># snapshot-interval specifies the block interval at which local state sync snapshots are</code></pre>
+            data-prefix=">"
+          ><code class="text-green-400"># snapshot-interval specifies the block interval at which local state sync snapshots are</code></pre>
           <pre
-            data-prefix=">"><code class="text-green-400"># taken (0 to disable). Must be a multiple of pruning-keep-every.</code></pre>
+            data-prefix=">"
+          ><code class="text-green-400"># taken (0 to disable). Must be a multiple of pruning-keep-every.</code></pre>
           <pre data-prefix=">"><code class="text-gray-800 dark:invert">snapshot-interval = 1000</code></pre>
           <pre data-prefix=">"><code class="text-gray-800 dark:invert"></code></pre>
           <pre
-            data-prefix=">"><code class="text-green-400"># snapshot-keep-recent specifies the number of recent snapshots to keep and serve (0 to keep all). Each snapshot is about 500MiB</code></pre>
+            data-prefix=">"
+          ><code class="text-green-400"># snapshot-keep-recent specifies the number of recent snapshots to keep and serve (0 to keep all). Each snapshot is about 500MiB</code></pre>
           <pre data-prefix=">"><code class="text-gray-800 dark:invert">snapshot-keep-recent = 2</code></pre>
         </div>
       </div>
diff --git a/src/modules/[chain]/supply/index.vue b/src/modules/[chain]/supply/index.vue
index 85644f57..cb3339e8 100644
--- a/src/modules/[chain]/supply/index.vue
+++ b/src/modules/[chain]/supply/index.vue
@@ -3,74 +3,75 @@ import { ref } from '@vue/reactivity';
 import { useBlockchain, useFormatter } from '@/stores';
 import { PageRequest, type Pagination, type Coin, type DenomMetadata } from '@/types';
 import { onMounted } from 'vue';
-import type { Asset } from '@ping-pub/chain-registry-client/dist/types'
+import type { Asset } from '@ping-pub/chain-registry-client/dist/types';
 import PaginationBar from '@/components/PaginationBar.vue';
 const props = defineProps(['chain']);
 
 const format = useFormatter();
 const chainStore = useBlockchain();
 
-const list = ref([] as ({ denom: string, amount: string, base: string, info: string, logo: string | undefined })[])
+const list = ref([] as { denom: string; amount: string; base: string; info: string; logo: string | undefined }[]);
 
-const pageRequest = ref(new PageRequest())
-const pageResponse = ref({} as Pagination)
+const pageRequest = ref(new PageRequest());
+const pageResponse = ref({} as Pagination);
 
 interface SupplyAsset extends Asset {
-  logo: string | undefined
+  logo: string | undefined;
 }
 
 onMounted(() => {
-  pageload(1)
+  pageload(1);
 });
 
 function findGlobalAssetConfig(denom: string) {
-  const assets = chainStore.current?.assets
+  const assets = chainStore.current?.assets;
   if (assets) {
-    const conf = assets.find(a => a.base === denom)
+    const conf = assets.find((a) => a.base === denom);
     if (conf) {
-      return conf
+      return conf;
     }
   }
-  return undefined
+  return undefined;
 }
 
 async function mergeDenomMetadata(denom: string, denomsMetadatas: DenomMetadata[]): Promise<SupplyAsset> {
-  const denomMetadata = denomsMetadatas.find(d => d.base.endsWith(denom));
-  let asset = findGlobalAssetConfig(denom) as SupplyAsset
+  const denomMetadata = denomsMetadatas.find((d) => d.base.endsWith(denom));
+  let asset = findGlobalAssetConfig(denom) as SupplyAsset;
   if (asset && denomMetadata) {
-    asset = { ...denomMetadata, ...asset }
-    asset.display = denomMetadata.display
-    asset.logo = asset.logo_URIs?.svg || asset.logo_URIs?.png || asset.logo_URIs?.jpeg || undefined
+    asset = { ...denomMetadata, ...asset };
+    asset.display = denomMetadata.display;
+    asset.logo = asset.logo_URIs?.svg || asset.logo_URIs?.png || asset.logo_URIs?.jpeg || undefined;
   } else if (denomMetadata) {
-    return denomMetadata as SupplyAsset
+    return denomMetadata as SupplyAsset;
   }
   return asset;
 }
 
 function pageload(p: number) {
-  pageRequest.value.setPage(p)
+  pageRequest.value.setPage(p);
   chainStore.rpc.getBankDenomMetadata().then(async (denomsMetaResponse) => {
     const bankSupplyResponse = await chainStore.rpc.getBankSupply(pageRequest.value);
-    list.value = await Promise.all(bankSupplyResponse.supply.map(async (coin: Coin) => {
-      const asset = await mergeDenomMetadata(coin.denom, denomsMetaResponse.metadatas)
-      const denom = (asset?.symbol || coin.denom)
-      return {
-        denom: denom.split('/')[denom.split('/').length - 1].toUpperCase(),
-        amount: format.tokenAmountNumber({ amount: coin.amount, denom: denom }).toString(),
-        base: asset.base || coin.denom,
-        info: asset.display || coin.denom,
-        logo: asset?.logo_URIs?.svg || asset?.logo_URIs?.png || asset?.logo_URIs?.jpeg || "/logo.svg",
-      }
-    }));
-    pageResponse.value = bankSupplyResponse.pagination
-  })
+    list.value = await Promise.all(
+      bankSupplyResponse.supply.map(async (coin: Coin) => {
+        const asset = await mergeDenomMetadata(coin.denom, denomsMetaResponse.metadatas);
+        const denom = asset?.symbol || coin.denom;
+        return {
+          denom: denom.split('/')[denom.split('/').length - 1].toUpperCase(),
+          amount: format.tokenAmountNumber({ amount: coin.amount, denom: denom }).toString(),
+          base: asset.base || coin.denom,
+          info: asset.display || coin.denom,
+          logo: asset?.logo_URIs?.svg || asset?.logo_URIs?.png || asset?.logo_URIs?.jpeg || '/logo.svg',
+        };
+      })
+    );
+    pageResponse.value = bankSupplyResponse.pagination;
+  });
 }
-
 </script>
 <template>
   <div class="overflow-auto bg-base-100">
     <table class="table table-compact">
-      <thead class=" bg-base-200">
+      <thead class="bg-base-200">
         <tr>
           <td>Logo</td>
           <td>Token</td>
diff --git a/src/modules/[chain]/tx/[hash].vue b/src/modules/[chain]/tx/[hash].vue
index 4a9bb4bc..89d89e94 100644
--- a/src/modules/[chain]/tx/[hash].vue
+++ b/src/modules/[chain]/tx/[hash].vue
@@ -4,9 +4,9 @@ import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
 import { computed, ref } from '@vue/reactivity';
 import type { Tx, TxResponse } from '@/types';
 
-import { JsonViewer } from "vue3-json-viewer"
+import { JsonViewer } from 'vue3-json-viewer';
 // if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
-import "vue3-json-viewer/dist/index.css";
+import 'vue3-json-viewer/dist/index.css';
 
 const props = defineProps(['hash', 'chain']);
 
@@ -14,117 +14,119 @@ const blockchain = useBlockchain();
 const baseStore = useBaseStore();
 const format = useFormatter();
 const tx = ref(
-    {} as {
-        tx: Tx;
-        tx_response: TxResponse;
-    }
+  {} as {
+    tx: Tx;
+    tx_response: TxResponse;
+  }
 );
 if (props.hash) {
-    blockchain.rpc.getTx(props.hash).then((x) => (tx.value = x));
+  blockchain.rpc.getTx(props.hash).then((x) => (tx.value = x));
 }
 const messages = computed(() => {
-    return tx.value.tx?.body?.messages.map(x=> {
-        if(x.packet?.data) {
-            // @ts-ignore
-            x.message = format.base64ToString(x.packet.data)
-        }
-        return x
-    }) || [];
+  return (
+    tx.value.tx?.body?.messages.map((x) => {
+      if (x.packet?.data) {
+        // @ts-ignore
+        x.message = format.base64ToString(x.packet.data);
+      }
+      return x;
+    }) || []
+  );
 });
 </script>
 <template>
-    <div>
-        <div class="tabs tabs-boxed bg-transparent mb-4">
-            <RouterLink class="tab text-gray-400 uppercase" 
-                :to="`/${chain}/tx/?tab=recent`"
-                >{{ $t('block.recent') }}</RouterLink>
-            <RouterLink class="tab text-gray-400 uppercase" 
-                :to="`/${chain}/tx/?tab=search`"
-                >Search</RouterLink>
-            <a class="tab text-gray-400 uppercase tab-active">Transaction</a>
-        </div>
-
-        <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4">
-            <h2 class="card-title truncate mb-2">{{ $t('tx.title') }}</h2>
-            <div class="overflow-hidden">
-                <table class="table text-sm">
-                    <tbody>
-                        <tr>
-                            <td>{{ $t('tx.tx_hash') }}</td>
-                            <td class="overflow-hidden">{{ tx.tx_response.txhash }}</td>
-                        </tr>
-                        <tr>
-                            <td>{{ $t('account.height') }}</td>
-                            <td>
-                                <RouterLink :to="`/${props.chain}/block/${tx.tx_response.height}`" class="text-primary dark:invert">{{ tx.tx_response.height
-                                }}
-                                </RouterLink>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ $t('staking.status') }}</td>
-                            <td>
-                                <span class="text-xs truncate relative py-2 px-4 w-fit mr-2 rounded" :class="`text-${tx.tx_response.code === 0 ? 'success' : 'error'
-                                    }`">
-                                    <span class="inset-x-0 inset-y-0 opacity-10 absolute" :class="`bg-${tx.tx_response.code === 0 ? 'success' : 'error'
-                                        }`"></span>
-                                    {{ tx.tx_response.code === 0 ? 'Success' : 'Failed' }}
-                                </span>
-                                <span>
-                                    {{ tx.tx_response.code === 0 ? '' : tx?.tx_response?.raw_log }}
-                                </span>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ $t('account.time') }}</td>
-                            <td>
-                                {{ format.toLocaleDate(tx.tx_response.timestamp) }} ({{
-                                    format.toDay(tx.tx_response.timestamp, 'from')
-                                }})
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ $t('tx.gas') }}</td>
-                            <td>
-                                {{ tx.tx_response.gas_used }} / {{ tx.tx_response.gas_wanted }}
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ $t('tx.fee') }}</td>
-                            <td>
-                                {{
-                                    format.formatTokens(
-                                        tx.tx?.auth_info?.fee?.amount,
-                                        true,
-                                        '0,0.[00]'
-                                    )
-                                }}
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>{{ $t('tx.memo') }}</td>
-                            <td>{{ tx.tx.body.memo }}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4">
-            <h2 class="card-title truncate mb-2">
-                {{ $t('account.messages') }}: ({{ messages.length }})
-            </h2>
-            <div v-for="(msg, i) in messages">
-                <div class="border border-slate-400 rounded-md mt-4">
-                    <DynamicComponent :value="msg" />
-                </div>
-            </div>
-            <div v-if="messages.length === 0">{{ $t('tx.no_messages') }}</div>
-        </div>
-
-        <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-            <h2 class="card-title truncate mb-2">JSON</h2>
-            <JsonViewer :value="tx" :theme="baseStore.theme" style="background: transparent;" copyable boxed sort expand-depth="5"/>
-        </div>
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <RouterLink class="tab text-gray-400 uppercase" :to="`/${chain}/tx/?tab=recent`">{{
+        $t('block.recent')
+      }}</RouterLink>
+      <RouterLink class="tab text-gray-400 uppercase" :to="`/${chain}/tx/?tab=search`">Search</RouterLink>
+      <a class="tab text-gray-400 uppercase tab-active">Transaction</a>
     </div>
+
+    <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4">
+      <h2 class="card-title truncate mb-2">{{ $t('tx.title') }}</h2>
+      <div class="overflow-hidden">
+        <table class="table text-sm">
+          <tbody>
+            <tr>
+              <td>{{ $t('tx.tx_hash') }}</td>
+              <td class="overflow-hidden">{{ tx.tx_response.txhash }}</td>
+            </tr>
+            <tr>
+              <td>{{ $t('account.height') }}</td>
+              <td>
+                <RouterLink :to="`/${props.chain}/block/${tx.tx_response.height}`" class="text-primary dark:invert"
+                  >{{ tx.tx_response.height }}
+                </RouterLink>
+              </td>
+            </tr>
+            <tr>
+              <td>{{ $t('staking.status') }}</td>
+              <td>
+                <span
+                  class="text-xs truncate relative py-2 px-4 w-fit mr-2 rounded"
+                  :class="`text-${tx.tx_response.code === 0 ? 'success' : 'error'}`"
+                >
+                  <span
+                    class="inset-x-0 inset-y-0 opacity-10 absolute"
+                    :class="`bg-${tx.tx_response.code === 0 ? 'success' : 'error'}`"
+                  ></span>
+                  {{ tx.tx_response.code === 0 ? 'Success' : 'Failed' }}
+                </span>
+                <span>
+                  {{ tx.tx_response.code === 0 ? '' : tx?.tx_response?.raw_log }}
+                </span>
+              </td>
+            </tr>
+            <tr>
+              <td>{{ $t('account.time') }}</td>
+              <td>
+                {{ format.toLocaleDate(tx.tx_response.timestamp) }} ({{
+                  format.toDay(tx.tx_response.timestamp, 'from')
+                }})
+              </td>
+            </tr>
+            <tr>
+              <td>{{ $t('tx.gas') }}</td>
+              <td>{{ tx.tx_response.gas_used }} / {{ tx.tx_response.gas_wanted }}</td>
+            </tr>
+            <tr>
+              <td>{{ $t('tx.fee') }}</td>
+              <td>
+                {{ format.formatTokens(tx.tx?.auth_info?.fee?.amount, true, '0,0.[00]') }}
+              </td>
+            </tr>
+            <tr>
+              <td>{{ $t('tx.memo') }}</td>
+              <td>{{ tx.tx.body.memo }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4">
+      <h2 class="card-title truncate mb-2">{{ $t('account.messages') }}: ({{ messages.length }})</h2>
+      <div v-for="(msg, i) in messages">
+        <div class="border border-slate-400 rounded-md mt-4">
+          <DynamicComponent :value="msg" />
+        </div>
+      </div>
+      <div v-if="messages.length === 0">{{ $t('tx.no_messages') }}</div>
+    </div>
+
+    <div v-if="tx.tx_response" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+      <h2 class="card-title truncate mb-2">JSON</h2>
+      <JsonViewer
+        :value="tx"
+        :theme="baseStore.theme"
+        style="background: transparent"
+        copyable
+        boxed
+        sort
+        expand-depth="5"
+      />
+    </div>
+  </div>
 </template>
diff --git a/src/modules/[chain]/tx/index.vue b/src/modules/[chain]/tx/index.vue
index 06c19112..fe8813a2 100644
--- a/src/modules/[chain]/tx/index.vue
+++ b/src/modules/[chain]/tx/index.vue
@@ -8,80 +8,94 @@ const props = defineProps(['chain']);
 const vueRouters = useRouter();
 const tab = ref('recent');
 
-const base = useBaseStore()
-const chainStore = useBlockchain()
+const base = useBaseStore();
+const chainStore = useBlockchain();
 
 const format = useFormatter();
 const hashReg = /^[A-Z\d]{64}$/;
 const hash = ref('');
 const current = chainStore?.current?.chainName || '';
 onMounted(() => {
-    tab.value = String(vueRouters.currentRoute.value.query.tab || 'recent');
-    console.log(tab.value);
+  tab.value = String(vueRouters.currentRoute.value.query.tab || 'recent');
+  console.log(tab.value);
 });
 function search() {
-    if (hashReg.test(hash.value)) {
-      vueRouters.push({ path: `/${current}/tx/${hash.value}` });
-    }
+  if (hashReg.test(hash.value)) {
+    vueRouters.push({ path: `/${current}/tx/${hash.value}` });
+  }
 }
 </script>
 <template>
-    <div>
-        <div class="tabs tabs-boxed bg-transparent mb-4">
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'recent' }"
-                @click="tab = 'recent'">{{ $t('block.recent') }}</a>
-            <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'search' }"
-                @click="tab = 'search'">Search</a>
-        </div>
-
-        <div v-show="tab === 'recent'" class="bg-base-100 rounded overflow-x-auto">
-            <table class="table w-full table-compact">
-                <thead class="bg-base-200">
-                    <tr>
-                        <th style="position: relative; z-index: 2;">{{ $t('account.height') }}</th>
-                        <th style="position: relative; z-index: 2;">{{ $t('account.hash') }}</th>
-                        <th>{{ $t('account.messages') }}</th>
-                        <th>{{ $t('block.fees') }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(item, index) in base.txsInRecents" :index="index" class="hover">
-                        <td class="text-sm text-primary">
-                            <RouterLink :to="`/${props.chain}/block/${item.height}`">{{ item.height }}</RouterLink>
-                        </td>
-                        <td class="truncate text-primary" width="50%">
-                            <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
-                item.hash
-            }}</RouterLink>
-                        </td>
-                        <td>{{ format.messages(item.tx.body.messages) }}</td>
-                        <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
-                    </tr>
-                </tbody>
-            </table>
-            <div class="p-4">
-                <div class="alert relative bg-transparent">
-                    <div class="alert  absolute inset-x-0 inset-y-0 w-full h-full bg-info opacity-10"></div>
-                    <div class="text-info flex gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                            class="stroke-current flex-shrink-0 w-6 h-6">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                        <span>{{ $t('block.only_tx') }}</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div v-show="tab === 'search'" class="bg-base-100 rounded overflow-x-auto">
-            <div class="p-4">
-                <div class="form-control">
-                    <input v-model="hash" type="text" class="input input-bordered" placeholder="Search by Tx Hash" @blur="search"/>
-                </div>
-            </div>
-        </div>
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'recent' }" @click="tab = 'recent'">{{
+        $t('block.recent')
+      }}</a>
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'search' }" @click="tab = 'search'"
+        >Search</a
+      >
     </div>
+
+    <div v-show="tab === 'recent'" class="bg-base-100 rounded overflow-x-auto">
+      <table class="table w-full table-compact">
+        <thead class="bg-base-200">
+          <tr>
+            <th style="position: relative; z-index: 2">{{ $t('account.height') }}</th>
+            <th style="position: relative; z-index: 2">{{ $t('account.hash') }}</th>
+            <th>{{ $t('account.messages') }}</th>
+            <th>{{ $t('block.fees') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in base.txsInRecents" :index="index" class="hover">
+            <td class="text-sm text-primary">
+              <RouterLink :to="`/${props.chain}/block/${item.height}`">{{ item.height }}</RouterLink>
+            </td>
+            <td class="truncate text-primary" width="50%">
+              <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{ item.hash }}</RouterLink>
+            </td>
+            <td>{{ format.messages(item.tx.body.messages) }}</td>
+            <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="p-4">
+        <div class="alert relative bg-transparent">
+          <div class="alert absolute inset-x-0 inset-y-0 w-full h-full bg-info opacity-10"></div>
+          <div class="text-info flex gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              class="stroke-current flex-shrink-0 w-6 h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              ></path>
+            </svg>
+            <span>{{ $t('block.only_tx') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-show="tab === 'search'" class="bg-base-100 rounded overflow-x-auto">
+      <div class="p-4">
+        <div class="form-control">
+          <input
+            v-model="hash"
+            type="text"
+            class="input input-bordered"
+            placeholder="Search by Tx Hash"
+            @blur="search"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <route>
diff --git a/src/modules/[chain]/uptime/customize.vue b/src/modules/[chain]/uptime/customize.vue
index 90c3b804..e4f19b72 100644
--- a/src/modules/[chain]/uptime/customize.vue
+++ b/src/modules/[chain]/uptime/customize.vue
@@ -2,13 +2,7 @@
 import { ref, onMounted, computed, watchEffect } from 'vue';
 import { fromHex, toBase64 } from '@cosmjs/encoding';
 import { Icon } from '@iconify/vue';
-import {
-  useFormatter,
-  useStakingStore,
-  useBaseStore,
-  useBlockchain,
-useDashboard,
-} from '@/stores';
+import { useFormatter, useStakingStore, useBaseStore, useBlockchain, useDashboard } from '@/stores';
 import UptimeBar from '@/components/UptimeBar.vue';
 import type { Block, Commit } from '@/types';
 import { consensusPubkeyToHexAddress, valconsToBase64 } from '@/libs';
@@ -20,106 +14,110 @@ const props = defineProps(['chain']);
 const stakingStore = useStakingStore();
 const format = useFormatter();
 const chainStore = useBlockchain();
-const dashboard = useDashboard()
+const dashboard = useDashboard();
 // storage local favorite validator ids
-const local = ref(JSON.parse(localStorage.getItem('uptime-validators') || '{}') as Record<string, {name: string, address: string}[]>)
+const local = ref(
+  JSON.parse(localStorage.getItem('uptime-validators') || '{}') as Record<string, { name: string; address: string }[]>
+);
 const signingInfo = ref({} as Record<string, SigningInfo[]>);
-const selected = ref([] as string[])
-const selectChain = ref(chainStore.chainName)
-const validators = ref(stakingStore.validators)
-const keyword = ref("")
+const selected = ref([] as string[]);
+const selectChain = ref(chainStore.chainName);
+const validators = ref(stakingStore.validators);
+const keyword = ref('');
 
 function loadSigningInfo(chainName: string) {
-  const chain = dashboard.chains[chainName]
-  if(chain && chain.endpoints.rest) {
-    const client = CosmosRestClient.newDefault(chain.endpoints.rest[0].address)
-    client.getSlashingSigningInfos().then( resp => {
-      signingInfo.value[chainName] = resp.info
-    })
+  const chain = dashboard.chains[chainName];
+  if (chain && chain.endpoints.rest) {
+    const client = CosmosRestClient.newDefault(chain.endpoints.rest[0].address);
+    client.getSlashingSigningInfos().then((resp) => {
+      signingInfo.value[chainName] = resp.info;
+    });
   }
 }
-if(local.value) Object.keys(local.value).map(chainName => {
-  loadSigningInfo(chainName)
-})
+if (local.value)
+  Object.keys(local.value).map((chainName) => {
+    loadSigningInfo(chainName);
+  });
 
 function initial() {
-  const vals = local.value[selectChain.value]
-  if(vals) {
-    selected.value = vals.map(x => x.address)
+  const vals = local.value[selectChain.value];
+  if (vals) {
+    selected.value = vals.map((x) => x.address);
   }
 }
 
 const filterValidators = computed(() => {
-  if(keyword.value) {
-    return validators.value.filter(x => x.description.moniker.indexOf(keyword.value) > -1)
+  if (keyword.value) {
+    return validators.value.filter((x) => x.description.moniker.indexOf(keyword.value) > -1);
   }
-  return validators.value
-})
+  return validators.value;
+});
 
 const list = computed(() => {
-  const list = [] as any[]
-  if(local.value) Object.keys(local.value).map( chainName => {
-    const vals = local.value[chainName]
-    const info = signingInfo.value[chainName]
-    if(vals && info) {
-      vals.forEach(v => {
-        const sigingInfo = info.find(x => valconsToBase64(x.address) === v.address)
-        list.push( {
-          chainName,
-          v,
-          sigingInfo,
-        })
-      })
-    }
-  })
-  return list
-})
+  const list = [] as any[];
+  if (local.value)
+    Object.keys(local.value).map((chainName) => {
+      const vals = local.value[chainName];
+      const info = signingInfo.value[chainName];
+      if (vals && info) {
+        vals.forEach((v) => {
+          const sigingInfo = info.find((x) => valconsToBase64(x.address) === v.address);
+          list.push({
+            chainName,
+            v,
+            sigingInfo,
+          });
+        });
+      }
+    });
+  return list;
+});
 
 function add() {
-  if(!signingInfo.value[selectChain.value]) {
-    loadSigningInfo(selectChain.value)
+  if (!signingInfo.value[selectChain.value]) {
+    loadSigningInfo(selectChain.value);
   }
-  const newList = [] as { name: string; address: string; }[]
-  selected.value.forEach(x => {
-    const validator = validators.value.find(v => (consensusPubkeyToHexAddress(v.consensus_pubkey) === x))
-    if(validator) newList.push({
-      name: validator.description.moniker || x,
-      address: x
-    })
-  })
-  if(!local.value) local.value = {}
-  local.value[selectChain.value] = newList
+  const newList = [] as { name: string; address: string }[];
+  selected.value.forEach((x) => {
+    const validator = validators.value.find((v) => consensusPubkeyToHexAddress(v.consensus_pubkey) === x);
+    if (validator)
+      newList.push({
+        name: validator.description.moniker || x,
+        address: x,
+      });
+  });
+  if (!local.value) local.value = {};
+  local.value[selectChain.value] = newList;
 
-  localStorage.setItem("uptime-validators", JSON.stringify(local.value))
+  localStorage.setItem('uptime-validators', JSON.stringify(local.value));
 }
 
 function changeChain() {
-  validators.value = []
-  const endpoint = dashboard.chains[selectChain.value].endpoints.rest?.at(0)?.address
-  if(!endpoint) return 
+  validators.value = [];
+  const endpoint = dashboard.chains[selectChain.value].endpoints.rest?.at(0)?.address;
+  if (!endpoint) return;
 
-  const client = CosmosRestClient.newDefault(endpoint)
-  client.getStakingValidators("BOND_STATUS_BONDED").then(x => {
-    validators.value = x.validators
-  })
+  const client = CosmosRestClient.newDefault(endpoint);
+  client.getStakingValidators('BOND_STATUS_BONDED').then((x) => {
+    validators.value = x.validators;
+  });
 
-  const vals = local.value[selectChain.value]
-  if(vals) {
-    selected.value = vals.map(x => x.address)
+  const vals = local.value[selectChain.value];
+  if (vals) {
+    selected.value = vals.map((x) => x.address);
   } else {
-    selected.value = []
+    selected.value = [];
   }
 }
 
 function color(v: string) {
-  if(v) {
-    const n = Number(v)
-    if(n < 10) return " badge-success"
-    if(n > 1000) return " badge-error"
-    if(n > 0) return " badge-warning"
+  if (v) {
+    const n = Number(v);
+    if (n < 10) return ' badge-success';
+    if (n > 1000) return ' badge-error';
+    if (n > 0) return ' badge-warning';
   }
 }
-
 </script>
 
 <template>
@@ -127,24 +125,31 @@ function color(v: string) {
     <div class="overflow-x-auto w-full">
       <div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
         <div class="min-w-0 flex-1">
-          <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">{{ $t('uptime.my_validators') }}</h2>
+          <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">
+            {{ $t('uptime.my_validators') }}
+          </h2>
           <div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
             <div class="mt-2 flex items-center text-sm text-gray-500">
-              <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
-                aria-hidden="true">
-                <path fill-rule="evenodd"
-                  d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
-                  clip-rule="evenodd" />
+              <svg
+                class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
                 <path
-                  d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
+                  fill-rule="evenodd"
+                  d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
+                  clip-rule="evenodd"
+                />
+                <path
+                  d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z"
+                />
               </svg>
               {{ $t('uptime.add_validators_monitor') }}
             </div>
           </div>
         </div>
-        <div class="mt-5 flex lg:!ml-4 lg:!mt-0">
-          
-        </div>
+        <div class="mt-5 flex lg:!ml-4 lg:!mt-0"></div>
       </div>
       <table class="table table-compact w-full">
         <thead>
@@ -161,24 +166,36 @@ function color(v: string) {
         </thead>
         <tbody>
           <tr v-for="(v, i) in list" class="hover">
-            <td>{{ i+1 }}</td>
-            <td class=" capitalize">{{ v.chainName }}</td>
+            <td>{{ i + 1 }}</td>
+            <td class="capitalize">{{ v.chainName }}</td>
             <td>{{ v.v.name }}</td>
-            <td><span v-if="v.sigingInfo">{{ Number(v.sigingInfo.index_offset) - Number(v.sigingInfo.start_height) }}</span></td>
+            <td>
+              <span v-if="v.sigingInfo">{{
+                Number(v.sigingInfo.index_offset) - Number(v.sigingInfo.start_height)
+              }}</span>
+            </td>
             <td>
               <div v-if="v.sigingInfo && !v.sigingInfo?.jailed_until.startsWith('1970')" class="text-xs flex flex-wrap">
                 <div class="mt-1">{{ format.toLocaleDate(v.sigingInfo?.jailed_until) }}</div>
                 <div class="badge">{{ format.toDay(v.sigingInfo.jailed_until, 'from') }}</div>
               </div>
             </td>
-            <td class=" capitalize">{{ v.sigingInfo?.tombstoned }}</td>
-            <td><span v-if="v.sigingInfo" class="badge " :class="color( v.sigingInfo?.missed_blocks_counter)">{{ v.sigingInfo?.missed_blocks_counter }}</span></td>
-            <td class=""><RouterLink :to="`/${v.chainName}/uptime/#blocks`" class="btn btn-xs btn-primary">{{ $t('module.blocks') }}</RouterLink></td>
+            <td class="capitalize">{{ v.sigingInfo?.tombstoned }}</td>
+            <td>
+              <span v-if="v.sigingInfo" class="badge" :class="color(v.sigingInfo?.missed_blocks_counter)">{{
+                v.sigingInfo?.missed_blocks_counter
+              }}</span>
+            </td>
+            <td class="">
+              <RouterLink :to="`/${v.chainName}/uptime/#blocks`" class="btn btn-xs btn-primary">{{
+                $t('module.blocks')
+              }}</RouterLink>
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
-    
+
     <div class="text-center">
       <label for="add-validator" class="btn btn-primary mt-5">{{ $t('uptime.add_validators') }}</label>
     </div>
@@ -189,26 +206,40 @@ function color(v: string) {
       <div class="modal-box relative">
         <label for="add-validator" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
         <h3 class="text-lg font-bold">{{ $t('uptime.add_validators') }}</h3>
-          <div class="form-control my-5 border-2">
-            <div class="input-group input-group-md">
+        <div class="form-control my-5 border-2">
+          <div class="input-group input-group-md">
             <select v-model="selectChain" class="select select-bordered capitalize" @change="changeChain">
               <option v-for="v in dashboard.chains" :value="v.chainName">
                 {{ v.chainName }}
               </option>
             </select>
-              <input v-model="keyword" type="text" class="input w-full" placeholder="keywords to filter validator">
-            </div>
+            <input v-model="keyword" type="text" class="input w-full" placeholder="keywords to filter validator" />
           </div>
+        </div>
         <div class="py-4 max-h-60 overflow-y-auto">
-          
           <table class="table table-compact w-full hover">
             <thead>
-              <tr><th>{{ $t('account.validator') }}</th><th></th></tr>
+              <tr>
+                <th>{{ $t('account.validator') }}</th>
+                <th></th>
+              </tr>
             </thead>
             <tbody>
               <tr v-for="(v, i) in filterValidators">
-                <td><label :for="v.operator_address"><div class=" w-full">{{ i+1 }}. {{ v.description.moniker }}</div></label></td>
-                <td><input :id="v.operator_address" v-model="selected" class="checkbox" type="checkbox" :value="consensusPubkeyToHexAddress(v.consensus_pubkey)"/></td>
+                <td>
+                  <label :for="v.operator_address"
+                    ><div class="w-full">{{ i + 1 }}. {{ v.description.moniker }}</div></label
+                  >
+                </td>
+                <td>
+                  <input
+                    :id="v.operator_address"
+                    v-model="selected"
+                    class="checkbox"
+                    type="checkbox"
+                    :value="consensusPubkeyToHexAddress(v.consensus_pubkey)"
+                  />
+                </td>
               </tr>
             </tbody>
           </table>
@@ -221,4 +252,3 @@ function color(v: string) {
     <div class="h-6"></div>
   </div>
 </template>
-
diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
index 852338d6..d473dff4 100644
--- a/src/modules/[chain]/uptime/index.vue
+++ b/src/modules/[chain]/uptime/index.vue
@@ -1,12 +1,7 @@
 <script lang="ts" setup>
 import { ref, onMounted, computed, onUnmounted } from 'vue';
 import { fromHex, toBase64, fromBase64, toHex } from '@cosmjs/encoding';
-import {
-  useStakingStore,
-  useBaseStore,
-  useBlockchain,
-  useFormatter,
-} from '@/stores';
+import { useStakingStore, useBaseStore, useBlockchain, useFormatter } from '@/stores';
 import UptimeBar from '@/components/UptimeBar.vue';
 import type { SlashingParam, SigningInfo, Block } from '@/types';
 import { consensusPubkeyToHexAddress, valconsToBase64 } from '@/libs';
@@ -22,7 +17,7 @@ const keyword = ref('');
 const live = ref(true);
 const slashingParam = ref({} as SlashingParam);
 const signingInfo = ref({} as Record<string, SigningInfo>);
-const consumerValidators = ref([] as {moniker: string, base64: string}[]);
+const consumerValidators = ref([] as { moniker: string; base64: string }[]);
 
 interface BlockColor {
   height: string;
@@ -39,26 +34,30 @@ interface ValidatorUnit {
 }
 
 function padding(blocks: BlockColor[] = []) {
-  const raw = Array(50).fill({ height: "0", color: 'bg-secondary' } as BlockColor).concat(blocks)
+  const raw = Array(50)
+    .fill({ height: '0', color: 'bg-secondary' } as BlockColor)
+    .concat(blocks);
   return raw.slice(raw.length - 50);
 }
 
 const validatorSet = computed(() => {
   if (chainStore.isConsumerChain) {
     return consumerValidators.value.map((v) => {
-      const b64 = valconsToBase64(v.moniker)
-      const moniker = stakingStore.validators.find((x) => toBase64(fromHex(consensusPubkeyToHexAddress(x.consensus_pubkey))) === b64)?.description.moniker;
+      const b64 = valconsToBase64(v.moniker);
+      const moniker = stakingStore.validators.find(
+        (x) => toBase64(fromHex(consensusPubkeyToHexAddress(x.consensus_pubkey))) === b64
+      )?.description.moniker;
       return {
         moniker: moniker || v.moniker,
-        base64: v.base64
+        base64: v.base64,
       };
     });
-  }; 
+  }
   return stakingStore.validators.map((v) => {
-    const hex = consensusPubkeyToHexAddress(v.consensus_pubkey)
+    const hex = consensusPubkeyToHexAddress(v.consensus_pubkey);
     return {
       moniker: v.description.moniker,
-      base64: toBase64(fromHex(hex))
+      base64: toBase64(fromHex(hex)),
     };
   });
 });
@@ -66,34 +65,33 @@ const validatorSet = computed(() => {
 const blockColors = ref({} as Record<string, BlockColor[]>);
 
 const grid = computed(() => {
-
-  const validators = keyword.value.length === 0 ? validatorSet.value :
-    validatorSet.value.filter((v) => v.moniker.toLowerCase().includes(keyword.value.toLowerCase()));
+  const validators =
+    keyword.value.length === 0
+      ? validatorSet.value
+      : validatorSet.value.filter((v) => v.moniker.toLowerCase().includes(keyword.value.toLowerCase()));
 
   const window = Number(slashingParam.value.signed_blocks_window || 0);
   return validators.map((v) => {
     const signing = signingInfo.value[v.base64];
-    const uptime = signing && window > 0
-      ? (window - Number(signing.missed_blocks_counter)) / window
-      : undefined
+    const uptime = signing && window > 0 ? (window - Number(signing.missed_blocks_counter)) / window : undefined;
     return {
       moniker: v.moniker,
       base64: v.base64,
       blocks: padding(blockColors.value[v.base64] || []),
       uptime,
       missed_blocks_counter: signing?.missed_blocks_counter,
-      signing
+      signing,
     } as ValidatorUnit;
-  })
+  });
 });
 
 const preload = ref(false);
 baseStore.$subscribe((_, state) => {
-  const newHeight = Number(state.latest?.block?.header?.height || 0)
+  const newHeight = Number(state.latest?.block?.header?.height || 0);
   if (newHeight > latest.value) {
     latest.value = newHeight;
     // initialize if it's the first time
-    if(!preload.value) {
+    if (!preload.value) {
       preFill();
       preload.value = true;
     }
@@ -101,18 +99,23 @@ baseStore.$subscribe((_, state) => {
     // reset the consumer validators
     if (newHeight > 0 && consumerValidators.value.length === 0) {
       const chain_id = state.latest.block.header.chain_id;
-      Promise.resolve().then(async () =>{
+      Promise.resolve().then(async () => {
         await stakingStore.getConsumerValidators(chain_id).then((x) => {
-        x.validators.sort((a,b) => Number(b.power)-Number(a.power)).forEach(v => {
-          const base64 = toBase64(fromHex(consensusPubkeyToHexAddress({"@type": "/cosmos.crypto.ed25519.PubKey", key: v.consumer_key.ed25519 })));
-          const moniker = v.provider_address;
-          consumerValidators.value.push({ moniker, base64});
+          x.validators
+            .sort((a, b) => Number(b.power) - Number(a.power))
+            .forEach((v) => {
+              const base64 = toBase64(
+                fromHex(
+                  consensusPubkeyToHexAddress({ '@type': '/cosmos.crypto.ed25519.PubKey', key: v.consumer_key.ed25519 })
+                )
+              );
+              const moniker = v.provider_address;
+              consumerValidators.value.push({ moniker, base64 });
+            });
         });
-
       });
-      }) 
     }
-    
+
     if (Number(state.latest.block.header.height) % 7 === 0) updateTotalSigningInfo();
     fillblock(state.latest);
   }
@@ -134,38 +137,38 @@ onMounted(() => {
 });
 
 function preFill() {
-
-  if(latest.value > 50 && baseStore.recents.length >= 49 ) return
+  if (latest.value > 50 && baseStore.recents.length >= 49) return;
   // preload 50 blocks if recent blocks are not enough
   let promise = Promise.resolve();
   for (let i = latest.value - baseStore.recents.length; i > latest.value - 50 && i > 1; i -= 1) {
-    promise = promise.then(() =>
-      new Promise((resolve) => {
-        if (live.value) {
-          // continue only if the page is living
-          if (i > latest.value - 50)
-            baseStore.fetchBlock(i).then((x) => {
-              fillblock(x, 'start');
-              resolve();
-            });
-        }
-      })
+    promise = promise.then(
+      () =>
+        new Promise((resolve) => {
+          if (live.value) {
+            // continue only if the page is living
+            if (i > latest.value - 50)
+              baseStore.fetchBlock(i).then((x) => {
+                fillblock(x, 'start');
+                resolve();
+              });
+          }
+        })
     );
   }
 }
 function fillblock(b: Block, direction: string = 'end') {
   validatorSet.value.forEach((v) => {
-    const sig = b.block.last_commit?.signatures.find((s) => s.validator_address === v.base64)
+    const sig = b.block.last_commit?.signatures.find((s) => s.validator_address === v.base64);
     const block = blockColors.value[v.base64] || [];
     let color = {
       height: b.block.header.height,
-      color: 'bg-red-500'
-    }
+      color: 'bg-red-500',
+    };
     if (sig) {
       color = {
         height: b.block.header.height,
-        color: sig.block_id_flag === 'BLOCK_ID_FLAG_COMMIT' ? 'bg-green-500' : 'bg-yellow-500'
-      }
+        color: sig.block_id_flag === 'BLOCK_ID_FLAG_COMMIT' ? 'bg-green-500' : 'bg-yellow-500',
+      };
     }
     if (direction === 'end') {
       block.push(color);
@@ -194,24 +197,29 @@ const tab = ref('2');
 function changeTab(v: string) {
   tab.value = v;
 }
-
 </script>
 
 <template>
   <div>
     <div class="tabs tabs-boxed bg-transparent mb-4">
       <a class="tab text-gray-400 capitalize" :class="{ 'tab-active': tab === '3' }" @click="changeTab('3')">{{
-        $t('uptime.overall') }}</a>
+        $t('uptime.overall')
+      }}</a>
       <a class="tab text-gray-400 capitalize" :class="{ 'tab-active': tab === '2' }" @click="changeTab('2')">{{
-        $t('module.blocks') }}</a>
+        $t('module.blocks')
+      }}</a>
       <RouterLink :to="`/${chain}/uptime/customize`">
         <a class="tab text-gray-400 capitalize">{{ $t('uptime.customize') }}</a>
       </RouterLink>
     </div>
     <div class="bg-base-100 px-5 pt-5">
       <div class="flex items-center gap-x-4">
-        <input type="text" v-model="keyword" placeholder="Keywords to filter validators"
-          class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600" />
+        <input
+          type="text"
+          v-model="keyword"
+          placeholder="Keywords to filter validators"
+          class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600"
+        />
       </div>
 
       <!-- grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 mt-4 -->
@@ -222,8 +230,10 @@ function changeTab(v: string) {
               <label class="truncate text-sm">
                 <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ unit.moniker }}</span>
               </label>
-              <div v-if="Number(unit?.missed_blocks_counter || 0) > 10"
-                class="badge badge-sm bg-transparent border-0 text-red-500 font-bold">
+              <div
+                v-if="Number(unit?.missed_blocks_counter || 0) > 10"
+                class="badge badge-sm bg-transparent border-0 text-red-500 font-bold"
+              >
                 {{ unit?.missed_blocks_counter }}
               </div>
               <div v-else class="badge badge-sm bg-transparent text-green-600 border-0 font-bold">
@@ -234,7 +244,7 @@ function changeTab(v: string) {
           </div>
         </div>
         <div class="mt-5 text-xs flex justify-center gap-2">
-          <span class=" font-bold">{{ $t('uptime.legend') }}: </span>
+          <span class="font-bold">{{ $t('uptime.legend') }}: </span>
           <span class="bg-green-500">&nbsp;</span> {{ $t('uptime.committed') }}
           <span class="bg-yellow-500">&nbsp;</span> {{ $t('uptime.precommitted') }}
           <span class="bg-red-500">&nbsp;</span> {{ $t('uptime.missed') }}
@@ -255,13 +265,10 @@ function changeTab(v: string) {
           </thead>
           <tr v-for="(v, i) in grid" class="hover">
             <td>
-              <div class="truncate max-w-sm">
-                {{ i + 1 }}. {{ v.moniker }}
-              </div>
+              <div class="truncate max-w-sm">{{ i + 1 }}. {{ v.moniker }}</div>
             </td>
             <td class="text-right">
-              <span :class="v.uptime && v.uptime > 0.95 ? 'text-green-500' : 'text-red-500'
-        ">
+              <span :class="v.uptime && v.uptime > 0.95 ? 'text-green-500' : 'text-red-500'">
                 <div class="tooltip" :data-tip="`${v.missed_blocks_counter} missing blocks`">
                   {{ format.percent(v.uptime) }}
                 </div>
@@ -276,11 +283,8 @@ function changeTab(v: string) {
             </td>
             <td class="text-xs text-right">
               <span v-if="v.signing && v.signing.jailed_until.startsWith('1970')" class="text-right">{{
-        format.percent(
-          Number(v.signing.index_offset) /
-          (latest - Number(v.signing.start_height))
-        )
-      }}</span>
+                format.percent(Number(v.signing.index_offset) / (latest - Number(v.signing.start_height)))
+              }}</span>
               {{ v.signing?.index_offset }}
             </td>
             <td class="text-right">{{ v.signing?.start_height }}</td>
@@ -290,10 +294,10 @@ function changeTab(v: string) {
             <tr>
               <td colspan="2" class="text-right">
                 {{ $t('uptime.minimum_uptime') }}:
-                <span class="lowercase tooltip" :data-tip="`Window size: ${slashingParam.signed_blocks_window}`"><span
-                    class="ml-2 btn btn-error btn-xs">{{
-        format.percent(slashingParam.min_signed_per_window)
-                    }}</span>
+                <span class="lowercase tooltip" :data-tip="`Window size: ${slashingParam.signed_blocks_window}`"
+                  ><span class="ml-2 btn btn-error btn-xs">{{
+                    format.percent(slashingParam.min_signed_per_window)
+                  }}</span>
                 </span>
               </td>
               <td colspan="8"></td>
diff --git a/src/modules/[chain]/widget/index.vue b/src/modules/[chain]/widget/index.vue
index 804b3e53..8f136c89 100644
--- a/src/modules/[chain]/widget/index.vue
+++ b/src/modules/[chain]/widget/index.vue
@@ -7,48 +7,56 @@ import { ref } from 'vue';
 
 const props = defineProps(['chain']);
 const chainStore = useBlockchain();
-const baseStore = useBaseStore()
-const endpoint = ref(chainStore.current?.endpoints?.rest?.at(0)?.address)
+const baseStore = useBaseStore();
+const endpoint = ref(chainStore.current?.endpoints?.rest?.at(0)?.address);
 
-const chainId = computed(() => baseStore.latest?.block?.header?.chain_id || "")
-const chainName = computed(() => chainStore?.current?.prettyName || "")
+const chainId = computed(() => baseStore.latest?.block?.header?.chain_id || '');
+const chainName = computed(() => chainStore?.current?.prettyName || '');
 const hdPath = computed(() => {
-    return `m/44'/${ chainStore.current?.coinType }/0'/0/0`
-})
+  return `m/44'/${chainStore.current?.coinType}/0'/0/0`;
+});
 </script>
 <template>
   <div>
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
       <h2 class="card-title">{{ $t('widget.title') }}</h2>
-      <div class="my-4 grid grid-flow-col auto-cols-max  overflow-auto">
+      <div class="my-4 grid grid-flow-col auto-cols-max overflow-auto">
         <div class="form-control">
-            <div class="input-group">
-                <span>{{ $t('widget.endpoint') }}</span>
-                <select v-model="endpoint" class="select select-bordered w-fit">
-                <option disabled selected>{{ $t('widget.select_endpoint') }}</option>
-                <option v-for="v in chainStore.current?.endpoints.rest" :value="v.address">{{ v.address }}</option>
-                </select>
-            </div>
+          <div class="input-group">
+            <span>{{ $t('widget.endpoint') }}</span>
+            <select v-model="endpoint" class="select select-bordered w-fit">
+              <option disabled selected>{{ $t('widget.select_endpoint') }}</option>
+              <option v-for="v in chainStore.current?.endpoints.rest" :value="v.address">{{ v.address }}</option>
+            </select>
+          </div>
         </div>
       </div>
       <span class="text-base">{{ $t('widget.text_1') }}</span>
-        <div class="mockup-code bg-base-200 my-2">
-            <pre data-prefix="1"><code class="text-gray-800 dark:invert">&lt;script type="module" src="https://unpkg.com/ping-widget@latest/dist/ping-widget.js"&gt;</code></pre>
-        </div>
+      <div class="mockup-code bg-base-200 my-2">
+        <pre
+          data-prefix="1"
+        ><code class="text-gray-800 dark:invert">&lt;script type="module" src="https://unpkg.com/ping-widget@latest/dist/ping-widget.js"&gt;</code></pre>
+      </div>
     </div>
     <div class="bg-base-100 my-5 px-4 pt-3 pb-4 rounded shadow">
       <h2 class="card-title">{{ $t('module.widget') }}</h2>
       <div class="mt-4">
         <span class="text-base"> 1. {{ $t('widget.text_2') }}</span>
         <div class="mockup-code bg-base-200 my-2">
-            <pre data-prefix=">"><code class="text-green-400">&lt;!-- This widget is optional. --&gt; </code></pre>
-            <pre data-prefix=">"><code  class="text-gray-800 dark:invert">&lt;ping-connect-wallet chain-id="{{ chainId }}" hd-path="{{ hdPath }}"/&gt;</code></pre>
+          <pre data-prefix=">"><code class="text-green-400">&lt;!-- This widget is optional. --&gt; </code></pre>
+          <pre
+            data-prefix=">"
+          ><code  class="text-gray-800 dark:invert">&lt;ping-connect-wallet chain-id="{{ chainId }}" hd-path="{{ hdPath }}"/&gt;</code></pre>
         </div>
 
         <span class="text-base"> 2. {{ $t('widget.text_3') }}</span>
         <div class="mockup-code bg-base-200 my-2">
-            <pre data-prefix=">"><code class=" text-gray-800 dark:invert">&lt;ping-token-convert chain-name="{{ chainName }}" endpoint="{{endpoint}}" hd-path="{{hdPath}}"/&gt;</code></pre>
-            <pre data-prefix=">"><code class="text-gray-800 dark:invert">&lt;label for="PingTokenConvert" class="btn btn-sm"&gt;Buy {{chainName.toUpperCase()}}&lt;/label&gt;</code></pre>
+          <pre
+            data-prefix=">"
+          ><code class=" text-gray-800 dark:invert">&lt;ping-token-convert chain-name="{{ chainName }}" endpoint="{{endpoint}}" hd-path="{{hdPath}}"/&gt;</code></pre>
+          <pre
+            data-prefix=">"
+          ><code class="text-gray-800 dark:invert">&lt;label for="PingTokenConvert" class="btn btn-sm"&gt;Buy {{chainName.toUpperCase()}}&lt;/label&gt;</code></pre>
         </div>
       </div>
     </div>
diff --git a/src/modules/wallet/accounts.vue b/src/modules/wallet/accounts.vue
index d9e45554..37fd1c81 100644
--- a/src/modules/wallet/accounts.vue
+++ b/src/modules/wallet/accounts.vue
@@ -6,33 +6,23 @@ import { fromBech32, toBase64, toBech32, toHex } from '@cosmjs/encoding';
 import { Icon } from '@iconify/vue';
 import { computed } from 'vue';
 import { ref } from 'vue';
-import {
-  scanLocalKeys,
-  type AccountEntry,
-  scanCompatibleAccounts,
-  type LocalKey,
-} from './utils';
+import { scanLocalKeys, type AccountEntry, scanCompatibleAccounts, type LocalKey } from './utils';
 import AdBanner from '@/components/ad/AdBanner.vue';
 
 const dashboard = useDashboard();
-const chainStore = useBlockchain()
+const chainStore = useBlockchain();
 const format = useFormatter();
 const sourceAddress = ref(''); //
 const sourceHdPath = ref("m/44/118/0'/0/0"); //
 const selectedSource = ref({} as LocalKey); //
-const importStep = ref('step1')
+const importStep = ref('step1');
 
-const conf = ref(
-  JSON.parse(localStorage.getItem('imported-addresses') || '{}') as Record<
-    string,
-    AccountEntry[]
-  >
-);
+const conf = ref(JSON.parse(localStorage.getItem('imported-addresses') || '{}') as Record<string, AccountEntry[]>);
 const balances = ref({} as Record<string, CoinWithPrice[]>);
 const delegations = ref({} as Record<string, Delegation[]>);
 
-// initial loading queue 
-// load balances 
+// initial loading queue
+// load balances
 Object.values(conf.value).forEach((imported) => {
   let promise = Promise.resolve();
   for (let i = 0; i < imported.length; i++) {
@@ -41,11 +31,9 @@ Object.values(conf.value).forEach((imported) => {
         new Promise((resolve) => {
           // continue only if the page is living
           if (imported[i].endpoint) {
-            loadBalances(
-              imported[i].chainName,
-              imported[i].endpoint || '',
-              imported[i].address
-            ).finally(() => resolve());
+            loadBalances(imported[i].chainName, imported[i].endpoint || '', imported[i].address).finally(() =>
+              resolve()
+            );
           } else {
             resolve();
           }
@@ -56,48 +44,48 @@ Object.values(conf.value).forEach((imported) => {
 
 const accounts = computed(() => {
   let a = [] as {
-    key: string,
+    key: string;
     subaccounts: {
       account: AccountEntry;
       delegation: CoinWithPrice;
       balances: CoinWithPrice[];
-    }[]
+    }[];
   }[];
   Object.values(conf.value).forEach((x) => {
     const composition = x.map((entry) => {
       const d = delegations.value[entry.address];
-      let delegation = {} as CoinWithPrice
+      let delegation = {} as CoinWithPrice;
       if (d && d.length > 0) {
         d.forEach((b) => {
-          delegation.amount = (Number(b.balance.amount) + Number(delegation.amount || 0)).toFixed()
+          delegation.amount = (Number(b.balance.amount) + Number(delegation.amount || 0)).toFixed();
           delegation.denom = b.balance.denom;
         });
-        delegation.value = format.tokenValueNumber(delegation)
-        delegation.change24h = format.priceChanges(delegation.denom)
+        delegation.value = format.tokenValueNumber(delegation);
+        delegation.change24h = format.priceChanges(delegation.denom);
       }
       return {
         account: entry,
         delegation,
         balances: balances.value[entry.address]
-          ? balances.value[entry.address].map(x => {
-            const value = format.tokenValueNumber(x)
-            return {
-              amount: x.amount,
-              denom: x.denom,
-              value,
-              change24h: format.priceChanges(x.denom)
-            }
-          })
-          : []
-      }
+          ? balances.value[entry.address].map((x) => {
+              const value = format.tokenValueNumber(x);
+              return {
+                amount: x.amount,
+                denom: x.denom,
+                value,
+                change24h: format.priceChanges(x.denom),
+              };
+            })
+          : [],
+      };
     });
-    if (x.at(0)) a.push({ key: x.at(0)?.address || " ", subaccounts: composition });
+    if (x.at(0)) a.push({ key: x.at(0)?.address || ' ', subaccounts: composition });
   });
   return a;
 });
 
 const addresses = computed(() => {
-  return accounts.value.flatMap(x => x.subaccounts.map(a => a.account.address))
+  return accounts.value.flatMap((x) => x.subaccounts.map((a) => a.account.address));
   // const temp = [] as string[]
   // accounts.value.forEach((x) => x.accounts.forEach(a => {
   //   temp.push(a.account.address)
@@ -106,29 +94,33 @@ const addresses = computed(() => {
 });
 
 const totalValue = computed(() => {
-  return accounts.value.flatMap(x => x.subaccounts).reduce((s, e) => {
-    s += e.delegation.value || 0
-    e.balances.forEach(b => {
-      s += b.value || 0
-    })
-    return s
-  }, 0)
-})
+  return accounts.value
+    .flatMap((x) => x.subaccounts)
+    .reduce((s, e) => {
+      s += e.delegation.value || 0;
+      e.balances.forEach((b) => {
+        s += b.value || 0;
+      });
+      return s;
+    }, 0);
+});
 
 const totalChange = computed(() => {
-  return accounts.value.flatMap(x => x.subaccounts).reduce((s, e) => {
-    s += (e.delegation.change24h || 0) * (e.delegation.value || 0) / 100
-    e.balances.forEach(b => {
-      s += (b.change24h || 0) * (b.value || 0) / 100
-    })
-    return s
-  }, 0)
-})
+  return accounts.value
+    .flatMap((x) => x.subaccounts)
+    .reduce((s, e) => {
+      s += ((e.delegation.change24h || 0) * (e.delegation.value || 0)) / 100;
+      e.balances.forEach((b) => {
+        s += ((b.change24h || 0) * (b.value || 0)) / 100;
+      });
+      return s;
+    }, 0);
+});
 
 // Adding Model Boxes
 const availableAccount = computed(() => {
   if (sourceAddress.value) {
-    return scanCompatibleAccounts([{cosmosAddress: sourceAddress.value, hdPath: sourceHdPath.value }]).filter(
+    return scanCompatibleAccounts([{ cosmosAddress: sourceAddress.value, hdPath: sourceHdPath.value }]).filter(
       (x) => !addresses.value.includes(x.address)
     );
   }
@@ -165,10 +157,7 @@ async function addAddress(acc: AccountEntry) {
   // also add chain to favorite
   if (!dashboard?.favoriteMap?.[acc.chainName]) {
     dashboard.favoriteMap[acc.chainName] = true;
-    window.localStorage.setItem(
-      'favoriteMap',
-      JSON.stringify(dashboard.favoriteMap)
-    );
+    window.localStorage.setItem('favoriteMap', JSON.stringify(dashboard.favoriteMap));
   }
 
   if (acc.endpoint) {
@@ -180,8 +169,7 @@ async function addAddress(acc: AccountEntry) {
 
 // load balances for an address
 async function loadBalances(chainName: string, endpoint: string, address: string) {
-  
-  const endpointObj = chainStore.randomEndpoint(chainName)
+  const endpointObj = chainStore.randomEndpoint(chainName);
   const client = CosmosRestClient.newDefault(endpointObj?.address || endpoint);
   await client.getBankBalances(address).then((res) => {
     balances.value[address] = res.balances.filter((x) => x.denom.length < 10);
@@ -196,18 +184,23 @@ async function loadBalances(chainName: string, endpoint: string, address: string
     <div class="overflow-x-auto w-full rounded-md">
       <div class="flex flex-wrap justify-between bg-base-100 p-5">
         <div class="min-w-0">
-          <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">
-            Accounts
-          </h2>
+          <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">Accounts</h2>
           <div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
             <div class="mt-2 items-center text-sm text-gray-500 hidden md:!flex">
-              <svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
-                aria-hidden="true">
-                <path fill-rule="evenodd"
-                  d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
-                  clip-rule="evenodd" />
+              <svg
+                class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
                 <path
-                  d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
+                  fill-rule="evenodd"
+                  d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
+                  clip-rule="evenodd"
+                />
+                <path
+                  d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z"
+                />
               </svg>
               Manage all your assets in one page
             </div>
@@ -216,7 +209,8 @@ async function loadBalances(chainName: string, endpoint: string, address: string
         <div class="flex flex-col text-right">
           <span>Total Value</span>
           <span class="text-xl text-success font-bold">${{ format.formatNumber(totalValue, '0,0.[00]') }}</span>
-          <span class="text-sm" :class="format.color(totalChange)">{{ format.formatNumber(totalChange, '+0,0.[00]')
+          <span class="text-sm" :class="format.color(totalChange)">{{
+            format.formatNumber(totalChange, '+0,0.[00]')
           }}</span>
         </div>
       </div>
@@ -228,42 +222,53 @@ async function loadBalances(chainName: string, endpoint: string, address: string
       <div v-for="{ key, subaccounts } in accounts" class="bg-base-100 rounded-md my-5 py-5">
         <div class="flex justify-self-center">
           <div class="mx-2 p-2">
-            <svg :fill="chainStore.current?.themeColor || '#666CFF'" height="28px" width="28px" version="1.1" id="Capa_1"
-              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 487.5 487.5"
-              xml:space="preserve">
+            <svg
+              :fill="chainStore.current?.themeColor || '#666CFF'"
+              height="28px"
+              width="28px"
+              version="1.1"
+              id="Capa_1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              viewBox="0 0 487.5 487.5"
+              xml:space="preserve"
+            >
               <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
               <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
               <g id="SVGRepo_iconCarrier">
                 <g>
                   <g>
                     <path
-                      d="M437,12.3C437,5.5,431.5,0,424.7,0H126.3C84.4,0,50.4,34.1,50.4,75.9v335.7c0,41.9,34.1,75.9,75.9,75.9h298.5 c6.8,0,12.3-5.5,12.3-12.3V139.6c0-6.8-5.5-12.3-12.3-12.3H126.3c-28.3,0-51.4-23.1-51.4-51.4S98,24.5,126.3,24.5h298.5 C431.5,24.5,437,19,437,12.3z M126.3,151.8h286.2V463H126.3c-28.3,0-51.4-23.1-51.4-51.4V131.7 C88.4,144.2,106.5,151.8,126.3,151.8z">
-                    </path>
+                      d="M437,12.3C437,5.5,431.5,0,424.7,0H126.3C84.4,0,50.4,34.1,50.4,75.9v335.7c0,41.9,34.1,75.9,75.9,75.9h298.5 c6.8,0,12.3-5.5,12.3-12.3V139.6c0-6.8-5.5-12.3-12.3-12.3H126.3c-28.3,0-51.4-23.1-51.4-51.4S98,24.5,126.3,24.5h298.5 C431.5,24.5,437,19,437,12.3z M126.3,151.8h286.2V463H126.3c-28.3,0-51.4-23.1-51.4-51.4V131.7 C88.4,144.2,106.5,151.8,126.3,151.8z"
+                    ></path>
                     <path
-                      d="M130.5,64.8c-6.8,0-12.3,5.5-12.3,12.3s5.5,12.3,12.3,12.3h280.1c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H130.5z">
-                    </path>
+                      d="M130.5,64.8c-6.8,0-12.3,5.5-12.3,12.3s5.5,12.3,12.3,12.3h280.1c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H130.5z"
+                    ></path>
                     <path
-                      d="M178,397.7c6.3,2.4,13.4-0.7,15.8-7.1l17.9-46.8h62.7c0.5,0,0.9-0.1,1.3-0.1l17.9,46.9c1.9,4.9,6.5,7.9,11.4,7.9 c1.5,0,2.9-0.3,4.4-0.8c6.3-2.4,9.5-9.5,7.1-15.8l-54-141.2c-3-7.9-10.4-13-18.8-13c-8.4,0-15.8,5.1-18.8,13l-54,141.2 C168.5,388.2,171.7,395.2,178,397.7z M243.7,260l22.7,59.3h-45.3L243.7,260z">
-                    </path>
+                      d="M178,397.7c6.3,2.4,13.4-0.7,15.8-7.1l17.9-46.8h62.7c0.5,0,0.9-0.1,1.3-0.1l17.9,46.9c1.9,4.9,6.5,7.9,11.4,7.9 c1.5,0,2.9-0.3,4.4-0.8c6.3-2.4,9.5-9.5,7.1-15.8l-54-141.2c-3-7.9-10.4-13-18.8-13c-8.4,0-15.8,5.1-18.8,13l-54,141.2 C168.5,388.2,171.7,395.2,178,397.7z M243.7,260l22.7,59.3h-45.3L243.7,260z"
+                    ></path>
                   </g>
                 </g>
               </g>
             </svg>
           </div>
           <div>
-            <div class=" max-w-md overflow-hidden"><div class="font-bold">{{ key }}</div></div>
+            <div class="max-w-md overflow-hidden">
+              <div class="font-bold">{{ key }}</div>
+            </div>
             <div class="dropdown">
-              <label tabindex="0" class=" cursor-pointer">{{ subaccounts.length }} addresses</label>
-              <ul tabindex="0" class=" -left-14 dropdown-content menu p-2 shadow bg-base-200 rounded-box z-50">
+              <label tabindex="0" class="cursor-pointer">{{ subaccounts.length }} addresses</label>
+              <ul tabindex="0" class="-left-14 dropdown-content menu p-2 shadow bg-base-200 rounded-box z-50">
                 <li v-for="x in subaccounts">
-                <a>
-                  <img :src="x.account.logo" class="w-8 h-8 mr-2" />
-                  <span class="font-bold capitalize">{{ x.account.chainName }} <br>
-                    <span class="text-xs font-normal sm:w-16 sm:overflow-hidden">{{ x.account.address }}</span>
-                  </span>
-                  <label class=" btn btn-xs !btn-error" @click="removeAddress(x.account.address)">Remove</label>
-                </a>
-              </li>
+                  <a>
+                    <img :src="x.account.logo" class="w-8 h-8 mr-2" />
+                    <span class="font-bold capitalize"
+                      >{{ x.account.chainName }} <br />
+                      <span class="text-xs font-normal sm:w-16 sm:overflow-hidden">{{ x.account.address }}</span>
+                    </span>
+                    <label class="btn btn-xs !btn-error" @click="removeAddress(x.account.address)">Remove</label>
+                  </a>
+                </li>
               </ul>
             </div>
           </div>
@@ -275,14 +280,26 @@ async function loadBalances(chainName: string, endpoint: string, address: string
               <li v-if="x.delegation.amount">
                 <RouterLink :to="`/${x.account.chainName}/account/${x.account.address}`">
                   <img :src="x.account.logo" class="w-6 h-6 mr-2" />
-                  <span class="font-bold">{{ format.formatToken(x.delegation, true, '0,0.[00]', 'all') }} <br><span
-                      class="text-xs" :class="format.color(x.delegation.change24h)">{{
-                        format.formatNumber(x.delegation.change24h, '+0.[00]') }}%</span></span>
-                  <span class="float-right text-right">${{ format.formatNumber(x.delegation.value, '0,0.[00]') }}<br><span
-                      class="text-xs" :class="format.color(x.delegation.change24h)">{{
-                        format.formatNumber((x.delegation.change24h || 0) * (x.delegation.value || 0) / 100, '+0,0.[00]')
-                      }}</span></span>
-                </RouterLink>                
+                  <span class="font-bold"
+                    >{{ format.formatToken(x.delegation, true, '0,0.[00]', 'all') }} <br /><span
+                      class="text-xs"
+                      :class="format.color(x.delegation.change24h)"
+                      >{{ format.formatNumber(x.delegation.change24h, '+0.[00]') }}%</span
+                    ></span
+                  >
+                  <span class="float-right text-right"
+                    >${{ format.formatNumber(x.delegation.value, '0,0.[00]') }}<br /><span
+                      class="text-xs"
+                      :class="format.color(x.delegation.change24h)"
+                      >{{
+                        format.formatNumber(
+                          ((x.delegation.change24h || 0) * (x.delegation.value || 0)) / 100,
+                          '+0,0.[00]'
+                        )
+                      }}</span
+                    ></span
+                  >
+                </RouterLink>
               </li>
             </div>
           </ul>
@@ -294,12 +311,20 @@ async function loadBalances(chainName: string, endpoint: string, address: string
               <li v-for="x in s.balances">
                 <RouterLink :to="`/${s.account.chainName}/account/${s.account.address}`">
                   <img :src="s.account.logo" class="w-6 h-6 mr-2" />
-                  <span class="font-bold">{{ format.formatToken(x, true, '0,0.[00]', 'all') }} <br><span
-                      class="text-xs" :class="format.color(x.change24h)">{{ format.formatNumber(x.change24h, '+0.[00]')
-                      }}%</span></span>
-                  <span class="float-right text-right">${{ format.formatNumber(x.value, '0,0.[00]') }}<br><span
-                      class="text-xs" :class="format.color(x.change24h)">{{ format.formatNumber((x.change24h || 0) *
-                        (x.value || 0) / 100, '+0,0.[00]') }}</span></span>
+                  <span class="font-bold"
+                    >{{ format.formatToken(x, true, '0,0.[00]', 'all') }} <br /><span
+                      class="text-xs"
+                      :class="format.color(x.change24h)"
+                      >{{ format.formatNumber(x.change24h, '+0.[00]') }}%</span
+                    ></span
+                  >
+                  <span class="float-right text-right"
+                    >${{ format.formatNumber(x.value, '0,0.[00]') }}<br /><span
+                      class="text-xs"
+                      :class="format.color(x.change24h)"
+                      >{{ format.formatNumber(((x.change24h || 0) * (x.value || 0)) / 100, '+0,0.[00]') }}</span
+                    ></span
+                  >
                 </RouterLink>
               </li>
             </div>
@@ -307,14 +332,18 @@ async function loadBalances(chainName: string, endpoint: string, address: string
         </div>
       </div>
 
-      <div class=" text-center bg-base-100 rounded-md my-4 p-4">
-        <a href="#address-modal"
-          class="inline-flex items-center ml-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+      <div class="text-center bg-base-100 rounded-md my-4 p-4">
+        <a
+          href="#address-modal"
+          class="inline-flex items-center ml-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        >
           <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path
-              d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z" />
+              d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z"
+            />
             <path
-              d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z" />
+              d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z"
+            />
           </svg>
           Import Address
         </a>
@@ -327,7 +356,12 @@ async function loadBalances(chainName: string, endpoint: string, address: string
         <h3 class="font-bold text-lg mb-2">Derive Account From Address</h3>
         <div>
           <label class="my-2">
-            <input v-model="sourceAddress" class="input input-bordered w-full input-sm" placeholder="Input an address" @change="importStep = 'step2'" />
+            <input
+              v-model="sourceAddress"
+              class="input input-bordered w-full input-sm"
+              placeholder="Input an address"
+              @change="importStep = 'step2'"
+            />
             <input v-model="sourceHdPath" class="input input-bordered w-full input-sm" placeholder="m/44/118/0'/0/0" />
           </label>
         </div>
@@ -342,10 +376,12 @@ async function loadBalances(chainName: string, endpoint: string, address: string
                     </div>
                   </div>
                   <div>
-                    <div class="tooltip" :class="acc.compatiable ? 'tooltip-success' : 'tooltip-error'
-                      " :data-tip="`Coin Type: ${acc.coinType}`">
-                      <div class="font-bold capitalize" :class="acc.compatiable ? 'text-green-500' : 'text-red-500'
-                        ">
+                    <div
+                      class="tooltip"
+                      :class="acc.compatiable ? 'tooltip-success' : 'tooltip-error'"
+                      :data-tip="`Coin Type: ${acc.coinType}`"
+                    >
+                      <div class="font-bold capitalize" :class="acc.compatiable ? 'text-green-500' : 'text-red-500'">
                         {{ acc.chainName }}
                       </div>
                     </div>
diff --git a/src/modules/wallet/keplr.vue b/src/modules/wallet/keplr.vue
index c8ce25b8..f298e725 100644
--- a/src/modules/wallet/keplr.vue
+++ b/src/modules/wallet/keplr.vue
@@ -5,102 +5,109 @@ import { CosmosRestClient } from '@/libs/client';
 import { onMounted } from 'vue';
 import AdBanner from '@/components/ad/AdBanner.vue';
 
-const error = ref("")
-const conf = ref("")
-const dashboard = useDashboard()
-const selected = ref({} as ChainConfig)
+const error = ref('');
+const conf = ref('');
+const dashboard = useDashboard();
+const selected = ref({} as ChainConfig);
 
 onMounted(() => {
-    const chainStore = useBlockchain()
-    selected.value = chainStore.current || Object.values(dashboard.chains)[0]
+  const chainStore = useBlockchain();
+  selected.value = chainStore.current || Object.values(dashboard.chains)[0];
   debugger;
-    initParamsForKeplr()
-})
+  initParamsForKeplr();
+});
 async function initParamsForKeplr() {
-    const chain = selected.value
-    if(!chain.endpoints?.rest?.at(0)) throw new Error("Endpoint does not set");
-    const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || "")
-    const b = await client.getBaseBlockLatest()   
-    const chainid = b.block.header.chain_id
+  const chain = selected.value;
+  if (!chain.endpoints?.rest?.at(0)) throw new Error('Endpoint does not set');
+  const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || '');
+  const b = await client.getBaseBlockLatest();
+  const chainid = b.block.header.chain_id;
 
-    const gasPriceStep = chain.keplrPriceStep || {
-        low: 0.01,
-        average: 0.025,
-        high: 0.03,
-    }
-    const coinDecimals = chain.assets[0].denom_units.find(x => x.denom === chain.assets[0].symbol.toLowerCase())?.exponent || 6
-    conf.value = JSON.stringify({
-        chainId: chainid,
-        chainName: chain.chainName,
-        rpc: chain.endpoints?.rpc?.at(0)?.address,
-        rest: chain.endpoints?.rest?.at(0)?.address,
-        bip44: {
-            coinType: Number(chain.coinType),
-        },
+  const gasPriceStep = chain.keplrPriceStep || {
+    low: 0.01,
+    average: 0.025,
+    high: 0.03,
+  };
+  const coinDecimals =
+    chain.assets[0].denom_units.find((x) => x.denom === chain.assets[0].symbol.toLowerCase())?.exponent || 6;
+  conf.value = JSON.stringify(
+    {
+      chainId: chainid,
+      chainName: chain.chainName,
+      rpc: chain.endpoints?.rpc?.at(0)?.address,
+      rest: chain.endpoints?.rest?.at(0)?.address,
+      bip44: {
         coinType: Number(chain.coinType),
-        bech32Config: {
-            bech32PrefixAccAddr: chain.bech32Prefix,
-            bech32PrefixAccPub: `${chain.bech32Prefix}pub`,
-            bech32PrefixValAddr: `${chain.bech32Prefix}valoper`,
-            bech32PrefixValPub: `${chain.bech32Prefix}valoperpub`,
-            bech32PrefixConsAddr: `${chain.bech32Prefix}valcons`,
-            bech32PrefixConsPub: `${chain.bech32Prefix}valconspub`,
+      },
+      coinType: Number(chain.coinType),
+      bech32Config: {
+        bech32PrefixAccAddr: chain.bech32Prefix,
+        bech32PrefixAccPub: `${chain.bech32Prefix}pub`,
+        bech32PrefixValAddr: `${chain.bech32Prefix}valoper`,
+        bech32PrefixValPub: `${chain.bech32Prefix}valoperpub`,
+        bech32PrefixConsAddr: `${chain.bech32Prefix}valcons`,
+        bech32PrefixConsPub: `${chain.bech32Prefix}valconspub`,
+      },
+      currencies: [
+        {
+          coinDenom: chain.assets[0].symbol,
+          coinMinimalDenom: chain.assets[0].base,
+          coinDecimals,
+          coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
         },
-        currencies: [
-            {
-                coinDenom: chain.assets[0].symbol,
-                coinMinimalDenom: chain.assets[0].base,
-                coinDecimals,
-                coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
-            },
-        ],
-        feeCurrencies: [
-            {
-                coinDenom: chain.assets[0].symbol,
-                coinMinimalDenom: chain.assets[0].base,
-                coinDecimals,
-                coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
-                gasPriceStep,
-            },
-        ],
-        gasPriceStep,
-        stakeCurrency: {
-            coinDenom: chain.assets[0].symbol,
-            coinMinimalDenom: chain.assets[0].base,
-            coinDecimals,
-            coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+      ],
+      feeCurrencies: [
+        {
+          coinDenom: chain.assets[0].symbol,
+          coinMinimalDenom: chain.assets[0].base,
+          coinDecimals,
+          coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+          gasPriceStep,
         },
-        features: chain.keplrFeatures || [],
-    }, null, '\t')
+      ],
+      gasPriceStep,
+      stakeCurrency: {
+        coinDenom: chain.assets[0].symbol,
+        coinMinimalDenom: chain.assets[0].base,
+        coinDecimals,
+        coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+      },
+      features: chain.keplrFeatures || [],
+    },
+    null,
+    '\t'
+  );
 }
 
 function suggest() {
+  // @ts-ignore
+  if (window.keplr) {
     // @ts-ignore
-    if (window.keplr) {
-        // @ts-ignore
-        window.keplr.experimentalSuggestChain(JSON.parse(conf.value)).catch(e => {
-            error.value = e
-        })
-    }
+    window.keplr.experimentalSuggestChain(JSON.parse(conf.value)).catch((e) => {
+      error.value = e;
+    });
+  }
 }
 </script>
 
 <template>
-    <div class="bg-base-100 p-4 rounded text-center">
-        <AdBanner id="keplr-banner-ad" unit="banner" width="970px" height="90px" />
-        <div class="flex">
-            <select v-model="selected" class="select select-bordered mx-5" @change="initParamsForKeplr">
-                <option v-for="c in dashboard.chains" :value="c">
-                    {{ c.chainName }}
-                </option>
-            </select>
-            <button class="btn !bg-yes !border-yes text-white px-10" @click="suggest">Add {{ selected.chainName }} TO Keplr Wallet</button>
-        </div>
-        <div class="text-main mt-5">
-            <textarea v-model="conf" class="textarea textarea-bordered w-full" rows="15"></textarea>
-        </div>
-        <div class="mt-4 mb-4">
-            If the chain is not offically support on Keplr, you can submit these parameters to enable Keplr.
-        </div>
+  <div class="bg-base-100 p-4 rounded text-center">
+    <AdBanner id="keplr-banner-ad" unit="banner" width="970px" height="90px" />
+    <div class="flex">
+      <select v-model="selected" class="select select-bordered mx-5" @change="initParamsForKeplr">
+        <option v-for="c in dashboard.chains" :value="c">
+          {{ c.chainName }}
+        </option>
+      </select>
+      <button class="btn !bg-yes !border-yes text-white px-10" @click="suggest">
+        Add {{ selected.chainName }} TO Keplr Wallet
+      </button>
     </div>
+    <div class="text-main mt-5">
+      <textarea v-model="conf" class="textarea textarea-bordered w-full" rows="15"></textarea>
+    </div>
+    <div class="mt-4 mb-4">
+      If the chain is not offically support on Keplr, you can submit these parameters to enable Keplr.
+    </div>
+  </div>
 </template>
diff --git a/src/modules/wallet/portfolio.vue b/src/modules/wallet/portfolio.vue
index 261fd884..5c3102c9 100644
--- a/src/modules/wallet/portfolio.vue
+++ b/src/modules/wallet/portfolio.vue
@@ -12,73 +12,79 @@ import { getMarketPriceChartConfig } from '@/components/charts/apexChartConfig';
 import AdBanner from '@/components/ad/AdBanner.vue';
 
 const format = useFormatter();
-const conf = ref(
-  JSON.parse(localStorage.getItem('imported-addresses') || '{}') as Record<
-    string,
-    AccountEntry[]
-  >
-);
+const conf = ref(JSON.parse(localStorage.getItem('imported-addresses') || '{}') as Record<string, AccountEntry[]>);
 const chainStore = useBlockchain();
 const balances = ref({} as Record<string, Coin[]>);
 const delegations = ref({} as Record<string, Delegation[]>);
 const tokenMeta = ref({} as Record<string, AccountEntry>);
 
-const priceloading = ref(false)
-const currency = ref(localStorage.getItem('currency') || 'usd')
+const priceloading = ref(false);
+const currency = ref(localStorage.getItem('currency') || 'usd');
 
-const prices = ref([] as {
-  id: string,
-  symbol: string,
-  name: string,
-  image: string,
-  current_price: number,
-  market_cap: number,
-  market_cap_rank: number,
-  fully_diluted_valuation: number,
-  total_volume: number, high_24h: number,
-  low_24h: number,
-  price_change_24h: number, price_change_percentage_24h: number, market_cap_change_24h: number,
-  market_cap_change_percentage_24h: number,
-  circulating_supply: number, total_supply: number,
-  max_supply: number,
-  ath: number,
-  ath_change_percentage: number,
-  ath_date: string,
-  atl: string,
-  atl_change_percentage: number,
-  atl_date: string, roi: string, last_updated: string,
-  sparkline_in_7d: { prices: number[] }
-}[])
+const prices = ref(
+  [] as {
+    id: string;
+    symbol: string;
+    name: string;
+    image: string;
+    current_price: number;
+    market_cap: number;
+    market_cap_rank: number;
+    fully_diluted_valuation: number;
+    total_volume: number;
+    high_24h: number;
+    low_24h: number;
+    price_change_24h: number;
+    price_change_percentage_24h: number;
+    market_cap_change_24h: number;
+    market_cap_change_percentage_24h: number;
+    circulating_supply: number;
+    total_supply: number;
+    max_supply: number;
+    ath: number;
+    ath_change_percentage: number;
+    ath_date: string;
+    atl: string;
+    atl_change_percentage: number;
+    atl_date: string;
+    roi: string;
+    last_updated: string;
+    sparkline_in_7d: { prices: number[] };
+  }[]
+);
 
-const loading = ref(0)
-const loaded = ref(0)
+const loading = ref(0);
+const loaded = ref(0);
 watchEffect(() => {
   if (loading.value > 0 && loading.value === loaded.value) {
     if (!priceloading.value) {
-      priceloading.value = true
-      loadPrice()
+      priceloading.value = true;
+      loadPrice();
     }
   }
-})
+});
 
 Object.values(conf.value).forEach((imported) => {
   if (imported)
     imported.forEach((x) => {
       if (x.endpoint && x.address) {
-        loading.value += 1
-        const endpoint = chainStore.randomEndpoint(x.chainName)
+        loading.value += 1;
+        const endpoint = chainStore.randomEndpoint(x.chainName);
         const client = CosmosRestClient.newDefault(endpoint?.address || x.endpoint);
-        client.getBankBalances(x.address).then((res) => {
-          const bal = res.balances.filter((x) => x.denom.length < 10);
-          if (bal) balances.value[x.address || ""] = bal;
-          bal.forEach((b) => {
-            tokenMeta.value[b.denom] = x;
+        client
+          .getBankBalances(x.address)
+          .then((res) => {
+            const bal = res.balances.filter((x) => x.denom.length < 10);
+            if (bal) balances.value[x.address || ''] = bal;
+            bal.forEach((b) => {
+              tokenMeta.value[b.denom] = x;
+            });
+          })
+          .finally(() => {
+            loaded.value += 1;
           });
-        }).finally(() => {
-          loaded.value += 1
-        });
         client.getStakingDelegations(x.address).then((res) => {
-          if (res && res.delegation_responses) delegations.value[x.address || ""] = res.delegation_responses;
+          if (res && res.delegation_responses) delegations.value[x.address || ''] = res.delegation_responses;
           res.delegation_responses.forEach((del) => {
             tokenMeta.value[del.balance.denom] = x;
           });
@@ -88,7 +94,7 @@ Object.values(conf.value).forEach((imported) => {
 });
 
 const tokenQty = computed(() => {
-  const values = {} as Record<string, { coinId: string, qty: number }>;
+  const values = {} as Record<string, { coinId: string; qty: number }>;
   Object.values(balances.value).forEach((b) => {
     b.forEach((coin) => {
       const v = format.tokenDisplayNumber(coin);
@@ -96,7 +102,7 @@ const tokenQty = computed(() => {
         if (values[coin.denom]) {
           values[coin.denom].qty += v;
         } else {
-          values[coin.denom] = { qty: v, coinId: format.findGlobalAssetConfig(coin.denom)?.coingecko_id || "" };
+          values[coin.denom] = { qty: v, coinId: format.findGlobalAssetConfig(coin.denom)?.coingecko_id || '' };
         }
       }
     });
@@ -108,7 +114,10 @@ const tokenQty = computed(() => {
         if (values[d.balance.denom]) {
           values[d.balance.denom].qty += v;
         } else {
-          values[d.balance.denom] = { qty: v, coinId: format.findGlobalAssetConfig(d.balance.denom)?.coingecko_id || "" };
+          values[d.balance.denom] = {
+            qty: v,
+            coinId: format.findGlobalAssetConfig(d.balance.denom)?.coingecko_id || '',
+          };
         }
       }
     });
@@ -118,11 +127,11 @@ const tokenQty = computed(() => {
 
 const tokenValues = computed(() => {
   const values = {} as Record<string, number>;
-  Object.keys(tokenQty.value).forEach(k => {
-    const x = tokenQty.value[k]
-    const marketData = prices.value.find((p: any) => p.id === x.coinId)
-    values[k] = marketData? x.qty * marketData.current_price : 0
-  })
+  Object.keys(tokenQty.value).forEach((k) => {
+    const x = tokenQty.value[k];
+    const marketData = prices.value.find((p: any) => p.id === x.coinId);
+    values[k] = marketData ? x.qty * marketData.current_price : 0;
+  });
   return values;
 });
 
@@ -151,81 +160,95 @@ const tokenList = computed(() => {
 });
 
 function loadPrice() {
-  localStorage.setItem('currency', currency.value)
-  const ids = Object.values(tokenQty.value).map(x => x.coinId).join(',')
-  get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency.value}&ids=${ids}&order=market_cap_desc&per_page=100&page=1&sparkline=true&price_change_percentage=14d&locale=en`)
-    .then(res => {
-      prices.value = res
-    })
+  localStorage.setItem('currency', currency.value);
+  const ids = Object.values(tokenQty.value)
+    .map((x) => x.coinId)
+    .join(',');
+  get(
+    `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency.value}&ids=${ids}&order=market_cap_desc&per_page=100&page=1&sparkline=true&price_change_percentage=14d&locale=en`
+  ).then((res) => {
+    prices.value = res;
+  });
 }
 const totalChangeIn24 = computed(() => {
-  return Object.values(tokenQty.value).map(x => {
-    const marketData = prices.value.find((p: any) => p.id === x.coinId)
-    if (marketData)
-      return x.qty * (marketData.price_change_24h || 0)
-    return 0
-  }).reduce((s, c) => s + c, 0)
-})
+  return Object.values(tokenQty.value)
+    .map((x) => {
+      const marketData = prices.value.find((p: any) => p.id === x.coinId);
+      if (marketData) return x.qty * (marketData.price_change_24h || 0);
+      return 0;
+    })
+    .reduce((s, c) => s + c, 0);
+});
 // Compute data for trend chart
 const changeData = computed(() => {
-  const vals = Object.keys(tokenQty.value).map(denom => {
-    const token = tokenQty.value[denom]
-    const marketData: any = prices.value.find((x) => x.id === token.coinId)
-    if (marketData) {
-      return marketData.sparkline_in_7d?.price.map((p: number) => p * token.qty) as number[]
-    }
-    return []
-  }).filter(x => x.length > 0)
+  const vals = Object.keys(tokenQty.value)
+    .map((denom) => {
+      const token = tokenQty.value[denom];
+      const marketData: any = prices.value.find((x) => x.id === token.coinId);
+      if (marketData) {
+        return marketData.sparkline_in_7d?.price.map((p: number) => p * token.qty) as number[];
+      }
+      return [];
+    })
+    .filter((x) => x.length > 0);
 
-  const width = vals.at(0)?.length || 0
-  const sum = new Array(width).fill(0)
+  const width = vals.at(0)?.length || 0;
+  const sum = new Array(width).fill(0);
 
   for (let i = 0; i < width; i++) {
     for (let j = 0; j < vals.length; j++) {
-      sum[i] += vals.at(j)?.at(i) || 0
+      sum[i] += vals.at(j)?.at(i) || 0;
     }
   }
 
-  return [{ name: "value", data: sum }]
-})
+  return [{ name: 'value', data: sum }];
+});
 
 const baseStore = useBaseStore();
 const chartConfig = computed(() => {
   const theme = baseStore.theme;
-  const labels = [] as any[]
-  const time = new Date().getTime()
-  for (let i = 0; i < 168; i++) { // only works for 14d
-    labels.unshift(time - i * 2 * 60 * 60 * 1000)
+  const labels = [] as any[];
+  const time = new Date().getTime();
+  for (let i = 0; i < 168; i++) {
+    // only works for 14d
+    labels.unshift(time - i * 2 * 60 * 60 * 1000);
   }
   return getMarketPriceChartConfig(theme, labels);
 });
 
 const currencySign = computed(() => {
-  switch(currency.value) {
-    case 'usd': return '$'
-    case 'cny': return '¥'
-    case 'eur': return '€'
-    case 'hkd': return 'HK$'
-    case 'jpy': return '¥'
-    case 'sdg': return 'S$'
-    case 'krw': return '₩'
-    case 'btc': return 'BTC'
-    case 'eth': return 'ETH'
+  switch (currency.value) {
+    case 'usd':
+      return '$';
+    case 'cny':
+      return '¥';
+    case 'eur':
+      return '€';
+    case 'hkd':
+      return 'HK$';
+    case 'jpy':
+      return '¥';
+    case 'sdg':
+      return 'S$';
+    case 'krw':
+      return '₩';
+    case 'btc':
+      return 'BTC';
+    case 'eth':
+      return 'ETH';
   }
-  return '$'
-})
+  return '$';
+});
 </script>
 <template>
   <div class="overflow-x-auto w-full rounded-md">
-
     <div class="flex flex-wrap justify-between bg-base-100 p-5">
       <div class="min-w-0">
-        <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">
-          Portfolio
-        </h2>
+        <h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">Portfolio</h2>
         <div>
           <div class="flex items-center text-sm">
-            Currency: <select v-model="currency" @change="loadPrice" class="ml-1 uppercase">
+            Currency:
+            <select v-model="currency" @change="loadPrice" class="ml-1 uppercase">
               <option>usd</option>
               <option>cny</option>
               <option>eur</option>
@@ -250,15 +273,18 @@ const currencySign = computed(() => {
     <div class="bg-base-100">
       <div v-if="tokenList" class="grid grid-cols-1 md:grid-cols-3">
         <div>
-          <DonutChart height="280" :series="Object.values(tokenValues)"
-            :labels="Object.keys(tokenValues).map(x => format.tokenDisplayDenom(x)?.toUpperCase())" />
+          <DonutChart
+            height="280"
+            :series="Object.values(tokenValues)"
+            :labels="Object.keys(tokenValues).map((x) => format.tokenDisplayDenom(x)?.toUpperCase())"
+          />
         </div>
         <div class="md:col-span-2">
           <ApexCharts type="area" height="280" :options="chartConfig" :series="changeData" />
         </div>
       </div>
       <div class="overflow-x-auto mt-4">
-      <AdBanner class="bg-base-200" id="portfolio-banner-ad" unit="banner" width="970px" height="90px" />
+        <AdBanner class="bg-base-200" id="portfolio-banner-ad" unit="banner" width="970px" height="90px" />
         <table class="table w-full">
           <thead class="bg-base-200">
             <tr>
@@ -277,7 +303,7 @@ const currencySign = computed(() => {
                     </div>
                   </div>
                   <span class="uppercase font-bold text-lg">{{ format.tokenDisplayDenom(x.denom) }}</span> @
-                  <span class="capitalize ">{{ x.chainName }} </span>
+                  <span class="capitalize">{{ x.chainName }} </span>
                 </div>
               </td>
               <td class="text-right">{{ currencySign }}{{ format.formatNumber(x.value, '0,0.[00]') }}</td>
@@ -285,11 +311,8 @@ const currencySign = computed(() => {
             </tr>
           </tbody>
         </table>
-
-      </div>
-      <div class="p-4 text-center" v-if="tokenList.length === 0">
-        No Data
       </div>
+      <div class="p-4 text-center" v-if="tokenList.length === 0">No Data</div>
     </div>
     <div class="text-center my-5 bg-base-200">
       <RouterLink to="./accounts" class="btn btn-link">Add More Asset</RouterLink>
diff --git a/src/modules/wallet/suggest.vue b/src/modules/wallet/suggest.vue
index 5ecc76f2..793c5829 100644
--- a/src/modules/wallet/suggest.vue
+++ b/src/modules/wallet/suggest.vue
@@ -6,170 +6,186 @@ import { CosmosRestClient } from '@/libs/client';
 import { onMounted } from 'vue';
 import AdBanner from '@/components/ad/AdBanner.vue';
 
-const error = ref("")
-const conf = ref("")
-const dashboard = useDashboard()
-const selected = ref({} as ChainConfig)
-const wallet = ref("keplr")
-const network = ref(NetworkType.Mainnet)
-const mainnet = ref([] as ChainConfig[])
-const testnet = ref([] as ChainConfig[])
+const error = ref('');
+const conf = ref('');
+const dashboard = useDashboard();
+const selected = ref({} as ChainConfig);
+const wallet = ref('keplr');
+const network = ref(NetworkType.Mainnet);
+const mainnet = ref([] as ChainConfig[]);
+const testnet = ref([] as ChainConfig[]);
 const chains = computed(() => {
-    return network.value === NetworkType.Mainnet? mainnet.value : testnet.value
-})
+  return network.value === NetworkType.Mainnet ? mainnet.value : testnet.value;
+});
 
 onMounted(() => {
-    const chainStore = useBlockchain()
-    selected.value = chainStore.current || Object.values(dashboard.chains)[0]
-    initParamsForKeplr()
+  const chainStore = useBlockchain();
+  selected.value = chainStore.current || Object.values(dashboard.chains)[0];
+  initParamsForKeplr();
 
-    dashboard.loadLocalConfig(NetworkType.Mainnet).then((res) => {
-        mainnet.value = Object.values<ChainConfig>(res)
-    })
-    dashboard.loadLocalConfig(NetworkType.Testnet).then((res) => {
-        testnet.value = Object.values<ChainConfig>(res)
-    })
-})
+  dashboard.loadLocalConfig(NetworkType.Mainnet).then((res) => {
+    mainnet.value = Object.values<ChainConfig>(res);
+  });
+  dashboard.loadLocalConfig(NetworkType.Testnet).then((res) => {
+    testnet.value = Object.values<ChainConfig>(res);
+  });
+});
 
 function onchange() {
-    wallet.value === "keplr" ? initParamsForKeplr() : initSnap()
+  wallet.value === 'keplr' ? initParamsForKeplr() : initSnap();
 }
 
 async function initParamsForKeplr() {
-    const chain = selected.value
-    if(!chain.endpoints?.rest?.at(0)) throw new Error("Endpoint does not set");
-    const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || "")
-    const b = await client.getBaseBlockLatest()   
-    const chainid = b.block.header.chain_id
+  const chain = selected.value;
+  if (!chain.endpoints?.rest?.at(0)) throw new Error('Endpoint does not set');
+  const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || '');
+  const b = await client.getBaseBlockLatest();
+  const chainid = b.block.header.chain_id;
 
-    const gasPriceStep = chain.keplrPriceStep || {
-        low: 0.01,
-        average: 0.025,
-        high: 0.03,
-    }
-    const coinDecimals = chain.assets[0].denom_units.find(x => x.denom === chain.assets[0].symbol.toLowerCase())?.exponent || 6
-    conf.value = JSON.stringify({
-        chainId: chainid,
-        chainName: chain.chainName,
-        rpc: chain.endpoints?.rpc?.at(0)?.address,
-        rest: chain.endpoints?.rest?.at(0)?.address,
-        bip44: {
-            coinType: Number(chain.coinType),
-        },
+  const gasPriceStep = chain.keplrPriceStep || {
+    low: 0.01,
+    average: 0.025,
+    high: 0.03,
+  };
+  const coinDecimals =
+    chain.assets[0].denom_units.find((x) => x.denom === chain.assets[0].symbol.toLowerCase())?.exponent || 6;
+  conf.value = JSON.stringify(
+    {
+      chainId: chainid,
+      chainName: chain.chainName,
+      rpc: chain.endpoints?.rpc?.at(0)?.address,
+      rest: chain.endpoints?.rest?.at(0)?.address,
+      bip44: {
         coinType: Number(chain.coinType),
-        bech32Config: {
-            bech32PrefixAccAddr: chain.bech32Prefix,
-            bech32PrefixAccPub: `${chain.bech32Prefix}pub`,
-            bech32PrefixValAddr: `${chain.bech32Prefix}valoper`,
-            bech32PrefixValPub: `${chain.bech32Prefix}valoperpub`,
-            bech32PrefixConsAddr: `${chain.bech32Prefix}valcons`,
-            bech32PrefixConsPub: `${chain.bech32Prefix}valconspub`,
+      },
+      coinType: Number(chain.coinType),
+      bech32Config: {
+        bech32PrefixAccAddr: chain.bech32Prefix,
+        bech32PrefixAccPub: `${chain.bech32Prefix}pub`,
+        bech32PrefixValAddr: `${chain.bech32Prefix}valoper`,
+        bech32PrefixValPub: `${chain.bech32Prefix}valoperpub`,
+        bech32PrefixConsAddr: `${chain.bech32Prefix}valcons`,
+        bech32PrefixConsPub: `${chain.bech32Prefix}valconspub`,
+      },
+      currencies: [
+        {
+          coinDenom: chain.assets[0].symbol,
+          coinMinimalDenom: chain.assets[0].base,
+          coinDecimals,
+          coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
         },
-        currencies: [
-            {
-                coinDenom: chain.assets[0].symbol,
-                coinMinimalDenom: chain.assets[0].base,
-                coinDecimals,
-                coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
-            },
-        ],
-        feeCurrencies: [
-            {
-                coinDenom: chain.assets[0].symbol,
-                coinMinimalDenom: chain.assets[0].base,
-                coinDecimals,
-                coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
-                gasPriceStep,
-            },
-        ],
-        gasPriceStep,
-        stakeCurrency: {
-            coinDenom: chain.assets[0].symbol,
-            coinMinimalDenom: chain.assets[0].base,
-            coinDecimals,
-            coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+      ],
+      feeCurrencies: [
+        {
+          coinDenom: chain.assets[0].symbol,
+          coinMinimalDenom: chain.assets[0].base,
+          coinDecimals,
+          coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+          gasPriceStep,
         },
-        features: chain.keplrFeatures || [],
-    }, null, '\t')
+      ],
+      gasPriceStep,
+      stakeCurrency: {
+        coinDenom: chain.assets[0].symbol,
+        coinMinimalDenom: chain.assets[0].base,
+        coinDecimals,
+        coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+      },
+      features: chain.keplrFeatures || [],
+    },
+    null,
+    '\t'
+  );
 }
 
 async function initSnap() {
-    const chain = selected.value
-    const [token] = chain.assets
+  const chain = selected.value;
+  const [token] = chain.assets;
 
-    if(!chain.endpoints?.rest?.at(0)) throw new Error("Endpoint does not set");
-    const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || "")
-    const b = await client.getBaseBlockLatest()   
-    const chainId = b.block.header.chain_id
+  if (!chain.endpoints?.rest?.at(0)) throw new Error('Endpoint does not set');
+  const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || '');
+  const b = await client.getBaseBlockLatest();
+  const chainId = b.block.header.chain_id;
 
-    conf.value = JSON.stringify({
-        chainId,
-        chainName: chain.chainName,
-        bech32Config: {
-            bech32PrefixAccAddr: chain.bech32Prefix,
+  conf.value = JSON.stringify(
+    {
+      chainId,
+      chainName: chain.chainName,
+      bech32Config: {
+        bech32PrefixAccAddr: chain.bech32Prefix,
+      },
+      bip44: {
+        coinType: Number(chain.coinType),
+      },
+      feeCurrencies: [
+        {
+          coinDenom: token.display,
+          coinMinimalDenom: token.base,
+          coinDecimals: token.denom_units.find((x) => x.denom === token.display)?.exponent || 6,
+          coinGeckoId: token.coingecko_id,
+          gasPriceStep: {
+            low: 0.0625,
+            average: 0.5,
+            high: 62.5,
+          },
         },
-        bip44: {
-            coinType: Number(chain.coinType),
-        },
-        feeCurrencies: [
-            {
-            coinDenom: token.display,
-            coinMinimalDenom: token.base,
-            coinDecimals: token.denom_units.find(x => x.denom === token.display)?.exponent || 6,
-            coinGeckoId: token.coingecko_id,
-            gasPriceStep: {
-                low: 0.0625,
-                average: 0.5,
-                high: 62.5,
-            },
-            },
-        ],
-    }, null, '\t')
+      ],
+    },
+    null,
+    '\t'
+  );
 }
 
 function suggest() {
-    if(wallet.value === "keplr") {
-        // @ts-ignore
-        if (window.keplr) {
-            // @ts-ignore
-            window.keplr.experimentalSuggestChain(JSON.parse(conf.value)).catch(e => {
-                error.value = e
-            })
-        }
-    } else {
-        suggestChain(JSON.parse(conf.value));
+  if (wallet.value === 'keplr') {
+    // @ts-ignore
+    if (window.keplr) {
+      // @ts-ignore
+      window.keplr.experimentalSuggestChain(JSON.parse(conf.value)).catch((e) => {
+        error.value = e;
+      });
     }
+  } else {
+    suggestChain(JSON.parse(conf.value));
+  }
 }
-
 </script>
 
 <template>
-    <div class="bg-base-100 p-4 rounded text-center">
-        <div class="flex text-center">
-            <select v-model="network" class="select select-bordered">
-                <option :value="NetworkType.Mainnet">Mainnet</option>
-                <option :value="NetworkType.Testnet">Testnet</option>
-            </select>
-            <select v-model="selected" class="select select-bordered mx-5" @change="onchange">
-                <option v-for="c in chains" :value="c">
-                    {{ c.chainName }}
-                </option>
-            </select>
-            <label><input type="radio" v-model="wallet" value="keplr" class="radio radio-bordered" @change="onchange" /> Keplr</label>
-            <label><input type="radio" v-model="wallet" value="metamask" class="radio radio-bordered ml-4" @change="onchange"/> Metamask</label>
-        </div>
-        <div class="text-main mt-5">
-            <textarea v-model="conf" class="textarea textarea-bordered w-full" rows="15"></textarea>
-        </div>
-        <div class="mt-4 mb-4">
-
-            <button class="btn !bg-primary !border-primary text-white mr-2" @click="suggest">Suggest {{ selected.chainName }} TO {{ wallet }}</button>
-
-            <div class="mt-4">
-                If the chain is not offically support on Keplr/Metamask Snap, you can submit these parameters to enable Keplr/Metamask Snap.
-            </div>
-        </div>
-
-        <AdBanner id="suggest-banner-ad" unit="banner" width="970px" height="90px" />
+  <div class="bg-base-100 p-4 rounded text-center">
+    <div class="flex text-center">
+      <select v-model="network" class="select select-bordered">
+        <option :value="NetworkType.Mainnet">Mainnet</option>
+        <option :value="NetworkType.Testnet">Testnet</option>
+      </select>
+      <select v-model="selected" class="select select-bordered mx-5" @change="onchange">
+        <option v-for="c in chains" :value="c">
+          {{ c.chainName }}
+        </option>
+      </select>
+      <label
+        ><input type="radio" v-model="wallet" value="keplr" class="radio radio-bordered" @change="onchange" />
+        Keplr</label
+      >
+      <label
+        ><input type="radio" v-model="wallet" value="metamask" class="radio radio-bordered ml-4" @change="onchange" />
+        Metamask</label
+      >
     </div>
+    <div class="text-main mt-5">
+      <textarea v-model="conf" class="textarea textarea-bordered w-full" rows="15"></textarea>
+    </div>
+    <div class="mt-4 mb-4">
+      <button class="btn !bg-primary !border-primary text-white mr-2" @click="suggest">
+        Suggest {{ selected.chainName }} TO {{ wallet }}
+      </button>
+
+      <div class="mt-4">
+        If the chain is not offically support on Keplr/Metamask Snap, you can submit these parameters to enable
+        Keplr/Metamask Snap.
+      </div>
+    </div>
+
+    <AdBanner id="suggest-banner-ad" unit="banner" width="970px" height="90px" />
+  </div>
 </template>
diff --git a/src/modules/wallet/unisat.vue b/src/modules/wallet/unisat.vue
index 2a04d56a..d66f9bf7 100644
--- a/src/modules/wallet/unisat.vue
+++ b/src/modules/wallet/unisat.vue
@@ -5,100 +5,107 @@ import { CosmosRestClient } from '@/libs/client';
 import { onMounted } from 'vue';
 import AdBanner from '@/components/ad/AdBanner.vue';
 
-const error = ref("")
-const conf = ref("")
-const dashboard = useDashboard()
-const selected = ref({} as ChainConfig)
+const error = ref('');
+const conf = ref('');
+const dashboard = useDashboard();
+const selected = ref({} as ChainConfig);
 
 onMounted(() => {
-    const chainStore = useBlockchain()
-    selected.value = chainStore.current || Object.values(dashboard.chains)[0];
-})
+  const chainStore = useBlockchain();
+  selected.value = chainStore.current || Object.values(dashboard.chains)[0];
+});
 async function initParamsForKeplr() {
-    const chain = selected.value
-    if(!chain.endpoints?.rest?.at(0)) throw new Error("Endpoint does not set");
-    const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || "")
-    const b = await client.getBaseBlockLatest()   
-    const chainid = b.block.header.chain_id
+  const chain = selected.value;
+  if (!chain.endpoints?.rest?.at(0)) throw new Error('Endpoint does not set');
+  const client = CosmosRestClient.newDefault(chain.endpoints.rest?.at(0)?.address || '');
+  const b = await client.getBaseBlockLatest();
+  const chainid = b.block.header.chain_id;
 
-    const gasPriceStep = chain.keplrPriceStep || {
-        low: 0.01,
-        average: 0.025,
-        high: 0.03,
-    }
-    const coinDecimals = chain.assets[0].denom_units.find(x => x.denom === chain.assets[0].symbol.toLowerCase())?.exponent || 6
-    conf.value = JSON.stringify({
-        chainId: chainid,
-        chainName: chain.chainName,
-        rpc: chain.endpoints?.rpc?.at(0)?.address,
-        rest: chain.endpoints?.rest?.at(0)?.address,
-        bip44: {
-            coinType: Number(chain.coinType),
-        },
+  const gasPriceStep = chain.keplrPriceStep || {
+    low: 0.01,
+    average: 0.025,
+    high: 0.03,
+  };
+  const coinDecimals =
+    chain.assets[0].denom_units.find((x) => x.denom === chain.assets[0].symbol.toLowerCase())?.exponent || 6;
+  conf.value = JSON.stringify(
+    {
+      chainId: chainid,
+      chainName: chain.chainName,
+      rpc: chain.endpoints?.rpc?.at(0)?.address,
+      rest: chain.endpoints?.rest?.at(0)?.address,
+      bip44: {
         coinType: Number(chain.coinType),
-        bech32Config: {
-            bech32PrefixAccAddr: chain.bech32Prefix,
-            bech32PrefixAccPub: `${chain.bech32Prefix}pub`,
-            bech32PrefixValAddr: `${chain.bech32Prefix}valoper`,
-            bech32PrefixValPub: `${chain.bech32Prefix}valoperpub`,
-            bech32PrefixConsAddr: `${chain.bech32Prefix}valcons`,
-            bech32PrefixConsPub: `${chain.bech32Prefix}valconspub`,
+      },
+      coinType: Number(chain.coinType),
+      bech32Config: {
+        bech32PrefixAccAddr: chain.bech32Prefix,
+        bech32PrefixAccPub: `${chain.bech32Prefix}pub`,
+        bech32PrefixValAddr: `${chain.bech32Prefix}valoper`,
+        bech32PrefixValPub: `${chain.bech32Prefix}valoperpub`,
+        bech32PrefixConsAddr: `${chain.bech32Prefix}valcons`,
+        bech32PrefixConsPub: `${chain.bech32Prefix}valconspub`,
+      },
+      currencies: [
+        {
+          coinDenom: chain.assets[0].symbol,
+          coinMinimalDenom: chain.assets[0].base,
+          coinDecimals,
+          coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
         },
-        currencies: [
-            {
-                coinDenom: chain.assets[0].symbol,
-                coinMinimalDenom: chain.assets[0].base,
-                coinDecimals,
-                coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
-            },
-        ],
-        feeCurrencies: [
-            {
-                coinDenom: chain.assets[0].symbol,
-                coinMinimalDenom: chain.assets[0].base,
-                coinDecimals,
-                coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
-                gasPriceStep,
-            },
-        ],
-        gasPriceStep,
-        stakeCurrency: {
-            coinDenom: chain.assets[0].symbol,
-            coinMinimalDenom: chain.assets[0].base,
-            coinDecimals,
-            coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+      ],
+      feeCurrencies: [
+        {
+          coinDenom: chain.assets[0].symbol,
+          coinMinimalDenom: chain.assets[0].base,
+          coinDecimals,
+          coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+          gasPriceStep,
         },
-        features: chain.keplrFeatures || [],
-    }, null, '\t')
+      ],
+      gasPriceStep,
+      stakeCurrency: {
+        coinDenom: chain.assets[0].symbol,
+        coinMinimalDenom: chain.assets[0].base,
+        coinDecimals,
+        coinGeckoId: chain.assets[0].coingecko_id || 'unknown',
+      },
+      features: chain.keplrFeatures || [],
+    },
+    null,
+    '\t'
+  );
 }
 
 function suggest() {
+  // @ts-ignore
+  if (window.unisat) {
     // @ts-ignore
-    if (window.unisat) {
-        // @ts-ignore
-        window.unisat.experimentalSuggestChain(JSON.parse(conf.value)).catch(e => {
-            error.value = e
-        })
-    }
+    window.unisat.experimentalSuggestChain(JSON.parse(conf.value)).catch((e) => {
+      error.value = e;
+    });
+  }
 }
 </script>
 
 <template>
-    <div class="bg-base-100 p-4 rounded text-center">
-        <AdBanner id="keplr-banner-ad" unit="banner" width="970px" height="90px" />
-        <div class="flex">
-            <select v-model="selected" class="select select-bordered mx-5" @change="initParamsForKeplr">
-                <option v-for="c in dashboard.chains" :value="c">
-                    {{ c.chainName }}
-                </option>
-            </select>
-            <button class="btn !bg-yes !border-yes text-white px-10" @click="suggest">Add {{ selected.chainName }} TO Unisat Wallet</button>
-        </div>
-        <div class="text-main mt-5">
-            <textarea v-model="conf" class="textarea textarea-bordered w-full" rows="15"></textarea>
-        </div>
-        <div class="mt-4 mb-4">
-            If the chain is not offically support on Keplr, you can submit these parameters to enable Keplr.
-        </div>
+  <div class="bg-base-100 p-4 rounded text-center">
+    <AdBanner id="keplr-banner-ad" unit="banner" width="970px" height="90px" />
+    <div class="flex">
+      <select v-model="selected" class="select select-bordered mx-5" @change="initParamsForKeplr">
+        <option v-for="c in dashboard.chains" :value="c">
+          {{ c.chainName }}
+        </option>
+      </select>
+      <button class="btn !bg-yes !border-yes text-white px-10" @click="suggest">
+        Add {{ selected.chainName }} TO Unisat Wallet
+      </button>
     </div>
+    <div class="text-main mt-5">
+      <textarea v-model="conf" class="textarea textarea-bordered w-full" rows="15"></textarea>
+    </div>
+    <div class="mt-4 mb-4">
+      If the chain is not offically support on Keplr, you can submit these parameters to enable Keplr.
+    </div>
+  </div>
 </template>
diff --git a/src/modules/wallet/utils.ts b/src/modules/wallet/utils.ts
index 65f8ce15..aa865bd5 100644
--- a/src/modules/wallet/utils.ts
+++ b/src/modules/wallet/utils.ts
@@ -1,49 +1,50 @@
-import { useDashboard } from "@/stores"
-import type { Coin } from "@/types"
-import { fromBech32, toBech32 } from "@cosmjs/encoding"
+import { useDashboard } from '@/stores';
+import type { Coin } from '@/types';
+import { fromBech32, toBech32 } from '@cosmjs/encoding';
 
 export interface AccountEntry {
-  chainName: string,
-  logo: string,
-  address: string,
-  coinType: string,
-  endpoint?: string,
-  compatiable?: boolean,
+  chainName: string;
+  logo: string;
+  address: string;
+  coinType: string;
+  endpoint?: string;
+  compatiable?: boolean;
 }
 
 export interface LocalKey {
-  cosmosAddress: string, hdPath: string
+  cosmosAddress: string;
+  hdPath: string;
 }
 
 export function scanLocalKeys() {
-  const connected = [] as LocalKey[]
+  const connected = [] as LocalKey[];
   for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i)
-    if (key?.startsWith("m/44")) {
-      const wallet = JSON.parse(localStorage.getItem(key) || "")
+    const key = localStorage.key(i);
+    if (key?.startsWith('m/44')) {
+      const wallet = JSON.parse(localStorage.getItem(key) || '');
       if (wallet) {
-        connected.push(wallet)
+        connected.push(wallet);
       }
     }
   }
-  return connected
+  return connected;
 }
 
 export function scanCompatibleAccounts(keys: LocalKey[]) {
-  const dashboard = useDashboard()
-  const available = [] as AccountEntry[]
-  keys.forEach(wallet => {
-    Object.values(dashboard.chains).forEach(chain => {
-      const { data } = fromBech32(wallet.cosmosAddress)
+  const dashboard = useDashboard();
+  const available = [] as AccountEntry[];
+  keys.forEach((wallet) => {
+    Object.values(dashboard.chains).forEach((chain) => {
+      const { data } = fromBech32(wallet.cosmosAddress);
       available.push({
         chainName: chain.chainName,
         logo: chain.logo,
         address: toBech32(chain.bech32Prefix, data),
         coinType: chain.coinType,
         compatiable: wallet.hdPath.indexOf(chain.coinType) > 0,
-        endpoint: chain.endpoints.rest?.at(0)?.address
-      })
-    })
-  })
-  return available
-}
\ No newline at end of file
+        endpoint: chain.endpoints.rest?.at(0)?.address,
+      });
+    });
+  });
+  return available;
+}
diff --git a/src/pages/[...all].vue b/src/pages/[...all].vue
index 7ff39af6..226002a2 100644
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
@@ -3,23 +3,23 @@ import misc404 from '@/assets/images/pages/404.png';
 </script>
 
 <template>
-    <div class="pt-10">
-        <div class="text-center">
-            <div class="text-8xl font-semibold text-main">{{ $t('pages.title_all') }}</div>
-            <div class="text-xl font-bold my-2">{{ $t('pages.tag_all') }}</div>
-            <div class="text-base">
-                {{ $t('pages.description_all') }}
-            </div>
-        </div>
-
-        <!-- 👉 Image -->
-        <div class="misc-avatar w-full text-center">
-            <RouterLink to="/" class="btn no-underline btn-primary mt-4">
-                {{ $t('pages.btn_index') }}
-            </RouterLink>
-            <img :src="misc404" alt="Coming Soon" class="mx-auto h-[400px] mt-10" />
-        </div>
+  <div class="pt-10">
+    <div class="text-center">
+      <div class="text-8xl font-semibold text-main">{{ $t('pages.title_all') }}</div>
+      <div class="text-xl font-bold my-2">{{ $t('pages.tag_all') }}</div>
+      <div class="text-base">
+        {{ $t('pages.description_all') }}
+      </div>
     </div>
+
+    <!-- 👉 Image -->
+    <div class="misc-avatar w-full text-center">
+      <RouterLink to="/" class="btn no-underline btn-primary mt-4">
+        {{ $t('pages.btn_index') }}
+      </RouterLink>
+      <img :src="misc404" alt="Coming Soon" class="mx-auto h-[400px] mt-10" />
+    </div>
+  </div>
 </template>
 
 <route lang="yaml">
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 49110278..8b1bd095 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,10 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
-import {
-  useDashboard,
-  LoadingStatus,
-  type ChainConfig,
-} from '@/stores/useDashboard';
+import { useDashboard, LoadingStatus, type ChainConfig } from '@/stores/useDashboard';
 import ChainSummary from '@/components/ChainSummary.vue';
 import AdBanner from '@/components/ad/AdBanner.vue';
 
@@ -19,8 +15,9 @@ const chains = computed(() => {
     const lowercaseKeywords = keywords.value.toLowerCase();
 
     return Object.values(dashboard.chains).filter(
-      (x: ChainConfig) => x.chainName.toLowerCase().indexOf(lowercaseKeywords) > -1 
-      || x.prettyName.toLowerCase().indexOf(lowercaseKeywords) > -1
+      (x: ChainConfig) =>
+        x.chainName.toLowerCase().indexOf(lowercaseKeywords) > -1 ||
+        x.prettyName.toLowerCase().indexOf(lowercaseKeywords) > -1
     );
   } else {
     return Object.values(dashboard.chains);
@@ -28,36 +25,50 @@ const chains = computed(() => {
 });
 
 const featured = computed(() => {
-  const names = ["cosmos", "osmosis", "akash", "celestia", "evmos", "injective", "dydx", "noble"];
+  const names = ['cosmos', 'osmosis', 'akash', 'celestia', 'evmos', 'injective', 'dydx', 'noble'];
   return chains.value
-    .filter(x => names.includes(x.chainName))
-    .sort((a, b)=> (names.indexOf(a.chainName) - names.indexOf(b.chainName)))
-})
-
-const chainStore = useBlockchain()
+    .filter((x) => names.includes(x.chainName))
+    .sort((a, b) => names.indexOf(a.chainName) - names.indexOf(b.chainName));
+});
 
+const chainStore = useBlockchain();
 </script>
 <template>
   <div class="">
     <div class="flex md:!flex-row flex-col items-center justify-center mb-6 mt-14 gap-2">
       <div class="w-16 rounded-full">
-        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" 
+        <svg
+          version="1.0"
+          xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 150.000000 132.000000"
-          preserveAspectRatio="xMidYMid meet">
-          <g transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)"
-          :fill="chainStore.current?.themeColor||'#666CFF'" class=" dark:invert" stroke="none">
-            <path d="M500 1310 l-125 -5 -182 -315 c-100 -173 -182 -321 -182 -329 -1 -7
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,132.000000) scale(0.100000,-0.100000)"
+            :fill="chainStore.current?.themeColor || '#666CFF'"
+            class="dark:invert"
+            stroke="none"
+          >
+            <path
+              d="M500 1310 l-125 -5 -182 -315 c-100 -173 -182 -321 -182 -329 -1 -7
             81 -159 181 -337 l183 -324 372 0 371 0 186 325 c102 179 186 330 186 337 0 7
             -82 157 -182 335 l-183 323 -250 -2 c-137 -1 -306 -5 -375 -8z m588 -454 c61
             -106 112 -197 112 -201 0 -4 -50 -95 -111 -201 l-112 -194 -231 0 -231 0 -105
             181 c-58 100 -109 190 -114 200 -6 14 17 63 104 213 l112 196 232 0 231 0 113
-            -194z"/>
-            <path d="M591 1001 l-54 -6 -87 -150 -88 -150 176 -3 c97 -1 181 -1 187 2 9 3
-            165 267 183 308 4 9 -233 7 -317 -1z"/>
-            <path d="M872 824 l-90 -159 36 -66 c113 -201 147 -258 153 -251 8 8 179 302
-            179 307 0 2 -37 68 -83 147 -46 78 -88 151 -94 162 -9 16 -24 -5 -101 -140z"/>
-            <path d="M360 625 c0 -7 148 -263 172 -297 l19 -28 186 0 c101 0 183 3 181 8
-            -1 4 -43 78 -93 165 l-90 157 -187 0 c-104 0 -188 -2 -188 -5z"/>
+            -194z"
+            />
+            <path
+              d="M591 1001 l-54 -6 -87 -150 -88 -150 176 -3 c97 -1 181 -1 187 2 9 3
+            165 267 183 308 4 9 -233 7 -317 -1z"
+            />
+            <path
+              d="M872 824 l-90 -159 36 -66 c113 -201 147 -258 153 -251 8 8 179 302
+            179 307 0 2 -37 68 -83 147 -46 78 -88 151 -94 162 -9 16 -24 -5 -101 -140z"
+            />
+            <path
+              d="M360 625 c0 -7 148 -263 172 -297 l19 -28 186 0 c101 0 183 3 181 8
+            -1 4 -43 78 -93 165 l-90 157 -187 0 c-104 0 -188 -2 -188 -5z"
+            />
           </g>
         </svg>
       </div>
@@ -70,51 +81,44 @@ const chainStore = useBlockchain()
         {{ $t('pages.slogan') }}
       </p>
     </div>
-    <div
-      v-if="dashboard.status !== LoadingStatus.Loaded"
-      class="flex justify-center"
-    >
+    <div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center">
       <progress class="progress progress-info w-80 h-1"></progress>
     </div>
 
-    <div v-if="featured.length>0" class="text-center text-base mt-6 text-primary">
-      <h2 class="mb-6"> Featured Blockchains 🔥 </h2>
+    <div v-if="featured.length > 0" class="text-center text-base mt-6 text-primary">
+      <h2 class="mb-6">Featured Blockchains 🔥</h2>
     </div>
 
-    <div v-if="featured.length>0"
+    <div
+      v-if="featured.length > 0"
       class="grid grid-cols-1 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
     >
-    <ChainSummary
-        v-for="(chain, index) in featured"
-        :key="index"
-        :name="chain.chainName"
-      />
+      <ChainSummary v-for="(chain, index) in featured" :key="index" :name="chain.chainName" />
     </div>
 
     <div class="text-center text-base mt-6 text-primary">
       <h2 class="mb-6">{{ $t('pages.description') }}</h2>
     </div>
 
-    <div class="flex items-center rounded-lg bg-base-100  border border-gray-200 dark:border-gray-700 mt-10">
-      <Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3"/>
-      <input :placeholder="$t('pages.search_placeholder')" class="px-4 h-10 bg-transparent flex-1 outline-none text-base" v-model="keywords" />
+    <div class="flex items-center rounded-lg bg-base-100 border border-gray-200 dark:border-gray-700 mt-10">
+      <Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3" />
+      <input
+        :placeholder="$t('pages.search_placeholder')"
+        class="px-4 h-10 bg-transparent flex-1 outline-none text-base"
+        v-model="keywords"
+      />
       <div class="px-4 text-base hidden md:!block">{{ chains.length }}/{{ dashboard.length }}</div>
     </div>
 
-    <div
-      class="grid grid-cols-1 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
-    >
-      <ChainSummary
-        v-for="(chain, index) in chains"
-        :key="index"
-        :name="chain.chainName"
-      />
+    <div class="grid grid-cols-1 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5">
+      <ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
     </div>
   </div>
 </template>
 
 <style scoped>
- .logo path{
+.logo path {
   fill: #171d30;
 }
-</style>@/components/ad/ad
+</style>
+@/components/ad/ad
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index 81918c7a..ce9fc680 100644
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -130,8 +130,8 @@
     "no_escrowed_assets": "No Escrowed Assets",
     "contract_states": "Contract States",
     "query_contract": "Query Contract",
-    "suggested_messages":"Suggested Messages",
-    "result":"Result",
+    "suggested_messages": "Suggested Messages",
+    "result": "Result",
     "tips_description_1": "This feature is available when deploying contracts via WELLDONE Code. For more information, please check the document at the link below."
   },
   "gov": {
@@ -227,8 +227,8 @@
     "signer_addr": "Signer Address",
     "consensus_pub_key": "Consensus Public Key",
     "liquid_staking": "Liquid Staking",
-    "liquid_staking_shares":"Liquid Shares",
-    "validator_bond_share":"Validator Bonded"
+    "liquid_staking_shares": "Liquid Shares",
+    "validator_bond_share": "Validator Bonded"
   },
   "statesync": {
     "title": "What's State Sync?",
diff --git a/src/plugins/i18n/locales/es.json b/src/plugins/i18n/locales/es.json
index c9b4a89b..196379cd 100644
--- a/src/plugins/i18n/locales/es.json
+++ b/src/plugins/i18n/locales/es.json
@@ -298,4 +298,4 @@
     "app_versions": "Versiones de Aplicación",
     "node_info": "Información del Nodo"
   }
-}
\ No newline at end of file
+}
diff --git a/src/plugins/i18n/locales/id.json b/src/plugins/i18n/locales/id.json
index 22e38901..f849c17e 100644
--- a/src/plugins/i18n/locales/id.json
+++ b/src/plugins/i18n/locales/id.json
@@ -1,287 +1,287 @@
 {
-    "module": {
-      "dashboard": "Dasbor",
-      "blocks": "Kumpulan Blok",
-      "staking": "Staking",
-      "governance": "Tata Kelola",
-      "parameters": "Parameter",
-      "uptime": "Pemantauan",
-      "state-sync": "State Sync",
-      "cosmwasm": "Cosmwasm",
-      "widget": "Widgets",
-      "ibc": "IBC",
-      "consensus": "Konsensus",
-      "supply": "Pasokan",
-      "account": "Akun",
-      "ecosystem": "Ekosistem",
-      "favorite": "Favorit",
-      "add_to_favorite": "Tambahkan ke favorit",
-      "all_blockchains": "All Blockchain",
-      "sponsors": "Sponsors",
-      "links": "Tautan"
+  "module": {
+    "dashboard": "Dasbor",
+    "blocks": "Kumpulan Blok",
+    "staking": "Staking",
+    "governance": "Tata Kelola",
+    "parameters": "Parameter",
+    "uptime": "Pemantauan",
+    "state-sync": "State Sync",
+    "cosmwasm": "Cosmwasm",
+    "widget": "Widgets",
+    "ibc": "IBC",
+    "consensus": "Konsensus",
+    "supply": "Pasokan",
+    "account": "Akun",
+    "ecosystem": "Ekosistem",
+    "favorite": "Favorit",
+    "add_to_favorite": "Tambahkan ke favorit",
+    "all_blockchains": "All Blockchain",
+    "sponsors": "Sponsors",
+    "links": "Tautan"
+  },
+  "pages": {
+    "title": "Ping Dashboard",
+    "title_all": "404",
+    "tag": "Beta",
+    "tag_all": "Halaman Tidak Ditemukan",
+    "slogan": "Ping Dashboard bukan hanya sebuah penjelajah tetapi juga sebuah dompet dan masih banyak lagi ... 🛠",
+    "description": "Cosmos Ecosystem Blockchains 🚀",
+    "search_placeholder": "Telusuri Rantai",
+    "description_all": "Kami tidak dapat menemukan halaman yang anda cari.",
+    "btn_index": "Kembali ke awal"
+  },
+  "account": {
+    "type": "Tipe",
+    "address": "Alamat",
+    "acc": "Akun",
+    "acc_num": "Nomor Akun",
+    "sequence": "Urutan",
+    "pub_key": "Kunci PUblik",
+    "assets": "Aset",
+    "btn_send": "Kirim",
+    "btn_transfer": "Transfer",
+    "total_value": "Nilai Total",
+    "delegations": "Delegasi",
+    "no_delegations": "Tidak Ada Delegasi",
+    "btn_delegate": "Delegate",
+    "btn_redelegate": "Redelegate",
+    "btn_withdraw": "Withdraw",
+    "btn_unbond": "Lepaskan ikatan",
+    "validator": "Validator",
+    "delegation": "Delegasi",
+    "rewards": "Hadiah",
+    "action": "Tindakan",
+    "unbonding_delegations": "Delegasi yang tidak terikat",
+    "creation_height": "Tingkat Teratas",
+    "initial_balance": "Saldo Awal",
+    "balance": "Saldo",
+    "completion_time": "Waktu Penyelesaian",
+    "transactions": "Transaksi",
+    "no_transactions": "Tidak Ada Transaksi",
+    "height": "Ketinggian",
+    "hash": "Hash",
+    "messages": "Pesan",
+    "time": "Waktu",
+    "error": "Akun tidak ada di dalam rantai"
+  },
+  "block": {
+    "estimated_time": "Estimasi Waktu",
+    "countdown_for_block": "Hitung Mundur Untuk Blok",
+    "countdown_for_block_input": "Masukkan Nomor Blok Ke Target Baru",
+    "btn_update": "Perbarui",
+    "current_height": "Ketinggian Saat Ini",
+    "remaining_blocks": "Blok Yang Tersisa",
+    "average_block_time": "Rata-rata Waktu Blok",
+    "block_header": "Blok Teratas",
+    "last_commit": "Komit Terakhir",
+    "recent": "Terkini",
+    "future": "Masa Depan",
+    "fees": "Biaya",
+    "only_tx": "Hanya menampilkan txs di blok terbaru"
+  },
+  "consensus": {
+    "monitor": "Memantau",
+    "onboard_rate": "Penggabungan Nilai",
+    "o": "O",
+    "h": "H",
+    "r": "R",
+    "s": "S",
+    "round": "Putaran",
+    "step": "Langkah",
+    "updated_at": "Diperbarui pada",
+    "proposer_sign": "Proposer Ditandatangani",
+    "proposer_not_sign": "Proposer Tidak Ditandatangani",
+    "sign": "Ditandatangani",
+    "not_sign": "Tidak Ditandatangani",
+    "tips": "Tips",
+    "tips_description_1": "Alat ini berguna bagi validator untuk memantau siapa saja yang berada di dalam penggabungan selama peningkatan",
+    "tips_description_2": "Jika Anda ingin mengubah titik akhir rpc bawaan. pastikan bahwa `https` dan `CORS` diaktifkan pada server Anda."
+  },
+  "cosmwasm": {
+    "title": "Cosmos Wasm Smart Contracts",
+    "code_id": "Kode Id",
+    "code_hash": "Kode Hash",
+    "creator": "Pencipta",
+    "permissions": "Perizinan",
+    "btn_up_sc": "Unggah Smart Contract",
+    "contract_list_code": "Daftar Kode Kontrak",
+    "contract_list": "Daftar Kontrak",
+    "btn_contract": "Kontrak",
+    "btn_funds": "Dana",
+    "btn_states": "Bagian",
+    "btn_fees": "Biaya",
+    "btn_query": "Query",
+    "btn_execute": "Eksekusi",
+    "instantiate_contract": "Kontrak Instansiasi",
+    "contract_detail": "Rincian Kontrak",
+    "contract_balances": "Saldo Kontrak",
+    "no_escrowed_assets": "Tidak Ada Aset yang Dititipkan",
+    "contract_states": "Bagian Kontrak",
+    "query_contract": "Query Kontrak",
+    "tips_description_1": "This feature is available when deploying contracts via WELLDONE Code. For more information, please check the document at the link below."
+  },
+  "gov": {
+    "voting": "Voting",
+    "passed": "Disetujui",
+    "rejected": "Ditolak",
+    "tally": "Perhitungan",
+    "btn_vote": "Vote",
+    "btn_deposit": "Deposit",
+    "timeline": "Jadwal",
+    "submit_at": "Dikirim pada",
+    "deposited_at": "Didepositkan pada",
+    "vote_start_from": "Voting dimulai dari",
+    "vote_end": "Voting berakhir",
+    "current_status": "Status Saat Ini",
+    "proposal_statuses": {
+      "PROPOSAL_STATUS_DEPOSIT_PERIOD": "Periode Deposit",
+      "PROPOSAL_STATUS_VOTING_PERIOD": "Periode Pemungutan Suara",
+      "PROPOSAL_STATUS_PASSED": "Disetujui",
+      "PROPOSAL_STATUS_REJECTED": "Ditolak",
+      "PROPOSAL_STATUS_FAILED": "Gagal"
     },
-    "pages": {
-      "title": "Ping Dashboard",
-      "title_all": "404",
-      "tag": "Beta",
-      "tag_all": "Halaman Tidak Ditemukan",
-      "slogan": "Ping Dashboard bukan hanya sebuah penjelajah tetapi juga sebuah dompet dan masih banyak lagi ... 🛠",
-      "description": "Cosmos Ecosystem Blockchains 🚀",
-      "search_placeholder": "Telusuri Rantai",
-      "description_all": "Kami tidak dapat menemukan halaman yang anda cari.",
-      "btn_index": "Kembali ke awal"
-    },
-    "account": {
-      "type": "Tipe",
-      "address": "Alamat",
-      "acc": "Akun",
-      "acc_num": "Nomor Akun",
-      "sequence": "Urutan",
-      "pub_key": "Kunci PUblik",
-      "assets": "Aset",
-      "btn_send": "Kirim",
-      "btn_transfer": "Transfer",
-      "total_value": "Nilai Total",
-      "delegations": "Delegasi",
-      "no_delegations": "Tidak Ada Delegasi",
-      "btn_delegate": "Delegate",
-      "btn_redelegate": "Redelegate",
-      "btn_withdraw": "Withdraw",
-      "btn_unbond": "Lepaskan ikatan",
-      "validator": "Validator",
-      "delegation": "Delegasi",
-      "rewards": "Hadiah",
-      "action": "Tindakan",
-      "unbonding_delegations": "Delegasi yang tidak terikat",
-      "creation_height": "Tingkat Teratas",
-      "initial_balance": "Saldo Awal",
-      "balance": "Saldo",
-      "completion_time": "Waktu Penyelesaian",
-      "transactions": "Transaksi",
-      "no_transactions": "Tidak Ada Transaksi",
-      "height": "Ketinggian",
-      "hash": "Hash",
-      "messages": "Pesan",
-      "time": "Waktu",
-      "error": "Akun tidak ada di dalam rantai"
-    },
-    "block": {
-      "estimated_time": "Estimasi Waktu",
-      "countdown_for_block": "Hitung Mundur Untuk Blok",
-      "countdown_for_block_input": "Masukkan Nomor Blok Ke Target Baru",
-      "btn_update": "Perbarui",
-      "current_height": "Ketinggian Saat Ini",
-      "remaining_blocks": "Blok Yang Tersisa",
-      "average_block_time": "Rata-rata Waktu Blok",
-      "block_header": "Blok Teratas",
-      "last_commit": "Komit Terakhir",
-      "recent": "Terkini",
-      "future": "Masa Depan",
-      "fees": "Biaya",
-      "only_tx": "Hanya menampilkan txs di blok terbaru"
-    },
-    "consensus": {
-      "monitor": "Memantau",
-      "onboard_rate": "Penggabungan Nilai",
-      "o": "O",
-      "h": "H",
-      "r": "R",
-      "s": "S",
-      "round": "Putaran",
-      "step": "Langkah",
-      "updated_at": "Diperbarui pada",
-      "proposer_sign": "Proposer Ditandatangani",
-      "proposer_not_sign": "Proposer Tidak Ditandatangani",
-      "sign": "Ditandatangani",
-      "not_sign": "Tidak Ditandatangani",
-      "tips": "Tips",
-      "tips_description_1": "Alat ini berguna bagi validator untuk memantau siapa saja yang berada di dalam penggabungan selama peningkatan",
-      "tips_description_2": "Jika Anda ingin mengubah titik akhir rpc bawaan. pastikan bahwa `https` dan `CORS` diaktifkan pada server Anda."
-    },
-    "cosmwasm": {
-      "title": "Cosmos Wasm Smart Contracts",
-      "code_id": "Kode Id",
-      "code_hash": "Kode Hash",
-      "creator": "Pencipta",
-      "permissions": "Perizinan",
-      "btn_up_sc": "Unggah Smart Contract",
-      "contract_list_code": "Daftar Kode Kontrak",
-      "contract_list": "Daftar Kontrak",
-      "btn_contract": "Kontrak",
-      "btn_funds": "Dana",
-      "btn_states": "Bagian",
-      "btn_fees": "Biaya",
-      "btn_query": "Query",
-      "btn_execute": "Eksekusi",
-      "instantiate_contract": "Kontrak Instansiasi",
-      "contract_detail": "Rincian Kontrak",
-      "contract_balances": "Saldo Kontrak",
-      "no_escrowed_assets": "Tidak Ada Aset yang Dititipkan",
-      "contract_states": "Bagian Kontrak",
-      "query_contract": "Query Kontrak",
-      "tips_description_1": "This feature is available when deploying contracts via WELLDONE Code. For more information, please check the document at the link below."
-    },
-    "gov": {
-      "voting": "Voting",
-      "passed": "Disetujui",
-      "rejected": "Ditolak",
-      "tally": "Perhitungan",
-      "btn_vote": "Vote",
-      "btn_deposit": "Deposit",
-      "timeline": "Jadwal",
-      "submit_at": "Dikirim pada",
-      "deposited_at": "Didepositkan pada",
-      "vote_start_from": "Voting dimulai dari",
-      "vote_end": "Voting berakhir",
-      "current_status": "Status Saat Ini",
-      "proposal_statuses": {
-        "PROPOSAL_STATUS_DEPOSIT_PERIOD": "Periode Deposit",
-        "PROPOSAL_STATUS_VOTING_PERIOD": "Periode Pemungutan Suara",
-        "PROPOSAL_STATUS_PASSED": "Disetujui",
-        "PROPOSAL_STATUS_REJECTED": "Ditolak",
-        "PROPOSAL_STATUS_FAILED": "Gagal"
-      },
-      "upgrade_plan": "Peningkatan Rencana",
-      "votes": "Suara"
-    },
-    "ibc": {
-      "title": "Koneksi IBC",
-      "title_2": "Klien IBC",
-      "registry": "Registri",
-      "connection_id": "ID Koneksi",
-      "btn_apply": "Ajukan",
-      "trust_parameters": "Parameter Kepercayaan",
-      "trust_level": "Tingkat Kepercayaan",
-      "trusting_period": "Periode Kepercayaan",
-      "unbonding_period": "Periode Pembatalan Tautan",
-      "max_clock_drift": "Maksimum Selisih Jam",
-      "frozen_height": "Ketinggian Terkunci",
-      "latest_height": "Ketinggian Terbaru",
-      "upgrade_parameters": "Parameter Pembaruan",
-      "allow_update_after_expiry": "Izinkan pembaruan setelah kedaluwarsa",
-      "allow_update_after_misbehaviour": "Izinkan pembaruan setelah perilaku yang tidak pantas",
-      "upgrade_path": "Jalur Pembaruan",
-      "channels": "Saluran",
-      "txs": "Transaksi",
-      "channel_id": "ID Saluran",
-      "port_id": "ID Port",
-      "state": "Status",
-      "counterparty": "Pihak Lawan",
-      "hops": "Hops",
-      "version": "Versi",
-      "ordering": "Pemesanan",
-      "height": "Ketinggian",
-      "txhash": "Hash Transaksi",
-      "messages": "Pesan",
-      "time": "Waktu",
-      "btn_out": "Keluar",
-      "btn_in": "Masuk"
-    },
-    "staking": {
-      "inflation": "Inflasi",
-      "unbonding_time": "Waktu Pembatalan Tautan",
-      "double_sign_slashing": "Pemotongan Ganda Tanda Tangan",
-      "downtime_slashing": "Pemotongan Downtime",
-      "popular": "Populer",
-      "active": "Aktif",
-      "inactive": "Tidak Aktif",
-      "rank": "Peringkat",
-      "validator": "Validator",
-      "voting_power": "Kekuatan Suara",
-      "24h_changes": "Perubahan 24 Jam",
-      "commission": "Komisi",
-      "actions": "Tindakan",
-      "jailed": "Dipenjara",
-      "top": "Teratas",
-      "description": "Mendelegasikan ke validator peringkat lebih rendah akan meningkatkan keamanan keseluruhan jaringan",
-      "about_us": "Tentang Kami",
-      "website": "Website",
-      "contact": "Kontak",
-      "validator_status": "Status Validator",
-      "status": "Status",
-      "total_bonded": "Total Jumlah Token Terikat",
-      "self_bonded": "Total Token Terikat Sendiri",
-      "min_self": "Minimum Delegasi Sendiri",
-      "annual_profit": "Keuntungan Tahunan",
-      "unbonding_height": "Ketinggian Pembatalan Tautan",
-      "commissions_&_rewards": "Komisi & Imbalan",
-      "commissions": "Komisi",
-      "outstanding": "Total Imbalan",
-      "addresses": "Kumpulan Alamat",
-      "account_addr": "Alamat Akun",
-      "operator_addr": "Alamat Operator",
-      "hex_addr": "Alamat Hex",
-      "signer_addr": "Alamat Penandatangan",
-      "consensus_pub_key": "Kunci Publik Konsensus"
-    },
-    "statesync": {
-      "title": "Apa itu State Sync?",
-      "title_2": "Memulai Node Baru dari State Sync",
-      "title_3": "Aktifkan Snapshot untuk State Sync",
-      "description": "Rilis Tendermint Core 0.34 mencakup dukungan untuk state sync, yang memungkinkan node baru bergabung dengan jaringan dengan mengambil snapshot dari keadaan aplikasi pada ketinggian terkini daripada mengambil dan memainkan ulang semua blok historis. Hal ini dapat mengurangi waktu yang diperlukan untuk sinkronisasi dengan jaringan dari berhari-hari menjadi beberapa menit. Klik",
-      "here": "Di sini",
-      "version": "Versi",
-      "for_more_info": "Untuk informasi lebih lanjut",
-      "text_1": "Instalasi Binary",
-      "text_1_1": "Kita perlu menginstal binary terlebih dahulu dan pastikan bahwa versinya sesuai dengan yang digunakan pada mainnet",
-      "text_2": "Aktifkan State Sync",
-      "text_2_1": "Kita dapat mengkonfigurasi Tendermint untuk menggunakan state sync di $DAEMON_HOME/config/config.toml",
-      "text_3": "Mulai menjalankan daemon",
-      "text_3_1": "Jika Anda mereset node, jalankan",
-      "text_3_2": "sebelum Anda menjalankan daemon",
-      "text_title_3": "Untuk membuat state sync berfungsi, kita dapat mengaktifkan snapshot di $DAEMON_HOME/config/app.toml"
-    },
-    "tx": {
-      "title": "Rangkuman",
-      "tx_hash": "Tx Hash",
-      "gas": "Bahan bakar",
-      "fee": "Biaya",
-      "memo": "Memo",
-      "no_messages": "Tidak ada pesan"
-    },
-    "uptime": {
-      "overall": "Secara keseluruhan",
-      "customize": "Sesuaikan",
-      "only_consumer_set": "Hanya Pengatur Konsumen",
-      "last_jailed_time": "Waktu Terakhir Dipenjara",
-      "signed_precommits": "Precommits Tersign",
-      "start_height": "Ketinggian Awal",
-      "tombstoned": "Dalam keadaan mati",
-      "minimum_uptime": "Waktu aktif minimum per jendela",
-      "my_validators": "Validator Saya",
-      "add_validators_monitor": "Tambahkan validator yang ingin Anda pantau",
-      "no": "Tidak",
-      "signed_blocks": "Blok Tersign",
-      "missing_blocks": "Blok yang Hilang",
-      "add_validators": "Tambahkan Validator",
-      "add": "Tambahkan",
-      "legend": "Legend",
-      "committed": "Committed",
-      "precommitted": "Precommitted",
-      "missed": "Missed"
-    },
-    "widget": {
-      "title": "Pengaturan Awal",
-      "endpoint": "Titik Akhir",
-      "select_endpoint": "Pilih Titik Akhir",
-      "text_1": "Impor skrip global",
-      "text_2": "Hubungkan Dompet",
-      "text_3": "Konversi Osmosis"
-    },
-    "index": {
-      "rank": "Peringkat",
-      "price_calculator": "Kalkulator Harga",
-      "close": "Tutup",
-      "buy": "Beli",
-      "active_proposals": "Proposal Aktif",
-      "no_active_proposals": "Tidak ada proposal aktif",
-      "more": "Selengkapnya",
-      "reward": "Hadiah",
-      "unbonding": "Pemisahan",
-      "btn_withdraw_reward": "Tarik Hadiah",
-      "btn_swap": "Tukar",
-      "receive": "Terima",
-      "app_versions": "Versi Aplikasi",
-      "node_info": "Informasi Node"
-    }
+    "upgrade_plan": "Peningkatan Rencana",
+    "votes": "Suara"
+  },
+  "ibc": {
+    "title": "Koneksi IBC",
+    "title_2": "Klien IBC",
+    "registry": "Registri",
+    "connection_id": "ID Koneksi",
+    "btn_apply": "Ajukan",
+    "trust_parameters": "Parameter Kepercayaan",
+    "trust_level": "Tingkat Kepercayaan",
+    "trusting_period": "Periode Kepercayaan",
+    "unbonding_period": "Periode Pembatalan Tautan",
+    "max_clock_drift": "Maksimum Selisih Jam",
+    "frozen_height": "Ketinggian Terkunci",
+    "latest_height": "Ketinggian Terbaru",
+    "upgrade_parameters": "Parameter Pembaruan",
+    "allow_update_after_expiry": "Izinkan pembaruan setelah kedaluwarsa",
+    "allow_update_after_misbehaviour": "Izinkan pembaruan setelah perilaku yang tidak pantas",
+    "upgrade_path": "Jalur Pembaruan",
+    "channels": "Saluran",
+    "txs": "Transaksi",
+    "channel_id": "ID Saluran",
+    "port_id": "ID Port",
+    "state": "Status",
+    "counterparty": "Pihak Lawan",
+    "hops": "Hops",
+    "version": "Versi",
+    "ordering": "Pemesanan",
+    "height": "Ketinggian",
+    "txhash": "Hash Transaksi",
+    "messages": "Pesan",
+    "time": "Waktu",
+    "btn_out": "Keluar",
+    "btn_in": "Masuk"
+  },
+  "staking": {
+    "inflation": "Inflasi",
+    "unbonding_time": "Waktu Pembatalan Tautan",
+    "double_sign_slashing": "Pemotongan Ganda Tanda Tangan",
+    "downtime_slashing": "Pemotongan Downtime",
+    "popular": "Populer",
+    "active": "Aktif",
+    "inactive": "Tidak Aktif",
+    "rank": "Peringkat",
+    "validator": "Validator",
+    "voting_power": "Kekuatan Suara",
+    "24h_changes": "Perubahan 24 Jam",
+    "commission": "Komisi",
+    "actions": "Tindakan",
+    "jailed": "Dipenjara",
+    "top": "Teratas",
+    "description": "Mendelegasikan ke validator peringkat lebih rendah akan meningkatkan keamanan keseluruhan jaringan",
+    "about_us": "Tentang Kami",
+    "website": "Website",
+    "contact": "Kontak",
+    "validator_status": "Status Validator",
+    "status": "Status",
+    "total_bonded": "Total Jumlah Token Terikat",
+    "self_bonded": "Total Token Terikat Sendiri",
+    "min_self": "Minimum Delegasi Sendiri",
+    "annual_profit": "Keuntungan Tahunan",
+    "unbonding_height": "Ketinggian Pembatalan Tautan",
+    "commissions_&_rewards": "Komisi & Imbalan",
+    "commissions": "Komisi",
+    "outstanding": "Total Imbalan",
+    "addresses": "Kumpulan Alamat",
+    "account_addr": "Alamat Akun",
+    "operator_addr": "Alamat Operator",
+    "hex_addr": "Alamat Hex",
+    "signer_addr": "Alamat Penandatangan",
+    "consensus_pub_key": "Kunci Publik Konsensus"
+  },
+  "statesync": {
+    "title": "Apa itu State Sync?",
+    "title_2": "Memulai Node Baru dari State Sync",
+    "title_3": "Aktifkan Snapshot untuk State Sync",
+    "description": "Rilis Tendermint Core 0.34 mencakup dukungan untuk state sync, yang memungkinkan node baru bergabung dengan jaringan dengan mengambil snapshot dari keadaan aplikasi pada ketinggian terkini daripada mengambil dan memainkan ulang semua blok historis. Hal ini dapat mengurangi waktu yang diperlukan untuk sinkronisasi dengan jaringan dari berhari-hari menjadi beberapa menit. Klik",
+    "here": "Di sini",
+    "version": "Versi",
+    "for_more_info": "Untuk informasi lebih lanjut",
+    "text_1": "Instalasi Binary",
+    "text_1_1": "Kita perlu menginstal binary terlebih dahulu dan pastikan bahwa versinya sesuai dengan yang digunakan pada mainnet",
+    "text_2": "Aktifkan State Sync",
+    "text_2_1": "Kita dapat mengkonfigurasi Tendermint untuk menggunakan state sync di $DAEMON_HOME/config/config.toml",
+    "text_3": "Mulai menjalankan daemon",
+    "text_3_1": "Jika Anda mereset node, jalankan",
+    "text_3_2": "sebelum Anda menjalankan daemon",
+    "text_title_3": "Untuk membuat state sync berfungsi, kita dapat mengaktifkan snapshot di $DAEMON_HOME/config/app.toml"
+  },
+  "tx": {
+    "title": "Rangkuman",
+    "tx_hash": "Tx Hash",
+    "gas": "Bahan bakar",
+    "fee": "Biaya",
+    "memo": "Memo",
+    "no_messages": "Tidak ada pesan"
+  },
+  "uptime": {
+    "overall": "Secara keseluruhan",
+    "customize": "Sesuaikan",
+    "only_consumer_set": "Hanya Pengatur Konsumen",
+    "last_jailed_time": "Waktu Terakhir Dipenjara",
+    "signed_precommits": "Precommits Tersign",
+    "start_height": "Ketinggian Awal",
+    "tombstoned": "Dalam keadaan mati",
+    "minimum_uptime": "Waktu aktif minimum per jendela",
+    "my_validators": "Validator Saya",
+    "add_validators_monitor": "Tambahkan validator yang ingin Anda pantau",
+    "no": "Tidak",
+    "signed_blocks": "Blok Tersign",
+    "missing_blocks": "Blok yang Hilang",
+    "add_validators": "Tambahkan Validator",
+    "add": "Tambahkan",
+    "legend": "Legend",
+    "committed": "Committed",
+    "precommitted": "Precommitted",
+    "missed": "Missed"
+  },
+  "widget": {
+    "title": "Pengaturan Awal",
+    "endpoint": "Titik Akhir",
+    "select_endpoint": "Pilih Titik Akhir",
+    "text_1": "Impor skrip global",
+    "text_2": "Hubungkan Dompet",
+    "text_3": "Konversi Osmosis"
+  },
+  "index": {
+    "rank": "Peringkat",
+    "price_calculator": "Kalkulator Harga",
+    "close": "Tutup",
+    "buy": "Beli",
+    "active_proposals": "Proposal Aktif",
+    "no_active_proposals": "Tidak ada proposal aktif",
+    "more": "Selengkapnya",
+    "reward": "Hadiah",
+    "unbonding": "Pemisahan",
+    "btn_withdraw_reward": "Tarik Hadiah",
+    "btn_swap": "Tukar",
+    "receive": "Terima",
+    "app_versions": "Versi Aplikasi",
+    "node_info": "Informasi Node"
+  }
 }
diff --git a/src/plugins/i18n/locales/ja.json b/src/plugins/i18n/locales/ja.json
index 97dd39f4..c0ac1c8a 100644
--- a/src/plugins/i18n/locales/ja.json
+++ b/src/plugins/i18n/locales/ja.json
@@ -189,113 +189,113 @@
     "btn_in": "入"
   },
   "staking": {
-  "inflation": "インフレーション",
-  "unbonding_time": "アンバンディング時間",
-  "double_sign_slashing": "ダブルサインの罰金",
-  "downtime_slashing": "ダウンタイムの罰金",
-  "popular": "人気",
-  "active": "アクティブ",
-  "inactive": "非アクティブ",
-  "rank": "ランク",
-  "validator": "バリデーター",
-  "voting_power": "投票権",
-  "24h_changes": "24時間の変化",
-  "commission": "手数料",
-  "actions": "アクション",
-  "jailed": "投獄中",
-  "top": "トップ",
-  "description": "低ランクのバリデーターに委任すると、ネットワーク全体のセキュリティが向上します。",
-  "about_us": "私たちについて",
-  "website": "ウェブサイト",
-  "contact": "お問い合わせ",
-  "validator_status": "バリデーターの状態",
-  "status": "ステータス",
-  "total_bonded": "総担保トークン",
-  "self_bonded": "自己担保",
-  "min_self": "最小自己委任",
-  "annual_profit": "年次利益",
-  "unbonding_height": "アンバンディング高さ",
-  "commissions_&_rewards": "手数料と報酬",
-  "commissions": "手数料",
-  "outstanding": "未解決",
-  "addresses": "アドレス",
-  "account_addr": "アカウントアドレス",
-  "operator_addr": "オペレーターアドレス",
-  "hex_addr": "16進数アドレス",
-  "signer_addr": "署名者アドレス",
-  "consensus_pub_key": "コンセンサス公開鍵",
-  "liquid_staking": "流動性ステーキング",
-  "liquid_staking_shares": "流動性シェア",
-  "validator_bond_share": "バリデーター担保シェア"
-},
+    "inflation": "インフレーション",
+    "unbonding_time": "アンバンディング時間",
+    "double_sign_slashing": "ダブルサインの罰金",
+    "downtime_slashing": "ダウンタイムの罰金",
+    "popular": "人気",
+    "active": "アクティブ",
+    "inactive": "非アクティブ",
+    "rank": "ランク",
+    "validator": "バリデーター",
+    "voting_power": "投票権",
+    "24h_changes": "24時間の変化",
+    "commission": "手数料",
+    "actions": "アクション",
+    "jailed": "投獄中",
+    "top": "トップ",
+    "description": "低ランクのバリデーターに委任すると、ネットワーク全体のセキュリティが向上します。",
+    "about_us": "私たちについて",
+    "website": "ウェブサイト",
+    "contact": "お問い合わせ",
+    "validator_status": "バリデーターの状態",
+    "status": "ステータス",
+    "total_bonded": "総担保トークン",
+    "self_bonded": "自己担保",
+    "min_self": "最小自己委任",
+    "annual_profit": "年次利益",
+    "unbonding_height": "アンバンディング高さ",
+    "commissions_&_rewards": "手数料と報酬",
+    "commissions": "手数料",
+    "outstanding": "未解決",
+    "addresses": "アドレス",
+    "account_addr": "アカウントアドレス",
+    "operator_addr": "オペレーターアドレス",
+    "hex_addr": "16進数アドレス",
+    "signer_addr": "署名者アドレス",
+    "consensus_pub_key": "コンセンサス公開鍵",
+    "liquid_staking": "流動性ステーキング",
+    "liquid_staking_shares": "流動性シェア",
+    "validator_bond_share": "バリデーター担保シェア"
+  },
   "statesync": {
-  "title": "ステートシンクとは？",
-  "title_2": "ステートシンクから新しいノードを開始",
-  "title_3": "ステートシンクのためにスナップショットを有効にする",
-  "description": "Tendermint Core 0.34リリースはステートシンクをサポートしており、新しいノードが最近の高さでアプリケーションの状態のスナップショットを取得してネットワークに参加できるようにします。これにより、数日から数分に同期にかかる時間を短縮できます。クリック",
-  "here": "こちら",
-  "version": "バージョン",
-  "for_more_info": "詳細情報は",
-  "text_1": "バイナリをインストール",
-  "text_1_1": "最初にバイナリをインストールし、メインネットで現在使用されているバージョンであることを確認する必要があります。",
-  "text_2": "ステートシンクを有効にする",
-  "text_2_1": "Tendermintを$DAEMON_HOME/config/config.tomlでステートシンクを使用するように構成できます。",
-  "text_3": "デーモンを開始",
-  "text_3_1": "ノードをリセットしている場合は、デーモンを開始する前に実行します。",
-  "text_3_2": "",
-  "text_title_3": "ステートシンクを機能させるために、$DAEMON_HOME/config/app.tomlでスナップショットを有効にできます。"
-},
+    "title": "ステートシンクとは？",
+    "title_2": "ステートシンクから新しいノードを開始",
+    "title_3": "ステートシンクのためにスナップショットを有効にする",
+    "description": "Tendermint Core 0.34リリースはステートシンクをサポートしており、新しいノードが最近の高さでアプリケーションの状態のスナップショットを取得してネットワークに参加できるようにします。これにより、数日から数分に同期にかかる時間を短縮できます。クリック",
+    "here": "こちら",
+    "version": "バージョン",
+    "for_more_info": "詳細情報は",
+    "text_1": "バイナリをインストール",
+    "text_1_1": "最初にバイナリをインストールし、メインネットで現在使用されているバージョンであることを確認する必要があります。",
+    "text_2": "ステートシンクを有効にする",
+    "text_2_1": "Tendermintを$DAEMON_HOME/config/config.tomlでステートシンクを使用するように構成できます。",
+    "text_3": "デーモンを開始",
+    "text_3_1": "ノードをリセットしている場合は、デーモンを開始する前に実行します。",
+    "text_3_2": "",
+    "text_title_3": "ステートシンクを機能させるために、$DAEMON_HOME/config/app.tomlでスナップショットを有効にできます。"
+  },
   "tx": {
-  "title": "概要",
-  "tx_hash": "取引ハッシュ",
-  "gas": "ガス",
-  "fee": "手数料",
-  "memo": "メモ",
-  "no_messages": "メッセージはありません"
-},
+    "title": "概要",
+    "tx_hash": "取引ハッシュ",
+    "gas": "ガス",
+    "fee": "手数料",
+    "memo": "メモ",
+    "no_messages": "メッセージはありません"
+  },
   "uptime": {
-  "overall": "全体",
-  "customize": "カスタマイズ",
-  "only_consumer_set": "消費者セットのみ",
-  "last_jailed_time": "最終投獄時間",
-  "signed_precommits": "署名済みプレコミット",
-  "start_height": "開始高さ",
-  "tombstoned": "トムストーン化",
-  "minimum_uptime": "ウィンドウごとの最小稼働時間",
-  "my_validators": "私のバリデーター",
-  "add_validators_monitor": "監視したいバリデーターを追加",
-  "no": "いいえ",
-  "signed_blocks": "署名済みブロック",
-  "missing_blocks": "欠落したブロック",
-  "add_validators": "バリデーターを追加",
-  "add": "追加",
-  "legend": "凡例",
-  "committed": "コミット済み",
-  "precommitted": "プレコミット済み",
-  "missed": "見逃し"
+    "overall": "全体",
+    "customize": "カスタマイズ",
+    "only_consumer_set": "消費者セットのみ",
+    "last_jailed_time": "最終投獄時間",
+    "signed_precommits": "署名済みプレコミット",
+    "start_height": "開始高さ",
+    "tombstoned": "トムストーン化",
+    "minimum_uptime": "ウィンドウごとの最小稼働時間",
+    "my_validators": "私のバリデーター",
+    "add_validators_monitor": "監視したいバリデーターを追加",
+    "no": "いいえ",
+    "signed_blocks": "署名済みブロック",
+    "missing_blocks": "欠落したブロック",
+    "add_validators": "バリデーターを追加",
+    "add": "追加",
+    "legend": "凡例",
+    "committed": "コミット済み",
+    "precommitted": "プレコミット済み",
+    "missed": "見逃し"
   },
   "widget": {
-  "title": "初期設定",
-  "endpoint": "エンドポイント",
-  "select_endpoint": "エンドポイントを選択",
-  "text_1": "グローバルスクリプトをインポート",
-  "text_2": "ウォレットに接続",
-  "text_3": "オスモシス変換"
+    "title": "初期設定",
+    "endpoint": "エンドポイント",
+    "select_endpoint": "エンドポイントを選択",
+    "text_1": "グローバルスクリプトをインポート",
+    "text_2": "ウォレットに接続",
+    "text_3": "オスモシス変換"
   },
   "index": {
-  "rank": "ランク",
-  "price_calculator": "価格計算機",
-  "close": "閉じる",
-  "buy": "購入",
-  "active_proposals": "アクティブな提案",
-  "no_active_proposals": "アクティブな提案はありません",
-  "more": "もっと",
-  "reward": "報酬",
-  "unbonding": "アンバンディング",
-  "btn_withdraw_reward": "報酬を引き出す",
-  "btn_swap": "スワップ",
-  "receive": "受け取る",
-  "app_versions": "アプリケーションバージョン",
-  "node_info": "ノード情報"
+    "rank": "ランク",
+    "price_calculator": "価格計算機",
+    "close": "閉じる",
+    "buy": "購入",
+    "active_proposals": "アクティブな提案",
+    "no_active_proposals": "アクティブな提案はありません",
+    "more": "もっと",
+    "reward": "報酬",
+    "unbonding": "アンバンディング",
+    "btn_withdraw_reward": "報酬を引き出す",
+    "btn_swap": "スワップ",
+    "receive": "受け取る",
+    "app_versions": "アプリケーションバージョン",
+    "node_info": "ノード情報"
   }
 }
diff --git a/src/plugins/i18n/locales/ko.json b/src/plugins/i18n/locales/ko.json
index 1da9cf71..8fe5b77b 100644
--- a/src/plugins/i18n/locales/ko.json
+++ b/src/plugins/i18n/locales/ko.json
@@ -189,44 +189,44 @@
     "btn_in": "입력"
   },
   "staking": {
-  "inflation": "인플레이션",
-  "unbonding_time": "언본딩 시간",
-  "double_sign_slashing": "이중 서명 슬래싱",
-  "downtime_slashing": "다운타임 슬래싱",
-  "popular": "인기",
-  "active": "활성",
-  "inactive": "비활성",
-  "rank": "순위",
-  "validator": "검증인",
-  "voting_power": "투표 권한",
-  "24h_changes": "24시간 변화",
-  "commission": "커미션",
-  "actions": "작업",
-  "jailed": "감금됨",
-  "top": "상위",
-  "description": "순위가 낮은 검증인에게 위임하면 네트워크의 전체 보안을 강화할 수 있습니다.",
-  "about_us": "회사 소개",
-  "website": "웹사이트",
-  "contact": "연락처",
-  "validator_status": "검증인 상태",
-  "status": "상태",
-  "total_bonded": "전체 본딩 토큰",
-  "self_bonded": "셀프 본딩",
-  "min_self": "최소 셀프 위임",
-  "annual_profit": "연간 수익",
-  "unbonding_height": "언본딩 높이",
-  "commissions_&_rewards": "커미션 및 보상",
-  "commissions": "커미션",
-  "outstanding": "미지급",
-  "addresses": "주소",
-  "account_addr": "계정 주소",
-  "operator_addr": "운영자 주소",
-  "hex_addr": "Hex 주소",
-  "signer_addr": "서명자 주소",
-  "consensus_pub_key": "합의 공개 키",
-  "liquid_staking": "유동 스테이킹",
-  "liquid_staking_shares": "유동 지분",
-  "validator_bond_share": "검증인 본딩 지분"
+    "inflation": "인플레이션",
+    "unbonding_time": "언본딩 시간",
+    "double_sign_slashing": "이중 서명 슬래싱",
+    "downtime_slashing": "다운타임 슬래싱",
+    "popular": "인기",
+    "active": "활성",
+    "inactive": "비활성",
+    "rank": "순위",
+    "validator": "검증인",
+    "voting_power": "투표 권한",
+    "24h_changes": "24시간 변화",
+    "commission": "커미션",
+    "actions": "작업",
+    "jailed": "감금됨",
+    "top": "상위",
+    "description": "순위가 낮은 검증인에게 위임하면 네트워크의 전체 보안을 강화할 수 있습니다.",
+    "about_us": "회사 소개",
+    "website": "웹사이트",
+    "contact": "연락처",
+    "validator_status": "검증인 상태",
+    "status": "상태",
+    "total_bonded": "전체 본딩 토큰",
+    "self_bonded": "셀프 본딩",
+    "min_self": "최소 셀프 위임",
+    "annual_profit": "연간 수익",
+    "unbonding_height": "언본딩 높이",
+    "commissions_&_rewards": "커미션 및 보상",
+    "commissions": "커미션",
+    "outstanding": "미지급",
+    "addresses": "주소",
+    "account_addr": "계정 주소",
+    "operator_addr": "운영자 주소",
+    "hex_addr": "Hex 주소",
+    "signer_addr": "서명자 주소",
+    "consensus_pub_key": "합의 공개 키",
+    "liquid_staking": "유동 스테이킹",
+    "liquid_staking_shares": "유동 지분",
+    "validator_bond_share": "검증인 본딩 지분"
   },
   "statesync": {
     "title": "상태 동기화란?",
diff --git a/src/router/index.ts b/src/router/index.ts
index 7030ae87..2babeff5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,9 +1,9 @@
-import { useBlockchain } from "@/stores";
-import { createRouter, createWebHistory } from "vue-router";
+import { useBlockchain } from '@/stores';
+import { createRouter, createWebHistory } from 'vue-router';
 // @ts-ignore
-import { setupLayouts } from "virtual:generated-layouts";
+import { setupLayouts } from 'virtual:generated-layouts';
 // @ts-ignore
-import routes from "~pages";
+import routes from '~pages';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,15 +12,15 @@ const router = createRouter({
 
 //update current blockchain
 router.beforeEach((to) => {
-    const { chain } = to.params
-    if(chain){
-      const blockchain= useBlockchain()
-      if(chain !== blockchain.chainName) {
-        blockchain.setCurrent(chain.toString())
-      }
-    } 
-})
+  const { chain } = to.params;
+  if (chain) {
+    const blockchain = useBlockchain();
+    if (chain !== blockchain.chainName) {
+      blockchain.setCurrent(chain.toString());
+    }
+  }
+});
 
 // Docs: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/stores/useBankStore.ts b/src/stores/useBankStore.ts
index c6161422..a948bfca 100644
--- a/src/stores/useBankStore.ts
+++ b/src/stores/useBankStore.ts
@@ -10,7 +10,7 @@ export const useBankStore = defineStore('bankstore', {
       supply: {} as Coin,
       balances: {} as Record<string, Coin[]>,
       totalSupply: { supply: [] as Coin[] },
-      ibcDenoms: {} as Record<string, DenomTrace>
+      ibcDenoms: {} as Record<string, DenomTrace>,
     };
   },
   getters: {
@@ -25,9 +25,7 @@ export const useBankStore = defineStore('bankstore', {
     initial() {
       this.$reset();
       this.supply = {} as Coin;
-      const denom =
-        this.staking.params.bond_denom ||
-        this.blockchain.current?.assets[0].base;
+      const denom = this.staking.params.bond_denom || this.blockchain.current?.assets[0].base;
       if (denom) {
         this.blockchain.rpc.getBankSupplyByDenom(denom).then((res) => {
           if (res.amount) this.supply = res.amount;
@@ -41,8 +39,7 @@ export const useBankStore = defineStore('bankstore', {
       const hash = denom.replace('ibc/', '');
       let trace = this.ibcDenoms[hash];
       if (!trace) {
-        trace = (await this.blockchain.rpc.getIBCAppTransferDenom(hash))
-          .denom_trace;
+        trace = (await this.blockchain.rpc.getIBCAppTransferDenom(hash)).denom_trace;
         this.ibcDenoms[hash] = trace;
       }
       return trace;
diff --git a/src/stores/useBaseStore.ts b/src/stores/useBaseStore.ts
index 48109eb4..b476c040 100644
--- a/src/stores/useBaseStore.ts
+++ b/src/stores/useBaseStore.ts
@@ -8,118 +8,102 @@ import { fromBase64 } from '@cosmjs/encoding';
 import { useRouter } from 'vue-router';
 
 export const useBaseStore = defineStore('baseStore', {
-    state: () => {
-        return {
-            earlest: {} as Block,
-            latest: {} as Block,
-            recents: [] as Block[],
-            theme: (window.localStorage.getItem('theme') || 'dark') as
-                | 'light'
-                | 'dark',
-            connected: true,
-        };
+  state: () => {
+    return {
+      earlest: {} as Block,
+      latest: {} as Block,
+      recents: [] as Block[],
+      theme: (window.localStorage.getItem('theme') || 'dark') as 'light' | 'dark',
+      connected: true,
+    };
+  },
+  getters: {
+    blocktime(): number {
+      if (this.earlest && this.latest) {
+        if (this.latest.block?.header?.height !== this.earlest.block?.header?.height) {
+          const diff = dayjs(this.latest.block?.header?.time).diff(this.earlest.block?.header?.time);
+          const blocks = Number(this.latest.block.header.height) - Number(this.earlest.block.header.height);
+          return diff / blocks;
+        }
+      }
+      return 6000;
     },
-    getters: {
-        blocktime(): number {
-            if (this.earlest && this.latest) {
-                if (
-                    this.latest.block?.header?.height !==
-                    this.earlest.block?.header?.height
-                ) {
-                    const diff = dayjs(this.latest.block?.header?.time).diff(
-                        this.earlest.block?.header?.time
-                    );
-                    const blocks = Number(this.latest.block.header.height) - Number(this.earlest.block.header.height)
-                    return diff / (blocks);
-                }
-            }
-            return 6000;
-        },
-        blockchain() {
-            return useBlockchain();
-        },
-        currentChainId(): string {
-            return this.latest.block?.header.chain_id || '';
-        },
-        txsInRecents() {
-            const txs = [] as {
-                height: string;
-                hash: string;
-                tx: DecodedTxRaw;
-            }[];
-            this.recents.forEach((b) =>
-                b.block?.data?.txs.forEach((tx: string) => {
-                    if (tx) {
-                        const raw = fromBase64(tx);
-                        try {
-                            txs.push({
-                                height: b.block.header.height,
-                                hash: hashTx(raw),
-                                tx: decodeTxRaw(raw),
-                            });
-                        } catch (e) {
-                            console.error(e);
-                        }
-                    }
-                })
-            );
-            return txs.sort((a, b) => {return Number(b.height) - Number(a.height)});
-        },
+    blockchain() {
+      return useBlockchain();
     },
-    actions: {
-        async initial() {
-            this.fetchLatest()
-        },
-        async clearRecentBlocks() {
-            this.recents = [];
-        },
-        async fetchLatest() {
-            try{
-                this.latest = await this.blockchain.rpc?.getBaseBlockLatest();
-                this.connected = true
-            }catch(e) {
-                this.connected = false
+    currentChainId(): string {
+      return this.latest.block?.header.chain_id || '';
+    },
+    txsInRecents() {
+      const txs = [] as {
+        height: string;
+        hash: string;
+        tx: DecodedTxRaw;
+      }[];
+      this.recents.forEach((b) =>
+        b.block?.data?.txs.forEach((tx: string) => {
+          if (tx) {
+            const raw = fromBase64(tx);
+            try {
+              txs.push({
+                height: b.block.header.height,
+                hash: hashTx(raw),
+                tx: decodeTxRaw(raw),
+              });
+            } catch (e) {
+              console.error(e);
             }
-            if (
-                !this.earlest ||
-                this.earlest?.block?.header?.chain_id !=
-                    this.latest?.block?.header?.chain_id
-            ) {
-                //reset earlest and recents
-                this.earlest = this.latest;
-                this.recents = [];
-            }
-            //check if the block exists in recents
-            if (
-                this.recents.findIndex(
-                    (x) => x?.block_id?.hash === this.latest?.block_id?.hash
-                ) === -1
-            ) {
-                if (this.recents.length >= 50) {
-                    this.recents.shift();
-                }
-                this.recents.push(this.latest);
-            }
-            return this.latest;
-        },
+          }
+        })
+      );
+      return txs.sort((a, b) => {
+        return Number(b.height) - Number(a.height);
+      });
+    },
+  },
+  actions: {
+    async initial() {
+      this.fetchLatest();
+    },
+    async clearRecentBlocks() {
+      this.recents = [];
+    },
+    async fetchLatest() {
+      try {
+        this.latest = await this.blockchain.rpc?.getBaseBlockLatest();
+        this.connected = true;
+      } catch (e) {
+        this.connected = false;
+      }
+      if (!this.earlest || this.earlest?.block?.header?.chain_id != this.latest?.block?.header?.chain_id) {
+        //reset earlest and recents
+        this.earlest = this.latest;
+        this.recents = [];
+      }
+      //check if the block exists in recents
+      if (this.recents.findIndex((x) => x?.block_id?.hash === this.latest?.block_id?.hash) === -1) {
+        if (this.recents.length >= 50) {
+          this.recents.shift();
+        }
+        this.recents.push(this.latest);
+      }
+      return this.latest;
+    },
 
-        async fetchValidatorByHeight(height?: number, offset = 0) {
-            return this.blockchain.rpc.getBaseValidatorsetAt(
-                String(height),
-                offset
-            );
-        },
-        async fetchLatestValidators(offset = 0) {
-            return this.blockchain.rpc.getBaseValidatorsetLatest(offset);
-        },
-        async fetchBlock(height?: number | string) {
-            return this.blockchain.rpc.getBaseBlockAt(String(height));
-        },
-        async fetchAbciInfo() {
-            return this.blockchain.rpc.getBaseNodeInfo();
-        },
-        // async fetchNodeInfo() {
-        //     return this.blockchain.rpc.no()
-        // }
+    async fetchValidatorByHeight(height?: number, offset = 0) {
+      return this.blockchain.rpc.getBaseValidatorsetAt(String(height), offset);
     },
+    async fetchLatestValidators(offset = 0) {
+      return this.blockchain.rpc.getBaseValidatorsetLatest(offset);
+    },
+    async fetchBlock(height?: number | string) {
+      return this.blockchain.rpc.getBaseBlockAt(String(height));
+    },
+    async fetchAbciInfo() {
+      return this.blockchain.rpc.getBaseNodeInfo();
+    },
+    // async fetchNodeInfo() {
+    //     return this.blockchain.rpc.no()
+    // }
+  },
 });
diff --git a/src/stores/useBlockchain.ts b/src/stores/useBlockchain.ts
index 8f5ccded..6adcbedf 100644
--- a/src/stores/useBlockchain.ts
+++ b/src/stores/useBlockchain.ts
@@ -1,16 +1,6 @@
 import { defineStore } from 'pinia';
-import {
-  useDashboard,
-  type ChainConfig,
-  type Endpoint,
-  EndpointType,
-} from './useDashboard';
-import type {
-  NavGroup,
-  NavLink,
-  NavSectionTitle,
-  VerticalNavItems,
-} from '@/layouts/types';
+import { useDashboard, type ChainConfig, type Endpoint, EndpointType } from './useDashboard';
+import type { NavGroup, NavLink, NavSectionTitle, VerticalNavItems } from '@/layouts/types';
 import { useRouter } from 'vue-router';
 import { CosmosRestClient } from '@/libs/client';
 import {
@@ -20,7 +10,7 @@ import {
   useGovStore,
   useMintStore,
   useStakingStore,
-  useWalletStore
+  useWalletStore,
 } from '.';
 import { useBlockModule } from '@/modules/[chain]/block/block';
 import { DEFAULT } from '@/libs';
@@ -42,10 +32,10 @@ export const useBlockchain = defineStore('blockchain', {
   },
   getters: {
     current(): ChainConfig | undefined {
-      const chain = this.dashboard.chains[this.chainName]
+      const chain = this.dashboard.chains[this.chainName];
       // update chain config with dynamic updated sdk version
-      const sdkversion = localStorage.getItem(`sdk_version_${this.chainName}`)
-      if(sdkversion && chain?.versions) {
+      const sdkversion = localStorage.getItem(`sdk_version_${this.chainName}`);
+      if (sdkversion && chain?.versions) {
         chain.versions.cosmosSdk = sdkversion;
       }
       return chain;
@@ -72,7 +62,7 @@ export const useBlockchain = defineStore('blockchain', {
         if (this.current?.themeColor) {
           const { color } = hexToRgb(this.current?.themeColor);
           const { h, s, l } = rgbToHsl(color);
-          const themeColor = h + ' ' + s + '% ' + l +'%';
+          const themeColor = h + ' ' + s + '% ' + l + '%';
           document.body.style.setProperty('--p', `${themeColor}`);
           // document.body.style.setProperty('--p', `${this.current?.themeColor}`);
         } else {
@@ -87,11 +77,7 @@ export const useBlockchain = defineStore('blockchain', {
             badgeClass: 'bg-error',
             children: routes
               .filter((x) => x.meta.i18n) // defined menu name
-              .filter(
-                (x) =>
-                  !this.current?.features ||
-                  this.current.features.includes(String(x.meta.i18n))
-              ) // filter none-custom module
+              .filter((x) => !this.current?.features || this.current.features.includes(String(x.meta.i18n))) // filter none-custom module
               .map((x) => ({
                 title: `module.${x.meta.i18n}`,
                 to: { path: x.path.replace(':chain', this.chainName) },
@@ -157,7 +143,7 @@ export const useBlockchain = defineStore('blockchain', {
       useDistributionStore().initial();
     },
 
-    randomEndpoint(chainName: string) : Endpoint | undefined {
+    randomEndpoint(chainName: string): Endpoint | undefined {
       const end = localStorage.getItem(`endpoint-${chainName}`);
       if (end) {
         return JSON.parse(end);
@@ -166,35 +152,31 @@ export const useBlockchain = defineStore('blockchain', {
         if (all) {
           const rn = Math.random();
           const endpoint = all[Math.floor(rn * all.length)];
-          return endpoint
+          return endpoint;
         }
       }
     },
 
     async randomSetupEndpoint() {
-      const endpoint = this.randomEndpoint(this.chainName)
-      if(endpoint) await this.setRestEndpoint(endpoint);
+      const endpoint = this.randomEndpoint(this.chainName);
+      if (endpoint) await this.setRestEndpoint(endpoint);
     },
 
     async setRestEndpoint(endpoint: Endpoint) {
       this.connErr = '';
       this.endpoint = endpoint;
       this.rpc = CosmosRestClient.newStrategy(endpoint.address, this.current);
-      localStorage.setItem(
-        `endpoint-${this.chainName}`,
-        JSON.stringify(endpoint)
-      );
+      localStorage.setItem(`endpoint-${this.chainName}`, JSON.stringify(endpoint));
     },
     async setCurrent(name: string) {
       // Ensure chains are loaded due to asynchronous calls.
-      if(this.dashboard.length === 0) {
+      if (this.dashboard.length === 0) {
         await this.dashboard.initial();
       }
 
       // Find the case-sensitive name for the chainName, else simply use the parameter-value.
-      const caseSensitiveName = 
-        Object.keys(this.dashboard.chains).find((x) => x.toLowerCase() === name.toLowerCase()) 
-        || name;
+      const caseSensitiveName =
+        Object.keys(this.dashboard.chains).find((x) => x.toLowerCase() === name.toLowerCase()) || name;
 
       // Update chainName if needed
       if (caseSensitiveName !== this.chainName) {
diff --git a/src/stores/useCoinGecko.ts b/src/stores/useCoinGecko.ts
index 9ee2b7fa..0c499fce 100644
--- a/src/stores/useCoinGecko.ts
+++ b/src/stores/useCoinGecko.ts
@@ -27,9 +27,7 @@ export const useCoingecko = defineStore('coingecko', {
 
   actions: {
     getMarketChart(days = 30, coinId = 'cosmos') {
-      return get(
-        `https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=usd&days=${days}`
-      );
+      return get(`https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=usd&days=${days}`);
     },
 
     fetchCoinPrice(ids: string[]) {
diff --git a/src/stores/useDashboard.ts b/src/stores/useDashboard.ts
index 8354c17b..a87d8c2c 100644
--- a/src/stores/useDashboard.ts
+++ b/src/stores/useDashboard.ts
@@ -62,7 +62,7 @@ export interface ChainConfig {
   coinType: string;
   assets: Asset[];
   themeColor?: string;
-  features?: string[]
+  features?: string[];
   endpoints: {
     rest?: Endpoint[];
     rpc?: Endpoint[];
@@ -77,20 +77,20 @@ export interface ChainConfig {
   exponent: string;
   excludes?: string;
   providerChain: {
-    api: Endpoint[]
+    api: Endpoint[];
   };
   // keplr config
-  keplrFeatures?: string[],
+  keplrFeatures?: string[];
   keplrPriceStep?: {
-    low: number,
-    average: number,
-    high: number,
-  },  
+    low: number;
+    average: number;
+    high: number;
+  };
   faucet?: {
-    amount: string,
-    ip_limit: number,
-    address_limit: number,
-    fees: string
+    amount: string;
+    ip_limit: number;
+    address_limit: number;
+    fees: string;
   };
 }
 
@@ -101,8 +101,8 @@ export interface LocalConfig {
   api: string[] | Endpoint[];
   grpc: Endpoint[];
   provider_chain: {
-    api: string[] | Endpoint[]
-  }
+    api: string[] | Endpoint[];
+  };
   assets: {
     base: string;
     coingecko_id: string;
@@ -120,16 +120,16 @@ export interface LocalConfig {
   registry_name?: string;
   features?: string[];
   keplr_price_step?: {
-    low: number,
-    average: number,
-    high: number,
-  },
-  keplr_features: string[],
+    low: number;
+    average: number;
+    high: number;
+  };
+  keplr_features: string[];
   faucet?: {
-    amount: string,
-    ip_limit: number,
-    address_limit: number,
-    fees: string
+    amount: string;
+    ip_limit: number;
+    address_limit: number;
+    fees: string;
   };
 }
 
@@ -151,7 +151,7 @@ function apiConverter(api: any[]) {
 
 export function fromLocal(lc: LocalConfig): ChainConfig {
   const conf = {} as ChainConfig;
-  if(lc.assets && Array.isArray(lc.assets)) {
+  if (lc.assets && Array.isArray(lc.assets)) {
     conf.assets = lc.assets.map((x) => ({
       name: x.base,
       base: x.base,
@@ -167,8 +167,8 @@ export function fromLocal(lc: LocalConfig): ChainConfig {
     }));
   }
   conf.versions = {
-    cosmosSdk: lc.sdk_version
-  }
+    cosmosSdk: lc.sdk_version,
+  };
   conf.bech32Prefix = lc.addr_prefix;
   conf.bech32ConsensusPrefix = lc.consensus_prefix ?? lc.addr_prefix + 'valcons';
   conf.chainName = lc.chain_name;
@@ -179,12 +179,12 @@ export function fromLocal(lc: LocalConfig): ChainConfig {
     rpc: apiConverter(lc.rpc),
     grpc: apiConverter(lc.grpc),
   };
-  if(lc.provider_chain) {
+  if (lc.provider_chain) {
     conf.providerChain = {
-      api: apiConverter(lc.provider_chain.api)
-    }
+      api: apiConverter(lc.provider_chain.api),
+    };
   }
-  conf.features = lc.features
+  conf.features = lc.features;
   conf.logo = lc.logo.startsWith('http') ? lc.logo : `https://ping.pub${lc.logo}`;
   conf.keplrFeatures = lc.keplr_features;
   conf.keplrPriceStep = lc.keplr_price_step;
@@ -213,10 +213,7 @@ export function fromDirectory(source: DirectoryChain): ChainConfig {
 
 function pathConvert(path: string | undefined) {
   if (path) {
-    path = path.replace(
-      'https://raw.githubusercontent.com/cosmos/chain-registry/master',
-      'https://registry.ping.pub'
-    );
+    path = path.replace('https://raw.githubusercontent.com/cosmos/chain-registry/master', 'https://registry.ping.pub');
   }
   return path || '';
 }
@@ -276,10 +273,7 @@ export enum ConfigSource {
 
 export const useDashboard = defineStore('dashboard', {
   state: () => {
-    const favMap = JSON.parse(
-      localStorage.getItem('favoriteMap') ||
-        '{"cosmos":true, "osmosis":true}'
-    );
+    const favMap = JSON.parse(localStorage.getItem('favoriteMap') || '{"cosmos":true, "osmosis":true}');
     return {
       status: LoadingStatus.Empty,
       source: ConfigSource.MainnetCosmosDirectory,
@@ -287,7 +281,7 @@ export const useDashboard = defineStore('dashboard', {
       favoriteMap: favMap as Record<string, boolean>,
       chains: {} as Record<string, ChainConfig>,
       prices: {} as Record<string, any>,
-      coingecko: {} as Record<string, {coinId: string, exponent: number, symbol: string}>,
+      coingecko: {} as Record<string, { coinId: string; exponent: number; symbol: string }>,
     };
   },
   getters: {
@@ -301,28 +295,33 @@ export const useDashboard = defineStore('dashboard', {
       // await this.loadingFromRegistry()
     },
     loadingPrices() {
-      const coinIds = [] as string[]
-      const keys = Object.keys(this.chains) // load all blockchain
+      const coinIds = [] as string[];
+      const keys = Object.keys(this.chains); // load all blockchain
       // Object.keys(this.favoriteMap) //only load favorite once it has too many chains
-      keys.forEach(k => {
-        if(Array.isArray(this.chains[k]?.assets)) this.chains[k].assets.forEach(a => {
-          if(a.coingecko_id !== undefined && a.coingecko_id.length > 0) {
-            coinIds.push(a.coingecko_id)
-            a.denom_units.forEach(u => {
-              this.coingecko[u.denom] = {
-                coinId: a.coingecko_id || '',
-                exponent: u.exponent,
-                symbol: a.symbol
-              }
-            })
-          } 
-        })
-      })
+      keys.forEach((k) => {
+        if (Array.isArray(this.chains[k]?.assets))
+          this.chains[k].assets.forEach((a) => {
+            if (a.coingecko_id !== undefined && a.coingecko_id.length > 0) {
+              coinIds.push(a.coingecko_id);
+              a.denom_units.forEach((u) => {
+                this.coingecko[u.denom] = {
+                  coinId: a.coingecko_id || '',
+                  exponent: u.exponent,
+                  symbol: a.symbol,
+                };
+              });
+            }
+          });
+      });
 
-      const currencies = ['usd, cny'] // usd,cny,eur,jpy,krw,sgd,hkd
-      get(`https://api.coingecko.com/api/v3/simple/price?include_24hr_change=true&vs_currencies=${currencies.join(',')}&ids=${coinIds.join(",")}`).then(x => {
-        this.prices = x
-      })
+      const currencies = ['usd, cny']; // usd,cny,eur,jpy,krw,sgd,hkd
+      get(
+        `https://api.coingecko.com/api/v3/simple/price?include_24hr_change=true&vs_currencies=${currencies.join(
+          ','
+        )}&ids=${coinIds.join(',')}`
+      ).then((x) => {
+        this.prices = x;
+      });
     },
     async loadingFromRegistry() {
       if (this.status === LoadingStatus.Empty) {
@@ -336,8 +335,8 @@ export const useDashboard = defineStore('dashboard', {
       }
     },
     async loadingFromLocal() {
-      if(window.location.hostname.search("testnet") > -1) {
-        this.networkType = NetworkType.Testnet
+      if (window.location.hostname.search('testnet') > -1) {
+        this.networkType = NetworkType.Testnet;
       }
       const source: Record<string, LocalConfig> =
         this.networkType === NetworkType.Mainnet
@@ -350,7 +349,7 @@ export const useDashboard = defineStore('dashboard', {
       this.status = LoadingStatus.Loaded;
     },
     async loadLocalConfig(network: NetworkType) {
-      const config: Record<string, ChainConfig> = {} 
+      const config: Record<string, ChainConfig> = {};
       const source: Record<string, LocalConfig> =
         network === NetworkType.Mainnet
           ? import.meta.glob('../../chains/mainnet/*.json', { eager: true })
@@ -358,23 +357,23 @@ export const useDashboard = defineStore('dashboard', {
       Object.values<LocalConfig>(source).forEach((x: LocalConfig) => {
         config[x.chain_name] = fromLocal(x);
       });
-      return config
+      return config;
     },
     setupDefault() {
       if (this.length > 0) {
         const blockchain = useBlockchain();
-        const keys = Object.keys(this.favoriteMap)
+        const keys = Object.keys(this.favoriteMap);
         for (let i = 0; i < keys.length; i++) {
           if (!blockchain.chainName && this.chains[keys[i]] && this.favoriteMap[keys[i]]) {
             blockchain.setCurrent(keys[i]);
-            break
+            break;
           }
         }
         if (!blockchain.chainName) {
           const [first] = Object.keys(this.chains);
           blockchain.setCurrent(first);
         }
-        this.loadingPrices()
+        this.loadingPrices();
       }
     },
     setConfigSource(newSource: ConfigSource) {
diff --git a/src/stores/useFormatter.ts b/src/stores/useFormatter.ts
index c3036497..65302f0b 100644
--- a/src/stores/useFormatter.ts
+++ b/src/stores/useFormatter.ts
@@ -13,7 +13,7 @@ import { consensusPubkeyToHexAddress, get } from '@/libs';
 import { useBankStore } from './useBankStore';
 import type { Coin, DenomTrace } from '@/types';
 import { useDashboard } from './useDashboard';
-import type { Asset } from '@ping-pub/chain-registry-client/dist/types'
+import type { Asset } from '@ping-pub/chain-registry-client/dist/types';
 
 dayjs.extend(localeData);
 dayjs.extend(duration);
@@ -65,40 +65,39 @@ export const useFormatter = defineStore('formatter', {
       const hash = denom.replace('ibc/', '');
       let trace = this.ibcDenoms[hash];
       if (!trace) {
-        trace = (await this.blockchain.rpc.getIBCAppTransferDenom(hash))
-          .denom_trace;
+        trace = (await this.blockchain.rpc.getIBCAppTransferDenom(hash)).denom_trace;
         this.ibcDenoms[hash] = trace;
       }
       return trace;
     },
     async fetchDenomMetadata(denom: string) {
-      if(this.loading.includes(denom)) return 
-      this.loading.push(denom)
-      const asset = await get(`https://metadata.ping.pub/metadata/${denom}`) as Asset
-      this.ibcMetadata[denom] = asset
+      if (this.loading.includes(denom)) return;
+      this.loading.push(denom);
+      const asset = (await get(`https://metadata.ping.pub/metadata/${denom}`)) as Asset;
+      this.ibcMetadata[denom] = asset;
     },
     priceInfo(denom: string) {
-      const id = this.dashboard.coingecko[denom]?.coinId || "";
+      const id = this.dashboard.coingecko[denom]?.coinId || '';
       const prices = this.dashboard.prices[id];
       return prices;
     },
     color(change?: number) {
-      if(!change) return ""
+      if (!change) return '';
       switch (true) {
         case change > 0:
-          return "text-success"
+          return 'text-success';
         case change < 0:
-          return "text-error"
+          return 'text-error';
         default:
-          return ""
+          return '';
       }
     },
-    priceColor(denom: string, currency = "usd") {
-      const change = this.priceChanges(denom, currency)
-      return this.color(change)
+    priceColor(denom: string, currency = 'usd') {
+      const change = this.priceChanges(denom, currency);
+      return this.color(change);
     },
-    price(denom: string, currency = "usd") {
-      if(!denom || denom.length < 2) return 0
+    price(denom: string, currency = 'usd') {
+      if (!denom || denom.length < 2) return 0;
       const info = this.priceInfo(denom);
       return info ? info[currency] || 0 : 0;
     },
@@ -107,39 +106,42 @@ export const useFormatter = defineStore('formatter', {
       return info ? info[`${currency}_24h_change`] || 0 : 0;
     },
     showChanges(v?: number) {
-      return v!==0 ? numeral(v).format("+0,0"): ""
+      return v !== 0 ? numeral(v).format('+0,0') : '';
     },
     tokenValue(token?: Coin) {
-      if(token) {
-        return numeral(this.tokenValueNumber(token)).format("0,0.[00]")
+      if (token) {
+        return numeral(this.tokenValueNumber(token)).format('0,0.[00]');
       }
-      return ""
+      return '';
     },
     specialDenom(denom: string) {
-      switch(true) {
-        case denom.startsWith('u'): return 6
-        case denom.startsWith("a"): return 18
-        case denom==='inj': return 18
+      switch (true) {
+        case denom.startsWith('u'):
+          return 6;
+        case denom.startsWith('a'):
+          return 18;
+        case denom === 'inj':
+          return 18;
       }
-      return this.exponentForDenom(denom)
+      return this.exponentForDenom(denom);
     },
     tokenAmountNumber(token?: Coin) {
-      if(!token || !token.denom) return 0
+      if (!token || !token.denom) return 0;
 
       // find the symbol
-      const symbol = this.dashboard.coingecko[token.denom]?.symbol || token.denom 
+      const symbol = this.dashboard.coingecko[token.denom]?.symbol || token.denom;
       // convert denomination to symbol
       const exponent = this.dashboard.coingecko[symbol?.toLowerCase()]?.exponent || this.specialDenom(token.denom);
       // caculate amount of symbol
-      const amount = Number(token.amount) / (10 ** exponent)
-      return amount
+      const amount = Number(token.amount) / 10 ** exponent;
+      return amount;
     },
     tokenValueNumber(token?: Coin) {
-      if(!token || !token.denom) return 0
+      if (!token || !token.denom) return 0;
 
-      const amount = this.tokenAmountNumber(token)
-      const value = amount * this.price(token.denom)
-      return value
+      const amount = this.tokenAmountNumber(token);
+      const value = amount * this.price(token.denom);
+      return value;
     },
     formatTokenAmount(token: { denom: string; amount: string }) {
       return this.formatToken(token, false);
@@ -147,20 +149,20 @@ export const useFormatter = defineStore('formatter', {
     formatToken2(token: { denom: string; amount: string }, withDenom = true) {
       return this.formatToken(token, true, '0,0.[00]');
     },
-    
+
     findGlobalAssetConfig(denom: string) {
-      const chains = Object.values(this.dashboard.chains)
-      for ( let i =0; i < chains.length; i++ ) {
-        const assets = chains[i].assets
-        const conf = assets.find(a => a.base === denom)
-        if(conf) {
-          return conf
+      const chains = Object.values(this.dashboard.chains);
+      for (let i = 0; i < chains.length; i++) {
+        const assets = chains[i].assets;
+        const conf = assets.find((a) => a.base === denom);
+        if (conf) {
+          return conf;
         }
       }
-      return undefined
+      return undefined;
     },
     exponentForDenom(denom: string) {
-      const asset: Asset | undefined = this.findGlobalAssetConfig(denom)
+      const asset: Asset | undefined = this.findGlobalAssetConfig(denom);
       let exponent = 0;
       if (asset) {
         // find the max exponent for display
@@ -177,17 +179,16 @@ export const useFormatter = defineStore('formatter', {
       if (denom) {
         let asset: Asset | undefined;
         if (denom && denom.startsWith('ibc/')) {
-           const ibcDenom = denom.replace('ibc/', '')
-           asset = this.ibcMetadata[ibcDenom];
-          if(!asset) {
+          const ibcDenom = denom.replace('ibc/', '');
+          asset = this.ibcMetadata[ibcDenom];
+          if (!asset) {
             // update ibc metadata if not exits in local cache
-            this.fetchDenomMetadata(ibcDenom)
+            this.fetchDenomMetadata(ibcDenom);
           } else {
-            console.log("ibc metadata", asset)
+            console.log('ibc metadata', asset);
           }
-
         } else {
-          asset = this.findGlobalAssetConfig(denom)
+          asset = this.findGlobalAssetConfig(denom);
         }
 
         if (asset) {
@@ -197,29 +198,29 @@ export const useFormatter = defineStore('formatter', {
             if (x.exponent >= unit.exponent) {
               unit = x;
             }
-          });          
+          });
           return unit.denom;
         }
         return denom;
       }
     },
-    tokenDisplayNumber(
-      token?: { denom: string; amount: string },
-      mode = 'all'
-    ) {
+    tokenDisplayNumber(token?: { denom: string; amount: string }, mode = 'all') {
       if (token && token.amount && token?.denom) {
         let amount = Number(token.amount);
         let denom = token.denom;
 
-        let conf = mode === 'local'? this.blockchain.current?.assets?.find(
-          // @ts-ignore
-          (x) => x.base === token.denom || x.base.denom === token.denom
-        ): this.findGlobalAssetConfig(token.denom)
+        let conf =
+          mode === 'local'
+            ? this.blockchain.current?.assets?.find(
+                // @ts-ignore
+                (x) => x.base === token.denom || x.base.denom === token.denom
+              )
+            : this.findGlobalAssetConfig(token.denom);
 
         if (denom && denom.startsWith('ibc/')) {
           conf = this.ibcMetadata[denom.replace('ibc/', '')];
           if (!conf) {
-            this.fetchDenomMetadata(denom.replace('ibc/', ''))
+            this.fetchDenomMetadata(denom.replace('ibc/', ''));
           }
         }
 
@@ -239,25 +240,23 @@ export const useFormatter = defineStore('formatter', {
       }
       return 0;
     },
-    formatToken(
-      token?: { denom: string; amount: string },
-      withDenom = true,
-      fmt = '0,0.[0]',
-      mode = 'local'
-    ): string {
+    formatToken(token?: { denom: string; amount: string }, withDenom = true, fmt = '0,0.[0]', mode = 'local'): string {
       if (token && token.amount && token?.denom) {
         let amount = Number(token.amount);
         let denom = token.denom;
 
-        let conf = mode === 'local'? this.blockchain.current?.assets?.find(
-          // @ts-ignore
-          (x) => x.base === token.denom || x.base.denom === token.denom
-        ): this.findGlobalAssetConfig(token.denom)
+        let conf =
+          mode === 'local'
+            ? this.blockchain.current?.assets?.find(
+                // @ts-ignore
+                (x) => x.base === token.denom || x.base.denom === token.denom
+              )
+            : this.findGlobalAssetConfig(token.denom);
 
         if (denom && denom.startsWith('ibc/')) {
           conf = this.ibcMetadata[denom.replace('ibc/', '')];
           if (!conf) {
-            this.fetchDenomMetadata(denom.replace('ibc/', ''))
+            this.fetchDenomMetadata(denom.replace('ibc/', ''));
           }
         }
 
@@ -274,29 +273,21 @@ export const useFormatter = defineStore('formatter', {
             denom = unit.denom.toUpperCase();
           }
         }
-        if(amount < 0.000001) {
+        if (amount < 0.000001) {
           return `0 ${denom.substring(0, 10)}`;
         }
-        if(amount < 0.01) {
-          fmt = '0.[000000]'
+        if (amount < 0.01) {
+          fmt = '0.[000000]';
         }
-        return `${numeral(amount).format(fmt)} ${
-          withDenom ? denom.substring(0, 10) : ''
-        }`;
+        return `${numeral(amount).format(fmt)} ${withDenom ? denom.substring(0, 10) : ''}`;
       }
       return '-';
     },
-    formatTokens(
-      tokens?: { denom: string; amount: string }[],
-      withDenom = true,
-      fmt = '0.0a'
-    ): string {
+    formatTokens(tokens?: { denom: string; amount: string }[], withDenom = true, fmt = '0.0a'): string {
       if (!tokens) return '';
       return tokens.map((x) => this.formatToken(x, withDenom, fmt)).join(', ');
     },
-    calculateBondedRatio(
-      pool: { bonded_tokens: string; not_bonded_tokens: string } | undefined
-    ) {
+    calculateBondedRatio(pool: { bonded_tokens: string; not_bonded_tokens: string } | undefined) {
       if (pool && pool.bonded_tokens) {
         const b = Number(pool.bonded_tokens);
         const nb = Number(pool.not_bonded_tokens);
@@ -309,17 +300,13 @@ export const useFormatter = defineStore('formatter', {
       if (!address) return address;
 
       const txt = toHex(fromBase64(address)).toUpperCase();
-      const validator = this.staking.validators.find(
-        (x) => consensusPubkeyToHexAddress(x.consensus_pubkey) === txt
-      );
+      const validator = this.staking.validators.find((x) => consensusPubkeyToHexAddress(x.consensus_pubkey) === txt);
       return validator?.description?.moniker;
     },
     // find validator by operator address
     validatorFromBech32(address: string) {
       if (!address) return address;
-      const validator = this.staking.validators.find(
-        (x) => x.operator_address === address
-      );
+      const validator = this.staking.validators.find((x) => x.operator_address === address);
       return validator?.description?.moniker;
     },
     calculatePercent(input?: string | number, total?: string | number) {
@@ -338,17 +325,17 @@ export const useFormatter = defineStore('formatter', {
       return decimal ? numeral(decimal).format('0.[00]%') : '-';
     },
     formatNumber(input?: number, fmt = '0.[00]') {
-      if(!input) return ""
-      return numeral(input).format(fmt)
+      if (!input) return '';
+      return numeral(input).format(fmt);
     },
     numberAndSign(input: number, fmt = '+0,0') {
       return numeral(input).format(fmt);
     },
     toLocaleDate(time?: string | number | Date) {
-      if(!time) return ""
-      return new Date(time).toLocaleString(navigator.language)
+      if (!time) return '';
+      return new Date(time).toLocaleString(navigator.language);
     },
-    toDay(time?: string | number| Date, format = 'long') {
+    toDay(time?: string | number | Date, format = 'long') {
       if (!time) return '';
       if (format === 'long') {
         return dayjs(time).format('YYYY-MM-DD HH:mm');
@@ -372,9 +359,7 @@ export const useFormatter = defineStore('formatter', {
         const sum: Record<string, number> = msgs
           .map((msg) => {
             const msgType = msg['@type'] || msg.typeUrl || 'unknown';
-            return msgType
-              .substring(msgType.lastIndexOf('.') + 1)
-              .replace('Msg', '');
+            return msgType.substring(msgType.lastIndexOf('.') + 1).replace('Msg', '');
           })
           .reduce((s, c) => {
             const sh: Record<string, number> = s;
diff --git a/src/stores/useGovStore.ts b/src/stores/useGovStore.ts
index 587839be..a16c500d 100644
--- a/src/stores/useGovStore.ts
+++ b/src/stores/useGovStore.ts
@@ -34,15 +34,13 @@ export const useGovStore = defineStore('govStore', {
     async fetchProposals(status: string, pagination?: PageRequest) {
       //if (!this.loading[status]) {
       this.loading[status] = LoadingStatus.Loading;
-      const proposals = reactive(
-        await this.blockchain.rpc?.getGovProposals(status, pagination)
-      );
+      const proposals = reactive(await this.blockchain.rpc?.getGovProposals(status, pagination));
 
       //filter spam proposals
-      if(proposals?.proposals) {
+      if (proposals?.proposals) {
         proposals.proposals = proposals.proposals.filter((item) => {
-          const title = item.content?.title || item.title || ""
-          return title.toLowerCase().indexOf("airdrop")===-1
+          const title = item.content?.title || item.title || '';
+          return title.toLowerCase().indexOf('airdrop') === -1;
         });
       }
 
@@ -53,22 +51,19 @@ export const useGovStore = defineStore('govStore', {
           });
           if (this.walletstore.currentAddress) {
             try {
-              this.fetchProposalVotesVoter(
-                item.proposal_id,
-                this.walletstore.currentAddress
-              )
+              this.fetchProposalVotesVoter(item.proposal_id, this.walletstore.currentAddress)
                 .then((res) => {
-                  item.voterStatus = res?.vote?.option || 'VOTE_OPTION_NO_WITH_VETO'
+                  item.voterStatus = res?.vote?.option || 'VOTE_OPTION_NO_WITH_VETO';
                   // 'No With Veto';
                 })
                 .catch((reject) => {
-                  item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
+                  item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO';
                 });
             } catch (error) {
-              item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
+              item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO';
             }
           } else {
-            item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO'
+            item.voterStatus = 'VOTE_OPTION_NO_WITH_VETO';
           }
         });
       }
diff --git a/src/stores/useParamsStore.ts b/src/stores/useParamsStore.ts
index 509a8648..d3890dfa 100644
--- a/src/stores/useParamsStore.ts
+++ b/src/stores/useParamsStore.ts
@@ -91,9 +91,7 @@ export const useParamStore = defineStore('paramstore', {
     async handleBaseBlockLatest() {
       try {
         const res = await this.getBaseTendermintBlockLatest();
-        const height = this.chain.items.findIndex(
-          (x) => x.subtitle === 'height'
-        );
+        const height = this.chain.items.findIndex((x) => x.subtitle === 'height');
         this.chain.title = `Chain ID: ${res.block.header.chain_id}`;
         this.chain.items[height].value = res.block.header.height;
         // if (timeIn(res.block.header.time, 3, 'm')) {
@@ -113,38 +111,21 @@ export const useParamStore = defineStore('paramstore', {
       this.staking.items = Object.entries(res.params)
         .map(([key, value]) => ({ subtitle: key, value: value }))
         .filter((item: any) => {
-          if (
-            !['min_commission_rate', 'min_self_delegation'].includes(
-              item.subtitle
-            )
-          )
-            return item;
+          if (!['min_commission_rate', 'min_self_delegation'].includes(item.subtitle)) return item;
         });
-      Promise.all([this.getStakingPool(), this.getBankTotal(bond_denom)]).then(
-        (resArr) => {
-          const pool = resArr[0]?.pool;
-          const amount = resArr[1]?.amount?.amount;
-          const assets = this.blockchain.current?.assets;
-          const bondedAndSupply = this.chain.items.findIndex(
-            (x) => x.subtitle === 'bonded_and_supply'
-          );
-          this.chain.items[bondedAndSupply].value = `${formatNumber(
-            formatTokenAmount(assets, pool.bonded_tokens, 2, bond_denom, false),
-            true,
-            0
-          )}/${formatNumber(
-            formatTokenAmount(assets, amount, 2, bond_denom, false),
-            true,
-            0
-          )}`;
-          const bondedRatio = this.chain.items.findIndex(
-            (x) => x.subtitle === 'bonded_ratio'
-          );
-          this.chain.items[bondedRatio].value = `${percent(
-            Number(pool.bonded_tokens) / Number(amount)
-          )}%`;
-        }
-      );
+      Promise.all([this.getStakingPool(), this.getBankTotal(bond_denom)]).then((resArr) => {
+        const pool = resArr[0]?.pool;
+        const amount = resArr[1]?.amount?.amount;
+        const assets = this.blockchain.current?.assets;
+        const bondedAndSupply = this.chain.items.findIndex((x) => x.subtitle === 'bonded_and_supply');
+        this.chain.items[bondedAndSupply].value = `${formatNumber(
+          formatTokenAmount(assets, pool.bonded_tokens, 2, bond_denom, false),
+          true,
+          0
+        )}/${formatNumber(formatTokenAmount(assets, amount, 2, bond_denom, false), true, 0)}`;
+        const bondedRatio = this.chain.items.findIndex((x) => x.subtitle === 'bonded_ratio');
+        this.chain.items[bondedRatio].value = `${percent(Number(pool.bonded_tokens) / Number(amount))}%`;
+      });
     },
     async handleMintParam() {
       const excludes = this.blockchain.current?.excludes;
@@ -166,20 +147,14 @@ export const useParamStore = defineStore('paramstore', {
     },
     async handleDistributionParams() {
       const res = await this.getDistributionParams();
-      this.distribution.items = Object.entries(res.params).map(
-        ([key, value]) => ({ subtitle: key, value: value })
-      );
+      this.distribution.items = Object.entries(res.params).map(([key, value]) => ({ subtitle: key, value: value }));
     },
     async handleGovernanceParams() {
       const excludes = this.blockchain.current?.excludes;
       if (excludes && excludes.indexOf('governance') > -1) {
         return;
       }
-      Promise.all([
-        this.getGovParamsVoting(),
-        this.getGovParamsDeposit(),
-        this.getGovParamsTally(),
-      ]).then((resArr) => {
+      Promise.all([this.getGovParamsVoting(), this.getGovParamsDeposit(), this.getGovParamsTally()]).then((resArr) => {
         const govParams = {
           ...resArr[0]?.voting_params,
           ...resArr[1]?.deposit_params,
@@ -195,13 +170,15 @@ export const useParamStore = defineStore('paramstore', {
       const res = await this.fetchAbciInfo();
 
       localStorage.setItem(`sdk_version_${this.blockchain.chainName}`, res.application_version?.cosmos_sdk_version);
-      
-      this.appVersion.items = Object.entries(res.application_version).map(
-        ([key, value]) => ({ subtitle: key, value: value })
-      );
-      this.nodeVersion.items = Object.entries(res.default_node_info).map(
-        ([key, value]) => ({ subtitle: key, value: value })
-      );
+
+      this.appVersion.items = Object.entries(res.application_version).map(([key, value]) => ({
+        subtitle: key,
+        value: value,
+      }));
+      this.nodeVersion.items = Object.entries(res.default_node_info).map(([key, value]) => ({
+        subtitle: key,
+        value: value,
+      }));
     },
     async getBaseTendermintBlockLatest() {
       return await this.blockchain.rpc?.getBaseBlockLatest();
diff --git a/src/stores/useStakingStore.ts b/src/stores/useStakingStore.ts
index e5c56a2c..73aa562c 100644
--- a/src/stores/useStakingStore.ts
+++ b/src/stores/useStakingStore.ts
@@ -47,9 +47,7 @@ export const useStakingStore = defineStore('stakingStore', {
       return await this.fetchParams();
     },
     async keybase(identity: string) {
-      return get(
-        `https://keybase.io/_/api/1.0/user/lookup.json?key_suffix=${identity}&fields=pictures`
-      );
+      return get(`https://keybase.io/_/api/1.0/user/lookup.json?key_suffix=${identity}&fields=pictures`);
     },
     async fetchParams() {
       const response = await this.blockchain.rpc?.getStakingParams();
@@ -67,93 +65,81 @@ export const useStakingStore = defineStore('stakingStore', {
     },
     async fetchInacitveValdiators() {
       return this.fetchValidators('BOND_STATUS_UNBONDED');
-    },    
+    },
     async fetchUnbondingValdiators() {
       return this.fetchValidators('BOND_STATUS_UNBONDING');
     },
     async fetchValidator(validatorAddr: string) {
       return this.blockchain.rpc.getStakingValidator(validatorAddr);
     },
-    async fetchValidatorDelegation(
-      validatorAddr: string,
-      delegatorAddr: string
-    ) {
-      return await this.blockchain.rpc?.getStakingValidatorsDelegationsDelegator(
-        validatorAddr,
-        delegatorAddr
-      );
+    async fetchValidatorDelegation(validatorAddr: string, delegatorAddr: string) {
+      return await this.blockchain.rpc?.getStakingValidatorsDelegationsDelegator(validatorAddr, delegatorAddr);
     },
-    async fetchKeyRotation(chain_id: string, validatorAddr: string ) : Promise<string> {
-      if(this.blockchain.isConsumerChain) {
-        if(this.blockchain.current?.providerChain.api && this.blockchain.current.providerChain.api.length > 0) {
-          const signatures = useBaseStore().latest?.block?.last_commit.signatures
-          if(signatures) {
+    async fetchKeyRotation(chain_id: string, validatorAddr: string): Promise<string> {
+      if (this.blockchain.isConsumerChain) {
+        if (this.blockchain.current?.providerChain.api && this.blockchain.current.providerChain.api.length > 0) {
+          const signatures = useBaseStore().latest?.block?.last_commit.signatures;
+          if (signatures) {
             // console.log(signatures)
-            const key = toBase64(fromHex(valconsToBase64(validatorAddr)))
-            const exists = signatures.findIndex((x) => x.validator_address === key)
-            if(exists < 0) {
-
-              const client = CosmosRestClient.newDefault(this.blockchain.current.providerChain.api[0].address)
+            const key = toBase64(fromHex(valconsToBase64(validatorAddr)));
+            const exists = signatures.findIndex((x) => x.validator_address === key);
+            if (exists < 0) {
+              const client = CosmosRestClient.newDefault(this.blockchain.current.providerChain.api[0].address);
 
               client.getInterchainSecurityProviderOptedInValidators(chain_id).then((res) => {
-                console.log(res)
-              })
+                console.log(res);
+              });
               const res = await client.getInterchainSecurityValidatorRotatedKey(chain_id, validatorAddr);
-              if(res.consumer_address) {
-                this.keyRotation[validatorAddr] = res.consumer_address
-                localStorage.setItem(`key-rotation-${chain_id}`, JSON.stringify(this.keyRotation))
+              if (res.consumer_address) {
+                this.keyRotation[validatorAddr] = res.consumer_address;
+                localStorage.setItem(`key-rotation-${chain_id}`, JSON.stringify(this.keyRotation));
               }
-              return res.consumer_address
+              return res.consumer_address;
             }
           }
         }
       }
-      return ""
+      return '';
     },
 
     async loadKeyRotationFromLocalstorage(chain_id: string) {
-      const keyRotation = localStorage.getItem(`key-rotation-${chain_id}`)
-      this.keyRotation = keyRotation ? JSON.parse(keyRotation) : {}
+      const keyRotation = localStorage.getItem(`key-rotation-${chain_id}`);
+      this.keyRotation = keyRotation ? JSON.parse(keyRotation) : {};
     },
 
-    findRotatedHexAddress(key: {
-      "@type": string;
-      key: string;
-    }) {
-
-      const prefix  = "cosmos"
-      const conskey = pubKeyToValcons(key, prefix)
-      const rotated = this.keyRotation[conskey]
-      if(rotated) {
-        return valconsToBase64(rotated)
+    findRotatedHexAddress(key: { '@type': string; key: string }) {
+      const prefix = 'cosmos';
+      const conskey = pubKeyToValcons(key, prefix);
+      const rotated = this.keyRotation[conskey];
+      if (rotated) {
+        return valconsToBase64(rotated);
       }
-      return consensusPubkeyToHexAddress(key)
-
+      return consensusPubkeyToHexAddress(key);
     },
     async getConsumerValidators(chain_id: string) {
-      if(this.blockchain.current?.providerChain?.api && this.blockchain.current.providerChain.api.length > 0) {
-        const client = CosmosRestClient.newDefault(this.blockchain.current.providerChain.api[0].address)
-        await client.getStakingValidators('BOND_STATUS_BONDED', 500).then((res) => { this.validators = res.validators });
-        const id_map = {"neutron": "0", "stride": "1"} as Record<string, string>;
+      if (this.blockchain.current?.providerChain?.api && this.blockchain.current.providerChain.api.length > 0) {
+        const client = CosmosRestClient.newDefault(this.blockchain.current.providerChain.api[0].address);
+        await client.getStakingValidators('BOND_STATUS_BONDED', 500).then((res) => {
+          this.validators = res.validators;
+        });
+        const id_map = { neutron: '0', stride: '1' } as Record<string, string>;
         const consumer_id = Object.keys(id_map).find((k) => chain_id.startsWith(k)) || 0;
-        return client.getInterchainSecurityConsumerValidators(id_map[consumer_id])
+        return client.getInterchainSecurityConsumerValidators(id_map[consumer_id]);
       } else {
-        return { validators: [] }
+        return { validators: [] };
       }
     },
     async fetchAllKeyRotation(chain_id: string) {
-      let vs = []
-      for(const val of this.validators) {
-        const { prefix } = fromBech32(val.operator_address)
-        const cons = pubKeyToValcons(val.consensus_pubkey, prefix.replace('valoper','valcons'))
-        vs.push(cons)
+      let vs = [];
+      for (const val of this.validators) {
+        const { prefix } = fromBech32(val.operator_address);
+        const cons = pubKeyToValcons(val.consensus_pubkey, prefix.replace('valoper', 'valcons'));
+        vs.push(cons);
       }
     },
     async fetchValidators(status: string, limit = 300) {
       return this.blockchain.rpc?.getStakingValidators(status, limit).then((res) => {
-        const vals = res.validators.sort(
-          (a, b) => Number(b.delegator_shares) - Number(a.delegator_shares)
-        );
+        const vals = res.validators.sort((a, b) => Number(b.delegator_shares) - Number(a.delegator_shares));
         if (status === 'BOND_STATUS_BONDED') {
           this.validators = vals;
         }
@@ -162,5 +148,3 @@ export const useStakingStore = defineStore('stakingStore', {
     },
   },
 });
-
-
diff --git a/src/stores/useTxDialog.ts b/src/stores/useTxDialog.ts
index b0196682..b4c7e7b5 100644
--- a/src/stores/useTxDialog.ts
+++ b/src/stores/useTxDialog.ts
@@ -1,68 +1,68 @@
 import { defineStore } from 'pinia';
 import { useWalletStore } from './useWalletStore';
 import { useBlockchain } from './useBlockchain';
-import router from '@/router'
+import router from '@/router';
 
-let CALLBACK: any = null
+let CALLBACK: any = null;
 
 export const useTxDialog = defineStore('txDialogStore', {
   state: () => {
     return {
-      sender: "",
-      type: "send",
-      endpoint: "",
-      params: "",
+      sender: '',
+      type: 'send',
+      endpoint: '',
+      params: '',
     };
   },
   getters: {
     walletAddress() {
-      return useWalletStore().currentAddress
+      return useWalletStore().currentAddress;
     },
     currentEndpoint() {
-      return useBlockchain().endpoint?.address
+      return useBlockchain().endpoint?.address;
     },
     blockchain() {
-      return useBlockchain()
+      return useBlockchain();
     },
     hdPaths() {
-      return useBlockchain().defaultHDPath
+      return useBlockchain().defaultHDPath;
     },
   },
   actions: {
     setParams(param: any) {
-      this.params = JSON.stringify(param)
+      this.params = JSON.stringify(param);
     },
     openWithArgument(type: string, sender: string, endpoint: string, param: any) {
       this.type = type;
       this.sender = sender;
       this.endpoint = endpoint;
-      this.params = JSON.stringify(param)
+      this.params = JSON.stringify(param);
     },
     open(type: string, param: any, callback?: Function) {
       this.type = type;
       this.sender = this.walletAddress;
-      this.endpoint = this.currentEndpoint || "";
-      this.params = JSON.stringify(param)
-      if(callback) {
-        CALLBACK = callback
-      }else {
-        CALLBACK = undefined
+      this.endpoint = this.currentEndpoint || '';
+      this.params = JSON.stringify(param);
+      if (callback) {
+        CALLBACK = callback;
+      } else {
+        CALLBACK = undefined;
       }
     },
     view(tx: {
       detail: {
-        eventType: string,
-        hash: string
-      }
+        eventType: string;
+        hash: string;
+      };
     }) {
-      console.log(tx.detail)
-      if (tx.detail && tx.detail.hash) router.push({ path: `/${this.blockchain.chainName}/tx/${tx.detail.hash}` })
+      console.log(tx.detail);
+      if (tx.detail && tx.detail.hash) router.push({ path: `/${this.blockchain.chainName}/tx/${tx.detail.hash}` });
     },
     confirmed(tx: any) {
-      console.log("confirmed:", tx)
-      if(CALLBACK) {
-        CALLBACK()
+      console.log('confirmed:', tx);
+      if (CALLBACK) {
+        CALLBACK();
       }
-    }
+    },
   },
 });
diff --git a/src/stores/useWalletStore.ts b/src/stores/useWalletStore.ts
index 2843e72e..fde54764 100644
--- a/src/stores/useWalletStore.ts
+++ b/src/stores/useWalletStore.ts
@@ -1,15 +1,9 @@
 import { defineStore } from 'pinia';
 import { useBlockchain } from './useBlockchain';
 import { fromBech32, toBech32 } from '@cosmjs/encoding';
-import type {
-  Delegation,
-  Coin,
-  UnbondingResponses,
-  DelegatorRewards,
-  WalletConnected,
-} from '@/types';
+import type { Delegation, Coin, UnbondingResponses, DelegatorRewards, WalletConnected } from '@/types';
 import { useStakingStore } from './useStakingStore';
-import router from '@/router'
+import router from '@/router';
 
 export const useWalletStore = defineStore('walletStore', {
   state: () => {
@@ -17,8 +11,8 @@ export const useWalletStore = defineStore('walletStore', {
       balances: [] as Coin[],
       delegations: [] as Delegation[],
       unbonding: [] as UnbondingResponses[],
-      rewards: {total: [], rewards: []} as DelegatorRewards,
-      wallet: {} as WalletConnected
+      rewards: { total: [], rewards: [] } as DelegatorRewards,
+      wallet: {} as WalletConnected,
     };
   },
   getters: {
@@ -27,18 +21,19 @@ export const useWalletStore = defineStore('walletStore', {
     },
     connectedWallet() {
       // @ts-ignore
-      if(this.wallet.cosmosAddress) return this.wallet
+      if (this.wallet.cosmosAddress) return this.wallet;
       const chainStore = useBlockchain();
       const key = chainStore.defaultHDPath;
       const connected = JSON.parse(localStorage.getItem(key) || '{}');
-      return connected
+      return connected;
     },
     balanceOfStakingToken(): Coin {
       const stakingStore = useStakingStore();
       return (
-        this.balances.find(
-          (x) => x.denom === stakingStore.params.bond_denom
-        ) || { amount: '0', denom: stakingStore.params.bond_denom }
+        this.balances.find((x) => x.denom === stakingStore.params.bond_denom) || {
+          amount: '0',
+          denom: stakingStore.params.bond_denom,
+        }
       );
     },
     stakingAmount() {
@@ -54,9 +49,7 @@ export const useWalletStore = defineStore('walletStore', {
     rewardAmount() {
       const stakingStore = useStakingStore();
       // @ts-ignore
-      const reward = this.rewards.total?.find(
-        (x: Coin) => x.denom === stakingStore.params.bond_denom
-      );
+      const reward = this.rewards.total?.find((x: Coin) => x.denom === stakingStore.params.bond_denom);
       return reward || { amount: '0', denom: stakingStore.params.bond_denom };
     },
     unbondingAmount() {
@@ -77,35 +70,28 @@ export const useWalletStore = defineStore('walletStore', {
       return toBech32(chainStore.current?.bech32Prefix || prefix, data);
     },
     shortAddress() {
-      const address: string = this.currentAddress
-      if(address.length > 4) {
-        return `${address.substring(address.length -4)}`
+      const address: string = this.currentAddress;
+      if (address.length > 4) {
+        return `${address.substring(address.length - 4)}`;
       }
-      return ""
-    }
+      return '';
+    },
   },
   actions: {
-
     async loadMyAsset() {
       if (!this.currentAddress) return;
       this.blockchain.rpc.getBankBalances(this.currentAddress).then((x) => {
         this.balances = x.balances;
       });
-      this.blockchain.rpc
-        .getStakingDelegations(this.currentAddress)
-        .then((x) => {
-          this.delegations = x.delegation_responses;
-        });
-      this.blockchain.rpc
-        .getStakingDelegatorUnbonding(this.currentAddress)
-        .then((x) => {
-          this.unbonding = x.unbonding_responses;
-        });
-      this.blockchain.rpc
-        .getDistributionDelegatorRewards(this.currentAddress)
-        .then((x) => {
-          this.rewards = x;
-        });
+      this.blockchain.rpc.getStakingDelegations(this.currentAddress).then((x) => {
+        this.delegations = x.delegation_responses;
+      });
+      this.blockchain.rpc.getStakingDelegatorUnbonding(this.currentAddress).then((x) => {
+        this.unbonding = x.unbonding_responses;
+      });
+      this.blockchain.rpc.getDistributionDelegatorRewards(this.currentAddress).then((x) => {
+        this.rewards = x;
+      });
     },
     myBalance() {
       return this.blockchain.rpc.getBankBalances(this.currentAddress);
@@ -114,25 +100,23 @@ export const useWalletStore = defineStore('walletStore', {
       return this.blockchain.rpc.getStakingDelegations(this.currentAddress);
     },
     myUnbonding() {
-      return this.blockchain.rpc.getStakingDelegatorUnbonding(
-        this.currentAddress
-      );
+      return this.blockchain.rpc.getStakingDelegatorUnbonding(this.currentAddress);
     },
     disconnect() {
       const chainStore = useBlockchain();
       const key = chainStore.defaultHDPath;
       localStorage.removeItem(key);
-      this.$reset()
+      this.$reset();
     },
     setConnectedWallet(value: WalletConnected) {
-      if(value) this.wallet = value 
+      if (value) this.wallet = value;
     },
     suggestChain() {
       if (window.location.pathname === '/SIDE-Testnet') {
-        router.push({path: '/wallet/unisat'})
+        router.push({ path: '/wallet/unisat' });
       } else {
-        router.push({path: '/wallet/keplr'})
+        router.push({ path: '/wallet/keplr' });
       }
-    }
+    },
   },
-});
\ No newline at end of file
+});
diff --git a/src/style.css b/src/style.css
index 98d838c1..7a7e156b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,16 +4,16 @@
 @tailwind components;
 @tailwind utilities;
 
-html,body {
+html,
+body {
   height: 100%;
 }
 
 body {
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -51,4 +51,4 @@ html[data-theme='dark'] {
 .slide-up-leave-to {
   opacity: 0;
   transform: translateY(-calc(15%));
-}
\ No newline at end of file
+}
diff --git a/src/types/auth.ts b/src/types/auth.ts
index 3ed8f0a8..02c33152 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,24 +1,23 @@
-
-import type { Key, PaginatedResponse } from "./common";
+import type { Key, PaginatedResponse } from './common';
 
 export interface AuthAccount {
-    "@type": string,
-    "address": string,
-    "pub_key": Key,
-    "account_number": string,
-    "sequence": string
+  '@type': string;
+  address: string;
+  pub_key: Key;
+  account_number: string;
+  sequence: string;
 }
 
 export interface AuthParam {
-    params: {
-        "max_memo_characters": string,
-        "tx_sig_limit": string,
-        "tx_size_cost_per_byte": string,
-        "sig_verify_cost_ed25519": string,
-        "sig_verify_cost_secp256k1": string
-    }
+  params: {
+    max_memo_characters: string;
+    tx_sig_limit: string;
+    tx_size_cost_per_byte: string;
+    sig_verify_cost_ed25519: string;
+    sig_verify_cost_secp256k1: string;
+  };
 }
 
 export interface PaginabledAccounts extends PaginatedResponse {
-    accounts: AuthAccount[]
-}
\ No newline at end of file
+  accounts: AuthAccount[];
+}
diff --git a/src/types/bank.ts b/src/types/bank.ts
index bdde0051..4d4e0ca0 100644
--- a/src/types/bank.ts
+++ b/src/types/bank.ts
@@ -1,34 +1,33 @@
-
-import type { Coin, PaginatedResponse } from "./common";
+import type { Coin, PaginatedResponse } from './common';
 
 export interface BankParams {
-    params: {
-        "send_enabled": string[],
-        "default_send_enabled": boolean;
-    }
+  params: {
+    send_enabled: string[];
+    default_send_enabled: boolean;
+  };
 }
 
 export interface DenomMetadata {
-    "description": string,
-    "denom_units": {
-        "denom": string,
-        "exponent": number,
-        "aliases": string[]
-    }[],
-    "base": string,
-    "display": string,
-    "name": string,
-    "symbol": string
+  description: string;
+  denom_units: {
+    denom: string;
+    exponent: number;
+    aliases: string[];
+  }[];
+  base: string;
+  display: string;
+  name: string;
+  symbol: string;
 }
 
-export interface PaginatedBalances extends PaginatedResponse{
-    balances: Coin[]
+export interface PaginatedBalances extends PaginatedResponse {
+  balances: Coin[];
 }
 
-export interface PaginatedDenomMetadata extends PaginatedResponse{
-    metadatas: DenomMetadata[]
+export interface PaginatedDenomMetadata extends PaginatedResponse {
+  metadatas: DenomMetadata[];
 }
 
 export interface PaginatedSupply extends PaginatedResponse {
-    supply: Coin[]
-}
\ No newline at end of file
+  supply: Coin[];
+}
diff --git a/src/types/base.ts b/src/types/base.ts
index 4c59b2ff..495f8900 100644
--- a/src/types/base.ts
+++ b/src/types/base.ts
@@ -1,103 +1,102 @@
-import type { Key } from "./common"
+import type { Key } from './common';
 
 export interface NodeInfo {
-    default_node_info: {
-        protocol_version: {
-            p2p: string,
-            block: string,
-            app: string
-        },
-        default_node_id: string,
-        listen_addr: string,
-        network: string,
-        version: string,
-        channels: string,
-        moniker: string,
-        other: {
-            tx_index: string,
-            rpc_address: string
-        }
-    },
-    application_version: {
-        name: string,
-        app_name: string,
-        version: string,
-        git_commit: string,
-        build_tags: string,
-        go_version: string,
-        build_deps: [
-            {
-                path: string,
-                version: string,
-                sum: string,
-            },
-        ],
-        cosmos_sdk_version: string,
-    }
+  default_node_info: {
+    protocol_version: {
+      p2p: string;
+      block: string;
+      app: string;
+    };
+    default_node_id: string;
+    listen_addr: string;
+    network: string;
+    version: string;
+    channels: string;
+    moniker: string;
+    other: {
+      tx_index: string;
+      rpc_address: string;
+    };
+  };
+  application_version: {
+    name: string;
+    app_name: string;
+    version: string;
+    git_commit: string;
+    build_tags: string;
+    go_version: string;
+    build_deps: [
+      {
+        path: string;
+        version: string;
+        sum: string;
+      }
+    ];
+    cosmos_sdk_version: string;
+  };
 }
 export interface BlockId {
-    hash: string,
-    part_set_header: {
-        total: number,
-        hash: string
-    }
+  hash: string;
+  part_set_header: {
+    total: number;
+    hash: string;
+  };
 }
 
-export interface Signature 
-{
-    block_id_flag: string,
-    validator_address: string,
-    timestamp: string,
-    signature: string,
+export interface Signature {
+  block_id_flag: string;
+  validator_address: string;
+  timestamp: string;
+  signature: string;
 }
 
 export interface Block {
-    block_id: BlockId,
-    block: {
-        header: {
-            version: {
-                block: string,
-                app: string
-            },
-            chain_id: string,
-            height: string,
-            time: string,
-            last_block_id: BlockId,
-            last_commit_hash: string,
-            data_hash: string,
-            validators_hash: string,
-            next_validators_hash: string,
-            consensus_hash: string,
-            app_hash: string,
-            last_results_hash: string,
-            evidence_hash: string,
-            proposer_address: string,
-        },
-        data: {
-            txs: any[]
-        },
-        evidence: {
-            evidence: any[]
-        },
-        last_commit: Commit
-    }
+  block_id: BlockId;
+  block: {
+    header: {
+      version: {
+        block: string;
+        app: string;
+      };
+      chain_id: string;
+      height: string;
+      time: string;
+      last_block_id: BlockId;
+      last_commit_hash: string;
+      data_hash: string;
+      validators_hash: string;
+      next_validators_hash: string;
+      consensus_hash: string;
+      app_hash: string;
+      last_results_hash: string;
+      evidence_hash: string;
+      proposer_address: string;
+    };
+    data: {
+      txs: any[];
+    };
+    evidence: {
+      evidence: any[];
+    };
+    last_commit: Commit;
+  };
 }
 
 export interface Commit {
-    height: string,
-    round: number,
-    block_id: BlockId,
-    signatures: Signature[]
+  height: string;
+  round: number;
+  block_id: BlockId;
+  signatures: Signature[];
 }
 
 export interface TendermintValidator {
-    address: string,
-    pub_key: Key,
-    voting_power: string,
-    proposer_priority: string
+  address: string;
+  pub_key: Key;
+  voting_power: string;
+  proposer_priority: string;
 }
 
 export interface PaginatedTendermintValidator {
-    validators: TendermintValidator[],
-    block_height: string
-}
\ No newline at end of file
+  validators: TendermintValidator[];
+  block_height: string;
+}
diff --git a/src/types/common.ts b/src/types/common.ts
index a39117b6..98735406 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -1,68 +1,67 @@
 export interface Key {
-    "@type": string,
-    "key": string,
+  '@type': string;
+  key: string;
 }
 
 export enum LoadingStatus {
-    UNLOADED,
-    LOADING,
-    LOADED,
+  UNLOADED,
+  LOADING,
+  LOADED,
 }
 
 export interface Pagination {
-    next_key?: string;
-    total?: string;
+  next_key?: string;
+  total?: string;
 }
 
 export class PageRequest {
-    key?: string;
-    limit: number;
-    offset?: number;
-    count_total: boolean;
-    reverse?: boolean;
-    constructor() {
-        this.limit = 20
-        this.count_total = true
-    }
-    toQueryString() {
-        const query = []
-        if(this.key) query.push(`pagination.key=${this.key}`)
-        if(this.limit) query.push(`pagination.limit=${this.limit}`)
-        if(this.offset !== undefined) query.push(`pagination.offset=${this.offset}`)
-        if(this.count_total) query.push(`pagination.count_total=${this.count_total}`)
-        if(this.reverse) query.push(`pagination.reverse=${this.reverse}`)
-        return query.join('&')
-    }
-    setPage(page: number) {
-        if(page >= 1) this.offset = (page - 1) * this.limit
-    }    
-    setPageSize(size: number) {
-        this.limit = size
-    }
-    
+  key?: string;
+  limit: number;
+  offset?: number;
+  count_total: boolean;
+  reverse?: boolean;
+  constructor() {
+    this.limit = 20;
+    this.count_total = true;
+  }
+  toQueryString() {
+    const query = [];
+    if (this.key) query.push(`pagination.key=${this.key}`);
+    if (this.limit) query.push(`pagination.limit=${this.limit}`);
+    if (this.offset !== undefined) query.push(`pagination.offset=${this.offset}`);
+    if (this.count_total) query.push(`pagination.count_total=${this.count_total}`);
+    if (this.reverse) query.push(`pagination.reverse=${this.reverse}`);
+    return query.join('&');
+  }
+  setPage(page: number) {
+    if (page >= 1) this.offset = (page - 1) * this.limit;
+  }
+  setPageSize(size: number) {
+    this.limit = size;
+  }
 }
 
 export interface PaginatedResponse {
-    pagination: Pagination;
+  pagination: Pagination;
 }
 
 export class Response<T> {
-    [key: string]: T
+  [key: string]: T;
 }
 
 export interface Coin {
-    amount: string;
-    denom: string;
+  amount: string;
+  denom: string;
 }
 
 export interface CoinWithPrice extends Coin {
-    value?: number;
-    price?: number;
-    change24h?: number    
+  value?: number;
+  price?: number;
+  change24h?: number;
 }
 
 export interface UptimeStatus {
-    height: number;
-    filled: boolean;
-    signed: boolean;
-}
\ No newline at end of file
+  height: number;
+  filled: boolean;
+  signed: boolean;
+}
diff --git a/src/types/gov.ts b/src/types/gov.ts
index 5f1b47dd..caaeecfa 100644
--- a/src/types/gov.ts
+++ b/src/types/gov.ts
@@ -50,8 +50,8 @@ export interface GovProposal {
   voting_start_time: string;
   voting_end_time: string;
   is_expedited: boolean;
-  voterStatus?: string
-//   VoteOption[];
+  voterStatus?: string;
+  //   VoteOption[];
 }
 
 export interface VoteOption {
diff --git a/src/types/group.ts b/src/types/group.ts
index b96c8a23..bffef780 100644
--- a/src/types/group.ts
+++ b/src/types/group.ts
@@ -1,47 +1,46 @@
-import type { PaginatedResponse } from "./common";
+import type { PaginatedResponse } from './common';
 
 export interface Group {
-    admin: string,
-    created_at: string,
-    id: string,
-    metadata: string,
-    total_weight: string,
-    version: string
+  admin: string;
+  created_at: string;
+  id: string;
+  metadata: string;
+  total_weight: string;
+  version: string;
 }
 
-export interface GroupPolicy {
-}
+export interface GroupPolicy {}
 
 export interface GroupTallyResult {
-    abstain_count: string,
-    no_count: string,
-    no_with_veto_count: string,
-    yes_count: string
+  abstain_count: string;
+  no_count: string;
+  no_with_veto_count: string;
+  yes_count: string;
 }
 
 export interface GroupProposal {
-    executor_result: string,
-    final_tally_result: GroupTallyResult,
-    group_policy_address: string,
-    group_policy_version: string,
-    group_version: string,
-    id: string,
-    messages: any[],
-    metadata: string,
-    proposers: string[],
-    status: string,
-    submit_time: string,
-    summary: string,
-    title: string,
-    voting_period_end: string
+  executor_result: string;
+  final_tally_result: GroupTallyResult;
+  group_policy_address: string;
+  group_policy_version: string;
+  group_version: string;
+  id: string;
+  messages: any[];
+  metadata: string;
+  proposers: string[];
+  status: string;
+  submit_time: string;
+  summary: string;
+  title: string;
+  voting_period_end: string;
 }
 
 export interface GroupVote {
-    metadata: string,
-    option: string,
-    proposal_id: string,
-    submit_time: string,
-    voter: string
+  metadata: string;
+  option: string;
+  proposal_id: string;
+  submit_time: string;
+  voter: string;
 }
 
 export interface PaginatedGroups extends PaginatedResponse {
@@ -49,6 +48,5 @@ export interface PaginatedGroups extends PaginatedResponse {
 }
 
 export interface PaginatedGroupProposals extends PaginatedResponse {
-    proposals: GroupProposal[];
-  }
-  
+  proposals: GroupProposal[];
+}
diff --git a/src/types/ibc.ts b/src/types/ibc.ts
index 69ad9343..feef3284 100644
--- a/src/types/ibc.ts
+++ b/src/types/ibc.ts
@@ -1,107 +1,105 @@
-import type { PaginatedResponse } from "."
+import type { PaginatedResponse } from '.';
 
 export interface DenomTrace {
-    path: string,
-    base_denom: string
+  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
+  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
-  }
+  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
-  }
+  '@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
-    }
-
+  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
-    }
-
+  connection: Connection;
+  proof: string;
+  proof_height: {
+    revision_number: string;
+    revision_height: string;
+  };
 }
 export interface PaginatedIBCChannels extends PaginatedResponse {
-    channels: Channel[]
+  channels: Channel[];
 }
 export interface PaginatedIBCConnections extends PaginatedResponse {
-    connections: Connection[]
-}
\ No newline at end of file
+  connections: Connection[];
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 1878dd3b..eb3d00b3 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,12 +1,11 @@
-
-export * from './base'
-export * from './auth'
-export * from './bank'
-export * from './common'
-export * from './distribution'
-export * from './gov'
-export * from './staking'
-export * from './transaction'
-export * from './ibc'
-export * from './slashing'
-export * from './group'
\ No newline at end of file
+export * from './base';
+export * from './auth';
+export * from './bank';
+export * from './common';
+export * from './distribution';
+export * from './gov';
+export * from './staking';
+export * from './transaction';
+export * from './ibc';
+export * from './slashing';
+export * from './group';
diff --git a/src/types/slashing.ts b/src/types/slashing.ts
index 9208fed1..a8041fcc 100644
--- a/src/types/slashing.ts
+++ b/src/types/slashing.ts
@@ -1,22 +1,22 @@
-import type { PaginatedResponse } from "./common";
+import type { PaginatedResponse } from './common';
 
 export interface SigningInfo {
-    address: string,
-    start_height: string,
-    index_offset: string,
-    jailed_until: string,
-    tombstoned: boolean,
-    missed_blocks_counter: string
+  address: string;
+  start_height: string;
+  index_offset: string;
+  jailed_until: string;
+  tombstoned: boolean;
+  missed_blocks_counter: string;
 }
 
-export interface SlashingParam{
-    signed_blocks_window: string,
-    min_signed_per_window: string,
-    downtime_jail_duration: string,
-    slash_fraction_double_sign: string,
-    slash_fraction_downtime: string
-  }
+export interface SlashingParam {
+  signed_blocks_window: string;
+  min_signed_per_window: string;
+  downtime_jail_duration: string;
+  slash_fraction_double_sign: string;
+  slash_fraction_downtime: string;
+}
 
 export interface PaginatedSigningInfo extends PaginatedResponse {
-    info: SigningInfo[]
-}
\ No newline at end of file
+  info: SigningInfo[];
+}
diff --git a/src/types/staking.ts b/src/types/staking.ts
index e8be7694..eee5bb49 100644
--- a/src/types/staking.ts
+++ b/src/types/staking.ts
@@ -1,91 +1,89 @@
-import type { Key, PaginatedResponse, Coin } from "./common"
+import type { Key, PaginatedResponse, Coin } from './common';
 
 export interface Validator {
-    "operator_address": string,
-    "consensus_pubkey": Key,
-    "jailed": boolean,
-    "status": string,
-    "tokens": string,
-    "delegator_shares": string,
-    "description": {
-        "moniker": string,
-        "identity"?: string,
-        "website"?: string,
-        "security_contact"?: string,
-        "details"?: string
-    },
-    "unbonding_height": string,
-    "unbonding_time": string,
-    "commission": CommissionRate,
-    "min_self_delegation": string,
-    "liquid_shares": string,
-    "validator_bond_shares": string
+  operator_address: string;
+  consensus_pubkey: Key;
+  jailed: boolean;
+  status: string;
+  tokens: string;
+  delegator_shares: string;
+  description: {
+    moniker: string;
+    identity?: string;
+    website?: string;
+    security_contact?: string;
+    details?: string;
+  };
+  unbonding_height: string;
+  unbonding_time: string;
+  commission: CommissionRate;
+  min_self_delegation: string;
+  liquid_shares: string;
+  validator_bond_shares: string;
 }
 
 export interface CommissionRate {
-    "commission_rates": {
-        "rate": string,
-        "max_rate": string,
-        "max_change_rate": string
-    },
-    "update_time": string
+  commission_rates: {
+    rate: string;
+    max_rate: string;
+    max_change_rate: string;
+  };
+  update_time: string;
 }
 
 export interface UnbondingResponses {
-    delegator_address: string,
-    validator_address: string,
-    entries: {
-        creation_height: string,
-        completion_time: string,
-        initial_balance: string,
-        balance: string
-      }[]
-  }
+  delegator_address: string;
+  validator_address: string;
+  entries: {
+    creation_height: string;
+    completion_time: string;
+    initial_balance: string;
+    balance: string;
+  }[];
+}
 
 export interface Delegation {
-    delegation: {
-        delegator_address: string,
-        validator_address: string,
-        shares: string
-    },
-    balance: Coin
+  delegation: {
+    delegator_address: string;
+    validator_address: string;
+    shares: string;
+  };
+  balance: Coin;
 }
 
-export interface Redelegation {
-
-}
+export interface Redelegation {}
 
 export interface StakingParam {
-    params: {
-        "unbonding_time": string,
-        "max_validators": number,
-        "max_entries": number,
-        "historical_entries": number,
-        "bond_denom": string,
-        "min_commission_rate": string,
-        "min_self_delegation": string
-    }
+  params: {
+    unbonding_time: string;
+    max_validators: number;
+    max_entries: number;
+    historical_entries: number;
+    bond_denom: string;
+    min_commission_rate: string;
+    min_self_delegation: string;
+  };
 }
 
 export interface StakingPool {
-    pool: {
-        not_bonded_tokens: string,
-        bonded_tokens: string
-    }
+  pool: {
+    not_bonded_tokens: string;
+    bonded_tokens: string;
+  };
 }
 
 export interface PaginatedDelegations extends PaginatedResponse {
-    delegation_responses: Delegation[]
+  delegation_responses: Delegation[];
 }
 
 export interface PaginatedRedelegations extends PaginatedResponse {
-    redelegation_responses: Redelegation[]
+  redelegation_responses: Redelegation[];
 }
 
 export interface PaginatedUnbonding extends PaginatedResponse {
-    unbonding_responses: UnbondingResponses[]
+  unbonding_responses: UnbondingResponses[];
 }
 
 export interface PaginatedValdiators extends PaginatedResponse {
-    validators: Validator[]
-}
\ No newline at end of file
+  validators: Validator[];
+}
diff --git a/src/types/transaction.ts b/src/types/transaction.ts
index 399c85d8..706962e5 100644
--- a/src/types/transaction.ts
+++ b/src/types/transaction.ts
@@ -1,68 +1,68 @@
-import type { Coin, Key, PaginatedResponse } from "./common"
+import type { Coin, Key, PaginatedResponse } from './common';
 
 export interface Tx {
-    "@type"?: string,
-    "body": {
-        "messages": {"@type": string, "amount"?: Coin[], packet?: { data: string }}[],
-        "memo": string,
-        "timeout_height": string,
-        "extension_options": any[],
-        "non_critical_extension_options": any[]
-    },
-    "auth_info": {
-        "signer_infos": [
-            {
-                "public_key": Key,
-                "mode_info": {
-                    "single"?: {
-                        "mode": string // "SIGN_MODE_DIRECT"
-                    }
-                },
-                "sequence": string
-            }
-        ],
-        "fee": {
-            "amount": Coin[],
-            "gas_limit": string,
-            "payer": string,
-            "granter": string
-        }
-    },
-    "signatures": string[]
+  '@type'?: string;
+  body: {
+    messages: { '@type': string; amount?: Coin[]; packet?: { data: string } }[];
+    memo: string;
+    timeout_height: string;
+    extension_options: any[];
+    non_critical_extension_options: any[];
+  };
+  auth_info: {
+    signer_infos: [
+      {
+        public_key: Key;
+        mode_info: {
+          single?: {
+            mode: string; // "SIGN_MODE_DIRECT"
+          };
+        };
+        sequence: string;
+      }
+    ];
+    fee: {
+      amount: Coin[];
+      gas_limit: string;
+      payer: string;
+      granter: string;
+    };
+  };
+  signatures: string[];
 }
 
 export interface Attributes {
-    index?: boolean,
-    key: string,
-    value: string
+  index?: boolean;
+  key: string;
+  value: string;
 }
 
 export interface TxResponse {
-    "height": string,
-    "txhash": string,
-    "codespace": string,
-    "code": number,
-    "data": string,
-    "raw_log": string,
-    "logs": [
-        {
-            "msg_index": number,
-            "log": string,
-            "events": Attributes[]
-        }
-    ],
-    "info": "",
-    "gas_wanted": "204431",
-    "gas_used": "202682",
-    "tx": Tx,
-    "timestamp": "2022-08-13T23:24:54Z",
-    "events": {
-            "type": string,
-            "attributes": Attributes[]
-        }[]
+  height: string;
+  txhash: string;
+  codespace: string;
+  code: number;
+  data: string;
+  raw_log: string;
+  logs: [
+    {
+      msg_index: number;
+      log: string;
+      events: Attributes[];
+    }
+  ];
+  info: '';
+  gas_wanted: '204431';
+  gas_used: '202682';
+  tx: Tx;
+  timestamp: '2022-08-13T23:24:54Z';
+  events: {
+    type: string;
+    attributes: Attributes[];
+  }[];
 }
 
 export interface PaginatedTxs extends PaginatedResponse {
-    txs: Tx[]
-    tx_responses: TxResponse[]
-}
\ No newline at end of file
+  txs: Tx[];
+  tx_responses: TxResponse[];
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index e6acb15b..ce07d33c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
         main: 'var(--text-main)',
         secondary: 'var(--text-secondary)',
         active: 'var(--bg-active)',
-      }
+      },
     },
   },
   plugins: [require('daisyui')],
@@ -28,7 +28,7 @@ module.exports = {
           ...require('daisyui/src/theming/themes')['[data-theme=dark]'],
           primary: '#666cff',
           'base-100': '#2a334c',
-          'base-200': '#252d37'
+          'base-200': '#252d37',
         },
       },
     ],
diff --git a/tsconfig.json b/tsconfig.json
index 8d7fb252..5a016a1c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,10 +3,7 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
     // "ignoreDeprecations": "5.0",
-    "lib": [      
-      "es2022",
-      "dom"
-    ],
+    "lib": ["es2022", "dom"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
diff --git a/vite.config.ts b/vite.config.ts
index d5015c6d..4be7d7e0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,18 +12,13 @@ import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 
 export default defineConfig({
   define: {
-    'process.env': {}
+    'process.env': {},
   },
   plugins: [
     vue({
       template: {
         compilerOptions: {
-          isCustomElement: (tag) =>
-            [
-              'ping-connect-wallet',
-              'ping-token-convert',
-              'ping-tx-dialog',
-            ].includes(tag),
+          isCustomElement: (tag) => ['ping-connect-wallet', 'ping-token-convert', 'ping-tx-dialog'].includes(tag),
         },
       },
     }),
@@ -36,24 +31,13 @@ export default defineConfig({
       layoutsDirs: './src/layouts/',
     }),
     AutoImport({
-      imports: [
-        'vue',
-        'vue-router',
-        '@vueuse/core',
-        '@vueuse/math',
-        'vue-i18n',
-        'pinia',
-      ],
+      imports: ['vue', 'vue-router', '@vueuse/core', '@vueuse/math', 'vue-i18n', 'pinia'],
       vueTemplate: true,
     }),
     VueI18nPlugin({
       runtimeOnly: true,
       compositionOnly: true,
-      include: [
-        fileURLToPath(
-          new URL('./src/plugins/i18n/locales/**', import.meta.url)
-        ),
-      ],
+      include: [fileURLToPath(new URL('./src/plugins/i18n/locales/**', import.meta.url))],
     }),
     DefineOptions(),
   ],
diff --git a/vue3-json-viewer.d.ts b/vue3-json-viewer.d.ts
index af598025..2ea88c15 100644
--- a/vue3-json-viewer.d.ts
+++ b/vue3-json-viewer.d.ts
@@ -1,19 +1,19 @@
 declare module 'vue3-json-viewer' {
-    import { AllowedComponentProps, App, Component, ComponentCustomProps, VNodeProps } from 'vue'
-    interface JsonViewerProps {
-        value: Object | Array<any> | string | number | boolean; //对象
-        expanded: boolean; //是否自动展开
-        expandDepth: number; //展开层级
-        copyable: boolean | object; //是否可复制
-        sort: boolean;//是否排序
-        boxed: boolean;//是否boxed
-        theme: string;//主题 jv-dark | jv-light
-        previewMode: boolean;//是否可复制
-        timeformat: (value: any) => string
-    }
-    type JsonViewerType = JsonViewerProps & VNodeProps & AllowedComponentProps & ComponentCustomProps
-    const JsonViewer: Component<JsonViewerType>
-    export { JsonViewer }
-    const def: { install: (app: App) => void }
-    export default def
-}
\ No newline at end of file
+  import { AllowedComponentProps, App, Component, ComponentCustomProps, VNodeProps } from 'vue';
+  interface JsonViewerProps {
+    value: Object | Array<any> | string | number | boolean; //对象
+    expanded: boolean; //是否自动展开
+    expandDepth: number; //展开层级
+    copyable: boolean | object; //是否可复制
+    sort: boolean; //是否排序
+    boxed: boolean; //是否boxed
+    theme: string; //主题 jv-dark | jv-light
+    previewMode: boolean; //是否可复制
+    timeformat: (value: any) => string;
+  }
+  type JsonViewerType = JsonViewerProps & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+  const JsonViewer: Component<JsonViewerType>;
+  export { JsonViewer };
+  const def: { install: (app: App) => void };
+  export default def;
+}